Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sign-up Page With CSS Animations And CSS-Only Form Validation

P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (7)
error

This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

<input required="" type="text" name="first-name" id="first-name" placeholder="First Name" class="form__first-name">
error

This form field should be labelled in some way. Use the label element (either with a `for` attribute or wrapped around the form field), or `title`, `aria-label` or `aria-labelledby` attributes as appropriate.

<input required="" type="text" name="first-name" id="first-name" placeholder="First Name" class="form__first-name">
error

This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

<input required="" type="text" name="last-name" id="last-name" placeholder="Last Name" class="form__last-name">
error

This form field should be labelled in some way. Use the label element (either with a `for` attribute or wrapped around the form field), or `title`, `aria-label` or `aria-labelledby` attributes as appropriate.

<input required="" type="text" name="last-name" id="last-name" placeholder="Last Name" class="form__last-name">
error

This emailinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

<input required="" type="email" name="email" id="email" placeholder="Email Address" class="form__email">
error

This passwordinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

<input required="" type="password" name="password" id="password" placeholder="Password" class="form__password">
error

This form field should be labelled in some way. Use the label element (either with a `for` attribute or wrapped around the form field), or `title`, `aria-label` or `aria-labelledby` attributes as appropriate.

<input required="" type="password" name="password" id="password" placeholder="Password" class="form__password">

ApplePieGiraffe’s questions for the community

Hey, everybody! 👋

This was a fun challenge which I actually quite enjoyed! 😀

I was able to match the desktop and mobile designs rather closely and only had to use one media query to make the page responsive (and managed to keep my code from turning into a mess), so I was quite happy with that! 😄

I decided to go with CSS-only form validation again, and this time, I let the browser handle the actual error messages and just focused on the validation icons (I added an extra green checkmark to make things look nice).

And, of course, I added some CSS animations from Animate.css to finish things off! 😉

Once again, feedback on both my design and code is welcome and appreciated! 😊

Happy coding! 😁

Community feedback

Dusviry 350

@dusvimarin

Posted

I like this effects!!!

2


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@dusvimarin

Haha, thank you! 😊

0

@aliabuhumra

Posted

What is the benefit of your situation tag (label) , Then you hid tag lavel display :none;, Is it because of Accessibility or because of another?

1


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@AliABUHAMRA

Yup! I didn't want the label elements themselves to be seen, but they should still be present for semantics and accessibility. That way, I could still make my solution according to the design but have labels available for screen readers to use. 👍

1

@aliabuhumra

Posted

@ApplePieGiraffe Thanks that was helpful

1

@krishrahul98

Posted

Great Work.

1


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@krishrahul98

Thank you!

1

Connor Z 5,115

@zuolizhu

Posted

I understood these days people build out projects using JS frameworks such as React, and they relied on those JavaScript-code-generated-Virtual DOMs and don't really care about the "ancient" HTML anymore (I saw a situation where using JavaScript to check if the input field is empty 🤣). "Anti-JavaScript" and diving deeply with the pure HTML and CSS is absolutely worth it!

I love how tiny your project is (comparing 2x size if using react) and the animations just make the user experience feels nice and smooth🤩.

You don't have to use node-sass in your package, you can just use a vscode extension called Live Sass.

You can also break your main.scss into small pieces and import to main.scss which can make it easier to organize. And some simple scss architecture might also help for your big project 😎.

Looking forward your next project!

Happy coding! 😁

1


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@zuolizhu

Thanks so much for the feedback! 😊

To be honest, I'm trying to use HTML and CSS as much as I can in my projects so that I can put off diving into JS frameworks just a little bit longer—but I'll get to that fun, eventually! 😁

I decided to use a single SCSS file for this project because I initially thought I wouldn't need to write very much code (but that's I often feel when I first start a project—only to find out the truth a while later). 😅

And thanks for the link to Live Sass—that'll be very convenient!

Happy coding! 🙌

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!