Recipe-Page

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

I’m most proud of creating a fully responsive recipe page with clean design and proper use of flexbox for layout, Google Fonts, and semantic HTML. The project matches the design reference well on both mobile and desktop.

Next time, I would:

Organize my assets and project folder structure more carefully from the start, to avoid GitHub Pages deployment issues.

Use a CSS grid or reusable components for repeated sections like the nutrition facts, which would make the code cleaner and easier to maintain.

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

GitHub Pages deployment issues: At first, the live site didn’t display correctly because I had multiple HTML files (recipe.html and index.html) and the folder structure wasn’t aligned with GitHub Pages expectations.

Solution: I kept only index.html, ensured all assets were linked with relative paths, and verified the folder being served matched the Pages settings.

Responsive design adjustments: Making the nutrition section and images scale nicely on different screen widths was challenging.

Solution: I used flexbox, media queries, and tested on multiple viewport sizes (375px mobile up to 1440px desktop).

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

GitHub Pages deployment best practices: I want to understand how to structure multiple projects in the same repository so that each can be accessed via GitHub Pages without conflicts.

Optimizing responsive layouts: Suggestions on how to make my layouts more flexible across very small (320px) to very large screens, especially for the nutrition facts section.

Code efficiency: Feedback on my HTML/CSS structure to make it cleaner, more maintainable, and scalable for future projects.