From HTML to Vue: Progression of building a dashboard from simple HTML into a Vue Single-Page Application (SPA).

Introduction

Modern dashboards rarely start as complex frameworks. They progress and grow as you make improvements and adjustments over time.

In this tutorial, we build a dashboard the same way real-world applications often grow: starting with simple, semantic HTML; layering in CSS for layout; adding small amounts of JavaScript for behavior; and only later introducing Vue to manage state and user interface (UI) updates. By following this progression, you’ll learn not just how to build a dashboard, but why single-page applications (SPA) exist-and how frameworks like Vue build on top of solid fundamentals rather than replacing them. The goal is clarity, not complexity: understanding how a plain HTML page naturally becomes a modern, maintainable SPA.

Why Dashboards Are a Great Way to Learn Web Development

asdf

Project Overview: A Dashboard Built in Layers

asdf

Folder Structure

This is the preferred folder structure that can be commit to GitHub. Shows clear separation between HTML, CSS, and JavaScript. Also this is how the vue framework organizes things.

simple-dashboard/
│
├── README.md
│
├── index.html
│
├── assets/
│   ├── css/
│   │   └── styles.css
│   │
│   ├── js/
│   │   └── app.js
│   │
│   └── images/
│
├── exercises/
│   ├── 01-layout.md
│   ├── 02-css.md
│   └── 03-js.md
│
└── .gitignore

Tools Used

This tutorial intentionally uses a minimal, widely available toolset so the focus stays on learning fundamentals rather than managing configuration or dependencies.

Code Editor

• Visual Studio Code (VS Code)
  A lightweight, free code editor with excellent support for HTML, CSS, and JavaScript. VS Code provides syntax highlighting, file navigation, and live feedback without imposing any framework or build process.

Browser

• Modern Web Browser (Chrome, Edge, or Firefox)
  Used for rendering the dashboard and inspecting layout, CSS, and JavaScript behavior with built‑in developer tools.

Platform

• WordPress (Gutenberg Editor)
  The examples are embedded using Gutenberg’s Custom HTML and Code blocks. This mirrors a real‑world scenario where developers often need to demonstrate or prototype UI concepts inside an existing CMS rather than a blank project.

Technologies

• HTML — for semantic structure
• CSS — for layout using Grid and Flexbox
• JavaScript — for basic interaction and behavior

No libraries, preprocessors, or frameworks are required at this stage.

The goal is to ensure every concept introduced here works the same way whether you’re building a standalone site, embedding content in WordPress, or preparing for a framework like Vue.

What We Are Not Using (and Why)

Just as important as the tools we use are the ones we deliberately avoid. This section explains those omissions so readers understand the why, not just the what.

❌ JavaScript Frameworks (Vue, React, etc.)

Frameworks are powerful, but they abstract away core concepts like DOM structure, layout, and event handling. In this tutorial, we avoid frameworks so you can clearly see:

• how HTML defines structure
• how CSS controls layout
• how JavaScript adds behavior

Vue is introduced later as an evolution, not a starting point.

❌ Build Tools (Vite, Webpack, npm)

Build tools add complexity that isn’t necessary for learning layout and interaction fundamentals. Skipping them allows:

• faster setup
• fewer points of failure
• easier copy‑and‑paste experimentation

This also makes the examples easier to embed in environments like WordPress.

❌ CSS Frameworks (Bootstrap, Tailwind, etc.)

CSS frameworks can hide how layouts actually work. By writing CSS directly:

• Grid and Flexbox concepts are explicit
• spacing and alignment are intentional
• debugging becomes easier

Once you understand native CSS, adopting a framework later becomes much simpler.

❌ External JavaScript Libraries

No charting libraries, UI kits, or helper utilities are used. This keeps the examples:

• transparent
• easy to reason about
• free from third‑party assumptions

Every line of behavior in the dashboard can be traced directly to code you can read and understand.

❌ Server‑Side Logic or APIs

This dashboard is intentionally static at first. Data, APIs, and backend concerns are excluded so the focus stays on:

• layout
• interaction
• UI structure

Dynamic data can always be layered on later.

Why This Matters

By limiting the toolset and avoiding unnecessary abstractions, this tutorial mirrors how many real dashboards are actually built:

• starting simple
• evolving incrementally
• adopting frameworks only when they solve a clear problem

Frameworks don’t replace fundamentals — they build on them.

This approach not only makes the dashboard easier to understand today, but also prepares you to scale it confidently into a Vue‑powered single‑page application later.

Exercise 01: Building the Dashboard Layout with HTML

Semantic HTML and Page Regions

Header, Sidebar, Main Content, and Footer

The feature that auto-populates index.html in VS Code is called Emmet. It expands short abbreviations into full HTML (and CSS) structures. It ships enabled by default in VS Code – no extension required. Create a new file, save as index.html. Type ! exclamation and then enter to instantly generate a full HTML5 boilerplate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Create sample dashboard

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Simple Dashboard</title>
  styles.css
</head>
<body>

<header class="topbar">
  <h1>Dashboard with Key Performance Indicators (KPI)</h1>
</header>

<div class="layout">
  <aside class="sidebar">
    <nav>
      <ul>
        <li>Overview</li>
        <li>Reports</li>
        <li>Settings</li>
      </ul>
    </nav>
  </aside>

  <main class="content">
    <section class="kpis">
      <article class="card">KPI 1</article>
      <article class="card">KPI 2</article>
      <article class="card">KPI 3</article>
    </section>

    <section class="details">
      <h2>Details</h2>
      <div class="panel">Panel content</div>
    </section>
  </main>
</div>

app.jsscript>
</body>
</html>

README.md for GitHub

# Simple Dashboard (HTML, CSS, JavaScript)

This project is a beginner-friendly dashboard built using:
- Semantic HTML
- CSS Grid & Flexbox
- Vanilla JavaScript

## Goals
- Learn basic dashboard layout
- Understand separation of concerns
- Prepare for frameworks like Vue

## Getting Started
1. Clone the repo
2. Open `index.html` in a browser
3. Edit files in VS Code

## Exercises
See the `exercises/` folder.

Exercise 02: Styling the Dashboard with CSS

Using CSS Grid for the Page Layout

Using Flexbox for Key Performance Indicators (KPI) Cards

Responsive Design Considerations

Uses CSS Grid + Flexbox, which is the dominant dashboard layout approach.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* Top bar */
.topbar {
  height: 56px;
  background: #d7c481;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

/* Page shell */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 56px);
}

/* Sidebar */
.sidebar {
  background: #592e59;
  color: white;
  padding: 1rem;
}

/* Main content */
.content {
  padding: 1rem;
  background: #e4fde1;
}

/* KPI cards */
.kpis {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }
}

Web page should look similar to this

Exercise 03: Adding Behavior with JavaScript

Wiring JavaScript to the DOM

Example: toggle sidebar

// app.js
const sidebar = document.querySelector('.sidebar');

document.addEventListener('keydown', (e) => {
  if (e.key === 's') {
    sidebar.classList.toggle('hidden');
  }
});

Dashboard with JavaScript added should look like this

Progressive Enhancements

Mental Model: How a Dashboard Progresses into a Single-Page Application

Stage 1: Static HTML

Stage 2: HTML, CSS, and JavaScript

Stage 3: Single-Page Behavior Without a Framework

Stage 4: Vue Takes Over Rendering

Should a Single-Page Application Include a Footer?

When a Footer Makes Sense

When a Footer Can Be Omitted

Best Practice for Learning Projects

Preparing the Dashboard for Vue

Adding a Mounting Point

What Vue Will Control

What Vue Will Not Control

What Changes When the Dashboard Becomes a Vue SPA?

asdf

Next Steps: Where to Go After This Tutorial

asdf