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

Community feedback

• 

  dewyrag•230

  @dewyragPosted 7 months 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

  1

  ---

  

  P

  Koda👹•3,850

  @kodan96Posted 7 months ago

  hi there, @dewyrag, long time no see! 👋

  How did I learn JS? 🤔

  I have no idea, tbh. When I started I was looking at a simple eventListener as if it was a serial-killer. I had no idea what I was doing. But I stayed proactive, tried to somehow build something (anything). I actually learned from FreeCodeCamp first, but it was confusing indeed.

  Then I started to read some books about programming in general, also started to read docs (but I wouldn't recommend learning by reading docs only). And after a while stuff just started to click somewhere back there. I guess if you do it you gotta get better at it at some point.

  And I decided to get myself into computer science, and it was veeeery difficult (I'm still doing it), but it helped to kinda make things clear.

  I'd recommend you to just stick with the basics first, practice them.

  Stuff you should get into first:

  • loops
  • conditional statements
  • data types and how to work with them
  • basic webdev functions and methods like eventListener, forEach etc.

  I can't rlly explain general things like this, but if you have any more specific questions feel free to ask.

  Hope this helped 🙏

  1

  

  dewyrag•230

  @dewyragPosted 7 months ago

  thankyou for the reply, im trying to complete the faq accordion but i dont know how to make it interactive what do you think i need to learn to complete it? also do you think the 30 day learn javascript leetcode is a good place to learn? @kodan96

  0

  

  P

  Koda👹•3,850

  @kodan96Posted 7 months ago

  @dewyrag

  I don't think doing LeetCode is a good idea at the beginning.

  in FAQ you need to loop through the sections with a forEach() loop and listen to click events. within the eventListener you toggle the two icons and the corresponding answer. you can check my solution if you want, but I used jQuery to complete it, so the syntax of my code is different.

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted 7 months 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!

  0