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

NFT preview card

@MDEGORRE

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


What challenges did you encounter, and how did you overcome them?

It was tough setting the background color on hover.

Community feedback

T
Grace 30,550

@grace-snow

Posted

Sorry to tell you this is missing all the essential interactive html elements and structure shown in the design.

If the design shows a hover style that means there should be an interactive element there. It's indicating something would be clickable. But you have no links in this.

Instead you have

  • no main landmark
  • an incorrect use of the header element. There is nithibf appropriate for a header landmark in this design.
  • lots of misused section elements. This whole card could be one section, but not anything within it.
  • misuse of the alt attribute (it should be empty on decorative images, or describe meaningful images).
  • a footer inside the component that should be outside of main.
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