Community Feedback

• 3

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

  

  grace-snow5,545Posted a week ago

  Reply

  • 0

    @grace-snow thanks for the feedback.

    

    frankiefab10020Posted a week ago

    Reply
  • 0

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

    

    yustinayasin50Posted 4 days ago

    Reply
  • 1

    @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

    

    grace-snow5,545Posted 4 days ago

    Reply
  • 0

    @grace-snow thanks for the explanation

    

    yustinayasin50Posted 3 days ago

    Reply

  Add a comment
• 1

  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!

  

  yustinayasin50Posted 4 days ago

  Reply

  • 0

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

    

    frankiefab10020Posted 4 days ago

    Reply

  Add a comment

Give some feedback to frankiefab100 about their solution