Skip to content
Submitted almost 2 years ago

Product preview card component

Edilson dos Santos Ricardo•30
@EdilsonRicardo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a problem putting the cart icon inside the button.

Community feedback

  • Alamin•2,000
    @CodeWithAlaminPosted almost 2 years 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
    1
    Edilson dos Santos Ricardo•30
    @EdilsonRicardoPosted almost 2 years ago

    @CodePapa360 Noted. Thanks for the feedback.

    1
  • Mirza Monirul Alam•680
    @WebDevMirzaPosted almost 2 years 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.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord