Product Preview Card using Flexbox Responsive Blog Page with CSS Grid

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

I’m most proud of completing the layout using pure CSS without any external libraries. I used Flexbox for alignment and ensured the design looks good on both desktop and mobile screens.

One thing I would improve next time is optimizing the responsiveness more thoroughly using media queries. I also want to work more on accessibility (like alt tags and semantic HTML). Additionally, I’d like to challenge myself to complete the project faster while keeping my code clean and well-commented.

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

One of the main challenges I encountered was aligning elements correctly using Flexbox, especially for responsive layouts on smaller screens. It took a bit of trial and error to get the spacing and alignment just right.

I overcame this by reading the CSS Flexbox documentation and experimenting with properties like justify-content, align-items, and gap. I also used browser dev tools to inspect spacing and tweak styles live.

Another challenge was dealing with font sizes and padding that didn’t scale well on different screen sizes. I solved this by using em and % units and setting up basic media queries to make the layout more responsive.

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

I'd appreciate feedback on the responsiveness of my layout. I used Flexbox and media queries, but I’m not fully confident it looks great on all screen sizes.

Also, I’d love tips on how to write cleaner or more reusable CSS. Are there any best practices I could follow to organize my styles better?

Lastly, if there are any small design details I might’ve missed from the original challenge, please let me know!