Responsive blog preview card using HTML and CSS

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

I was pleased to get this project built in an afternoon, and to have a solution which is close to the design. I spent some time at the start building CSS variables, and getting the base styles in place. Although this might seem like overkill for a one-page project, it was ultimately useful, and ensured consistency. It also makes the project somewhat future-proof, should changes be desired.

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

The brief directed that the card text should be responsive without the use of media queries. I would have automatically jumped to media queries as a solution, so this was a bit of a challenge. I solved this problem using clamp().

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

Although I used clamp, and the results were in line with the design brief, I was a little unsure what the middle value (the preferred value) should be. In my solution, I set this preferred value by calculating the text width as a percentage, based on the 'mobile' design, and applying this as a vw value...

For example: where 12px text (on a 375px-wide screen, as per the Figma file) becomes 14px text on larger screens, the preferred value was 3.2vw, derived from (12/375) * 100.

🤔 How would others approach this?