
Social links challenge. Using flexbox, hover states, css variables
Design comparison
Solution retrospective
I’m most proud of how much quicker I’ve become at completing these challenges, as I’m getting more comfortable with Flexbox and applying it efficiently. However, working without a Figma file has been challenging, as it’s harder to match the design precisely. Next time, I’d focus on improving my ability to estimate spacing and layout more accurately without relying on design files, maybe by using guidelines or practicing with more real-world examples.
What challenges did you encounter, and how did you overcome them?One challenge I faced was positioning the attribution at the bottom, which I solved by changing the flex direction of the container to column
and using margin-top: auto
to push it down. Another tricky part was styling the links correctly, as getting them to match the expected design took time. To overcome this, I placed my code side by side with the preview, making small adjustments until they looked right, though it was a bit time-consuming.
I’d like help with getting the widths right in a more responsive way. Right now, I’m hardcoding them, which makes the layout less flexible across different screen sizes. I want to learn better techniques, like using max-width
, flex-basis
, or percentages, to create a more adaptable design without relying on fixed values.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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