Responsive Contact Form with HTML, Javascript & CSS Validation

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

I'm most proud of mastering the use of CSS selectors to dynamically change the layout based on form validation states (:valid, :invalid, and :focus) and leveraging CSS Grid to create a responsive design that adapts seamlessly to different screen widths. In the future, I aim to refine my coding skills by writing more concise and efficient code, while also focusing on creating visually appealing and user-friendly layouts.

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

One of the primary challenges I faced was implementing form validation using CSS selectors (:valid, :invalid) without displaying error messages until the user submits the form. This required careful planning and execution to ensure that the design remained error-free until the form was submitted.

To overcome this challenge, I employed a strategic approach. I used JavaScript to apply CSS classes to the form elements after the user submits the form for the first time. This allowed me to leverage the CSS selectors to dynamically change the layout and display error messages only after the form has been submitted. By doing so, I was able to achieve the desired form validation functionality without displaying error messages prematurely.