ASMR Programming - Minimal Weather App Ui Design - No Talking
HTML-код
- Опубликовано: 25 июл 2024
- Create a Minimal Weather App Ui Design For a Website using HTML and CSS only!
In this tutorial, I'm going to show you how to use modern HTML, CSS to create a weather app ui design with some animations. We'll be using CSS transitions, CSS Flexbox, float for our design, and CSS transitions and animations for some cool animation effects.
Source Code : github.com/AsmrProg-YT/Weathe...
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
Keyboard Link : en.akkogear.com/product/dracu...
AKKO RUclips : @AkkoOfficial
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:18 - Warming hands
00:23 - Main codes
00:50 - Adding icons
01:12 - Google fonts
01:31 - Html coding
06:38 - Main styles
07:54 - Left info styles
12:12 - Right info styles
13:14 - Days list styles
15:50 - Button styles
16:57 - 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
![Finesse2Tymes - Pretty Ricky [Official Music Video]](http://i.ytimg.com/vi/xIoP_mhYRT0/mqdefault.jpg)
If this video gets more than 800 LIKES, we will add javascript backend to it 😉 Enjoy and LIKE 🙏❤️
Was kinda hoping you add it here but okay - come on, boys. The man has a back-end to add to this, so like and learn.
Please....
😉🙏❤️
Yes ☹️
@@AsmrProg I did my due of liking the video. Can you please add a backend. I really love your videos.
Aww, I wish I could have a keyboard like this! Awesome video, keep it up!
Thanks a lot 🙏❤️
This video is pure gold! 🌟 Your coding skills are impressive! 💯
Thanks a lot 🙏❤️
Right on time. Liked before I watch it.
Thanks a lot 🙏❤️
Keyboards are always THOCKIN I love it!
Thanks 🙏❤️
Great Job !!! ❤🔥💯
Thanks 🙏❤️
thank you so much
🙏❤️
This was awesome! Keep up the good work!!
Thanks a lot 🙏❤️
Beatful
Thanks 🙏❤️
Nice!!
🙏❤️
Your videos are very good, I hope you make more videos
Thanks 🙏❤️
Hello, can you do a quick explanation on what perspective does in css and the higher the pixels in it what does it mean and lower what is means. Much appreciated Thanks!
This is for 3D-Like transform of elements, increase and decrease its values in my source to see result 🙏
video was great btw but if you can also give the search location option on the code then it will be more helpfull
because its only showing the weather of paris😁
Yes, we will add an option that when you click on button you can search a new location 😉
Nicee
🙏❤️
Curious, what made you approach this with float? Newbie here but always a dozen ways to do something so why not flex or grid?
Appreciate the awesome vids ⭐
Hi, we have too many video’s with flex and grid, so i used float in this video, so beginners can know what’s that!
Nice bro🤤
Thanks 🙏❤️
Bro you are making awesome video's please one video make on bootstrap website login form and other
Hi, we will have full playlist of bootstrap soon 😉
Your frontend is crazy ❤, best video
Thanks a lot 🙏❤️
wow amazing ui design . can code a javascript for this using API? you are very good
Hi, yes, read pinned comment 😉
❤❤❤❤ idol
🙏❤️
Could you do a Product landing page like Apple's? I really find your videos therapeutic.
Hi, yes we will have landing pages, thanks 😉🙏❤️
Start a discord community it would be a blast! Am sure it will be a good community! Love the design 🔥🔥
Hi bro, yes we will have a big community of great coders soon 😉
you are amazing, can you please tell me how to put background img to vscode
Hi, with glassit extension 🙏
Hey! How do u update in real time on the browser? Great Video btw!
Hi, with live server extension 🙏
What is called the extension that makes a clean line when u want to write? btw Good video.
Hi bro, it isn’t extension, it’s shortcut!
Bro , i wanna create a website with my own domain, for that , i have created script and styling for that website, and then how to get domain and hosting . For create and publish the website I have to give node js package?
Hi, buy a domain from hosting sites and upload your files on that host!
Hey! big fan of you, how long have you've been a programmer? Cheers!
Thanks a lot, ~7 8 years!
what recording software are you using i tried to use OBS and Camtasia but they are very laggy when I type in vs code how does your vs code cursor is smooth when typing (not talking about the smooth cursor option in vs code), and by the way great video❤❤
Hi, it’s Zd soft screen recorder 😉
@@AsmrProg thank tou very much, love you brother ❤️❤️
🙏❤️
Hi I love the videos. How do you get the .container text italicized? When i type.container it doesnt give me the shortcut and it messes up. I'm new btw!
Hi, please check my github, there is a repository about all of my vscode settings 🙏
I'm not the most experienced with vscode. Are you aware with which setting in particuluar it consists of? thanks@@AsmrProg
@gerar1o_ emmet extension 🙏
the background for left info using URL didn't work with me what am I supposed to do?
Hi, did you checked my source code?!
Let's get this video to more than 800 likes so we can have javascript backend too!
Yes 😁❤️
are we getting the backend too? :D @@AsmrProg
Yes! We will have it soon 😉
Hello Your work is great, I congratulate you. I had a question. If we want to turn this into a mobile or Windows application after doing this, what should we do? Is this work possible?
Hi, thanks a lot, you need to do it in mobile coding languages, or you can use flutter or react native 🙏
@@AsmrProg So, let me see if I understood correctly or not? That is, I can create a mobile application with attractive UIs using JavaScript codes and using the React Native framework, right?
@hassana6983 yes! But you need to learn react native!
How are your animations that great? Like how does your cursor blink like that and all?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
I wish you can add a copy of your code on both HTML and CSS to the video description please. or is there a place where you actually post it and we can check it out please.
Hi, yes i will do it, my github have some problem’s I’m working to fix it, soon will add it 🙏❤️
what theme do u use? with theme i mean synthwave etc
Hi, shades of purple 🙏
How do you change the mouse pointer?
Hi, it’s screen recorder effects!
خیلی حال دادی رفیق، دمت گرم.
Qalbi dash 🙏❤️
What switches does your keyboard have?
Hi, white switches 🙏
hello, what extension do you use?
Hi, for what?!
Please tell how to make a smooth change of elements after applying css styles. After you have changed the css styles and saved the file, the new styles smoothly applied to the elements.
As here: 11:33. I often notice this feature from RUclipsrs
I don't see this in your next video "parallax slider"
Hi, it’s because of transition style that we assign to an element 😉
@@AsmrProg It turns out it was so simple, thanks
Thanks 🙏❤️
how can i improve myself in js.
Experience!
What vs code theme do you use?
Hi, in this video shades of purple 🙏
i think ur keyboard is beautiful and also i think u want to share it with mi :D
the video is to good+++++
Hi, thanks, Keyboard link on video description 🙏❤️
Please tell me how you make that loading animation on refresh without any keyframes or JS coding ... 16:30
Hi, when you add css transition, it showing that 🙏
@@AsmrProg I do the same thing but it doesnt do that
If you do all of code correctly your result and mine will be same!
@@AsmrProg my website and your website look the exact same , but the animation on refresh doesnt. the code is the same word for word
Maybe you should use vim, that will give a better asmr feel
Thanks, but i think vim don’t have extensions that we need, maybe i will use vscode on mac to feel better 🙏
You are the best . . . ( Salam khobe umm ya soaal dashtam , toy VCcod shator background gozashtii ? manzorm ro fahmediiii
Fadaat, ba glassit, baraye didane hame extension ham githubam sar bezan 🙏
@@AsmrProg are daramesh guthubet ro en ya extension hastash are !!! asmash sheya ?!
Sharmande nfhmidm!!
@@AsmrProg moshkalii neat !! goftam ka githubat ro daram vali dar rabte ba background cheze nagofti asm extionshen che hast ?!
Glassit hast oonja, check kon
hi prog! which keyboard do you use?
Hi, it's Akko keyboard, full info in video description 🙏
What theme do you use
Hi, shades of purple 🙏
Can you create 1 launcher for have apps chrome for install etc and uploading games?
Hi, we can do it but it takes a lot of time!!!
@@AsmrProg a ok i understand thank you for reply my question
🙏❤️
I'm new to coding, but what program do you use to code?
the IDE is vscode
Hi, visual studio code 🙏
Thanks for your answer 🙏❤️
@@AsmrProg thank you!!
🙏❤️
why is my right info dont float?
Hi, bug! Did you check source? Sorry for late response 🙏
Bro please tell your vs code theme name ?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
hi bro, what theme are you using?
Hi, shades of purple in this video 🙏
@@AsmrProgtnx bro😊
🙏❤️
May I know how many year you’ve been coding
Hi, ~7 years on different languages 🙏
Please give price of the keyboard
Hi bro, i will send you amazon link 🙏
how to add the cap??
Sorry?! What cap!
@@AsmrProg this °
@Fortnite-wq4gs get it from my source code 🙏
vs code theme?
Hi, in this video Shades of Purple
I want to get a coding career but i dont know where to start, any tips?
Hi, which language?!
@@AsmrProg I'm thinking about Javascript
You need start coding mini projects and have experience 🙏
I wanna become like u
😁❤️
Hey bro can I make an app like WhatsApp with the help of python.
Hi bro, here we have web coding! i didn't worked python as expert 🙏
@@AsmrProg ok thanks bro what coding language you're using for making website or app making
For websites html css and js, apps flutter 🙏
How did you do this style in VS Code?))
And what does this the keyboard?)
Hi, for styles please check my github, there is a repository about all of my vscode settings 🙏
Check description full keyboard info available there 🙏
@@AsmrProgThank you, I find it!
But I don’t understand how you made such a cruiser. You have it smooth and different color
Source code?
Bro working on it, my github have some prublems, today i will upload it 🙏❤️
woo! You programmed a better mic!
Thanks 🙏❤️
Amazing UI, but I thought you'll connect with an API
Please check pinned comment 🙏
thanks bro can you give me the ehhh it files like pictures and files yes
🙂😜🤪😥
Hi, sorry but didn’t understand!!
😂😂😂 just a question.. did you built it from scratch or taken inspiration from somewhere? Be honest
Hi, Dribble or Figma design!