Skip to content
Submitted about 2 months ago

Social Links Profile Design

Farid_Danilo•140
@FaridDanilo
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Being able to complete this new exercise fills me with pride to learn new techniques and creativity for future designs of my own.

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

As it is still my weak point, it is learning and improving how to position the divs correctly where I want them to align or center where I want them.

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

I would like guidance on how to improve my ability to properly align the divs and HTML tags on my web page, especially to position them where I want them on the page.

Code

Please log in to post a comment

Log in

Community feedback

  • valryanb•50
    @valryanb

    Hi Farid,

    Beautiful solution.

    Since you said you are a beginner, here are some tips on positioning Div elements properly with CSS.

    To move your elements up, down, left or right, you can either use padding (best practice) or margin.

    As a beginner, try adding 'padding-left', 'padding-right', 'padding-top' and 'padding-bottom' values to your CSS elements and experimenting with pixel sizes until you find something you like. When you're ready to move on from there, check out padding (or margin) shorthand.

    I hope this helped you. Good luck!

  • P
    Nathan Giles•130
    @ngiles1

    Everything looks positioned nicely here. You've set text-align: center on the card element which is correct, and the spacing between elements all looks correct as well.

    Good use of CSS variables too, ensuring consistency with colors across different elements on the page.

    Just one thing there is a typo on the 'linkedin' button.

    Overall good job :)

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