Mobile-first workflow with CSS Grid and Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • Do not forget ⚠️ to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

  • Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible ⚠️. The image needs to be applied using the picture element and not the background-image property, as it will not only let you use different images during different breakpoints it will let apply an alt tag description to image stating what the image is.

  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

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

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  2

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  • Currently, the old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  • The web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  • For improved accessibility 📈 for your content, it is best practice to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  Marked as helpful

  1

  

  Martín•240

  @martinoruePosted almost 2 years ago

  @vcarames Thank you for your comments, they are very helpful and well explained. I'm already working on the code to apply those improvements.

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @martinorue

  Glad I could help!☃️

  Keep it up!

  1