Responsive Tasarım ve Mobil Öncelik
Akışkan ölçüler, kırılma noktaları ve içerik önceliğiyle küçük ekrandan başlayan düzen kurma.
Tahmini süre: 50 dakika
Ders kartı
Sınıf: 11. sınıf Ders: Web Tabanlı Uygulama Geliştirme Ünite: CSS ve Etkileşim Konu: Responsive Tasarım ve Mobil Öncelik Dersin amacı: Akışkan ölçüler, kırılma noktaları ve içerik önceliğiyle küçük ekrandan başlayan düzen kurma. Ders sonunda: • mobile-first kavramını doğru bağlamda açıklarsın. • media query, viewport, fluid arasındaki ilişkiyi bir örnekle gösterirsin. • Uygulamayı normal, sınır ve hatalı durumlarla test edersin. • Çalışmanı kısa bir kanıt veya ekran görüntüsüyle sunarsın.
Konu anlatımı
Akışkan ölçüler, kırılma noktaları ve içerik önceliğiyle küçük ekrandan başlayan düzen kurma. Anahtar kavramlar: mobile-first, media query, viewport, fluid. Bu konuyu öğrenirken önce “mobile-first” kavramının neyi çözdüğünü belirle; ardından media query, viewport, fluid kavramlarıyla ilişkisini bir örnek üzerinde göster. Ezber yerine neden–sonuç ilişkisi kur: hangi girdi alınır, hangi karar verilir, hangi çıktı veya kanıt beklenir? Ders sonunda konuyu kendi cümlenle açıklayabilmeli, küçük bir örnek üzerinde uygulayabilmeli ve sonucu ölçülebilir bir testle doğrulayabilmelisin.
11. sınıf bilişim laboratuvarı
Web Tabanlı Uygulama Geliştirme dersi için kavramları gerçek bir üretim ortamıyla ilişkilendiren ders görseli.
<form>
<label for="email">E-posta</label>
<input id="email" name="email" type="email" required>
<button type="submit">Gönder</button>
</form>Bu konunun testi
Öğrenci hesabınla giriş yaparak sonucu ve açıklamalı geribildirimi kaydedebilirsin.