Product Preview Card Component Main using HTML/CSS

Community feedback

• 

  SHMITEnZ•80

  @SHMITEnZ

  Posted almost 3 years ago

  Ciao Jo!

  Congrats on your solution, it really looks good!

  For the images I personally used the HTML picture tag, with the below code:

  <picture>
          <source media="(max-width: 640px)" srcset="images/image-product-mobile.jpg">
          <source media="(min-width: 641px)" srcset="images/image-product-desktop.jpg">
          <img class="p-img" src="./images/image-product-desktop.jpg" alt="">
  </picture>
  

  Hope this helps!

  24

  Marked as helpful
• 

  Omar M.•270

  @OmarMAttia7

  Posted almost 3 years ago

  Hello, congratulations on finishing the challenge and submitting your solution.

  • For starters, like @SHMITEnZ said the <picture> element is a good solution for responsive images in HTML, to learn more about it in depth I suggest you read this guide by MDN.
  • You should wrap all sections of your document in landmarks to improve accessibility, in this case, you should wrap your card component in a <main> element since it is the only thing on the page, however if you have a bigger document with more content you would probably wrap it in a <section> or <article> or it would be in a bigger component wrapped in one of these.
  • Lastly your .card class has an overflow: hidden attribute, this will prevent people from scrolling on shorter screens, try decreasing your browser window's vertical size to see for yourself. you should remove it, I'm curious as to why you added it?

  Otherwise you did a fantastic job, good luck and keep coding :).

  11

  Marked as helpful