NFT preview card component with html css/sass

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @matheusmorenocf, some suggestions to improve you code:

  • You're not using the Alt Tag properly. The NFT image is critical to your card, you want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • For you profile image, same as above. Tell the user that is a headshot of Jules Wyvern.

  • The image needs to be wrapped in the Anchor Tag.

  • Your CSS Reset is extremely bare, you want to add more to it. Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that 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
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Matheus Moreno, Congratulations on completing this challenge!

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

  1.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

  2.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

  To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  4.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!

  0