Design comparison
Solution retrospective
learn css grid
What challenges did you encounter, and how did you overcome them?center the div
What specific areas of your project would you like help with?none
Community feedback
- @VCaramesPosted about 2 years ago
Hey @romariojsx, some suggestions to improve you code:
- For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images
Picture Element will allow your to switch between images in different breakpoints and makes your site load faster by saving bandwidth.
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
https://web.dev/learn/design/picture-element/
-
Once you fix the image implementation, you'll want to include an Alt text tag with them. Inside that Alt Tag you want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.
-
the button
:hover
color is incorrect. You want to check you "style-guide" to get the correct colors. -
Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
Happy Coding! 👻🎃
Marked as helpful1 - @romariojs94Posted about 2 years ago
Thank you very much. I Appreciative. I am Improving my code and applying your advice. the color available on style-guide is Very dark blue: HSL(212, 21%, 14%). Correct is a dark green and not dark blue. your example is amazing.
- English is not my first language, anyway, we need to understand. But I use Grammarly as support haha!.
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