Product preview card component challenge

Hi Joachim,

Take a look at this codepen I made. I made a simple 2 column layout with flexbox that is responsive without the use of a media query. If you use flex-basis with a min-width you can get the desired cut-off point.

For the image you could use the picture tag in your HTML to change the image at a certain resolution, for example:

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

Some other things I saw in your code:

• I see you used a h3 heading before a h2 heading and no h1 heading. Use a h1 (only one per page) when you are using headings and always use them in order. Headings are used to index your page and by screen reading software to navigate the page.

• Put your "main" code in your HTML file (in this case the card) between the <main></main> tag and the attribution between the <footer></footer> this will solve your accessibility report error's.

• Always use the alt attribute when using images, again for better accessibility of your page.

• You should also use em/rem for your font sizes besides the padding and margins.

Something that might be interesting is using a full css "reset" (I see your already doing a bit of resetting with box-sizing). Take a look at this reset from Josh Comeau which does alot with just a few lines to get a clean start with every project.

Happy coding! en succes met de volgende challenge.