CSS temelleri
Seçiciler, kutu modeli, düzen ve duyarlı tasarım.
Seviye 101 · 21 ders · 18 pratik lab
Dersler
Seçiciler ve görünüm
- CSS'i bağlamak ve seçiciler: CSS dosyasını sayfaya bağlamayı ve seçicilerle hangi öğenin biçimleneceğini belirlemeyi öğrenirsin.
- Özgüllük, basamaklanma ve miras: İki kural çakıştığında hangisinin kazandığını açıklar, !important’a başvurmadan çakışmayı çözersin.
- Sözde sınıflar ve sözde öğeler: Üzerine gelme, odak ve ilk-çocuk gibi durumları :hover, :focus, ::before ile biçimlendirirsin.
- Birimler: px, em, rem, %, vw: Sabit ve göreli birimleri ayırt eder, kullanıcının yazı boyutu ayarına saygı duyan sayfalar yazarsın.
- Metin ve yazı tipleri: Yazı tipini, boyutunu, kalınlığını ve satır aralığını ayarlayarak metni okunaklı hâle getirirsin.
- Renkler: hex ve RGB: Renkleri hex ve RGB değerleriyle yazmayı ve metin ile zemin arasında okunur bir fark bırakmayı öğrenirsin.
- Arka planlar: Öğelere arka plan rengi ve görseli vermeyi, görselin nasıl yerleşeceğini ayarlamayı öğrenirsin.
- Kısa görev: bir makaleyi okunur biçimlendir
Kutular ve düzen
- Kutu modeli: padding, border, margin, box-sizing: Her öğenin içerik, iç boşluk, kenarlık ve dış boşluktan oluşan bir kutu olduğunu görür, boyutunu doğru hesaplarsın.
- Konumlandırma: relative, absolute, sticky: Öğeleri normal akıştan çıkarmadan ya da bilerek çıkararak yerleştirir, katman sırasını z-index ile yönetirsin.
- Flexbox ile düzen: Flexbox ile öğeleri yan yana ya da alt alta dizmeyi, hizalamayı ve aralarındaki boşluğu ayarlamayı öğrenirsin.
- CSS Grid ile iki boyutlu düzen: Satır ve sütunlardan oluşan bir sayfa iskeleti kurar, Flexbox ile Grid arasında doğru seçimi yaparsın.
- Yatay gezinme menüsü: Bağlantılardan oluşan yatay bir gezinme menüsünü baştan sona biçimlendirerek yaparsın.
- Tabloları biçimlendirmek ve duyarlı tasarım: Tabloları okunaklı biçimlendirmeyi ve sayfanın telefon gibi küçük ekranlara uyum sağlamasını öğrenirsin.
- Medya sorguları ve önce-mobil tasarım: Küçük ekrandan başlayıp geniş ekranlara genişleyen duyarlı bir sayfa yazarsın.
- Kısa görev: iki sütunlu duyarlı düzen
Tema, hareket ve erişilebilirlik
- CSS değişkenleri ve açık/koyu tema: Renkleri tek yerden yönetir, kullanıcının sistem temasına uyan açık ve koyu tema yaparsın.
- Geçişler, animasyonlar ve azaltılmış hareket: Yumuşak geçişler ekler, hareketten rahatsız olan kullanıcılar için animasyonu kapatırsın.
- Erişilebilir CSS: odak halkası ve renk karşıtlığı: Odak halkasını silmeden güzelleştirir, metin ve arka plan karşıtlığını ölçüp düzeltirsin.
- Tailwind CSS ile yardımcı sınıflar: Hazır yardımcı sınıflarla bir bileşeni hızla biçimlendirir, bu yaklaşımın klasik CSS’ten farkını anlarsın.
- Bitirme görevi: sayfayı biçimlendir: Düz bir HTML sayfasını kurgusal bir kişi için renk, düzen ve menüyle biçimlendirip telefonda da düzgün görünmesini sağlarsın.
Pratik lablar
- Doğru öğeyi seç: Beş farklı öğeyi yalnızca seçici yazarak renklendir; HTML'e sınıf ekleme.
- Kazanmayan kuralın nedenini bul: Mavi olması gereken düğme gri kalıyor; özgüllüğü hesaplayıp !important kullanmadan düzelt.
- Kalıtımla gelen stili temizle: Yazı tipi ve renk ayarları iç içe bileşenlere istenmeden geçiyor; inherit, initial ve unset ile düzelt.
- Makaleyi okunur yap: Satır uzunluğu, satır aralığı ve yazı boyutunu rem ile ayarlayarak uzun bir yazıyı okunur hale getir.
- em zincirini çöz: İç içe listelerde büyüyen yazı boyutunun nedenini bul ve birimleri rem'e çevirerek düzelt.
- Arka plan ve renkleri marka rehberine uydur: Zümrüt Çay'ın renk kodlarını ve degrade arka planını sayfaya uygula, kontrast oranlarını doğrula.
- Kartlar arasındaki boşluğu düzelt: Kartların arasındaki düzensiz boşlukların margin çökmesinden geldiğini göster ve düzelt.
- Taşan kutuyu box-sizing ile düzelt: Yüzde genişlikli ve dolgulu sütunlar alt satıra kayıyor; box-sizing ile hesabı düzelt.
- Yapışkan başlık ve rozet konumla: Sayfa başlığını sticky, ürün kartındaki indirim rozetini absolute ile konumla ve z-index çakışmasını çöz.
- Yatay menü yap: Dikey listeyi Flexbox ile eşit aralıklı yatay bir menüye çevir.
- Bozuk düzeni Flexbox ile düzelt: float ile kurulmuş, yüksekliği bozuk üç sütunlu düzeni Flexbox ile yeniden yaz.
- Ürün listesini Grid ile diz: Öne çıkan ürün iki hücre kaplayacak şekilde ürün listesini CSS Grid ile kur.
- Viewport eksikliğini düzelt: Telefonda küçücük görünen sayfaya viewport ekle ve farkı cihaz kipinde göster.
- İki sütunu mobilde alt alta al: Mobil öncelikli medya sorgularıyla iki sütunlu düzeni dar ekranda tek sütuna indir.
- Geniş tabloyu telefonda kullanılabilir yap: Sekiz sütunlu fiyat tablosunu dar ekranda kaydırmalı kapsayıcı veya kart görünümüyle okunur hale getir.
- Odak halkasını geri getir: outline: none ile silinmiş odak göstergesini :focus-visible ile belirgin biçimde geri ekle.
- Değişkenlerle karanlık tema kur: Renkleri CSS değişkenlerine taşı ve prefers-color-scheme ile karanlık tema ekle.
- Animasyonları hareket tercihine uydur: Sayfadaki geçiş ve animasyonları prefers-reduced-motion'a göre azalt, kontrast hatalarını da gider.
Kurs hakkında
Seçiciler, kutu modeli, düzen ve duyarlı tasarım.
Ne öğreneceksin
- Seçiciler ve görünüm
- Kutular ve düzen
- Tema, hareket ve erişilebilirlik
Ön koşullar
Ön bilgi gerekmez; kurs sıfırdan başlar.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs başlangıç düzeyindedir; her terim ilk geçtiği yerde açıklanır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.