Html and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great though I don't know why but the section before the footer is not being shown properly like the one on the screenshot. Layout is responsive and the mobile layout looks great.

  Some suggestions would be:

  • Always include the box-sizing: border-box as a default for all element so use

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

  • You wouldn't nest the header inside the main since this will make the header not visible as a primary landmark. A typical layout would look like:

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

  This way, all element that has content are inside landmark elements.

  • Website-logo should use alt="huddle" remember that website-logo are one of the meaningful element on a site so always make them visible.
  • The other images that uses alt="' could use aria-hidden="true" attribute on it as well so that it will be totally hidden for all users.
  • Avoid using multiple h1 on a page use only 1 per page. Change the other into h2 referring to the ready to build your community? text. Also this is the one I mentioned, the button is not showing.

  FOOTER

  • Website-logo should be visible like I mentioned above.
  • On the list of links, do not use other element besides li inside a ul element, that is invalid, nest the single a tag with li. Also you can wrap the ul inside a nav since it looks like your website's navigational links.
  • Social media links could use ul since those are "list" of links.
  • The a tag should be the one that is using the aria-label and the value should only be the name of the social media it wraps like aria-label="facebok".
  • Each svg of the social media should be hidden since they are only decor so use aria-hidden="true" on the svg.

  Aside from those, great work again on this one.

  2

  ---

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @pikamart so useful! thank you very much, I'm gonna work on those. Your help is appreciated.

  0

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @pikamart I made the changes but I saw that all the buttons is showing well. I don't know which button you cannot see. Can you check?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @distephano30 Hey, the button at the cta section on the Ready To Build Your Community? heading . On my end it still doesn't show up

  0

  

  Stephane Jean•360

  @distephano30Posted about 3 years ago

  @pikamart that's weird! It shows up perfectly on both, desktop and mobile version on my end. I'll take a look again.

  0