Responsive Blog Card with SCSS and Flexbox

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

I'm especially proud of how clean and scalable the SCSS structure turned out. Using a custom @mixin for typography helped me keep styles consistent across the project and made future updates much easier. I also successfully used clamp() for responsive font sizing, which is something I had only seen in theory before this project.

Next time, I would:

• Implement CSS Grid for even more precise control over layout structure.
• Use a style linter (like Stylelint) to catch mistakes earlier and maintain cleaner code.
• Create a light/dark theme toggle to improve user experience.

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

One challenge I faced was implementing responsive typography in a scalable way. Although I'm comfortable using SCSS, it was my first time integrating CSS clamp() inside a custom mixin. It took some experimentation to find values that worked well across devices, but I eventually created a flexible solution that adjusts font size fluidly without relying on media queries.

Another small challenge was balancing padding and spacing within the card to maintain visual consistency. I overcame this by switching from margin-based spacing to using gap in flex containers, which made the layout more predictable and easier to manage.

This project helped reinforce how SCSS can work hand-in-hand with modern CSS features to create clean, responsive designs.

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

I’d appreciate feedback on the following:

• How to further optimize my SCSS structure or naming conventions for larger-scale projects.
• Suggestions for making the layout more scalable in case I wanted to add interactivity or expand this into a full blog page.

Any tips for improving code readability or consistency in responsive styling would also be welcome.