Product preview card component - completed w/ flexbox + css grid

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

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

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

  • 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

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

  • Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

  More Info: 📚

  Mobile First

  • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

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

  Happy Coding! 🎆🎊🪅

  0

  ---

  

  Chyna Davis•30

  @cmdavis21Posted almost 2 years ago

  @vcarames Thank you for the helpful reply. I am working on adding those improvements! I decided to use the Josh Comeau reset, also. I have a question about adding accessibility. How do I properly incorporate the screen reader class, and which CSS properties should I use? This would be my first time adding accessibility features.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @cmdavis21

  These links should help:

  https://www.tpgi.com/the-anatomy-of-visually-hidden/

  https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

  0
• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  Hi Chyna Davis👋 Great job on completing this challenge! 🥳

  I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

  In the HTML file:

  • Instead of using a div element for the product image, you could use an img element with a src attribute pointing to the image file. This would be more semantically correct as the img element is specifically for images.

  • Instead of using a section element for the product info, you could use a div element with a class of "product-info". This would be more semantically appropriate as the section element is generally used for grouping related content, whereas the div element is more general and can be used for any type of content.

  In the CSS file:

  • Instead of using the margin property to add space around elements, you could use the padding property. This can make the code easier to read and maintain, as the padding property only affects the inside of an element, whereas the margin property affects the outside.

  • To improve the readability of the code, you could consider using more descriptive class names. For example, instead of using a class name of .curr-price, you could use a class name of .current-price. This would make it easier to understand what the class is being used for without having to refer back to the styles in the CSS file.

  Overall, this is a very well done solution to the challenge. Great job!

  Hope I'm Helpful! 👍

  Keep up the good work! 😊❤️

  0

  ---

  

  Chyna Davis•30

  @cmdavis21Posted almost 2 years ago

  @CodePapa360 Thank you for the insight! I have made the changes to my code.

  0