Responsive Blog Card using FlexBox

What are you most proud of, and what would you do differently next time? 🎉 What I'm Most Proud Of

I'm most proud of how I was able to bring everything together—from semantic HTML and responsive CSS, to integrating a custom local font (Figtree) using @font-face. It was satisfying to see the design match the original layout across different screen sizes. I also learned how to use Git and GitHub effectively, which helped me track my progress and publish a live version using GitHub Pages!

🔁 What I'd Do Differently Next Time

Next time, I would:

• ✅ Use CSS Custom Properties
  To maintain consistency and make it easier to update colors, spacing, and fonts across the entire stylesheet.

• 📱 Improve Responsiveness Further
  Start with a mobile-first approach and refine layout breakpoints for better control between 320px and 1440px screens.

• 🌐 Focus More on Accessibility
  Use better contrast, semantic HTML elements, and ensure the design works well for screen readers and keyboard navigation.

• 🔍 Write a Clearer README
  Include instructions for setup, font usage, screenshots, and live preview links to make the project more shareable and professional.

• 🛠️ Experiment With New Tools
  Try out Tailwind CSS, SASS, or even a basic JavaScript enhancement to add interactivity.

What challenges did you encounter, and how did you overcome them? 🧠 Challenges I Faced & How I Overcame Them

• Responsive Layout Issues
  Challenge: The layout was not consistently looking good across different screen sizes, especially on mobile (320px).
  How I Overcame It: I adopted a mobile-first approach by using flexbox for layout control, adjusted the widths to percentages, and fine-tuned my breakpoints with media queries to ensure the layout adapts smoothly to different devices.

• Font Integration Using Local Files
  Challenge: I was unfamiliar with integrating local fonts (like Figtree) into my project, and encountered issues with linking .ttf font files.
  How I Overcame It: I learned how to use @font-face in CSS to integrate custom fonts. After verifying the correct path and ensuring I specified the right font weights, I successfully applied the Figtree font across my project.

• Too Much Space Between Elements
  Challenge: There was excessive space between elements like .info and the footer, which disrupted the layout.
  How I Overcame It: I used Chrome DevTools to inspect the layout and discovered the issue was related to unnecessary padding and margin values in the inner containers. After adjusting these values, everything aligned as intended.

What specific areas of your project would you like help with? ❓ Areas Where I’d Like Help

• Responsive Design Tweaks
  While the layout is mostly working on mobile and desktop, I'm still struggling with some of the fine-tuning for medium screen sizes (e.g., tablets). I would appreciate advice on better handling media queries and improving the responsiveness across all devices.

• Font Loading & Performance
  I used a custom local font (Figtree), but I’m concerned about performance. I’m not sure if using @font-face is the most efficient way to load fonts. Any suggestions on better practices for font loading (like font-display or using preload) would be really helpful.

• CSS Performance Optimization
  I’m looking for tips on improving the performance of my CSS, especially as my styles grow. Are there any performance issues I should be aware of with my current setup, or best practices for writing efficient and fast CSS?