Skip to content
Submitted over 1 year ago

Product Card Component Preview

Chayne White•70
@ChayneW
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

Hello Frontend Squad! This challenge I felt was a great test of my knowledge of CSS so far and humbled me on understanding the flex and grid properties more.

  • What did you find difficult while building the project?

Getting more deliberate practice on how to choose between flex and grid greatly helped my overall understanding on how to manipulate CSS properties more.

-Which areas of your code are you unsure of?

With me still trying to get a handle on flex and grid properties more, I feel there are cases where I mixed the use cases often.

Big shout outs to @GuillermoBPY and his repo: https://github.com/GuillermoBPY/product-preview-card-component-main

helped me get an understanding on which cases to use certain properties.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component word PERFUME is not styled perfectly yet, we can style is letter-spacing css property which helps to add spacing in between the letters
    • Just add the following css
    .text-product-type {
letter-spacing: .2rem;
color: #aaa;
}
    • We added color also with #aaa which gives a grey like shade.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
    Chayne White•70
    @ChayneWPosted over 1 year ago

    @0xAbdulKhalid thank you for the feedback!! I didn't notice the different color text. I'll definitely add this soon.

    0

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