Skip to content
Submitted 12 months ago

NFT preview card

Michael Degorre•160
@MDEGORRE
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

It was tough setting the background color on hover.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    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.

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