Responsive Social Links Profile Challenge

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 4 months ago

  Hi there, congratulations on completing this challenge... You've done a great job with this one! 🎉

  I have reviewed your live site and source code and I want to share some of the areas where you can improve your solution.

  • Use proper semantic tags to create elements. Elements should match their purpose both visually and in structure. I have noticed that you are using div to create a link.

  This is your current markup:

   <div class="socials">
        <div class="social">GitHub</div>
        <div class="social">Frontend Mentor</div>
        <div class="social">LinkedIn</div>
        <div class="social">Twitter</div>
        <div class="social">Instagram</div>
   </div>
  

  Actually, this is an unordered list where each link is a list item. This will also improve the accessibility of the website for people who use assistive tech such as a screen reader. A better HTML structure would be like this:

    <ul class="socials">
        <li><a href="#" class="social">GitHub</a></li>
        <li><a href="#" class="social">Frontend Mentor</a></li>
        <li><a href="#" class="social">LinkedIn</a></li>
        <li><a href="#" class="social">Twitter</a></li>
        <li><a href="#" class="social">Instagram</a></li>
   </ul>
  

  • The page should contain an h1 tag or a level one heading. You can then style it to match the design in font-sizes, weights, etc.
  • The attributions should be wrapped inside a footer tag instead of div.
  • There is no need of width: 100vw on the body. It acquires the full width of the page by default. Also, change the height: 100% on the body with min-height: 100vh.
  • DO NOT define margin in %. Instead, use rem or em. Percentage values ruin the responsiveness of your website and they're hard to maintain. Same for width.
  • Use CSS Custom Properties to make your code more re-usable. Learn more about this topic here.
  • Using px for padding is a bad idea, use rem for these properties as well.

  Overall, you've tried your best to match the design. Remember that your website should always be accessible and not just visually appealing. I hope I was able to help you will everything I have shared above.

  Happy coding! 😄

  0