Skip to content
Submitted 11 months ago

Responsive Newsletter using HTML, CSS and JavaScript

Caleb Abuul•150
@Caleb-Abuul
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

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-hashPosted 11 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.

    0
    Caleb Abuul•150
    @Caleb-AbuulPosted 11 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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