Submitted 3 months ago

Newsletter Sign Up Form (HTML + CSS + Javascript)

Roselin Y• 330

@Vanillatte68

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 are you most proud of, and what would you do differently next time?

I'm happy i can get the styling as close to the design including the mobile design. I was able to make this using single page HTML. making the form validation was also pretty easy.

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

I was thinking about whether to make this as a single page or make another page for success message. but i decided to make it single page by changing the form and success message display on CSS.

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

I wonder if you can use backend like php to display the success message and how to do it.

Community feedback

Paul Olynek• 330

@ePaulo

Posted 3 months ago

Looks very good. Both desktop and mobile designs are very similar to the designs provided... well done.

Only one suggestion: you could have set the newletter image in your mobile-first CSS styling (instead of in your HTML) then reset the link to the desktop image in the media query for the desktop styling updates.

This is my CSS code for the newsletter image in my mobile styling: img.main-image { content: url('./assets/images/illustration-sign-up-mobile.svg'); width: 375px; height: 284px; object-fit: cover; }

Marked as helpful

Roselin Y• 330

@Vanillatte68

Posted 3 months ago

@ePaulo

Thanks for the suggestion, I'll try it the next time I do another challenge

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