fles

Solution retrospective
I will try to use technologies like bootstrap in the next tasks.
What challenges did you encounter, and how did you overcome them?I'm having a bit of a hard time making it responsive because I don't use any additional frameworks like bootstrap.
What specific areas of your project would you like help with?In this project I need to insert images into css and I got an error while inserting them into html, this error took a long time.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
Hi JavohirXolmamatov, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:
Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the
<picture>
tag instead of importing this as an<img>
or using a div withbackground-image
. Use it to place the images and make the change between mobile and desktop, instead of using adiv
orimg
and set the change in the css withdisplay: none
with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. 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 desktop + mobile.Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp
See the example below:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;"> </picture>
The rest is excellent.
I hope you find it useful. 👍
Marked as helpful - @MrNaturi
You should work on your fonts and placements also your typography needs some work
Marked as helpful
Join 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