@Code-Beaker
Posted
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 ofdiv
. - There is no need of
width: 100vw
on the body. It acquires the full width of the page by default. Also, change theheight: 100%
on the body withmin-height: 100vh
. - DO NOT define
margin
in%
. Instead, userem
orem
. Percentage values ruin the responsiveness of your website and they're hard to maintain. Same forwidth
. - Use CSS Custom Properties to make your code more re-usable. Learn more about this topic here.
- Using
px
forpadding
is a bad idea, userem
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! 😄