Blog Preview Card using Figma, HTML, CSS pseudo classes, interactions

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

I'm glad I took my time this time--as opposed to the first project--to do this completely on my own, without the figma-to-code plugin. It got me to tackle puzzles piece by piece, carefully and slowly building skills in both CSS mechanics and also finding resources.

In doing so, I have already imagined how I would do some steps differently, in order to achieve new things that i am imagining doing in the future.

For instance, i am imagining certain element interactions on hover or click that would require placing them in a parent container, so that i can alter their shape or sizing without affecting their neighboring elements.

I'm also glad that I've made more interactive elements than what was shown in the starter design, because in a real world scenario, you'd also have hover and click effects on the header image, author name, and profile pic too.

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

I had difficulty at first remembering when to affect margin settings, and when to affect padding.

Playing around with flexbox and grid settings was also a challenge at first, but they were fun puzzles to solve.

Same thing with organizing CSS selectors and trying to find the most efficient way to organize them and keep them clean of repeating or obsolete declarations.

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

I would like help with organizing CSS declarations to keep them clean.

I find that I struggle with not making a mess of my CSS code.