🔥 How to Create a Responsive Admin Dashboard from Scratch | HTML, CSS, & JavaScript (Part 1)

Summary

In this Creative Babar tutorial video, you will learn how to build a responsive admin dashboard using pure HTML, CSS, and JavaScript without relying on external libraries. This detailed session covers the creation of various sections such as tables, menus, and layout responsiveness, while also providing a guide on implementing dark and light mode themes. The tutorial encourages learners to subscribe for future content that will include real-time projects involving technologies like React and NodeJS, which are ideal for building portfolios for job applications.

Highlights

• Build a beautiful responsive dashboard using only HTML, CSS, and JavaScript. 🚀
• Master adding icons and creating responsive tables and menus with SVGs. 🖼️
• Switch effortlessly between dark and light modes, enhancing user experience. 🌓
• Develop an understanding of layout management with a three-column design. 📐
• Utilize CSS variables to streamline theme changes and ensure consistency across your project. 🛠️

Key Takeaways

• Learn to create a responsive dashboard using HTML, CSS, and JavaScript from scratch! 👨‍💻
• Implement dark and light theme toggles to enhance user interactivity. 🌗
• Understand the importance of commenting in code for better readability and job prospects. 💬
• Explore how to make use of variables in CSS for easier color management and styling consistency. 🎨
• Embrace the power of grid layout for structuring your web elements efficiently. 🗂️

Overview

Ever wanted to create a responsive admin dashboard without relying on bulky libraries? That's exactly what Creative Babar walks us through in this tutorial. The focus is on using pure HTML, CSS, and JavaScript to control every detail of your design, ensuring it’s sleek, functional, and user-friendly.

The video meticulously goes through building tables, menus, and the overall layout, highlighting the power of pure coding. There's a touch of elegance as we learn to toggle between dark and light themes, adding a layer of modernity to our project. It’s not just about creating pretty screens; it’s about making them adaptable and responsive to different devices.

Throughout the session, there's an emphasis on the importance of coding best practices such as commenting and using CSS variables. These small details not only make your code more readable and maintainable but also prepare you for showing off these skills in a professional capacity. If you're willing to learn and grow, this video sets a solid foundation for interesting projects ahead!

Chapters

• 00:00 - 01:00: Introduction and Overview In the 'Introduction and Overview' chapter, the host welcomes viewers to Creative Babbar and announces the content of the video. The chapter focuses on creating a responsive dashboard using HTML, CSS, and JavaScript without relying on any external libraries. It emphasizes using pure coding techniques and includes instructions on adding icons.
• 01:00 - 06:00: Creating Layout Structure This chapter covers the process of creating a responsive layout structure for web development, highlighting the use of tables, menus, and SVGs. It also delves into implementing a dark and light mode toggle effect, allowing for theme switching. Viewers will learn how to effectively change the background color as part of these theme transitions. Additionally, the video encourages new viewers to subscribe, like, and comment on the channel.
• 06:00 - 11:00: Styling the Dashboard The chapter 'Styling the Dashboard' discusses the importance of engaging with video content by providing feedback and activating bell notifications. The speaker emphasizes upcoming tutorials on building a complete website using HTML, JavaScript, React, and NodeJS. These tutorials are aimed at learners who love coding and want to gain practical experience by creating projects that can be added to their professional portfolio, beneficial when applying for jobs.
• 11:00 - 21:00: Adding Interactivity and Icons The chapter 'Adding Interactivity and Icons' discusses customizing SVG elements and using them in personal or professional projects. It highlights the ability to change colors and shapes, encouraging viewers to watch tutorial videos for guidance. The chapter emphasizes the practical applications of these skills in portfolios and resumes.

🔥 How to Create a Responsive Admin Dashboard from Scratch | HTML, CSS, & JavaScript (Part 1) Transcription

• 00:00 - 00:30 Assalamualaikum, welcome to Creative Babbar In this video, I will tell you how to make beautiful responsive dashboard using HTML, CSS and JavaScript Yes friends, in this video, I will tell you how to make beautiful responsive dashboard using HTML, CSS and JavaScript We will not use any external library we will not use any external library we will use pure HTML, CSS and JavaScript i will show you how to add icons
• 00:30 - 01:00 make table, menus responsive, use SVG after that we have to add dark and light toggle effect we can change dark and light toggle effect we can change the theme by toggling we can switch dark and light theme we will also teach you how to switch them and how to change the color on background we will also teach you that before that if you are visiting the channel for the first time then subscribe the channel like the video and comment in the comment section
• 01:00 - 01:30 tell us how you like the video and turn on the bell notification in the comment section below tell me how you like the video and you must turn on the bell notification because in the coming videos we will make the whole website with HTML, JavaScript in React, NodeJS so I don't want all the learning students who love coding who want to learn coding so you miss those videos because they will be your real-time projects. In that, you can make your portfolio to show the client or if you are applying for a job, you. You can put it in your portfolio.
• 01:30 - 02:00 You can change the color in it. You can change the SVG in it. Or you can use it as it is. You can watch the videos and follow them. Then you can use it in your projects. You can put it in your portfolio. You can put it in your resume.
• 02:00 - 02:30 You can use it freely. Because the main thing is that if you know your skills. Then you can upload it for free because the main thing is if you know the skill then you can make projects by yourself or upload it you just have to know how to make it best practice is you can make it by yourself it will give you the benefit that your coding skill will boost so now we have dark and light option and we have responsiveness
• 02:30 - 03:00 if you will view it on tablet then it will show perfectly on tablet if you see here let me increase it a little here we have tablet view what will happen on tablet view, the text of the View will be empty with only menus As we move to the big screen We will see PC or Laptop Screen As we move to the mobile screen
• 03:00 - 03:30 We will see mobile screen We have responsive menu toggle action you will learn all this in this video if you watch it complete and follow it you will get a good project in your portfolio so let's start it for that i am going to my code editor and i have opened the code editor and live preview I have only written the basic HTML code I have linked the style and CSS file and the javascript file
• 03:30 - 04:00 For this you have to create a CSS file, an HTML file and a javascript file After that you should have these images I will give you the link below, you can download and use them Or you can upload any image yourself link in the description or you can download images from your own now we will start coding first of all, when you see a website or code think about what is the main thing in it
• 04:00 - 04:30 we have sections in it one is on the left one is in the middle first of all, think about it what is the main thing in this we have sections one is on the left one is in the middle and one is on the right so we have three sections first of all when we start coding we will start making the menu first of all we will set the layout we have three left, first we will set its layout so we have 3 layout we have left, main and right so now we will start it
• 04:30 - 05:00 you will understand it well we will take main container container you can name it as you want you can also remember to name it so here you have to put comment you have to write aside aside section so here you have to write comment here you have to write aside aside section start and comment it down end now in this you have to write your aside code which is coming on this side your logo is coming
• 05:00 - 05:30 your menus are coming whatever is your left side from dashboard left side from dashboard this will come in this tag so here you can see the side tag here is your side tag now you can put h1 tag i am doing this to explain you later we will remove it you just have to explain the layout we will start all the other coding because main is your concept you have to clear it after that aside we have main, so for main we will put main tag
• 05:30 - 06:00 before putting main tag we will put comment main section start and copy paste it below and this end and below this we will put main tag and h1 tag and we will take a main tag and inside this h1 tag and we will give it here main area or just write main now here main is ending add some space here here side is done, after that main is done and after main you get right section so for right section you will take a div
• 06:00 - 06:30 and you will give class right and inside this you will write h1 tag and inside this write right and write right and here write end and and right section what will happen when your code will be more then it will be easy to spot the code easily and it will be easy to find and here you can write
• 06:30 - 07:00 write section start write section start this is done now all three are connected now you can see in live preview how it is coming in live preview side, main and right now you can switch the code where is the side, main and right here now here in style and css here .container ok now here we will do display
• 07:00 - 07:30 grid here display grid here grid template column now in template column left one is 14rem middle one is auto and right one is also 14rem this is for example rem is figure when you put pixel this is a figure of REM when you put a pixel or a apple or REM
• 07:30 - 08:00 now we show it here this is not showing we check if there is a link or not file style.css we check yes there is a link I think there is a spelling mistake copy the name of the file copy the name of the file copy the name of the file copy the name of the file copy the name of the file copy the name of the file copy the name of the file
• 08:00 - 08:30 copy the name of the file copy the name of the file copy the name of the file copy the name of the file background that save it and it will come here it is working perfectly sorry i have written phone display save it and see now your side one main one is in the middle and right one is on the side so this way your container will work now all three sections will be defined here
• 08:30 - 09:00 see on the big screen side, main and right now see here this is side, main and right I hope your concept about layout is clear now we delete the code of css i wrote this to explain you because concept will not be clear when you will not understand the concept you will not know how code work so how you can make it by yourself
• 09:00 - 09:30 my purpose is to teach you how you can make website by yourself you can make it by use this kind of layout you can use better layout than this you can put 3 columns you can put 2, 4, for gathering you can use whatever you want so now you have to understand the concept now aside deleting this because i told you to explain this and here now we start our actual code in aside
• 09:30 - 10:00 in aside we will take div we will put top and in top we will take another div and we will put logo and in logo we will put tag of h2 here c and in this we will put and add h2 tag in logo add c tag and add span tag add barbar tag add danger tag you can use image on this if you want
• 10:00 - 10:30 as per your choice now your logo section is complete now you have to know while commenting here your top is ending, so you can put end top the more you comment the more you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo is here
• 10:30 - 11:00 now you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo is here now you can see the logo of span now the icon we use we use the icon of material material icon this is google icon
• 11:00 - 11:30 you can use font awesome or any other icon it is more easy and useful you can find materials and icons open link now you have different icons and it is easy to use i like this you have outline, round and sharp i will use sharp now we have to select the first icon we have to select close
• 11:30 - 12:00 now you have to link it if you want to use it in s style then you have to link this file but i use this last file copy it from here but i use this last one copy this file and go to style.css file you have to paste this first now this is your code copy this and paste it where you want to paste the close icon use it there
• 12:00 - 12:30 and align it save it now we have the close icon now the material icons have the same class like the text below the title changes and the icons are based on the title text and also icons are added on the title for example, this is close now i will add settings
• 12:30 - 13:00 and this is the settings icon now we don't have to change the class we use font awesome or any other so we change the classes we don't have what we do in that, we change classes we don't change classes, we change text for example, here we have favorite, select favorite so you have to give your class just you have to write your text as favorite so if i write here favorite
• 13:00 - 13:30 then it will be read spelling in this you should be correct here favorite and check it then write your favorite spelling here is your favorite spelling and here is your favorite spelling so this is how you use the icon I am using the close one so here is the close icon now we have to take our menus which are on the side so here is the top end and below the end top here you have to take lower end now below end top here you take div and class it as sidebar now we will use a tag in it
• 13:30 - 14:00 in a tag we will take span tag and in span tag we will use icon so in this we will put dot class and in this material which we have in this class, material simple and sharp and after that we will take the tag of catch 3 h3, we will write text dashboard dashboard save it and here you write gridview
• 14:00 - 14:30 your icon name is grid underscore view save it and it will come here now we have to copy paste this tag so i will cut it from here i will explain you, because i will write again and again so i will explain you
• 14:30 - 15:00 and i will style it a little bit here format selection here i have format code now here sidebar here sidebar and below sidebar i have one tag one tag Now, go to sidebar and click on one attack icon. Now, copy and paste the 10 times and change the icons like this, person outline, site, mail outline
• 15:00 - 15:30 recipe log and for reports, report, gmail error and for setting, setting for ad product, ad and for logout, logout so you have to paste it like this so after this, you will get a view like this so here, your html coding will be completed after that you have to come to style.css file
• 15:30 - 16:00 from here we have to style it so i come to style.css here, now in style.css first of all we have to import font, which font we have to use, so here you have to write google font google font and type google font google font and in google font we will use popin font in this as you can see it is reloading and speed is slow so it is taking some time so before that we come to code
• 16:00 - 16:30 so in this we open font so in font you search here font popin now open font search font popin you can use any font you like i have already selected it now open font normal, medium, semi bold, italic let italic be in this bold and semi bold, italic, italic, let it be in this bold and extra bold select all four of them you can select 400 in this
• 16:30 - 17:00 it is a good font selected this, this is also here now you have to import this you have two ways to apply this font one you can use in html file and one you can use in css file I use more in css file so here you have to come to import here you have to copy the tab copy the tab and paste it in your style.css file here you have to finish your style here you have finished it now it is your import now whenever you want to use it you have to copy this and paste it in your body
• 17:00 - 17:30 not your body HTML body here you have to paste HTML body here is the body and here is the font now you can see the text now we will come to the color scheme and other things here we have written some things as pre-coding for example, we have used variables so here you have select this variable and here you have to write variable
• 17:30 - 18:00 now what is the meaning of variable we have this information this is the code which you have to write whenever you apply a variable you have to write 10 times now in 10 times you have to change the text or code from 10 places for example, you use green color on your website 50 times you don't like it, so you will define that color in a variable
• 18:00 - 18:30 just you will change the color of that variable so 50 times, 100 times, 200 times the number of times you will change the color so this is what we do so I have put variables in this so now we have primary, danger, success, white,danger,success,white,info dark info light,i will give you the variables you can copy it too
• 18:30 - 19:00 now after that we have to put our star mark now from here our main coding starts,so first of all we have to put star mark and target tab margin 0 padding 0 box sizing box sizing border box text decoration none border border we will do it here 0
• 19:00 - 19:30 and after that list style none appearance that too none now after that we come to the body tag so we have applied the font family first we will apply width disc width disc will be 100vw and then height height will be 100vh 100 VW and then Height 100 VH
• 19:30 - 20:00 Font Size 0.88 R.E.M and then User Select User Select None Overflow user select user select none overflow x hidden and here we will put background color we will use variable and here i have a variable
• 20:00 - 20:30 with name background color color background now see the color of background is changed see the variable color is changed see the blue color the color of background is changed the color of background is changed the color of background is changed the color of background is changed the color of color is changed the same color is applied on the demo website demo website now
• 20:30 - 21:00 body after body we will take our container container we will give the display of container display we will give grid after that we will give width width we will be 96% gap gap will be 1.8 rem grade template column
• 21:00 - 21:30 grade template column will be 14rem auto and column 14rem auto and then 14rem after that we will give margin 0 and auto save it and here you can see a little space is created on the side now here in the demo we will put main so that we have 7 codes now in the main section, we will put the main key so that we have 7 codes showing main and right
• 21:30 - 22:00 save it now we have main and right now you should have a clear section which section we are working on and now we come here in style.css container is designed, after that you select a tag all your a tags you can put their color here variable dark color, color dark
• 22:00 - 22:30 this one after that h1 tag now here also you have some pre- tag now here you have to do some pre-coding now where you will use h1, font weight should be 800 font size should be 1.8rem now h2 tag,2 tag should have font size 1.4 REM
• 22:30 - 23:00 H3 H3 should have font size 0.8 7 REM H4 should have font size only 0.8 h5 font size should be 0.77 Small Tag Small
• 23:00 - 23:30 Small Tag Font Size 70.75 70.75 R.E.M Now You Have Some Pre-Coding Portfolio Profile Photo Profile-Photo Now Use Class Width profile photo profile-photo now here also you will use this class there your width will be 2.8
• 23:30 - 24:00 rem height will be same 2.4 2.8 rem border radius 50% because here we will use profile photo that photo will be in our circle overflow will be hidden overflow hidden after that we will put text muted text dash muted there you will put color
• 24:00 - 24:30 variable you will use color info color info peak attack color variable color dark variant peak attack color variable make attack color variable dark color
• 24:30 - 25:00 class primary class primary color variable success and danger success success color success color danger class
• 25:00 - 25:30 danger class where you will use danger class color should be danger and where you will use warning class warning warning color should be warning which you have put in variable color and variable warning
• 25:30 - 26:00 now here almost all the variables are clear after that we have aside so here first we will put comment now in CSS also you have to put comment aside so here you will put aside height 100bh aside.top background
• 26:00 - 26:30 variable color white variable color white display flex justify content space around or a line item center margin top 1.4rem then aside where we have
• 26:30 - 27:00 logo inside the aside we will give display flex and gap we will give 1rem save and view it now your font is ready and your header section is ready now this close is written because we don't have internet connection when you don't have internet connection
• 27:00 - 27:30 then icon will be shown instead of icon your title will be shown so when you want to use this you have to use this google icon this is a material icon so you should have an internet connection now after that, the menu below is here now your header section where your logo is placed is your style here and now let we come here now we will do logo we will do here
• 27:30 - 28:00 the icon we have in aside .top in top the div which we have put class close so like this you select the element close you will display none here you will then sidebar comment it properly so that you can view it later comment should be good whenever you show your coding for job if your developer is good
• 28:00 - 28:30 he will check your comments if you put comments correctly chances of getting job are more after aside we will select sidebar here we will select sidebar copy it first we will put background background color will be white color white
• 28:30 - 29:00 background color white display we will use flex flex direction column height 86 vh position relative top 1rem save it so this is your view
• 29:00 - 29:30 now inside side we have to add font weight of our text font weight is 500 save and view now you can see that font weight is changed now we have to add text icon text icon is in A tag so we select A tag icon and text that is in a tag select a tag a tag
• 29:30 - 30:00 aside sidebar and a tag in sidebar display flex color color variable info color display flex color color we will give variable info color dark info color info and dark also margin left margin left we will give 2rem
• 30:00 - 30:30 gap 1rem, align items, center and height, height we will give 3.2, rem, transition, 1.1 second ease save it now here you have a little bit better style than normal
• 30:30 - 31:00 now here we have an icon and we style these products sorry, icon and text so here side inside side we will put sidebar inside sidebar we will put one tag and span tag font size font size we will put 1.6 here it is
• 31:00 - 31:30 and we will put transition transition all and add transition transition all and remove this line and now last child of A copy it from here and paste it here copy it from here and here last child last child
• 31:30 - 32:00 we will give position absolute bottom one we have to lockout button we will cut it at the bottom width 100% save it so your lockout is at is exactly where you want it rest of the code is exactly where you want it to be here it is now h3 we will put it at 400 instead of 500
• 32:00 - 32:30 now it is fine now we have one last child and we have to put one have one tag which we have classed as active active and here we will
• 32:30 - 33:00 class it as background we will give it a variable light and color font color primary margin left 0 border left 5px solid variable primary primary
• 33:00 - 33:30 save it now here you can see a beautiful effect icon is coming on side and button is coming on top hover effect type is coming when your element is active then this kind of effect will come now customers we have classed it as active because of which style is applied on it if you see here customer here
• 33:30 - 34:00 mail, products here is customer we have added active class when we have styled active then this color will be applied and this styling which we have given to active will be applied style will come in css now after active we have before of this we will apply an effect aside sidebar inside sidebar, one tag .active which we have classed as active
• 34:00 - 34:30 before of that before of that content content of that also before before content content empty and width width 6px height 100% and background background is primary save it
• 34:30 - 35:00 save it now it is double loaded now if you want to make it thin you can add apply before or border if i will finish the border then i will apply the before styling on it so this one
• 35:00 - 35:30 now before styling is applied if we will not apply it then we will have the border now your side menu if we don't apply this then we will get border now your side menu is almost complete in this we have message in which we have put message so let's see that in coding so here before end then you come here and write aside aside and here you dot sidebar write side and where you dot sidebar sidebar and inside sidebar
• 35:30 - 36:00 one tag hover over it after that apply color apply color which is your variable color sorry primary color save it here see here very beautiful color is applying here now hover is also applied now here aside dot sidebar
• 36:00 - 36:30 in sidebar when you have one tag when you hover over one tag then the span tag margin of span tag will be left 1rem 1rem save it now hover it now you have a beautiful effect like this like this animation same way you are applying this now make a little transition same way you have animation same way you have animation now we will add some transition here
• 36:30 - 37:00 we will add transition active transition so, let's apply it transition we will apply 0.4 second for transition ease save it now we have a little bit of show
• 37:00 - 37:30 now we have a message count we will style it in which we have 14 written so count we will style it we have 14 in it we will do aside after aside we have sidebar in sidebar we have one tag span tag and span tag is the class we have created message underscore count here we will give background we will give danger danger is here and font color we will give white
• 37:30 - 38:00 padding we will give 2px and 5px font size we will give 11px border radius 1px boom now we have 14 lines now your side section is almost complete
• 38:00 - 38:30 now we come to our main section before that if you see the text here this text is a little light and this one is a little bold so we style it a little why is this bold it should not be sorry, here we have put dot h3 class we have to put only h3 this tag
• 38:30 - 39:00 save it now we have perfect we have font style and proper over effect same here now your side section as you can see here same effect is coming here now your side section is complete now lets start our main tag so see you in next video