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's Landing Page

ianwilk20 220

@ianwilk20

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of the responsibility of the site because with these challenges we are provided with two mockups, one for the mobile and one for a desktop layout. The in-between sizes of the screen are also important to consider when developing a responsive website.

Next time, I would find a way to make the CSS file less cumbersome.

What challenges did you encounter, and how did you overcome them?

I was having trouble with some of the images overflowing with their parent elements.

What helped was adding this to my CSS to see the borders of elements and what exactly was causing the overflow:

What specific areas of your project would you like help with?

I'd like to know if there's a better practice for developing a responsive website without a huge CSS file that has screen size-specific customizations.

I'm trying to find a way to minimize the amount of CSS I write. Typically I start developing the mobile layout of a site and afterwards move on to designing the standard 1920x1080 desktop layout. Already that requires some media queries. What adds more complexity to the CSS file are the in-between sizes. Most often the in-between sizes need certain customizations to make the site's responsiveness look natural and less like the in-between sizes were forgotten about.

Community feedback

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