Skip to content
Submitted over 2 years ago

Huddle landing page with a single introductory section challenge hub

Peter Hannell•200
@peterhannell
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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•935
    @kenreibmanPosted over 2 years ago

    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 Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord