Responsive NFT Card made with HTML, SCSS and BEM.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great^^

  Some suggestions would be:

  • main does not need display: block they are by default block.
  • I would put the .attribution outside of the main tag and use footer on it so that it will be its own landmark.
  • Since you are treating the img as an interactive element, it would be better to use a button and wrap the img with it, but since the img has alt it would be confusing on what the button does. Because by looking at this, clicking the image would either be modal be popping up to view the image at full or maybe page link where the user can see the full nft information. I find it hard what to do at this one 😅.
  • I saw on other submissions that the Equilibrium text and the person's name are interactive components. Maybe you have missed them out?
  • Also, for now using the h1 on the Equilibrium text seems fine but if you consider of using h2 on it and making the the h1 a screen-reader only , that would be much better. If you about this layout, on a real site, it wouldn't have only a single nft right, there will be bunch of those so not applying the h1 on a nft title will be great.
  • Use only ethereum on the icon. When using img tag, you don't need to add words that relates to "graphic" such as "icon" and others, since img is already an image so no need to describe it as one.
  • The text 0.041 ETH should be inside a p tag and not just div. Remember to always use meaningful element in a text-content.
  • The clock-icon is only a decorative image. ecorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • 3 days left should be inside p tag as well.
  • Person's image should be using the person's name as the alt value like alt="Jules Wyvern". Components like this where a person's information is presented, make sure to use their name as the person's img alt value.

  Aside from those, great job again on this one.

  Marked as helpful

  1