Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @JMartinez904, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Using
<picture>
you’ve more control over the elements and its better than using the product image as<img>
orbackground-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
0 - @VCaramesPosted about 2 years ago
Hey @JMartinez904, great job on this project!
-
For accessibility purposes, its better to use em instead of px for your media queries.
-
When using different images for responsiveness, it’s far more efficient to use the <picture> element.
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
Heres a link with more details on it: https://www.w3schools.com/html/html_images_picture.asp
Happy Coding!
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