Başlangıç8 hafta9 bölüm · 36 ders · 7 ödev
Baştan Sona CSS
CSS'i kural ezberleyerek değil, tarayıcının nasıl karar verdiğini anlayarak öğreten program. Kaskad ve kutu modelinden Flexbox ve Grid'e, duyarlı tasarımdan erişilebilirliğe; sonunda yayında, kendi tasarım sistemine dayanan çok sayfalı bir site.
Kime uygun
- · HTML'i yazabilen ama düzeni deneme yanılmayla kuranlara
- · Tasarımı bakarak değil anlayarak kodlamak isteyenlere
- · Duyarlı yerleşimde her seferinde takılanlara
Ön koşullar
- · HTML temelleri
- · Baştan Sona HTML'i bitirmiş olmak yeterli
Müfredat
CSS nedir, tarayıcı onu nasıl uygular24 dk
Seçiciler: doğru elemanı hedeflemek30 dk
Kaskad, özgüllük ve miras32 dk
Kutu modeli28 dk
Ödev 1 — Profil kartıödev
MDN — CSS ilk adımlarbağlantı
MDN — Özgüllük (specificity)bağlantı
Specificity Calculator — seçici puanlayıcıbağlantı
Renk yazmanın beş yolu26 dk
Yazı tipi ve tipografi30 dk
Birimler: px, rem, em, %, vw28 dk
Özel özellikler (CSS değişkenleri)30 dk
Ödev 2 — Tasarım belirteçleri ve tipografi ölçeğiödev
MDN — Özel özelliklerbağlantı
OKLCH renk seçici ve dönüştürücübağlantı
Type Scale — tipografi ölçeği üreticibağlantı
Normal akış ve display26 dk
position: akışın dışına çıkmak32 dk
z-index ve yığınlama bağlamı26 dk
Taşma, kaydırma ve gizleme24 dk
MDN — positionbağlantı
MDN — Yığınlama bağlamıbağlantı
İki eksen: ana ve çapraz28 dk
grow, shrink, basis30 dk
Sarma ve çok satırlı flex26 dk
Gerçek düzenler kurmak32 dk
Ödev 3 — Flexbox ile yönetim paneli kabuğuödev
MDN — Flexbox temelleribağlantı
Flexbox Froggy — oyunla flex alıştırmasıbağlantı
CSS-Tricks — Flexbox tam rehberibağlantı
Satır ve sütun tanımlamak30 dk
Öğeleri yerleştirmek30 dk
auto-fit, auto-fill ve duyarlı ızgara28 dk
Grid ile gerçek sayfa düzenleri30 dk
Ödev 4 — Aynı ekranı grid ile yazödev
MDN — Grid düzenibağlantı
Grid Garden — oyunla grid alıştırmasıbağlantı
CSS-Tricks — Grid tam rehberibağlantı
Mobil önce ve görüntü alanı26 dk
Medya sorguları28 dk
Akışkan tipografi ve clamp()26 dk
Kapsayıcı sorguları28 dk
Ödev 5 — Duyarlı tanıtım sayfasıödev
MDN — Kapsayıcı sorgularıbağlantı
Utopia — akışkan tipografi hesaplayıcıbağlantı
Kenarlık, köşe ve gölge26 dk
Arka planlar ve gradyanlar26 dk
Geçişler ve dönüşümler28 dk
Animasyonlar26 dk
MDN — Geçişlerbağlantı
Cubic-bezier eğri düzenleyicibağlantı
MDN — prefers-reduced-motionbağlantı
Adlandırma ve dosya düzeni28 dk
Tema: açık ve koyu28 dk
Erişilebilirlik30 dk
Hata ayıklama ve yaygın hatalar26 dk
Ödev 6 — Tema ve erişilebilirlik denetimiödev
WebAIM — Kontrast denetleyicibağlantı
MDN — prefers-color-schemebağlantı
web.dev — Klavye erişimibağlantı
Tasarımı okumak26 dk
Temelden bileşene30 dk
Duyarlı hâle getirmek ve cilalamak28 dk
Sonraki adımlar22 dk
Bitirme Projesi — Çok sayfalı duyarlı siteödev
MDN — CSS başvurusubağlantı
Can I use — tarayıcı desteğibağlantı
web.dev — Learn CSSbağlantı
Modern CSS sıfırlama (Andy Bell)bağlantı
DersÖdevKaynak