Product Listing/Card Through HTML/CSS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  Regarding your question,

  You will want to start your build mobile first, use responsive properties and use your browser’s developer tools to simulate different screen sizes.

  • Remove all the br elements you added, they are not necessary.

  • Your HTML should have a main element that will assist in identifying the main content of your site.

  More Info:📚

  MDN Main Element

  • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This component requires the use of two images 🎑 at 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

  • The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  For responsiveness you need media queries on certain brake points. Challenge provided you with two.

  Learn about media queries video1, video2

  Also, you shouldn't set the exact value to container widths. That is causing problems in your responsiveness. You should let the content inside of it dictate the container width. Very rarely something needs an exact width value.

  Hope this helps you with handling responsiveness the correct way!

  Marked as helpful

  1