Looking to hire developers?
Submitted
@ApplePieGiraffe
<input required="" type="text" name="first-name" id="first-name" placeholder="First Name" class="form__first-name"><input required="" type="text" name="first-name" id="first-name" placeholder="First Name" class="form__first-name"><input required="" type="text" name="last-name" id="last-name" placeholder="Last Name" class="form__last-name"><input required="" type="text" name="last-name" id="last-name" placeholder="Last Name" class="form__last-name"><input required="" type="email" name="email" id="email" placeholder="Email Address" class="form__email"><input required="" type="password" name="password" id="password" placeholder="Password" class="form__password"><input required="" type="password" name="password" id="password" placeholder="Password" class="form__password">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! 😁
@dusvimarin
Posted
I like this effects!!!
2
@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
@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
@ApplePieGiraffe
Posted
@krishrahul98
Thank you!
1
@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
@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
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!
