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

Responsive newsletter sign up with success message main with flexbox

@Juan122113

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 in the fact this was my first formulary made it in a formal web page, and it was not easy.

I will do different the URL of the images, adding the root folder manually, if not, the images not load.

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

The JS was difficult. I spend time figure out how to fix it.

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

Any comments are welcome.

Community feedback

P
Matt Cope 340

@MatthewPCope

Posted

Overall it looks great, lots of good stuff going on. One thing.. I used to do the changing of images just like you did in the css but then someone on frontend mentor told me about using the <picture> tag in the html instead. So for my solution I did this: <picture> <source media="(min-width: 48em)" srcset="assets/images/illustration-sign-up-desktop.svg"> <img src="assets/images/illustration-sign-up-mobile.svg" alt="main newsletter image" class=""> </picture> Your way still works, just thought I'd throw that out there. Great job!

Marked as helpful

1

@Juan122113

Posted

@MatthewPCope thanks for the kind words and for the advice. Do you know what of the ways is the most efficient?

0
P
Matt Cope 340

@MatthewPCope

Posted

@Juan122113 For most scenarios where an image is content-based and needs to adapt to different devices, the <picture> tag is more efficient. For background or decorative images that are part of the design, using a <div> with a background image in CSS might be simpler and more appropriate. Hope that helps!

Marked as helpful

1

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