Design comparison
SolutionDesign
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- Do not forget ⚠️ to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.
- Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible ⚠️. The image needs to be applied using the
picture
element and not thebackground-image
property, as it will not only let you use different images during different breakpoints it will let apply analt tag
description to image stating what the image is.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:📚
https://www.w3schools.com/html/html_images_picture.asp
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎆🎊🪅
Marked as helpful2@VCaramesPosted almost 2 years ago- Currently, the old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
- The web development process can be made easier and expedite the process 🚀 by implementing a
CSS Reset
.
Here are some examples that you can freely use:
- For improved accessibility 📈 for your content, it is best practice to use
rem
for yourfont-size
and other property values. Whileem
is best formedia-queries
. Using these units gives users the ability to scale elements up and down, relative to a set value.
Marked as helpful1@martinoruePosted almost 2 years ago@vcarames Thank you for your comments, they are very helpful and well explained. I'm already working on the code to apply those improvements.
1
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