Sign-Up Form Component Using HTML, CSS and Vanilla JS

Good work!

I believe the form changes size when someone deletes any value from the input fields because of the error message that shows up - it's positioning is messing with the document flow and shifting things around.

Instead of positioning the error messages relative to the inputs, you could wrap both the input and associated error span in a div:

<div class="input-wrapper">
    <input class="form-input" type="text" name="first" placeholder="First Name" required>
        <span class="error"></span>
</div>

Then they are semantically associated with one another and they will be stacked on top of one another without any extra CSS, the CSS for the error class would be something like:

.class {
    width: 100%;
    padding: 0;
    font-size: 80%;
    color: #f00;
    display: inline-block;
    text-align: left;
}

Hope that makes sense!

You should add padding to main section so that interactivity don't effect the outer area. Don't let it grow on its own add some margin and padding to outer the main section. 😀

Stop user to add bunch of blanck spaces to verify that name field and include 6 or 8 characters for password validity. 🙂

Good Work! Keep coding!! 💝