Hello
Some of the text is too small for me to read on this 😔
Looks like the form works OK but needs labels adding to inputs.
Good luck
To make your form accessible, as well as the labels, you need to
- link the error message elements to their inputs. Aria-desciribedby on the input with its value as the id of its error message
- when error message is shown it needs aria-live="polite" so that the error is announced to screenreader users.
As you're learning react, it might be worth trying to extend this challenge a little further to test what techniques you would use for validation on more criteria. Just an idea ☺
Looking at the css, it looks OK. Just be very careful using viewport units for margin-top. That could create really unpredictable results.
In general I recommend
- using rem for most units, mainly anywhere you have pixels at the moment or for margins
- using em sometimes for padding on things like buttons so the button will scale with the text inside it.
- using single class selectors as much as possible in css to keep specificity as low as possible.
Why are you using !importants in your css? That shouldn't be necessary, and if you find that's the only way to make it work it means there is a problem in your css elsewhere (probably too high specificity somewhere)
I hope these tips are helpful
