Huddle landing page with a single introductory section

Community feedback

• 

  P

  James•340

  @james-work-accountPosted over 2 years ago

  Looks great! Just a handful of of things I noticed:

  • Your website overflows between ~769px and ~843px, you should adjust your media queries to ensure there isn't any unintentional overflow.
  • All elements with hover effects should be either anchor tags or buttons, even if the anchor tags have a href of # or the buttons don't have an associated function. So in your case, your Facebook, Twitter and Instagram icons should be wrapped in anchor tags (you can probably just replace <div class="social-icon">...</div> with <a href="#" class="social-icon">...</a>).
  • Your hover effects should also apply to the focus-visible pseudo-class. This means that people who mostly navigate websites using their keyboard rather than mouse (such as myself) can have a visual indication that they've tabbed to the correct element. So for example, .register-btn:hover should be .register-btn:hover, .register-btn:focus-visible.
  • This is a problem that a lot of people who are relatively new to SCSS face - avoid heavily-nested SCSS. A good rule of thumb is that you shouldn't really need to nest SCSS selectors other than pseudo-classes or generic selectors like .my-class + *. There's really no need to write something like .hero-container .hero-content .register-btn, since your .register-btn isn't being used anywhere else. If you take a look at your outputted CSS, it should end up looking like it was written without SCSS, not like heavily nested spaghetti.

  Otherwise, this looks really clean. Good job!

  Marked as helpful

  1

  ---

  

  Sachintha Prasad•360

  @Sachintha-PrasadPosted over 2 years ago

  @james-work-account Thank you very much, sir! I really appreciate your explanation. I'll correct those errors. Once again thank you for your valuable time

  0