Responsive Product Preview Card

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

I’m really proud of how I implemented Flexbox to create a responsive layout that adapts well to different screen sizes, especially with the product preview card component. I feel like the CSS structure is clean, and the use of Flexbox has made the layout quite flexible across devices. I also feel good about using semantic HTML5 elements and ensuring accessibility, as I aimed to make the page usable for all users, which is a key aspect I’ve been working on improving.

Next time, I would try to implement CSS Grid more effectively, as I feel I could’ve used it in some parts of the design for better control and alignment, especially when arranging multiple elements in a container. I’d also explore using SASS or CSS custom properties to improve scalability and organization of my styles. While the current implementation works well, introducing variables and a more modular approach would make future projects easier to manage.

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

Challenge 1: Aligning elements properly across different screen sizes At first, I had issues with centering the container both horizontally and vertically on larger screens. The layout wasn’t as fluid as I wanted it to be. I overcame this by thoroughly exploring Flexbox properties like justify-content and align-items, and using height: 100% for the parent elements to ensure proper centering. Adjusting the height of certain elements also helped me achieve the desired result.

Challenge 2: Managing content overflow on smaller screens I ran into problems where the content was overflowing on smaller screens, particularly when I had to allow for scrolling. The container padding was causing the text and buttons to spill out. I resolved this by adjusting padding and reducing line heights for better space management.

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

Code Quality and Flexbox/Grid Skills: I’m looking for tips on how to write cleaner and more maintainable CSS. I want to improve my organization and structure, especially when working with Flexbox and Grids. Any advice on best practices or design patterns for responsive layouts would be really appreciated.

Flexbox/Grids Strengths: I’d love to hear some feedback on how I can get stronger with Flexbox and Grid. Sometimes I feel like I’m not utilizing their full potential, and I’m unsure of when to choose Flexbox over Grid or vice versa. If anyone has suggestions on how to improve my use of these CSS properties for complex layouts, that would be very helpful.