Social Links Profile

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

In this project I had the opportunity to use some of the CSS tricks I learned in my previous project, the Blog Preview Card. That is, I used the clamp function again, but this time for responsive sizing rather than responsive text. Using this I was able to (almost) match the card widths at mobile and desktop widths exactly as in the Figma file (more on this in the challenges encountered section below). Additionally, I used a pseudo element for the a tags that are nested in the list items, so that when hovering over the buttons, the user in in fact hovering over the link which triggers the active stylings.

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

While I'm getting responsive sizing of the card width with use of the clamp rather than media queries, at 375px screen width, my card width is about 10px wider than in the Figma file. It's not a huge deal, but the use of the clamp function seems to cancel out any margin to the card, or padding to the body. Playing with the clamp function was the most challenging part in general, but I am happy with it so far. The padding within the card is responding as I would like.

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

Besides the problem mentioned above, any feedback on accessibility, best practices or any ways to improve in any way are massively appreciated.