NFT preview card component - HTML & CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @dannygomes,

  I have some suggestions regarding your solution:

  • Use <a> to wrap the main image loke this : <a class="img-hover" href="#"><img src="./images/image-equilibrium.jpg" alt="NFT"></a>.

  • Images must have alt text.

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

  • The avatar 's alt should not be Creator , it's meaningless. you can set Jules Wyvern to it.

  • Read more how to write an alt text

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • You can use an unordered list<ul> to wrap class="center"and in each <li>, there would be <img > and<p> .

  • width: 22rem;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • I recommend not to style on ID'S . The best way to do that is single class selectors

  You might have a look at my solution , it might my helps.

  Overall, your solution is good, Hopefully this feedback helps.

  Marked as helpful

  1
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Hi Danny, great job on completing this challenge.

  However I have some tips for improving your code:

  • Links must have discernible text. To fix this add an aria-label: img-hover to your link.

  • Also always add an alt attribute to your img elements to allow screen readers to know the thing on the website.

  Marked as helpful

  0