product preview card using grid/flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Cooger, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @Cooger17, some suggestions to improve you code:

  • When using images that are different size for different breakpoints, its’ far more effective to use the <picture> element. By using this element not are able to use different size images, you can also save on bandwidth, meaning your content loads faster.

  Syntax:

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

  Source:

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

  https://web.dev/learn/design/picture-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/icon to someone.

  • The old price isnt being announce properly to screenreaders. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

  • The "Button" is created with the wrong elements. It needs to be Button Element so that when the users clicks on it (with the help of JS), the product gets added to the cart.

  • The Attribution needs to be wrapped in a Footer Element.; It's the end of you content.

  • Here's a link to Google Developers to help you responsiveness:

  https://web.dev/learn/design/

  • Your CSS Reset is extremely bare. You want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  Happy Coding!

  Marked as helpful

  0