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 page using CSS Flex, Grid

Eren 210

@for-dev9

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

Community feedback

@VCarames

Posted

Hey there!👋 Here are some suggestions to help improve your code:

  • Do not forgot to check your FEM report, to see what is incorrect and update your code with it. Before moving on to the next challenge.
  • Since there is only a "logo" and single "button" and no "navigation menu" at the top of your site, there is no need for a nav element. Instead you will wrap them in a header element and it should be outside the main element.
  • The alt tag description in the logo needs to be improved upon. The description should state the company’s name.
  • The “illustrations” serve no other purpose than to** be decorative**; They add no value. Their alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • The only h1 heading is this site, is the “Build The Community your Fans Will Love”. Every other heading would be an h2.
  • The footers should start from here div class="feature-with100p bgCyan">` and wrap everything from there on.
  • The company info inside the footer needs to be wrapped inside an address element. While each individual information needs to wrapped in an anchor element.

More Info:📚

MDN Address Element

  • Your email input and button needs to be wrapped inside a form and have a visibly hidden label attached to it for improved accessibility.

More Info:📚

MDN Email Input

  • It is best practice to have separate files for you HTML and JS code. It helps keep things organized and make it easier to maintain.

If you have any questions or need further clarification, let me know.

Happy Coding!🎄🎁

Marked as helpful

0

Eren 210

@for-dev9

Posted

@vcarames Thank you for taking the time to check and provide information.

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