Submitted 6 months ago

Newsletter signup page with success message

Sarim Hasan• 50

@sarimhasan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Form validation:

This was the first time I learned form validation. I knew how to do it in react by using the react-hook-form library but wanted to learn to do it in pure js. But quite frankly I could not do it.

Mobile First approach:

In an article I learned the importance of mobile first approach and how helpful it can be

Responsive website should not be the last thing you do but instead you should start from the mobile version

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

I would really love to get help on the form validation that I could not learn by following this tutorial because I did not had the time

If anyone would like to help, please fork the repo and make a pull request or hit me on my email: [email protected]

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 6 months ago

Hello, @sarimhasan!

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

If you're using Tailwind, you can achieve the same with:

<body class="min-h-screen flex justify-center items-center">

I hope you find this helpful!

Keep up the excellent work!

Marked as helpful

Sarim Hasan• 50

@sarimhasan

Posted 6 months ago

@danielmrz-dev Thank you so much, will apply those changes as soon as I get time

Please log in to post a comment

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