Responsive recipe page using Flexbox, custom properties, semantic HTML

Solution retrospective
I'm most proud of how clean and well-structured the layout turned out, especially the use of semantic HTML and consistent spacing. The mobile responsiveness also feels solid, thanks to media queries and flexible padding.
If I were to do it again, I'd try using CSS Grid instead of Flexbox for some sections to explore more layout possibilities and fine-tune alignment.
What challenges did you encounter, and how did you overcome them?One challenge was making the custom list styles (for ingredients and instructions) align correctly across screen sizes. I overcame this by using position: relative and ::before pseudo-elements with custom counters and bullets.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @r1kp
good
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