Skip to content
Submitted almost 3 years ago

Huddle landing page curved section

Ehab Joe•110
@huhu0000
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Here is another solution and I hope to not find lots of errors or accessibility issues. Any tips or suggestions would be appreciated :)

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    Hi There! 👋

    Congratulations on finishing this challenge! 👏

    I notice that you are importing a lot of font families. Please only import the necessary font families. 🙂

    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;300;400;500;600;....more font families >

    Anyway, this <link rel="stylesheet" href="https://fonts.google.com/specimen/Open+Sans"> also doesn't do anything, so you can remove it.

    I have some feedback on this solution:

    • Accessibility
      • The logo should in the header landmark. Also, there's no nav element here.
      • The current header should be a section. It's commonly known as the hero section.
      • So the page structure should look something like this:
    <body>
  <header>
    it contains the logo and the "Try it free" link
  </header>
  <main>
    section elements live here...
  </main>
  <footer>
      it contains phone number, email, etc...
  </footer>
</body>
    • Always wrap text content with a meaningful element (p). Only use div and span for styling purposes.
    • <h1>Ready To Build Your Community?</h1> this should be h2. Keep in mind that, deadings must be in a logical order (start from h1 to h6). Heading tags can be used by users of assistive technology to navigate the website. If headings are not in a logical order, those users might get confused.
    • Wrap the input elements with form element.
    • Use button with type="submit" instead of input. It's a legacy of the browser.
    • Styling
      • I would recommend writing the styling using the mobile-first approach. It often makes me write less code.
      • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍

    That's it! Hopefully, this is helpful! 😁

    1
    Ehab Joe•110
    @huhu0000Posted almost 3 years ago

    @vanzasetia Wow that's exactly what I wanted to know, honestly I do appreciate your efforts 👍👍

    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