Flyo_landing Page

Hey, great job on this one. Desktop layout is kind of shorter than the design right now but it's fine for now I guess? The site is responsive and the mobile state looks great.

Some suggestions would be:

• I see lots of html element sitting on its own with being nested in landmark. A typical structure of a site looks like this:

<header />
<main />
<footer />

This way, all element that has content are inside their respective landmark elements.

• The website-logo-link a tag lacks extra information on where it would take the user. You would need to use aria-label attribute or screen-reader element inside it. The value for whatever method you pick will be the place where this link would take them, since website-logo typically points to homepage, you can use "homepage" as the text-content or value.
• Website-logo svg should have a title element inside it which is referenced by the svg's aria-describedBy you will use fylo as the value since the svg is the website's logo. Take a look at this link on what I said
• 3 links could be inside nav since those are you website's navigational links.
• I just noticed it by now, do not include the css inside the html make a separate file for it so that it will be easier to maintain and manage.
• Always have an h1 on a page. Use h1 on the hero-section's heading text.
• Nest the input inside a form so that markup could be clearer.
• Your input's aria-describedBy right now is wrong. What you should have done is that have a form validation right, then have a error-message. That error-message will have an id which is referenced by the input aria-describedBy when the input is wrong.

if ( input is wrong )
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedBy", id of the error-message);
else 
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedBy");

• The get started should be a button with a type="submit" and not an a tag since it is not a link, it should be a button to submit the form.
• Have a look at this simple snippet of mine about accessible form. You will the usage of the aria as well as an extra aria-live element that announces if the form submission is not a success, you can tweak it to add like a success message as well.
• Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
• The See how Fylo works should be a link a tag and not being inside a span.
• The svg inside the See how Fylo works link should use aria-hidden="true" so that it will be hidden properly.
• Person's img should be using the person's name as the alt like alt="Kyle Burton". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
• Person's name could use a heading tag since the section is all about the person, better highlight them properly.
• Same goes for the cta section form, use the suggested way I mentioned above.

FOOTER

• Website-logo-img should have alt="fylo".
• Those 7 links should be inside a single ul element since those are related links and by creating their own ul, instead of users being given a proper length of list, they would get 2 separate.
• Also if you used the ul on it, nest it inside a nav since it is still your website's navigation links.
• Social media links could be inside ul since those are "list" of links.
• Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.
• Each svg inside the social media link should be hidden since they are only decoration so use aria-hidden="true" attribute on them.

Aside from those, great job again on this one.