Skip to content
Submitted 23 days ago

Recipe page

Sabina•10
@SabinaZus
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?

I'm proud of the fact that I still remembered most of the basics of HTML although I learned it 2 months ago for only two weeks.

Next time I would probably clean/delete some unnecessary code regularly throughout coding. Only by the end of making finishing touches I noticed there were some lines that didn't have to be there. It simply started piling up and at one point it started to be a bit chaotic and unclear.

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

I had difficulty including the last section of the recipe card (Nutrition) into the rest of the card. It was standing alone from the rest and it took me awhile to figure it out. Eventually I noticed that the case sensitivity was the issue the whole time and it solved the whole problem.

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

Is there a simpler way to code the responsive design for other devices? Although my way works I feel it's a bit cumbersome.

Community feedback

  • Łukasz Gwarda•160
    @lgwardaPosted 23 days ago

    Hi there! Here are three handy tips for a smoother responsive design workflow:

    1. Flexbox is Your Friend If you're looking for an easy way to create a one-dimensional layout (either row or column), Flexbox is a great tool to have in your CSS arsenal. It can help make your designs more adaptable across different screen sizes.
    2. Choose Relative Units When it comes to units in CSS, try using relative units like em, rem, %, or vh/vw instead of fixed pixels. These units can adjust according to the screen size, making your designs more responsive and saving you time in the long run.
    3. Think Mobile First A great approach to responsive design is to start by designing for mobile devices. Once you have your mobile design down, you can then use media queries to adapt your design for larger screens. This keeps your CSS simpler and more organized! Hope these tips help you out!
    Marked as helpful
    1
    Sabina•10
    @SabinaZusPosted 23 days ago

    @lgwarda Thank you SO much Lukasz for such a detailed and helpful response! This helps me tremendously.

    1
    Łukasz Gwarda•160
    @lgwardaPosted 21 days ago

    @SabinaZus You're quite welcome! I'm glad my feedback was 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