Skip to content
Submitted about 2 years ago

Huddle Landing Page

Paul Jinā€¢290
@paulhjin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone! šŸ˜„

I had some difficulty figuring out what to do at specific viewport sizes but ended up going with what I thought would work the best. Please provide me with some feedback with what I can do better.

šŸ‘šŸ» Thanks!

Community feedback

  • Volodymyr Ostapyshynā€¢490
    @ostapyshynPosted about 2 years ago

    Hi, Paul! šŸ‘‹ When changing the width of the page, your content goes beyond the top of the viewport. One way to fix it is to change height: 100vh in the body to min-height: 100vh

    Marked as helpful
    1
  • Vanza Setiaā€¢27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Paul! šŸ‘‹

    Congratulations on finishing this challenge! šŸ‘

    Two suggestions:

    • First, alternative text should not contain any words that are related to the word "image" such as logo and icon. The semantic meaning of the img element is already good.
    • Second, the same logic applies when giving label to link elements. Remove the word "link" from all the aria-label for the social media links.

    Assistive technologies such as screen readers will know what those elements are as long as we are using the right HTML elements. šŸ™‚

    I hope this helps! Happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord