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 with Semantic HTML and CSS

@reteov

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 found the trick for generating wireframes around sections, which helped with my alignment and spacing issues. I also figured out how to use the :not() and :last-child selectors, so that I could use border-bottom to make lines between items in a table without one showing up on the bottom.

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

The markers (bullets and numbers in lists) were particularly tricky, both with the spacing and their coloring, sizing, and weight. During this course, I learned about ::marker, as well as the use of margin-left and padding-left to place the bullet and the associated text block respectively.

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

Nothing at the moment; I'm pretty satisfied with the results.

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