Four-card-section

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

I'm most proud of completing the layout to closely match the original design for both mobile and desktop views. This challenge helped reinforce my understanding of Flexbox and Grid, especially in aligning cards responsively.

If I were to do this again, I would start by planning the layout more thoroughly using a wireframe or box model before writing code. I would also use utility classes and CSS variables more consistently for spacing and colors to make the code more scalable and maintainable.

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

One challenge I faced was making sure all four cards had equal widths and heights across different screen sizes, especially in the mobile view. Initially, they appeared inconsistent due to padding and content length. I solved this by:

Setting a consistent max-width for all cards

Using min-height and Flexbox to align the content inside each card

Applying box-sizing: border-box to ensure padding didn’t affect sizing

Another issue was vertically centering the entire layout on the page, which I fixed using Flexbox on the container with justify-content and align-items set to center.

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

I'd appreciate feedback on the following:

Are there better or more modern ways to structure the layout than what I used?

Is my approach to responsive design optimal, or is there a cleaner way to write the media queries?

Do my styles follow good accessibility and semantic HTML practices?

Any advice on improving maintainability, readability, or best practices for layout structuring would be super helpful!