NFT Preview Card Component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  This is touching all screen edges on mobile and the attribution is overlapping the card content. There should be space between the component and screen edge according to the design.

  There are some big problems with the html but are easy to fix.

  1. Anything with a hover style in the designs must be an interactive element. That's what having a hover style means, you expect it to be clickable. But you have not used interactive elements, so they are not clickable for keyboard or screenreaders etc

  2. Text should never be in a div or span alone. Use a meaningful element like a paragraph tag

  3. Look up how to write alt text and how to treat decorative images. All the alt attributes on this need rewriting

  I hope that helps

  Marked as helpful

  0

  ---

  

  Shravan Kumar•50

  @shravankumartalabhaktulaPosted over 2 years ago

  @grace-snow Hi Grace, thank you so much for your detailed feedback.

  • "Anything with a hover style in the designs must be an interactive element." -- you mean <a></a> or <button></button> tags?

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @shravankumartalabhaktula in this case yes those are the interactive elements for this challenge

  Marked as helpful

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge.

  Keep up the good work

  Your solution looks great however I think that your user avatar does not need a white border.

  With regards to your question on semantic tags you can read more information here

  https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

  I hope that helps

  Cheers Happy coding 👍

  0

  ---

  

  Shravan Kumar•50

  @shravankumartalabhaktulaPosted over 2 years ago

  @TheCoderGuru Oh Thank you for your feedback Shashree.

  0