Skip to content
Submitted 6 months ago

Social Links Flex Box

WebDevJoe•70
@JoeWebDevelopment
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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,330
    @Code-BeakerPosted 6 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 😃

    1

Please log in to post a comment

Log in with GitHub

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