NFT preview card HTML-CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Youssef!

  🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

  • Accessibility
    • 👍 Good job on using main landmark!
    • On this challenge, use interactive elements (a) for any elements that have :hover or :active states.
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
    • Why are using label element? label element is used to label input element. I would recommend using p element instead of label element.

  <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg"></svg>
  <label>0.041 ETH</label>
  

  • All the icons are decorative and because you are using inline svg then add aria-hidden="true" attribute to the svg to prevent the screen reader from pronouncing them.

  <svg aria-hidden="true">
  </svg>
  

  • For the avatar, you can use the author's name as the alternative text of it.
  • For the equilibrium image, I would recommend adding the alternative text that says preview Equilibrium. The alternative of the image would work as the text content for the a element.
  • Use CSS border instead of hr element. hr element has a role as a separator. In this case, all the content below it should not be separated.
  • I would recommend writing a good title for your webpage.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • For the styling, overall the card is smaller than the design. You can try to adjust everything until it looks similar to the design.
  • Best Practice (Recommended)
    • Remove the xmlns attribute from the svg. Reference: hail2u/html-best-practices GitHub repo
    • Write your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including you, yourself).

  That's it! Hopefully, this is helpful!

  Marked as helpful

  2

  ---

  

  Youssef•20

  @youzh00Posted almost 3 years ago

  @vanzasetia What a feedback i really appreciate your help, thanks a lot.

  1