Social links profile solution

Community feedback

• 

  Tharun Raj•1,330

  @Code-Beaker

  Posted 11 months ago

  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. 😄

  11

  Marked as helpful