Mobile First - NFT Preview Card Component

Community feedback

• 

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  Hello Safwan,

  You need to make some change in the HTML:

  1- I would recommend using h1 instead of h2, your page should contain a level-one heading.

  2 - Your Article needs heading. Consider using h2-h6 elements to add identifying headings to all articles. Or I suggest using <div> instead of <article>.

  3- Think about when you use the Web. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. So you should wrap the Equilibrium image and the other elements with an anchor tag.

  4- I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other SVG icons you can put it inside pseudo-elements like ::before or ::after, as the icons are all decorative.

  5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)

  6- Don't forget to write a good "alt" text to your image. Try to not use words like image or hyphenated phrases as if it's code, it is a human-readable description.

  Marked as helpful

  0

  ---

  

  Mohammad Safwan•110

  @safXcodePosted over 2 years ago

  @macdeesh thank you so much for looking at my code, i will try to fix this as soon as possible

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Safwan, good job! I took some time to look at your code and have some ideas for improving it:

  • add main tag and wrap the card for improve the Accessibility
  • add descriptive text in the alt attribute of the image
  • use div and not article for different inside section of card
  • to make it look as close to the design as possible add overflow: hidden and border-radius: 1rem to main-image class
  • remove all margin from container class
  • use flexbox to the body for center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Overall you did well 😉

  Hope this help and happy coding!

  0

  ---

  

  Mohammad Safwan•110

  @safXcodePosted over 2 years ago

  @denielden thank you so much! i will try to fix this as soon as possible

  1