Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-First Solution using flexbox and no frameworks

P

@julian-hartl

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everybody, I known that this challenge is pretty easy and straightforward but I'd still be happy about some feedback. I would really like to know, if I did an ok-job at structuring my html or if overcomplicated things. Maybe I could add some classes to remove duplicated css or remove some divs from my markup. Thanks in advance :)

Community feedback

bikeinman 1,080

@BikeInMan

Posted

I personally think you did it great job, even though the validator may complain of not having a h1 or h2.

Marked as helpful

0

P

@julian-hartl

Posted

@BikeInMan Thank you very much :)

0
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi, Julian Hartl! 👋

Nice job on this challenge! 👏 Your solution looks great! 😀

A few things I'd like to suggest are,

  • Setting the alt text for the images that are the icons in the card component to an empty string. That's because the purpose of those images are mostly decorative and need not be announced by assistive technology like screen readers. Leaving the alt text to those images empty will ensure that the images are ignored by screen readers so that they can focus on the other, more important content on the page.
  • Adding a heading to the card. Even though the title of the card is a link, you can still wrap the text itself in a heading tag and then wrap that heading element in a link tag. 😉
  • Perhaps looking into the BEM methodology to better name and organize your classes. It's a popular way of naming classes that would work great in a component such as that in this challenge. Learn more about BEM here.

Hope you find those couple of tips helpful. 🙂

Keep coding (and happy coding, too)! 😁

Marked as helpful

0

P

@julian-hartl

Posted

@ApplePieGiraffe Thank you very much! It is so great that resources like these exist. I will definitely look into the BEM methodology!

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@JuHar-dev

Glad to help! 😀

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord