Omelette Recipe Page Challenge

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

Getting the project done using semantic HTML elements.

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

Styling unordered lists, table and page margin.

1. For the unordered lists I used a combination of grid and flexbox to separate the list bullet from the text.

2. As for the table I used border-collapse: collapse; otherwise tr creates no single block.

3. When first styling the page margin I wanted the top margin to grow based on the device width for desktop users, but it can't be too big. At first I used a "fake" margin with divs at the top/bottom of the document to make use of the max-height property in CSS. But later I styled the page margin using padding: min(calc((100svw - 736px) / 2), 8rem); to the document body. The min function takes the first value separated by a comma as the preferred value and the second as the maximum value.

Useful resources:

1. "how to align marker to center of the image lists HTML" on stackoverflow
2. "Why TR not taking style?" on stackoverflow
3. "Can we define min-margin and max-margin, max-padding and min-padding in css?" on stackoverflow

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

I would like to know if my code follow best practices. This could be anything from code quality to accessibility. I'm open to feedbacks!