Responsive Login & Registration Form Using HTML & CSS & JavaScript | CSS Login Form Design
HTML-код
- Опубликовано: 12 июн 2024
- -- Mockitt --
⭐️ Fast UI/UX design platform Wondershare Mockitt: bit.ly/385Nngq
⭐️ Free vector design tool Wondershare Mockitt: bit.ly/3gsWI6w
Responsive Login & Registration Form Using HTML & CSS & JavaScript | CSS Login Form Design
In today's video, we're going to make an animated login and registration form with a smooth sliding animation just by using HTML and CSS and little bit of JavaScript, we're also going to make an awesome carousel that we're gonna have beside the form using only vanilla JavaScript. In addition to this, we're gonna see how we can make this login page completely responsive on any device, so it stays responsive no matter what the size of the device is. Now this sign in & sign up form page leads to a really fun project that covers a bunch of css technologies ( flexbox, grid, animations ... ), and also a lot of Javascript concepts ( arrow functions, forEach, template literals ... )
Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
💖 Please feel free to donate any amount you think is equal to the value you received from my tutorials. Donation link : paypal.me/truecoder
📄 SOURCE CODE : bit.ly/3jC8EEU
🚫 DON'T CLICK THIS : bit.ly/2SuCfW3
✉️ For Business inquiries : truecoder.business@gmail.com
👉 Inspired by Anton Zaderaka Design : bit.ly/3DPoLXK
👇 Timestamps:
0:00 - Intro
1:23 - Setup
2:45 - Creating the layout
10:26 - Creating the Login Form
27:58 - Adding the Registration Form
32:20 - Making The Sliding Animation
36:26 - Creating The Carousel
58:39 - Responsiveness
1:02:53 - Outro
Make sure to SUBSCRIBE for more tutorials like this one !
Men l'hadra katban Marocain, bravo elik khouyaa 👏👏
I love this guy... i founded hiw account 3 days ago and i completed 2 videos. It fook me aroun 11 hours to watch 2 videos of 1 hour each... XD
awesome! thanks for sharing this masterpiece
Honestly your videos are way better with you explaining everything 😊
I appreciate that!
Much love from Jamaica. I don't know why anyone would dislike this video? It seems you really can't please everyone. Nonetheless, please continue to be such a blessing.
Thank you bro, I appreciate that !
Ur amazing bro, respect🤘🏻
Amazing!!
Awesome content ❤️
Amazing tutorial, thank you so much!
Glad you enjoyed it!
it's really helpful. . thanks a lot
So interesting !
Thank you. Your Videos are very nice and I love to Watch them. Could you do a part 2 of this Login With sql and php?
Thank you so much for the awesome tutorial!
Glad it was helpful!
Great!
Keep going on :). Great content with great explenation of what you. 5/5 stars
Thank you so much ! I appreciate that
BRO THANK YOU SO MUCH !!!!!! YOU ARE THE BEST SO FAR!!!
Glad I could help
very very helpful content for beginners, especially while explaining every step, thanks so much ❤️❤️ Continue ..
Thank you for the motivation 💚
Uauuuuu very impressive
I LOVEE THIS CHANNELLLL
Awesome
Keep up the good work, and the same quality of content, thak u 👏
Thank you too!
one of the best videos of html css i watcher. Video become more awesome with your voice over explanation
Thank you brother !
I like this toooooooo much good job man
Glad you like it !
it's great
Ur videos are great!
Happy to hear that !
Good job hh
Great! Love this theme. I've tried the one in the source code but the carousel is not working, any solution for that?
Your videos are so great 🔥
I appreciate that!
can i know how you did the autoplay on image slider carousel? ? that part is not in the source code :(
Not sure if you'll see this and respond, but I must ask anyways. I want the carousel to auto scroll every 5 seconds. If I were to do a setInterval, I'll get an error stating that "value" is undefined. The error is being caught from the "let index = this.dataset.value". What would I need to change so that it can autoscroll and still be clicked on by the user if they want to?
nice video, i want to say it with you...
thank you very much for your video tutorial, Nice to meet your video from me in Indonesian🙏😉
Thanks and welcome
Amazing
Thank you !
Good ❤️
Glad you like it !
thanks 👍
Thank you too
Can this animation be used with two different url like /signin and /signup?
👍👍👍
OMG PROGRAMMING IS SO CONFUSING, but your explanation is great makes it easier
Glad it was helpful 💚
👍👍👍👍😍😍❤
❤️🔥😑
Thank you. Extraordinary. I have liked and subscribed. May I use this source code to create an Google App Script WebApp tutorial on my channel? I will write your channel name and this video link for reference if you don't mind. But if you mind, I won't. Once again, thank you :)
Please Make Dashboard Design with material UI angular. please.
How to add get help page as 3rd slide?
Can u please make portfolio website
Can u say what is the theme you're using on vs code? Also if possible add some background music. It will be nice!
I'm using the Dark one pro theme.
How to include the slider automatically.
How can I publish a website? Mine's not done yet... Not eveb close 🤣, but I would like to know... Can anyone help me?
How to link this with phpmyadmin. Please help me with it
Do you have the relevant code?
Thank you so match the source code
You're welcome!
Thank so match the source code
Can you provide a link to the images used in the project
you're gonna find them in the source code
@@TrueCoder link to the source code wasn't provided if i may ask Can you send me the link
Can u plz make a course on udemy?
I’m thinking about it !
واش مغريبي هه ؟
I tried everything, but it came out so weird
make sure you're using google chrome
@@TrueCoder yeah, I used chrome, but it's still large.... How about your page size?
صدای بسیار کیری و غیر قابل تحمل
JS don't work: i have lost 4 hours! Don't lose your time with this vidéo.