Responsive Mobile First Huddle Landing Page with CSS Flexbox and Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks fine, just some text needs to be bigger so that some white-spaces could be occupied. Mobile layout looks great.

  Well, I don't really used plain css, I use scss so that I could have different module/files, this way, I won't be using a single file it will prevent it from being cluttered. Have a try using scss and search about 7-1 pattern.

  Some other suggestions would be:

  • You don't really need a nav on the header since there are no navigational links that are used, a div would be fine.
  • I think the try for free and any other buttons that looks similar to that is better when it uses a tags, because it looks more likely to be a page link for you to try it.
  • On the img in the hero-section, if you are using aria-hidden="true" on the image, then use an empty alt as well like alt="" on it, since you are hiding the image.
  • Also, for the icons below the hero-sections, the icons that are used by the numbers should have alt="".
  • The text 1.4k+ and the 2.7m+ isn't really suited to be a heading tag, since it doesn't add any extra information about the section where it is used. When a design has bold text, it doesn't always mean that they are heading tags.
  • Sam for the other images, alt="" if it is just decorative.

  FOOTER

  • The alt value for the telephone and email icon should be empty alt="" and need aria-hidden="true". Decorative images should be hidden.
  • The social media links could be nested inside ul element, since those are "list" of links.
  • The form's input needs to have a label associated with it, use an sr-only to the label you are going to used, describe the purpose of the input.
  • Lastly, just to practice more js, create a email validation.

  Aside from those, great work again on this one.

  Marked as helpful

  2
• 

  Akanksha Yadav•355

  @Akku22janPosted about 3 years ago

  Thank you so much for your feedback.

  0