Design comparison
Solution retrospective
Any feedback is appreciated! I appreciate you all! :)
Thanks!
- Tyler F.
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The image’s
alt tag
description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- This component requires the use of two images 🎑 at different breakpoints. The
picture
element will facilitate this.
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
- 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.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1@Tyler430Posted almost 2 years ago@vcarames Hey!! Would you mind explaining about the 2 picture breakpoints? And where can I find what the solution is suppose to have in the code without seeing the source?
0@VCaramesPosted almost 2 years ago@Tyler430
Regarding the first question:
This challenges uses two images at two different breakpoints; one mobile and one for desktop view.
The reason this is done, is to save on bandwidth and make it easier when the component is viewed on a mobile device which are not as powerful as a desktop computer.
The
picture
element allows the browser to choose the proper image to display depending on the size of the screen the component is being displayed on.Regarding the second question:
This where your skill and knowledge comes into play. As a Web Developer you are responsible to know the most efficient approach to solve a problem.
Marked as helpful1@Tyler430Posted almost 2 years ago@vcarames Oh I see, would the best approach be to change the image using
@media
queries? Thanks for your helpful info!Thanks!
- Tyler F.
0@VCaramesPosted almost 2 years ago@Tyler430
The
picture
element will let the browser choice which image is displayed; nomedia query
needed for the images.Marked as helpful1 - The image’s
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