Proje: Dashboard UI

5 derslik projenin genel bakışı: bir dashboard arayüzü kuracaksın.

Proje: Satış Paneli

Bu 5 derslik projede bir satış paneli (dashboard) sayfasını sıfırdan biçimlendireceksin. Her derste bir parça ekleyecek, sonunda tam bir panel elinde olacak.

Projede şunları kullanacaksın:

CSS grid ile yan menü, üst bilgi ve içerik düzeni
Flex ile yan yana KPI kartları
Özel değişkenler ile tema renkleri
:nth-child ile zebraya çizgili tablo
:hover ve geçişlerle satır vurgusu

Hazırsan başlayalım.

Proje yol haritası

Projeyi adım adım şöyle kuracağız:

İskelet ve tema: :root değişkenleriyle temayı tanımla, panel iskeletini hazırla.
Yan menü ve üst bilgi: display: grid ve grid-template-areas ile üç bölgeyi yerleştir.
KPI kartları: display: flex ile kartları yan yana diz, gap ile aralarına boşluk koy.
Veri tablosu: border-collapse ile çerçeveleri birleştir, :nth-child(even) ile zebraya yap.
Proje sonu: geçişlerle parlat, bölümleri yorumlarla ayır.

Her dersin başlangıç kodu önceki dersin çözümünü içerir; sen sadece yeni parçayı eklersin.

Tema değişkenleri :root içinde

Bir satış panelinde aynı renkleri onlarca yerde kullanırız. Bunları her yerde tek tek yazmak yerine özel değişkenler (custom property) ile bir kez tanımlarız.

Değişkenler :root seçicisinde tanımlanır; çift tire ile başlar ve var() işleviyle çağrılır:

:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

.dashboard {
  background: var(--bg);
}

Böylece temayı tek yerden değiştirebilirsin.

Uygulama Stil sayfasını başlat: başlık yorumu ve :root

Stil sayfasının en üstüne bir yorum ekle; içine Satış Paneli yaz. Sonra bir :root bölümü aç ve iki değişken tanımla: --bg için #f5f7fa, --card-bg için #ffffff. Her bildirimi noktalı virgülle kapat.

Örnek çözümü göster

/* Satış Paneli stil sayfası */

:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

Kendini test et

Projede bir dersin başlangıç kodu nasıl çalışır?
- Her dersin başlangıç kodu önceki dersin çözümünü içerir
- Her ders boş bir dosyayla başlar
- Başlangıç kodu yoktur, her şey sıfırdan yazılır
- Başlangıç kodu yalnızca son derste görünür
Cevabı göster

Her dersin başlangıç kodu önceki dersin çözümünü içerir — Doğru. Başlangıç kodu her adımda birikir; sen sadece yeni parçayı eklersin.
Değişkenleri görevleriyle eşleştir

:root

tema değişkenleri tanımı
--bg

panel arka planı
--card-bg

kart arka planı
var()

değişkeni çağırma

Sıradaki ders: Sidebar ve üst bilgi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler