Responsive Product Card (HTML & CSS)

Community feedback

• Account deleted

  👋 Hey, Jonas! I have a few suggestions for your project:

  Use <picture> for Multiple Images

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

  You no longer need to use display: none; the browser will take care of which image to display.

  Use <footer> Instead of <header> for .attribution

  Use <section> for Grouping Related Content For example, the .information div could be wrapped in a <section> element.

  <section class="information">
  ...
  </section>
  

  Use Classes (.class) Instead of IDs (#id) for Styling Use IDs when working with JavaScript or accessibility.

  More info:

  • MDN HTML Element Picture

  I hope this helps you! 😊

  Marked as helpful

  0

  ---

  

  Jonas Chacon•110

  @jonaschaconPosted 4 months ago

  Thanks for the suggestions, they will help me a lot! 😊 @weldu0

  1

  Account deleted

  You're very welcome! I'm glad to hear that!😊 @jonaschacon

  0