NFT preview card component

👋 Hi Quỳnh Giao!

🎉 Congratulations on finishing this challenge! I have some feedback on the solution:

• Accessibility
  • 👍 Good job on making all the page content inside the landmarks.
  • In this case, all elements that have :hover or :active states should be interactive elements, which in this case they should be link elements.
  • Always wrap text content with meaningful tag (p). Never use span or div as the main element that wrap the text content.
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative except the avatar. For the equilibrium and eye icon, it depends on your markup and what you are trying to achieve.
  • Alternative text for images should be human-readable (informative), not hyphenated.
  • Some resources to learn about the alternative text.
    • Axess Lab | Alt-texts: The Ultimate Guide
    • Images Concepts • WAI Web Accessibility Tutorials
  • You can make the Creation of Jules Wyvern text as the figcaption for the avatar image.

<figure class="creator_ava">
  <img src="./images/image-avatar.png" alt="avatar">
  <figcaption>
     <p>Creation of <span>Jules Wyvern</span></p>
  </figcaption>
</figure>

• The hr element is a meaningful element. It means a separator. In this case, the content below it also the part of the content above (not separate). So, I would recommend using CSS border-top to make the line.
• Styling
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.

That's it! Hopefully, this is helpful!