I completed my third challenge

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 5 months ago

  Hi there, congratulations on completing your third challenge... You've done a great work on this one! 🎉

  I visited your live preview and it looks great! You have added a layer of your creativity by using custom fonts and colours. I would like to share some of my suggestions regarding your solution that might help you improve it.

  • Make sure to use tags that match the purpose of the component. The socials links are meant to be links. Hence, they should be created using an anchor tag(a) which is styled to look like a button.
  • The links should be wrapped inside an unordered list. Also, use more class names for your elements to make styling easier.

  This is the current markup:

   <div class="social-links">
        <button>GitHub</button>
        <button>Frontend Mentor</button>
        <button>LinkedIn</button>
        <button>Twitter</button>
        <button>Instagram</button>
      </div>
  

  This might be a better and accessible markup:

  <ul class="social-links">
    <li class="social-links__item">
      <a href="#" class="social-links__link">GitHub</a>
    ...
    ...
    </li>
  </ul>
  

  • Remove width: 100% and height: 100% from both html, and body. They take the full size of the document by default.
  • Use a min-height: 100vh instead of height: 100% for your .display element to make sure the content doesn't get hidden on smaller screens.
  • Use CSS custom properties/variables to make writing CSS easier. Here's how
  • NEVER set font sizes in pixels. Here's why. rem units can also be used to create margins, paddings, etc. They're better for creating responsive layouts.

  Overall, you've done a great job. There's still room for improvement in your code and I have tried my best explaining them to you.

  Hope this helps you... 😄

  0
• 

  Tometoo0304•60

  @Tometoo0304Posted 5 months ago

  you can use color picker tools online to get close colors to the design

  0