Huddle Landing Page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, site is responsive and the mobile state looks great.

  On this one, what you should have done is wrap the i tag that contains the icon inside of a a tag, and on the a tag, make it a circle and match like on the design.

  Some other suggestions would be:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-boxl
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • But to be honest, a preferred markup on this one would be:

  <header />  # contains the logo
  <main />  # main content
  <footer />  # the social-media links
  

  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="huddle".
  • The hero-section image could use an extra aria-hidden="true" so that it will be totally hidden for screen-reader users.
  • You don't need to use position: absolute on the .social selector. Since you are just using this styling to make the element on the right side, you could instead use these stylings:

  max-width: max-content:
  margin-left: auto;
  

  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  AhmedFawzi•70

  @AhmedFawzi44Posted about 3 years ago

  @pikamart Thanks a Lot !! This feedback is really helpful ! i learned many things from it ! Thanks ❤❤

  1