NFT preview card component

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there @MustafaKemalV 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.
  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Implement CSS custom properties to define and utilize project colors more easily.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Jules Wyvern".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  Marked as helpful

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Hey, you did really well!

  I can only make one correction regarding how to center the content, for this you can use the same properties that you used in the container but in the body:

  body {
      font-family: 'Outfit', sans-serif;
      background-color: hsl(217, 54%, 11%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
  }
  
  .container {
      max-width: 22rem;
      /* margin: 0 auto;  This no longer works */
  }
  

  The rest is wonderful! 🤩

  Marked as helpful

  1