Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card Component

@shravankumartalabhaktula

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

T
Grace 29,730

@grace-snow

Posted

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

0

@shravankumartalabhaktula

Posted

@grace-snow Hi Grace, thank you so much for your detailed feedback.

  • "Anything with a hover style in the designs must be an interactive element." -- you mean <a></a> or <button></button> tags?
0
T
Grace 29,730

@grace-snow

Posted

@shravankumartalabhaktula in this case yes those are the interactive elements for this challenge

Marked as helpful

0

@shashreesamuel

Posted

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 👍

0

@shravankumartalabhaktula

Posted

@TheCoderGuru Oh Thank you for your feedback Shashree.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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