Html CSS Grid Flexbox MediaQuery

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really great work on this one. Congrats as well for your first fem challenge! The desktop layout looks great just needed it to bit wider/bigger. The mobile layout looks fine but the breakpoint is too early coming from desktop layout. Right now at 0px - 1200px you are using the mobile layout where desktop layout could use more of those, toning the breakpoint will be really great.

  Some other suggestions would be:

  • Avoid using height: 100vh on an element especially the body tag as this limits the element's height based on the screen. Instead replace it with min-height: 100vh this takes full height but lets the element to expand if needed.
  • The website-logo should be using the website's name as the alt like alt="huddle". A company website will always be a meaningful element in a website.
  • 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 content are inside landmark element.

  • Hero-sections img could use aria-hidden='true" attribute on it so that it will be totally hidden.

  FOOTER

  • Social media links should be using a tag for each of those since they are links.
  • Using ul on it would be great since those are "list" of links.
  • Each a tag that wraps the social media should use like aria-label attribute. The value will be the name of the social media like aria-label="facebook" you add this on the a tag. You typically do this if there are no text-content inside an element that assistive tech could read.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Ahmed Saidi•130

  @AhmedSaidi99Posted about 3 years ago

  @pikamart Thanks a lot, your comment was useful

  0