ASMR Programming - Animated Login Page

ASMR Programming - Animated Login Page - No Talking

Рет қаралды 1,331,751

Күн бұрын

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 8 ай бұрын

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

@INTERESTING_Plus 8 ай бұрын

🔥😍😍😍🤩✅

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

241st like

@vxlis333 8 ай бұрын

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

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

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 7 ай бұрын

Qual tema é este?

@ghostking433 7 ай бұрын

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 7 ай бұрын

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

@ghostking433 7 ай бұрын

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

@AsmrProg 7 ай бұрын

Oh ok bro 😂🙏 keep it up 😉

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

@@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 7 ай бұрын

@@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

@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 4 ай бұрын

Thanks so much bro 🙏❤️

@kylepowis 3 ай бұрын

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

@AsmrProg 3 ай бұрын

Happy to help!

@cozycoding 8 ай бұрын

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

@AsmrProg 8 ай бұрын

Like to support 🙏❤️

@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 5 ай бұрын

It’s great, keep it up bro 😉🙏

@adnanshorkar 5 ай бұрын

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

@AsmrProg 5 ай бұрын

Thanks so much 🙏❤️

@joseluissanchez7171 2 ай бұрын

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

@aratemori 7 ай бұрын

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 7 ай бұрын

😁❤️

@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 5 ай бұрын

Thanks so much for your such great words 🙏❤️

@rezehh 5 ай бұрын

how much u learnt so far?

@AsmrProg 5 ай бұрын

Me?!

@aryankaushik9373 5 ай бұрын

@@AsmrProg yea

@AsmrProg 5 ай бұрын

Sorry?!

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

Your attention to detail in this video is impressive. 👍

@AsmrProg 8 ай бұрын

🙏❤️

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

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

@AsmrProg 6 ай бұрын

🙏❤️

@kababurakcan 6 ай бұрын

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

@AsmrProg 6 ай бұрын

Thanks a lot 🙏❤️

@demo1905 8 ай бұрын

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

@AsmrProg 8 ай бұрын

Thanks 🙏❤️

@forneus7874 2 ай бұрын

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

@WearyTwo 8 күн бұрын

I've been a developer for 10 months now.... Just now realized you can make VScode look this smooth. Life-changing

@proghub1 8 ай бұрын

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

@AsmrProg 8 ай бұрын

Thanks a lot ❤️❤️🙏🙏

@muratdincmd 7 ай бұрын

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

@AsmrProg 7 ай бұрын

Thanks a lot, sorry for late reply 🙏

@Jodyyce 6 күн бұрын

Exactly what I was looking for. Keep up the good content! I’m here because I was told when learning something new it’s important to watch, listen, practice, and write it out.

@user-ev6zu8ke9o Ай бұрын

Bro, you are MAGICIAN!

@Zeuhib 6 ай бұрын

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

@AsmrProg 6 ай бұрын

🙏❤️

@drakehashimoto685 3 күн бұрын

@@AsmrProg Hey AsmrPog. I don't know if you have the time, but would it be alright perhaps, if you explain the container styles code and the part connecting with the animation movements near the end of the css code file? I see what you're doing, but I'm not quite sure how each of those small tags, or features like z-index add up to make this really cool login page.

@dickyferialdihutasoit4710 6 ай бұрын

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 6 ай бұрын

Thanks 🙏❤️

@cardoso0_ Ай бұрын

It's a beautiful transition!

@OperatorZed 3 ай бұрын

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

@orlanswf 4 ай бұрын

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 4 ай бұрын

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

@AsmrProg 4 ай бұрын

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

@AsmrProg 4 ай бұрын

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

@user-jy1bi9no2m Ай бұрын

Well, have you already gotten a job?

@MyCodingDiarie 8 ай бұрын

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

@AsmrProg 8 ай бұрын

Thanks a lot bro 🙏❤️

@drakulea4301 3 ай бұрын

bcs it is

@manifestbruh5999 3 ай бұрын

@@drakulea4301really?

@owlrym.7417 18 күн бұрын

I mean as a Frontend dev, the frontend part is easy! Backend is way harder 😅. But I do practice backend, with Python! :]

@user-ub3dr9gm4c 2 ай бұрын

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

@sunhsiang6644 Ай бұрын

The best css tutorial ❤

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

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

@AsmrProg 8 ай бұрын

Thanks 🙏❤️

@mrrr111s1ork 8 ай бұрын

Bro, you're perfect, just know this!

@AsmrProg 8 ай бұрын

Thanks 🙏❤️

@alienrook55 4 ай бұрын

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 4 ай бұрын

Oh really great, keep going in you will succeed 🙏

@nano_0x Ай бұрын

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

@hoat7138 7 ай бұрын

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

@AsmrProg 7 ай бұрын

🙏❤️

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

all ur videos are very aesthetic and addictive...

@AsmrProg 8 ай бұрын

Thanks a lot 🙏

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

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

@AsmrProg 8 ай бұрын

@user-pv9jv8cp5r ~8!

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

bro r u a MERNstack dev??🤔

@AsmrProg 8 ай бұрын

@user-pv9jv8cp5r maybe 🙄

@krewol29 Ай бұрын

thanks man!, i luv ur content

@everything7057 3 ай бұрын

Very clean work!

@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 7 ай бұрын

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 7 ай бұрын

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

@russellreal 6 ай бұрын

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

@mateuszgebka344 6 ай бұрын

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

@AsmrProg 6 ай бұрын

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

@Girlust 9 күн бұрын

Stunning.

@Ghostcheetokill295 4 ай бұрын

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

@AsmrProg 4 ай бұрын

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

@hstecnologia 8 ай бұрын

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

@AsmrProg 8 ай бұрын

Thanks 🙏❤️

@user-un3fh8es5j 4 күн бұрын

thanks man this one is awesome

@Arielddd 5 ай бұрын

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 5 ай бұрын

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

@jellyhorizon 8 ай бұрын

(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 8 ай бұрын

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

@AsmrProg 8 ай бұрын

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

@YeahEsCereal 4 ай бұрын

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

@AsmrProg 4 ай бұрын

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

@YeahEsCereal 4 ай бұрын

@@AsmrProg ok thanks!

@AsmrProg 4 ай бұрын

@Adeeb-YEC 🙏❤️

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

Amazing stuff!

@ZeroMOTORSPORTS 3 ай бұрын

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

@akz4494 8 ай бұрын

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

@shire-lee 8 ай бұрын

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

@AsmrProg 8 ай бұрын

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

@AsmrProg 8 ай бұрын

Thanks for answering 🙏❤️

@akz4494 8 ай бұрын

@@AsmrProg thanksssss

@AsmrProg 8 ай бұрын

@akz4494 🙏❤️

@jorgebailey2005 6 ай бұрын

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

@AsmrProg 6 ай бұрын

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

@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 Ай бұрын

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

@investierenmitnick 3 ай бұрын

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

@tasshilat-768 Ай бұрын

From where did you get your courses please?

@rijugamerplayzzz1164 4 ай бұрын

I was finding gold but I think I found diamond

@AsmrProg 4 ай бұрын

Thanks so much 🙏

@Mamimuuuuu 2 ай бұрын

I love what you do! keep it up❤

@Say2Cups Ай бұрын

I love these types of videos

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

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

@AsmrProg 7 ай бұрын

🙏❤️

@swiftypopty1102 3 ай бұрын

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

@ador4752 6 ай бұрын

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

@AsmrProg 6 ай бұрын

Thanks so much 🙏❤️

@geancarlomoura 7 ай бұрын

So nice, man, ty for sharing.

@AsmrProg 7 ай бұрын

🙏❤️

@slava_zxz 7 ай бұрын

Thank you for this lesson!!!

@AsmrProg 7 ай бұрын

🙏❤️

@leonalayja5861 2 ай бұрын

Keep doing bro. Im staying tuned

@brayancuevas8410 7 ай бұрын

thank you so much, is so incredible

@AsmrProg 7 ай бұрын

🙏❤️

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

Fantastic!!! 👏👏👏

@AsmrProg 5 ай бұрын

Thanks 🙏❤️

@saitejareddygurujala2534 13 күн бұрын

Nice Transitions mate

@seniorsshow 20 күн бұрын

soo good

@devid528 2 ай бұрын

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

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

thank you this is very step by step guide

@mtnguyen8578 2 ай бұрын

love it. Thank

@AsmrProg 2 ай бұрын

🙏❤️

@maicolaviles714 7 ай бұрын

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

@AsmrProg 7 ай бұрын

Thanks a lot for your support and good energy 🙏

@_danielmiranda7 2 ай бұрын

Amazing ❤

@AsmrProg 2 ай бұрын

🙏❤️

@juanseo7369 Ай бұрын

you're amazing bro

@XxAlphaxX2149 8 ай бұрын

You deserve more subs your underrated

@AsmrProg 8 ай бұрын

🙏❤️

@ErkoGg 2 ай бұрын

Great tutorial

@AsmrProg 2 ай бұрын

Thanks 🙏❤️

@Up_Lift_U_867 Ай бұрын

Great brother ❤❤

@INTERESTING_Plus 8 ай бұрын

Waw, Cool Transition 🔥😍

@AsmrProg 8 ай бұрын

🙏❤️

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

nice bro, good job 👊🏻

@reviewamazon222 3 ай бұрын

Very nice work 😮

@rafianhilmiramdan3339 7 ай бұрын

thank you so much!

@AsmrProg 7 ай бұрын

🙏❤️

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

superb phaa 😍😍😍😍

@imanolestabridis1966 2 ай бұрын

awesome bro your channel is amazing im just learning a lot

@AsmrProg 2 ай бұрын

🙏❤️

@user-yv8rb9gt7f 2 ай бұрын

Excuse me can I use this design? Please

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

Beautiful😊

@AsmrProg 7 ай бұрын

Thanks 🙏

@user-zc2yj9vu2i 22 күн бұрын

i'm stealing this, thank you,.

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

খুবই Fantastic !

@AsmrProg 8 ай бұрын

Thanks 🙏❤️

@majkel2814 2 ай бұрын

Thank you its so helpfull

@AsmrProg 2 ай бұрын

Thanks 🙏❤️

@anhtuanppoi8448 8 ай бұрын

Amazing ❤❤❤

@AsmrProg 8 ай бұрын

Thanks ❤️🙏

@hieumai15073 7 ай бұрын

Thank you for your sharing

@AsmrProg 7 ай бұрын

🙏❤️

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

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

@AsmrProg 4 ай бұрын

Thanks so much, sorry for late response 🙏

@mitikouman7581 7 ай бұрын

Thank you ❤❤

@AsmrProg 7 ай бұрын

🙏❤️

@notrealaz 5 ай бұрын

wow i really want to learn css and HTML by watching these videos

@AsmrProg 5 ай бұрын

🙏❤️

@SyedMuzammilMahasanShahi 6 ай бұрын

Thanks for the share.

@AsmrProg 6 ай бұрын

🙏❤️

@Waladhoolin 5 ай бұрын

Cool!❤

@AsmrProg 5 ай бұрын

Thanks 🙏❤️

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

wow amazing

@AsmrProg 8 ай бұрын

🙏❤️

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

great work keep going

@AsmrProg 3 ай бұрын

Thanks 🙏❤️

@slmadi 4 ай бұрын

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 3 ай бұрын

Thanks so much, keep going on 🙏❤️

@HarryEdwards-zk6ok Ай бұрын

Its Heavy 🥶🥶🥶

@techsewunet 4 ай бұрын

Amazing😍

@AsmrProg 3 ай бұрын

Thanks 🙏❤️

@Murdokkk Ай бұрын

Hope one day im getting coding like this!!

@AsmrProg Ай бұрын

Yes why no!

@abdulshubhan5301 5 ай бұрын

Thanks man

@AsmrProg 5 ай бұрын

🙏❤️

@muhammadkuswari2851 6 ай бұрын

amazing

@AsmrProg 6 ай бұрын

Thanks 🙏

@kevymiguelsilva 2 ай бұрын

I liked ASMR, but I thought the login page was really cool. I know a little HTML, CSS and Javascript (I don't know much). Note: He gained another subscriber (from Brazil).

@whoami_3301 8 ай бұрын

Another amazing project, as great as before

@AsmrProg 8 ай бұрын

Thanks a lot 🙏❤️

@abdullahsevindik3073 8 ай бұрын

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 8 ай бұрын

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