Design comparison
Solution retrospective
Very enjoyable component to build. Offered the opportunity to focus on the accessibility practices.
Look forward to any feedback or where to improve.
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML ๐ท๏ธ:
- You could use the
<del>
tag to indicate the price that was before the discount. Additionally, you can use asr-only
class to describe the discount. This will help screen reader users to understand that the price was discounted.
- The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the
<img>
tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.
CSS ๐จ:
-
Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this lectures:
- 1. Should I change the default HTML font-size to 62.5%?.
- 2. The Surprising Truth About Pixels and Accessibility - The 62.5% trick.
- 3. A comment on the 62.5% trick.
Credit to grace-snow and vanzasetia.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0@JF-D3VPosted about 1 year ago@MelvinAguilar
Thank you for the helpful feedback. Will definitely look into the above ๐๐ป
0 - You could use the
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