Responsive Recipe Page utilizing both `px` and `rem units

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

I implements both px and rem unit. px is used for horizontal margin and padding and other properties that don't need to scale with the default font size.

rem is used for font-size, vertical margin and padding and also horizontal spacing that has direct relation with text, such as spacing between bullet and list item text, horizontal spacing in the th and td.

When I tested it by increasing the default font-size to more than 40px, it showed the increased size of certain element properties as expected.

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

I faced some number of challenges:

• How to stretch the marker to the list item height. To solve this I create a custom bullet by using ::before pseudo-element and centering it vertically using flexbox.
• How to set the horizontal spacing of the marker. To handle this, first I align the marker with any text above the list. Then set the spacing according to Figma.
• There are four divs in the page and three of those have the same class. The challenge: even if they have the same class, each of them has different border sides in the vertical direction. I resolved this by utilizing :nth-of-type() pseudo-class.

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

I got feedback from Grace Snow for not using sections for this challenge as they don't add benefit. Each of block already has headings that can be used as accessibility navigation. But I still don't understand in which cases the sections are necessary. So if anyone already has clear understanding about this please let me know!