Responsive landing page using bootstrap classes

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

I'm most proud of implementing the complete newsletter subscription flow using JavaScript. I built client-side email validation with regular expressions, displayed meaningful validation messages, and created a smooth transition between the sign-up form and the success message. I'm also happy with making the layout responsive so it works well across mobile and desktop devices.

What would you do differently next time?

Next time, I would focus on writing cleaner and more modular JavaScript by organizing the code into reusable functions instead of keeping all the logic in one place. I would also improve accessibility by adding better ARIA attributes and keyboard navigation support. Additionally, I would like to use CSS variables more effectively and reduce inline style manipulation by toggling CSS classes instead.

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

One of the main challenges was implementing client-side email validation and displaying clear error messages while maintaining a good user experience. I overcame this by using JavaScript with a regular expression (Regex) to validate email addresses and updating the UI dynamically based on the validation result.

Another challenge was switching between the sign-up form and the success message without reloading the page. I solved this by using JavaScript to toggle Bootstrap's d-none class, allowing me to show and hide different sections of the page smoothly.

I also faced challenges in making the layout responsive across different screen sizes. I addressed this by using Bootstrap's grid system, Flexbox, media queries, and the <picture> element to display appropriate images for mobile and desktop devices.

Throughout the project, I debugged issues using the browser's developer tools and sought guidance from documentation and AI-assisted explanations to better understand the concepts and implement effective solutions.

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

I would appreciate feedback on the overall code quality, particularly my HTML structure, CSS organization, and JavaScript implementation. I'm also interested in suggestions for improving accessibility, responsiveness, and performance. Additionally, I'd like to know if there are better practices for handling form validation, DOM manipulation, and organizing JavaScript code to make it more maintainable and scalable.