@Alex-Archer-I
Posted
Hi!
Congrats with another challenge. That's a cool one, well done =)
Here are a couple of suggestions =)
The nav tag's purpose is to serve for navigation through the page or the site. So, it doesn't really fit here. Also there is a list of links, so it's better to use ul tag with li.
<ul>
<li><a href="#">It's a link here!</a></li>
...and more links here
</ul>
There is not necessary to wrap p or img in the other tags. You can style it directly. It could be more simplier layout here.
<img src="" alt="">
<h1>Jessica Randall</h1>
<p>London, United Kingdom</p>
<p>"Front-end developer and avid reader."</p>
<ul>
<li><a href="#">It's a link here!</a></li>
...and more links here
</ul>
Oh, and why do you apply font: inherit for every selector? I studied your css but can't find where it could be useful (but maybe I can't catch something =)).
Marked as helpful
@Alex-Archer-I Thank you for the advice! I'll work on making those changes.
Regarding the last point, font: inherit; is part of my CSS reset sheet that I use. From what I understand, it's mainly beneficial for form elements because they don't inherit font properties from your CSS by default and instead use the browser's stylesheet. While this page doesn't have any form elements, I include this rule as a best practice to ensure consistency and prepare for when these elements are used in the future.
@Alex-Archer-I
Posted
@jdgarcia277
Oh, I oversighted that you declared font-family and font-size at the root! Now it has much more sense =)
It is a most interesting use of clamp I have seen this far! I just trying to find good clamp patterns. Guess I should follow you now.
And I forgot to tell you that it's recommended to add role="list" to ul and ol tags if you change their display or appearance, cos Safari screen readers have issues with recognizing them.
By the way, I wonder if declaring font-size in a root is a good idea? I mean root takes this value from the browser settings. And what happened if user change them? Will your value overwrite browser's or be overwritten? Hm...
@Alex-Archer-I
I completely overlooked the side effects of declaring font-size in root. From what I could find, declaring this will over-ride browsers and users. So if a user uses a larger font size for accessibility, this would be taking that away from them. There are some tips in this css-tricks article that I'm going to use from now on. I'll have to adjust my clamp calculations a bit, but that's not a big deal.
Thanks for pointing this out! Learning a lot of new things today.
@Alex-Archer-I
Posted
@jdgarcia277
That's interesting article, though I really suggest you not to use the 62.5% trick. Sorry, right now I can't find source about issues it creates. I'll search for it later. Besides, I can't see how using clamp with rem units into the body contradicts the core idea of this article. I mean we still use values which depends on user's setting.
Anyway, thank you too =) I learned new things too. That's why I like this place - you can find cool people, learn something and help someone =)
Oh, maybe this would be help for clamp calculations =)
@Alex-Archer-I
Posted
@jdgarcia277
Ok, I can't find the article I read once, but I've found something better and get a few tips for myself from there =) Here the part about 62.5% thing.
