Responsive Blog Preview Card

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

I used a calc function to dynamically update my font-size between the minimum of 14px for mobile view and 16px for the desktop view. This will be extremely helpful for the future, and I'll be able to reuse this. See readme for further details on this.

I used utility classes for font size and color variables. I think this lets me keep everything in one central place and if I need to make changes, I can just alter the values and it will update across my sites, and I don't have to go hunting individual values down.

It's a little thing, but I also put a transition on the hover state for the desktop card. I think it adds some professionalism, and doesn't jar the user with a hard snappy transition.

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

Figuring out the calc equation was definitely the most difficult, along with getting the right sizing for the mobile view. I started mobile first with this project. The figma design is at 375px width, which there are smaller mobile sizes out there, so adjusting this without media queries was challenging, but I feel I accomplished it. I always try to let css do the brunt of the work for me.

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

Any areas where you think improvement can be made, please let me know.