Skip to content
Submitted about 1 month ago

Newsletter sign-up solution - HTML, SCSS, vanilla JS, RWD

webdevbynight•410
@webdevbynight
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used the :has() selector to select, within the form, the paragraph which does not have one single child.

What challenges did you encounter, and how did you overcome them?

To display the label, the error message and the field, I first used flexbox; but, when submitting the form with invalid input, the alignment between the label and the error message was buggy on Safari. To fix this problem, I used a grid.

What specific areas of your project would you like help with?

Do not hesitate over giving feedback about accessibility if there are improvements in my code to make form validation fails correctly rendered by screen readers.

Community feedback

  • clickglue•460
    @clickgluePosted 30 days ago

    Hi, goodnight. Fine solution, looks good. Something a bit off when you start typing an email address: it turns red immediatly, but maybe that is on purpose? Thank you for the link to the article on form validation, very interesting. I do have the feeling you maybe 'overorganize' a bit. There are many SCSS files for example. Are they really nescessary? It might become difficult to identify issues. Or maybe it is boilerplate, I don't know. But the end-result is very good, and that's what counts!

    0

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