Skip to content
Submitted over 2 years ago

Product Preview Card Component

Abieb_Guardian•200
@AbibGuardian50
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It is so difficult for me to set position items and make the web to be responsive,is there any practice or course that you would recommend for me? Thank you and have a good day.

Code

Please log in to post a comment

Log in

Community feedback

  • Paul Hayes•30
    @PaulHaze

    Hi mate, so as the other guy said, brush up on Flex and flexbox. This tutorial really helped me:

    https://flexboxfroggy.com/

    I also recommend learning about the box model, particularly the difference between padding and margin.

    Lastly, you can round the borders of your card with the 'border-radius' CSS property.

    Keep at it mate, you'll get there...

    Marked as helpful
  • Fritz•300
    @fritzadelbertus

    Hello @AbibGuardian50. First of all, congratulations on finishing this challenge!

    I'm also a newbie but here are some suggestion I can give:

    • Using <picture> tag is a better practice in this challenge where the image source change according to the screen width.
    • I recommend using semantic HTML such as <main> to wrap up the main content.
    • The spacing in PERFUME can be easily modified in css using the letter-spacing property

    To get a better grasp in creating layouts and position items I recommend understanding the box model (padding & margins) as well as how to use flexbox. W3Schools also provide clear documentation to learn basic CSS

    I hope it's helpful and happy coding!

    Marked as helpful

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