Skip to content
Submitted 5 months ago

Responsive Recipe Page

Modupe Marvellous•60
@Marvie-03
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?

Using an image as a design guide can be really stressful, colors are not always what they seem to be

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

em and rem units were confusing. I had to check them up

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

Mobile responsiveness, how best do you suggest I learn mobile-first approach?

Community feedback

  • Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    The mobile-first approach is preferred by developers because usually mobile versions of websites has a simpler structure than the tablet / desktop / widescreen versions. Therefore, it's relatively easy to build this layout (compared to the other ones), since elements stack on each other vertically.

    Modifying the mobile layout with @media queries is not that difficult, but you need to make sure you use min-width within your queries, otherwise they won't take effect or will override your mobile layout.

    You should also plan out the changes you wanna make on the page, and group your elements in a way that makes it possible to apply layout tools on them, making it easier for you to display them inline on wider screens.

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    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