🦊 Smoothly Animated Sign-up Form [Redesign] + [react-hook-form] 🦊
Solution retrospective
You can find MY ANIMATION TUTORIAL HERE
🔥 Another challenge with my own custom design on top the original fem design.
- Landing Page Animation done in gsap.
- Changing Words Animation done in vanilla JS.
- Error Animations done in framer-motion (due to exit animations)
- Input Field Animations done in vanilla CSS.
For optimum animation experience, recommended viewing dimensions: 1440x800
- I've built the form using react-hook-form for functions and yup for validation.
- Modal component built by using Dialog component by headlessui
- The placeholder text for terms of services generated by ChatGPT (who would have written all that text anw :) )
It is also responsive for mobile.
And finally with this submission, i've officially completed all newbie challenges 🔥
Please log in to post a comment
Log in with GitHubCommunity feedback
- @billccr
Very inspiring to see what you've done with this 'newbie' challenge. Quite a beautiful presentation.
For image compression, conversion, and resizing, you might also want to take a look at Squoosh App. It's a web app that's super intuitive, fast, and works offline (no uploading of assets required). Jad Joubran (of Learn JS Online) does a great analysis video of it.
Marked as helpful - @zsoltvarju
Hello Dennis!
I really love your take on this project in fact I love it much more than the original design. I am just a beginner so i cant really give you any kind of constructive criticism about your code, but i would like to let you know that as i tried your live preview and used the built in autofill function in chrome for the inputs the background color of the input changes to #e8f0fe and hides its corresponding label.
Keep up the great work!
P.S.: sorry if my comment is hard to understand i tried my best trying to explain it! :)
Marked as helpful - @MelvinAguilar
Hello there 👋. Good job on completing the challenge !
Your solution is quite elegant and the animations are very smooth. However, i found a problem with your page. The images should not be too heavy; 5.07MB is too much for a single image. Not everyone has a good internet connection. In fact, when I reviewed your solution at my university (where the internet is not very good), it took more than 5 seconds to load and I could only see the white letters.
You could even use Lighthouse to check the performance of your page, and read their article on Large Network Payloads: Avoid enormous network payloads
Apart from that minor issue, the other aspects of the solution are impeccable. It is a very impressive job.
Happy coding !
Marked as helpful - P@EdwinSch
Hi there! Just wanted to say I love your personal takes on the standard designs. 👍 It takes a lot of creativity and design knowledge to re-design the entire challenge(s). Just had the same tip as Melvin already mentioned above; keep track of your image/content sizes. Users will leave an application if the performance is slow, no matter how great the design. Easy fix by just compressing down your images.
Keep it up! Great stuff :)
- @MadiMalik
I told you not to underestimate your design skills, even when it comes to building forms. Your animation was fantastic, and I thoroughly enjoyed it!
- @hyeo151
Love your work !
- @Jo-cloud85
It is really inspiring for aspiring developer to see pro-developers like yourself pushing boundaries for each challenge, going beyond the basic requirements. This is a really impressive little project by the way! Awesome!
- @Shadow-IO-oI
🦊^_^🦊👍
- @hirashabeer
hey @visualdenniss...could you spare a moment to review my recently solve expenses chart component solution and answer my questions pleaseeeeeeee
i want to get rid of this headache asap - @smitvalture
Great website
- @abobykin
WOW, it's really cool!
So good looking work, seems like you love your work & users. I made a task for myself to review your code carefully if I can find anything else after all guys of course (now it's just pretty late for my), but for now please take at least my respect so far Denis!
Thank you for your great efforts, it's really inspiring to learn (once again)!
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