Web Temelleri

HTML anlamını, CSS sunumunu, JavaScript davranışını ve erişilebilirliği birlikte çalışan küçük web ürününe dönüştürmek.

Tamamlanma kanıtı: Semantik HTML, responsive CSS, klavye testi, hata davranışı ve kullanıcı geri bildirimi.

Form içeren küçük sayfa yap; etiket, klavye sırası, mobil taşma ve hatalı giriş mesajını ayrı ayrı test et.

Sıra bir öneridir; ancak proje sayfasına geçmeden önce temel kavram, uygulama ve hata ayıklama derslerinin kanıtı tamamlanmalıdır.

HTML anlamını, CSS sunumunu, JavaScript davranışını ve erişilebilirliği birlikte çalışan küçük web ürününe dönüştürmek. Bu nedenle bu modülde yalnız doğru örneği çalıştırmak yeterli değildir. Tamamlanma kanıtı semantik html, responsive css, klavye testi, hata davranışı ve kullanıcı geri bildirimi olmalı; normal girdi, sınır girdi ve hatalı girdi ayrı ayrı sınanmalıdır.

İlk turda CSS ile Görsel Düzen, DOM ve Etkileşim, Erişilebilirlik Temelleri, Formlar ve Veri Güvenliği, HTML ile Sayfa İskeleti başlıkları arasından temel kavram ve uygulamayı eşleştir. Önce sonucu tahmin et, sonra çalıştır veya ölç, ardından farkı açıkla. Tahmin ile gerçek aynıysa bile hangi koşul değiştiğinde sonucun bozulacağını yaz.

İkinci turda şu laboratuvarı uygula: Form içeren küçük sayfa yap; etiket, klavye sırası, mobil taşma ve hatalı giriş mesajını ayrı ayrı test et. Çalışmayı tek başarılı ekran görüntüsüyle kapatma. Girdi tablosu, beklenen davranış, gerçek davranış, hata mesajı veya ölçüm ve yapılan düzeltme aynı dosyada bulunmalıdır.

Son turda İnternet ve Web Nasıl Çalışır?, JavaScript’e Giriş, Proje: Kişisel Proje Sayfası, Responsive Tasarım, Semantik HTML başlıklarını birbirine bağla. Bir dersten alınan çıktı diğerinin girdisi olsun; veri tipi, birim, bağlantı, zamanlama veya kullanıcı beklentisi değiştiğinde zincirin hangi noktasında güvenli duruş gerektiğini göster.

Bir ay sonra aynı görevi daha az kaynak yardımıyla yeniden yap. İlk ve ikinci sürüm arasında yalnız hız veya görünüm değil; test kapsamı, açıklanabilirlik, güvenlik ve başka bir kişinin yeniden kurabilmesi karşılaştırılır.

CSS ile Görsel Düzen dersinde üretilen temel kavramı İnternet ve Web Nasıl Çalışır? çalışmasında girdi olarak kullan. Ardından Semantik HTML sayfasında aynı kavramın daha büyük bir sistemde hangi sınırlarla değiştiğini göster. Bu geçiş html anlamını, css sunumunu, javascript davranışını ve erişilebilirliği birlikte çalışan küçük web ürününe dönüştürmek. hedefini tek örnekten daha geniş bir yapıya taşır.

Köprü kanıtı olarak semantik html, responsive css, klavye testi, hata davranışı ve kullanıcı geri bildirimi dosyasına üç sütun ekle: önceki dersten taşıdığım bilgi, yeni derste değişen koşul ve testte gördüğüm sonuç. İki ders arasında yalnız aynı sözcüğün geçmesi bağlantı değildir; çıktının gerçekten sonraki işlemin girdisi olması gerekir.

Bağlantıyı şu laboratuvarla sınayabilirsin: Form içeren küçük sayfa yap; etiket, klavye sırası, mobil taşma ve hatalı giriş mesajını ayrı ayrı test et. İlk denemeden sonra bir sınır koşulu ekle; boş veri, yanlış tür, kesik bağlantı, aşırı değer veya kullanıcı hatası gibi. Sistemin yalnız normal örnekte değil, bu koşulda da anlaşılır ve güvenli davranıp davranmadığını kaydet.

• Önceki dersin çıktısını açıkça adlandır
• Yeni derste değişen tek koşulu belirt
• Beklenen ve gerçek sonucu ayrı yaz
• Güvenli duruş veya hata mesajını tanımla
• İkinci sürümde tek değişiklik yap

Aynı hatayı farklı tarayıcı genişliklerinde yeniden üretmek, görünüm problemi ile veri ve olay problemi arasındaki ayrımı daha güvenilir hâle getirir.