Project 12: Huddle landing page using Sass, Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, the text are just bigger, the site is responsive and the mobile state looks great as well.

  Fidel Lim already gave great tip on this one, just going to add some suggestions on this as well:

  • I wouldn't include the website-logo inside the nav since it is not being treated as a home-link.
  • Website-logo img should be using the website's name as the alt like alt="huddle". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • On the buttons or just any other interactive elements, if you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.
  • Hero-section image is just a vector-decoration so hide it. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • When wrapping a text-content do not just use span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • Other images are just same vector-decoration so hide it using the method I mentioned above.

  FOOTER

  • I wonder why the website-logo in here is using a proper alt unlike the header-website-logo.
  • The icons below the website-logo could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • The 6 links should be inside a single nav element and not separated since those are all related to one another. Use ul as well for those since those are "list" of links.
  • Social media links could be inside ul since those are "list" of links.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.

  Aside from those, great work again on this one.

  Marked as helpful

  2

  ---

  

  Mainul Islam•160

  @Mainul-Islam-NirobPosted about 3 years ago

  @pikamart Many many Thanks💚💚💚

  1
• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi Mainul,

  Great work finishing the project. It looks great for mobile and desktop views. One suggestion I would like to share is the logo of your navigation. It seems to be stretch vertically. One way to fix this issue is by adding align-items: center. With this, all items within the container will be centered on the y-axis. You can check this code:

  body .header .navigation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5rem 7rem 0 7rem;
  }
  

  I hope it helps :)

  Marked as helpful

  1

  ---

  

  Mainul Islam•160

  @Mainul-Islam-NirobPosted about 3 years ago

  @fidellim Thank you so much💚💚💚

  1