Responsive product preview card using picture tags and flexbox

Hey there! 🙋🏽‍♂️

Congrats on finishing the challenge! ✅

Your project looks awesome!

Here's a tip that might interest you:

📌 When you have different versions of the same image, consider using the <picture> tag. Using it as a background works, but in this case, the image is not only decorative, it's part of the content.

This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

Hope you find this useful!

Great job overall!

@elisilk

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution 🎉

• Use of semantic HTML elements
• Clear descriptive CSS classes
• Use of CSS custom properties

Things you could improve ✍️

• You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

• Try using using relative CSS units like rem and em they make your layout more adaptable.

• I recommend looking into the picture element to achieve the desired effect of having different images on different viewports.

• I recommend using a p tag for the category.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎