Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card

P

@NF0mar

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@aduatgit

Posted

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

@chefoce

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

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