Skip to content
Submitted 8 months ago

Huddle Landing page using Grid, Flex and Media Queries

Tharun Raj•1,330
@Code-Beaker
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

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

Completed it and learned how to google for things that you find difficult. That's all :)

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

I didn't know how to get the rounded borders around the icons. So did a bit of Googling and Luckily, Stack Overflow helped me solve it.

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

I'm not really confident about its responsiveness. It might not be perfect for bigger displays because it is my first time trying mobile-first workflow completely.

I would like to know if I did well with the CSS. Thank you!

Community feedback

  • John•410
    @MiyaoCatPosted 8 months ago

    You have <main class='main'>. I think that's redundant. You'll only have one <main> element so you don't necessarily need to give it a class. If you do, maybe make it more descriptive of the element.

    The site only covers the top half of the screen when viewed on desktop. To fill out the page so the content covers the entire height of the screen you could do main { display: flex; flex-direction: column; } then header { flex-grow: 1}

    You have most of the content in the <div='header'>. You can use the official <header> tag for the logo and have the meat of the content in <main>. Then put the social icons in the <footer>.

    Otherwise, looks great!

    Marked as helpful
    1
    Tharun Raj•1,330
    @Code-BeakerPosted 8 months ago

    Hi there @MiyaoCat,

    Your reply has been helpful in correcting the mistakes in my code. I have made the changes you've mentioned above. I would like to know if my solution has improved as the per the changes made.

    Thank you!

    1
    John•410
    @MiyaoCatPosted 8 months ago

    @Code-Beaker Happy to help where I can!

    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