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,525

@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

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

Dusvy_Mโ€ข 390

@dovelym

Posted

I like this effects!!!

2

P
ApplePieGiraffeโ€ข 30,525

@ApplePieGiraffe

Posted

@dusvimarin

Haha, thank you! ๐Ÿ˜Š

0
AliAbuhumraโ€ข 230

@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,525

@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โ€ข 230

@aliabuhumra

Posted

@ApplePieGiraffe Thanks that was helpful

1
Rahul Krishnaโ€ข 35

@krishrahul98

Posted

Great Work.

1

P
ApplePieGiraffeโ€ข 30,525

@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,525

@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
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord