Skip to content
Submitted 5 months ago

Product Preview Card

Nur Farah Omar•120
@NF0mar
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

What are you most proud of, and what would you do differently next time?

I am proud that I am doing more challenges day by day to master frontend, and I am going to do challenges daily after this.

What challenges did you encounter, and how did you overcome them?

The challenges I have encountered were, there were two picture which I was supposed to use one for Desktop devices and one for Mobile devices, but I figured out it was not that difficult, i just set the display of the image that i didn't needed to none.

What specific areas of your project would you like help with?

I think my responsive is not the way it should be, and also I am confused when to use rem or px. So if you read this and you think your idea is better than mine, don't hesitate to share please.

Community feedback

  • Justin•100
    @aduatgitPosted 5 months ago

    Hey!

    I really like your solution for this challenge, I think it looks great!

    Regarding your question when to use rem and when to use px:

    • rem is always in relation to the root element's font size of the browser, which is 16px. This can however be changed by the user, e.g. if someone wants a bigger font size because they can't really read small text.
    • px will always be an absolute pixel value, this may give you more control but also removes any responsiveness for aforementioned users.

    Generally this means that you are fine using rem or em for most measurements. This is especially the case for picking font sizes. If you need more control you can use px, but I don't think there are many cases where you would want to use px over other measurements. Rem and em takes a bit of getting used to, since you have to calculate all the values from base 16, e.g. 10px = 0.625rem.

    Marked as helpful
    1
  • Carlos Oceguera•160
    @chefocePosted 5 months ago

    You forgot to put the word perfume un capital letters, also you need to remove some styles in the mobile view, you can try to use percentages in the width of the components, nice work

    Marked as helpful
    0
    Nur Farah Omar•120
    @NF0marPosted 5 months ago

    Thank you @chefoce

    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