Product preview card Component

Hey @Bunchydo,

What i try to do recently is look for both mobile and desktop design, so i can decide how to approach like how to start and what will change then start with mobile. When you write the HTML code, most of the times it is mobile layout just without styles

Use a modern css reset for every project. It will make your life a little bit easier.

Headings (h1-h6) are not for the sizes. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. There is a visual for better understanding here, under nesting

Wrap the content in a main landmark If will be times to use other landmarks too.

Looks like you know flexbox, but used absolute positioning for centering. For future challenges you can use this or grid for centering.

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

Also instead of pixels use em/rem units for better responsibility

Kevin Powell made a video about this challenge. I recommend you to check it. He also have a couple for em/rem units.

Hello Bunchydo, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. 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 desktop + mobile.

Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

See the example below:

<picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

The rest is spot on.

Hope it’s helpful to you. 👍