Skip to content
Submitted 9 days ago

Social links profile

Snigdha Sukun•90
@snigdha-sukun
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 proud that this exercise took my less time to complete than the previous ones because of the practice I am getting from these exercises. Also, I tried to use rem for sizing instead of % everywhere and it seems to work.

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

I faced a little problem in getting the sizes of elements right but after some trial and error, I was able to get it right and I learned that padding also helps with getting the required size.

I also faced a some problems in getting the position of elements right but after some trial and error, I was able to fix it and I learned that align-items & justify-content only work for display: flex.

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

CSS techniques

Community feedback

  • Natali 👻 Grimm•1,150
    @Grimm-NPosted 9 days ago

    Hey! Great job, this is looking super clean and pro! Really loving the structure you’ve got going here – nice use of classes and styling. 👏

    A few quick tips to take it up a notch:

    1. Instead of <div role="main" class="container">, you might want to go straight for <main class="container">. It’s shorter, sweet, and accessible-friendly!

    2. Remember, <a> tags aren’t just decorations – they’re actual links! 😉 Maybe link them up to your socials for practice. You’ve got the setup, so just go for it.

    3. TrueType is cool, but it’s a good idea to have other font formats like WOFF and WOFF2 too, for better cross-browser compatibility.

    4. For a smooth hover color change on your buttons, try adding a little CSS magic with transition. Here’s a quick example:

      .btn {
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #ff6600; /* Pick your fave color here */
}

    5. Last tip: consider using BEM naming conventions for your classes! It keeps everything organized and lets you target elements easily. Give every element a class, even the little guys. 😉

    Awesome work so far, keep going!

    Marked as helpful
    2
  • hitmorecode•6,680
    @hitmorecodePosted 9 days ago

    Nice well done, looks good. Just one tip. You add a border-radius of 3% on the buttons. My suggestion is remove % and use px, em or rem

    Keep it up

    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