NFT preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Robin,

  Congratulation on completing this challenge. I have some suggestions regarding your solution:

  HTML

  • Page should contain a level-one heading. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only class and use <h2> for Equilibrium #3429. Or you can use <h1> for the Equilibrium #3429

  • The link wrapping the equilibrium image(image-equilibrium ) should either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • For any decorative images, each img tag should have empty alt=""` and add aria-hidden="true"`` attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

  • Theicon-viewimage doesn’t really need to be in the html, you can use CSS for this as there is no need for another clutter in the HTML.

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  • For the inner part of the card (the icons and the following text )you can use unordered list<ul>. In each <li> should be <img> and ``<p>`that way you can align them centrally (then you don’t need any position relative ) .

  • The avatar's alt should not be empty. You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  CSS:

  • Add min-height: 100vh to the body that let the body grows taller if the content outgrows the visible page instead.

  • It will be very good usage of rem and em on the elements that are crucial like font-size, padding, and margin.

  Aside these, Great work! Hopefully this feedback helps.

  0