Huddle Landing Page with HTML/CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop looks really great, the responsiveness could be better since right now, if you scale down the screen-width, the hero-image starts to get squeezed. The mobile layout however looks great.

  Some other suggestions would be:

  • The website-logo should have used alt="huddle" as the attribute, the image already has the text better start using it. Also, a website-logo should always be visible for all users.
  • The hero-section img should have an extra attribute aria-hidden="true" so that it is totally hidden.
  • register is more likely a link so using a tag on it would be better.
  • Also, when you remove an outline to an element, always make sure to add another visual indicator. Try using tab key on your keyboard, you can't navigate properly on the site because there is no visual indicator where you at right now. Add some stylings on the :focus-visible state of the element.
  • On the a tag that wraps the social-media-icon, it should have an aria-label or an sr-only element inside it, defining where this link would take the user, for facebook, the value of course should be "facebook".
  • The svg inside the social media should be hidden, I don't know why there is a ion-icon on the markup, it should just be:

  <a href="link of the social media">
    <span class="sr-only">facebook </span>
    <svg aria-hidden="true"></svg>
  </a>
  

  No need to nest the svg much deeper, also add that aria-hidden="true" since the icon is just decoration.

  Aside from those, great work again on this one.

  1

  ---

  

  iliwili•225

  @iliwiliPosted about 3 years ago

  @pikamart First of all thanks for the great feedback you have given me, I learned so much from this. I updated and understand everything until the 'sr-only', so I did some research and I actually never was thinking about screen readers when programming these challenges.

  I learned a ton from this, thanks again.

  0