intro section built with html, css and javascript

Community feedback

• 

  Varghab Shib•50

  @VarghabPosted over 1 year ago

  You did great work 👏, however I have a few suggestions -

  1. Don't use both width and height properties for your images. Doing this will shrink your images.
  2. Use an additional wrapper div for your hero section and give flex property to that wrapper.
  3. Lastly, the site is not responsive for tablets. Try to make it responsive for tablets.

  1

  ---

  

  Bright Anua•170

  @prolixtrexPosted over 1 year ago

  @Varghab thanks. I will do that. Considering the tablet size, I thought they didn't provide option for it. It was specified for desktop and mobile only. However, I'll also include it. Thanks

  1

  

  Varghab Shib•50

  @VarghabPosted over 1 year ago

  @prolixtrex You are welcome. If my feedback helped you then you can upvote me.

  1
• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  The code for the hamburger could have been written like this

  hamburger.addEventListener('click', toggleMenu)
  
  function toggleMenu() {
  if(navMenu.classList.contains('active')) {
  navMenu.classList.remove('active') 
  } else {
  navMenu.classList.add('active')
  }
  }
  

  0

  ---

  

  Bright Anua•170

  @prolixtrexPosted over 1 year ago

  @mukwende2000 okay. But what is the difference between this approach and using classList.toggle("active)

  0

  

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  @prolixtrex the difference is that toggle is used to remove the class if it is there or add if it is not. But the code i provided above is not about toggling. It is i comparison to this code

  window.onclick = (e) => {
  //hamburger control
  if (e.target.matches(".bar") || e.target.matches(".hamburger")) {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active")
  } else {
  if (e.target.matches(".nav-menu")) {
  hamburger.classList.remove("active")
  navMenu.classList.remove("active")
  }
  }
  

  Instead of adding an event listener on the window and then checking if the e.target is the hamburger, You'd rather add the listener on the hamburger itself so there is no need for any checks. Also it is advised to use 'element.addEventListener('click', func)' than "element.onclick".

  1

  

  Bright Anua•170

  @prolixtrexPosted over 1 year ago

  @mukwende2000 okay I understand. I used the addEventListener before but changed it because I wanted to implement closing the hamburger when the user clicks outside it. So I needed to get the target clicks, that's why I used window.onlclick to determine where the user clicked. Notice that I also used similar code to close the drop down when the user clicks anywhere outside the drop down

  0

  

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  @prolixtrex okay i get, good morning to you.

  1