Responsive Blog Card with Flexbox layout and media query scaling

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

I'm most proud of how clean, semantically structured, and responsive my layout turned out. I implemented a mobile-first approach using relative units (rem, %) combined with Flexbox for layout alignment and spacing. I also utilized CSS custom properties (--var) to manage consistent font sizes, colors, and spacing throughout the design. It felt great to see the card maintain its structure and readability across screen sizes.

If I were to do this again, I would round my media query breakpoints to more common values (like 420px instead of 417.431px) for better readability and maintainability. I’d also consider improving accessibility, such as adding more descriptive alt text and implementing keyboard focus states for interactive elements like the title link.

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

One challenge I faced was getting the spacing and alignment right between the image, content section, and author block. The design looked slightly off when I used fixed units early on, especially when resizing the viewport. I overcame this by switching to relative units and ensuring that spacing was handled using scalable properties like margin-bottom, gap, and padding in rem.

Another small challenge was ensuring that the hover effect on the title looked subtle yet noticeable. I added a hover state that changes the title color and applied a transition for a smoother effect. I also struggled a bit with how to scale the font sizes across breakpoints, but defining both mobile and desktop values in :root made it easier to manage via media queries.

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

I'd really appreciate feedback on the way I structured the card layout with Flexbox and relative units. Are there cleaner or more scalable approaches I could take, especially regarding spacing and responsiveness?

I'd also love to know if there's a better practice for managing font size transitions across breakpoints using custom properties. Lastly, if there are any improvements I can make in terms of accessibility (semantic HTML, alt text, keyboard navigation), I’m open to all suggestions.