ASMR Programming - Modern Login Page Ui Design - No Talking
HTML-код
- Опубликовано: 25 июл 2024
- Hello Everyone ✨ Welcome to AsmrProg web design coding bootcamp😅 in this web coding bootcamp i started to create useful video's about responsive ui design from beginner to advanced 😁
source of all projects also will upload in AsmrProg github page :
github.com/AsmrProg-YT
with this coding bootcamp you will learn how to be an ui interface designer✅
Follow my web design coding bootcamp playlist i will upload video's of web desing bootcamp in it for easier access and video's in this playlist sorted by beginner to advanced 😉
Web Design Coding Bootcamp Playlist : bit.ly/3hX95v0
Part one video : • ASMR Programming - Mod...
Every week i will update this playlist ✅
About this video :
In this video, i designed a login page using only HTML and CSS 💎 This login page is fully responsive for mobile devices 📱 You can use this login form for your website projects.
it's modern login page #1 from my web coding bootcamp ⚙️
in the future we will have other parts of login pages 😉
Github Source Code : github.com/AsmrProg-YT/css-lo...
Background Generator Site : app.haikei.app/
Video Contents :
00:00 - Intro (Login #1)
00:23 - Main html codes
00:51 - Generate background
01:23 - Add google fonts
01:54 - Html coding
02:50 - Main style codes
04:05 - Card styles
05:27 - Form styles
09:15 - Animation codes
09:39 - Responsive codes
10:07 - Final result
Asmr Game Coding Playlist : bit.ly/3Ojajgm
Other Video's :
Coding IOS (Iphone) Calendar : • ASMR Programming - Cod...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Subscribe → bit.ly/3Lf1K4A ✅
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
Check Web desing coding bootcamp playlist for other parts 😉 we update playlist every week 🙏❤️
Love You Bro. Can You Make PHP ?
Hi ane, yes soon we will start a backend course to create custom cms systems 😉
Extremely soothing and helpful video. Thank you
Thanks bro 🙏❤️
Neat video! Always inspiring my next content. Much love!
Thanks a lot bro, waiting for your channel growth 🙏❤️
Beautiful! Thanks!!
🙏❤️
Simples e muito bonito!👏
Vou tentar fazer.
Thanks 🙏❤️
thank you very much ASMRPROG
😀😀😀
🙏❤️
Thank you so much bro for the great content
Thanks bro 🙏❤️
Very helpful video tnx 😊😊
Thanks a lot bro 🙏❤️
thank you so much, your video is amazing, regards
Thanks 🙏❤️
Im impressed that you reply to comments.
😉🙏❤️
this video is very great
thanks bro
Thanks for good comment and energy 🙏❤️
I start to understand html and css better after my first project with python gui framework
Yes, keep going on 😉🙏
can you make video on how to link login page to main website
ngl u need to be my school teacher cuz my code teacher in school teaches us basic things and like he uses chatgpt to show us the code lol but you ur amazing like the way u type fast and make these kind of vids are cool i tried to make a login page before watching ur yt and it was horrible but after watching ur yt i started to learn faster and do cool stuffs thank you ur my hero i love ur content keep up the work lol
We will have courses soon 😉❤️
Great video mate!
In the intro, when you resized the window, you were able to shrink the login card even further. But in the end, the login-card seems to hold its width even if I tried to resize it. How to resize it narrower?
Hi bro, I’m resize with inspect element responsive checker tool
@@AsmrProg ahh. I see. Thanks for responding. Love your series. Keep it up.
Thx a lit bro, check my channel community to vote topics please 😉 it will help me to create contents that more subscribers like it 🙏❤️
great work mate!
btw how did you got mouse cursor?
Hi thanks, mouse cursor is screen recorder effects 🙏❤️
@@AsmrProg thanks!!
❤️🙏
Bruh, you replied in 2 mins lol nice
Yes when I receive notification I answer 🙏❤️
awesome
🙏❤️
Cool dude! But have you ever considered coding with a framework such as Vue,im interested in that😊
Yes, we will have playlist of them 😉
Wow. This video is awesome. I would love to code as good as you. Where did you learn coding from? How long did it take you to get this good? Do you think i can get this good in 6 months?
Thx 🙏 I learned from courses in my country and searches, if coding is your favorite yes you can grow fast 😉
I think you can create this page if you learn coding for maybe a month or less. I have been learning HTML and CSS for around a week now, and I can do 50% of what has been done in this video. Hope this helped.
Yes bro, it’s just need experience 🙏
How long would it take YOU to code a website with like 6 pages and good CSS and animation about a Hookah Lounge?
With bootstrap you can create it in just a week
What is this VS Code theme and font style?
Your video is very interesting If you can request I will request to make website with amazing moving animations but just the theme you chose, I'm also confused about the problem about the theme😅
edit: if i can request sorry i typo
Hi, thanks 🙏 What theme! vscode or login background?!
No problem 🙏😉
Bro, i just started the web development, can you please tell how much of html Css should i know to do all these designs, and can you tell me the resourse from where i can learn it
You need check courses in your country and google + youtube search to learn web development and you need know css properties to create this designs!
I fucking love your vids bro
Thanks bro 🙏😂
Thanks bro, please share Source Code as well.
Hi jodd, code link in description available in github 🙏❤️
Which theme are you using in vscode??
Hi bro, reui 2
what`s the color theme for vs code ?
Hi, it’s ReUI deep dark 🙏❤️
hi, can you tell me how to make the background animation move in the same direction with the repeating image?
Hi, What repeating image?!
@@AsmrProg background image, for example it rotates endlessly only to the left
So what you want, you want it go back or what?!
@@AsmrProg only left, and when image ends, it repeating
@SunaruDed .image-container {
width: 300px; /* Adjust to your image width */
overflow: hidden;
}
img {
animation: slideLeft 5s linear infinite;
}
@keyframes slideLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%); /* Adjust to the width of your image */
}
}
Great!
Now how to make it work :O
Thanks 🙏 we will have backend playlist in channel soon, in that video’s i will show you how to make it work 😉🙏
how do i add the background?
You can generate it from where i show in video but if you want this background that i generated and used check my github, link in description 🙏❤️
my background isn't loading on my website how to fix it?
Hi, please check my source code, your code have bug!
Can you tell me your keyboard brand and model? Thank you so much
Hi, in this video it’s baytion bk002 🙏
Thank you for replying me, I really like your video and I learned a lot@@AsmrProg 🥰🥰
@jwchen2707 thanks, keep going on 😉🙏❤️
我的media變大 ，表單的寬度也會跟著變大
Because your responsive codes have bug!
app name please
Hi, visual studio code
Do you know Javascript?
Yes!