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
Log in with GitHub

Submitted

🦊 Smoothly Animated Sign-up Form [Redesign] + [react-hook-form] 🦊

#framer-motion#gsap#react#animation
P
visualdennis• 8,295

@visualdenniss

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

This is a solution for...

Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

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 🔥

Community feedback

billccr• 90

@billccr

Posted

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

0
P
visualdennis• 8,295

@visualdenniss

Posted

@billccr Hey, thanks a lot for your input. The resource you shared seems quite useful, i'll be using that in the future. Thanks again and happy coding!

0
billccr• 90

@billccr

Posted

@visualdenniss Hope you find it useful. I've been using it myself, and find it does everything I need, quite nicely. Cheers.

1
P
Zsolt Varjú• 490

@zsoltvarju

Posted

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

0
P
visualdennis• 8,295

@visualdenniss

Posted

@zsoltvarju Hey Zsolt,

thanks a lot for your helpful feedback! This sounds like a strange bug caused by Chrome..In the code i had set autocomplete="off" already so it should not be showing autocomplete option in the first place to you. At least it does not show it to me. But when i temporarily turn it on, indeed there is that issue with background, where chrome forces its default styling maybe. When i continue to type, that white bg returns to normal as well. I've tried various thing but i don't know how to fix at the moment. I also don't understand why it is showing you autocomplete options when it is already disabled.

0
P
Zsolt Varjú• 490

@zsoltvarju

Posted

@visualdenniss

i digged a little bit deeper into this, It appears that Chrome ignores autocomplete="off" if you have an account saved in chrome ( settings -> Autofill ). If i delete my saved accounts then the autofill property works as it should. Found a solution for it tough:

  • changed the type in the inputs from text to search this way google's autofill was turned off too.

Here are some pictures: [imgur link] (https://imgur.com/a/yLyQw5f)

1
P
visualdennis• 8,295

@visualdenniss

Posted

@zsoltvarju Thanks a lot for your efforts!

That feature of Chrome i was not aware of. Learnt something new :)

I don't think changing its semantic meaning is a good idea. It would mess up with other/more important stuff. So i'll just leave it as it is now since it is a very minor issue, maybe in the future i can come up with an effective solution.

0
Melvin Aguilar 🧑🏻‍💻• 61,480

@MelvinAguilar

Posted

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

0
P
visualdennis• 8,295

@visualdenniss

Posted

@MelvinAguilar Hey Melvin,

thanks a lot for pointing out such an important point! I've completely forgotten to compress my images before deploying and the fact that i'm using custom images rather than FEM's own image assess, which are already optimised in size. I'll try to reduce file size asap, 5.07 MB sounds insane, it is as if i'm sending node modules to the client 😱.

Thanks for the resource and link as well. Do you have any recommended tools for compressing images? I usually go with this one.

Now checked and it looks like you were actually referring to mobile image, which is indeed 5mb, while the desktop one was 800kb. I've compressed and replaced the mobile bg with a 700kb version now, hopefully it is a better experience now.

0
Melvin Aguilar 🧑🏻‍💻• 61,480

@MelvinAguilar

Posted

@visualdenniss That is a good online option for reducing the size of images. If you use Photoshop, you can compress images when exporting them. If you use Figma, there are plugins such as "TinyImage Compressor" that allow you to export images up to 95% smaller. And if you use Canva, you could reduce the dimensions of the image for a lower file size.

I would like to reiterate that overall, this solution is well done. :)

0
P
visualdennis• 8,295

@visualdenniss

Posted

@MelvinAguilar Thanks a lot for all the resources you have shared. Indeed Photoshop is a good idea, it just didn't cross my mind to use it for a simple compression task as i usually use the app for actual photo editing and so on. So drag-drop online felt pretty convenient but PS is a good option too.

Thank you again! 🙏

0
P
Ed• 720

@EdwinSch

Posted

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 :)

1
P
visualdennis• 8,295

@visualdenniss

Posted

@EdwinSch Hey Ed,

thanks a lot for your encouraging words! I appreciate it a lot to hear that you enjoyed the final results of my takes on these challenges.

For sure, i'll be keeping a special eye on the optimization of custom images in my upcoming projects. Thanks again!

0
P
Ed• 720

@EdwinSch

Posted

@visualdenniss Maybe you already know this, but you can actually check different loading speeds in the browser dev tools. Within the 'network' tab you can switch between mocked network speeds like; fast, 3G, slow, and so on.

1
P
visualdennis• 8,295

@visualdenniss

Posted

@EdwinSch Yes, i do use it from time to time but rarely, maybe i should make it a habit, thnx for reminding me!

0
Madi• 170

@MadiMalik

Posted

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!

1
P
visualdennis• 8,295

@visualdenniss

Posted

@MadiMalik Hahah Madi ❤️ i'm glad that i've made you enjoy even a web form 😈

0
Shawn(Heongi) Yeo• 190

@hyeo151

Posted

Love your work !

1
P
visualdennis• 8,295

@visualdenniss

Posted

@hyeo151 Hey, thanks a lot buddy!

0
Jo Young• 840

@Jo-cloud85

Posted

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!

1
P
visualdennis• 8,295

@visualdenniss

Posted

@Jo-cloud85 Thanks a lot for your encouraging words! While i'm definitely nowhere near pro, i hope to get there one day :) I'm very happy to hear that the projects have been inspirational for you, which motivates me to go further as well.

0
🦊[Shadow]🦊• 420

@Shadow-IO-oI

Posted

🦊^_^🦊👍

1
P
visualdennis• 8,295

@visualdenniss

Posted

@Shadow-IO-oI 🐣🙏

0
Smit Valture• 310

@smitvalture

Posted

Great website

0
P
visualdennis• 8,295

@visualdenniss

Posted

@smitvalture Thanks a lot!

1
P
Alexander Bobykin• 90

@abobykin

Posted

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)!

0
P
visualdennis• 8,295

@visualdenniss

Posted

@abobykin Hello Alexander,

thanks a lot for your compliments! Happy to hear it has inspired you, which is always a driving force for me to continue my passion :) Sure, feel free to take a look at the code and if anything is unclear for you, let me know. Happy coding!

0

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