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 page using Flexbox

P

@mikehwebdev

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?

I put this together pretty quickly except for some time spent trying to overcome a bullet point issue. I seem to be googling less and less these days too.

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

I wanted a responsive image in the header and discovered the element which I'd somehow never encountered at all before. I've really enjoyed playing around with this element and I can see it's going to be my new best friend going forward.

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

I struggled to find a solution for vertically centering a bullet point on a multi line and spent a loooong time trying to find a solution. I didn't want to over engineer a solution using a 4 pixel wide/high circular div and flexbox so I left them how they are and will review some others solutions to see if they managed to find a way.

Community feedback

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