Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile using Flexbox

@nullpuppy

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I managed to get nearly pixel perfect matching with the design, but then I decided to follow some advice on a previous project of trying to use rem instead of px for widths and such. I did end up leaving px for the widths, but transitioned all the other px values that made sense to be rem to rem, and it still looks pretty good. I want to get better at responsive resizing, and I might try approaching things like the social links as a grid next time to provide a better resize experience.

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

I ran into some odd behavior when testing responsive layouts and the top of content being cutoff. Turns out I forgot margin: auto. I ended up comparing behavior from previous challenges to try and figure out why it wasn't working as intended.

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

Nothing in particular, and feedback is greatly appreciated. Still working on fully grasping how to do UI well, and trying to keep accessibility in mind, though it hasn't yet been a focus.

Community feedback

@ycezz

Posted

your code so clearly, I learned a lot

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord