Öğren · Dene · Üret
CSS · editör ve tarayıcı atölyesi
Adım adım Türkçe görsel rehber. Her bölümden sonra duraklat ve kendi ortamında dene.
5:50 dk · Sessiz görsel anlatım · Duraklatıp kodu veya adımı kendin dene.
Bölümler
Videoyu metin olarak oku
Dar ekrandan büyüyen bir ders kataloğu
HTML tanıtım sayfanı okunabilir ve farklı genişliklerde kullanılabilir bir öğrenme kataloğuna dönüştür. CSS kararlarının her birini bir ihtiyaca bağla.
Önce planla
Ortak yazı, renk ve boşluk değişkenleri tanımla.
Uygulama 1
Ortak yazı, renk ve boşluk değişkenleri tanımla.
Uygulama 2
Gövde metnini ve başlık ölçeğini kur; uzun satırları sınırla.
Uygulama 3
border-box ile kutu hesabını tutarlı yap.
Uygulama 4
Kartları önce tek sütun kur; uygun eşikte iki sütuna çıkar.
Uygulama 5
Bir menü satırını Flexbox ile hizala; dar ekranda sarılmasını sağla.
Uygulama 6
Hover yanında focus-visible durumunu tasarla.
Uygulama 7
Zorunlu olmayan geçişleri hareket azaltma tercihinde kapat.
Uygulama 8
320px, 768px, geniş ekran ve yüzde 200 yakınlaştırmada bütün içeriği kontrol et.
Doğrulama 1
Sayfa yatay taşmıyor; metin kesilmiyor.
Doğrulama 2
Düğme ve bağlantıların odak işareti görünür.
Doğrulama 3
Yerleşim sabit cihaz listesine değil içerik ihtiyacına göre kurulmuş.
Doğrulama 4
Her sınıfın hangi CSS görevini temsil ettiğini açıklayabiliyorum.
Bu içerik işine yaradı mı?
Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.