NFT Card

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The overall layout looks great, but the eth-icon and clock-icon are missing. Checking the path for each img will be really awesome.

  Here are some suggestions for the site.

  • Add a min-height: 100vh on the main tag so that it will occupy full height and will center the content vertically.
  • You could replace the article to just div since if you imagine that this were a real site, this would contain bunch of nft cards and they will just act as regular content. Therefore a div would be better.
  • The :hover state for the image is currently missing, adding that one would be really nice. Just keep in mind though that adding that would signify that the image is interactive so you need to add either button or a tag to like wrap the image so that interactive element will be present.
  • figure is not needed on this one, but if you insist, you can use the nft name as the figcaption because figure is used alongside with their figcaption.
  • The nft name is treated as interactive as well, so adding an a tag to wrap the heading-text will be really nice.
  • For the nft-icon and clock-icon, you should have used a ../ value instead of /. Root path (/) doesn't work in github so you need to be using the exact path of the file you want to use.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • When using img tag, do not forget to add the alt attribute, whether the value is empty or not. Because by not including it, screen-reader will instead read the source path of the image which you don't want. So always include it. Referring to the person's image. Also, since the person's name is already present, you can use that as the person's image alt value since it makes sense to do so.
  • Instead of span for the person's name, use an a tag because span is not interactive unlike a tag.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  HK273•530

  @HK273Posted almost 3 years ago

  @pikapikamart thank you so much, really appreciate the detailed feedback!

  1