HTML CSS JavaScript Tutorial for Beginners | Build Admin Dashboard From Scratch

Building a Responsive Admin Dashboard using HTML, CSS and JavaScript

In this tutorial, we will learn how 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.

Introduction

• The admin dashboard consists of a header, statistics section, two charts created using Apex charts library and a sidebar with navigation menu.

• The bar chart presents the five most popular products in the system while the mixed chart combines two area charts showing changes in purchase orders over time and sales orders.

• The project is fully responsive and looks great on devices of all sizes.

Setting up Visual Studio Code

• Visual Studio Code is a free code editor that supports intellisense code completion, debugging and code refactoring.

• Live Server extension can speed up our work and improve productivity by launching a local development server that allows for live reload of our project.

• To install Live Server in Visual Studio Code go to extensions and search for "Live Server".

• Create a directory where we will keep our code by going to Explorer > Open Folder > New Folder button. Name the folder "admin dashboard".

• Create three files: index.html for HTML code, styles.css for CSS code, scripts.js for JavaScript code.

HTML5 Structure

• An HTML page consists of text-based code that describes the structure of the web page such as text forms buttons etc.

• HTML elements are enclosed using angle brackets and nested within other elements.

• The basic structure of an HTML5 page consists of a doctype, html tag, head section with meta tag and title, and body section with content.

Introduction to HTML

This section introduces the basics of HTML, including the structure of an HTML document and how to create headings.

HTML Basics

• The HTML tag is used to indicate the beginning of the content of a web page.

• The head section provides information about the page that will be useful for web browsers.

• The body tag indicates the visible part of an HTML page that users interact with.

• Headings are defined with H1 to H6 tags, with H1 being the most important heading and H6 being the least important.

Launching a Local Development Server

This section covers how to launch a local development server using Visual Studio Code's Live Server extension.

Launching a Local Development Server

• Use Visual Studio Code's Live Server extension to launch a local development server that allows for live reloading of your web page.

• The IP address 127.0.0.1 is used for localhost, which is your local computer.

• To stop the server, click on "Port: 5500" in the bottom right corner of Visual Studio Code's status bar.

Linking CSS and JavaScript Files

This section covers how to link CSS and JavaScript files in an HTML document.

Linking CSS Files

• Use a link tag in the head section of your HTML document to include a CSS file.

• Add an href attribute pointing to the URL of your CSS file within your link tag.

Linking JavaScript Files

• Use a script tag in the body section of your HTML document to include a JavaScript file.

• Add an SRC attribute pointing to the URL of your JavaScript file within your script tag.

• Place your JavaScript at the bottom of the body section of your page to prevent errors and speed up response time.

Building the Layout with CSS Grid

In this section, we will learn how to use CSS grid to create two-dimensional grid layouts with rows and columns. We will also learn how to specify the size of columns and rows, where to place items inside our grid, and what should happen when the size of the grid changes or more items are added.

Using CSS Grid

• CSS grid allows us to create two-dimensional grid layouts with rows and columns.

• To use CSS grid, we need to specify four things:

• The number of columns and rows our grid should have

• The size of those columns and rows

• Where we want to place items inside our grid

• What should happen when the size of the grid changes or more items are added.

• Beginners may find this confusing at first but it will be easier once you see a practical example.

Defining the Structure

• Start by adding a div tag with a class of "grid-container" as a container for other HTML elements that we want to style with CSS.

• Add a header tag with a class of "header" as a container for the head section of our website.

• Add an aside tag with an ID of "sidebar" as a container for content that is not directly related to the main content of the page.

• Add a main tag with a class of "main-container" as the main content of the page.

Adding Styles in styles.css

• Define styles for our admin dashboard layout, spacing, colors, fonts, and other elements that make our web page look exactly how 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 the rule and a declaration block that specifies how properties of the selected target should be styled.

• Selectors are patterns used to select one or more HTML elements that we want to style. There are three types of selectors: type selector, class selector, and ID selector.

Creating a Grid Layout

• Set the body of the page to have a margin and padding of 0 so that it fills the entire screen without any extra space around the page.

• Use CSS grid to create our layout by specifying the number of columns and rows, their size, where we want to place items inside our grid, and what should happen when the size of the grid changes or more items are added.

Grid Layout

In this section, we learn how to specify the number of columns and rows in a grid layout using the grid-template-columns and grid-template-rows properties. We also learn about the grid-template-areas property that allows us to describe what the layout looks like using easy-to-understand notation.

Specifying Columns and Rows

• To specify the number of columns in a grid layout, use the grid-template-columns property.

• Use fixed length units such as pixels or percentages for width values.

• Use the FR unit for flexible length values.

• One FR unit is one part of the whole available space on a page.

• Example: grid-template-columns: 1fr 1fr 1fr 1fr;

Defining Areas

• The grid-template-areas property allows us to describe what the layout looks like using easy-to-understand notation.

• Example:

.grid-container

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-template-rows: 0.2fr 3fr;

grid-template-areas:

"sidebar header header header"

"sidebar main main main";

Setting Height and Width

• Set height using VH (viewport height).

• Set width using fixed length units such as pixels or percentages for width values or FR unit for flexible length values.

Admin Dashboard Layout

In this section, we learn how to define an admin dashboard layout with four equal columns. We also set up a sidebar with a fixed width of 260 pixels and three remaining columns defined using FR units.

Defining Columns and Rows

• Define four equal columns by setting them all to one FR unit each.

• Set the sidebar to always have a width of 260 pixels.

• The remaining available space on the page will be divided into three equal columns using FR units.

Setting Grid Areas

• Use the grid-area property to set grid areas for each section of the dashboard.

• Example:

.header

grid-area: header;

height: 70px;

background-color: royalblue;

.sidebar

grid-area: sidebar;

height: 100%;

width: 260px;

background-color: gray;

.main

grid-area: main;

background-color: beige;

Font Selection

In this section, we learn how to select a font for our application from Google Fonts.

Selecting a Font

• Go to https://fonts.google.com/ and search for the font you like.

• Select the styles you want.

Setting up Material Icons and CSS

In this section, the instructor explains how to set up Material Icons and CSS for the admin dashboard.

Adding Material Icons

• To use outline material icons, copy the link tag from https://fonts.google.com/icons and paste it into the head section of index.html file.

• Modify the link tag by adding "+ sign" and "outline" to get the version of icons required.

• Search for icons on https://fonts.google.com/icons by selecting "Material Icons" in the drop-down menu and checking "outline version".

Styling with CSS

• Style body with background color, font family, and font color.

• Add class selector ".material-icons-outline" for icons with vertical align property set to middle and line height to 1 pixel.

• Modify styles of header, sidebar, and main container by removing background color, setting display property to flex, align items to center, justify content to space between.

• Add padding and box shadow under header section.

• Replace gray with a darker color for sidebar. Set overflow property to auto on y-axis.

• Remove background color from main container. Set overflow-y property to auto.

Adding Menu Icon for Small Screens

In this section, the instructor explains how to add a menu icon that opens a sidebar when clicked on small screens.

Adding Menu Icon

• Add div tag with class "menu-icon".

• Copy span tag from material icon website inside new div.

• Add an onclick attribute that calls a JavaScript function named openSidebar().

Writing JavaScript Function

• Define a sidebarOpen flag set initially as false.

• Write openSidebar() function that toggles sidebarOpen flag value between true/false based on whether or not it is currently open or closed.

Introduction to HTML and CSS

In this section, we will learn how to reference HTML elements by ID method and define the open and closed sidebar functions. We will also work on the header section of the page.

Referencing HTML Elements by ID Method

• Use the ID method to reference HTML elements by layer ID.

Defining Open and Closed Sidebar Functions

• Define the open sidebar function that checks if the sidebar is currently open or not. If it's closed, add a new class to the sidebar element called "sidebar-responsive". Set the sidebar open flag to true.

• Define the corresponding closed sidebar function that checks if the sidebar is currently open or not. If it's open, remove the "sidebar-responsive" class from the sidebar element. Set the sidebar open flag to false.

Working on Header Section

• Add two div tags with classes of "header-left" and "header-right" respectively for items on left and right side of header section.

• Add a search icon inside div with class "header-left". Add notification bell, email, and user account icons inside div with class "header-right". Hide menu icon using display property for large screens where sidebar is always visible.

Working on Sidebar

In this section, we will work on adding a logo consisting of an icon and text at top of sidebar followed by navigation menu items.

Adding Logo

• Add a div tag with class "sidebar-title" followed by another div tag with class "sidebar-brand". Add sorry icon inside div with class "sidebar-brand".

Adding Close Icon

• Add close icon below div with class "sidebar-brand". Add an onclick handler to the span tag that calls the close sidebar function.

Adding Navigation Menu Items

• Add an unordered list with class "sidebar-list" below div with class "sidebar-title". Add list items with class "sidebar-list-item" for each menu item.

Defining Style Rules for Sidebar

• Define style rules for classes "sidebar-title" and "sidebar-brand". Set display property to flex, justify-content to space-between, align-items to center, padding of 30 pixels, and margin of 30 pixels for class "sidebar-title". Set margin-top property to 15 pixels, font size to 20 pixels, and font weight for class "sidebar-brand".

Styling the Sidebar and Main Section

In this section, we will style the sidebar and main section of the dashboard page.

Styling the Sidebar

• The div tag with class sidebar-Dash-title is the parent element, and the span with the icon located inside is the child element.

• A child selector will target all child elements of a parent. We set display property to none to hide it on large screens where sidebar is always visible.

• Define style rules for class sidebar-Dash-list. Set padding property to zero, margin-top to 15 pixels, and list-style-type to none.

• Define style rules for class sidebar-Dash-list-item. Set padding to 20 pixels on all four sides of the element.

• Use a hover selector to define what happens when we hover over a list item with class sidebar-Dash-list-item.

• Define style roles for class sidebar-responsive. Set display property to inline, mark it as important, and set position property to absolute.

Styling the Main Section

• Add a div with class main-Dash-title at top of main section. Add heading inside it.

• Add a div with class main-Dash-cards as container for statistics section. Inside it add four cards using code snippet that creates first card.

• Inside each card add div with class card, then inside it add another div with class card-Dash-inner. Add heading and icon inside this div.

• Define style rules for class main-Dash-title. Set display property to flex and justify-content to space-between.

• Define style rules for class main-Dash-cards. Set display property to grid, grid-template-columns to 1fr 1fr 1fr 1fr, gap property to 20 pixels, and margin property of 20 pixels at top and bottom and zero on left and right.

• Define style rules for class card. Set display property to flex-direction column, justify-content the space around padding to 25 pixels, a border radius of 5 pixels.

• Use first-child selector to select the first card out of four. Use nth-child selector to select each card in a different way.

Selecting and Styling Cards

In this section, the instructor explains how to select and style cards using CSS.

Selecting Cards

• To select a specific card, use the nth-child selector.

• To select the third card out of four, use div.main-Dash-cards div.card:nth-child(3).

• To select the fourth card out of four, use div.main-Dash-cards div.card:nth-child(4).

Styling Cards

• To style the .card-inner class, set display: flex, align-items: center, and justify-content: space-between.

Adding Charts with Apex Charts Library

In this section, the instructor explains how to add charts using Apex Charts library.

Including Apex Charts Library

• Go to https://cdnjs.com/libraries/apexcharts and copy the script tag for the latest version.

• Paste it at the bottom of the body section of your HTML page just above scripts.js.

Creating Bar Chart

• Add a div with a class of charts and inside another div with a class of charts-card.

• Add a heading with a class of chart-title type "Top 5 Products".

• Add another div with an ID of bar-chart.

• Copy JavaScript code snippet from Apex Charts documentation for horizontal bar chart.

• Change options to bar chart options.

• Replace values provided in code snippet with five new values for top 5 products.

• Modify categories displayed on x-axis to laptop, phone, monitor, headphones, and camera.

• Add y-axis title property as "count".

• Change chart selector indicated by hash sign to #bar-chart.

Creating Mixed Chart

• Add another div below previous chart with an ID of area-chart.

• Copy JavaScript code snippet from Apex Charts documentation for mixed chart.

• Replace values provided in code snippet with new values for purchase and sales orders.

• Change chart selector indicated by hash sign to #area-chart.

Styling Charts

• Define styles for .charts class using grid layout with display: grid, grid-template-columns: 1fr 1fr, and gap: 20px.

• Define styles for .charts-card class using background color, margin bottom, padding, box sizing, border radius, and box shadow.

• Define styles for .chart-title class using display flex, align items center, and justify content center.

Creating the Second Chart

In this section, we create the second chart that will be displayed on the right. We add an MX chart that combines two area charts to show changes in purchase orders and sales over time.

Adding the MX Chart

• Go to https://apexcharts.com/javascript-chart-demos/mix-charts/line-area/ and copy the JavaScript code snippet.

• Paste it into the script.js file.

• Define two data series for purchase orders and sales orders.

• Modify labels to include months from January to July.

• Change y-axis titles to "Purchase Orders" and "Sales Orders".

• Change chart type to area chart.

• Change ID selector indicated by hash sign (#) to area-chart instead of chart.

Making Dashboard Responsive

In this section, we make the dashboard responsive so that it automatically adapts to different screen sizes.

Using CSS Media Queries

• Use CSS media queries to determine size and capabilities of viewing device.

• Use fluid proportion-based grids and flexible images for a responsive layout.

• Float grid layout requires web page sizes specified in relative units (FR unit).

• CSS media queries are basic conditional logic for CSS, allowing us to apply different styles depending on certain conditions being met.

Defining Breakpoints

• Use breakpoints to define particular viewport width or height at which a responsive design should change significantly.

• Define three media queries:

• Medium-sized screens with maximum width of 992 pixels

• Small-sized screens with maximum width of 768 pixels

• Extra small-sized screens with maximum width of 576 pixels

Adjusting Layout for Medium-Sized Screens

• Hide sidebar and main section of page.

• Display four summary cards side by side and two charts side by side.

• Show menu icon in header so user can click on it.

Specifying the Grid Layout

In this section, the speaker specifies how many rows the grid should have and sets the display property for the sidebar to none.

Setting Up the Grid Layout

• The header will be 0.2 FR unit.

• The rest of the rows on the page will take three FR units.

• Set the grid template areas property to header Main so no sidebar here.

• Set display property for sidebar to none.

Showing Icons on Medium-Sized Screens

In this section, we learn that both icons (menu icon and close icon) need to be shown on medium-sized screens.

Displaying Icons

• On medium-sized screens, show both icons (menu icon and close icon) in the sidebar after a click.

• Set display property to inline for both these icons.

Dashboard Layout on Small Screens

In this section, we learn how to adjust our dashboard layout for small screens.

Adjusting Card and Chart Display

• Sidebar hidden on small screens.

• Summary cards and charts displayed one per row: first card below that we will have second then below that third and finally below third card fourth card.

• Second chart displayed below first one just like with medium-sized screens.

• Show menu icon in header and corresponding close icon in sidebar so user can click it and close sidebar.

Adjusting Summary Cards Display

In this section, we learn how to change how summary cards are displayed.

Changing Summary Cards Display

• Set grid template columns to one FR unit.

• Gap set to 10 pixels.

• Margin bottom set to zero.

Adjusting Chart Display

In this section, we learn how to adjust chart display.

Changing Chart Display

• Set grid template columns to one FR unit.

• Margin top set to 30 pixels.

Testing the Layout

In this section, we test the layout of our admin dashboard.

Testing the Layout

• The layout of our admin dashboard is responsive and automatically adapts when resizing browser window.

• Everything is working as expected.

Conclusion

In this section, we conclude the tutorial.

Wrapping Up

• Completed admin dashboard and learned a lot about HTML and CSS and a little bit about JavaScript.

• 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.

• Thanks for watching!