NFT preview card component solution

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Jonathan, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing 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
  • add descriptive text in the alt attribute of the images
  • use h1 for the title of card and p for the text... not a div
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px or % use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi Jonathan Koh, congrats on completing this challenge!

  I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:

  To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .flex, .price, .time {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  

  Save your time using a CSS RESET to remove all default settings that are annoying as the margins, paddings, decorations and optimize it making 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/

  ✌️ I hope this helps you and happy coding!

  0
• 

  Jonathan Koh•310

  @JonKohJJPosted about 2 years ago

  Your feedback is appreciated!

  0