Responsive Animated Login Form Using HTML & CSS & JavaScript

How to Create a Responsive Animated Login Form Using HTML & CSS & JavaScript !!
-- Web Design Tutorial --
In this Video, You will learn how to create an AMAZING Responsive Login form with an awesome design and a floating placeholder, as well as a gradient login button hover effect.
Please feel free to donate any amount you think is equal to the value you received from my tutorials .
DONATION : paypal.me/true...
SOURCE CODE : github.com/sef...
Don't forget to smash the like button and share the video with your friends if you found the video useful.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
Make sure to SUBSCRIBE for more tutorials just like this one !
✉️ For Business inquiries : [e-mail]

[@TrueCoder]

Make sure to SUBSCRIBE for more tutorials like this one !!!

[@TrueCoder]

which one?

[@daryl3313]

Where do u get does backgrounds tho? 😢

[@TrueCoder]

You can create it yourself using Photoshop

[@harikrishan2641]

@@TrueCoder There is no option of contact details There is only ine button of Donation

[@TrueCoder]

Check now

[@CricketLoversSagheer]

i just use your code in my project and i am happy because its work in spring boot and also it connected with data base and put data from view to controller. thanks buddy.

[@jadijohnson2899]

kzbin.info/www/bejne/Y4uuqICil96lapo watch this html,css & javascript game project

[@deoudersvan1883]

You got realy GRAZY Skills! It's SO Amazing! NOT only by this Video, but by every Video that you Produce.

[@TrueCoder]

Thank you bro :)

[@ajjalt2276]

check the link. it says my mac is on virus. malware link should be removed. please don't let down ur subscribers.

[@TrueCoder]

maybe you pressed a fake download button, the real one is on the bottom of the page

[@CodeLeague]

good work, I've also started sharing my knowledge through Project-based tutorials.

[@yuvu11hjg]

Good job gamers.

[@sohan_rifa]

you are best bro,your tutorial is very helpful,respect you

[@TrueCoder]

Thank you !!

[@ABMA79]

amazing tutorial and it requires a lot of tries for us to reach that level. Even though it is only 20 minutes, maybe less or more by little, but it is very intensive and heavy. Thanks a lot.

[@TrueCoder]

Most welcome bro !

[@ABMA79]

@@TrueCoder do you know any website where I can get free templates and responsive to use for my projects? I am a backend developer and always struggling with frontend, I am trying to find something that can help me start working without worrying so much about the frontend?

[@cisconetworksandcodingacad2749]

This class is awesome. Thank you!

[@bibichbicha687]

please how can i get the kit fontawesome link

[@NekoManAICore]

Buen trabajo, muchas gracias!!, me encantó!! ❤❤

[@mohdzubairqamar9415]

Thank you so much for this creative design of login form.

[@TrueCoder]

Most welcome!

[@jeffrihastono9136]

Awesome tutorial and design. Keep the good work...Friend!

[@TrueCoder]

Thank you !!

[@bilalmustafa7334]

I downloaded the source code, extract the zip file, open it with VS code. That's too much fast. Thanks buddy.

[@TrueCoder]

You're welcome

[@bilalmustafa7334]

Yes, email me at [e-mail]. I will send you the source code

[@ranieriprg5977]

@@TrueCoder I want to click the link you said we cant

[@QATIPS01]

Bro zip code kha se milay ga

[@Vrclan717]

@@QATIPS01 in video description

[@AHSANHABIBMUAZ]

*Who clicked on description's link that clearly mentioned that "Don't click this"* *Definitely I did, Lol!* 😂😂

[@kisspado]

your not alone hahahaha

[@amandadiasdeoliveira5889]

Professor Perfect!

[@timifaith350]

The Jazz Beat is Awesome

[@cssmaster2978]

I love the way you always leave source code. you really wanna share your design and help others who want to learn html and css. thank you very much.

[@TrueCoder]

You're welcome

[@duncanmwangi3468]

Thank you for sharing ,sharing is caring :)

[@martindanica21]

How can I able to put a navbar on top of that? I tried to modify but I can't get the right css for it. Thank you sir it's big help for me. hope you can answer my question sir.

[@TrueCoder]

Watch my last tutorial

[@SumanRoy.official]

What's the problem in using GitHub to host your files?

[@TrueCoder]

I think this one is better

[@imprintivellc8422]

He probably gets paid for driving traffic to that site to host his files.

[@TrueCoder]

check now the description, I upload it in githup

[@blessdarah1256]

@@TrueCoder That's better...

[@morenaaaa]

This video is fantastic. Thank you for share your knowledge with us.

[@TrueCoder]

You're welcome

[@blockcoder8129]

I used your code in my projects, but edited as my own. Thanks buddy..!!!

[@TrueCoder]

Most welcome!

[@agthm_3]

I am very lucky to have found the channel

[@robertndiritu745]

Great tutorial! I subscribed in a flash! More please! Also, is there a way I can change the wave into another color?

[@blessdarah1256]

Yes there is... Open the SVG photo in something like photoshop and target the layer you want to change the color and do that. Or if you're good with svg yourself, you can as well do that. However, the first approach is better.

[@TrueCoder]

Thank you

[@soyrafaAnimacion]

Hey, I'm very new at this. I wanted to ask on what is the next step, like, the code used to go to the next page if it's correct or another page if it is incorrect, the register option, and all of that stuff.

[@lucialucia9161]

Thats backend auth stuff

[@lanzy7831]

It is database, its required MySQL, PHP. Basically what u have learn from this vid, is front end stuff, the database is back end

[@sadeepthabandara8961]

For backend, without getting too nitty gritty with PHP etc, checkout firebase: kzbin.info/www/bejne/n3zPiJSLqN-reJY .

[@randomyoutuber989]

U need to learn php and sql and javascript for creating accounts of each user and implementing them in ur backend database... and then u gotta need to go to washroom and flush ur toilet.. thank you ... ps. last tip helped a lot of people remember their mistakes

[@moltendub8578]

you could use Vue, Angular or React, or you could use PHP

[@esteit9282]

Good tutorial. I like it !!

[@shdotcomdata8213]

Awesome! I just want to know something, do you memorize the code of colours?

[@TrueCoder]

No, I wrote the code of colors in a paper

[@ramdanisyaputra9648]

saya mau donasi cuman saya gaada jenius gimana ya paling saya donasi via doa aja ya true coder makasih ehehehhehhehe

[@indrapratomo361]

i will like n subscribe now for sharing more tutorial

[@merpastars940]

Hi! I have a question, where can I get the Wave?

[@codewithar9140]

great video

[@TrueCoder]

Thank you !!

[@sammar7979]

Amazing

[@TrueCoder]

Thank you !!

[@WilsonTecnologias]

Good

[@imadeekosatriawiguna6252]

I spent 2 hours to follow this tutorial. So dumb, because there's a link for source code 😫

[@chetgo33]

Do you have a React version and also with Sign-up toggling?

[@amazingreviews4u]

how to get the wave.png

[@revathig1837]

Where to download the wave svg?

[@doorclub]

Hi true coder. Thank you for your awesome videos. I have a question. When you click with your cursor a red circle emits from the cursor. How do you add that setting to your cursor? Thank U. Great Videos Truly.

[@TrueCoder]

I add this setting in camtasia after recording

[@doorclub]

@@TrueCoder Thx, I have one more question if you do not mind. Can you make a full website video including database and signup and login? Even if you need a long time. I will be waiting Print("Thank You") I hope this syntax is correct.

[@TrueCoder]

Good Idea! maybe in the future

[@doenil470]

Would have been a much greater content without the background music

[@mahmutgurmuc2873]

Hello there. Can I use this open source code on my site?

[@TrueCoder]

Yes of course

[@anthonylevano8922]

Thanks for sharing, bro!!

[@TrueCoder]

Most welcome !

[@shahabzafarinobari4156]

this is great thanks a lot

[@TrueCoder]

You're welcome

[@bitqms2047]

Hi, awesome tutorial! I have 2 problems: 1. If my inputs are autofilled (like a saved password for a user) the text won't move because the div won't gain focus. 2. Similiar to 1, if the input is autocompleted (like typing the first chars of a known user) the text is highlighted which does not like nice Can you help me with this problems? Thanks!

[@freakish2506]

So beautiful ❤️

[@priscillaampofo2044]

i really love your tutorial,,,am not able to get the source code,,please can you send to me

[@TrueCoder]

Thank you

[@TrueCoder]

Did you try all the links?

[@priscillaampofo2044]

@@TrueCoder yes i did but wasnt able to download it....because the file came in the form like a webpage

[@TrueCoder]

I didn't get you

[@javiercastellanos4736]

Awesome!!

[@layamathikshara9912]

I tried of adding a new text box below the password but I could not do it because the CSS was a bit confusing. So can anyone help me out with it......!?

[@iamaprilabatas88]

hello host I love your design. Can you please tell us what kind of designer software you used in that wave?

[@oluwasegunafe7273]

Where can i download the wave image and any other kind of image like that 🙏

[@TrueCoder]

You can create your own as I did, or download it from getwaves

[@oluwasegunafe7273]

@@TrueCoder thank u so much i just checked and it's so helpful. Now I can advance my web skills with it🙏

[@DEVDIARYbydhanushka]

This video looks cool... I am recently started in KZbin. Your channel gave me good insight.

[@TrueCoder]

Good luck !

[@DEVDIARYbydhanushka]

@@TrueCoder thank you ✌️

[@atifnadeem2914]

nice work bro upload more video about web tech

[@wisecrackers6740]

that's awesome

[@mahvaree]

Hello, do not be tired The environment inside You wrote the login program What's his name

[@NarutoSphereOfficial]

Man you're cool!!!!! Nice HTML Work. But, "DON'T CLICK THIS!" is quite funny. HAHA..........................

[@TrueCoder]

Thank you !!

[@faktaditya]

Liked, subscribed and shared with 39 coding friends... Thanks a lot

[@eguchiyuuki]

great!!

[@riokonsult5381]

how to upload in wordpress specific page?

[@TrueCoder]

Sorry but I'm not familiar with wordpress

[@iyedferahi9862]

This Is The best tuto that I watch it but can you make a video for signup form and also how to link theme to database And Thank You

[@TrueCoder]

Good Idea!

[@Seyfettin0]

Iyed Ferah I اياد فارح yes I agree too.

[@DcodeShow]

I think u deserve more subscriber, keep it up bro....👌👌👌

[@TrueCoder]

Thank you !!

[@Maximilianokid]

genial ya podre crear un buen login

[@Bryan-bh7cy]

omg dude thank you

[@TrueCoder]

You're welcome :)

[@parth1711]

bro i downloaded the source code but its not responsive Why ?

[@TrueCoder]

reload the page after editing screen's width and height

[@TrueCoder]

After the index don't forget to ADD THIS

[@nobel1378]

Nice !

[@TrueCoder]

thanks

[@lohithgowd9309]

when i change it to php the whole css is gone help me to solve this problem please.....

[@TrueCoder]

Check the spelling of classes

[@lohithgowd9309]

I've solved it by changing the file name.....named it as 1.php.... It's working now....tqs for this ....it helped me to finish the project....thx alot

[@serdaroraz3129]

Which program use for this webpage

[@TrueCoder]

Sublime text 3

[@alooooooola]

why i adjust screen width it has responsive but i click responsive it doesn't?

[@TrueCoder]

Maybe you forget to add this to

[@hafidzdev17]

thanks and auto subscribe ..

[@lengedgamplay2451]

I salute u😍

[@TrueCoder]

Me too

[@aymanharrat9151]

Amazing!

[@portalinfo3775]

this is not working, is there supposed to be a link for html am missing? am new for these font awesome stuff it only works for me as svg, please help

[@TheLastRevelotion]

Why you don't have register option? why you don't test all of these if works and why the hell you don't speak. absolute waste of timeeee

[@vijaypatel-hl7gx]

Which codewriter do you use to write this code

[@TrueCoder]

sublime text

[@ivanodelarosa]

Thanks man, i'm starting to learn programming, and i'll use your advices and techniques to improve my skills, thanks a lot, (sorry for my english, i'm learning too)

[@michaelsean7669]

keep up the good work

[@bharathchippa3773]

i wanna make the same but using different colour.. how can I change the colour of wave.png?

[@ramaeg]

there is error in link source code : "The file you were looking for could not be found, sorry for any inconvenience. "

[@TrueCoder]

Did you try again later?

[@ramaeg]

@@TrueCoder Yes , but "File Not Found " . is there any other way to give us the code source?

[@TrueCoder]

check now the description, I upload it on githup

[@semihkurnaz4315]

Nice work but fon music are sucks.

[@TrueCoder]

Okay, I will change the music

[@hanskristianw]

if anyone having problem with responsive on mobile device when u check with F12 chrome or when u deploy the project, here's what u gotta do: After the index don't forget to ADD THIS very important, hope it solved your problem

[@Aldhxs]

thank you so much bro for your help

[@ivanrabelo1558]

Please remove this is soundtrack of background

[@natecra3823]

Hey, great video I’m trying to make a website on my free time but, I only know the basics. How can you make a create account form that stores the account you made and validates it when you try to log in?

[@TrueCoder]

Maybe I will make a tutorial about this

[@asia22]

@@TrueCoder Same. Please do🔥♥🔥♥🔥

[@sonicdeeofficial8925]

What do you called a black screen where source codes written?

[@TrueCoder]

a text editor

[@sonicdeeofficial8925]

What type of code editor for programming?

[@cozycorner988]

thanks for the video but for me it's not responsive i did the same media queries can you help me please

[@ardinnugraha5932]

Do you using bootstrap in this project?

[@22alison19]

Because of this video I got my first job ! Thank you very much🧚🏻🙏🏻

[@TrueCoder]

Congratulation !

[@itsmd.25]

Nice Video👍 #ItsMD

[@sanjeevprasad1705]

thnk you so much...

[@alifhasanshah8057]

Awesome .. Thakn you so much .. Make a series about psd to html responsive with bootstrap .. it wil be very helpful for all ....

[@TrueCoder]

Thank you bro ! I'll try do that

[@sahilkhankhalilx2102]

i have a very sensitive question ? how to add this login form to wordpress login

[@tikka6554]

What is your windows laptop specifications?

[@sdmdurai257]

please update any angular website very usefull thanks

[@saunaknandi1814]

Hello Mr. you should explain what you have done

[@fuadisayev4902]

What your editor name?

[@TrueCoder]

sublime text 3

[@SorceressSiren]

P'Sun looks like Benedict Chua hehehehe

[@GG-zj7oi]

This is the best login form I've ever seen. Thanks for the great work! Subscribed!!! Love to see more of your videos

[@TrueCoder]

Thanks and welcome

[@fired_developer]

You so so nice!! liked . Subscribed!!

[@TrueCoder]

Thank you !!

[@kaushikmoralwar07]

bro how to get that wave image in different colour

[@coc.1]

plz the link of svg🥺🥺

[@curlyboo6628]

why the images are not loading😥😥

[@shyamprakashm6325]

Where I can download this images ? Would you tell the site name please?

[@TrueCoder]

You'll find them in the source code

[@RijwanKhan]

Very nice 🙏

[@TrueCoder]

Thanks

[@freekeys]

Hey brother , this is not working when we back on same page the placeholder collapse, hope u can help out with this❣️😄

[@TrueCoder]

check the source code

[@wahyuarifkurniawan]

i hate backsound instrument...

[@jahid.hossain.]

how can I connect this on my wordpress website