@Code-Beaker
Posted
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%
andheight: 100%
from bothhtml
, andbody
. They take the full size of the document by default. - Use a
min-height: 100vh
instead ofheight: 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... 😄