Product preview card component solution using CSS Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @zakariabelassri 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
  • You should have used flexbox on the section and had "flex-direction: row;" for later, when viewing on mobile devices, using a media query, change the direction with "flex-direction: row".
  • You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.

  Example:

  <picture>
     <source media="(max-width: 678px)" srcset="./images/image-product-mobile.jpg">
     <img src="./images/image-product-desktop.jpg" alt="your_alt_text">
  </picture>
  

  More information here.

  • You could use the <del> tag to display the old price:

  <del class="old-price">
     <span class="sr-only">Old price: </span>$169.99
  </del>
  

  Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about.

  The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers.

  • You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies.

  Popular reset style sheets:

  • A modern alternative to CSS resets
  • CSS Tools: Reset CSS
  • Custom CSS Reset

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  2

  ---

  

  Zakaria•60

  @zakariabelassriPosted about 2 years ago

  Thank you so much @MelvinAguilar for this useful detailed explanation, this was motivating to learn more.

  1
• 

  Christian Prasetya•370

  @christian-prasetyaPosted about 2 years ago

  Congratulations on finishing this challenge. You structure your HTML & CSS code semantically great and well structured.

  But of course there's some area of improvement:

  1. Try to apply responsive design using media queries, I know it's hard to grasp at the first time, but it's worth it for developing your skill in the future.
  2. Try to use BEM method for creating a reusable css code that will make your life easier. You can check it here.
  3. Maybe try to learn about Sass/Scss pre-processor for creating more well structured and modern CSS, it really helps a lot. I just started to implement the using of Sass/Scss and really help me to structured my stylingsheet, and creating lots of functions on CSS. Check it here

  But overall, I think you did a great job developing this challenge. Hope to see more finish challenge from you.

  Marked as helpful

  0

  ---

  

  Zakaria•60

  @zakariabelassriPosted about 2 years ago

  Thank you so much @christian-prasetya for this helpful feedback and links.

  0

  

  Christian Prasetya•370

  @christian-prasetyaPosted about 2 years ago

  @zakariabelassri cheers, mate. My pleasure to help. 🙏

  0