Scoot Multipage Website 🛵🛵 w/HTML, CSS & JS

Community feedback

• 

  dewyrag•230

  @dewyrag

  Posted about 1 year ago

  Very nice, can you tell me how you learned JS? I just started the freecodecamp javascript section and its so confusing. all i understand are variables

  13
• Account deletedPosted about 1 year ago

  @kodan96 Unfortunately, this needs a lot of work.

  • Why did you make your class="header_menutoggle" a div...❓This is meant to be an interactive element and a div is definitely not. Instead this should be a button and it should have an aria-label, aria-expanded and aria-control.

  • This is not necessary, instead use JS to change the img of the button when the aria-expanded changes.

  <div class="header_menutoggle">
     <div ><img src="assets/icons/hamburger.svg" alt="" class="open"></div>
     <div ><img src="assets/icons/close.svg" alt="" class="close"></div>
  </div>
  

  • Lastly, the button should be inside the nav and it should be the first thing inside of it.

  • Whenever you remove the default styling for list elements, you are removing their semantic meaning. To correct this, you need to apply the role="list" to the ul/ol and the role="listitem" to the li.

  • For the logo, remove <div class="header_logo--wrapper">, it is unnecessary. Once that is fixed, the anchor element should have an aria-label stating only the sites name and and where it leads to; so in this case it would state "Scoot - Home".

  • All the background patterns, should be applied via CSS and not be present in the HTML. All you are doing it bloating your code.

  • The <section class="steps"> should have a visually-hidden heading and the <div class="steps_item"> should be built using the list element.

  • This <h2>Locate with app</h2>, <h2>Pick your scooter</h2> and <h2>Enjoy your ride</h2> should then be h3 headings.

  • The Apple and Google store should each be wrapped in an anchor element so users can then be directed to the appropriate store to download said app.

  • The footer logo should be wrapped inside and anchor element.

  • This <div class="footer_nav" role="navigation"> is unnecessary, especially when the nav element exist...

  • The social media icons aria-labels should only state the company names; "Facebook", Twitter" and "Instagram".

  • The <section class="values"> content should be built using the ordered list element.

  • For the "FAQs" section, personally, I would have used the details and summary element to make things easier, as they are fully functional and accessible. But if you really want to build it with JS, then it should look like this;

  <button
     class=""
     id=""
     aria-expanded=""
     aria-controls=""
     aria-label=""
  >Accordion One
  </button>
  
  <div class="">Content</div>
  

  You will then use JS to change the aria-expanded which will effect it styling.

  There is still a lot more that needs fixing (and I have not even look at you CSS/SCSS).

  If you have any questions or need further clarification, feel free to reach out to me.

  Good Luck and Happy Coding!

  00