Blog Preview Card

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

I'm most proud of how clean and faithful my solution is to the original design. I ensured the card stays visually consistent across all screen sizes without compromising on layout or readability. I'm also proud that I maintained the semantic structure and kept the CSS modular, which made the project easy to maintain and update.

If I were to do it differently next time, I’d set up the project with a build tool like Vite or use Sass for better CSS organization and scalability. I’d also explore adding subtle animations to enhance the user experience and make the card feel more interactive. Lastly, I’d challenge myself to make the component dynamic by integrating it with JavaScript or a framework like React.

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

One of the main challenges I faced was ensuring the card remained fixed in size while still being responsive on all screen sizes. Initially, the card would shrink on smaller devices due to incorrect use of width properties in media queries. I resolved this by setting a fixed width on the card and adjusting the body’s padding and layout instead of changing the card itself.

Another challenge was centering the card both vertically and horizontally without breaking the layout on mobile. I overcame this by using Flexbox on the body element and adding consistent padding to prevent the content from touching the screen edges.

These issues taught me the importance of using layout utilities like flex thoughtfully and being cautious with how media queries alter element sizing.

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

I'd love feedback on how to improve the structure and efficiency of my CSS. Specifically:

• Are there better ways to handle responsiveness without writing extra media queries that affect card layout?

• Could I have structured my CSS classes or variables in a more reusable or scalable way?

• Are there best practices I missed when implementing hover and focus states for accessibility?

Also, if there are more modern layout techniques (e.g., using clamp() for font sizing or container queries), I’d appreciate pointers on how to apply those to small projects like this.