@quielLovesLasagna
Posted
Ayos! CHARLES MC VIGO
Here are some suggestions:
-
Use external CSS instead of internal, this makes your code more cleaner and organized.
-
In the case of your CSS reset:
*{
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
I suggest you remove the font-family declaration and add it inside the body. The reason for this is that it is more of a good practice to add the properties that affect the texts inside the body because it also gets inherited, and the use case for the universal selector, many devs suggest that you use it for removing default padding, margins, and setting the box-sizing to border-box. You can read more about it here and here
- I notice an error in this part:
main img{
height: 80px;
width: 8-px; <-------
border-radius: 50%;
padding: 25px;
cursor: pointer;
}
-
I also noticed an inconsistency in your markup, you added an id for your location and quotes, I suggest (for styling's sake) you use a class and don't use it only for two elements, use it for elements that need it. Using a class for selecting elements to style is a good practice instead of adding ID randomly because you want to style them differently.
-
In this part:
<div class="links">
<a href="#">GitHub</a>
<a href="#">Frontend Mentor</a>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>
This is a list of social media platforms, it's more semantic to use ul and li here. Like this:
<ul class="links">
<li><a href="#">GitHub</a></li>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
That's all! I hope these may help you.
Marked as helpful