Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive - Huddle landing page with curved sections

Malloryβ€’ 90

@mallory-cvlh

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello πŸ‘‹

This is my first junior challenge and I tried to use a good HTML semantic and to comment my CSS file.

Any feedback and advice are welcome 🀝

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

  • You should use the aria-label attribute to describe the links if they don't have visible text, this will help screen reader users to understand the purpose of the link.

e.g. <a href="#footer" class="facebook fa-brands fa-square-facebook" aria-label="Facebook"></a>

  • For the company logo you should only use the company name as the alt attribute value. The word "logo" is not necessary, The screen reader users will hear "Graphic, Company name" and they will understand that the image is a logo.
  • Use a hidden label for the form. The sr-only label element is used to provide a label for an input element that is only visible to screen readers. This allows the input element to be properly labeled and described for users who are using assistive technologies such as screen readers. This helps ensure that all users, regardless of their abilities, can understand and use the form.

    The class "sr-only" hides content visually and here are the styles to copy.

     <form>
        <label for="email" class="sr-only">Name:</label>
        <input type="email" id="email" name="email">
    </form>
    

I hope you find it useful! πŸ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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