responsive landing page using html, css, bootstrap and javascript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout seems fine on desktop and mobile state. Also, since you are making the top portion fixed on the top part, make sure add box-shadow on the bottom part so that it will create a sense of division, because right now, it is purely white, it blends to the background when you scroll and it feels the layout is too big.

  Some suggestions would be:

  • Your nav element should be wrapped inside header element.
  • The a tag that wraps the website logo should have aria-label="homepage". This will make sure users will know where this link would take them.
  • The alt of the website logo should be alt="insure". The image already has the text, better to use it as the value. Also, avoid words like "logo, icon, image, picture" as a value on alt attribute. Assistive tech will handle those for you.
  • The view plans should be an a tag as well, since it is still a link and not a control. Also, you might have notice, you put it as a direct child of ul element. Only li element is can be used as a direct child of ul.
  • You should have a main element. main element is a landmark that will help a user to navigate properly a website. On this one, the preferred structure would be:

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

  • The hero section title should be the h1 and not h3. You should swap it with the second sections heading tag.

  • view plan on hero should be a tag as well.

  • The alt value of the img in the hero-section should have a descriptive alt value, because it adds to the content of the website.

  • When using heading tag, do not skip a level. If you have a h3 make sure that there is 1 h1 and there are h2. Use heading tag with its level only being incremented by 1. h1 to h2 to h3.

  • On the cta section, the how we work should be link as well.

  • On the footer the website logo should use alt="insure" as well.

  • On the footer in your css, you should avoid using / path, since it doesn't work in github. It works on our local machine but not on github, make sure it is on the right path, not using the root path.

  • Social media links in the footer should be inside a tag that are inside a ul element. Since those are list of social media links.

  • The links on the footer on the very bottom should have the same structure as well. Using ul and a tag, but, the whole links should be inside a nav.

  • On mobile layout, the hamburger toggler should have a visual indicator like a outline when it have the focus. Right now you won't be able to see any indicator.

  • The button as well should have aria-label="hamburger dropdown toggler" so that users will know what that button does. It also should have aria-expanded being triggered when the dropdown has appeared.

  • Your dropdown should also be hidden properly. Right now, you can use tab key in your keyboard and even if the dropdown is not triggered, you will be directed to it, which it shouldn't do. You might need to use visibility: hidden then triggering it as well to visibility: visible.

  Aside from those, great work.

  0
• 

  Felix M.•65

  @felixmacaspacPosted about 3 years ago

  Hey just some small feedback with the transitions, I think it would be cool if you can add ease-in transition effects for your navigation bar. So the elements would be smooth when it's being hovered. I also notice that when clicking the navigation bar (mobile) it doesn't close the whole navbar, it would be a great UX if you can also add that feature. Well done!

  0