Huddle Landing Page Using HTML CSS Only

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great job on this one. The layout is good in desktop, resizing though creates this sort of empty feeling on the site, since there is this large huge white-space and the content is pushed on to the left side.

  Suggestions:

  1. Do not remove the outline on the buttons or in any other interactive elements. Those outlines helps user to navigate and know where they are. It is more on accessibility right, so we need that. If you were to remove it, make sure to add a :focus state on the elements. Adding like box-shadow would be cool.

  2. Your footer links should be wrapper inside a tags. Since they are supposed to be links right, they need to be nested in a tag. Also those social media icons should be. We need to keep our markup semantic and function well if this were a real website okay.

  3. Scrollbar. If I resize, I get this scrollbar at the bottom which we always avoid. To avoid this, you need to make sure that every container have a scalable width and do not add a fixed width on them. If you were to add them, make sure that they have breakpoints so that they could scale, if the viewport is near to cutting them off.

  4. Reaching the breakpoint, like what I said above, there is this huge white space that creates some sort of empty feeling. I see that you added a lot of fixed widths on the content. It will be awesome if you take the full width of the viewport. Aligning the content in center because that is normally what we see if we open websites in mobile right. Adjusting, tweaking those will be really awesome.

  5. Multiple usage of h1's. Though for us there is not much of trouble to use multiple h1's, but for some, users who uses screen readers as it can reduce the usability of pages for them. So please stick to one h1 per page okay.

  But still, good work on this one^

  0

  ---

  

  Nadya Mumtazah•245

  @NadyaMumtazahPosted over 3 years ago

  @pikamart such a new insights for me! Thank you very much! :)

  0

  

  Nadya Mumtazah•245

  @NadyaMumtazahPosted over 3 years ago

  @pikamart sorry, in the point 3, what should i use instead of using fixed width?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @NadyaMumtazah Hey, well first just to make thing more easy to use. Add declaration in your css

  html {
      box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
      box-sizing: inherit
  }
  

  Then using width: 100% on different containers. But as I am testing it, it is hard to do it, because you used float properties on the images.

  Okay so do this. I will just list them okay.

  • In your body add some paddings in the left and right.
  • In your .main selector. Add width: 100%
  • In your .boxes selector. Add width: 100% as well.
  • In your .card selector. Remove the absolute and change the margin to margin: 0 auto. To center it.
  • In your .footer-content add width: 100% as well.
  • Add overflow: hidden in your .header selector

  Doing all of these will make it more manageable, though you need to adjust some paddings on them. This is just quick fix, but refactoring the structure will be really good for you.

  0

  

  Nadya Mumtazah•245

  @NadyaMumtazahPosted over 3 years ago

  @pikamart okay i got it, that's very helpful! im gonna try it soon. Thank you! :)

  0