NFT Component using HTML & CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. The layout overall looks great. Though when you go to mobile view, the card gets this red border, I think you forgot to remove that or was that intentional?

  Anthony Weathersby already gave a great idea on this one, just going to add some suggestions as well:

  • Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Always have a main element to wrap the main content of the site. For this use main tag on the .main-container selector.
  • Great that you used a tag to wrap the nft image! Just for this one, you could use the nft name as the img alt value so that it will be clearer when a user navigates on the a tag using screen-reader. Because when they traverse in the a tag, it will announce the img alt which you might noticed is not really informative on where the link would take them. But if you use something like alt="nft Equilibrium #3429", then a user might know that the link will take them to see this nft.
  • On a site, always have a single h1. Since there are no visible text that are suitable to be h1, the h1 would be a screen-reader only heading. Meaning it will be hidden visually but present for screen-reader users. On this, the h1 would have like sr-only class and the text-content should describe what is the main-content is all about. The h1 could be placed as the first text inside the main. Have a look at this simple snippet that I have about sr-only h1. Comments are already included but if you have more queries, just let me know.
  • You could just remove the alt for each of the eth and clock-icon since they are only decorative on this one or maybe just left the current value for the eth icon since ethereum is a real currency( virtual ) but since this layout, on a real site, it would contain bunch of nft and you don't want each eth icon to be visible right. So for this one, each eth and clock icon should be having alt="" and aria-hidden="true" to the img tag.
  • Just use the person's name as the person's img tag's alt value alt="Jules Wyvern".
  • When using img tag, you don't need to add words that relates to "graphic" such as "photo" and others, since img is already an image so no need to describe it as one.

  Aside from those, great job again on this one.,

  Marked as helpful

  1
• 

  Anthony Weathersby•350

  @acweathersbyPosted almost 3 years ago

  @nickfwilliams, your use of the ::before pseudo-element is probably one of the better methods to achieve the hover effect. It's compact and can be easily applied to other elements without having to modify HTML markup. Good job!

  Marked as helpful

  0
• 

  Nick Williams•320

  @nickfwilliamsPosted almost 3 years ago

  Hey both - that's a huge help, thank you so much for the responses.

  @Raymart - you're completely right, that red border snuck through 'quality control' so thanks for the spot! Some really useful and actionable advice in your list - I especially find the point on having an h1 tag even if it's only for screen readers especially valuable. I did wonder as I was writing the HTML whether I should've made 'Equilibrium #3429' an h1 (and then style it down) but your solution makes sense. Much appreciated.

  1