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 solution

@VitorEmanoelNogueira

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

Tharun Rajโ€ข 1,250

@Code-Beaker

Posted

Hi there, congratulations on completing this project... You've done a great job on this one! ๐ŸŽ‰

I visited your live site and GitHub repository. And I think you've done a great work trying to match it with the design. I would like to make you aware about some things you can improve in this solution.

  • It will be better for the social links to be marked inside a ul, where each list item is an a inside an li. Something like this:
<ul class="links">
       <li><a href="#">GitHub</a></li>
       <li><a href="#">Frontend Mentor</a></li>
       ...
</ul>
  • Avoid using id attribute to style elements. They're not meant to be used in CSS but rather in scripting using JavaScript. Here's an article covering this topic.
  • You don't need the strong tag to wrap the link's text. You have to use CSS to style the links.
  • This is a relatively small project and does require a lower number of tags, but in larger projects, you will have lots of components using the same tag but with different looks. It is recommended to use class for all your elements and then style them using their class.
  • Don't limit the width of the body by using width: 100vw because that is completely unnecessary. The body element takes the full width of the document by default. Using a height: 100vh will break the site on taller screens. Instead, use min-height: 100vh and that will fix it.
  • I have noticed that most of your elements use px for padding, margin, font-size, etc.Here's [why font-size should not be in pixels].(https://fedmentor.dev/posts/font-size-px/)
  • To make your CSS cleaner and re-usable, try experimenting with CSS Custom properties/variables

I hope this helps you improve your solution. These points are important in building better and accessible websites. ๐Ÿ˜„

Marked as helpful

1

@VitorEmanoelNogueira

Posted

Thank you for the great advices! I will look to implement everything you said on my projects! @Code-Beaker

1

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