Responsive Profile Card using HTML, CSS Grid & Flexbox

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

I’m really happy that I got the design looking close to the original and also made it responsive on smaller screens. At first, I struggled with centering the card and making sure all the buttons fit without scrolling, but once I figured it out, it felt like a big win.

What I would do differently next time

If I were to do this again, I’d spend more time keeping my CSS cleaner and more organized. I’d probably also try using CSS Grid, just to practice another approach to layouts instead of only relying on flexbox and media queries.

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

One of the biggest challenges I faced was getting the layout to look good on smaller screens. At first, the buttons didn’t fit properly and users had to scroll to see them all. I fixed this by reducing the padding, adjusting font sizes, and tweaking the image size in my media queries. It took a bit of trial and error, but each adjustment helped me understand more about responsive design.

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

I’d love to get feedback on how I can make my CSS cleaner and more efficient. Right now, I feel like I’m repeating some styles that could probably be simplified. I’d also like tips on better practices for handling responsiveness so that the layout adjusts smoothly without so much trial and error.