Submitted 2 months ago

Newsletter sign up with success message

Carlos Santana•260

@cacesasa

Preview site View code

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 happy that I was able to complete the challenge with some good results. Next time I will try to use a styling extension like sass.

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

How to implement form validation was a challenge to me but I was able to do it by trial and error.

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

Any feedback is always welcome. Thanks.

Community feedback

جهاد أحمد•280

@Gehad28Posted 2 months ago

Nice work!

One thing that I have learnt from another member here: To change the image according to the screen size, use <picture> tag instead of an empty div with background-img. You can use it as following:

<picture>
    <source media="(max-width: 380px)" srcset="assets/images/illustration-sign-up-mobile.svg">
    <img src="assets/images/illustration-sign-up-desktop.svg" alt="...">
</picture>

In the source tag we put the image for a certian screen size, and in the img tag we put the default image.

Keep going ☘️

Marked as helpful

Carlos Santana•260

@cacesasaPosted 2 months ago

@Gehad28 awesome, that's good to know. Thank you for the feedback and for taking the time to look at my code.

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