Responsive Product Preview Card

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 📄:

• Wrap the page's whole main content in the <main> tag.

• You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

  Example:

  <picture>
      <source media="(max-width: 740px)" srcset="./images/image-product-mobile.jpg">
      <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}">
  </picture>
  

CSS 🎨:

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. Source 📘.

• To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.:

  body {
      /* margin-top: 150px; */
      min-height: 100vh;
  }
  

• The best way to create two columns in CSS is to use the grid layout 📐. Using the grid layout, you can create two columns by setting the display property of the parent element to grid and then defining the number of columns you want with the grid-template-columns property.

CSS Reset 🔄:

• You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

  CSS resets that are widely used:

  • Reset CSS
  • "My Custom CSS Reset" by JoshWComeau

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!