Submitted 4 months ago

Social Links Flex Box

WebDevJoe• 70

@JoeWebDevelopment

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

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 solved this challenge about 4 months ago, https://remarkable-klepon-f66984.netlify.app but re-doing things after a hiatus of not practicing coding due to a family members illness.

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

Main challenge was the sizing of the buttons/links which I just used padding for. in hindsight and after reviewing previous code would have been better to use buttons and a width perhaps with padding on top/bottom to get sizing correct. I think both solutions work though, outside of the hover not working as it should.

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

Curious to know what other people used as a solution for the hover compontents.

Community feedback

Tharun Raj• 1,250

@Code-Beaker

Posted 4 months ago

Hi there, WebDevJoe. You've done a great job with this challenge and congratulations on completing it! 🎉

I visited your live preview and I noted down some things that can improved on your website. Let me share it with you so that you can improve it.

Use rem instead of px for setting
- font-size
- padding
- margin

If you wish to learn more about this, check out this article

Tip: You can create variables for font-weight too. in your :root just add it as a variable. For example, --weight-regular: 400; and then use it on your elements!
Use min-height: 100vh for the body.
I have noticed that in your CSS, you've styled the li to look like a link on hover. But, it is better to give that styling to the a because it serves the purpose of a link. Currently, when I hover my cursor over the li, its background changes. This should happen when I'm hovering over the link.
The attributions should be included inside a footer element.

I hope this helps you improve your solution 😃

Please log in to post a comment

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