Design comparison
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
- @grace-snowPosted over 2 years ago
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.
-
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
-
Text should never be in a div or span alone. Use a meaningful element like a paragraph tag
-
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 helpful0@shravankumartalabhaktulaPosted over 2 years ago@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@grace-snowPosted over 2 years ago@shravankumartalabhaktula in this case yes those are the interactive elements for this challenge
Marked as helpful0 -
- @shashreesamuelPosted over 2 years ago
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@shravankumartalabhaktulaPosted over 2 years ago@TheCoderGuru Oh Thank you for your feedback Shashree.
0
Please log in to post a comment
Log in with GitHubJoin 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