Skip to content
Submitted over 1 year ago

Huddle landing page with single introductory section

Bárbara Damasceno•320
@barbaradamasdev
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

Hi. I've some questions about the best way to code. I've done the challenge, but I feel like I'm not doing in the best way. For example: the reset in "*" and "body":

I used this, and worked:

  • { margin: 0; padding: 0; box-sizing: border-box; }

In the body I put this: height: 100vh;

Worked, but is the better way to do this?

Other question is about centralize the content. In all my projects I put the content box in position absolute, but when we change to mobile version I needed to change a lot of things. In this challenge I just needed to change "top", but I was in doubt if was the better way to do.

Please give me your feedback, it'll help a lot. Thank! :)

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 1 year ago

    Hello, Bárbara Damasceno! 👋

    Nice effort on this challenge! 👏

    There is nothing wrong with using the styles you referenced to reset your CSS. I use those styles all of the time in my projects, too. You may want to look into using a more complete CSS reset for your next project. Here's a decent article on that if you're interested. 🙂

    I'd also suggest looking into making your solution more responsive. Currently, things look good in the desktop and mobile layouts, but not everything is visible in-between (meaning users may have to horizontally scroll to see all of the content of the page). Using tools like flexbox or CSS grid over absolute positioning will help you with this. You can center things will flexbox pretty easily with the following styles:

    display: flex;
align-items: center;
justify-content: center;

    If you’d like to learn more about how to make your site responsive, check out this helpful course.

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    1
    Bárbara Damasceno•320
    @barbaradamasdevPosted over 1 year ago

    @ApplePieGiraffe Thank you so much! I'll read those articles, you helped a lot😊

    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