Creating a Responsive Admin Dashboard

Oct 17, 2024

Building a Responsive Admin Dashboard

Introduction

  • Tutorial on building a responsive admin dashboard using HTML, CSS, and JavaScript.
  • No CSS frameworks like Bootstrap will be used.
  • Focus on CSS Grid for layout and media queries for responsiveness.

Dashboard Layout

  1. Top Section: Header
  2. Middle Section: Statistics with two types of charts
    • Left: Bar chart showing top 5 products
    • Right: Mixed chart showing purchase and sales orders
  3. Sidebar: Navigation menu
  • Fully responsive design, looks good on different devices (iPhone, iPad, Nest Hub Max).

Prerequisites

  • Code Editor: Visual Studio Code (free and easy to install).
    • Features: IntelliSense, debugging, and code refactoring.
  • Extensions: Install Live Server for local development and live reload.

Project Setup

  1. Create Project Folder:
    • Name: admin-dashboard
  2. Project Files:
    • index.html
    • CSS/styles.css
    • JS/scripts.js

Basics of HTML, CSS, and JavaScript

  • HTML: Structure of the webpage (text, forms, buttons).
    • Elements are written in text-based code.
  • CSS: Styles (colors, fonts, layouts).
  • JavaScript: Adds interactivity and manipulates DOM elements.
    • DOM: Tree-like structure representing HTML elements.

HTML Structure

  • Start with a simple HTML5 structure:
    • <!DOCTYPE html>
    • <html lang="en">
    • <head>
      • Meta tags for character encoding and viewport settings
      • Title: Admin Dashboard
    • <body>
      • Placeholder heading (remove later).

Linking CSS and JavaScript

  1. Link CSS in <head>:
    • <link rel="stylesheet" href="CSS/styles.css">
  2. Link JavaScript before closing </body> tag:
    • <script src="JS/scripts.js"></script>

CSS Grid Layout

  • Use CSS Grid to create a two-dimensional layout.
  • Grid Properties:
    • Define number of rows and columns
    • Specify sizes (using pixels or fr units)
    • Use grid-template-areas for layout structure.
  • Set grid dimensions and areas for header, sidebar, and main container.

Styling the Dashboard

  • Use CSS to define visual styles (background colors, paddings, etc.).
  • Use selectors (type, class, ID) appropriately.

Adding Icons and Fonts

  • Import fonts from Google Fonts (e.g., Montserrat) and Material Icons.
  • Apply styles for icons and header elements.

Sidebar and Navigation

  • Add menu icon to toggle sidebar visibility on smaller screens.
  • Use JavaScript to open/close sidebar based on user interaction.

Main Section and Statistics

  • Add title for main section and create cards for statistics.
  • Use CSS grid layout for cards and charts.

Integrating Apex Charts

  • Use Apex Charts library for interactive and responsive charts.
  • Include the script in the HTML file and initialize charts in the JavaScript.

Making the Dashboard Responsive

  • Use CSS media queries to adjust layout based on screen size.
  • Define breakpoints for medium, small, and extra small screens.
  • Modify styles to ensure elements stack vertically or remain side-by-side as needed.

Conclusion

  • Successfully built a responsive admin dashboard.
  • Covered HTML, CSS, and some JavaScript.
  • Encourage viewers to like and subscribe for more tutorials.