NFT-Preview-Card-Component

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hello there, Aniket Saini! 👋

  Congratulations on finishing this challenge! 🎉

  Here are some suggestions for improvements.

  • Currently all the elements that have interactivity are not interactive elements. For example, the NFT image should be wrapped by an anchor tag, the "Equilibrium #3429" also should be wrapped by an anchor tag (make the anchor tag as the child element of the h2).
  • Always wrap text content with a meaningful element like a paragraph element whenever possible.
  • Alternative text should not be hyphenated (like code). Also, it should not be containing the word "image" or "icon" because the semantic meaning of the img element is already enough to make the screenreaders pronounce them as an image.

  Hope this helps! 🙂

  12

  Marked as helpful
• 

  Azhar•600

  @azhar1038

  Posted almost 3 years ago

  Hi Aniket, nicely done!

  I noticed that you have used @media screen and (max-width: 1440px) to handle the sizing, so in larger screen > 1440px, your card is taking whole width and breaking the design. You should not use such media query. It is present in design document to tell that frontendmentor uses that to generate images.

  Another problem is your eye image that appears on hover, it is not responsive, so in smaller screen it does not cover whole picture. You can wrap your images in div and position it absolutely w.r.t that inner div instead of main container.

  Hope it helps :)

  11

  Marked as helpful