full Responsive with HTML and CSS. (Product preview card component)

Hello @Hamza0053!

Your solution looks great!

I have a couple of suggestions for improvement:

• For semantic reasons, only use one <h1> per page - this should represent the main heading/subject for the whole page.

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

• Also, still about semantic HTML, you can replace your div.wrapper with main.wrapper.

All these tag changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

PiCTURE TAG 📸:

• Looks like you're currently using media queries for swapping different version of image, So let me introduce the picture element.

• The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.

• Example:

<picture>
  <source media="(max-width: 768px)" srcset="small-image.jpg">
  <source media="(min-width: 769px)" srcset="large-image.jpg">
  <img src="fallback-image.jpg" alt="Example image">
</picture>

• In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.

• Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

• If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Greetings mate! I see that you have done a great job, I can mention some details to improve your solution:

• You can add a short description to your image with the alt attribute, this helps the accessibility of the site. More info
• You can also review this documentation on the label <picture>