Submitted about 1 year ago

Responsive Newsletter Form | HTML/CSS/JS

Bel Sahn• 440

@BelumS

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

Hello everyone,

This is my first challenge in quite a while, so it took a lot longer to get the smaller details correct.

I found it difficult to switch the background-color to the dark-slate-grey when the screen changes.

The Form Page needed the white background to stick around until a much later viewport size, whilst the Success Page changed its background-color at an earlier viewport size.

I think I did well with the form styling, form validation, and the responsiveness. I realized that the responsive design is not restricted to what we're given, and can be based on the content.

I also had wanted to nest my CSS, but it's not as widely supported.

Community feedback

Riki Wendri• 1,380

@F4YY

Posted about 1 year ago

Hi @BelumS,

Congratulation for successfully completing the challenge...

There's little suggestion about what you've missed to the given design. Which is when user submits their email address through the form and clicked subscribe button, then the Thank You component will be rendered, displaying the thank you message along with the user's email address that has been inputted instead of just static text [email protected].

To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.

Hope that could be Helpful. Above all you did very good. Keep happy coding...

Marked as helpful

Bel Sahn• 440

@BelumS

Posted about 1 year ago

@F4YY Thanks for the comment, I updated the challenge.

inhamo• 200

@inhamo

Posted about 1 year ago

Try using media querys

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