blog-preview-card

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

I'm most proud of how I was able to structure the card layout using clean HTML and responsive CSS. This was one of my first times focusing on both desktop and mobile views, and I successfully made the layout look consistent across screen sizes. I also explored using Google Fonts and added shadows and spacing to improve the card's visual appeal.

Next time, I would pay more attention to small design details from the Figma file, like exact paddings, spacing, and font weights. I also want to organize my CSS better and possibly try using utility-first CSS like Tailwind for faster prototyping. Additionally, I would make sure to test more screen sizes (like tablets) to improve overall responsiveness.

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

One of the main challenges I faced was deploying the project on GitHub Pages. Even though my code was working perfectly in VS Code, the live site initially showed a 404 error. After some debugging, I realized that either the index.html file was missing or incorrectly placed, and I had to ensure the file structure matched GitHub Pages requirements.

Another challenge was understanding the difference between mobile and desktop layouts. At first, I was confused about how to implement responsiveness and set default views. After reviewing the design guide and experimenting with media queries, I was able to structure my CSS so the layout looked good across screen sizes.

I also struggled with aligning elements (like centering the text background box), but I practiced using flexbox and margin adjustments until I achieved the desired layout.

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

I would like help with improving the responsiveness of the layout, especially when switching between mobile and desktop views. I’m still learning how to structure media queries efficiently without repeating too much code.

Another area I’d appreciate feedback on is my CSS organization — I’m not sure if I’m following best practices, especially when it comes to naming classes and keeping the code clean.

Lastly, I’d like suggestions on how to optimize the design further or add subtle animations or interactions that would make the card feel more polished and modern.