Skip to content
Submitted over 1 year ago

NFT preview card component looking as close to the design as possible.

Vitor Martins•30
@Viti-Martins
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What could be refactored in this could to make it looks even better ? Accepting any kind of feedback.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Vitor! 👋

    A couple of suggestions:

    • Fix invalid HTML: <h1> must not be a child element of <a>. You can use Caninclude to check whether an element can be inside another element.
    • No external links: You do not need to have target="_blank" to every link. Only use it if the users will lose something if the links do not open in a new tab. For example, the links that are required to open when the users fill in a form.
    • No extra element: You do need a <div> for the NFT card. You can use the <main> element instead. It is possible by making the <body> element as the flex container of the card instead of using the <main> element.
    • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS and Why font-size must NEVER be in pixels
    • Unitless line-height: Always use unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

    I hope my suggestions help you. Have fun coding! 😄

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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