Recipe Page (w/ media query, clamp function, and grid)

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

I struggled more than I thought with getting some aspects of the lists and table just right.

I am proud that I stuck with it and found solutions.

Next time, I will try to come up with a more specific plan of how to tackle a particular element of the design, before I start to write code.

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

One of the challenges of the lists was to create custom spacing between the list marker and the list item content. It surprisingly took a few Google searches before I found a useful resource that explained exactly what margin and padding do on different aspects of a list, which is not always as you would expect. Therefore, I learned that padding on the li directly would increase space between marker and content.

I also played around with list-style-position: inside, but didn't like how the text would position itself under the marker once it wrapped onto a new line. I ended up keeping it as outside and playing around with different margin spacing to get the alignment just right. It felt a bit hacky, so it would be good to see other solutions to this.

I also struggled to get the Nutrition table exactly as intended, with the key and values indented with a small gap between the 2 columns, but the row divider spanning the full width. In the end, I settled on a 5 column grid that allowed me to set the spacing on the sides and in-between the key and value, and then allow for the divider to span across all columns.

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

• Alignment and styling of list markers.
• Table layouts
• Anything else you might notice in my code!