Product preview card Component

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted about 1 month ago

  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 there 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.

  Marked as helpful

  1

  ---

  

  Bunchydo•110

  @BunchydoPosted about 1 month ago

  Hi KapteynUniverse,

  Thank you very much for this reply. It clears up a lot of things.👍

  0
• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 1 month ago

  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. 👍

  1

  ---

  

  Bunchydo•110

  @BunchydoPosted 29 days ago

  HI AdrianoEscarabote, thank you so much for this helpful reply. The picture tag will surely come in handy!!

  1