Product card HTML CSS

Community feedback

• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 10 months ago

  Some additional comments about your code:

  HTML:

  • Since the product image should be different depending on the screen size, you should use the <picture> element.

  • The product images have meaning, so they must have a short, descriptive alt text.

  • The cart icon also needs alt text. However, it is decorative, so the alt text should be empty:alt="".

  • Headings should always be in order, so you never start with a <h2>. "Perfume" is also not a heading, use a <p>. It should be written normally, like this: "Perfume". Adjust the letter-spacing(which must not be in px) and use text-transform: uppercase to style it in the CSS.

  • Do not use <br> to force text onto a new line.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • line-height must also never be in px.

  • Remove all fixed widths and heights. Except for icons, you rarely want to set fixed dimensions(especially heights), as this easily creates issues with responsiveness.

  • If needed, add a max-width in rem on the whole card, so it doesn't get too wide on large screens.

  2
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  • Use "./" before the file path of the image to display it.

  ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎✅ Do: <img alt="product image" src="./images/image-product-desktop.jpg">.

  ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎❌ Don't: <img alt="product image" src="/images/image-product-desktop.jpg">.

  I hope you find it useful! 😄

  Happy coding!

  1
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @TinaMoof!

  Your project looks great!

  I noticed that your card is not completely centered. Here's a very efficient way to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  0
• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 10 months ago

  Hi. It seems like a "/" gets added at the beginning of the file path. I tried removing it using DevTools, and that made the image show up.

  0