Easiest Way to Create Web Dashboard With HTML, CSS and Javascript - Part 2

previous lesson we looked at how to break down a html page and how we can render each of the section in this lesson we are going to look at how to implement each of these blocks and let's see how it works first to begin this project we need to create a project file so i'm just going to go to my project file and just create a new folder then title you can give it folder anything but i like to be specific with my project name so i'm just going to say project management dashboard perfect so we're just going to drag it into a vs code the vs code let's make it the bigger screen and now we have a project folder so let's just go ahead to create our first file which is just going to be index.html index.html perfect so now we have a file next we want to do is to declare our boilerplate which is going to be the header tag and the body tag with my exclamation mark vs code can generate that for me immediately so i'm just going to enter so these are the basic meta tags that we need all right so i can just update the title to be project management dashboard okay so these are the basic descriptions that we need for now so what we need to do is to start declaring our html markup so let's go back to our design and look at what we need to do remember we have a div which is going to serve as the overall container so let's do that so we can just say div then let's give it a class of dashboard okay so we have our div one common thing we may want to do is to also add the comments we can just say dashboard then we can just indicate dashboard end this is just going to make us to know the end of this tag no matter the length of the html markup that we're going to have as children of this very element so let's see how it works the next is let's see we need to declare each of the section you can see that the nest is sections so we have about three sections we have section one which is going to be for the navbar then we have the section which contains the actual content and the search features then we have like a summary version which is going to be also by the right what we're going to implement in this very lesson will be this navbar but we are going to cater for the remaining section so why not we just go on and create all the sections that we need to create a section we're going to use section tags we're just going to see it section first be able to identify each of the sections we can just give them classes so we can call this like the navigation so let's just have a comment as well i'm just gonna give it navigation then we need to end it just say end okay so we can duplicate this and the nest is going to be the main we can just say main and just also give this main and this main as well the next is we can just also duplicate this and give this remember we have three sections now we have the three of them but let's also give this like secondary class secondary then we can just change this as well to secondary say country okay so if we try to load a page let's just try to copy the parts let us load google chrome if we load it we are not seeing anything yet but we can see the project title okay that's because we've declared all the sections but we're yet to insert any content in them so let's deal with the nav bar section first to be able to do that we have to kita for the first image so i'm just gonna tattoo that image then we can give it a source right now there's no image let's look for one image so we're going to be using a logo now to get the logo let's just navigate to [Music] where we have some logos we're going to be using instinct of top nail let's just copy it and go back to our project folder and just create an asset folder assets then in the asset folder let's just have images so we can just have image then paste so let's go back to our project and just navigate to this new asset folder which is going to say assets and we have the image if we go back to google chrome and just refresh be able to see the image which is very cool let's give our image an old attribute so we can just say instinct of logo okay so if we check our design again we'll see that what we need to get now are the icons so let's see if we can use google icon so i'm just going to say fonts dot google dot com forward slash icons let's see if we can get icons from there all right we might not be able to get the exact icon that was used but let's try as much as we can to pick something closer so this is going to be like a dashboard which makes a lot of sense i'm just going to click it and copy then go back to our code so i think it would be nicer to wrap all the icons in another div so let's just call it div and just have the first icon let's make it online if we save it and go to our google chrome and refresh we might not see anything we only just see dashboard that's basically because there's one more step we need to do i think two more steps before we'll be able to use the google icon so let's go back to google icon documentation and just click the instructions to see what we can do in order for the icon to show let's see the guide and let's go to material icon guide yeah so you can read all of this but we're just going to skip to the section that we need this linking is going to make more sense to us so let's copy the link and just come to our project header a head tag then let's have that let's go back to our project and refresh even when we refresh we don't get to see anything there's still one more step left what we need to do is to add a css class and for us to do that we need to create a css file so let's create in a folder asset folder let's just create css folder then in the css folder let's just create style dot css okay so let's look at the class here in fact if you come to the documentation they're still going to further show you what you need to do so you call the class then call this font family so i'm just going to copy this first or i can even copy all of them and just come to css and just make sure that the class of our icon here is the same so i'm just going to copy the class and replace it with this default class i come back to html html is not aware of our css yet so that's why if we come and refresh we don't see anything yet so let's go ahead to link our css so you can just say link then let's reference the asset folder we have css then we have style dot css we save it nothing really happen okay so the major issue is that we are saving the folders into the image folder so let's just remove this we can remove this just just delete this let's move it to trash then we can change these to assets so if we come to refresh everything should work fine you can see that we have a button what we can do again is to add another icon so let's go back to our icon let's check the next icon this is going to be like frequency is a way for us to search let's see if we get frequency let's see beats let's see hats we can see icon really close to what we have here but i think let's just go for this arrow so i'm just going to copy it like i said we may not be able to get the exact icons we use something similar we save it for refresh you can see that we have that as well okay so what's the next icon this is more like people or profile okay this is social let's go with this one the next one is like dates let's see this shouldn't be how to find let's go with this one let's see how many we have left we have settings certain should be very easy to to find settings actually still not easy to find i thought it was but let's see if fact let's try to see the show show let's see if social is going to give us something frankly this icon is really not holistic i just choose to exploit but it seems it's not really serving as you can see we can't find settings which is very bad so this is what they are suggesting to us i think i'm surprised why we are going to search for settings and the option didn't come up wow i think this is still work in progress as is not really user friendly well let's just go with this settings and so that we can move on i'm just going to proceed and if we go to our project and refresh you can see that we have all the icons showing which is very cool and that's how we wrap it up on this one in the next lesson we'll be looking at how to create this section the section that contains the main content and that will be an interesting part thank you for watching and i'll see you in the next one

Channel: InstinctHub

Views: 19,522

Keywords: javascript, javascript for beginners, javascript tutorial, html, web development, interactive web, web design, color generator, markup, html and css tutorial for beginners, beginner coding lessons, 100 days of code, software engineering, software developer, software engineering tutorials, css, javascript tutorial for beginners, coding, design thinking, learn technology skills, intincthub, 40 days with web, learn to code, responsive navbar, responsive menu, responsive menu bar

Id: b8lcXo9kc6U

Length: 14min 43sec (883 seconds)

Published: Wed May 19 2021