Responsive Mobile First Huddle Landing Page with CSS Flexbox and Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Akanksha Yadav!

  For a better CSS code, I recommend to use BEM class naming convention. It will help you to apply DRY principle better.

  I have some feedback on this solution:

  • For a better code formatting, I recommend to use Prettier.
  • For any decorative images, you should leave the alt="" and add aria-hidden="true" to make sure all screen readers ignore those images. In this case all images are decorative images, except the logo.
  • The alt value for the logo should only the name of the company, which is Huddle. You don't need to put a word logo to it.
  • Try it free, Get Started For Free buttons should be links, since in my opinion, if it's a real website, it will navigate the user to another page.
  • For the accessibility issues, "Links must have discernible text", you can add a hidden text inside the anchor tag. Search for the sr-only(screen reader only) styling.

  <a href="#">
    <span class="sr-only">Facebook</span>
    <i class="fab fa-facebook-f"></i>
  </a>
  

  • For the email and phone number links, you can use mailto and tel.
  • Use rem or sometimes em instead of px. Using px will not allow the users to set the page size based on their needs.
  • --small-p-size:15.00px;, you don't need to specify the .00 if it's just 0 number. Don't be verbose.
  • You don't need to do this too.

  head{
      display: none;
  }
  

  • I don't recommend to make all elements display: flex, since it forces you to override the styling if you want to make it, for instance grid, or just block element.
  • * universal selector is commonly used for base styling like this.

  *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  

  • For the font-family you can put that in the body.
  • For img, I would recommend to do this as a base styling.

  img {
    display: block;
    height: auto;
    max-width: 100%;
  }
  

  • In this case, you should use rem unit for the padding. Using % will cause a lot of issue on small screen and big screen, since % not consistent.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  Akanksha Yadav•355

  @Akku22janPosted about 3 years ago

  @vanzasetia Hi vanza. Thank you so much for your feedback. There were so many new things that I have learnt from your comment.

  1. *{display:flex}

  This was an experiment to see if it would decrease the development time and make the code more DRY. But I will start avoiding this from now on.

  2. head{display:none}

  This was a by product of the 1. code.

  Thank you so much for feedback. Means a lot. 😊

  0