Product Preview Card Component

Community feedback

• 

  Hassan Moataz•1,860

  @hassanmoaaPosted 9 months ago

  Hello @asishPatanaik!

  Great Job solving the challenge mate congrats 🎉

  Some suggestions for improvements.

  For the letter-spacing it's is better to use rems and ems but px for this project is no big deal.

  letter-spacing: 5px;

  • i see you using pixels for many elements, never use pixels for font-sizes in any element, here's why:

  • Certain font-related CSS properties will render your site completely inaccessible if their value is declared using pixels even once.

  Which properties are affected?

  All of these properties must never ever be declared in pixels:

  • font-size
  • line-height
  • letter-spacing

  If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences!

  • You should use ems, and rems for font-sizes would be better

  This article may help:

  https://fedmentor.dev/posts/font-size-px/

  ➖➖➖➖➖➖➖➖

  Other than that you're good, keep up the good work!

  Marked as helpful

  1

  ---

  

  P

  Asish Patnaik•160

  @asishPatnaik2000Posted 9 months ago

  Thankyou @hassanmoaa for your review, it was really helpful will surely keep this in mind next time while working on other challenges

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing the Frontend Mentor challenge for the Product Preview Card Component! You've done a great job, but there are a few improvements you can make:

  1. Responsive Image Handling:

     • Instead of using separate <source> and <img> tags for different device widths, consider using CSS background images with media queries for better control and optimization. This approach allows you to set different images for various screen sizes more efficiently.
     • Example:

       .product-image {
         background-image: url('./images/image-product-desktop.jpg');
       }
       @media (max-width: 375px) {
         .product-image {
           background-image: url('./images/image-product-mobile.jpg');
         }
       }
       

  2. Semantic HTML:

     • Use more semantic HTML tags for better readability and SEO. For instance, you can wrap the product name and description in a <header> tag within your <section class="infoContainer">.
     • Example:

       <section class="infoContainer">
         <header>
           <p class="sectionName">Perfume</p>
           <h1 class="sectionHeading">...</h1>
         </header>
         <p class="sectionInformation">...</p>
         <!-- Rest of your content -->
       </section>
       

  3. Accessibility Improvements:

     • Ensure that your buttons and interactive elements are accessible. Add :focus styles to your button to improve keyboard navigation visibility.
     • Example:

       .buttonClass:focus {
         outline: 2px solid var(--aquamarineColor);
       }
       

  Useful Resources:

  • Responsive Images: MDN - Responsive images
  • Semantic HTML: MDN - Semantic HTML
  • Accessibility: WebAIM - Keyboard Accessibility

  Keep up the great work and continue exploring and refining your skills. Every project is a stepping stone towards becoming a more proficient developer! 💻✨

  Marked as helpful

  1

  ---

  

  P

  Asish Patnaik•160

  @asishPatnaik2000Posted 9 months ago

  Thanks @petritnuredini adding header tag does seems to be a good idea to make it more semantic. The alternative way you have given me for changing background image seems good will try it next time and thank you for providing me these useful resources for making html more responsive and accessibility of a page.

  0