Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle landing page with single introductory section

@barbaradamasdev


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

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

@barbaradamasdev

Posted

@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
Discord logo

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