Submitted 9 months ago

Responsive Newsletter using HTML, CSS and JavaScript

Caleb Abuul• 100

@Caleb-Abuul

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

I found validating the form a bit challenging but sites such as w3schools, tutorialspoint, and freecodecamp came to the rescue. One thing I found particularly challenging was showing the success state when the submit button was clicked. I had to put the newsletter and success-state in one main tag and toggle display property to flex and none' or noneandblockfor the newsletter and success-state respectively using JavaScriptDOM`. Please let me know if there is a better way of doing so.

Community feedback

Tshepiso• 110

@Gandalf-hash

Posted 9 months ago

Hey Caleb, great design. I noticed some potential improvements for you while reviewing your site: what do you think about adjusting the size of your .container class and modifying the min width on the .form (I would recommend setting the .form width to 100% and a maximum width of your desired size)? Other than that, your design looks good and is accessible on different screen sizes.

Caleb Abuul• 100

@Caleb-Abuul

Posted 9 months ago

@Gandalf-hash Thank you so very much. I will work on that ASAP.

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