Skip to content
Submitted about 2 years ago

Huddle Landing Page using React

Tyler•330
@tylermaks
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

Hi all,

Here is my solution for the Huddle Landing Page project. This is my second full landing page project and have definitely improved since the first one. I didn't encounter any major challenges, but I'm always conscious of trying to keep my css tidy. With that in mind, any thoughts or feedback related to my project structure, scss, or anything else is always welcome - thanks!

  • Tyler

Community feedback

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

    Hey @tylermaks, some suggestions to improve you code:

    • To better structure your HTML code, you will want to set it up in the following manner:
      <body>
      <header></header>
      <main>
        <section class="hero-section"></section>
        <section class="together-section"></section>
        <section class="conversation-section"></section>
        <section class="users-section"></section>
        <section class="cta-section"></section>
      </main>
      <footer></footer>
    </body>

    There is no need for a Nav Element since there is no nav menu, only a single button.

    • The Alt Tag description in the logo needs to be improved upon. The logo is arguably the most important image in you page. So the description should state the company name, e.g., "Huddle's company logo".

    • Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

    • The Illustrations serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

    • The headings are being used incorrectly. The <h1> Heading can only be used once per page. Following that you can use the <h2> Heading, <h3> Heading** and so one (depending on the level of importance the heading has).

    Happy Coding! 👻🎃

    Marked as helpful
    1
    Tyler•330
    @tylermaksPosted about 2 years ago

    @vcarames Thank you for the feedback! This is really helpful, these are details I was completely unaware of. I've updated my code based on your comments and will include in my html moving forward. Thanks again!

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

    @tylermaks

    Glad I could help! Keep it up!

    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