Huddle landing page feat. 11ty, CUBE CSS, PostCSS, and Utopia

Community feedback

• 

  NixyMc•190

  @Nix7amcmPosted over 1 year ago

  Hey @joshjavier! 😊

  Thanks so much for your tips on my code for this challenge! I put them to use and checked out the link you shared. I'm working on learning more about A11y in particular at the moment, and welcome any advice for it 😃

  I then noticed you did the same challenge, so had a mosey too! It really looks great and I'm very impressed with your use of PostCSS! I'm also very interested in the use of clamp etc, so am definitely going to check out utopia.fyi! It can be very tedious so this looks like a very helpful tool!

  I have a couple of tips for you that might be helpful!

  First, the max/default font-size for the <p> is advised as 18px in the style guide. So in the clamp(), you might consider changing the max font to this (1.125rem), which will also set the paragraph as taking up three lines instead of four, and is one step towards bringing your social media link section up from the bottom:

  --step-0: clamp(1rem,calc(0.92rem + 0.42vw),1.125rem);
  

  The next step to bring this section upwards, might be to consider altering the padding-block in your footer, header, main {} to margin-block. This will cause the margins to collapse instead of adding together:

  footer, header, main {
  margin-inline: auto;
  max-width: 1280px;
  margin-block: var(--space-s-l);
  

  Then to increase the space between your <header> and <main>, you might add some padding solely to either the bottom of your header, or top of your main. You could also apply the clamp() method to this, if you wish, to make it scalable.

  I hope this helps! Great work! 👩🏻‍💻🚀😃👍🏻

  Marked as helpful

  1