Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile

P
Lilla 50

@lillakm

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@KapteynUniverse

Posted

Hi Lilla, nice job.

I saw you used grid for centering because someone recommended you to use it on one of your previous solution. I am not very good on grid but i think place-items: center; is for centering the items inside their cells. Grid making 4 rows at the moment, because there is body, footer, and 2 more divs (i think these come from the github, not sure) so your main centering on its respected area right now. Using place-content:center; might be better instead. You can check this video for the difference between them.

I prefer to use flex for basic layouts. It is just one more line of code than grid. You can use this for centering too

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Addition to what @loiccape said; they are links of the Jessica's socials. So instead of divs, using anchor tags with unordered list would be better. Like:

   <ul>
            <li><a href="...">...</a></li>
            <li><a href="...">-...</a></li>
            <li><a href="...">...</a></li>
            <li><a href="...">...</a></li>
            <li><a href="...">...</a></li>
   </ul>

Marked as helpful

0

P
Lilla 50

@lillakm

Posted

@KapteynUniverse

Thank you so much for all of this!!

I'll definitely try the flex way. I think the confusion came from not knowing when to use min/max-height the correct way. Also, thanks for the video for the difference, it's definitely something I need to think about a lot more. And practice. :) Anchor tags also make a lot more sense, I'm guessing it's also better for accessibility. Very helpful, thank you!

1
P
Loic Cape 80

@loiccape

Posted

I think there is a better choice to put button tag on html instead of class "button" and you could find better selector on css to make you not repeat code. but the result is pretty good , great job.

Marked as helpful

0

P
Lilla 50

@lillakm

Posted

@loiccape

Excellent suggestion, I was wondering about doing it differently!! Thank you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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