I like this effects!!!
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! 😁
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?
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. 👍
@ApplePieGiraffe Thanks that was helpful
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! 😁
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! 🙌