Easybank landing page(React JS + Scss + Pixel Perfect + Framer Motion)

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted 6 months ago

  Hey there @Daniel-Bilodid! 👋 Here are some suggestions to help improve your code:

  I'm sorry to tell you but this "Achieved +96% in Lighthouse score for performance, accessibility, best practices, and SEO." means very little... because you have a lot accessibility and best practice errors in your code... so don't place all your faith in it.

  • You class="nav" should be a header element.

  • The text "logo" is not an appropriate alt text; it should always state the company's name. In this case it should state, "Easybank".

  • The "nav-list" an "nav__button" should be wrapped inside a nav element.

  • The nav toggle should always be a button ⚠️. A div is a non-interactive element, which means that keyboards and accessibility tools cannot interact with it.

  • The nav toggle should also have an aria-label, aria-expanded and aria-control and you will use JS to change the nav state using aria-expanded.

  • There is no need to create two separate nav menus; just create one and use CSS to style it for different breakpoints.

  • If you have the "mobile nav" and change the screen to a larger one the overflow: hidden does not get removed which prevents users scrolling, use JS to remove it a certain breakpoint.

  • The main element should only wrap your page's main content, which does not include the header; so move the header outside the main.

  There is still a lot more that needs fixing but this should be enough for now...

  Happy Coding! 👾

  0