Ping Coming Soon - JS email validation

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 9 months ago

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

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

  ---

  LABELS 🔖:

  • input elements wants a label associated with it

  ---

  • A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute

  ---

  • Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users

  ---

  • Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields.

  ---

  • Example:

  <label class="large-label" for="your-name">
    Your name
    <input id="your-name" name="your-name" type="text" />
  </label>
  

  ---

  .

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Cyrilebl•440

  @CyrileblPosted 9 months ago

  Thanks @0xabdulkhalid I will correct that

  0
• 

  Bishal Singh Deo🎮•1,440

  @Bishalsnghd07Posted 9 months ago

  Hi @Cyrilebl👋

  Congrats for completing this challenge🎉 and great work👏

  1)A few suggestions from my side, your CSS is structurally not set. Never ever use height in body of your web page, it will only prevent your layout to be full size of the screen. It is negligible in this challenge, but when you work in larger project ahead, this issue will create disaster result.

  2)text-align property will align your specific text and you have been used directly in your body, this is not a good practice, for good practice and better approach, I would recommend to use text-align in child component. Also, you can test your webpage by inspecting your web page and then you will see lighthouse option, just clicking on that test the performance of your web page by your own to enhance your skills in frontend development. Also, Lighthouse testing will test your overall result like, Accessibility test, best practices test, performance of your web page and SEO, it simplify our work as a developer.

  Hope, this suggestion will help you!

  Happy coding❤️

  Marked as helpful

  0

  ---

  

  Cyrilebl•440

  @CyrileblPosted 9 months ago

  Thanks @Bishalsnghd07 for your comment !

  1. To center the content of my page do you think is better using position: absolute; ? or I can use flexbox and min-height: 100vh;
  2. I understand I'm making adjustments

  0

  

  Bishal Singh Deo🎮•1,440

  @Bishalsnghd07Posted 9 months ago

  @Cyrilebl

  • I recommend to use combination of flexbox and min-height: 100vh with align-items:center and justify-content: center in body of your web page to center the content of your web page effectively.

  • Absolute will be used only in fixed positioning and it will be suited and work terrifically with relative as a child. For flexible layout or dynamic layout, always be flexbox is recommendable.

  Hope so you get your answer. If have any querry then fill free to ask😊

  0

  

  Cyrilebl•440

  @CyrileblPosted 9 months ago

  Thanks @Bishalsnghd07 I understand, all has been fixed and Lighthouse values are good.

  I'm still working on another challenge stay tuned 😊

  1