Responsive page using CSS flex

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

I'm proud of how I structured the layout to match both mobile and desktop views using semantic HTML and responsive CSS. I’m also happy with how I used CSS variables for theme colors. I also utilise Flexbox to handle layout shifts between mobile and desktop views.

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

Initially, the layout did not stack correctly on mobile devices or align side by side neatly on desktops. I used Flexbox within a media query targeting a minimum width of 450px to switch from a vertical layout to a horizontal one. This allowed smooth responsiveness without breaking the design. Replicating the padding and margins exactly was tricky, as seen in the design screenshot. I paid closer attention to the design spec and adjusted spacing values in small increments, frequently previewing the changes in the browser. Ensuring the final product visually matched the provided design image was a time-consuming task. I toggled between the project and the screenshot frequently, sometimes reducing browser opacity or using side-by-side views to closely match layout, typography, and spacing.

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

While the layout is responsive and visually close, I’d appreciate feedback on how closely it aligns with the original Frontend Mentor

1. design, especially for:
2. Font sizes and line heights
3. Spacing between elements
4. Button sizing and hover/active states
5. Responsiveness I’d like help identifying whether there are any accessibility best practices I’ve missed Any suggestions on how to make the CSS more modular or reusable would be welcome—especially as I scale to larger components in the future.