Skip to content
Submitted over 2 years ago

huddle landing page with alternating feature blocks master

Faith•420
@fnwork
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any comments or suggestions will be appreciated

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Faith! 👋

    Here are some suggestions for improvements.

    • Download and use the necessary icons instead of importing the whole Font Awesome library. This can improve the loading speed of your website.
    • Make sure the alternative text includes the image's text for images containing text. In this case, the Huddle logo should have an alt value of “Huddle”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
    • Remove all <br> elements. Screen readers may read out <br> elements as "break" and not read the content within <br>s. Let lines wrap where they need to. Learn more about accessibility issues that can happen when using <br> — <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns
    • Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
    • For your information, decorative images do not add any information and serve only aesthetic purposes.
    • Alternative text should not be hyphenated like class names or code. It should be human-readable.
    • Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.
    • Use aria-label to label each of the social media link in the <footer>.
    • Always use unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN
    • Use clamp() for fluid padding and margin instead of just percentage numbers. clamp() allows you to set a maximum and minimum value. This can prevent an element from having very small spacing or very large spacing. Recommended tool: Fluid Responsive Design | Utopia
    • Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
    • Remove max-width from the <body>. It should always fill the entire page. Treat it as the main element of the web page.
    • Remove width: 100% from the <body> styling. It is already the default styling.

    I hope this helps. Have a great coding day! 😄

    Marked as helpful

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