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 profile links widget

@Micahtron

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 was more selective in my markup and CSS style rules for this one. I treated it more as a self-contained widget with the assumption that other site-wide rules (resets, fonts, margins, etc.) were already in play. I also set up my root style variables to be more modular so if anyone wants to swap out the color palette for a different brand/theme it's super simple.

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

The CSS was done in a bit of a windshield wiper method, refactoring the styles and dependencies as I went. The only real challenges were getting the image to the right size (a lot of trial and error eyeballing), and centering the social link buttons without making every nested div a flexbox.

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

I'm still trying to get easily responsive font proportions down pat. Ideally there would be one base font for the entire widget that all elements would base their font size off of. That way if this ever needs to resize for a different design layout it only takes one line of CSS to change it all.

If anybody knows of a simple and straightforward method of handling this I'd be very grateful to know what it is.

Community feedback

@GAOV13

Posted

The use of variables in CSS is a concept that I haven't used before. It was interesting reading the reasons why you have used them, and you have given me some ideas to use in future projects. Great work! :)

1

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