Responsive Newsletter Sign-up Form with Email Validation

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

I'm proud of figuring out how to properly validate an email input using HTML forms, CSS pseudo-classes (:invalid, :focus), and JavaScript regex. Initially, I struggled with displaying the error message and highlighting the input field, but after reworking my approach, I successfully implemented a clean validation system.

I want to further improve my JavaScript skills, especially in handling form validation logic and optimizing event listeners. Next time, I’d focus on writing cleaner, more efficient JavaScript while exploring different validation techniques.

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

The biggest challenge was figuring out how to validate the email input correctly using HTML, CSS, and JavaScript. Initially, I struggled to display the error message and highlight the input field when the email was invalid.

How I Overcame It:

• I learned that the <form> element is required for built-in validation to work properly.
• I integrated CSS pseudo-classes (:invalid, :focus, :not) to style errors dynamically.
• I restructured my JavaScript to use regex for validation, .add() and .remove() for class toggling, and checkValidity() for cleaner validation logic.

After redoing my entire HTML, CSS, and JavaScript, I was able to create a fully functional validation system that works smoothly across different screen sizes.

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

I used :invalid, :focus, and :not to handle input validation styling. Are there more efficient or scalable ways to manage form error styling in CSS?