Product preview card component

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey @Daniel77apr, some suggestions to improve you code:

  • 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/

  • There is only one heading in this challenge and that is the name of the perfume, “Gabrielle Essence Eau De Parfum”.

  • Stay away from IDs when naming your content. They are not reusable and are mainly used for JavaScript. Its best practice to use, Classes for your naming convention as classes are reusable, making them ideal for CSS styling.

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  Daniel Perez Romo•70

  @Daniel77aprPosted about 2 years ago

  Hey, @vcarames

  Thanks for your feedback! I didn't know about the picture element so I wasn't sure how to change the image source based on screen size without JS. I also have to be more mindful about the tags I use for accessibility purposes. I will make the suggested changes to my project as well as some minor tweaks to make it more user friendly.

  Do you think I should stay completely away from IDs or are there any cases where you think they're acceptable?

  Great advice, thanks!

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  @Daniel77apr

  For styling = classes

  For Javascript = IDs

  Marked as helpful

  1