ASMR Programming - Responsive Dashboard Design - No Talking
HTML-код
- Опубликовано: 13 июн 2024
- Create a Responsive Dashboard For an Ecommerce Website 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 completely responsive dashboard with mobile menu functionality. We'll be using CSS Grid, CSS Flexbox, Media queries for our responsive design, and CSS transitions for some cool animation effects. This dashboard design is responsive in all devices!
Source Code : github.com/AsmrProg-YT/Dashbo...
Keyboard Info : Epomaker TH80 X
Keyboard Link :epomaker.com/products/epomake...
Epomaker Instagram : / epomakerkeyboard
Email : support@epomaker.com
Discord : / discord
Facebook : / epomaker
RUclips : @Epomaker
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
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:00 - Intro
00:01:07 - Warming hands
00:01:15 - Main codes
00:01:48 - Adding Icons and Fonts
00:02:42 - Left section html
00:07:02 - Main styles
00:07:57 - Left section styles
00:10:03 - Sidebar styles
00:16:25 - Analytics html
00:20:58 - Main section styles
00:21:34 - Header styles
00:22:59 - Separator styles
00:25:08 - Analytics styles
00:32:17 - Planning html
00:36:24 - Date styles
00:37:25 - Planning styles
00:42:26 - Top right html
00:43:43 - Top right styles
00:47:14 - Right section html
00:49:37 - Right section styles
00:55:22 - 1200px responsive
00:57:15 - 992px responsive
01:02:40 - Mobile menu
01:04:33 - Sidebar items
01:06:19 - 768px responsive
01:07:46 - 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
Hi, we have a new Responsive Dashboard Design after a while, Do you want we have a playlist for it? Write here in comments 😉
Please Like video to support my channel 🙏❤️
yes, in next part you can finish dashboard design in part 2 part 3 and next
Thank you so much you inspired me to do hard projects and I was wondering what extensions do you use
Can you make it responsive..?
Are you Iranian
@mrizkymaulana321 yes and i think it will be better!
keep going. nice work
You are doing good man keep going ❤
Thanks 🙏❤️
Hi ! Nice vid like everytime ! Could you do a video on what extensions you use to make your VS Code like nicer plz ?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
baba das khosh ajab chizi zadi damet garm kheili keyf kardam 👏👏👏
Hi, Qalb maei, video akhar ro bbin hal kon 😉 Please write in English 🙏❤️
Well done
Got a new subscriber
Thanks 🙏
Thanks bro love from india ❤❤❤❤
🙏❤️
Cool bro💥
🙏❤️
Hi Awesome work I loved it ,
can I ask what the best way to build a frontend of the website or dashboard ?
I mean we can build it using bootstrap or tailwind, and we can as well use HTML and CSS directly same your work. But the css frameworks is not better and faster ?
If you use tailwind for example and configure it correctly then it automatically makes your css styles compatible on major browsers. Using pure css you need to remember all this yourself and not only lose time but also risk having design incompatibility.
So in some way frameworks can be better and even with all the additional stylings of a framework you won't notice any performance impact because css is so light. I love using plain CSS though and I believe that it helps building a strong knowledge that can be useful if you later on decide to work with frameworks
Hi, thanks, yes! The frameworks are better but currently in channel we working on pure html css designs and also js challenges, in the future we will go on backend, frameworks and … 🙏😉
Thanks so much for your complete answer 🙏❤️
Beautifull
Thanks so much 🙏❤️
Wow, you know all the HEX colors, fonts, and everything else by heart.
No, i have some of them on paper, also videos are edited 🙏
Oh. Great job done! You're awesome.@@AsmrProg
@user-tj2nd2el8c 🙏❤️
Hi great Video!! I have a question, it is possible to click in a button and not let the page reloads? Can you make a video about it? or maybe you already have one idk.. thanks!
Hi, yes, with AJAX you can do it 😉 soon we will have video about it 🙏
would be nice if you make a vid about elements inside the dashboard, like buttons and textfields and other usefull stuffs for dashboard...
Hi, you say from 0? Showing how elements work?!
@@AsmrProg yes it could be from 0 or just some responsive elements that match dashboard's design, or somethin like that...
@oneapp777 no, not in channel, we will have zero to hero video’s in courses soon 😉
@@AsmrProg ok, sounds good
cool..
i really loved it ..
i spend 15minutes for make login button and decide ask to my asistance (chatgpt)
wolaahhh..
Thanks 🙏❤️
Hi, which app did you use for the mouse click effect?
Hi, it’s screen recorder effects!
@@AsmrProg Hey pls give me link to program, cus i just cant find it
rate 10/10 like ever❤❤
Thanks so much 🙏
i am your big fan
Thanks 🙏❤️
How do I start learning HTML CSS without feedback on the code? I have 3 years of IT Vocational training on the job no UNI in Germany. I have expert figma designs from frontendmetor to practice, but I don't know how to prepare to implement this.
Hi, you need to start its basics with courses!
hi, how can the size of your window appear at 55:25 ? I would like to know !
Hi, inspect element and minimize it 😉
How to use Google Fonts to Web- Developement?
Hi, I am from Bolivia thanks
Nice 🙏❤️
Could you please mention what you are using in this project, such as Bootstrap or Tailwind? It will make it easier to understand.
hes using html css and js no bootstrap or tailwind
Hi, nothing! Pure html css!
Thanks for your answer 🙏
@@AsmrProg sry i mean to say pls include that in the video title or at very top in Description.
@snapesrds5766 oh ok, all codes are with pure css, if i use any framework i will write it!
Can you link the overhead camera arm that you are using?
Hi, sorry but it’s just available in our country the brand that im using, search for desk mobile holders 🙏
Can you tell me which themes are you using?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
By watching your videos, I get more energy to continue programming, why don't you create a programming course on RUclips?
Thanks so much, soon we will have courses 😉
太厉害了
Sorry?!
@@AsmrProg 太厉害了 is means awesome. Thank you for the free course; I learned a lot.
Sir please do an program auto update in the program we should not mention no of course completed in coding
Hi sorry but I didn’t understand what you said!
Hi, how to custome cursor like that?
Hi, it’s screen recorder effects!
Please create admin template like this one using css framework
We will have this type of templates with React and Nextjs or Nodejs backend soon 😉
Where i can get logo. 😢 please mention about in comment section
Hi, please check my github, project source code available there 🙏
Hey, what keyboard is that?
Hi, full info on description, sorry for late response 🙏
bro my width for the logo and pic not working
please help!!
Hi, did you check my source code?! sorry for late response 🙏
I like your mouse effect. Name please 😂
Hi, it’s screen recorder effects! Why laughing!
Hi! What font is used in the IDE?
Hi, Cascadia Code 🙏
@@AsmrProg thanks
@onesecond2900 🙏❤️
I tried the project on an old webkit browser and everything broke) it does not support flex gap ((
Why you didn’t update it!
@@AsmrProg Because this browser is embedded in another application. ((
Oh, so they need update it!
Can you make a working login/sign up page please
Hi, yes, but after backend tutorials 🙏
Yes but when you start backend videos bro
Currently we can’t, because I receive too many messages that they want React tutorials 🤦♂️ i will vote for it 😉
@@AsmrProg ok bro can you make auto slider video please
@sankarreddy9424 what means auto slider! I think we have it in videos!
@@AsmrProg auto bro it will auto slide image or video after 5 seconds or 3 seconds
@sankarreddy9424 yes, bootstrap slider have auto slide function 😉
کاردرست
🙏❤️
Brother can u give me the codes in the discretion
Hi, sorry what you mean!?
hello . i'm a new subcriber in your chanel .. Can you make full website has navbar has sub item .
Hi, Mega Menu?
@@AsmrProg yes..that right!
Bro you know PHP?
Yes!
@@AsmrProgOkay, thanks for your reply
@ace-veen35 🙏❤️
Programming language Payment Gateway Roadmap 2024
Answered in your another comment 🙏❤️
What you mean?
Yes!
Hi again ! , let's create SOCCER - manager online game
🤦♂️🤦♂️
@@AsmrProg hi!, i copied your script but no appear idently :( from github
@liviualex sorry!!! With what browser you are checking it?!
Full Stack Payment Gateway Roadmap 2024
Hi, answered, please don’t spam!
Mern stack Payment Gateway Roadmap 2024
You need roadmap for it? Or we have post about it!?
🇺🇿 I am Uzbekistan 👍🫡😊
Nice 🙏❤️
why does an asmr video start with horror-music?!
Because it’s intro
Are you hacker
Why!
It's not because he code fast and good that he is hacker.