Duyarlı tasarım: her ekrana uyan sayfalar
Önce-mobil yaklaşımla esnek yazı, görsel ve düzen kurar; kırılma noktalarını içerikten seçer, kapsayıcı sorgularıyla bileşenleri bağımsız uyarlarsın.
Seviye 201 · 16 ders · 15 pratik lab
Dersler
Temeller
- viewport ayarı ve cihaz pikselleri
- Akışkan düzen: yüzde, max-width ve clamp
- Akışkan yazı ölçeği
- Kırılma noktalarını içerikten seçmek
- Medya özellikleri: hover, pointer, prefers-*
- Kısa görev: masaüstü sayfayı önce-mobil yapıya çevir
Bileşen düzeyinde
- Kapsayıcı sorguları: @container
- CSS’te duyarlı görseller: object-fit ve aspect-ratio
- Duyarlı gezinme menüsü
- Dar ekranda tablolar
- Dokunma hedefleri ve parmak dostu arayüz
- Kısa görev: bulunduğu yere göre değişen kart
Sınamak
- Cihaz kipleri ve gerçek cihazda sınama
- Yazdırma stilleri
- Yakınlaştırma ve yüzde 400’de yeniden akış
- Bitirme görevi: bir restoran sitesini her ekrana uydur
Pratik lablar
- Sabit genişliği akışkana çevir: 960 piksel sabit kurulmuş sayfayı max-width ve yüzdelerle akışkan hale getir.
- clamp ile akışkan yazı ölçeği kur: Başlık ve gövde yazı boyutlarını clamp ile ekran genişliğine göre yumuşakça büyüt.
- Kırılma noktalarını içeriğe göre seç: Hazır cihaz genişlikleriyle kurulmuş sayfanın nerede bozulduğunu bulup kırılma noktalarını içeriğe göre yeniden belirle.
- Dokunmatik ekranda üzerine gelme menüsünü düzelt: Telefonda açılmayan üzerine gelme menüsünü hover ve pointer sorgularıyla dokunmaya uygun hale getir.
- Mobil öncelikliye dönüştür: max-width sorgularıyla yazılmış stil dosyasını min-width tabanlı mobil öncelikli yapıya çevir.
- Kullanıcı tercihlerine uyan sayfa yap: Renk düzeni, hareket ve kontrast tercihlerinin hepsine uyan bir kampanya sayfası hazırla.
- Kartı kapsayıcı sorgusuyla uyarla: Kenar çubuğunda dar, ana alanda geniş görünecek ürün kartını @container ile yaz.
- Bileşeni üç farklı yerde dene: Haber kartını kenar çubuğu, ızgara ve tam genişlik alanlarına koyup her birinde düzgün göründüğünü kanıtla.
- Medya sorgularını kapsayıcı sorgularına taşı: Bileşen düzeyindeki medya sorgularını kapsayıcı sorgularına çevir, sayfa düzeyindekileri bırak ve farkı açıkla.
- Görseli oranını bozmadan kırp: Farklı oranlardaki ürün fotoğraflarını aspect-ratio ve object-fit ile aynı çerçevede göster.
- Hamburger menü yap: Dar ekranda açılır, geniş ekranda yatay görünen, klavyeyle çalışan bir gezinme menüsü yaz.
- Parmak dostu arayüze çevir: Küçük ve sıkışık dokunma hedeflerini ölçüp en az 44 piksele çıkar, aralarını aç ve tablo görünümünü düzelt.
- Baskı stilini ekle: Fatura sayfasına menü ve reklamları gizleyen, bağlantı adreslerini yazdıran bir baskı stili ekle.
- Yüzde 400 yakınlaştırmada taşmayı gider: Yakınlaştırınca yatay kaydırma gerektiren bölümleri bul ve tek sütunda akacak şekilde düzelt.
- Restoran sitesini her ekrana uydur: Kekik Lokantası sitesini telefon, tablet, masaüstü ve baskıda test edip bulduğun sorunları düzelt.
Kurs hakkında
Önce-mobil yaklaşımla esnek yazı, görsel ve düzen kurar; kırılma noktalarını içerikten seçer, kapsayıcı sorgularıyla bileşenleri bağımsız uyarlarsın.
Ne öğreneceksin
- Temeller
- Bileşen düzeyinde
- Sınamak
Ön koşullar
Aynı yolun 101 düzeyindeki kurslarını bitirmiş olmak ya da o konuları biliyor olmak yeterlidir.
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 201 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılı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.