Intro Component With Sign Up Form | HTML, CSS Flexbox, JS

Hey, awesome job as well on this one. Layout in desktop looks fine, and the mobile layout as well. Though on the mobile layout, you could have adjust the max-width of the .container selector, to be a bit of wider, so that when transitioning to mobile layout, the element is not thin. Also have some padding to the sides of the body tag.

Some other suggestions would be:

• Add some label for the input element, you need this because using only placeholder won't be much of help, especially when the text are translated into another language, the placeholder will stay as it is. That is why you need a label to which will have an sr-only class, so that it will only be visible to screen-reader. It would look like:

<label for={id of the input} class="sr-only" > First Name </label>

Then same goes for other input element. The sr-only class will have this tylings:

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Copy that styling, you will use that a lot.

• On the javascript, you don't need js to change the stylings of the element. For example, you are adding the error-icon class right, you could had just use that selector to change the styling of the element, instead of manually using js to change those. Let css handle the css, for js, just apply the class.
• Also, when the input is wrong, you should add an aria-invalid="true" on them, letting the user know that the input is wrong. Along with aria-describedBy attribute, to which the value will be the id of the error-message that has been show. This way, they will know what kind of error they made. I have this simple simple snippet for those , take a look at the html and javascript. You will see how aria-invalid should be applied and the aria-describedBy.
• Your button should type="submit", always be explicit to what your control element should be. Because if you just leave it as it is, for example, inside the form element, you have a close button which will exit the form, if you don't specify the type of that button, it will default to submit and hence will submit the form, even if you click the close button, in those case, use type="button".

Aside from those, great work on this one. I like that shake animation , that's a first I guess for me to see, looks cool.

Awesome work Syazwan! I really like error messages. Do you have any advice where I can learn JS from scratch?