multi-step-form-main using html css js

Community feedback

• 

  Krushna Sinnarkar•1,080

  @krushnasinnarkar

  Posted 11 months ago

  Hi @AhmedAli1812,

  Congratulations on successfully completing the challenge!

  I have suggestions regarding your code that I believe will be of great interest to you.

  1. Centering the Form: Your form is not centered. You can achieve this by adding justify-content: center; height: 100vh; to the .Container class and removing the margin from the .main class:

     .Container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
     }
     
     .main {
         /* Remove margin */
         margin: 0;
     }
     

  2. Responsiveness: Your website is not responsive for different screen sizes. You can use media queries to redefine CSS properties for different screen sizes. For example:

     @media (max-width: 768px) {
          /* Css for width less than 768px */
     }
     
     @media (max-width: 480px) {
         /* Css for width less than 480px */
     }
     

  3. Form Validation: Even if the form is not filled and the "Next Step" button is pressed, it shows an error but still proceeds to the next step. You need to write some JavaScript to ensure that if there is an error, the form does not proceed to the next step. Here’s a simple example:

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  10