Blog preview solution with Flex, clamp() and Semantic HTML5

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

I’m most proud of getting the clamp() math exactly right so that the typography scales perfectly between 375px and 1440px without a single media query. Seeing the fluid font sizes hit the intended min/max values felt like a real “aha” moment.

Next time, I’d focus even more on accessibility adding ARIA labels and ensuring color contrast meets WCAG standards and I might experiment with CSS Grid for the layout to see if it can simplify some of the Flexbox nesting.

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

One challenge was getting the clamp() math exactly right figuring out how much the font needed to grow over a 375px -> 1440px range and translating that into a simple vw + px formula took some trial and error. I overcame it by breaking the problem into small steps (find the pixel difference, divide by 1065, multiply by 100, then solve for the intercept) and testing in the browser until the sizes hit exactly 20px at 375px and 24px at 1440px.

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

I’d appreciate feedback on the accessibility of my semantic HTML specifically whether my <header> and <footer> structure, use of <time>, and focus outlines meet best practices for screen readers and keyboard navigation.

I’m also curious if my fluid typography approach (the exact clamp() calculations) is maintainable does it make sense to someone else, or would a more straightforward fallback strategy for older browsers be better?

Finally, I’d welcome suggestions on optimizing my SCSS organization (e.g., nesting levels, variable usage) and ensuring the box-shadow effects render consistently across different browsers and devices.