Baştan Sona CSS
YayındaCSS'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.
9 bölüm36 ders7 ödev26 kaynak8 hafta
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şul
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
Bu programda ne teslim ediyorsun
7 ödev, her biri bir bölümün sonunda. Hepsini ben okuyorum; geri bildirim kodun üzerinde.
01Ödev 1 — Profil kartıBölüm 01
02Ödev 2 — Tasarım belirteçleri ve tipografi ölçeğiBölüm 02
03Ödev 3 — Flexbox ile yönetim paneli kabuğuBölüm 04
04Ödev 4 — Aynı ekranı grid ile yazBölüm 05
05Ödev 5 — Duyarlı tanıtım sayfasıBölüm 06
06Ödev 6 — Tema ve erişilebilirlik denetimiBölüm 08
07Bitirme Projesi — Çok sayfalı duyarlı siteBölüm 09
Kaynaklar
26 kaynak · 9 bölüme dağılmış
Her kaynak ilgili dersin altında duruyor; ayrı bir liste ezberlemek gerekmiyor. Hepsi ücretsiz ve Türkçe karşılığı olanlar öncelikli.
Diğer programlar
Bu programla başlamak isterseniz.
Başvuruda "Baştan Sona CSS" seçin; tanışma görüşmesinde hangi bölümden başlayacağınızı ve haftalık ritmi birlikte belirleriz.