product-preview-card-component-main

Hi 👋, perhaps some of this may interest you:

HTML 🧱, ACCESSIBILITY ⚖:

• To show different images depending on the device or screen size, the <picture> element is ideal:

<picture>
<source media="(min-width: 600px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-mobile.jpg" alt="description">
</picture>

• The image of the perfume is a meaningful image and in case the user can't see it, the alt text should give a description. On the other hand, the icon is a decorative image and needs an empty alt attribute so a screen reader will ignore it.

CSS 🎨:

• It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation). Also, there's no need to set a width to 100%, as block elements are full width by default.

• You might consider using relative units like rem for font-size too, since they are better for scalable layouts.

• It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful 🙂

Regards,

Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. make the container center properly use min-height:100vh which is used to ensure that a container or element takes up at least the full height of the viewport (the visible area of the browser window) regardless of the content inside it.To ensure that the card image displays properly on smaller devices, you can replace the height property with minHeight in the inline style of the card. Here's the updated code:

body {
min-height:100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: hsl(30, 38%, 92%);
font-size: 14px;
font-family: Montserrat, sans-serif;
}