Nft-preview-card using CSS Utility Classes and Semantic html

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Nice work with this one. Looking at your solution, I would recommend the following for you...

  • Add display: flex; and align-items: center; in the .price and .time rule set
  • Add display: flex; and justify-content: start; in .creator rule set
  • Remove border: 2px solid hsl(var(--clr-white)); in the hover state and add it in .avatar-img , adjust it with 1px
  • Include description with the alt in img tag
  • Remove / uncomment the attribution, wrap it with footer tag and add your name and links to your work/portfolio

  Overall, you did well. Hope this helps and Keep it up!

  Marked as helpful

  1

  ---

  

  Farzeen Kistnareddy•60

  @FarzeenKistPosted almost 3 years ago

  Hey Rio, Thank you for the feedback, I will make the additional changes in the near future. Have a good evening/day : )

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  hello @FarzeenKis , I have some suggestions regarding your solution:

  • Anything with a hover style in a design means it's interactive, you need to add an interactive element<a> around the image, Equilibrium #3429and Jules Wyvern.

  • Add obviousfocus-visiblestyles as well to aid keyboard users

  • The images don't need filled alt. They are decorative images, so alt attribute should be left intentionally blank(as you did )and You can add aria-hidden: true to ensure the images are always ignored by screen readers

  • Text should never be in spans alone. Use a meaningful element.

  • You can simply use unordered list <ul> to wrapclass="details and in each list item <li>would have <img > and <p> .

  Hopefully this feedback helps.

  1

  ---

  

  Farzeen Kistnareddy•60

  @FarzeenKistPosted almost 3 years ago

  Hey Phoenix, thanks for the feedback and giving out valuable tips. Will be making the changes soon, have a good day!

  1