Landing page with using flexbox and grid + vanilla JavaScript

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Desktop layout looks fine just a little shorter than the design, the site is responsive though and the mobile state looks great.

  To be honest, I still find this challenge really hard so bear with me on this one:>

  • For this one, I would prefer to only use header for the topmost part that includes the navbar. The header would be position: absolute onto the top part so that your first section of the main could occupy those spacings up top and still creating that background-image. The reason that I only include the navbar inside the header and not those text on the hero-section is because the primary header is typically reused on different pages since it includes the link, by including those text inside the header you won't be able to do this right.
  • I wouldn't include the header-logo inside the nav since it is not being treated as a link, if you somehow use a tag to wrap the logo, then you can include it, but remember to label the a tag properly on where the link would take the user.
  • Those 3 items, product ,company, connect should be a button and not a link because the items on the dropdown per category are the ones that should be links.

  1. ( Hide img element: Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.)

  • The arrow-icon per category should be hidden, use method number 1. A more proper markup per category looks somewhat like this:

  <nav>
   <ul>
    <li>
      <button class="button__product aria-expanded="false">Product</button>
      <ul class="category__product>
        { links in here }
      </ul>
    </li>
   </ul> 
  </nav>
  

  Then you could just something like:

  .category__product {
    display: none;
  }
  
  .button__product[aria-expanded="true"] + .category__product{
    display: none
  }
  

  As you can see, you should use the aria-expanded="false" as default attribute on the button and it will be set to true by javascript if the user toggles the button and vice-versa.

  • learn more is better to use a tag rather than button since it looks more a page link rather than a modal right.

  FOOTER

  • Use a more proper alt value for the website-logo.
  • Those links could have been inside a nav element since those are still your website's navigational links.
  • Also, same as the markup that I proposed earlier, you could use ul inside the nav and each li would be its own category. The first li would wrap the the product category and so on.

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component.

  SUPPOSING BUTTON IS USED

  • The button should have a default attribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu" as the text-value.
  • The img inside the hamburger-menu should have been hidden properly by adding aria-hidden="true" on it.

  Aside from those, great job again on this one.

  11

  Marked as helpful