NFT Preview card with HTML CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card"> with the main tag and <h3> with <h1> to fix the accessibility issues.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To Give .card__product-img img a max-width: 100% instead of width: 100%.

  Hope am helpful HAPPY CODING

  Marked as helpful

  1

  ---

  

  Ahmed Essam•60

  @AhmedEssam01Posted almost 2 years ago

  @Hassiai Thanks for helping me Its says "This video isn't available anymore"

  1

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @AhmedEssam01 thanks for letting me know , i just checked the video is still available . i think you should know this

  Marked as helpful

  1

  

  Ahmed Essam•60

  @AhmedEssam01Posted almost 2 years ago

  @Hassiai Sorry, It's worked now i miss clicked all link. Thanks for your help again

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The NFT alt tag description needs to be improved upon. This is what your users are purchasing. You want to describe what the image is; Assume you’re describing the image to someone over the phone.

  • Along with the blank alt tag, you also want to include the aria-hidden=“true” to your “icons” to fully remove them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The profile image is not decorative. The alt tags should not be blank. It should state the following; “Headshot of -person’s full name-“

  More Info:📚

  Headshot Alt Text

  • Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Ahmed Essam•60

  @AhmedEssam01Posted almost 2 years ago

  @vcarames I am really appreciate your help thanks very much for this tips♥

  1

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @AhmedEssam01

  Glad I could help!☃️

  Keep it up!

  Marked as helpful

  1