Submitted almost 3 years ago

Responcive Huddle Website

accessibility

Govi2020•160

@Govi2020

A solution to the Huddle landing page with curved sections challenge

Preview Code

Solution retrospective

This is the website challenge. the challenge was very exiting. it took me a day to complete it wasn't too hard but still good.

your feedback will be superb!💖

Code

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 years ago
Hey @Govi2020, great job on this project!

Some suggestions to improve you code:
- To make your content semantically correct, you want to set up your code in the following manner:
```
    <body>
      <header>
        <nav></nav>
        <section>Build The Community Your Fans Will Love</section>
      </header>
      <main>
        <section>Statistics</section>
        <section>Grow Together</section>
        <section>Flowing Conversations</section>
        <section>Your Users</section>
        <section>Ready To Build Your Community?</section>
      </main>
      <footer></footer>
    </body>
```
The <header> element contains all your introductory content.

Source:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
- For headings, you semantically correct to use the heading elements; <h1> - <h6>.
So for this challenge, 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?
Source:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
- For your email input, you want to set up in this manner:
```
 <input
              type="email"
              name="email"
              id="email"
              placeholder="Email Address"
              required
            />
```
- To make you content accessible to your users, it is a best to use rem/em instead of px for your CSS property values. For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.
Sources:

https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

Happy Coding!

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