Skip to content
Submitted about 2 months ago

Social Profile Link

ALHERI BLESSING•30
@Alheri-blessing
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 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,740
    @TedJenklerPosted about 2 months 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
    0
    ALHERI BLESSING•30
    @Alheri-blessingPosted about 2 months ago

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

    1
  • Fastcheettahh•280
    @fastcheetahPosted about 2 months 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
    0
    ALHERI BLESSING•30
    @Alheri-blessingPosted about 2 months ago

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

    0
    Fastcheettahh•280
    @fastcheetahPosted about 2 months ago

    Thanks have a good day@Alheri-blessing

    0
  • Svitlana Suslenkova•5,320
    @SvitlanaSuslenkovaPosted about 2 months 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
    0
    ALHERI BLESSING•30
    @Alheri-blessingPosted about 2 months 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.

    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