NFT preview card component

Community feedback

• 

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted 11 months ago

  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