Responsive Recipe Page | HTML + CSS (Outfit & Young Serif)

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

I'm most proud that I built the entire project from scratch using only semantic HTML and pure CSS. I paid close attention to the style guide and replicated the design as closely as possible. It was a great way to practice layout, typography, and consistency.

Next time, I’d spend more time planning the HTML structure before writing the CSS, and I’d like to explore using CSS variables and media queries earlier in the process.

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

One of the main challenges I faced was matching the design exactly without access to Figma - especially getting the correct spacing, font sizes, and colors just by eye. I had to rely on the style guide and make lots of small visual adjustments.

Another difficulty was understanding font weights and how to load and apply them correctly with Google Fonts. At first, some text looked too bold or too light, but I figured out the correct weights (400, 600, 700) and used them consistently.

Lastly, keeping the code clean and structured was a challenge, but I used semantic HTML and clear class names to stay organized.

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

I'd really appreciate feedback on my spacing between sections and the responsiveness of the layout, especially on smaller screens. I'm also unsure if I used the best HTML structure for accessibility and semantics, so any suggestions in that area would be helpful.

Additionally, I'm open to advice on organizing my CSS better or writing more reusable styles.