Responsive recipe page using Flexbox and CSS Variables

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

I'm proud of having implemented a responsive layout that closely matches the original design, using semantic HTML, accessibility best practices, and clean use of CSS variables. Next time, I might explore using CSS Grid in some sections, such as the nutrition table, to have more control over responsiveness.

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

One challenge was styling the ordered list with properly spaced and colored numbers, which I solved using pseudo-elements combined with ::marker. Another challenge was maintaining visual hierarchy and consistent typography without access to the Figma file, relying only on the style guide and image previews.

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

I'd like to receive feedback on:

• The semantics and structure of my HTML.
• The way I centered the content on the screen.
• The overall accessibility of the page, especially for keyboard navigation.
• Suggestions to improve the responsiveness of the nutrition table.