Skip to content
Submitted about 2 years ago

Huddle Landing Page with Bootstrap + SASS + Font Awesome

Ihsan Nurul iman•110
@ihsansfd
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I try to code in a way to make everything reusable and maintainable.

To name a class, I use this structure: {spesific class name based on hierarchy [using BEM]} {class name based on hierarchy [using BEM]} {styling class} {utility class} {Bootstrap class}

Try to avoid @extend except for the usage that's recommended by SASS. Use @mixin for utility and helper. Use class for styling.

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey @ihsansfd, great job on this project!

    To make your content semantically correct you'll want to do the following to your code (only did the parent containers):

    <body>
      <header>
        <nav></nav>
        <section>Build The Community Your Fans Will Love</section>
      </header>

      <main>
        <section>Grow Together</section>
        <section>Flowing Conversations</section>
        <section>Your Users</section>
        <section>Ready to Build Your Community</section>
      </main>
      <footer></footer>
    </body>

    You'll notice that the first section is included in the <header>. This is because everything in the <header> is meant as the introductory part of your site.

    Regarding your use of headings, unfortunately, it's not being used properly.

    When using headings, you always start with <h1> and go down from there. So your headings should look like this:

    <h1>:

    • Build The Community Your Fans Will Love

    <h2>:

    • Grow Together
    • Flowing Conversations
    • Your Users
    • Ready To Build Your Community?

    Happy Coding!

    2
    Ihsan Nurul iman•110
    @ihsansfdPosted about 2 years ago

    @vcarames Hi, huge thanks for the suggestion! Really happy to get my first feedback.

    Regarding the <header>, yeah I've seen the structure you've suggested. I did intentionally make the <header> twice (one for nav and one for jumbotron) inspired by this site: https://id.wordpress.org/. You'll see that it has two <header> just like mine, so it's something incorrect?

    And thanks for correcting the heading part, it's something I would take a note for latter project!

    0
    バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    @ihsansfd As far I know, you can use multiple <header> elements, in your code, they just can't be inside of each other:

    This one would be incorrect.

        <body>
      <header>
        <header></header>
      </header>
    </body>

    While this one is correct:

        <body>
      <header></header>
      <header></header>
    </body>

    I haven't had a need to use multiple <header> element, so it still unknown territory for me.

    0

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