ASMR Programming - Animated Login Page - No Talking
HTML-код
- Опубликовано: 16 май 2024
- 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 RUclips : @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
I’m working on 3D website tutorials, Please LIKE video’s to support my channel 🙏❤️
🔥😍😍😍🤩✅
241st like
Yo bro please tell me how you made your own website for these projects
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
Qual tema é este?
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
It’s web coding, why you left it?!
@@AsmrProg holy shit I meant “learning”! lol 😂. What a bad typo on my end
Oh ok bro 😂🙏 keep it up 😉
@@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 😅
@@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
I just finished an intense coding bootcamp and this is the content I need to keep me learning at a nicer pace, thanks!
Happy to help!
Thank you for always making great designs. Designing is difficult for me, but I’m getting a lot of ideas. 👍👍
Like to support 🙏❤️
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. 🤘🏻
Thanks so much bro 🙏❤️
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)))
😁❤️
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!
It’s great, keep it up bro 😉🙏
Excellent design, thank you for teaching us how to make it with only css without any css library like bootstrap.
I just watched ASMR videos of food. This is the first time I've seen ASMR programming. Unique thinking. Keep it up.
Thanks so much 🙏❤️
Your attention to detail in this video is impressive. 👍
🙏❤️
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 :)
Thanks so much for your such great words 🙏❤️
how much u learnt so far?
Me?!
@@AsmrProg yea
Sorry?!
Great !! Ive been looking for channels like this to really up my web design skills
🙏❤️
Hi bro, awesome video, love the coding videos, it's so inspiring!
Thanks a lot ❤️❤️🙏🙏
Thanks for your effort. I hope the channels of software developers like us grow rapidly.
Thanks a lot 🙏❤️
Thanks a lot for such teaching such smooth animation. I could have never guessed I can animate login page!
The keyboard looks and sounds awesome 🔥plus your code is also just 😲
Thanks 🙏❤️
Your so amazing man you are teaching absolute beginners like me to make professional scripts thank you so much👏👏
🙏❤️
You make coding look so easy! Keep up the good work!
Thanks a lot bro 🙏❤️
bcs it is
@@drakulea4301really?
Just my second day of learning coding i understand a few things you doing
Thanks for the opportunity
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
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!
Also, I feel strangely confident I can tackle micro projects of my own!
Don’t worry, you will learn all with experience, it just needs time 😉
Just time, do some projects, also check free or paid courses you will succeed 🙏
Well, have you already gotten a job?
That's great, I found a new source of inspiration. I follow you everywhere now.
Thanks a lot, sorry for late reply 🙏
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.
Oh really great, keep going in you will succeed 🙏
The best css tutorial ❤
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
Thanks 🙏❤️
bro u r da best bro. KEEP UP WITH THE GOOD WORK!
Thanks 🙏❤️
It's a beautiful transition!
Bro, you are MAGICIAN!
Bro, you're perfect, just know this!
Thanks 🙏❤️
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!
Hi, bro video is edited and some sections removed 😉🙏❤️
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.
@yunsha9986 hi, yes video is edited, because I don’t want we waste time with searching in video and checking sizes on it!
yeah he has the code pre-written somewhere else@@yunsha9986
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.
No, in the comments he states it's edited n it actually took him 2 hours
all ur videos are very aesthetic and addictive...
Thanks a lot 🙏
Bro..may i know: from how many years have you been programming🙂
@user-pv9jv8cp5r ~8!
bro r u a MERNstack dev??🤔
@user-pv9jv8cp5r maybe 🙄
Simple and beautiful, I will follow you to practice my font-end skill 😍😍
🙏❤️
I liked this work very much, and I was smiling throughout the clip 😅
This is not just an asmr, i can learn html alot in the video!
(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!
Jk, I just saw your VS Code settings repository on your GitHub 😁 This is so helpful for us, thank you!!!!!!
Hi, please check my github, there is a repository about all of my vscode settings and extensions 😉🙏❤️
What theme/font/extension are you using to make your VS code look so nice?
Hi, please check my GitHub, there is a repository about all of my vscode settings, Sorry for late response 🙏
thanks man!, i luv ur content
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. 🙏
Thanks, So now it’s 2024, start it 😉❤️
Likeeee você merece um bilhão de likes parabéns
Thanks 🙏❤️
Amazing! Could you show your VS Code settings, please?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
I’m now 1 month into web development and I’m pretty proud because I understood everything
From where did you get your courses please?
I love what you do! keep it up❤
How do I make my VsCode transparent like yours? Great video!!
Use the extension "glass-it" you can control the opacity with ctrl-alt z and c
Hi, with glassit extension, also you can check my github, there is a repository about all of my vscode settings 🙏
Thanks for answering 🙏❤️
@@AsmrProg thanksssss
@akz4494 🙏❤️
Hey man! could you tell me the extensions you use on vscode and explain what they do briefly?
Hi, please check my GitHub, there is a repository about all of my vscode settings 🙏
@@AsmrProg ok thanks!
@Adeeb-YEC 🙏❤️
You deserve more subs your underrated
🙏❤️
this is better than teaching step by step if you have a prior knowledge especially in java
thanks hope you build more website
Thanks so much 🙏❤️
I was finding gold but I think I found diamond
Thanks so much 🙏
Hey dude, nice video and nice work!
Would you mind to share the extensions you are using ?
Regards!
Hi, thanks, please check my GitHub, there is a repository about all of my vscode settings 🙏
thank you so much, is so incredible
🙏❤️
Amazing stuff!
with all due respect, "Html coding" hurts my brain.
🙏❤️
😂Check out C++ & Rust, your brain could explode!
you're amazing bro
Thank you for this lesson!!!
🙏❤️
I came across your videos while browsing RUclips 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 :)
Thanks a lot, start with youtube tutorials, im working to create zero to hero courses too 🙏❤️
thank you this is very step by step guide
Very clean work!
I love these types of videos
Ey friend, thanks for shared your knowledge; while I learning I relax
Thanks a lot for your support and good energy 🙏
I really enjoyed your video and I didn't even skip a second
Keep doing bro. Im staying tuned
So nice, man, ty for sharing.
🙏❤️
Waw, Cool Transition 🔥😍
🙏❤️
Amazing ❤
🙏❤️
awesome bro your channel is amazing im just learning a lot
🙏❤️
Excuse me can I use this design? Please
Love it again! What extension do you use for the mouse cursor to go in/out from the middle like that?
it's the screen recorder effect
Hi, its Screen recording effects!
Thanks for answering 🙏
@@AsmrProg oh ok thank you!
@bnizable 🙏❤️
Thank you its so helpfull
Thanks 🙏❤️
thank you so much!
🙏❤️
Fantastic!!! 👏👏👏
Thanks 🙏❤️
love it. Thank
🙏❤️
Great tutorial
Thanks 🙏❤️
Yo, love the content! Keep it up legend!
Do you have any place for support questions or a community communication source like discord?
Thanks, No but i will create soon 😉
You are a proof that the utility-class littering is pure ignorance. Thank you for being professional.
🙏❤️
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♥♥♥♥♥♥♥♥
Thanks so much, keep going on 🙏❤️
nice bro, good job 👊🏻
Thank you ❤❤
🙏❤️
Great brother ❤❤
i'm stealing this, thank you,.
Another amazing project, as great as before
Thanks a lot 🙏❤️
What a great video.❤
Thanks 🙏❤️
@@AsmrProg no problem ❤
@mahdmustafa9258 🙏❤️
@@AsmrProg ❤❤❤
@mahdmustafa9258 🙏❤️
Why use "Span" even though it doesn't offer any semantic meaning on its own?
Can you explain?
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. 😂
Hi, sorry but I don’t have academic knowledge because I learned coding with self-study, Sorry for late response 🙏
Amazing ❤❤❤
Thanks ❤️🙏
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).
How do you put that green circle on the mouse pointer and that red effect when you move the cursor?
Hi, it’s screen recorder effects!
wow i really want to learn css and HTML by watching these videos
🙏❤️
খুবই Fantastic !
Thanks 🙏❤️
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.
Hi, yes but with that we will have bulk codes in js! With React it’s easy but soon we will have it 🙏
Hope one day im getting coding like this!!
Yes why no!
It's so complicated to write this UI, damn. so many unseen CSS properties !
!!!!
Watching this video makes me seriously consider Visual for my next projects...
😁❤️
Thank you for your sharing
🙏❤️
Great affect , and work would be nice to see how you solve the mobile view version with this effect
Hi, maybe if we receive to many requests, we will have it 😉
thank you
🙏❤️
Hello im your new subscriber your content is really helpful and thans for it
Thanks so much, sorry for late response 🙏
Lit 🔥🔥
🙏❤️
Yo bro How did u make ur background of the code so cool. Can u tell me the extensions that u used.
Hi, please check my github, there is a repository about all of my vscode settings 🙏
ok BRO!@@AsmrProg
@user-xy2qo3wt5k 🙏❤️
Beautiful😊
Thanks 🙏
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.
Hi, it’s error lens extension, also you can check my github, there is a repository about all of my vscode settings 🙏
@@AsmrProg thank you so much
@Josh_DoesStuff 🙏❤️
wow 😶👏