Recipe-Page

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

I’m proud that I used media queries for the first time and successfully made the layout responsive across different screen sizes. I created a clean, readable layout using only HTML and CSS — no frameworks, just raw code. I followed a mobile-first approach, which helped me better understand the importance of simplicity and scalability

I would try to use CSS Grid for more control over layout structure.

I’d explore accessibility improvements like aria-labels and better semantic tags.

I’d add dark mode support and maybe even try converting it into a React component for practice.

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

One of the main challenges I faced was managing the layout on small screens, especially:

The image scaling awkwardly or overflowing its container

Background or layout spacing issues on mobile view

How I overcame it: I used media queries to adjust padding, font sizes, and image dimensions based on screen width.

I learned to use CSS properties like max-width, object-fit, and width: 100% to make the image more responsive and visually appealing on all devices.

I also experimented with hiding unnecessary elements on mobile to keep the layout clean and focused.

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

What I’d like help with I’d love feedback or guidance on:

Using aria-label effectively to improve accessibility.

Understanding when to use aria-label, aria-labelledby, or semantic tags like <section> and <article>.

How to test if my recipe page is screen-reader friendly and what tools I can use for that.

Best practices for adding ARIA to static content like ingredients and instructions.