Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHi Rahul Saini, congrats on completing this challenge!
I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:
1.You need to include the title for you PAGE. Do that inserting in the <head> the tag <title> โ
<title>Product Preview Component - Front End Mentor</title>
2.THE PICTURE TAG 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
3.It's even better to use
relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.โ๏ธ I hope this helps you and happy coding!
1@RahulnerdyPosted about 2 years ago@correlucas Thankyou so much i highly appreciate your feedback. You are the Best.
1@correlucasPosted about 2 years ago@Rahulnerdy You're welcome Rahul! Then say me if worked for you. Keep it up
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