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 Contact From using Semantic HTML and CSS flexbox

@mujawarmsahil

Desktop design screenshot for the Contact form 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?

What I'm Most Proud Of: I'm most proud of the overall structure and organization of the code. The HTML, CSS, and JavaScript files are well-organized, and the code is easy to follow. The use of classes and IDs in the HTML and CSS makes it easy to target specific elements and apply styles. The JavaScript code is also well-structured, with clear and concise functions for handling form validation and submission.

What I Would Do Differently Next Time: If I were to redo this project, I would focus on improving the email validation function. The current implementation only checks for the presence of an "@" symbol and a ".". A more robust email validation regular expression would be more effective in ensuring accurate validation.

Additionally, I would consider using a more modular approach to the JavaScript code. Instead of having a single large function for handling form submission, I would break it down into smaller functions, each responsible for a specific task, such as validating individual form fields or handling the form submission.

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

One of the challenges I encountered was ensuring that the form was responsive and worked well on different screen sizes. To overcome this, I used media queries in the CSS to apply different styles based on the screen size.

Another challenge was implementing the form validation logic. To overcome this, I broke down the validation into smaller tasks, such as checking for empty fields, validating email addresses, and ensuring that the user had consented to being contacted.

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

I would appreciate help with the following areas:

Improving the email validation function to use a more robust regular expression. Refactoring the JavaScript code to use a more modular approach. Optimizing the CSS for better performance and responsiveness.

Community feedback

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