Skip to content
Submitted 3 months ago

Newsletter sign-up form using React, Flexbox, CSS grid

Pattaraporn Tulathum•200
@rainof
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

What are you most proud of, and what would you do differently next time?

I'm proud of getting the form submission, error management, and navigation between the success and form submission pages to work. Although it wasn’t smooth, I learned much from the lesson. Next time, I’d focus on improving my event-handling skills by gaining more experience and applying best practices from the start to make the development process smoother.

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

I faced challenges with handling events using JavaScript, which was new and initially confusing. To tackle this, I took a moment to step back, then relied on documentation, consulted ChatGPT, and used a trial-and-error approach to understand better and address the issues.

Community feedback

  • Konrad•370
    @konradbaczykPosted 3 months ago

    Because I don't know React yet I will tell you my opinion about first view on this project:

    • in my opinion on mobile view, more or less between 500-900px newsletter box is too big
    • on desktop view this box is too small, I can't read text on my monitor without enlargement window
    • remember about "cursor: pointer" on links and buttons
    Marked as helpful
    1
    Pattaraporn Tulathum•200
    @rainofPosted 3 months ago

    Hello @konradbaczyk, Thank you so much for your thoughtful feedback! I agree that the design could use some tweaking, especially with the element sizes when resizing the window. I appreciate the reminder about setting the cursor pointer too—I'll make those improvements.

    0
  • LucasNgTg•210
    @LucasNgTgPosted about 2 months ago

    Hello there!

    Congratulations on completing this challenge! The layout looks great, albeit a bit smaller than the design, and for some reason the success page appears with a white bar on the bottom. The issue seems to occur when the screen height is less than 715px on the desktop version.

    I have been learning React myself and, I must say, your components are very organized and well structured. Keep it up!

    Have a nice day!

    0

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