Hello and welcome to Bob's Programming Academy. In this tutorial we are going to build a responsive admin dashboard using HTML, CSS and JavaScript. We will not be using any CSS frameworks such as Bootstrap to build this dashboard. Instead, we will teach you how to build a layout using CSS Grid and how to make it look good on devices of different sizes. using css media queries this is what the admin dashboard looks like at the very top here we have a header below the header we have the statistics section below we have two different charts created using apex charts which is a free and open source javascript library that helps developers create beautiful interactive and fully responsive charts for the web applications.
On the left we have a bar chart presenting the five most popular products in the system. On the right we have a mixed chart that combines two area charts. The first area chart The first chart shows the changes in the purchase orders over time and the second shows the changes in the sales orders. Here on the left we have a sidebar with a navigation menu. This dashboard app is fully responsive and it looks great on devices of all sizes.
This is what the project looks like on an iPhone 12 Pro. This is an iPad Mini. This is what the project looks like on a Nest Hub Max.
So, without further ado, let's get started. To build this project, you need a code editor. My favorite is Visual Studio Code, which is free and easy to install and has important features such as for Intel iSense code completion, debugging and code refactoring. I will be using Visual Studio Code in this tutorial.
To download and install Visual Studio Code, go to https://www.hptps.com. www.visualstudio.com From within Visual Studio Code, we can also install various extensions that can speed up our work and improve our productivity. In this tutorial, we will be using the Live Server extension to launch a local development server that allows for a live reload of our project.
To install Live Server in Visual Studio Code, we will need to install the Live Server extension. In Visual Studio Code, go to Extensions and in the search field type Live Server. Next press the Install button.
Now let's create a directory where we will keep our code. In Visual Studio Code, go to Explorer and click Open Folder. Next navigate to the location where you want to create a new folder. and click the new folder button next type the name of the project folder and click create I will call the project folder admin dashboard once you've created a project directory click Click Open. Next, we need to create project files.
We will need three files, one for our HTML code, one for CSS and one for JavaScript. In Visual Studio Code, press New File, another file called index.html. Next, press New folder and add a folder called CSS.
Inside that folder, add a file called styles.css. Next, press New folder and add a folder called JS. Inside that folder, add a file called scripts.js.
Ok, we've just created all the files we will need for this project. First, we will focus on the index.html file. HTML or hypertext markup language is a language we use to describe the structure of a webpage, that is, text, forms, buttons and other parts of the webpage that users ultimately see and interact with.
An HTML page consists of text-based code we write that a web browser such as Chrome, Firefox or Safari can look at, parse, understand and display to the user. CSS or Cascading Style Sheets is a language we use to describe the style of a web page, that is the colors, fonts, layouts and spacing that make the web page look exactly the way we want it to look. JavaScript is a very powerful programming language that we can use to make our web applications more interactive. JavaScript also gives us the ability to directly manipulate DOM elements.
DOM is an acronym for Document Object Model. The Document Object Model is a programming interface for web documents. It represents the document as a tree-like structure with nodes that describes how all of these HTML elements are related to each other.
That way, programming languages such as JavaScript can interact with the page and dynamically change its structure, style and content. Ok, let's start with a simple HTML5 structure. I will add the doc type, the HTML tag and in the head section I will add a meta tag and a title of Admin Dashboard.
Inside the body I will add a heading that says Hello World. An HTML page is structured as a series of nested HTML elements where an HTML element describes something on the page. and we might have elements that are inside of other elements.
Each of those elements is indicated by what we call an HTML tag, enclosed using angled brackets. The majority of elements in HTML have an opening and closing tag. A few, like the meta tag for example, are self-closing tags.
We open our document with a doc type declaration. It's a way of telling the web browser what what version of HTML we are using on this particular web page. DuckType.html means that this page is written using HTML5, which, at the time of making this tutorial, is the latest version of HTML. After the DuckType declaration, we open the HTML tag.
It's the root tag for our document, which indicates the beginning of the HTML content of our page. Thank you. In the HTML tag, we can also specify an HTML attribute that provides some additional information. Here, we use the lang attribute to specify the language for the document.
In our case, it's English. Inside the HTML tag, we have a number of different elements that describe what we want on this page, starting with the head section of the page, which provides information about the page. that will be useful for web browsers.
In the head section, we first use a meta tag to specify the character encoding, which tells the web browser how to parse the information contained within our page. Unless we have a good reason to specify otherwise, the value of the car set will typically be UTF-8. Next, we have the title of our web page. The body of our web page is the body of our web page. an HTML page is indicated by a body tag.
The body of the page is its visible part, the part that users ultimately see and interact with. Inside the body tag, we have a heading that says Hello World. You can think of HTML headings as titles or subtitles that you want to display on a webpage, like a headline that describes what the page is about.
HTML headings are defined by a body tag. with the h1 to h6 tags. H1 defines the most important heading and h6 the least important.
Ok, let's check what our page looks like now. we will use the live server extension that we've just installed to launch a local development server that will allow for live reload of our page. To start the server, click Go Live here in the bottom right corner of the status bar in Visual Studio Code.
This action will load our web page in your default web browser. The page now displays the text Hello World. If you were wondering, is the IP address for localhost, which is your local computer.
The 5500 after the colon is the listening port, for our server and after the slash we have index.html which is our web page in visual studio code in the bottom right corner of the status bar instead of the text go live we can now see port colon 5500. To stop the server click on this text. You will see again the text go live which indicates that the live server is not currently running. Now we can start working on the structure of our page. First, let's link the three files so that our HTML page can use the CSS code from the styles.css file and the JavaScript code from the scripts.js file. We can include a CSS file in an HTML page by adding a link tag in the head section of the page.
This link tag must contain a rel attribute that specifies a relationship reference to the stylesheet. The second attribute we need to add is the href, which indicates a hyperlink reference and should point to the URL of our CSS file. What you can see here above the link tag is a comment.
The comment tag in HTML is denoted by the left-angle bracket, exclamation mark, dash dash and dash dash right-angle bracket. Anything that appears between the comment tag is ignored by the web browser. Comments can be added at any point within the head and body sections of an HTML page.
Next, we need to include the scripts.js file within our HTML page. To do that, we add a tag in the body section of the page. We should add it just before the closing tag, and all the other HTML tags we are about to add should be placed above the tag. The tag must contain an src attribute pointing to the url of our javascript file you might be wondering why we've added the script tag at the bottom of the body section and not at the top or not in the head section the reason for this is that html loads from top to bottom the head section is loaded first then the body section and then everything inside the body if we put our javascript in the head section, the entire JavaScript code would be loaded before any of the HTML elements in the body, which could cause a few problems. Let's say that we have code in our JavaScript file that changes some HTML element on the page.
If the JavaScript code is loaded before the HTML elements in the body section of the page, the element that our JavaScript code should modify would not be available yet. As a result, the JavaScript code would appear not to be working and we would get an error. Another problem is when we have a lot of external JavaScript files and we link them in the head section.
This can visibly slow down the loading of our page. This would happen because all of the JavaScript would be loaded before any of the HTML elements. When we place our JavaScript at the bottom of the body section of the page, it gives the HTML time to load before any of the JavaScript is loaded.
This would prevent errors and speed up our website's response time. Let's also add another meta tag in the head section, just below the meta tag specifying the character encoding. This viewport meta tag tells the web browser how to render our page and makes our page more mobile friendly.
It says make the content render at 100% of the width of all supported mobile browsers. Now let's start building the layout of our page. We will use CSS Grid, which allows us to create two-dimensional grid layouts with rows and columns.
This means that we can control both columns and rows at the same time. Using the CSS grid, we can create various different grid combinations and position child elements wherever we want them. To use the grid, we need to specify four things.
Firstly, we need to tell the browser how many columns and rows our grid should have. Secondly, we need to specify the size of those columns and rows. Thirdly, we need to specify where we want to place items.
inside our grid. Finally, we need to tell the browser what should happen when the size of the grid changes or more items are added to the grid. This may sound quite confusing for beginners, but don't worry, it'll be easier to understand once you see a practical example.
I will remove this heading with the text Hello World, as we won't need it. Now we can start defining the structure of our web page. First, let's add a div tag with a class of grid-container. The div tag is typically used as a container for the container.
for other HTML elements. We want to style it with CSS and that's why we are adding the class attribute. The class attribute is used to point to a class selector in the styles.css file which defines all the styles for a particular HTML element with this specific class assigned to it.
Multiple HTML elements can share the same class meaning that we can use one class name to style multiple HTML elements in the same way. Here our div tag will be styled in the way that is described in the grid-container class selector in the styles.css file. Next, inside the div tag let's add a header tag with a class of header.
The header tag is typically used as a container for the head section of our website. Below the header tag, Let's add an aside tag with an ID of sidebar. The aside tag is typically used as a container for content that is not directly related to the main content of the page.
For example, this tag is great for navigation links or advertising on the page. We will use it for the sidebar that will contain the navigation menu. Below the aside tag, let's add a main tag with a class of main-container.
The main tag specifies the main content of a page. The content inside the main tag should be unique to the page. It should not include any content that is repeated across the pages, such as sidebars, navigation links, copyright information, or site logos.
Now let's add some CSS. In the styles.css file, we will define the style of our admin dashboard, that is the layout. spacing, colors, fonts and other elements that make our web page look exactly the way we want it to look. In CSS, each style rule is composed of two main parts, a selector that specifies which HTML element is the target of that rule and a declaration block that specifies how properties of the selected target should be styled.
A style rule begins with the selector followed by the decoration block within a pair of curly braces. Selectors are patterns used to select one or more HTML elements that we want to style. This one here is a type selector, also known as an element selector, that selects HTML elements with a given tag name and applies the same styles to each element with that tag name.
The type selector begins with a tag name to match, then we define the CSS properties within the curly braces. Here we have the body tag, but we could also use the type selector to style HTML elements that occur multiple times within a page, like a p tag representing a paragraph, for example. In that case, the same styles would be applied to all paragraphs.
What we can see here is a class selector that selects HTML elements containing a class attribute that has been assigned a value matching the selector. The class selector begins with a dot followed by a class name to match. Then, we define the CSS properties within the curly braces.
As I've already mentioned, multiple HTML elements can share the same class, meaning that we can use one class name to style multiple HTML elements in the same way. This one here is the ID selector that selects an HTML element with a given ID attribute. The ID attribute specifies a unique ID for an HTML element. We can have more than one element with the same ID in an HTML document. So by definition, the style roles defined by the CSS ID selector will always match only one HTML element.
In contrast, the class selector and the type selector can both match multiple HTML elements. I want the body of the page to have a margin of 0 and a padding of 0. I set it that way because I don't want the web browser to apply its default margin and padding around the body. This means that the body of the page will fill the entire screen without any extra space around the page. The first step to creating a grid layout is defining a grid container. A grid container is an element that defines a grid formatting context for its content.
For this exact purpose, we've added this div with the class of grid-container. We need to set the display property to grid. All direct child elements within that div now automatically become the grid items. Next, we need to specify how many columns our grid should have. For this, we use the grid-template-columns property.
We set this property to a list of width values. We can use here fixed length units. such as pixels or percentages, for example. We can also use the FR unit or the fractional unit, which represents the flexible length.
One FR unit is one part of the whole. This means that one FR unit is 100% of the available space. Two FR units are 50% of the available space each. Four FR units are 25% of the available space each.
So 1fr unit is 100% of the space divided by the total number of fractions. This may sound confusing at first, but let's look at an example. If we want our grid layout to have 4 equal columns, we could say grid-template-columns colon 1fr 1fr 1fr 1fr semicolon.
This is an equivalent of saying grid dash template dash columns colon 25 percent 25 percent 25 percent 25 percent semicolon. It means that each column would take 25 percent of the available space on the page. Ok, now let's focus on how we want the layout of our admin dashboard to look like. We will define 4 columns.
On the left, we will have the sidebar that will contain the navigation menu. I want the sidebar to always have a width of 260 pixels. The remaining 3 columns will be defined using the FR unit. This means that the first column will be 260 pixels wide and the remaining available space on the page will be divided into 3 equal columns.
The next column will be the width. of these three columns will depend on the size of the device. On large devices, the columns will take more space, on smaller devices, they will take less space. Next, we will specify how many rows our grid should have. For this, we use the grid-template-rows property.
We set this property to a list of height values. First, at the top. We will have a header.
It will be 0.2 frunit. The rest of the rows on the page will take 3 frunits. The last grid property that we will set is the grid-template-areas property.
This property allows us to describe what the layout looks like using easy to understand notation. Let's take the first grid row at the top. We have four columns, the first one is for the sidebar and the remaining three are for the header.
In the next row we will also have four columns, the first one is for the sidebar and the remaining three are for the main. The three properties we've just discussed, gridTemplateColumns, gridTemplateRows and gridTemplateAreas together define the explicit grid of our grid container. Let's also set the height of our grid container to 100VH, which means that we are setting the height to 100% of the viewport height. Think of the viewport as the visible area of a web page on a display device.
So 100VH is 100% of the available height of that visible area. Now let's define areas within our grid that match. the value specified in the grid template area's property.
In the header, we set the grid-area to header. In the sidebar, we set the grid-area to sidebar. And in the main container, we set the grid-area to main.
I will also set the height of the header to 70 pixels and the height of the sidebar to 100%. Finally, let's add some distinct background colors to the grid areas so that we can easily differentiate them and check what our layout looks like. I will set the background color of the header to royal blue, the background color of the sidebar to gray and the background color of the main container to beige.
now we can test this out click go live in the bottom right corner of the status bar in Visual Studio Code to start a server this action will load our web page in your default web browser and this is the result On the left we have a grey sidebar with a fixed width of 260 pixels. At the top we have a blue header with a fixed height of 70 pixels. The rest of the page in base color is black. is the main section of our dashboard let's keep the live server running it will allow for a live reload of the page so that we can see the progress while we are building the dashboard without refreshing the page in the browser I will also add comments indicating where style rules for the header, sidebar and main part of our dashboard start so that the styles.css file will be easier to read and organize.
Ok, now that we have the grid layout ready, we can start building our admin dashboard. First let's select a font we will use in this application. Go to https.com.
colon slash slash funds dot google dot com and search for the fund you like. I like Montserrat. Select the styles you want. Copy the link tag and paste it into the head section of the index.html file just below the title. I also want to use icons in this application.
There are many free icon sets and toolkits to choose from. In this tutorial we will use material icons. First, go to https://developers.google.com/.fonts/.docs/.material__icons and scroll down to the section Setup Method 1 using via Google Fonts. Copy the link tag and paste it into the head section of the index.html file, just below the font link.
I want to use the outline material icons, not the filled ones, so I will slightly modify this link tag. and add the plus sign and the word outline. The default link we've just copied allows us to use filled icons not the outline ones so I've modified the link to get the version I want. To find the icons to use on our page, go to https://funds.google.com/.icons. In the drop-down menu, select Material Icons and make sure that Outline version is checked.
Here we can search for icons that we would like to use in our admin dashboard. Ok, let's add some CSS. Just a quick note here, all of the various different CSS properties are described in detail in CSS documentation, so if you want to learn more about this topic, I highly recommend checking the documentation.
First, let's style the body of our page and add some default styles like background color, the font family that we've just linked in the head section of the index.html file and the color of our font. Let's also add a class selector material-icons-outline which we'll use for our icons. I will set the vertical align property to middle and the line height to 1 pixel. Let's also modify the styles of the header, sidebar and main container. I will remove the background color, I will set the display property to flex, align items to center and justify content to space between.
This setup will allow us to place some items in the header section on the left and some on the right and we will have some space between them. I will also add some padding. and box shadow, so that we can have a nice little shadow under the header section. When 4 padding values are specified, as you can see here, the paddings are applied clockwise.
First to the top, next to the right, then to the bottom, and finally to the left. So here we have 0 at the top, 30 pixels on the right, 0 at the bottom, and 30 pixels on the left. Next.
Let's modify the styles for the sidebar. I will replace grey with a much darker color, nearly black. And I want the sidebar pushed to the left when the screen size decreases, so I will add a half second transition effect to slide the sidebar. The overflow property is useful when users resize an element to reduce its dimensions. For example, when viewing it on smaller screens.
In that case we need to handle the content overflow. Overflow set to auto allows user agents to determine which behavior to use, although they are encouraged to provide the scrolling mechanism when necessary. So here to get scrolling working I set the overflow automatically on the Y axis.
Next let's modify the styles for the main container. I will remove the background color since I want the main container to have the background color that I set for the body tag. Let's also set the property overflowY to auto and add some padding.
When two padding values are specified, as you can see here, the first padding applies to the top and bottom and the second to the left and right. Now let's check what the page looks like after the changes. The live server is still running, so let's head to the browser. Great! This is the exact effect I wanted.
Now, let's work on the header. When users view our page on small screens, I want them to see a menu icon on the left. Once they click on this icon, they will open the sidebar.
There will also be a corresponding X icon on the sidebar that will allow users to close the sidebar. Both these icons will only be visible on small size screens. First, let's add a div tag with a class of menu-icon. Next, search for the menu icon, copy the span tag and paste it inside the new div.
We want the user to be able to able to click on the menu icon and this action should open the sidebar. So how can we do that? One way we could do this is by adding an attribute to this HTML element called unclick. This will add an onclick handler to the div holding the menu icon, saying what should happen when the user clicks on this element.
I will set the onclick attribute equal to the function open sidebar. To call a JavaScript function, we use the name of the function, followed by a set of parentheses. Ok, let's write this function. Open this scripts.js file.
Next. Let's define a sidebar open flag by default set to false. We want to open and close the sidebar, so we need a way to get access to this HTML element. As I've already mentioned, JavaScript has access to the Document Object Model and we can use it to directly manipulate DOM elements.
If we look at our sidebar here, we can see the sidebar ID. We can use this id to reference this HTML element. We can say var sidebar equals to document.getElementById and in the parenthesis provide the sidebar id.
The document object has the getElementById method, which can be used to reference HTML elements by their id. Next, let's define the open sidebar function. This function won't take any arguments, so we won't add anything between the parentheses.
First, we need to check if the sidebar is currently open or not. This is where we use the sidebarOpen flag. If the sidebar is closed, that is the flag is set to false, we will add a new class to the sidebar element.
I will call this class Sidebar-responsive. Don't worry right now about what the style rules for this class should look like. We will get to that shortly.
Once we've added the class of Sidebar-Responsive to our sidebar, we set the SidebarOpen flag to true. Let's also define the corresponding CloseSidebar function. First we need to check if the sidebar is currently open or not. If this sidebar is open, that is, the flag is set to true. We will remove the Sidebar-Responsive class from the Sidebar element.
Once we've removed this class, we set the SidebarOpen flag to false. Ok, let's go back to our header. As I've mentioned, in the header section we will have some items on the left, some on the right and some space between them. So, let's add to div tags.
First div with a class of Header-Left. and the second with the class of header-right. Let's add a search icon on the left side of the header. Search for the search icon, copy the span tag and paste it inside the div with the class of header-left. Inside the div with the class header-right, we will add three icons, a notification bell icon, an email icon and a user account icon.
Search for the Notifications icon, copy the Span tag and paste it inside the div. Next, search for the Email icon, copy the Span tag and paste it inside the div, just below the Notifications icon. Finally, search for the Account icon, copy the Span tag and paste it just below the Email icon. As I've mentioned, we want the Menu icon to be visible only on small size screens. and we want to hide it on large screens where the sidebar will always be visible.
To do this, we set the display property for the menu icon to none. Later, we will work on the style rules for small screens and then we will specify how the menu icon should look in those conditions. Now let's check what the page looks like after the changes. The live server is still running. So let's head to the browser.
Great, everything is working as expected. We have the search icon on the left and the notification bell, email and user icons on the left. The menu icon is hidden since we've set the display property to none. Now let's work on the sidebar. At the top of the sidebar, I want to have a logo consisting of an icon and text and below the navigation menu.
First, Let's add a div with a class of Sidebar-title and then inside another div with a class of Sidebar-brand. Let's work on the logo. Search for the entry icon.
Copy the span tag and paste it inside the div with the class of Sidebar-brand. As I've already mentioned, when users view our page on small screens, I want them to see a menu icon in the header section of the page. Once they click on this icon, they will open the sidebar. We've already completed this part.
We also need a corresponding X icon on the sidebar that will allow users to close the sidebar. Let's add this icon. Search for the close icon, copy the span tag and paste it just below the div with the class of sidebar-brand.
Let's also add an onclick handler to the span tag saying what should happen when the user clicks on this element. I will set the onclick attribute equal to the function closeSidebar. To call a javascript function we use the name of the function followed by a set of parentheses. We already have a javascript function.
have this function in the scripts.js file. Below the div with the class of sidebar-title add an unordered list with a class of sidebar-list. This list will hold menu items. Inside the list we need to add list items. Each list item starts with the li tag.
Let's add a class of sidebar-list-item to the list item. The first menu item I want is Dashboard. Search for the Dashboard icon, copy the span tag, and then the span tag.
I will quickly add the other 6 menu items. Next, let's define style rules for the sidebar. First, let's define style rules for the class Sidebar-title.
I will set the display property to Flex, justify content to space between, align items to center, padding of 30 pixels and margin of 30 pixels. Next, let's define Let's define style rules for the class Sidebar-brand. I will set the margin top property to 15 pixels, font size to 20 pixels and font weight to 700. Next, let's define style rules for the span with the icon that is located inside the div with the class of Sidebar-title.
We will use here a new type of CSS selector. This CSS selector is called a child selector and it allows us to select all elements that are children of a parent element. The selector first specifies the parent element which is sidebar-title.
Then we add a right angle bracket followed by the child element which is the span tag. The div tag with the class of sidebar-title is the parent element and the span with the icon located inside that div. is the child element.
Therefore, the style rules defined here will apply to this span tag. A child selector will target all the child elements of the parent, so for example if we had more span tags inside that div, all the span tags would be styled the same way. This span tag is our close icon that will allow users to close the sidebar when they view our dashboard on small screens. We want to hide it on large screens, where the sidebar will always be visible. To do this, we set the display property to none.
Next, let's define style rules for the class sidebar-list. I will set the padding property to 0, margin-top to 15 pixels, and list-style-type to none, since I don't want menu items to be displayed using bullet points. Next, let's define style rules for the class Sidebar-List-Item.
I will set the padding to 20 pixels on all four sides of the element. Next, let's define what happens when we hover over a list item with the class of Sidebar-List-Item. To specify style rules for the situation, we will use a new type of CSS selector. This CSS selector is called a hover selector and is used to select elements when the user hovers over them with the mouse cursor.
Finally, let's also define style rules for the class Sidebar-responsive. This is the class we will use to show and hide the sidebar on smaller screens. I will set the display property to inline, mark it as important and set the position property to absolute the exclamation mark important rule in css is used to add more importance to a property than normal when we use this rule it will override all previous styling rules for that specific property on that element now let's check what the page looks like after the changes the live server is still running so let's head to the browser Great, everything is working as expected.
We have the logo and the navigation menu. We can also hover over menu items and this action changes the color. Now let's work on the main section of the page.
At the top of the main section of the page, I want to have the title of the page, so that we know we are on the dashboard page. First, let's add a div with a class of main-title and then I will add a heading. Next, let's add a div with a class of main-cards.
This div would be a container for the statistics section. In this section, we add four cards. First, let's add a div with a class of card and then inside another div with a class of card-inner.
Inside the div with the class of card-inner, I will add a heading. Because below, we will add an icon. Search for the inventory icon.
Copy the span tag. Below the div with the class of card-inner, I will add a heading. This is our first card.
We can copy the code snippet that creates this card and paste it below three times, since we want three more cards. Now, let's add style roles for the main section of the page. First, let's define Let's define styRules for the class MainDashTitle.
I will set the Display property to Flex and justify content to SpaceBetween. Next, let's define styRules for the class MainDashCards. For the cards I want to create a grid layout. I will set the Display property to Grid and GridTemplateColumns to 1fr 1fr 1fr 1fr which means.
that we will have 4 columns and each will take 25% of the available space. Next, I will set the gap property to 20 pixels. This property defines the size of the gap between the grid columns.
Finally, I will also set the margin property. When the two margin values are specified, the first margin applies to the top and bottom, the second to the left and right. So here we will have a margin of 20 pixels at the top and bottom and 0 on the left and right.
Next, let's define style rules for the class card. I will set the display property to Flex. Flex direction to Column.
Justify content to SpaceAround. Padding to 25 pixels. A border radius of 5 pixels. To define the next style rules, We will use a new type of CSS selector. The first child selector is used to select the specified selector only if it is the first child of its parent.
Here we have a div with the class of main-cards and inside the div we have four different cards. I want to style each card in a different way. The first child selector will allow us to select a div with a class of card That is the first child of the div with the class of main-cards.
In other words, using the first child selector, we can select the first card out of four. Next, let's define style rules for the second card. We will use a new type of CSS selector. The nth child selector is used to select the specified selector only if it is the nth child of its parent.
Here we want to select a div with a class of card that is the second child of the div with the class of main-cards. In other words, we want to select the second card out of four. Next, let's define style rules for the third card.
We will again use the nth child selector. Here we want to select a div with a class of card that is the third child of the div with the class of main-cards. In other words, we want to select the third card out of four. Finally, let's define sty roles for the fourth and last card.
We will again use the nthChildSelector. Here we want to select a div with a class of card that is the fourth child of the div with the class of main-cards. In other words, we want to select the fourth card out of four. Next, Let's define style roles for the class Card-Inner.
I will set the display property to Flex, align items to center and justify content to space between. Now let's check what the page looks like after the changes. The live server is still running so let's head to the browser.
Great, everything is working as expected. In the main section of the page we have the page title and 4 cards with different colors and different icons. Now let's work on the charts that will be displayed in the main section of the page, below the cards. The charts will be created using Apex Charts, which is a free and open-source JavaScript library that helps develop create beautiful, interactive and fully responsive charts for their web applications.
We will add two charts. On the left, we will add a bar chart presenting the five most popular products in the system. On the right, we will add a Mixed Chart that combines two Area Charts. The first Area Chart will show the changes in the purchase orders over time, and the second will present the changes in the sales orders. First, we need to include the Apex Charts library within our HTML page.
Go to https://cdnjs.com/.libraries/.apexcharts and copy the script tag to the latest version. Paste the script tag at the bottom of the body section of the page, just above the scripts.js. We can remove that part.
First, let's add a div with a class of charts and then inside another div with a class of charts-card. Inside the div with the class of charts-card, I will add a heading with a class of chart-title. Type top5products.
This will be the title of our first chart. Below add a div with an id of bar-chart. We want two charts side by side, so we can copy this code snippet and paste it below.
In the second chart, add the title Purchase and Sales Orders and change the ID to area-chart. Let's style these elements. First, let's define style rules for the class charts. I want to use here a grid layout.
I will set the display property to Grid and GridTemplateColumns to 1fr 1fr, which means that we will have two columns and each will take 50% of the available space. I will also set the gap property to 20 pixels. This property defines the size of the gap between the grid columns. Next let's define styroles for the class chart-card.
I will set the background color margin-bottom to 20 pixels, padding to 25 pixels, and box sizing to border-box. I will also add the property to avoid column breaks when the screen size decreases. I will also add a border-radius of 5 pixels and the same box shadow as under the header section.
Finally, let's define style rules for the class chart-title. I will set the color-bottom to 20 pixels. Set the Display property to Flex, align items to center, justify content to center.
Now we can start building the charts. On the left, we will add a bar chart presenting the 5 most popular products in the system. Let's go to the Apex Charts documentation and find an example of a bar chart. Go to https://apexcharts.com/.docs/.installation and in the navigation menu on the left, select Chart Types and then Bar Charts. Here you can find information about the bar chart.
Ok, scroll down to an example and click on the link Horizontal Bar Chart. Copy the JavaScript code snippet and paste it to the scripts.js file. Just a quick note here, all the various different chart types and their many properties are described in Apex Charts documentation, so if you want to learn more about this topic, I highly recommend checking the documentation.
Change options to bar chart options here at the top and at the bottom in the parentheses. This chart will present the top 5 products, so instead of the values provided in the code snippet, let's add 5 new values. Next, let's define the colors that we want to use on the chart.
Next, let's modify the categories displayed on the x-axis. I will add the following categories. Laptop, Phone, Monitor, Headphones and Camera.
Next, let's add the Y axis and add the title property. I want the title of the Y axis to be the word COUNT, so I set the text property COUNT. Finally, change chart to bar chart and change the ID selector indicated by the hash sign to bar dash chart instead of chart.
We need to do this because we will have two different charts and each chart will have needs to have a unique ID. Those IDs are defined here in the index.html file. The code snippets in the ApexCharts documentation use the chart ID, so we need to change that. Now let's check what the page looks like after the changes.
The live server is still running, so let's head to the browser. Great, everything is working as expected. We have the first chart.
Now let's work on the second chart that will be displayed on the right. I want to add there a mixed chart that combines two area charts. The first area chart will show the changes in the purchase orders over time and the second will present the changes in the sales orders. Go to https://apexcharts.com //javascript-chart-demos//mixed-charts//line-area and copy the JavaScript code snippet and paste it to the scripts.js file. Just a quick note here.
All the various different chart types and their many properties are described in Apex Charts documentation. So if you want to learn more about this topic, I highly recommend checking the documentation. Change options to area chart options here at the top and at the bottom in the parenthesis.
We will have two data series here. First to purchase orders and the second for sales orders. Next, let's define the colors that we want to use on the chart. Let's also modify the labels.
I will add the months from January to July. On the Y axis, let's change the first title to Purchase Orders and the second to Sales Orders. Finally, change chart to Area Chart and change the ID selector indicated by the hash sign to Area-Chart instead of Chart.
We need to do this because we will have two different charts and each chart needs to have a unique ID. Those IDs are defined here in the index.html file. The code snippets in the Apex Chart documentation use the ID of chart, so we need to change that. Now let's check what the page looks like after the changes. The live server is still running, so let's head to the browser.
Great, everything is working as expected. we have the second chart now we can focus on the last part making this dashboard responsive so that the layout will automatically adapt to the size of the viewing device and adjust when the user resizes the browser window right now the dashboard is not responsive and when we decrease the screen size it looks like this so how can we improve this The key to responsive web design is using CSS media queries to determine the size and capabilities of the viewing device. Once the device size is recognized, the layout can be modified to look good.
using fluid proportion based grids and flexible images to create a responsive layout. Fluid grid layout requires the web page sizes to be specified in relative units. We've already done that when we've specified the grid columns and rows using the FR unit.
Now we will focus on the CSS media queries, which allow the web page to use style rules that are appropriate for the screen size of the viewing device or the width of the browser window. CSS media queries are essential for a responsive web design. You can think of them as basic conditional logic for CSS, because we can apply different styles depending on whether certain media-based conditions are met. Media queries allow us to target specific CSS styles depending on the capabilities of a device, such as viewport width, screen aspect ratio, orientation, whether it's landscape or portrait, and so on. We use the term breakpoint to define a particular viewport width or height, at which a responsive design should change significantly.
In our admin dashboard, We will use CSS media queries to adjust the layout, depending on the screen width. We will use here the maximum width media query. The addSignMedia directive tells the browser we are starting a media query, and the screen part tells the browser that these rules should be applied to all screen types.
We then have the end keyword, which changes together another set of conditionals, which in this case is max-width equals 992 pixels. This tells the browser that the style rules should only be applied if our browser's viewport width is equal to or less than 992 pixels. Our default layout works well for large screens. So let's define three media queries. One media query for medium-sized screens where the maximum width of the screen is 992 pixels one media query for small size screens where the maximum width of the screen is 768 pixels and one media query for extra small size screens where the maximum width of the screen is 576 pixels so what do we want our dashboard to look like on medium-sized screens.
In that case, I would like to hide the sidebar. In the main section of the page, I still want to have displayed four summary cards side by side and two charts side by side. I also want to show the menu icon in the header so that the user can click on it and open the sidebar.
We also need to make visible the corresponding close icon in the sidebar. so that the user can click on it and close the sidebar. We need to change the style rules for our grid container.
I will set the grid template columns to one FR unit, so that the column will take 100% of the available space. Next, we will specify how many rows our grid should have. First, at the top, we will have a header. It will be 0.2 frunit. The rest of the rows on the page will take 3 frunits.
I will set the grid template area property to header main. So no sidebar here. Let's also set the display property for the sidebar to none. As mentioned, on the medium sized screens, we also need to show both icons, the menu icon in the header and the close icon in the sidebar, once it's open after the click. So let's set the display property to inline for both these icons.
Now, let's focus on what we want our dashboard to look like on small size screens. In that case, I also want the sidebar hidden. However, this time I don't want the summary cards and charts displayed side by side.
Instead, I want them displayed one per row. So we will have the first card, below that we will have the second, then below that the third and finally below the third card. we will have the fourth card. The same with the charts.
I don't want them side by side. Instead, I want the second chart displayed below the first one. Just like with medium-sized screens, I also want to show the menu icon in the header and the corresponding close icon in the sidebar so that the user can click on it and close the sidebar. The behaviors of the sidebar, menu and close icons have already been defined in the media query for medium size screens. These properties will be inherited by media query for small size screens and will be applied as well.
Here, we only need to specify what will be new for small screens, that is, displaying cards and charts one below the other. First, let's change how the summary cards will be displayed. I will set the grid template columns. to 1 fr unit the gap to 10 pixels and the margin bottom to 0. as for the charts i will set the grid template columns to 1 fr unit and the margin tab to 30 pixels finally our last media query for extra small screens the only change i want to make here compared to the small size screens is to hide the search icon in the header so let's set the display property of the header left to none.
We can now test this out. The live server is still running so let's head to the browser. Great!
The layout of our admin dashboard is responsive right now and it automatically adapts when I resize the browser window. Everything is working as expected. We've now completed the admin dashboard and we've learned a lot about HTML and CSS and a little bit about JavaScript.
We hope you've enjoyed this tutorial. If you like this video, please give it a thumbs up and consider subscribing to our channel, so you can be notified whenever we post something new. It really helps with the algorithm to get our videos out there to more and more people, so that we can continue making them. We really appreciate it.