Product preview card component main

Hello @Essensity-dev!

Your project looks great!

I have a suggestion about your code that might interest you:

📌 You can use the <picture> tag when you have different versions of the same image.

Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

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

I hope this helps!

Other than that, excellent work!

Hi @Essensity-dev!

This is looking good! Here are a few suggestions that might make things even better:

• For non-decorative images, consider using descriptive alt text like "Front-End Mentor QR Code" to improve accessibility for screen readers.

• Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/

• Instead of setting a fixed width on your main, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.

• Similar to width, avoid setting a fixed height on your main. This ensures the content can adjust to different content lengths.

• As @danielmrz-dev mentioned you don't have to put on a media query to change an image, instead you could use the picture tag in html and let the browser load the desired image. Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/

• Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

• A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

I hope these are helpful! Feel free to ask any questions you might have and happy coding!