Frontend Mentor | Product preview card component coding challenge solution

Community feedback

Alamin• 1,960

@CodePapa360

Posted over 1 year ago

Hi Edilson dos Santos Ricardo👋 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.

One suggestion for improvement would be to use CSS classes and ID's more effectively to target specific elements on the page, instead of using tag selectors everywhere. For example, instead of using main h1, use .product-title . This can make the CSS more maintainable and easier to understand.
Using width and height properties on elements to control layout is not a responsive design best practice, it's better to use max-width and max-height properties. Using max-width and max-height allow elements to be flexible and adapt to different screen sizes and orientations.

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

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️

Marked as helpful

Edilson dos Santos Ricardo• 30

@EdilsonRicardo

Posted over 1 year ago

@CodePapa360 Noted. Thanks for the feedback.

Mirza Monirul Alam• 680

@WebDevMirza

Posted over 1 year ago

Hi, Nice work! To insert cart icon inside the button, you may use font awesome . Then add the following code: <button><i class="fa-light fa-cart-shopping"></i>Add to cart</button>

Do not forget to add <link /> of font awesome in <head>.

Thank you. Hope, this might help you.

Product preview card component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community