nft card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @DianaVCruz, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Its amazing that you’ve customized some interaction, you’ve to pay attention because when you add some hover effects you've to think that for the mobile version there's an issue that the elements with hover get stuck on the active state of the hover until you click on something else. Something you can do to avoid this problem on mobile, the stick hover, is to add a media query saying that you want hover effects only on devices that are not touch. So you can use:

  @media (hover: hover) {
  {ADD HERE ALL THE CLASSES WITH HOVER EFFECTS TO DISABLE IT ON MOBILE}
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Diana, You have done a good work! 😁

  2 little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @DianaVCruz, some suggestions to improve you code:

  • Delete the width and change the height to min-height in your Body Element.

  • The Background Image Property is only to be used on decorative images. NOT images that add value and serve a purpose. For this challenge you want to use the Image Element.

  • Once you fix the image issue, You'll want to include an Alt Tag with it. You want it to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • The "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site

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

  This is not enough:

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  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/

  Happy Coding!

  Marked as helpful

  0