Skip to content
OverviewSolutions
1
Comments
5

Andrew Castro

@Andrew-CastroCanada85 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Andrew Castro•85
    @Andrew-Castro

    Great job Abhirup, you're getting some HTML validation issues because of your class names. I would consider reviewing BEM methodology naming conventions: https://en.bem.info/methodology/css/#naming

    TLDR: The modifier should only have one hyphen, but two underscores.

    Marked as helpful
  • Andrew Castro•85
    @Andrew-Castro

    Hey Ryan,

    Great job so far. If you set the card width to 350px your solution gets very close to the design.

    As Old mentioned above, there's a bit of heading misuse here. I don't personally believe the eth value, days left or author text are semantically headings and shouldn't be treated as such. You could use paragraph tags here.

    Marked as helpful
  • Andrew Castro•85
    @Andrew-Castro

    This design works best if this card has a fixed width, in this case it's 350px. Avoid using percentages for widths as it doesn't lend itself well to responsive design (unless you're writing dozens of media queries to deal with it).

    Same goes for padding and margin, you can see the desktop and mobile designs have consistent spacing, so you're not going to want to use percentages for these values. Try playing with pixels or rem units for these.

    For example, the overall padding on the card is 24px on all sides, right now you're using 1.5% which is causing the padding to be a variable size based on screen width, if you set it to 24px or 1.5rem, this is be consistent with the design.

    There's more that could be improved on but I will leave you with this and help further if needed, good luck!

    Marked as helpful
  • Andrew Castro•85
    @Andrew-Castro

    There's a typo when deleting an invoice: "Confirm Deletoon"

    Looks great though

  • Andrew Castro•85
    @Andrew-Castro

    Great job on this one! You can solve 90% of your accessibility issues and HTML issues by switching those ID's of price to classes of price.