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-childile zebraya çizgili tablo:hoverve 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:
:rootdeğişkenleriyle temayı tanımla, panel iskeletini hazırla. - Yan menü ve üst bilgi:
display: gridvegrid-template-areasile üç bölgeyi yerleştir. - KPI kartları:
display: flexile kartları yan yana diz,gapile aralarına boşluk koy. - Veri tablosu:
border-collapseile ç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