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 sign-up form using React, Flexbox, CSS grid

@rainof

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


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

@konradbaczyk

Posted

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

@rainof

Posted

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 190

@LucasNgTg

Posted

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
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