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 Signup Form (Vanilla CSS, HTML, and JS)

BoJoNVi 30

@BoJoNVi

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 really feel like the implementation of my CSS is really bad. I'm not sure if this is fine or not, but if you guys have some opinion about it feel free to share.

Community feedback

jnunez2301 170

@jnunez2301

Posted

It's very clever to use the hidden property but i wouldn't recommend abuse it when you can make an extra path to /sucess for example, try to avoid the use of the position property to center elements.

You can do it easier with grid and flexbox with also provides responsivness in the future by adding wrap or changing the template for the width of the device

Take a look at:

Learn-Flexbox

Marked as helpful

1

BoJoNVi 30

@BoJoNVi

Posted

I see, thank you for the feedback on how to transition from the form state to the success state, I think it is better since it's much easier to implement than the one I've made. Also, thanks for the insights about the flexbox in this use case @Roxc2301! :D

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