Tutoriel : Créer un tableau de bord avec HTML, CSS et JS

Ce que vous allez construire

Un tableau de bord (dashboard) complet avec des cartes de statistiques, un graphique, une liste de transactions récentes et un layout responsive avec sidebar. Ce type d’interface est utilisé dans les outils de gestion, les panels admin, et les applications SaaS. Tout est construit en HTML, CSS et JavaScript vanilla.

La structure HTML

<div class="dashboard">
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="sidebar-brand">
      <h2>MonApp</h2>
    </div>
    <nav class="sidebar-nav">
      <a href="#" class="nav-item activé">📊 Dashboard</a>
      <a href="#" class="nav-item">👥 Clients</a>
      <a href="#" class="nav-item">📦 Produits</a>
      <a href="#" class="nav-item">💰 Ventes</a>
      <a href="#" class="nav-item">⚙️ Paramètrès</a>
    </nav>
  </aside>

  <!-- Contenu principal -->
  <main class="main-content">
    <header class="top-bar">
      <h1>Tableau de bord</h1>
      <div class="user-info">
        <span>Bienvenue, Mamadou</span>
      </div>
    </header>

    <!-- Cartes de statistiques -->
    <div class="stats-grid">
      <div class="stat-card">
        <span class="stat-label">Revenu du mois</span>
        <span class="stat-value">2 450 000 FCFA</span>
        <span class="stat-change positive">+12.5%</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Nouveaux clients</span>
        <span class="stat-value">38</span>
        <span class="stat-change positive">+8.2%</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Commandes</span>
        <span class="stat-value">156</span>
        <span class="stat-change négative">-3.1%</span>
      </div>
      <div class="stat-card">
        <span class="stat-label">Taux de conversion</span>
        <span class="stat-value">4.7%</span>
        <span class="stat-change positive">+0.8%</span>
      </div>
    </div>

    <!-- Graphique + Transactions -->
    <div class="content-grid">
      <div class="chart-card">
        <h3>Revenus mensuels</h3>
        <canvas id="revenueChart" height="300"></canvas>
      </div>
      <div class="transactions-card">
        <h3>Transactions récentes</h3>
        <ul id="transactionList" class="transaction-list"></ul>
      </div>
    </div>
  </main>
</div>

Le CSS du dashboard

* { margin: 0; padding: 0; box-sizing: border-box; }

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Sidebar */
.sidebar {
  background: #1a1a2e;
  color: white;
  padding: 20px 0;
}

.sidebar-brand {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-item {
  display: block;
  padding: 12px 20px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.2s;
}

.nav-item:hover, .nav-item.activé {
  background: rgba(255,255,255,0.1);
  color: white;
}

/* Contenu principal */
.main-content {
  background: #f5f7fa;
  padding: 24px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* Cartes statistiques */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a2e;
}

.stat-change {
  font-size: 0.85rem;
  font-weight: 600;
}

.stat-change.positive { color: #27ae60; }
.stat-change.négative { color: #e74c3c; }

/* Graphique et transactions */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.chart-card, .transactions-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.transaction-list {
  list-style: none;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.transaction-item .amount.credit { color: #27ae60; }
.transaction-item .amount.debit { color: #e74c3c; }

/* Responsive */
@media (max-width: 768px) {
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { display: none; } /* Menu hamburger en JS */
  .content-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

Le JavaScript : graphique simple avec Canvas

// Dessiner un graphique en barres basique
function drawBarChart(canvasId, data) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');
  
  canvas.width = canvas.parentElement.clientWidth - 40;
  canvas.height = 300;
  
  const maxValue = Math.max(...data.map(d => d.value));
  const barWidth = (canvas.width / data.length) - 10;
  const chartHeight = canvas.height - 40;
  
  data.forEach((item, index) => {
    const barHeight = (item.value / maxValue) * chartHeight;
    const x = index * (barWidth + 10) + 5;
    const y = chartHeight - barHeight;
    
    // Barre
    ctx.fillStyle = '#4a90d9';
    ctx.beginPath();
    ctx.roundRect(x, y, barWidth, barHeight, 4);
    ctx.fill();
    
    // Label
    ctx.fillStyle = '#666';
    ctx.font = '12px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(item.label, x + barWidth / 2, canvas.height - 5);
    
    // Valeur
    ctx.fillStyle = '#333';
    ctx.fillText((item.value / 1000000).toFixed(1) + 'M', x + barWidth / 2, y - 8);
  });
}

// Données de revenu mensuel
const revenueData = [
  { label: 'Jan', value: 1800000 },
  { label: 'Fév', value: 2100000 },
  { label: 'Mar', value: 1950000 },
  { label: 'Avr', value: 2300000 },
  { label: 'Mai', value: 2450000 },
  { label: 'Jun', value: 2200000 }
];

drawBarChart('revenueChart', revenueData);

// Liste des transactions
const transactions = [
  { client: 'Fatou N.', desc: 'Site vitrine', amount: 350000, type: 'credit' },
  { client: 'Orange SN', desc: 'Hébergement', amount: -25000, type: 'debit' },
  { client: 'Moussa D.', desc: 'Application mobile', amount: 800000, type: 'credit' },
  { client: 'Namecheap', desc: 'Domaine .io', amount: -12000, type: 'debit' },
  { client: 'Awa S.', desc: 'Refonte e-commerce', amount: 500000, type: 'credit' }
];

const transactionList = document.getElementById('transactionList');
transactionList.innerHTML = transactions.map(t =>
  '<li class="transaction-item">' +
    '<div><strong>' + t.client + '</strong><br><small>' + t.desc + '</small></div>' +
    '<span class="amount ' + t.type + '">' +
      (t.type === 'credit' ? '+' : '') + t.amount.toLocaleString('fr-FR') + ' F' +
    '</span>' +
  '</li>'
).join('');

Exercice

1. Ajoutez un menu hamburger pour afficher/masquer la sidebar sur mobile
2. Remplacez le graphique Canvas par Chart.js pour plus de fonctionnalités
3. Ajoutez un filtré de date sur les transactions
4. Ajoutez un mode sombre avec un toggle dans le top-bar