ASMR Programming - Animated Login Page

ASMR Programming - Animated Login Page - No Talking

Рет қаралды 1,214,090

Күн бұрын

Create a Login Page Design using HTML, CSS and JavaScript.
In this tutorial, I'm going to show you how to use modern HTML, CSS, and JavaScript to create a complete Login Page Design with Login and Sign up animations. We'll be using CSS Flexbox, CSS transition for some cool animation effects and also CSS keyframes!
Source Code : github.com/AsmrProg-YT/Modern...
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
Keyboard Link : iqunix.store/discount/asmrpro...
IQUNIX KZfaq : @IQUNIX
Web Design Coding Bootcamp Playlist : • ASMR Web Design Bootcamp
source of all projects also will upload in AsmrProg github page :
github.com/AsmrProg-YT
Video Contents :
00:00 - Intro
00:29 - Warming hands
00:35 - Main codes
00:53 - Adding fonts and icons
01:43 - Html coding
04:46 - Toggle html codes
06:03 - Main styles
06:54 - Container styles
10:35 - Form container styles
11:49 - Keyframes
12:12 - Social icons styles
12:56 - Toggle styles
16:52 - JavaScript codes
17:55 - Final Result
Asmr Game Coding Playlist : • ASMR Game Coding
Other Video's :
Coding IOS (Iphone) Calendar : • ASMR Programming - Cod...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Coding a Snake Game : • ASMR Programming - Cod...
Movie Guide App Coding : • ASMR Programming - Mov...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Subscriptions, good comments and likes are great support for me 😍
Don't re-upload or edit the videos on your channel.
All copyrights by AsmrProg.
About AsmrProg Channel :
Here I upload ASMR programming tutorials related to HTML, CSS, Sass, JavaScript, React, PHP, Frameworks such as Bootstrap and more along with creative UI/UX Designs.
AsmrProg is a community for web developers from all levels to learn and grow their skills in front-end and back-end web development.
AsmrProg
Asmr Prog
ASMR Programming
ASMR Coding
ASMR keyboard typing
ASMR web design
ASMR coding html
ASMR coding website
No Talking ASMR
No Talking Coding
No Talking Programming

Пікірлер: 1 000

@AsmrProg 7 ай бұрын

I’m working on 3D website tutorials, Please LIKE video’s to support my channel 🙏❤️

@INTERESTING_Plus 7 ай бұрын

🔥😍😍😍🤩✅

@rafi-leigh 7 ай бұрын

241st like

@vxlis333 7 ай бұрын

Yo bro please tell me how you made your own website for these projects

@rafi-leigh 7 ай бұрын

i can. he didnt use a domain, so you wont be able to see it (no .com) instead he built it and run it f a file. if you dont know what that means just tell me that, and i'll teach you how to install vs code and live preview and html@@vxlis333

@natancosta2017 6 ай бұрын

Qual tema é este?

@ghostking433 6 ай бұрын

As someone who just started learning programming a week ago, I have absolutely no idea what you are doing, but hope that one day I can come back and change that! EDIT: For those asking, I am a lot better than I was when I first posted this! But still this video is confusing as hell lol

@AsmrProg 6 ай бұрын

It’s web coding, why you left it?!

@ghostking433 6 ай бұрын

@@AsmrProg holy shit I meant “learning”! lol 😂. What a bad typo on my end

@AsmrProg 6 ай бұрын

Oh ok bro 😂🙏 keep it up 😉

@user-ep4iv2vt5u 6 ай бұрын

@@AsmrProghey man just a question, do you code this on the go or you plan before hand and plan how you do it, because when I try to code a login screen it can take hours with all the fine details and everything, just want to know if I'm too slow or you're too good 😅

@kodyhogan3568 6 ай бұрын

@@user-ep4iv2vt5u id say most programmers take time to plan and go through lots of trial and error and googling. This was definitely practiced and then worked on again for a video. Some people are definitely this good, but its few and far between without lots of practice

@kylepowis 2 ай бұрын

I just finished an intense coding bootcamp and this is the content I need to keep me learning at a nicer pace, thanks!

@AsmrProg 2 ай бұрын

Happy to help!

@cozycoding 7 ай бұрын

Thank you for always making great designs. Designing is difficult for me, but I’m getting a lot of ideas. 👍👍

@AsmrProg 7 ай бұрын

Like to support 🙏❤️

@johnoneill4146 4 ай бұрын

Just found your channel through this video and omg this is the best thing ever. As a front end developer, I find this so relaxing and helpful at the same time. 🤘🏻

@AsmrProg 3 ай бұрын

Thanks so much bro 🙏❤️

@WeirdowithaBeardo 5 ай бұрын

Love this! I have played about with HTML and CSS in the past and really enjoyed it - going to revisit it again soon. Might try doing something similar to this soon to get my head around it again. Great video!

@AsmrProg 4 ай бұрын

It’s great, keep it up bro 😉🙏

@p0dc4st.hyp3 7 ай бұрын

Your attention to detail in this video is impressive. 👍

@AsmrProg 7 ай бұрын

🙏❤️

@aratemori 6 ай бұрын

It seems that if we get stuck on your many videos, by watching this, we will essentially not only relax, but also learn JavaScript + css + html)))

@AsmrProg 6 ай бұрын

😁❤️

@adnanshorkar 4 ай бұрын

I just watched ASMR videos of food. This is the first time I've seen ASMR programming. Unique thinking. Keep it up.

@AsmrProg 4 ай бұрын

Thanks so much 🙏❤️

@txl420 5 ай бұрын

not only was this actually really enjoyable to watch, but I feel like I was actually learning at the same time. I've been learning html for the last week or so and I was really surprised at how much I was understanding and taking in. Thanks :)

@AsmrProg 4 ай бұрын

Thanks so much for your such great words 🙏❤️

@rezehh 4 ай бұрын

how much u learnt so far?

@AsmrProg 4 ай бұрын

Me?!

@aryankaushik9373 4 ай бұрын

@@AsmrProg yea

@AsmrProg 4 ай бұрын

Sorry?!

@joseluissanchez7171 2 ай бұрын

Excellent design, thank you for teaching us how to make it with only css without any css library like bootstrap.

@proghub1 7 ай бұрын

Hi bro, awesome video, love the coding videos, it's so inspiring!

@AsmrProg 7 ай бұрын

Thanks a lot ❤️❤️🙏🙏

@sirvivor-tu2uo 6 ай бұрын

Great !! Ive been looking for channels like this to really up my web design skills

@AsmrProg 6 ай бұрын

🙏❤️

@demo1905 7 ай бұрын

The keyboard looks and sounds awesome 🔥plus your code is also just 😲

@AsmrProg 7 ай бұрын

Thanks 🙏❤️

@forneus7874 2 ай бұрын

Thanks a lot for such teaching such smooth animation. I could have never guessed I can animate login page!

@Zeuhib 5 ай бұрын

Your so amazing man you are teaching absolute beginners like me to make professional scripts thank you so much👏👏

@AsmrProg 5 ай бұрын

🙏❤️

@kababurakcan 6 ай бұрын

Thanks for your effort. I hope the channels of software developers like us grow rapidly.

@AsmrProg 6 ай бұрын

Thanks a lot 🙏❤️

@muratdincmd 6 ай бұрын

That's great, I found a new source of inspiration. I follow you everywhere now.

@AsmrProg 6 ай бұрын

Thanks a lot, sorry for late reply 🙏

@cardoso0_ 25 күн бұрын

It's a beautiful transition!

@user-ev6zu8ke9o 5 күн бұрын

Bro, you are MAGICIAN!

@orlanswf 3 ай бұрын

I'm trying to learn HTML and CSS to try for a job in a local tech company. I was following a more traditional video tutorial series, but wasn't feeling it. Now I'm following your video and copying it, and despite me struggling to understand what everything does, I'm surprised how much more fun this is. I know I'm just copying and there surely are better ways to learn, but I'm having lots of fun following this! Thank you so much for your work!

@orlanswf 3 ай бұрын

Also, I feel strangely confident I can tackle micro projects of my own!

@AsmrProg 3 ай бұрын

Don’t worry, you will learn all with experience, it just needs time 😉

@AsmrProg 3 ай бұрын

Just time, do some projects, also check free or paid courses you will succeed 🙏

@user-jy1bi9no2m 10 күн бұрын

Well, have you already gotten a job?

@dickyferialdihutasoit4710 5 ай бұрын

ngl bro, i really use your video as music when im working, it's just the sound of your mouse clicking and the keyboard feel so calming

@AsmrProg 5 ай бұрын

Thanks 🙏❤️

@user-ub3dr9gm4c Ай бұрын

Just my second day of learning coding i understand a few things you doing Thanks for the opportunity

@sunhsiang6644 24 күн бұрын

The best css tutorial ❤

@mrrr111s1ork 7 ай бұрын

Bro, you're perfect, just know this!

@AsmrProg 7 ай бұрын

Thanks 🙏❤️

@MyCodingDiarie 7 ай бұрын

You make coding look so easy! Keep up the good work!

@AsmrProg 7 ай бұрын

Thanks a lot bro 🙏❤️

@drakulea4301 2 ай бұрын

bcs it is

@manifestbruh5999 2 ай бұрын

@@drakulea4301really?

@OperatorZed 2 ай бұрын

I know I’m late to the video, I’m not good at programming whatsoever, especially not HTML. But this looks incredibly fun if I figure out how to do it. This is insanely impressive and honestly beautiful to watch. Side note: that keyboard sounds absolutely amazing

@Mostafa-jh2ij 4 күн бұрын

Amazing stuff!

@user-xy2qo3wt5k 7 ай бұрын

bro u r da best bro. KEEP UP WITH THE GOOD WORK!

@AsmrProg 7 ай бұрын

Thanks 🙏❤️

@user-pv9jv8cp5r 7 ай бұрын

all ur videos are very aesthetic and addictive...

@AsmrProg 7 ай бұрын

Thanks a lot 🙏

@user-pv9jv8cp5r 7 ай бұрын

Bro..may i know: from how many years have you been programming🙂

@AsmrProg 7 ай бұрын

@user-pv9jv8cp5r ~8!

@user-pv9jv8cp5r 7 ай бұрын

bro r u a MERNstack dev??🤔

@AsmrProg 7 ай бұрын

@user-pv9jv8cp5r maybe 🙄

@Mamimuuuuu 2 ай бұрын

I love what you do! keep it up❤

@krewol29 27 күн бұрын

thanks man!, i luv ur content

@hoat7138 6 ай бұрын

Simple and beautiful, I will follow you to practice my font-end skill 😍😍

@AsmrProg 6 ай бұрын

🙏❤️

@eyeonthehorizon6142 7 ай бұрын

It's always kind of hard looking at others remembering every single tiny bit of detail about a bunch of languages out of their head,while I a lot of the times need to look stuff up,and hassle more than usual :/.Great video either way!

@AsmrProg 7 ай бұрын

Hi, bro video is edited and some sections removed 😉🙏❤️

@yunsha9986 6 ай бұрын

Even as a senior dev, I would find it hard to believe this was done in one run and no googling involved. The only reasonable answer I would figure out is dude has another monitor with the complete code done prior and is just typing again for sake of ASMR, or a lot of segments were edited.

@AsmrProg 6 ай бұрын

@yunsha9986 hi, yes video is edited, because I don’t want we waste time with searching in video and checking sizes on it!

@russellreal 5 ай бұрын

yeah he has the code pre-written somewhere else@@yunsha9986

@everything7057 3 ай бұрын

Very clean work!

@nano_0x 6 күн бұрын

I liked this work very much, and I was smiling throughout the clip 😅

@jellyhorizon 7 ай бұрын

(Please forgive me for the extreme noob question, I'm literally just starting out): What extension is being used here for the autofill/macros in VSCode? ASMRProg, your videos have been inspiring me to keep exploring web design! Thank you!

@jellyhorizon 7 ай бұрын

Jk, I just saw your VS Code settings repository on your GitHub 😁 This is so helpful for us, thank you!!!!!!

@AsmrProg 7 ай бұрын

Hi, please check my github, there is a repository about all of my vscode settings and extensions 😉🙏❤️

@mateuszgebka344 5 ай бұрын

Amazing! Could you show your VS Code settings, please?

@AsmrProg 5 ай бұрын

Hi, please check my github, there is a repository about all of my vscode settings 🙏

@alienrook55 3 ай бұрын

I am a beginner in fact of html. Time ago this would've been relaxing, but now I am just here learning step by step.

@AsmrProg 3 ай бұрын

Oh really great, keep going in you will succeed 🙏

@leonalayja5861 2 ай бұрын

Keep doing bro. Im staying tuned

@Ghostcheetokill295 3 ай бұрын

What theme/font/extension are you using to make your VS code look so nice?

@AsmrProg 3 ай бұрын

Hi, please check my GitHub, there is a repository about all of my vscode settings, Sorry for late response 🙏

@akz4494 7 ай бұрын

How do I make my VsCode transparent like yours? Great video!!

@bnizable 7 ай бұрын

Use the extension "glass-it" you can control the opacity with ctrl-alt z and c

@AsmrProg 7 ай бұрын

Hi, with glassit extension, also you can check my github, there is a repository about all of my vscode settings 🙏

@AsmrProg 7 ай бұрын

Thanks for answering 🙏❤️

@akz4494 7 ай бұрын

@@AsmrProg thanksssss

@AsmrProg 7 ай бұрын

@akz4494 🙏❤️

@Arielddd 4 ай бұрын

You look so professional, i plan to start learning web dev in 2024 hope i will be like you in 2 years or more or less. 🙏

@AsmrProg 4 ай бұрын

Thanks, So now it’s 2024, start it 😉❤️

@YeahEsCereal 4 ай бұрын

Hey man! could you tell me the extensions you use on vscode and explain what they do briefly?

@AsmrProg 3 ай бұрын

Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏

@YeahEsCereal 3 ай бұрын

@@AsmrProg ok thanks!

@AsmrProg 3 ай бұрын

@Adeeb-YEC 🙏❤️

@hstecnologia 7 ай бұрын

Likeeee você merece um bilhão de likes parabéns

@AsmrProg 7 ай бұрын

Thanks 🙏❤️

@ZeroMOTORSPORTS 2 ай бұрын

This is not just an asmr, i can learn html alot in the video!

@slava_zxz 6 ай бұрын

Thank you for this lesson!!!

@AsmrProg 6 ай бұрын

🙏❤️

@jorgebailey2005 5 ай бұрын

Hey dude, nice video and nice work! Would you mind to share the extensions you are using ? Regards!

@AsmrProg 5 ай бұрын

Hi, thanks, please check my GitHub, there is a repository about all of my vscode settings 🙏

@rijugamerplayzzz1164 3 ай бұрын

I was finding gold but I think I found diamond

@AsmrProg 3 ай бұрын

Thanks so much 🙏

@ador4752 5 ай бұрын

this is better than teaching step by step if you have a prior knowledge especially in java thanks hope you build more website

@AsmrProg 5 ай бұрын

Thanks so much 🙏❤️

@naistor Ай бұрын

Brother, your consistency while coding is terrifying, I'm constantly making mistakes whilst you go for 18 straight minutes without screwing everything, I honestly aspire to get 'tis gut' someday, please keep it up.

@cocobrown9088 13 күн бұрын

No, in the comments he states it's edited n it actually took him 2 hours

@Carlos-do2vh 6 ай бұрын

with all due respect, "Html coding" hurts my brain.

@AsmrProg 6 ай бұрын

🙏❤️

@swiftypopty1102 2 ай бұрын

😂Check out C++ & Rust, your brain could explode!

@Say2Cups 25 күн бұрын

I love these types of videos

@geancarlomoura 6 ай бұрын

So nice, man, ty for sharing.

@AsmrProg 6 ай бұрын

🙏❤️

@brayancuevas8410 6 ай бұрын

thank you so much, is so incredible

@AsmrProg 6 ай бұрын

🙏❤️

@juanseo7369 11 күн бұрын

you're amazing bro

@user-oh4nr5bw7l 4 ай бұрын

thank you this is very step by step guide

@imlim.a5295 2 ай бұрын

nice bro, good job 👊🏻

@investierenmitnick 2 ай бұрын

I’m now 1 month into web development and I’m pretty proud because I understood everything

@tasshilat-768 22 күн бұрын

From where did you get your courses please?

@XxAlphaxX2149 7 ай бұрын

You deserve more subs your underrated

@AsmrProg 7 ай бұрын

🙏❤️

@INTERESTING_Plus 7 ай бұрын

Waw, Cool Transition 🔥😍

@AsmrProg 7 ай бұрын

🙏❤️

@julios-ia4511 4 ай бұрын

Fantastic!!! 👏👏👏

@AsmrProg 4 ай бұрын

Thanks 🙏❤️

@devid528 Ай бұрын

I really enjoyed your video and I didn't even skip a second

@maicolaviles714 6 ай бұрын

Ey friend, thanks for shared your knowledge; while I learning I relax

@AsmrProg 6 ай бұрын

Thanks a lot for your support and good energy 🙏

@abdullahsevindik3073 7 ай бұрын

I came across your videos while browsing KZfaq and I liked them very much. Where would you recommend starting from scratch for coding and programming? You caught my attention, I need your advice :)

@AsmrProg 7 ай бұрын

Thanks a lot, start with youtube tutorials, im working to create zero to hero courses too 🙏❤️

@ErkoGg Ай бұрын

Great tutorial

@AsmrProg Ай бұрын

Thanks 🙏❤️

@imanolestabridis1966 2 ай бұрын

awesome bro your channel is amazing im just learning a lot

@AsmrProg 2 ай бұрын

🙏❤️

@user-yv8rb9gt7f Ай бұрын

Excuse me can I use this design? Please

@_danielmiranda7 Ай бұрын

Amazing ❤

@AsmrProg Ай бұрын

🙏❤️

@mtnguyen8578 Ай бұрын

love it. Thank

@AsmrProg Ай бұрын

🙏❤️

@Up_Lift_U_867 12 күн бұрын

Great brother ❤❤

@rafianhilmiramdan3339 6 ай бұрын

thank you so much!

@AsmrProg 6 ай бұрын

🙏❤️

@majkel2814 Ай бұрын

Thank you its so helpfull

@AsmrProg Ай бұрын

Thanks 🙏❤️

@MohsinhasanHemani 7 ай бұрын

Yo, love the content! Keep it up legend! Do you have any place for support questions or a community communication source like discord?

@AsmrProg 7 ай бұрын

Thanks, No but i will create soon 😉

@anhtuanppoi8448 7 ай бұрын

Amazing ❤❤❤

@AsmrProg 7 ай бұрын

Thanks ❤️🙏

@mahdmustafa9258 7 ай бұрын

What a great video.❤

@AsmrProg 7 ай бұрын

Thanks 🙏❤️

@mahdmustafa9258 7 ай бұрын

@@AsmrProg no problem ❤

@AsmrProg 7 ай бұрын

@mahdmustafa9258 🙏❤️

@mahdmustafa9258 7 ай бұрын

@@AsmrProg ❤❤❤

@AsmrProg 7 ай бұрын

@mahdmustafa9258 🙏❤️

@hieumai15073 6 ай бұрын

Thank you for your sharing

@AsmrProg 6 ай бұрын

🙏❤️

@mitikouman7581 6 ай бұрын

Thank you ❤❤

@AsmrProg 6 ай бұрын

🙏❤️

@bnizable 7 ай бұрын

Love it again! What extension do you use for the mouse cursor to go in/out from the middle like that?

@Erisi_ 7 ай бұрын

it's the screen recorder effect

@AsmrProg 7 ай бұрын

Hi, its Screen recording effects!

@AsmrProg 7 ай бұрын

Thanks for answering 🙏

@bnizable 7 ай бұрын

@@AsmrProg oh ok thank you!

@AsmrProg 7 ай бұрын

@bnizable 🙏❤️

@SyedMuzammilMahasanShahi 5 ай бұрын

Thanks for the share.

@AsmrProg 5 ай бұрын

🙏❤️

@user-lw7vc8gw3s 6 ай бұрын

Beautiful😊

@AsmrProg 6 ай бұрын

Thanks 🙏

@rafi-leigh 7 ай бұрын

wow amazing

@AsmrProg 7 ай бұрын

🙏❤️

@the-khutinati-tech 7 ай бұрын

খুবই Fantastic !

@AsmrProg 7 ай бұрын

Thanks 🙏❤️

@reviewamazon222 2 ай бұрын

Very nice work 😮

@Murdokkk 7 күн бұрын

Hope one day im getting coding like this!!

@AsmrProg 6 күн бұрын

Yes why no!

@ZAHIALA3B-uk4ub 2 ай бұрын

great work keep going

@AsmrProg 2 ай бұрын

Thanks 🙏❤️

@Matrix-jp9ln 4 ай бұрын

Hello im your new subscriber your content is really helpful and thans for it

@AsmrProg 3 ай бұрын

Thanks so much, sorry for late response 🙏

@techsewunet 3 ай бұрын

Amazing😍

@AsmrProg 2 ай бұрын

Thanks 🙏❤️

@Waladhoolin 4 ай бұрын

Cool!❤

@AsmrProg 4 ай бұрын

Thanks 🙏❤️

@bobs83 4 ай бұрын

Great affect , and work would be nice to see how you solve the mobile view version with this effect

@AsmrProg 4 ай бұрын

Hi, maybe if we receive to many requests, we will have it 😉

@elebesunuosereme7327 3 ай бұрын

Nice work👍,but u can also dynamically change the text content in JavaScript instead of having different containers in your html,in that way making your html less bulky.

@AsmrProg 3 ай бұрын

Hi, yes but with that we will have bulk codes in js! With React it’s easy but soon we will have it 🙏

@ramazanataman1840 5 ай бұрын

thank you bro

@AsmrProg 5 ай бұрын

🙏❤️

@akshay_chougule.. 4 ай бұрын

Thank you bro make more videos ❤❤❤ lilike this

@AsmrProg 4 ай бұрын

🙏❤️

@abdulshubhan5301 4 ай бұрын

Thanks man

@AsmrProg 4 ай бұрын

🙏❤️

@slmadi 3 ай бұрын

from her vids i learned java a little and CSS and HTML but i already half way mastered HTML and CSS in amateur but on Java Script I'm still a beginner but i can learn even better from her vids♥♥♥♥♥♥♥♥

@AsmrProg 2 ай бұрын

Thanks so much, keep going on 🙏❤️

@ConstantineVac 7 ай бұрын

Thank you for the awesome content. I love watching your videos to unwind and relax, and in the meantime I learn a thing or two. This project's timing couldn't be better. I am working on a University project on a school administration web app and this login page could make it better but I have an issue. I am coding on Java and Spring-Boot so I have to work with thymeleaf to deploy my web-pages. The page kinda works but the styling is not working entirely. Could you help me migrate it to thymeleaf or do you know what it could be wrong ? The main issue is that the animation part is not working and the page renders all together. Anyways thank you very much. TOP CONTENT 💯💯

@AsmrProg 7 ай бұрын

Hi bro, the thing you saying i didn’t understand! Please can you tell me whats wrong?!

@ConstantineVac 7 ай бұрын

@@AsmrProg Hi, I am trying to use your login page to a Java Spring Boot project with thymeleaf. The page loads, but the css won’t render properly. When I followed the tutorial in VS code it worked flawlessly though. The issue lies in my Java project.

@AsmrProg 7 ай бұрын

Bro java and javascript aren’t same!

@ConstantineVac 7 ай бұрын

@@AsmrProg You are correct, but you can always build webapps using Java as a backend and html css and js as front end. Anyways I´ve managed to make it work. It was a conflict with project dependencies. Thank you for your time. Keep posting, your content is top notch.

@AsmrProg 7 ай бұрын

Oh, i didn’t worked java, sorry 🙏❤️

@Play2Earn849 6 ай бұрын

speechless but awesome 👍👍👍 Thank you for this I understand moderately 👍👍👍

@AsmrProg 6 ай бұрын

Thanks 🙏❤️

@cubertcubes 3 ай бұрын

Hello, this is a truly amazing design, and I was wondering if I could use it in one of the projects I am making. It is not an exact copy, but it has very similar frameworks. But again, incredible job!

@AsmrProg 2 ай бұрын

Hi, no problem 😉❤️