Responsive Easybank Landing Page using HTML, Sass, and JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one. Layout in desktop is good, though the background-image on the right side of hero section is missing. Instead of using url(/images/bg-intro-desktop.svg) no-repeat in your background declaration. Use url(../images/bg-intro-desktop.svg) no-repeat. I used the ../ path, using / (root) on github does not work, so you need to specify the relative path without using it.

  Other suggestions would be:

  • On your navbar, the easybank logo could have the alt text set to "easybank". Since that is the company's logo, better to use it to describe a company logo's text.
  • On the navbar as well, do not nest button inside a tags, this adds a extra tab using keyboard. Using a tag alone will be better.
  • Wrapping all the content inside main will make your site more structured. The html will be like

  header
  main
  footer
  

  This will make a screen reader user to navigate more properly.

  • alt text on the hero image could be empty since it is for decorative purpose only.
  • The heading tags on the "Why choose easybank" should have h3 instead of h4. This will clear up some issues. When using heading tags, do not jump with 2 or higher heading levels. Go from h1 to h2 to h3 not h1 to h4
  • The elements on the articles section could have been wrapped on their own article tags since they are articles.
  • The articles heading should been wrapped inside a tags since they will be treated as go to another page to read articles. It would be like:

  <a>
    <h4 or h5>
    {title}
    <h4 or h5>
  </a>
  

  • Footer easybank logo's aria-label could have been the easybank as well.
  • The links on the footer should have been inside a tags since they are links.
  • The social media links as well should have been wrapped by a tags.
  • The hamburger menu on mobile layout should have used a button element. This adds more semantic in your structure, since you are only using img element, it can't be navigated properly by keyboard or assistive tech. Along with the aria-expanded attribute.

  Aside from those, good work.

  Marked as helpful

  1

  ---

  

  Jordan Moore•130

  @JordanMooreePosted over 3 years ago

  @pikamart Thank you so much for the detailed feedback! I learned so much from it. I took care of some immediate changes like the IMG path for Github and the alt text for the easybank logo.

  I copied and pasted your suggestions into my notes so I can follow that for the next project! Thanks again. 👌

  1