İlk sayfa konusu seçimi
Öğrenciye sevdiği bir kitap, oyun, şehir, bilim insanı veya kulüp için tek sayfalık mini site yaptırın. Tanıdığı konu üzerinde çalışmak, HTML etiketlerini ezberden çıkarıp anlamlı içerikle bağlar.
Sayfa; başlık, kısa tanıtım, üç maddelik liste, bir görsel ve dış bağlantı içermelidir.
Semantik iskelet
Başlangıçta header, main, section ve footer gibi temel alanları kullanmak düzenli düşünmeyi öğretir. Her şey div olmamalı; sayfanın anlamı kodun içinde de görülmelidir.
Görsellerde alt metin yazmak da ilk dersten öğretilmelidir. Alt metin, görsel yüklenmediğinde ve ekran okuyucu kullanan kişiler için içeriğin anlaşılmasını sağlar.
- Önce içerik, sonra stil yazın.
- Renkleri sınırlı tutun.
- Mobilde taşma olup olmadığını kontrol edin.
CSS ile düzen
İlk CSS dersinde renk, yazı tipi, boşluk, maksimum genişlik ve basit grid/flex düzeni yeterlidir. Karmaşık animasyonlara geçmeden okunabilirlik ve hizalama oturmalıdır.
Öğrenciden aynı HTML dosyasına iki farklı tema hazırlamasını istemek, CSS'in yapıyı değiştirmeden görünümü dönüştürdüğünü gösterir.
Uygulama kontrol listesi
- Başlık hiyerarşisini doğru kurun.
- Her görsele anlamlı alt metin ekleyin.
- Sayfayı mobil genişlikte test edin.
- CSS'i ayrı dosyada tutun.