Create Responsive Admin Dashboard Using HTML CSS & JavaScript | Dashboard Template Design

hi everyone welcome back to our another html  and css tutorial and in this tutorial i'm   going to show you how to create a responsive  dashboard a step-by-step using html and css   so this is the dashboard we are  going to create in this tutorial   and in our dashboard here you can see that  in the left side we have a menu section and   we have a logo and we have our brand name and  here you can see that we have some nav links and in the right side here you can see that we  have our interface here you can see that we have   a search option and in the right side here you can  see that we have a icon and a profile image here   and then we have our heading dashboard and here  you can see that we have our four boxes here and   inside these boxes we have our users total orders  products sell and the earnings of this month   and at the bottom here you can see that we have a  table and in this table here you can see that we   have five columns one is for our name and inside  our this name column we have some profile images   some name and email address and in our title  we have some designations and in our status we   have a active section here and here you can see  that we have a rule option also and here you can   see that we have the rules and here we have a  edit option so that we can easily edit any name   or any details of this particular row and  this admin dashboard is completely responsive   now if i inspect my website here you can see that  now we are in our tablet device and in our tablet   device here you can see that we can't see our menu  bar which was in the large screen in the left side   the menu bar is not showing in the left side but  instead of this menu bar we have a hamburger menu   here and beside the icon here you can see that we  have our search and our profile section and then   we have our boxes and we have our tables here  and then now if i click on our this menu button   here we can see our menu bar and this menu bar  is sliding from the left side and this sliding   is looking so beautiful and here we have our  all the nav links and if i click our this   hamburger menu again here you can see that we  don't have any menu bar in our this interface   and here you can see that we have our table here  and this table is adjusting the width and height   perfectly in about this screen size now let's  change the screen size and go to our mobile device   and in our mobile device this dashboard is looking  so beautiful and so premium here you can see that   at the top we have our menu button our search and  our this profile section and here you can see that   we have our dashboard and our boxes and the boxes  is now taking full width and height of the screen   and at the bottom here you can see that we have  our table here and we have all the details inside   the table and the interesting part of this table  is in our mobile device we can actually slide this   table so that we can see the details and here you  can see that we have our all the rows and columns   and these rows and columns is  actually taking perfect within height   in our mobile screen device also now if i go  to the top and from here if i click on our   menu button here you can see that we have our  menu bar here sliding from the left side and if   i click on our menu button again here you can see  that we don't have any menu bar in our dashboard   and in a few moments i will show you how to create  this responsive dashboard a step by step using   html and css but before we get started if you guys  are new in my channel then please please subscribe   like this video and press the bell icon for the  future videos and if you guys have any question   about this video please let me know in my comment  section so that's it guys let's get us started this is my file directory and here you can see  that i have images folder i have index file and   i have style sheet and now if i open this images  folder here you can see that we have some images   and we have our logo here so now from here  first we have to open our index.html file and in our index file first we have to create a  simple html boilerplate and here you can see that   we have our title and we have linked our style  sheet and if i go to my style sheet here you can   see that we have imported a link for our google  font family and in our star we have margin 0   padding 0 box sizing border box and we have  the font family which i'm going to use in   this website and in our body we have with 100 we  have a background color and a position relative   now let's go to our index  and if i go to my website   now for creating this website easily first we have  to divide this website into two parts first part   will be our this menu bar and the second part will  be our this interface so first we have to create   our this menu bar so that's why let's go to our  html and inside our body let's create a section   and here we have to give a id and the id will be  menu that's it and in our website here you can see   that first we have to add our this logo and then  we have to add our this text that's why let's go   to our code and here we have to create a div tag  and the class name of this div tag will be logo   that's it and here first we have to insert our  logo so that's why create a image tag and i have a   images folder and inside my images folder i have a  logo.png then we have to create a s2 for our title   and it will be dynamic that's it so after creating  this one if i go to my website here you can see   that we have to create our this nav links so for  creating these snap links let's go to our code   and here we have to create another div tag and  the class name of this div tag will be items   for the items first we have to create a list  tag and inside this list tag we have to create a   i tag and here first we have to import  our these icons so for using the font   awesome icons first we have to add the  cdn link from font awesome icon into our   website so for doing this let's create another  tab and here search for font awesome cdn and now open our this link setup webfont  and if when i scroll down here you can   see that we have a link tag now we have to  copy this link tag and go to our website   and go to the head and after our  title we have to paste the cdn link   and from this cdn link i will remove  the integrity and the cross origin   that's it now let's go to our font awesome  and from here we have to select icons and here we have to search for chart and here you can see that we have  our chart and now i'm going to use   this icon into our website so  that's right click on this icon and from here copy this i tag and go to our code   and then paste it here that's it so after  our icon now we have to create an anchor tag   and the href will be hash and the name  of our anchor tag will be dashboard   now save and go to our website and here you can  see that we have our logo our title and our nav   links now using the same technique i will add our  rest nav links so that's why let's go to our code so guys here you can see that we have added  our rest of the nav links now save and go   to our website and here you can see that we  have our all the nav links and our icons here   so after creating our menu bar we have to  install this menu bar so for doing this   let's go to our code and from here copy the menu  and go to our style sheet and then paste it here   that's it first thing i am going to do i will  add a background color and the color will be   this one and then i'll give a width which will  be 300 pixel and the height will be 100 percent   now save and go to our website here you can see  that we have our menu bar and we have changed   the background color of our menu bar so after  this one we have to fix the width and height of   our this logo so for doing this let's go to  our code and from here copy the local class   and then paste it here but  first we have to add our menu   that's it and then target our image let's  give it width here and which will be 40 pixel   now save and go to our website and  here you can see that we have our logo   and this logo is now taking 40 pixel width in our  website here you can see that our this text and   our this logo in one row so we have to do the same  here also so for doing this just copy this one   and then paste it here for aligning them in one  row we have to use display and it will be flags   then align items will be center then i  will change the color of our text and it   will be white then i have to add a padding and  a padding from top it will be 30 pixel from left   0 from bottom 0 and from right 30 pixel now save  and go to our website and here you can see that   now our logo and our this title is now in  one row now we have to add some space between   them so that's right let's go to our image  and here i will add margin right 15 pixel   now save and go to our website here you can see  that now we have done with our logo and our title   so after this one now we have to install our nav  links like these ones so for doing this let's go   to our code and go to our html and copy the items  then paste it here but before we have to add menu and here first i'm going to add some space from  the top and it will be 40 pixels then copy this   one again and then paste it here this time  we have to target our list tags because i am   going to remove the bullet points from our list  tag so that's why it will be listed style none   and then i am going to add some padding and the  padding from top and bottom would be 15 pixel   from left and right it will be zero then  copy this one again and then paste it here   then we have to target our icons first i am going  to add a color and a color will be a rgb value   that's it and then let's give it width and it  will be 30 pixel let's give a height it will be   also 30 pixel now let's give a line height 30  pixel and here i'm going to text align center   and the font size will be 14 pixel and here i have  to add some margin margin from top it will be 0   from right it will be 10 pixel  from bottom 0 from left 25 pixel now save and go to our website here you can  see that we have now styled our icons here   after this one now we have to style our this  text so for doing this let's go to our code   and copy this one then paste it here instead of  icons we have to target our anchor tags first i am   going to remove the underline so that's why text  direction will be none then i have to give a color   and color will be a rgb value then we have to add  a font width and it will be 300 pixel now save and   go to our website and guys here you can see that  now we have styled our icons and our text also   now we have to add some hover effects in our  website like this one so for doing this let's   go to our code and from here copy the list tag and  then paste it here and here we have to add hover first i am going to change the color of our  background and it will be this one then we   have to add cursor pointer after this one in  our website here you can see that we have a   border in the left side so for creating this  one just copy this one and then paste it here   then we have to target our nth child first one  that's it and here i'm going to add border left   and it will be 4 pixel solid white that's it  and now if anyone over on our list tags i want   to change the color of our icons so for doing  this just copy this one and then paste it here   and here in our list tag we have to add hover  and here i will change the color of our text   and the color will be this one using the same  technique i will also change the text color   on hover so that's why copy this one again add a  comma and then paste it here but this time it will   be a for our text and i want a smooth transition  so that's why we have to add a transition here   and transition will be 0.3 second is  that's it and now copy this transition and then paste it in our list tag also  that's it now save and go to our website   and if i now hover here you can see  that we are now changing the text color   and the background color also and  this change is looking so beautiful   guys we have done with our menu bar so after  creating the menu bar now we have to create   the interface so for creating the interface  let's go to our html and underneath this   section we have to create another section  and the id of our section will be interface and in our interface first we have to create our  this network so for creating the network let's go   to our code and here let's create a div tag and  the class name of this div tag will be navigation and in our website here you can  see that we have a part 1 and   part 2 also so that's why let's create a div tag  for our part 1 and the class name will be n1 and   inside our n1 we have to create another div tag  and the class name of this div tag will be search in our search first we have to create a  icon and here we have to add a class for   this icon and it will be file f a search  and then we have to take a input field   type will be text and here we have to  add a placeholder and it will be search now save and go to our website here you can see that we have  a search icon and a field here   so after this one we have to add our this icon  and our this profile image so for adding this one   we have to create another div tag and  the class name of this div tag will be   profile and again here we have to create a i tag  and the class name of this i tag will be f a r   f f bell that's it and then we have to  create a image tag and i have the images   folder and inside our images folder i have  a one dot jpg now save and go to our website   and here you can see that we have our image  and our this icons now after this one i want   our this menu bar and our this interface  section to be in one row like our this one   they are now in one column so for aligning in  one row we have to go to our style sheet and   let's go to our body here we have to use display  flags that's it now save and go to our website   and here you can see that they are now in one row  now we have to style them so for doing this let's   go to the bottom and let's go to our index file  from here first we have to copy the interface id   and then paste it here now in our  interface first we have to set the width   so that's why let's take a width and  here i'm going to calculate the width and we have a width of 100 but i'm going to  substract the menu bar width which was 300   pixel that's it now save and go to our website so  here you can see that they are now in one row and   they are taking the rest of width after the menu  bar so first we have to install our this nav bar   so for doing this copy this one and then paste it  here and then go to our index copy the navigation   and then paste it here first i'm going to add  some space between our search and our this image   so that's why i'm going to use display flex  align items center just justify content space   between then i am going to add a background  and it will be quiet lets add some padding   and the padding from top and bottom will be 15  pixel from left and right it will be 30 pixel   and then i am going to add a border bottom and the  border bottom will be 3 pixel solid and the color   will be this one now save and go to our website  and here you can see that we have a border bottom   and we have a background color white and they  are aligning in one row now first we have to   establish this section so for doing this let's go  to our code and copy this one then paste it here and then let's go to our index and from  here we have to copy the search class   and then paste it here in our search div we have  two section one is our icon and another one is our   input field so i want both of them to be in one  row so that's why i'm going to use display flex   and the justify content will be a  start then align items will be center   let's add some padding and the padding  from top and bottom will be 10 pixel   from left and right will be 14 pixel then i am  going to add a border and a border will be 1 pixel   solid and the color will be this one  then i am going to add a border radius   and it will be 4 pixel now save and go to our  website and here you can see that we have a border   now from our input section i want to remove  the border so for doing this just copy this one   and then paste it here let's target our  input and then i will add border none outline none and then i will add a  font size and it will be 14 pixel now save and go to our website so this is our  search section now here you can see that between   our search icon and our search text we don't  have enough space so that's why copy this one   and then paste it here then target our i tag for  our search icon and here i am going to use margin   right 14 pixel now save go to our website  here you can see that now we have enough   space between them so after about this section we  have to fix our this section our profile section   so that's why let's go to our code  and from here copy the navigation   and the interface then paste it here then  let's go to our index and copy the profile then paste it here and if i go to the top here you   can see that we have in our search i  will simply copy these things from here and then paste it here after this one copy  the line again and then paste it here then   target our i tag and here i'm going to  add margin right and it will be 20 pixel   then i'm going to use font size 19 pixel then  font width 400 now save and go to our website   here you can see that we have changed the color  and the font weight of our icon and they are now   in aligning in one row and now we have to fix the  width and height of our this image so that's why   just copy this one then paste it here target our  image then we have to give a width of 30 pixel then we have to keep a height of 30 pixel  then we have to add object fit cover   then i am going to add a border radius  50 because i want a rounded image   now save and go to our right side here you can see  that we have changed the width and height and the   border radius of our this profile so this is  not looking good we have done with our this   nav section so after this one we have to create  our this heading so for creating the heading let's   go to our code in our html and underneath this  tag let's create a h3 here first i'm going to   create a class and it will be i name that's  it and then here we have to write dashboard now save go to our website here you  can see that we have our dashboard   after this one we have to add our these boxes  so for adding this one let's go to our html and   here we have to create a div tag and the  class name of this div tag will be values   and then let's create our first box so  that's why create a div tag and the class   name of this div tag will be value box that's  it first i'm going to add a font awesome icon   so that's why let's take i and the class  name of this one will be f a s f users   that's it and if i go to my website inside  out this box here you can see that we have a   heading type text and we have a paragraph so  they are actually in one column so that's why   i will create a part for our this div and  i will create another part for our this   text okay so we have created the icon already  so that's why let's create a detect for our text   and inside our div tag first we have to create  a h3 and it will be eight two six seven and   then we have to create a span tag and it will  be new users now save and go to our website   here you can see that we have our icon  and our smaller heading and our paragraph   so now let's first style these things first  we are going to start out this dashboard we   are going to change the color and the font size  of our dashboard so that's why copy the i name   and then paste it here first let's give a color  and color will be this one then i have to give a   padding padding from top it will be 30 pixel from  right 30 pixel from bottom 0 from left 30 pixel   then we have to give a font size 24 pixel  then we have to add a font width 700 that's   it now after our dashboard let's go to our index  from here copy the values and then paste it here   first i'm going to add some padding padding from  top actually i'm going to copy the padding from   here and then paste it here that's it because i'm  going to use the same padding for every section   that's it now save and go to our website here  you can see that we have changed the color and   text size of our heading and we have some  space from everywhere now copy these values and then paste it here then let's go to our  index and copy the value box then paste it here first i'm going to change the  background color and it will be white   then i will give a width and it will be 235  pixel and let's give some padding padding   from top and bottom 16 pixel from left and right  20 pixel then let's give a border radius 5 pixel   and i told you that we have created two  parts one is for our icon and another one   is for our text so i want to state them in one  row so that's why we have to use display flex   then justify content flags are start then align  item center now save and go to our website   yeah here you can see that we have created our  box we have added some border radius they should   be actually in one drop but they are still in  one column so let's go to our code and find out   okay it will be actually flex that's it save  go to our website yeah they are now in one row   so first i'm going to change the color of our  this icon so for changing the icon copy this   text and then paste it here then target our  i first let's give a font size of 25 pixel   then let's give a width of 60 pixel and we  have to use the same height same line height then i'm going to use the  border radius and it will be 50 then text line would be center then we  have to change the color and it will be   white now save and go to our website okay here  you can see that we can't see our icon because   we have give the same color for the icon  so let's give a background color for now   and the background color will be this one  so i will change the background color later   just for now i'm giving the background  color now save and go to our website   and here you can see that we have our  background color and the icon here   now i want some space between them so that's why  here i will add a margin right 15 pixel that's it after this one let's change the font size and  the font width of our text so that's why copy   this one paste it here let's try to get our  as3 and let's give a font size of 18 pixel   then give a font weight of 600 now after this one  let's target our expand tag and it will be a span font size would be 15 pixel and i don't want to  give any font width but i'll give a color and   a color will be this one now save and go to  our website so here you can see that we have   created one box now we have to create three  more so for creating this one let's go to our   index and i will simply copy this one and paste  it three more time now save go to our website   and here you can see that we  have created our four boxes   now i'm going to change the icon and the text  of these boxes so let's go to our code so guys   we have changed the icons and the text of  these boxes now save and go to our website and here you can see that we have different  text and different icons for each of this box   but they are now in one column i want them to be  in one row so that's why let's go to our code here   and go to the top and inside our values i am going  to use display flags then justify content would be   a space between then align items will be center  then i am going to use flex wrap and it will be   wrapped now save go to our website and here you  can see that we have our four boxes in one row   and they have a space between them now we have  to change the background colors of these icons   so for doing this let's go to our code first i'm  going to do i will remove the background color   from our this box that's it now save and from  here copy this one and then paste it here if   i go to my website here you can see that we have  different colors for our this icons so we have to   do the same for this one also so first i'm going  to give the color of our first box so that's why   here we have to type and child of one that's  it and here i'm going to add a background color   and color will be this one that's it so after  giving the first background color we have to   give three more so paste it three more time  and here we have to target our second one   our third one and our fourth one so for  the second one color will be another one   and for the third one color will be another one  and for the fourth one color will be another one   that's it we have added four different colors  for our four different boxes now save and go to   our website and here you can see that we have now  four different colors for our four different icons   so guys we have successfully done with our these  boxes also now it's time to create our this table   so for creating this one let's go to our code and let's go to our html let's create another div tag and the class name of this drip tag will be board and inside our this div tag we have to create  a table that's it and here we have to set the   width here and which will be 100 that's it now  if i go to my website here you can see that we   have our header first here you can see that this  is a table header and then we have our table body   so first we have to create the table header so for  creating this one let's create a table head that's   it and here we have to add one row for our table  head so that's why we have to add a row and inside   this row we have to create our first table data  which is name and then we have to create another   table data and it will be title then we have to  create another table data it will be a status table data and the role and then i will  create another table data and it will be empty   so guys here you can see that we have done with  our table data so after our table data we have   to create our table body and inside our table body  first we have to create our this first row so for   creating the first row we have to create a table  row first and here we have to add a table data   and for this table data first we have to  create a class name and it will be people   that's it so first i'm going to add our  image here you can see that we have a image so that's why i create a image tag and i have  a images folder and from here i will choose the   first one that's it then create a div tag  and the class name of this div tag will be   people description that's it and first we are  going to create a h5 for name and it will be john then we have to create a paragraph for the  email and it will be john at the rate of example dot com that's it now save and go to our website   and here you can see that we have our image and  then we have our name and the example so after   this one we have to create our this title  section so that's why create another td it   means table data and the class name of this  td will be people designation des that's it and here first we have to clear  h5 and it will be software engineer then we have to create a  paragraph and it will be web   dev that's it then we have  to create another table data and then we have to create a  paragraph and it will be active and we have to create a class name for  our table data and it will be active   as well then create another table data and then  the class name of this table data will be role let's create a paragraph and it will be owner then we have to create another table data  then create a anchor tag and it will be hash   and here it will be edited and for this  table data we have to create a class name   and it will be edit that's it now save and go  to our website and here you can see that we   have created our software engineer and web dev  and active owner and edit so we have to first   design our this first row so for doing this let's  go to our code and from here copy the board class   and then paste it here that's it first  let's give a width and it will be 100   then i will add some margin margin from top it  will be 30 pixel from right 0 from bottom 30 pixel   and from left 30 pixel as well then we have to  add overflow and it will be auto then we have to   add a background color and it will be white then  let's give a border radius and it will be 8 pixels now save and go to our website and here you can  see that we have a border areas and we have a   different background color okay guys let's  go to our code here you can see that we have   actually a slider and i don't want this slider  in our large screen so that's why i will simply   decrease the width and it will be 94 percent now  save go to our website and here you can see that   we don't have any scroll bar at the bottom here  now first we have to fix the image size and width   so that's why copy the board and then paste it  here then target the images inside our board   and let's give a width of 45 pixel then give  a height of 45 pixel then we have to add   object fit and it will be covered then i will  give a border radius and it will be 50 percent   then margin right will be 15 pixel now save  go to our website and this is our image   now after our image we have to design our this  h5 tags so that's why just copy the board and   then paste it here then target our h5 let's give  a font width of 600 then let's give a font size   of 14 pixel after this one let's target the  paragraphs also so that's why copy this one   and paste it here it will be paragraph and front  width will be 400 font size will be 30 pixel and   then let's give a color here and color will be  this one that's it now save and go to our website   and here you can see that we have changed the  text font width and the size of this h5 and we   have also changed the paragraph also now in our  website here you can see that the image and this   text section is actually in one row and they are  actually in one column here so first i want to fix   this and i want to bring them in one row so that's  why copy this board and then paste it here then   let's go to our index and copy the people here  and then paste it so first let's give a display   and it will be flex then justify content will  be flex as start then align items will be center text align will be also center now save go to our  website that's it now here you can see that they   are in one row but i want this both of the text to  start from the beginning so that's why here text   alone will be a start save go to our website yeah  now here you can see that they are from the start so guys here you can see that we have done with  our first row now we have to setting our table   first so that's why just go to our code and here  we have to add table that's it and the first i   will write border columns and it will be colors  and then let's target our table row because i want   a border at the bottom of our table row for each  of this table actually so that's why it will be   border bottom and it will be one pixel solid and  the color will be this one that's it and then   we have to target our table head here you can see  that we have table head now we have to install our   table head so that's why first it will be table  head and then we have to target our table data   inside our table head and let's give a font size  of 14 pixel and i want everything in upper case   so that's why text transform will be upper case  then let's give a font width and it will be 400   then let's give a background color for this whole  row so the background color will be this one   then text align will be a start then i will add  some padding from everywhere and it will be 15   pixel now save and go to our website and here  you can see that we have our table head and we   have changed to the background color and then we  have added a border at the bottom so yeah after   this one we have to add some padding for our  this row also i want some padding so that's why   let's target our table body and here we have our  table row and inside our table row we have table   data now let's give some padding padding from  top and bottom will be 10 pixel from left and   right 15 pixels now save go to our website and  yeah here you can see that we have now a space   from top bottom and left and right so this is  looking good now i want to change the active   section here you can see that we have a different  design for our active so let's change this one   so let's go to our index here you can see that  we have active class now copy this active class   and then paste it here then target our  paragraph so first i will give a background   color and color will be this one then let's  give some padding padding from top and bottom   will be 2 pixel from left and right will be  10 pixel then display will be inline block   then i have to give some border radius and it  will be 40 pixel then let's change the color of   our text and it will be this one now save go  to our website so guys here you can see that   we have our active so after our active we have  to install our this edit section so that's why let's go to our index and here we have edit  class copy this edit class and then paste it here   then target our anchor tag first i will remove the  underline so that's why it will be text decoration   none then i have to give a font size of 14 pixel   then we have to give a color and the color will  be this one then we have to give a font weight   of 600 now save and go to our website and here  you can see that we have our edit button here so guys we have done with our first row  now we have to go to our index file and   we have to add the rest of the rows  so let's do this let's go to our index and here you can see that we  have a table row so i will simply   collapse this one and then copy this  table row and then paste it a few times that's it now save and go to our website and here  you can see that we have our rest of the rows   so now we have to do one thing i will  change the images for each of this row   and i will change the name of this section  also so let's do this let's go to our row here and now i will change the images guys we have  changed all of the images and all of the names   now save and go to our website and here you can  see that we have different images and different   names for each of the rows and now we have  done with our this table section but now   i want to fix something here here you can see  that our this never is not taking full height   and this navbar is actually scrollable but i want  this never to be actually fixed on the left side   like our this one if i now scroll down here you  can see it here you can see that this network is   fixed in the left side so i want to fix network  like this one in our website so that's what has   got our style sheet and if i go to my never  or menu here you can see that we have our menu   and in our menu we have to add position fixed and  then i will use top 0 then left 0 now save and go   to our website and here you can see that our this  menu bar is taking now full height and it is now   fixed actually but after changing the position  of our menu bar our interface section also   broke so we have to fix this interface  so that's why let's go to our interface   and in our interface here you can see that we have  give width now i will use margin left of 300 pixel   and then i will use position relative  now save and go to our website and guys here you can see that our this interface  section is now back into the section so this is   now looking good so after fixing the menu bar  now i want to fix our navbar also here you can   see that if we scroll down we can't see our  never but i want this network to be fixed here   you can see that in our this website our network  is fixed so i want to create a fixed network for   our this website also so for doing this let's  go to our code and let's go to our navigation   and in our navigation we have to add  position fixed now save go to our website   here you can see that after using the fixed this  section is not actually taking the full width now   we have to give a width so that's why if i go  to my interface here you can see that we have   gave a width so i will simply copy the width  and paste it in our navigation now save and go   to our website here you can see that our this  navigation is now taking perfect with an height so after fixing our network here you can  see that we can't see our dashboard heading   here you can see that this heading so this heading  is now actually under the network so let's go to   our heading so this is our heading and here i  have to add margin top and let's give 70 pixel   now save go to our website and here  now we can see our dashboard heading   so guys here you can see that we have done with  our dashboard using html and css and now we have   to make this dashboard responsive for tablet  and mobile screen devices but before we do that   first i will add a menu icon beside our this  search section so for creating the menu icon   let's go to our code let's go to our  index and let's go to the top here and here you can see that we have our search  section and here inside our n1 class i will create   a div tag and inside our div tag we have to create  our icon and here the class name of this menu bar   will be f a s f a bars that's it and then we have  to create a id also and the id will be menu button   now save and go to our website and here  you can see that we have our menu icon   but this menu icon and our search bar is actually  now in one column we have to make them in one row   so for fixing this one let's go to our code copy  this n1 class from here and let's go to the style after our interface navigation paste the class  name that's it so first i will use display flex   then justify content will be flags start and the  align items will be centered now save and go to   our website here you can see that they are now  in one row but i want to change the font size and   the font width of this icon and i want some space  between them so that's why let's go to our index   and from here copy the menu button id from here  and go to our style sheet and then paste it here first let's give a color and color will be  this one that has give a font size and it   will be 20 pixel and the cursor will  be pointer then i will add some space   at the right side so that's why margin right will be 20 pixel now save and go to our website  and here you can see that we have our menu and   this menu is now looking beautiful but in  our large screen we don't need this menu   if i go to my website here you can see that in  our large screen we don't have any menu i will   actually display the menu in our tablet mode or  in our mobile screen device so that's why i will   simply hide this menu in a large screen so let's  go to our menu button and here we just use display   none now save go to our website and here you can  see that our menu button is now disappear and guys   we have done everything for our this dashboard now  it is time to make our this dashboard responsive   for our tablet and mobile screen devices so  first i'm going to inspect our this website and here you can see that now we are in our ipad   and in our ipad mode first thing i'm going to do  i will remove our this menu bar it means i will   hide over this menu bar so for doing this let's  go to our code and let's go to the bottom and   first we have to create our media query so call  our media and here we have to give a max width and the first breakpoint will be 769 pixel that's  it so for hiding the menu bar let's go to our code   and let's select our this section so here you  can see that our menu bar is selected and from   here click right and copy the rule that's  it now go to our code and then paste it here   first thing i will do i will decrease  the width and it will be 270 pixel   and i don't want to change the height and the  top and the left and the background now save   and go to our website here you can see that now  we have decreased the width of our this section   now we have to hide this section so that's why  let's take a left and left will be minus 270 pixel   okay now save and go to our website and here  you can see that now we can't see our menu bar   so after this one here you can see that our this  interface section is actually not taking the space   of our menu bar so we have to fix this one so  that's why just select the interface from here   and copy the interface rule  and then go to our code   and then paste it here that's  it our width will be 100 percent and our margin left will be zero pixel and here  we have to use display inline block now save and   go to our website and here you can see that  our this section is now taking the width of   our menu bar also now we have to fix our this  never section so that's why select the network   from here copy the rule and then  go to our code then paste it here from here i will simply delete everything and  then i will use a width and it will be 100   now save go to our website and here you can  see that our navigation is now taking 100 with   okay so after this one here you can see  that our these boxes is not looking good   so i will fix this one so that's why select  the boxes section from here copy the rule and then go to our code then paste it here i don't want to change the  padding i will simply delete them   and here i will use justify content and it  will be flex start now save go to our website   here you can see that they are now in flex start  now we have to add some margin around our these   boxes so that we can have some space between them  so that's why open our these values and select   the value box and copy the rule of our value  box and then go to our code then paste it here   i will delete the background and width and these  things also and here i will add a margin and a   margin from top it will be 10 pixel from right  20 pixel from bottom 10 pixel and from left   0 now save go to our website and now here you can  see that we have some spaces between our boxes   so after our this section we  have to fix our this table also so for fixing this section from here we have to  select the board and from here copy the board   rule and then go to our code then paste it here  first i will decrease the width and it will be 92   then i will delete everything from here  then i will use padding 0 then overflow   x and it will be auto after this one we have to  target our table also and for the table it will   be hundred percent of width and then border  collapse it will be collapsed that's it now   save and go to our website and here you can see  that we have everything inside our interface   and now we have to actually display the menu  button so that if anyone want to see the menu bar   they have to click on the menu icon so that's why  let's go to our code and let's go to our interface and here we have to target our menu button id  which is menu button and here we have to use   display initial now save and go to our website   and here you can see that we  can see our menu button id and then now we have to make this menu button  functional so that if anyone click on this   menu button we can see our menu bar so for  making this button functional we have to   write a simple jquery script so for adding  jquery into our website first we have to   add the jquery cdn so that's why create a new  tab and here we have to search for jquery cdn and open the first link and from here we have to  select the latest one and select the minifight   from here copy the cdn link let's go to our vs  code and then let's go to the top and underneath   our style sheet we have to paste the cdn link  just remove the integrity and the cross origin   now save that's it now next thing we have to do  let's go to our style sheet if anyone click on   our menu button we have to change the left value  of our menu so that we can see our menu bar again   so that's why here we have to write our menu id  and then we have to add a class which is active   and in our active class we will change the  left value so copy the left value and then   paste it here and the left value will be 0 pixel  okay now first we have to make this menu button   working so that's why let's go to our index  and go to the bottom here and underneath our   last section we have to create a script so inside  our script first we have to target our menu icon   which is our hamburger menu so that's why in  our jquery we have to first write a dollar   sign and then here we have to write our menu  button id so that's why it will be menu button so if anyone click on our menu  button we have to run a function   so that's why we have to create a function here that's it and inside this function we have to  toggle our menu button it means if anyone click   on our menu button we have to add our this active  class if anyone click on our menu button we have   to add this active class with our this menu okay  so that's right let's take another dollar sign   and then let's take our menu id and  then here we have to toggle class   and the class we will be adding is active  that's it guys now save and go to our website and now if i click on our this menu button here  you can see that we have our menu bar sliding from   the left side so if our menu bar is sliding from  the left side it means it will take some width so   now we have to actually change the width for our  interface so that we can see the menu bar so for   doing this let's go to our code and then let's go  to our style sheet so next thing what we have to   do we have to calculate the width of our interface  again so that's why we have to copy this class and then paste it here if our  menu and active class is active   then we have to change the interface with  okay so that's why it will be interface   and here the width will be we  have to calculate the width   so that's why our this interface section will be  taking hundred percent with after we serve extract   270 pixel width which was taken by our menu okay  now save and go to our website and now refresh   and now if i click on our menu button here you can  see that our this interface section is taking now   the rest of the space but this interface  section is still in the left side so that's why   here we have to add margin left and it will  be 270 pixel now save and go to our website   and here you can see that it is now taking  margin left 270 pixel so this is not looking good so guys our menu button is now working perfectly  and now next thing what we have to do we have to   add a transition so that i can have some time for  the changing it means i will add some transition   so that's right let's go to our menu bar and  here we have to add a transition 0.3 second   is i will simply copy this transition and then  paste it in our interface and our interface here   now save and go to our website and if i click  on our menu button here you can see that   we have a smooth transition now and this  smooth transition is not looking so good   so guys here you can see that we have created  our dashboard our responsive dashboard for our   this tablet or for our medium screen and this  is looking so good so after this one now we   have to create the responsive dashboard for our  mobile screen also so that's why select a mobile   and here you can see that now this is our  mobile and here in the mobile i will simply   decrease the space from the left side and i  will increase the width of our these boxes   so for doing this let's go to our code  and then let's create a media query   it will be our second media query and we have  to add a max width and it will be 477 pixel   that's it now first thing i will do let's go to  our code and i will simply decrease the space from   left and from the right side of our this network  so that's why select this one and here you can see   that we have all the rules here now copy the rule  from here then go to our code then paste it here   and from here i will delete this one and  these things also i will simply decrease   the space from left and right and from everywhere  it will be taking only 15 pixel that's it save   and let's go to our website and here you can  see that now we have less space from the left   and from the right side now i will decrease  the width of our this input section as well so for decreasing the width let's select our  input and from here copy the rule go to our code   and then paste it here and from  here i will simply give a width and it will be 150 pixel now  save and go to our website and here you can see that now we have enough  space between the search and the icon of our   notification so after this one we have to  decrease the space for our this heading   now select the heading copy the rule from here  let's go to our code and then paste it here and   from here i will delete the color and the rest of  things from the left it will be 15 pixel and from   the right it will be also 15 pixel and here you  can see that now we have less space from the left   side and we have to do the same for this section  now select our value and copy the rule from here   then paste it here and i don't want any  justify content it will be 15 pixel 15 pixel   and a 15 pixel as well now save go to our  website here you can see that now it is taking   only 15 pixel now i want to increase the width of  these boxes so that's why select the boxes here   and copy the rule from here and then paste it here and this time i will give width of hundred percent   and then i will change the margin margin  from top and bottom will be eight pixel   from left and right it will be zero now save let's  go to our website and here you can see that it is   now taking full width and height after this one  we have to fix our this section also now from here   in our interface just select our board and copy  the board rule from here and then paste it here and i don't want to change the width and  padding and overflow i will add a margin here   and a margin from top it will be 30 pixel from  right 15 pixel from bottom 30 pixel from left   15 pixel as well now save and then let's go to  our website and here you can see that our this   section is now inside our interface and we don't  have any scroller at the bottom of our screen   and this section is not looking so beautiful and  at the top here you can see that we have our menu   button and if i click on our menu button  here you can see that we have our menu bar   sliding from the left side and this sliding  animation is looking so beautiful and if i now   click again the menu bar go to the left side again  and we can see our interface and here you can see   that we have our search bar our icon and our this  profile and we have our dashboard our boxes and   our this table section and here we can slide  the table and we can see every details of this   table so guys here you can see that we have  successfully created our responsive dashboard step   by step using html and css and this responsive  dashboard is looking so premium in our mobile   screen device and in our tablet screen device  also in our large screen device and i hope you   guys enjoyed this tutorial and if you guys really  do then please please subscribe like this video   and press the bell icon for the future videos  and if you guys have any question about this   video please let me know in my comment section  that's it guys see you in our next tutorial you

Channel: Tech2 etc

Views: 157,670

Keywords: tech2 etc, html css admin, responsive admin dashboard html css, responsive admin panel, responsive website, html sidebar menu, html admin template, responsive admin dashboard menu layout, how to create a responsive admin template, responsive admin dashboard, responsive admin theme, admin page, responsive admin dashboard page html css, html css admin template, admin page html css, css animation, sidebar menu html css, Admin Dashboard Page HTML And CSS, Create Admin Panel

Id: g6HqL18plx4

Length: 64min 3sec (3843 seconds)

Published: Tue Oct 12 2021