Another challange complete :)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Witty with that questions of yours haha. The desktop layout is fine just needed a bit of padding to make it more compact. Responsive state could be better since when going into mobile layout the hero-sections background is not occupying the whole screen's width. The mobile layout looks great.

  Some suggestions would be:

  • Do not style the html element, set those inside the body tag. Also, avoid using height: 100vh as this limits the element's height based on the remaining screen. Instead use min-height: 100vh this takes full height but lets the element expand.
  • Always have a main element to wrap the main content of your site. On this one, the .wrapper should use main instead of just div.
  • Block element should not use width : 100% as by default it uses this.
  • Now, a typical layout looks like:

  <header /> # contains the website-logo, navlinks
  <main /> # main  content of the page
  <footer /> # footer 
  

  • The website-logo should not be inside nav. nav element should only contain the navigational links of your website.
  • Use alt="huddle" on the website-logo, always be descriptive at website-logo. Also avoid using words that relates to "graphic" in alt attribute like "logo, icon, image.." img is a graphic so no need to describe it as one.
  • I would use a tag for the get started for free since it looks like the try for free link that you used.
  • Hero-image should be using an aria-hidden="true" so that it will be totally hidden.
  • I wouldn't use alt for the subsequent images since they are only vector images and could be hidden buy using alt="" and aria-hidden="true" on it. Decorative images should be hidden at all times.

  FOOTER

  • You are missing the website-logo.
  • The 6 links should not be separated in two list, those are all related to one another. You should use 1 ul on them and you can nest the ul inside a nav since those are your website's navigational links and since they are links, use a tag for each.
  • Social media links should be using a tag for each and use ul element since those are "list" of links.
  • Each a tag that wraps the social media should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should state where the link would take them like aria-label="facebook".
  • Each social media icon should be hidden since they are only decorative, use the method I mentioned earlier to hide elements.

  Aside from those, great work again on this one.

  Marked as helpful

  0
• 

  Olaf•230

  @ziarnkoPosted about 3 years ago

  Thats a lot of information from you , thanks a lot for your time !!!!!!

  0