Signup-login-form

Community feedback

• 

  P

  Jacksen•350

  @jacksen30Posted over 1 year ago

  Hi @saketbyte,

  I'll start by saying great effort, it looks very similar to the design and it is a tricky project when starting out. I've just completed it myself and learnt a lot by completing it.

  I've got a few suggestions regarding best practices ect.

  1. You should check your HTML for correct indentation, especially line 25 -29

  2. All input fields should have an accompanying <label> (for accessibility) for example

  <label for="firstname" class="sr-only">First Name</label>
  <input type="text" name="fname" id="firstname" placeholder="First Name" value="">
  

  The <label for=""> attribute should be equal to the id="" of the <input> it is related to.

  note the sr-only class on the label - see the css you can use below. This allows you to visually hide the label text for the form but It will still be read by screen reader technology for the visually impaired

  .sr-only {
      position:absolute;
      left:-10000px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
      }
  

  3. You need to have a closer look at your Javascript as after the form has been submitted with inputs that did not pass the validation the error text such as "First name is required is not removed once a correct First name is entered and submitted

  4. Consider Implementing a css reset to ensure that different browsers will render your code in the same way.

  This can be done in a reset.css file and used with every website you build.

  You can read more about this at Andy Bells CSS Reset

  Please mark my answer as helpful if it has helped you in any way

  Keep up the great work ! I look forward to seeing more solution submission from you in the future.

  Marked as helpful

  1

  ---

  

  Samriddh Singh•100

  @saketbytePosted over 1 year ago

  @jacksen30 Thank you so much for such detailed feedback. I am extremely grateful to you. I will look into the possible improvements you mentioned. ✨ Thank you once againnnnn! 😇

  1

  

  Samriddh Singh•100

  @saketbytePosted over 1 year ago

  @jacksen30 hi I worked on the things you said and improved it. Thanks a lot for the suggestions!!

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  COMPONENT MEASUREMENTS 📐:

  • The width: 1200px property for .container element is not necessary. because .container is a block level element which will take the full width of the page by default.

  ---

  • So feel free to remove width: 1200px style rule from .container element

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0

  ---

  

  Samriddh Singh•100

  @saketbytePosted over 1 year ago

  Thank you for the feedback! @0xAbdulKhalid

  0