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

P
andiaz 150

@andiaz

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 think in general achieving a quite responsive page with usage of flexbox and CSS. It felt good that I could go through this challenge section by section, styling each section and each item, while still feeling that I was in control of what was happening.

It also felt good to explore CSS variables a bit to try to make a more "theme"-like structure for the CSS, to make it easier to use the same spacing, colors etc across the page. Still torn whether it makes things easier to read, but at least it makes it easier to replace any styles in the future :)

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

In general I struggled with the styling of the list items, and the paddings for these. I finally managed to get a solution for it but it still feels a bit "hacky".

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

Well, feedback in particular on semantic HTML, as well as any additional best practices that I should follow for HTML and CSS that I might have missed. :)

Community feedback

@florinbejgu

Posted

Wow, well done, this looks great! It looks like you are experienced in doing this.

1

P
andiaz 150

@andiaz

Posted

@florinbejgu Thank you, that's appreciated! I've been coding some frontend stuff on and off for quite some time but honestly never learned flexbox and grid properly. It's starting to feel a bit as I'm slowly understanding the concepts better now thanks to Frontend Mentor :)

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