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

Newsletter sign-up form with success message solution

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


Today I do the FRONTEND MENTOR CHALLENGE of creating a Newsletter Sign-up Form with a stylish success message. Learn how to structure the HTML markup, style the form elements with CSS for a RESPONSIVE DESIGN and implement simple EMAIL VALIDATION with JavaScript functionality to display a success message upon successful submission.

I first start with the HTML FORM DESIGN, then I move on the CSS Design, and finally finish with JAVASCRIPT at the end. At the end I show the finished project, showing the FORM VALIDATION and any possible

Community feedback

@ManudeQuevedo

Posted

Very impressive! It works perfectly.

Some points I think it would make your project even better:

  • Try adding a transition to your buttons, so when you hover the background change looks smooth, this will make it more elegant.
  • Responsiveness needs some work, when you make the page smaller, there's a point where the content breaks a little bit on the bottom, and the content on the left takes more height than the image itself.
  • In your HTML avoid using divs, as this is not good for accessibility, and as a Developer I strongly suggest you always have this in mind, because when you develop a website or web app, you have to have in mind all types of users, try to user semantic HTML, and use <div> as your last resource.

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