Huddle landing page: HTML + CSS + Grid + Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, could use some tweak to be a bit more bigger, the site is responsive and the mobile state looks great as well.

  Some other suggestions would be:

  • For this one, I would separate the top part using a header:

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

  Since using its own landmark for it would be really great. You can then just apply the background inside the body tag.

  • Avoid using !important since it makes an element's style overwritten.
  • I would also put the social-medias inside the footer.
  • 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.
  • Also, you could have just use img for the social-media-icons, I don't really know that ion-icon hmmm :>

  Aside from those, great work again on this one.

  Marked as helpful

  1
• 

  Thiago Santos•295

  @thiago-hdsPosted about 3 years ago

  Thank you for the feedback! I made the changes you suggested.

  I usually avoid using !important but I learned recently that utility classes can be a good use case for it. However I don't think there is need for it on this small project, so I removed them.

  Ionicons is one of the icon libraries suggested on the challenge style guide.

  Thanks again! :)

  1