Submitted 9 days ago

Social Profile Link

ALHERI BLESSING• 20

@Alheri-blessing

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 am most proud of myself for being able to use HTML and CSS to create a social profile links, this shows that I am gradually learning how to become a better web developer.

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 9 days ago

Hi @Alheri-blessing,

Nice project! Here are a couple of suggestions to improve it:

Another cool way to center a <div> is by setting the parent to position: relative, the content to position: absolute, and then using top: 50%, left: 50%, with transform: translate(-50%, -50%). This method is quite effective for centering elements.

I noticed that there is some unnecessary nesting in your code. Try to reduce the number of <div>s to keep your code clean and readable for both screen readers and other developers using tools like Chrome DevTools. A better structure would be to center the card using Flexbox on the <body>, and then use <main> with flex-direction: column so that everything stacks naturally. A bit of margin would be sufficient to achieve the desired layout.

Keep up the great work!

Best, Teodor

Marked as helpful

ALHERI BLESSING• 20

@Alheri-blessing

Posted 7 days ago

Hi @TedJenkler Thanks for your observations and correction, I will keep that in mind and also take note of the corrections.

Fastcheettahh• 300

@fastcheetah

Posted 9 days ago

Hey, nice work on your project, it looks really good but I think social section anchor tag will look better if you increase the font-weight by 700 and dont use pixels for font size I like you used transitions on your project makes it look really good. Hope you found this comment helpful : ~ )

Marked as helpful

ALHERI BLESSING• 20

@Alheri-blessing

Posted 7 days ago

Hi @fastcheetah, Thanks for the observation, I will make the necessary adjustments. Thank you once more.

Fastcheettahh• 300

@fastcheetah

Posted 7 days ago

Thanks have a good day@Alheri-blessing

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 9 days ago

I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.

Hope you found this comment helpful :)

Marked as helpful

ALHERI BLESSING• 20

@Alheri-blessing

Posted 9 days ago

@SvitlanaSuslenkova, thanks for your observation, in the body tag I set min-height to 100vh as you have observed and deleted the padding I added to the work initially.

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