Skip to content
Submitted over 1 year ago

Responsive Newsletter Form | HTML/CSS/JS

Bel Sahn•440
@BelumS
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

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
    @F4YYPosted over 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
    0
    Bel Sahn•440
    @BelumSPosted about 1 year ago

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

    0
  • inhamo•200
    @inhamoPosted over 1 year ago

    Try using media querys

    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