Proyek: Dashboard Admin

Tugas mandiri

Proyek penutup track CSS. Buat dashboard admin (misal untuk toko online, warkop, atau sekolah) yang terlihat profesional dan responsif.

Spesifikasi

1. Layout grid areas: header, sidebar, konten, (opsional) footer. min-height 100vh agar footer di bawah.
2. Sidebar: navigasi vertikal flexbox dengan link aktif dan hover effect.
3. Kartu statistik: minimal 4 kartu (pendapatan, pesanan, pelanggan, produk) memakai grid auto-fit.
4. Tabel data: tabel sederhana dengan zebra striping (nth-child) dan wrapper overflow-x auto untuk mobile.
5. Grafik batang CSS murni: visualisasi sederhana memakai div dengan height persen (tanpa library!).
6. Responsif: di bawah 768px, sidebar menjadi horizontal di atas konten atau drawer sederhana; tabel bisa scroll horizontal.
7. Mode gelap opsional (nilai plus besar): toggle variabel CSS.

Contoh grafik batang murni

.grafik {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding: 16px;
}

.bar {
  flex: 1;
  background: linear-gradient(to top, #38bdf8, #a855f7);
  border-radius: 6px 6px 0 0;
  min-height: 8px;
  transition: height 0.4s ease-out;
}

<div class="grafik">
  <div class="bar" style="height: 40%"></div>
  <div class="bar" style="height: 70%"></div>
  <div class="bar" style="height: 55%"></div>
  <div class="bar" style="height: 90%"></div>
  <div class="bar" style="height: 65%"></div>
</div>

Tabel responsif

.table-wrapper {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

tbody tr:nth-child(even) {
  background: #f8fafc;
}

tbody tr:hover {
  background: #e0f2fe;
}

Cara mengirim

Kirim HTML dan CSS via form tugas. Ini proyek paling kompleks: tunjukkan semua yang kamu pelajari dari 70 modul.

Catatan: tidak ada playground. Developer profesional menyiapkan proyek sendiri.