Newsletter sign-up with success message built with HTML/CSS/JavaScript
Design comparison
Solution retrospective
I am happy with the solution. Had to do a few workarounds - but overall it was a fun challenge.
What challenges did you encounter, and how did you overcome them?I had a strange issue where I could not hide my main wrapper with JS. I had to hide the img and form wrapper separately. Also, in order to handle validation of email inputs purely through my custom JavaScript logic, I had to remove required and type="email attributes from my input element. These attributes triggered the browser's automated validation messages.
What specific areas of your project would you like help with?ANY and all help very much appreciated!
Community feedback
- @johnnygerardPosted 4 months ago
Hello Christina,
To improve the picture element, use this code:
<picture> <!-- Desktop hero image --> <source media="(min-width:768px)" srcset="assets/images/illustration-sign-up-desktop.svg" /> <!-- Mobile hero image --> <img src="assets/images/illustration-sign-up-mobile.svg" class="hero-img" id="hero-img" alt="Orange/red color hero image with tech images" /> </picture>
The fallback is already ensured by the nested
img
tag and does not need any extra steps.Marked as helpful0@codercreativePosted 4 months agoHi Johnny, Ah yes, that makes total sense. Thank you for pointing that out to me! Best, Christina
1
Please log in to post a comment
Log in with GitHubJoin 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