Skip to content
Submitted over 3 years ago

NFT Preview Card Component

accessibility, semantic-ui
Shravan Kumar•50
@shravankumartalabhaktula
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • I have difficulty in implementing accessibility to the semantic tags. I would like to know more about that. Could you point me to any resources?
  • I feel like I have written some redundant code in CSS file. Could you please make some time to review my CSS code and HTML structure tags including accessibility labels?
  • I have not implemented any media queries but started the project with mobile first design approach. When I expanded to desktop view, it was looked fine for me. May be I'm biasing myself on my code. Could you please review and provide me with feedback on responsiveness?

Thank you for your time.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi

    This is touching all screen edges on mobile and the attribution is overlapping the card content. There should be space between the component and screen edge according to the design.

    There are some big problems with the html but are easy to fix.

    1. Anything with a hover style in the designs must be an interactive element. That's what having a hover style means, you expect it to be clickable. But you have not used interactive elements, so they are not clickable for keyboard or screenreaders etc

    2. Text should never be in a div or span alone. Use a meaningful element like a paragraph tag

    3. Look up how to write alt text and how to treat decorative images. All the alt attributes on this need rewriting

    I hope that helps

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge.

    Keep up the good work

    Your solution looks great however I think that your user avatar does not need a white border.

    With regards to your question on semantic tags you can read more information here

    https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

    I hope that helps

    Cheers Happy coding 👍

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord