Mobile-first solution using CSS Grid and Flexbox

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

What I'm most proud of:

I’m most proud of how I successfully implemented a clean, responsive design using just HTML and CSS. The layout adjusts smoothly across various screen sizes, thanks to carefully structured media queries. I also used semantic HTML elements like <main>, <figure>, and <figcaption>, which improve accessibility and structure. Additionally, the QR code card has a polished, centered appearance that demonstrates my growing understanding of layout, spacing, and modern CSS practices.

What I would do differently next time:

Next time, I would:

Organize my CSS better by separating responsive styles into their own section or even using a CSS preprocessor like SCSS for better scalability.

Use utility classes or CSS variables to avoid repeating values like colors, padding, and font sizes.

Consider implementing a mobile-first approach for media queries to improve performance and maintainability.

Optionally, introduce JavaScript interactivity, like a hover effect or animation, to enhance the user experience.

Improve accessibility further by adding aria labels and improving alt text clarity.

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

One of the main challenges I encountered was making the layout fully responsive across different screen sizes. Initially, the content either overlapped or didn’t center correctly on smaller devices. It was difficult to balance padding, margin, and image sizing in a way that looked good on both desktop and mobile.

To overcome this, I broke down the layout step-by-step:

I used mobile-first media queries, starting from the smallest screen and scaling up.

I adjusted widths using relative units like %, vw, and vh instead of fixed px values.

I practiced and reviewed how flexbox and media queries work together to build adaptable layouts.

I also tested the page on different devices and used Chrome DevTools to simulate various screen sizes and debug issues.

Through trial, error, and revision, I was able to understand how responsive design works more clearly and gained confidence in applying it.

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

I’d like help specifically in the following areas of HTML and CSS:

HTML Accessibility & Semantics: I want to ensure that I’m using the correct semantic tags and structuring the page in a way that supports screen readers and good SEO.

Responsive Layouts: While I understand media queries and flexbox/grid, I’d like more guidance on how to design layouts that adjust perfectly on all screen sizes — especially when combining multiple layout systems.

CSS Specificity & Best Practices: Sometimes I face conflicts between styles, especially when using multiple classes or nesting. I’d appreciate help understanding how to write cleaner, conflict-free CSS.

Reusability & Scalability: I’m trying to improve how I write CSS that can scale across pages or projects — for example, using variables, reusable utility classes, or even learning the basics of CSS frameworks more effectively.