Product Preview Component - HTML & CSS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • To identify the main content of you site you will want to encase your entire component inside a Main Element.

  • The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.

  • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  Jhean Khendrick•160

  @Galope-JheanPosted about 2 years ago

  @vcarames Hi! thanks a lot for these suggestions, I was able to fix some of it but still have to try the picture thingy, I will learn it in the future. For now, I was able to apply most of your suggestions and I was very happy with the changes. Thanks again!

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @JheanKhendrick

  You can always look at how I did it in my challenge to how I implanted the images.

  I'm glad that I was able to help! Keep it up!

  1

  

  Jhean Khendrick•160

  @Galope-JheanPosted about 2 years ago

  @vcarames Hi again! I managed to add the picture element now, I had fun learning it. Thanks a lot!

  0
• 

  Hamid Mahmood•540

  @Hamid210545Posted about 2 years ago

  Hello ..... you have done an amazing job.... but let me correct you ... your card is not in center of the screen as per as design requirements.... but you can fix it by taking one simple step: by setting the properties of body tag { display: flex ; justify-content: center ; align-items: center ; } ............... I hope this will fix your problem............ Thanks!

  1

  ---

  

  Jhean Khendrick•160

  @Galope-JheanPosted about 2 years ago

  @Hamid210545 Fixed! Thanks a lot <3

  0

  

  Hamid Mahmood•540

  @Hamid210545Posted about 2 years ago

  @JheanKhendrick .. Hey ... you are always welcome....

  1