Intro component with sign up form

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi I'd recommend that you go back and spend a little more time on this to get it as close to the design as possible. Particularly:

  • adding the background image
  • vertically centering content on desktop (min height 100vh and some grid rows should help, or outer wrapper like body could be a flex item)
  • reducing space at the top a little on mobile
  • reducing heading line height
  • getting font sizes closer on desktop
  • giving form consistent padding
  • making it accessible (labels can't be blank)
  • reducing padding in the try it free block
  • not using large pixel values on things like margin - use other methods for positioning if possible.

  I know it sounds like a long list, but most are just small attention to detail things. If you nail the small stuff now your later work will really shine.

  Good luck with it! ☺

  3

  ---

  

  Franklin Ohaegbulam•30

  @frankiefab100Posted almost 4 years ago

  @grace-snow thanks for the feedback.

  0

  

  Yustina Yasin•310

  @yustinayasinPosted almost 4 years ago

  @grace-snow why the label can't be blank? which part of the code represents that?

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @yustinayasin you have things like <label for="firstname"></label>. If you include a label element like that it needs to have text inside. This allows search engines and assistive technology to know what the input is for.

  If the design has no visual label either you need to include the label element with text but make it visually hidden with a class like <label for="firstname" class="sr-only" >First name</label> (look up what that class does to accessibility hide elements) OR You don't include the label elements, but you include aria-label attribute on the input itself.

  Every input needs a label so assistive tech users know what they are expected to enter. With your current code they have no way of knowing

  1

  

  Yustina Yasin•310

  @yustinayasinPosted almost 4 years ago

  @grace-snow thanks for the explanation

  0
• 

  Yustina Yasin•310

  @yustinayasinPosted almost 4 years ago

  I like the part when you are accessing parent element so you can add error class all at once. I haven't thought of it. It looks like you haven't add email validation. You can use regular expression. Good luck!

  1

  ---

  

  Franklin Ohaegbulam•30

  @frankiefab100Posted almost 4 years ago

  @yustinayasin thanks for the review. I initially used Regex for email validation but the code didn't work, I had to forgo them.

  0