@correlucas
Posted
👾Hello Anita uka, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!
Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:
A shortcut to deal with the multiple images in this challenge is by using the <picture>
tag instead of importing this as an <img>
or using a div with background-image
. Use this tag to make the image change between mobile and desktop is to use <picture>
instead of <img>
wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture>
tag and use the html to code to set when the images should change setting the device max-width
depending of the device (phone / computer) Here’s a guide about how to use picture
: https://www.w3schools.com/tags/tag_picture.asp
I saw that you've used some CSS reset and I suggest you to use this modern CSS reset that is really complete and make sure you'll get ride from a lot of default css that gives you problem. https://piccalil.li/blog/a-modern-css-reset/
✌️ I hope this helps you and happy coding!
Marked as helpful
@neetauka
Posted
@correlucas thank you so much sir. It was really helpful