Skip to content
Submitted 4 months ago

Responsive Recipe App challenge (tried to get it as pixel perfect)

AReactDeveloper•340
@AReactDeveloper
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Yet again challenging myself to make it pixel perfect or as close as it can be thanks to my friend @DarkstarXDD I focused on responsiveness and made it look good in all devices

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

box model figuring out how media queries work or at least basics of them

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

if someone can tell me when its optimal to use rem and em and when to use plain old pixels

Community feedback

  • Bamo-D-Abdallah•280
    @Bamo-D-AbdallahPosted 4 months ago

    rem is good when you want your property size to increase or decrease based on the root element <html>, so things like font-size should definitely be in rem, and in general if you are not sure what to use you can always fallback to rem as it is more predictable than em and other units.

    Use em when you want your element to increase or decrease based on its own font-size property, so when you have an element that you want its margin to increase when you increase the font-size to make sure the content is still readable you can use em on the margin, or when you use letter-spacing and word-spacing you want the space to increase when the font-size is also increased, that way when you increase the size of the font everything around it will adjust themselves based on the font-size to preserve the original design.

    Never use px, I can't think of an example that you would ever need px, even for @media (min-width) use either rem or em (doesn't matter which one you use).

    Marked as helpful
    1
    AReactDeveloper•340
    @AReactDeveloperPosted 4 months ago

    @Bamo-D-Abdallah very helpful tips thank you so much also our names are smillar ur is Abdallah im Abdelhak nice to meet you thank you for the very much needed explanation

    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