Huddle landing page - SASS and mobile first approach

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile state looks great as well.

  Some suggestions would be:

  • Don't style the html element. Typically, you only set like box-sizing font-size on the html but not directly style it, move those to the body tag.
  • Avoid using height: 100vh as this limits the element's height based on the remaining viewport/screen's height. It is set on your html, actually remove this one since your body tag has a min-height.
  • The a tag that wraps the website-logo should either have aria-label or an screen-reader only element inside it. The value will be where the link would take the user. Since website logo usually points to homepage, use:

  <a href="/" aria-label="homepage">
    <img src="images/logo.svg" alt="Huddle "> # remove the word "logo" use huddle only
  </a>
  

  You do this method if there are no text-content inside the element. As you can see, lose the word "logo", avoid adding words that relates to "graphic" in the alt attribute.

  • Always have a main element to wrap the main content of the page. A typical structure would look like:

  <header />
  <main />
  <footer />
  

  This way, all elements are inside landmark element.

  • The social medias could be inside ul element since those are "list" of links.
  • Each a tag that wraps the social media should be using the method I mentioned above. The value will be where the link would take the user, on facebook, of course use the value facebook.
  • Each img on the social media should be hidden since they are only decoration so use alt="" and add aria-hidden="true" attribute on it as well.

  Aside from those, great work again on this one.

  Marked as helpful

  1