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

Justin 100

@aduatgit

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 figured out the layout quite fast and completed the project in a relatively short amount of time. This time I styled a lot of base elements instead of using classes, I didn't really like doing that and will for sure use classes again next time.

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

Styling the lists and tables was pretty annoying, especially with the spacing. I figured out some stuff as well, like using li::marker to only style the list markers. For the table I had to use all kinds of shenanigans like using text-indent and randomly changing padding, didn't feel very elegant. I also encountered some issues with the element in regards to changing its color, I overcame that problem by styling the border-color of it and only enabling the top border (so that the line is only 1px instead of 2px).

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

I used a utility class for my flex layout, I think it worked really well but I'd like to know if stuff can be improved. For example I put the image and the first heading + paragraph into 1 div called hero, not sure if that is optimal. Because of this I also had some issues with the mobile page, where I had to change the margins of the first heading and paragraph manually instead of just changing the image.

Community feedback

@chefoce

Posted

Exactly the same congratulations

0

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