NFT preview card component using flex box

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Arthur!

  🎉 Congratulations on finishing this challenge!

  Yeah, the most challenging part is to create the hover effect and at the same time making sure that it is accessible.

  I have some feedback on this solution:

  • Accessibility
    • I would recommend using 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.
    • Always wrap text content with meaningful tag (p). It might not be accessible if you are using span as the main element that wraps the 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 this case, the Ethereum and clock icons are decorative.
    • Some resources to learn about the alternative text and images.
      • Axess Lab | Alt-texts: The Ultimate Guide
      • Images Concepts • WAI Web Accessibility Tutorials
    • The hr element is a meaningful element (separator). I would recommend using border to create the line.
  • Styling
    • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead. If you want to see the problem, you can try viewing your solution on mobile landscape mode.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  0

  ---

  

  Arthur Roberts•410

  @arfarobsPosted almost 3 years ago

  @vanzasetia

  Thank you so much for the feedback. I followed your advice and updated my solution.

  Accessibility is something I am yet to fully understand, so your feedback is really helpful.

  It would seem that your skills are much better than mine, but if there is any way I can be of assistance in the future please let me know

  0
• 

  Corvida Raven•680

  @SheGeeksPosted almost 3 years ago

  The box-shadow was a little tricky as well, but I think you did a great job on it.

  0

  ---

  

  Arthur Roberts•410

  @arfarobsPosted almost 3 years ago

  @SheGeeks Thank you

  0