Design comparison
SolutionDesign
Solution retrospective
This is my shopping card, it was interesting to make it. I battled a lot with the change between screens and this is the best I could do. Can't wait to receive your useful comments. Thanks.
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here is some feedback to further improve your code:
- Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
- The background color should be applied to the
body
⚠️ so that it takes up the entire screen.
- The
main
element should be wrapping the entire card ⚠️.
- The image’s
alt tag
description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.
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 how it looks like implemented: 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 helpful1
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