warning
Document should have one main landmark
<html class="fontawesome-i2svg-active fontawesome-i2svg-complete" lang="en">Submitted
Huddle landing page with a single introductory section challenge hub
Peter Hannell• 200
@peterhannell
Design comparison
Reports
Accessibility report (1)
Peter Hannell’s questions for the community
For this particular project I took a slightly different approach this time with my CSS by setting a base font size on the body and scaling everything relative to that by using ems. I enjoy experimenting with the various ways that CSS that can be used to accomplish the same thing.
I should probably have taken more time to structure my code and trim it down, but hopefully it's not too disorganised or confusing!
As always any feedback or suggestions are welcome :-)
Community feedback
Ken• 975
@kenreibman
Posted
Great job on the use of proper HTML5 semantics tags, and the use of rems!
Since you already have a good understanding of not using px and instead using rems, I'm going to send you this article that might be interesting for you to read.
Although I really recommend you to read it, summarized, the article talks about the benefits of setting the base font-size to 62.5% which basically makes 1rem = 10px. Something you were already close to doing!
Now you might see the pattern, and how rems become much easier to handle. If you want a 255px container, just set it to 25.5rem.
From experience, I also suggest giving classes to your heading tags specific names instead of leaving it as h1 so it's easier for someone going over your work to understand what is going on.
I hope this helps, and keep it up!
Marked as helpful
1
Please log in to post a comment
Log in with GitHub
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!