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 newsletter form

P
Christian 390

@UtopicUnicorn995

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would really appreciate feedbacks on the following:

  • Code readability
  • Usage of Semantic HTML
  • CSS cleanliness and responsiveness

Your feedback will be highly appreciated. Thank you.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Don't use two <main> as there is only one top-level heading I can see. Always follow the semantics.

➨ For future use if by chance you have to use multiple main use like this:

<main aria-labelledby="title1">

<h1 id="title1">title for main content area 1<h1>

.... main content area 1 ....

</main>

....

<main aria-labelledby="title2">

<h1 id="title2">title for main content area 2<h1>

.... main content area 2 ....

</main>

I hope you find this helpful.

Happy coding😄

Marked as helpful

0

P
Christian 390

@UtopicUnicorn995

Posted

@NehalSahu8055 Would it be better to use two articles instead of two mains or should I just replace one of them?

Thank you.

1
_nehal💎 6,710

@NehalSahu8055

Posted

@UtopicUnicorn995

Except <header> and <footer> all content goes in <main> as a rule of semantics.

like this :

<header>
-------top content like heading , nav , banner------
</header>
<main>
--------main content------
</main>
<footer>
--------bottom content like copyright ------
</footer>
0
_nehal💎 6,710

@NehalSahu8055

Posted

@UtopicUnicorn995 Your <article> goes in <main> replace 2nd main and replaced one inside <main>

Marked as helpful

0

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