Social Media Card using HTML and CSS

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

I'm proud of how I was able to create a clean and functional design with simple HTML and CSS. Even though the design was not complex, it turned out visually appealing, and I was able to practice the fundamentals of layout and responsiveness. Next time, I would experiment with more interactive elements, such as hover effects or animations on the social media links, to enhance the user experience. I might also focus more on optimizing the code, using CSS variables, or exploring advanced layout techniques for scalability.

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

I encountered some challenges while designing the card. First, I had difficulty properly centering the card both vertically and horizontally on the page. Although I was familiar with using margin: auto, I struggled to ensure the card was perfectly centered within the body of the page. Secondly, another challenge was making sure the design worked well across different screen sizes. I needed to ensure that the card would stay in place and look good on various devices. To overcome the centering issue, I decided to use Flexbox for the body and set the properties to display: flex; justify-content: center; align-items: center;, which made centering the card much easier and more reliable across different screen sizes. For the responsive design, I relied fully on Flexbox, allowing the card to adapt to different screen sizes without needing to use media queries.

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

I would appreciate help with improving the responsiveness of the design, particularly when it comes to fine-tuning how the card adjusts on different screen sizes. While I’ve used Flexbox to center the card and make it responsive, I feel there could be additional improvements to ensure it looks perfect on all devices. I’m also interested in exploring ways to add interactive features, such as hover effects or animations, to enhance the user experience.