HTML, CSS & JS

Nice work on this challenge! Here are some pointers after taking a look at your code:

• The gap between the form inputs is quite large compared to the design. You could reduce that. It doesn't matter if the UI changes slightly when the error messages show.
• You've got the text "Error Message" inside the error message elements before showing them. I would just write the error text and then toggle the display of the element if there's an error.
• You've got empty label elements that aren't doing anything. You should either delete them and add an aria-label attribute to each input. Or keep them and link them up with the necessary inputs to make the form accessible.
• For the button text, you've uppercased the content in the HTML itself. Try to avoid doing that as some screen reader software will read this content letter-by-letter which makes that content inaccessible to screen reader users. Instead, write it normally in your HTML and then use text-transform: uppercase; in your CSS to visually uppercase the text to match the design.

I hope these tips help. Keep up the great work! 👍