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

Frontend Mentor - Social links profile

Rodrigo Paiva• 50

@rodrigonpaiva

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

P
Steven Stroud• 4,140

@Stroudy

Posted

Hey again, Looking forward to going through this solution with you, I can see you already have made improvements, Few more things

Hey, Great job with this solution you should be proud, A few things I noticed,

  • Missing a <meta> description tag for SEO purposes,

  • Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,

  • You should add a font-display: swap; property to your @font-face, Leverage the font-display CSS feature to ensure that text is user-visible while web fonts are loading, Increasing performance.

  • You wont need to use display: flex on every element if the parent has one because it will inherit it,

  • On the body, It is best practice to use margin-inline: auto; to center left and right then just margin: auto;, You can center the height by using this code snippet

  min-height: 100svh;
  display: flex;
  justify-content: center;
  flex-direction: column;

I hope you found some of this information helpful, Great solution and you should be proud, Hope you have a good day, Happy Coding!

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