Skip to content
Submitted about 1 year ago

Newsletter sing-up form

Alex•3,130
@Alex-Archer-I
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

As always I'm proud to complete the challenge =)

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

Well, I tried to find a solution for hover effect of the buttons cos apparently one can't apply gradient to box-shadow. I had to use pseudo-eleme before with filter: blur.

What specific areas of your project would you like help with?

Any suggestions welcomed and accepted =) Especially advice about code organization and forms accessibility.

Code

Please log in to post a comment

Log in

Community feedback

  • Tharun Raj•1,330
    @Code-Beaker

    Hi there, congratulations on completing this challenge. You've done a great work! 🎉

    I would like to share some of my suggestions regarding your solution that might help you improve it.

    • Use the HTML srcset attribute to make the image responsive. This is better as the image does the image resizing by itself and not CSS is needed.
    <picture>
<source media="(min-width: 50rem)" srcset="./assets/images/illustration-sign-up-desktop.svg" />
<img src="./assets/images/illustration-sign-up-mobile.svg"/>
</picture>

    How it works. This tag makes use of images with two different dimensions for the specified screen sizes. This will make the website's responsiveness and performance better.

    • The scale effect of the input field on click is a little distracting and inappropriate. Instead, use an outline effect. That is more common for these inputs.

    Hope this is helpful to you 😃

    Marked as helpful

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