NFT Preview Card Component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hey Paul, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • set background: hsl(217, 54%, 11%) to body
  • add main tag and wrap the card for improve the Accessibility
  • use img element for the image and not styled div
  • to make it look as close to the design as possible add width: 20rem to .main-wrapper class and remove all padding
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • use p tag instead of h4 for the text of card
  • using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • use flexbox to the body to 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
  • instead of using px or % use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁

  Marked as helpful

  0