NFT preview card component using flex box

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 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!

  01

  Marked as helpful
• 

  Corvida Raven•680

  @SheGeeks

  Posted over 3 years ago

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

  01