NFT preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • The overlay hover effect was not applied. Here is a link that will show you how to apply it.

  https://www.w3schools.com/howto/howto_css_image_overlay.asp

  • Your “NFT image” needs an Alt Tag. It should describe what the image is; it need to be readable. Assume you’re describing the image to someone.

  • The icons need to have a blank Alt Tag along with an aria-hidden=“true”* to hides it from assistive technology.

  • Wrap the icon and price in a container and use display: flex along with align-items: center to have them perfectly aligned like the FEM example.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0
• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Abdulhalık İşcan, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
  • images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0