hi there! 👋
A couple of tips I packed up for you:
HTML:
- your anchor tags should be placed in an ul and li tags:
<ul>
<li><a href="#">Github</a></li>
....
</ul>
this provides your page more semantic meaning
CSS:
-
use
min-heightinstead ofheighton the body tag. using height prevents users who open your page on device with smaller screens to scroll down if your content overflows the 100vh -
don't apply
widthorheightto your elements explicitly, they will adapt to their content's size by default. you can usemax-widthto create a gap for the width:
.element {
width: 90%;
max-width: 66rem;
}
in this case .element will take up 90% of the container's width, but won't expand above 66rem (notice that I used relative units in both case instead of pixels)
Hope this was helpful 🙏
Good luck and happy coding! 🙌
Marked as helpful
@SaruMakes
Posted
Thank you so much, Koda, it is very helpful! :D
I greatly appreciate you taking the time to write out such a thoughtful response. I'll be sure to revisit the project to make your suggested changes.
@SaruMakes
Posted
@kodan96, I have a follow-up question, if you're okay with answering more than you already have. 🙏
When talking about using relative units, what are your thoughts on when to use hard values like pixels and when to use relative units, especially when to use rem. I feel like I'm hearing so many conflicting opinions on it.
@SaruMakes
the easiest answer: don't use pixels at all. I, personally use pixels for the least important things, like border-radius, letter-spacing and stuff like that. So basically in the smallest areas, where it doesn't really matter what you use, because these areas are that small they can't interfere with the layout.
Marked as helpful
@SaruMakes
Posted
@kodan96, that makes sense. I think I'll follow this advice from now on. Thanks again for your help and have a great day!😄
