Skip to content
Submitted 2 months ago

Social Links Profile using HTML and CSS with Animations

James Ryoko Townsend•50
@ryoko-J
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?

I'm really proud that I was able to build this project with minimal errors and no tutorial assists, save taking chat's help for button animations since this is my first time using them + the occasional bug.

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

The main challenges were making sure I didn't mess up the margin and padding. I'm still getting a proper handle over all those concepts especially related to width. I've yet to learn exactly how each unit like px, rem, and such work. But all in all, I've been able to pull it off pretty well, I think.

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

Feedback would be greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,410
    @MarziaJalili

    Gorgeous!

    Tips?

    ✅ It's best practice to have one main element for each web page, so consider changing the div that wraps all the elements to main for semantics.

    ✅ There’s a shorthand property for setting padding and margins for all four directions:

    
/* Same values */
padding: 10px;

/* Different values */  
margin: top right bottom left;

/* In this case */
margin: block(top-bottom) inline(left-right)

/* or this way */
padding: top inline bottom;

padding: 50px 30px 30px;

    Keep up the grind!

    😎😎😎

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