Web Tasarım & Geliştirme
Bu kursun çıktısı ekranda kalan bir alıştırma değil; internette herkesin girebileceği, kendi adresine sahip gerçek bir web sitesi. Öğrenci sıfırdan başlar, 10 hafta sonunda kendi portfolyo sitesini yayına alır ve linkini paylaşabilir. Kullandığımız araçlar profesyonel yazılımcıların bugün kullandığı araçların aynısıdır.
Öne çıkanlar
- Yaş aralığı: 12–17 Yaş · Seviye: Orta
- Süre: 10 hafta, 20 canlı ders (haftada 2 ders × 60 dakika)
- Sınıf: en fazla 8 öğrenci
- Başlangıç fiyatı: 12.400 TL
- Ön koşul: Ön koşul yok. Dosya klasör mantığını bilen ve klavyeyi kullanabilen her öğrenci başlayabilir.
- Kullanılan araçlar: HTML5, CSS3, JavaScript, React, Git & GitHub, Netlify, VS Code, Figma
- 1. hafta — İnternet Nasıl Çalışır & HTML Temelleri: Tarayıcı, sunucu ve alan adı ilişkisi; HTML belge yapısı ve etiket mantığı; Başlıklar, paragraflar, bağlantılar; Geliştirici araçlarıyla siteleri inceleme. Çıktı: İlk HTML sayfan — kendi tanıtım sayfan
- 2. hafta — HTML ile Yapı Kurmak: Listeler, tablolar, görseller, videolar; Formlar ve giriş alanları; Semantik etiketler (header, nav, main, footer); Erişilebilirlik temelleri. Çıktı: Çok bölümlü, formu olan tanıtım sayfası
- 3. hafta — CSS ile Görsel Tasarım: Seçiciler, renkler, tipografi; Kutu modeli: margin, padding, border; Arka planlar, gölgeler, köşe yuvarlama; Renk paleti ve yazı tipi seçme prensipleri. Çıktı: Baştan aşağı tasarlanmış tek sayfalık site
- 4. hafta — Flexbox ile Düzen: Flex konteyner ve elemanlar; Yatay ve dikey hizalama; Kart ve menü tasarımları; Boşluk yönetimi ve görsel hiyerarşi. Çıktı: Kart ızgarası olan ürün tanıtım sayfası
- 5. hafta — Responsive Tasarım: CSS Grid ile iki boyutlu düzen; Media query ile ekrana göre uyarlama; Mobil öncelikli tasarım yaklaşımı; Mobil menü tasarımı. Çıktı: Telefonda da bilgisayarda da düzgün görünen site
- 6. hafta — JavaScript Temelleri: Değişkenler, fonksiyonlar, diziler; Koşullar ve döngüler; Konsol ile hata ayıklama; Olay dinleyicileri (event listener). Çıktı: Tıklanınca tepki veren etkileşimli sayfa
- 7. hafta — DOM ile Sayfayı Canlandırma: Elemanları seçme ve değiştirme; Dinamik içerik ekleme ve silme; Form doğrulama; localStorage ile veri saklama. Çıktı: Verileri kaybolmayan yapılacaklar listesi uygulaması
- 8. hafta — React'e Giriş: Bileşen (component) mantığı; props ile veri aktarımı; useState ile durum yönetimi; Listeleri render etme. Çıktı: React ile yazılmış filtrelenebilir kart galerisi
- 9. hafta — Git, GitHub ve Yayınlama: Sürüm kontrolü neden gerekli; commit, push ve depo yönetimi; Netlify ile canlıya alma; Alan adı bağlama ve temel SEO. Çıktı: İnternette yayında olan, linki paylaşılabilir site
- 10. hafta — Bitirme Projesi ve Demo Günü: Kendi portfolyo sitesini tasarlama; Figma’da taslak çizme; Kodlama, test ve mobil kontrol; Yayına alma ve sunum. Çıktı: Yayında olan kişisel portfolyo siten
- Bitirme projesi: Öğrenci kendi kişisel portfolyo sitesini tasarlar, kodlar ve gerçek bir adres altında yayına alır. Site öğrencinin tüm projelerini barındırır ve kurs bittikten sonra da güncellenebilir kalır.
Site haritası
Hype Academia — 8–17 yaş online yazılım, robotik ve yapay zeka eğitimi.
Ücretsiz deneme dersi için iletişim sayfamıza göz atın.