Skip to content
Submitted over 2 years ago

NFT-preview-card-component

Dileep YS•50
@Dileep001
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

I am open to learning from feedback, so please check this out!!

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    Hey Dileep, Here are some suggestions:

    • Document should have one main landmark, Contain the component with <main>.
    <main>
   <div class="container">
      //...
   </div>
</main>

    • Page should contain a level-one heading, Change h3 to h1 You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

    • An img element must have an alt attribute, to provide alternative information for an image if a user for some reason cannot view it.

    <img src="./images/image-equilibrium.jpg" alt="equilibrium NFT image">

    I hope this is helpful to you... Keep coding👍

    Marked as helpful
    0
  • CarvalhoVincent•500
    @CarvalhoVincentPosted over 2 years ago

    Great solution! You can easily fix your accessibility and html issues:

    • Replace the first div by main :
    <body>
     <main>
        "your code"
    </main>
</body>
    • Replace the <h3> by a <h1> :
    <h1>Equilibrium #3429</h1>
    • Fill in the alt="" in the img tag.
    <div class="ic-view"><img src="./images/icon-view.svg" alt="icon view" width="30px" height="30px"></div>
<img src="./images/icon-ethereum.svg" alt="Ethereum symbol" height="15px" width="10px">
<img src="./images/icon-clock.svg" alt="a clock" height="15px" width="15px">
<div class="in"><img src="./images/image-avatar.png" alt="avatar" height="25px" width="25px"></div>

    maybe you already know these things, if not I hope this helps. Happy coding !

    Marked as helpful
    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