Responsive Recipe Page using Semantic HTML & Custom CSS

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

I am most proud of how clean and responsive the final layout turned out. I really focused on spacing, typography, and structure, and I think it paid off. If I were to do it again, I would use CSS variables for colors and spacing to make the stylesheet easier to maintain and scale.

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

One challenge I faced was matching the spacing and font weights exactly as shown in the design. It took a lot of tweaking, especially with the custom bullets, subtle border lines in the table, and getting the font to feel just right (not too bold, not too light). I used the browser’s dev tools and font testing tools to fine-tune these details.

I also ran into issues with setting proper spacing between table rows and list items — I learned to use border-spacing, gap, and ::marker styling effectively.

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

I will love feedback on:

1. Best practices for cleaner CSS structure
2. Improving accessibility (especially with list and table elements)
3. Whether I could optimize the layout better for smaller devices