Submitted almost 3 years ago

Huddle Landing Page using React

react, sass/scss

Tyler•330

@tylermaks

A solution to the Huddle landing page with alternating feature blocks challenge

Preview Code

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

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 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

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