Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 months ago

Recipe Page using HTML and CSS Flex

David•130
@OMallesDev
A solution to the Recipe page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I think the thing I'm most proud of is being able make sense of a lot more html than in the last two challenges. Having to actually separate and create sections and tables actually felt like I was making progress. Next time hopefully I will have a better understanding of tables and spacing to create an element closer to the design document.

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

The largest challenge I faced was definitely the list items and the table. Figuring out how to add blank space and get the padding right between the lists and the table took a bit of digging into forums and finding out exactly what kind of CSS properties to use to get it to look the way I wanted.

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

Areas I could definitely use more help with: -Finding better ways to space and style a table

-It feels like I have a lot of wasted code for the lists that could probably be wrapped in a couple less selectors but I'm not 100% sure on how to do that.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on David's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License