Product preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your 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/

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

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  Hassan Mourad•50

  @Mourad3rdPosted about 2 years ago

  @vcarames So using <picture> instead of just <img> gives me more control over the responsiveness of the image to be more flexible with it, right?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @Mourad3rd

  Correct! The Picture because of the container of your images and by giving the source a min-width the image will then appear when you need it.

  Marked as helpful

  0
• 

  Christian Prasetya•370

  @christian-prasetyaPosted about 2 years ago

  Congratulations for finishing this challenge.

  Your result is totally fine, but there's some area of improvement

  1. Don't forget the semantic HTML

  Instead of using <div class="container"> in the opening content tag, it's better to use <main class="container"> as it's semantically correct, and will help the reader with visual impairment to browse the main content of your website.

  2. And because this project require us to make a responsive website, it's better if you start using relative unit especially rem and em.

  3. And for more best practice, I think you better link all the google fonts and fontawesome cdn through link in the HTML head rather than importing through CSS (personal opinion though).

  Overall, nice work, and can't wait for your next project submission.

  Marked as helpful

  0

  ---

  

  Hassan Mourad•50

  @Mourad3rdPosted about 2 years ago

  @christian-prasetya Thanks for the feedback , gonna take these in consideration in the following projects. <3

  0