Skip to content
Submitted 8 months ago

Social Links Profile

Saeed Bin Mizan•80
@BluffSet7340
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 am proud of the fact that I was able to style the content appropriately using the CSS Flexbox styling without having to refer to YouTube videos as every turn and corner.

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

The main challenge is simply having to eyeball the paddings, margins, and font sizes. The only workaround that I could come up with rather than having to pay for the PRO is copying the image onto Paint.Net and trying my best to analyze the spacings and the size of the avatar

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

I need feedback regarding the optimization of my CSS styling. I did achieve the desired result but at the cost of having to refer to the same CSS selectors and dedicating one or two lines at a time rather than targeting multiple elements and styling them accordingly in one go.

Community feedback

  • Michael Cook•60
    @MikeCook9994Posted 8 months ago

    The first thing that stands out to me is the over-use of pixel units, particularly for font sizes, padding, and margins. By no means, should you never use pixel, but using rem allows for more accessible designs that automatically adopt and adapt the user's text sizing preferences.

    You set an explicit height on your container. Which this might help achieve a more exact look, this is generally a bad idea. Generally, you should let the content determine the height of the element so you can prevent overflow.

    I think it's probably a good idea if you don't worry too much about trying to create a solution that exactly matches the design. Focus on the fundamentals like responsiveness, the value of certain units, different layout mechanisms, etc...

    One last thing, look into the gap property if you're not already familiar with it. It can be used to replace margins in a lot of cases.

    Marked as helpful
    1
    Saeed Bin Mizan•80
    @BluffSet7340Posted 8 months ago

    I appreciate the feedback. You've cleared my doubts on proper sizing of text. Also, I completely forgot about the gap property too. I'll be sure to implement this feedback in my later solutions.

    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