Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card component

Asma 80

@asmablad

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback will be appreciated! Thanks

Community feedback

Ahmed El_Bald 1,020

@Ahmed-Elbald

Posted

Hello Asma,

Generally, I think you've done a great job. Your solution looks good and close to the original design. However, I've some subtle notes that you might find helpful:

  • Your solution lacks some features when it comes to accessibility. You should wrap the whole card in an article element as it seems like a standalone element (it gives meaning on its own). When presenting the price and the days left, you can use a dl element whereas hiding the terms using a .visually-hidden class, so that it makes sense for disabled users. It should be something like that:

    <dl>
      <dt class='visually-hidden'>Product price</dt>
      <dd>0.041ETH</dd>
      <dt class='visually-hidden'>days left</dt>
      <dd>3 days left</dd>
    </dl>
    

    You can find more about the dl element here. You can also read about the .visually-hidden class here

  • This is not important, but you should add some padding to the top and bottom of the page. It would also be great if you made effects (on hover state) have some duration using the transition-duration property

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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