Skip to content
Submitted almost 2 years ago

NFT Component Using HTML and CSS

Coty B•405
@cotybro
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

Took a break now getting back into things! Open to all feedback and comments!!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Coty B! Welcome back! 👋

    Here are a few suggestions for improvements.

    • Wrap the Equilibrium image with an anchor tag. Any element that has interactivity should be wrapped by an interactive element.
    • Wrap <a href="#" class="component-title">Equilibrium #3429</a> with an <h1>. Each page should have one <h1>.
    • Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (<img>) so the screen reader will pronounce it as an image.
    • Set box-sizing: border-box on all elements instead of only on the <body> element using universal selector (*).
    • Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN
    • Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

    I hope this helps. Happy coding! 😄

    Marked as helpful
    0
    Coty B•405
    @cotybroPosted almost 2 years ago

    @vanzasetia thank you for all the helpful feedback!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @cotybro

    You are welcome! 👍

    0

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