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 Links Profile

@BluffSet7340

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 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

@MikeCook9994

Posted

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

@BluffSet7340

Posted

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
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