Skip to content
Submitted 2 months ago

Social links pure HTML and CSS without design file

P
David Lemvigh•200
@dlemvigh
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?

Did not have access to figma file, so had to eyeball the spacings, fonts, etc.

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

Is there a better way to do the layout than just have flexbox all the way down?

I feel like I (and others) just put display: flex on everything just to add a gap or center align. Once have several nested flexboxes, it can be difficult to debug what part of the layout is responsible for which gaps and alignments.

Community feedback

  • Bhuvnesh Upadhayay•2,000
    @bhuvi819381Posted 2 months ago

    Hello,

    I just checked your solution, and it looks good! Here are a few suggestions to enhance it further:

    1. Update your README file
      Use the provided README template, update it, and upload it for better clarity and professionalism.

    2. Avoid using px for units
      Consider using relative units like em or rem for better scalability and responsiveness.

    3. Proper use of Flexbox
      Apply Flexbox to the parent container rather than individual elements. Additionally, when using an inline element like <a>, the alignment may not work as expected. Consider wrapping the text in <li> or <div> to make alignment effective within the parent container.

    4. Follow the DRY principle
      DRY stands for "Do Not Repeat Yourself." Look for repeated code patterns and refactor them to make your code cleaner and more efficient.

    These suggestions will help refine your solution and make it even better. Great work so far, and keep it up!

    0

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