ASMR Programming - Animated Login Page - No Talking

Подписаться 307 тыс.

Просмотров 1,2 млн

50% 1

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 RU-vid : @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

Опубликовано:

14 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1 тыс.

@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

@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 🙏❤️

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

@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 5 месяцев назад

It’s great, keep it up bro 😉🙏

@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 5 месяцев назад

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 🙏❤️

@joseluissanchez7171 2 месяца назад

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

@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 4 месяца назад

how much u learnt so far?

@AsmrProg 4 месяца назад

Me?!

@aryankaushik9373 4 месяца назад

@@AsmrProg yea

@AsmrProg 4 месяца назад

Sorry?!

@sirvivor-tu2uo 6 месяцев назад

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

@AsmrProg 6 месяцев назад

🙏❤️

@forneus7874 2 месяца назад

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

@proghub1 7 месяцев назад

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

@AsmrProg 7 месяцев назад

Thanks a lot ❤️❤️🙏🙏

@Zeuhib 5 месяцев назад

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

@AsmrProg 5 месяцев назад

🙏❤️

@p0dc4st.hyp3 7 месяцев назад

Your attention to detail in this video is impressive. 👍

@AsmrProg 7 месяцев назад

🙏❤️

@kababurakcan 6 месяцев назад

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

@AsmrProg 6 месяцев назад

Thanks a lot 🙏❤️

@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

@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 12 дней назад

Well, have you already gotten a job?

@demo1905 7 месяцев назад

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

@AsmrProg 7 месяцев назад

Thanks 🙏❤️

@user-ev6zu8ke9o 6 дней назад

Bro, you are MAGICIAN!

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

@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 🙏❤️

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

@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 14 дней назад

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

@user-ub3dr9gm4c 2 месяца назад

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

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

@cardoso0_ 26 дней назад

It's a beautiful transition!

@nano_0x 8 дней назад

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

@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

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

@ZeroMOTORSPORTS 2 месяца назад

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

@investierenmitnick 2 месяца назад

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

@tasshilat-768 24 дня назад

From where did you get your courses please?

@hoat7138 6 месяцев назад

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

@AsmrProg 6 месяцев назад

🙏❤️

@mrrr111s1ork 7 месяцев назад

Bro, you're perfect, just know this!

@AsmrProg 7 месяцев назад

Thanks 🙏❤️

@sunhsiang6644 25 дней назад

The best css tutorial ❤

@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 😉❤️

@user-xy2qo3wt5k 7 месяцев назад

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

@AsmrProg 7 месяцев назад

Thanks 🙏❤️

@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 😉🙏❤️

@Mostafa-jh2ij 6 дней назад

Amazing stuff!

@slava_zxz 6 месяцев назад

Thank you for this lesson!!!

@AsmrProg 6 месяцев назад

🙏❤️

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

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

@leonalayja5861 2 месяца назад

Keep doing bro. Im staying tuned

@Say2Cups 27 дней назад

I love these types of videos

@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 🙏❤️

@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 🙏❤️

@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 🙏❤️

@krewol29 28 дней назад

thanks man!, i luv ur content

@hstecnologia 7 месяцев назад

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

@AsmrProg 7 месяцев назад

Thanks 🙏❤️

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

@everything7057 3 месяца назад

Very clean work!

@Mamimuuuuu 2 месяца назад

I love what you do! keep it up❤

@rijugamerplayzzz1164 3 месяца назад

I was finding gold but I think I found diamond

@AsmrProg 3 месяца назад

Thanks so much 🙏

@juanseo7369 12 дней назад

you're amazing bro

@devid528 Месяц назад

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

@Carlos-do2vh 6 месяцев назад

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

@AsmrProg 6 месяцев назад

🙏❤️

@swiftypopty1102 2 месяца назад

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

@abdullahsevindik3073 7 месяцев назад

I came across your videos while browsing RU-vid 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 🙏❤️

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

@brayancuevas8410 6 месяцев назад

thank you so much, is so incredible

@AsmrProg 6 месяцев назад

🙏❤️

@geancarlomoura 6 месяцев назад

So nice, man, ty for sharing.

@AsmrProg 6 месяцев назад

🙏❤️

@Up_Lift_U_867 14 дней назад

Great brother ❤❤

@imlim.a5295 2 месяца назад

nice bro, good job 👊🏻

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

@XxAlphaxX2149 7 месяцев назад

You deserve more subs your underrated

@AsmrProg 7 месяцев назад

🙏❤️

@julios-ia4511 4 месяца назад

Fantastic!!! 👏👏👏

@AsmrProg 4 месяца назад

Thanks 🙏❤️

@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 🙏❤️

@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

@user-oh4nr5bw7l 4 месяца назад

thank you this is very step by step guide

@INTERESTING_Plus 7 месяцев назад

Waw, Cool Transition 🔥😍

@AsmrProg 7 месяцев назад

🙏❤️

@Murdokkk 9 дней назад

Hope one day im getting coding like this!!

@AsmrProg 8 дней назад

Yes why no!

@_danielmiranda7 Месяц назад

Amazing ❤

@AsmrProg Месяц назад

🙏❤️

@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 🙏❤️

@ErkoGg Месяц назад

Great tutorial

@AsmrProg Месяц назад

Thanks 🙏❤️

@diowinardmedrano398 14 дней назад

Hey man can I know what keyboard you are using? I love that sound. Thank you so much

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

@matthewaltenore628 3 месяца назад

I took AP Computer Science last year, and with most of that basic knowledge, what he did here really made some sense. Could I recreate it? Absolutely not. Maybe some of the HTML code, but thats about it.😭 However, this has definitely inspired me to keep going, knowing that it may be a process, but its LITERALLY possible for anyone to learn. 😂

@AsmrProg 2 месяца назад

Hi, sorry but I don’t have academic knowledge because I learned coding with self-study, Sorry for late response 🙏

@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 😉❤️

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

@user-xy2qo3wt5k 7 месяцев назад

Yo bro How did u make ur background of the code so cool. Can u tell me the extensions that u used.

@AsmrProg 7 месяцев назад

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

@user-xy2qo3wt5k 7 месяцев назад

ok BRO!@@AsmrProg

@AsmrProg 7 месяцев назад

@user-xy2qo3wt5k 🙏❤️

@monteiroluis1 7 месяцев назад

How do you put that green circle on the mouse pointer and that red effect when you move the cursor?

@AsmrProg 7 месяцев назад

Hi, it’s screen recorder effects!

@kevymiguelsilva Месяц назад

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

@ChristianMarzzelCazar 5 месяцев назад

Watching this video makes me seriously consider Visual for my next projects...

@AsmrProg 5 месяцев назад

😁❤️

@notrealaz 4 месяца назад

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

@AsmrProg 4 месяца назад

🙏❤️

@tsait9538 Месяц назад

I'm curious why the vertical bar moves when you type. what is that??? looks so good

@gurvinder1613 5 месяцев назад

Hi bro nice video and great login page btw which extension are you using which is giving you those suggestions

@AsmrProg 5 месяцев назад

Hi, thanks, it’s code intelligence 🙏

@user-misite 7 месяцев назад

It's so complicated to write this UI, damn. so many unseen CSS properties !

@AsmrProg 7 месяцев назад

!!!!

@ahmadfakhermohammedhussein8553 5 месяцев назад

Great work! could you please tell me the extensions you installed in vs code for html

@AsmrProg 5 месяцев назад

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

@ZAHIALA3B-uk4ub 2 месяца назад

great work keep going

@AsmrProg 2 месяца назад

Thanks 🙏❤️

@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 🙏❤️

@mahdmustafa9258 7 месяцев назад

What a great video.❤

@AsmrProg 7 месяцев назад

Thanks 🙏❤️

@mahdmustafa9258 7 месяцев назад

@@AsmrProg no problem ❤

@AsmrProg 7 месяцев назад

@mahdmustafa9258 🙏❤️

@mahdmustafa9258 7 месяцев назад

@@AsmrProg ❤❤❤

@AsmrProg 7 месяцев назад

@mahdmustafa9258 🙏❤️

@Josh_DoesStuff 5 месяцев назад

What extension are you using for the hints? The one that gives you hints or such for example "property value expected" "Don't use empty rule set" Etc.

@AsmrProg 5 месяцев назад

Hi, it’s error lens extension, also you can check my github, there is a repository about all of my vscode settings 🙏

@Josh_DoesStuff 5 месяцев назад

@@AsmrProg thank you so much

@AsmrProg 5 месяцев назад

@Josh_DoesStuff 🙏❤️