🎯 Kurs Adı:
“Temel Web Tasarımı: HTML, CSS ve JavaScript ile Kendi Web Siteni Tasarla”
🎓 Hedef Kitle:
12 yaş ve üzeri, bilgisayar kullanmayı bilen bireyler. Programlama bilgisi gerektirmez.
📅 Eğitim Takvimi – 3 Günlük Plan (Toplam 9 Saat)
🟩 1. Gün: Web Tasarıma Giriş ve HTML (3 Saat)
1.1. Web Tasarımı Nedir?
- Web sayfası ile web sitesi farkı
- Tarayıcılar ve internetin çalışma mantığı
- Web geliştirici araçları tanıtımı
1.2. HTML Temelleri
- HTML nedir, ne işe yarar?
- HTML etiketi yapısı (
<html>,<head>,<body>) - Metin etiketi:
<h1>–<p>–<br> - Liste etiketi:
<ul>,<ol>,<li> - Bağlantı etiketi:
<a href=""> - Görsel ekleme:
<img src="">
1.3. Uygulama
- “Hakkımda” sayfası tasarımı
- Katılımcılar kendi HTML sayfalarını yazar
🟨 2. Gün: CSS ile Sayfa Tasarımı (3 Saat)
2.1. CSS Nedir?
- HTML ile CSS farkı
- CSS nasıl eklenir? (Inline, Internal, External)
- Temel seçiciler:
h1,.class,#id - Yazı tipi, renk, boyut düzenleme
2.2. Kutu Modeli ve Sayfa Yerleşimi
div,margin,padding,border- Arka plan rengi, kenarlıklar
- Menü yapısı: Basit navigasyon çubuğu oluşturma
2.3. Uygulama
- “Hakkımda” sayfasını CSS ile güzelleştirme
- Renk, yazı, resim ve kutu yapıları ile kişiselleştirme
🟦 3. Gün: Etkileşimli Web ve Yayınlama (3 Saat)
3.1. JavaScript’e Giriş (Temel Seviye)
- JavaScript nedir, neden kullanılır?
- Buton tıklama ile mesaj gösterme (
alert) - Basit değişken kullanımı
- Olay yönetimi (
onclick)
3.2. Web Sitesi Yayınlama
- Dosya yapısı: HTML + CSS + JS
- Web sitelerini yayınlama (Netlify, GitHub Pages tanıtımı)
- Kodlama editörü tanıtımı (Öneri: Replit veya Glitch)
3.3. Final Proje
- Katılımcılar “Kendimi Tanıtıyorum” başlıklı mini web sitesi tasarlar
- Öğretmen rehberliğinde proje sunumu ve değerlendirme
🧰 Gerekli Araçlar
Dosya Paylaşımı: Google Drive veya Öğretmen Paylaşım Alanı
Tarayıcı: Google Chrome
Kodlama Editörü: Replit (bulut tabanlı, kurulumsuz)