Product Preview Card Component

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!

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! 💻✨