Design comparison
Solution retrospective
I complete this challenge much quicker. For next time I will be more careful with line-height, and do not forget to add this property.
What challenges did you encounter, and how did you overcome them?The screenshot generated by Challenge Hub doesn't look the same, so I spent a lot of time adjusting line-height property.
What specific areas of your project would you like help with?For this time I do not need help, as I'm familiar with HTML&CSS
Community feedback
- @alberto-rjPosted 8 months ago
Hi, @grifano! Congratulations on investing your time and leveling up with the challenge, QR code component.
I have some code suggestions about Accessibility that can help you improve your solution to this challenge.
You have Low-contrast text on the footer and card
Low-contrast text is difficult or impossible for many users to read. This tool can help you solve this problem.
Do not use the
aria-label
attribute for non-interactive elementsThe
aria-label
attribute defines a string value that labels an interactive element. Learn more hereFor the footer of the page, you could use the
footer
tag because it express this semantic meaning. Learn more here👎 Don't
<div aria-label="attribution" class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://www.grifano.com">Serhii Orlenko</a>. </div>
👍 Do
<footer class="attribution"> <p> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://www.grifano.com">Serhii Orlenko</a>. </p> </footer>
So, @grifano, these are my code suggestions about Accessibility for your solution. I sincerely hope they can help you in some way.
Keep learning, coding and sharing! 🌟
Happy coding! 🚀
Marked as helpful1@grifanoPosted 8 months ago@alberto-rj Hi Alberto, this is wonderful feedback! I've adjusted my code, and it looks great now. Thank you 😊
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