Social Links Page Solution Using HTML and CSS Flex Box

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

I'm most proud of how clean and structured my layout turned out. I was able to use semantic HTML and modern CSS to create a centered card layout with custom fonts, consistent spacing, and a responsive feel. I also enjoyed applying @font-face with multiple font weights and learning how to create smooth button hover transitions with effects like elevation and color change.

If I did this project again, I’d focus more on accessibility and making the links keyboard-friendly. I'd also explore making the layout more responsive across devices and adding dark/light mode support for a more polished experience.

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

One challenge I faced was making sure the card layout stayed clean and centered on all screen sizes without stretching too much on larger screens. I solved this by setting a max-width on the card and using Flexbox to center it both vertically and horizontally.

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

I’d appreciate feedback on a few key areas:

Responsiveness: I designed the layout for desktop, but I’d like to learn how to better adapt it for mobile and smaller screens using media queries.

Button styling: I added a hover effect with movement and box-shadow. I’d love suggestions on improving the animation or making it feel more polished or modern.

Accessibility: I’m unsure if my current structure is accessible for screen readers and keyboard users — especially around the buttons and text.

Code structure: I’d like feedback on whether my CSS is well-organized and if there are ways to simplify or make it more reusable.