Huddle Landing Page using CSS Grid System

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 4 years ago

  Hi, this looks great!

  You could make some small tweaks to get it closer to the design I think - like enlarging the logo and heading size/line-height - but these are pretty minor really.

  Some general best practice tips:

  • import both fonts in one link for better performance (only the weights / styles you need)
  • try not to nest css selectors. For Example main .top-section .top-section__right .top-section__btn is nested 4 levels deep, massively increasing specificity and making it difficult if you needed to override this later. Your css will be much more maintainable and scalable in bigger projects if you get into the habit of keeping specificity low now
  • make sure links with icons only in them have aria-labels
  • remember focus states. These should be obvious and visible, especially when tabbing with a keyboard (the focus visible state is handy for this)

  Hope this is all helpful advice. Best of luck

  25
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hi, Jelili Abdullahi Alagunfon! 👋

  You've done a very nice job on this challenge! 👏 Your solution looks great and responds well! 👍

  In addition to grace-snow's helpful feedback, I only suggest adding background-size: cover to the background image in the mobile layout so that it covers the entire area of the screen (even on tablet devices and such). 😉

  Keep coding (and happy coding, too)! 😁

  11