HTML, CSS & JS

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  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! 👍

  0

  ---

  

  Pranjal Verma•255

  @pvcodesPosted over 4 years ago

  @mattstuddert thank you, Sir. I will definitely look into that and fix all the issues that you have discovered. Once again, really appreciated your efforts.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @pvcodes you're welcome! Happy to help 🙂

  0