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

Recipe for a Fried Omelette

akorir08yβ€’ 110

@akorir08y

Desktop design screenshot for the Recipe page 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?

Learning to adapt to the challenge. Centering a whole page to the next

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

Coloring the numbers in the ordered list. Learning about use of before and after elements.

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

Sizing of the Content to be visible and yet attractive

Community feedback

MikDra1β€’ 5,950

@MikDra1

Posted

Nice one πŸ˜„

I really like your solution it is super similar to the design which is greatπŸ‘ Next time just remember to take more care about spacing πŸ‘πŸ‘πŸ‘

Overall very good job πŸ‘

Marked as helpful

0

akorir08yβ€’ 110

@akorir08y

Posted

@MikDra1 Any tips of the spacing underneath the recipe element??

0
MikDra1β€’ 5,950

@MikDra1

Posted

@akorir08y if you want to have more space around the whole recipe you can just use margin. If you struggle with centering the element you can use this two properties on the container that has 100vh

place-items: center;

If that doesn’t work try adding this:

display: grid;

1

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