Responsive Contact Form Page Using CSS Grid

Solution retrospective
I am proud of the amount of work I believe to have put into this project. It was one that required me to learn about JavaScript and the use of it in HTML and CSS.
Concerning what I would do differently next time, I would be much more quick in completing the challenge, learn about how to use javascript efficiently in code.
What challenges did you encounter, and how did you overcome them?I had coding issues with the error and success messages that would be popped dynamically by JavaScript. On this, I had to learn, watch videos on YouTube on how to arrive with the solution.
What specific areas of your project would you like help with?Concerning the width and height of the project or the sizing, yeah i believe I would need extra help for precision on it.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @thisisharsh7
Great job! I'm impressed by your effort in learning JavaScript to dynamically handle form validation and success/error messages.
What to Do Differently: To improve efficiency, consider modularizing JavaScript code into reusable functions for validation. This reduces repetition and enhances maintainability. Also, aim for faster iteration by planning JavaScript logic upfront.
Help with Sizing: For precise width/height control, avoid fixed
width: 40%
on.contact-form
. Use responsive units likemax-width: 600px
withwidth: 100%
to adapt better across devices. For height, let content dictate size rather than forcingheight: 100vh
onbody
, which can cause overflow instead usemin-height:100vh
. In media queries, refine.contact-form
tomax-width: 90vw
for smaller screens to ensure better scaling. Test with tools like Chrome DevTools to fine-tune dimensions.Excellent work—keep moving forward!
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