Submitted about 2 years ago

NFT-preview-card-component

Dileep YS• 50

@Dileep001

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

Ahmed Bayoumi• 6,740

@Bayoumi-dev

Posted about 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

CarvalhoVincent• 500

@CarvalhoVincent

Posted about 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

Please log in to post a comment

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