Skip to content
Submitted over 2 years ago

Huddle Landing Page

Luiza Uszacki•250
@LuizaUszacki
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

This page became bigger (taller) than my screen because I used an absolute unit (px) in padding and margin. What unit should I use then? I heard that I should use em or rem in letters, should I use it in padding/margin too or is % better?

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    Oi Luiza! Congratulations for your solution!

    I think you did a great job on your code, seems really accurate!

    I'll leave you few tips that you can consider .

    • I think the majority of person are currently using REM over PX, you can also use EM or %, I think REM is easier because you can consider 1 rem = 16px (or the value you set in the root). REM works better for different screens because works/resize in proportion. Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment.

    • I saw that you're having accessibility issues, one of them is because you need to set at least one h1 heading tag. The other I see that's because (I guess) you used bootstrap icons and I don't know what cause this error, I had the same issue and downloaded some icons. If you want you can take it from my repository.

    My solution for the same challenge is here:

    https://www.frontendmentor.io/solutions/huddle-lp-section-vanilla-css-logo-animation-easter-egg-bem-meb3nl6zF8

    I hope it helps you!

    Marked as helpful
    0
    Luiza Uszacki•250
    @LuizaUszackiPosted over 2 years ago

    Oi @correlucas. Thank you for the tips!

    About REM... Lately, I learned more about relative units, and now I use rem and em over px in all projects, I just didn't change it. I think I'll change it and replace the h2 by h1.

    And about the icons... I'm using icons from font awesome. On my computer, it doesn't show any error, so I'm not sure about the error. Maybe it's because my project became taller than some screen's size (it includes my screen) and people have to scroll down to see the icons (it seems like it's not working, but it's just at the bottom).

    With that in mind, I think I have to work on my projects' size because all of them seem bigger on my screen.

    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