Web Tasarımı - HTML,CSS,JS(10 - 16 YAŞ)

---

Günümüz dünyasında bir fikri, bir markayı veya kendimizi tanıtmanın en etkili yollarından biri web siteleri. Artık sadece sosyal medya hesabı değil, kendi web sayfasını oluşturabilen, tasarlayabilen ve güncelleyebilen bireyler öne çıkıyor.

Web tasarım öğrenmek ise dışarıdan bakıldığında karmaşık görünse de, doğru sıra ve doğru araçlarla ilerlediğimizde oldukça keyifli ve anlaşılır bir süreç hâline geliyor. İşte bu noktada HTML, CSS ve JavaScript, web dünyasının temel taşları olarak karşımıza çıkıyor.

Web tasarım, internette gördüğümüz web sitelerinin:

• Görsel tasarımını (renkler, yazılar, görseller),
• Yapısını (bölümler, menüler, sayfa düzeni),
• Kullanıcı ile etkileşimini (butonlar, formlar, animasyonlar)

oluşturan sürecin tamamıdır.

Bu eğitimde öğrenciler, bir web sitesinin arka planında neler olduğunu adım adım öğrenir ve sıfırdan kendi web sayfalarını tasarlayabilir hâle gelirler.

HTML (HyperText Markup Language), web sayfasının temel iskeletini oluşturur.
Sayfadaki:

• Başlıklar,
• Paragraflar,
• Görseller,
• Listeler,
• Butonlar

gibi tüm elemanlar HTML ile tanımlanır.

CSS (Cascading Style Sheets), web sayfasının görünümünü belirler.
Renkler, yazı tipleri, boşluklar, hizalamalar, kutular ve genel tasarım CSS ile şekillenir.

JavaScript ise web sitesine hareket ve etkileşim kazandırır.
Butona tıklanınca bir şeyin değişmesi, menünün açılıp kapanması, uyarı pencereleri, basit oyun ve animasyonlar hep JavaScript ile yapılır.

Bu üçlü bir araya geldiğinde öğrenciler:

• Hem tasarımcı gibi düşünür,
• Hem de yazılımcı gibi problem çözer.
   

Öğrenci yazdığı kodun sonucunu anında tarayıcıda görür. Bu da öğrenme sürecini hem eğlenceli hem motive edici hâle getirir.

Web tasarım becerisi; yazılım, tasarım, dijital pazarlama ve girişimcilik gibi birçok alanla doğrudan bağlantılıdır.

Öğrenciler renkleri, yazı tiplerini, düzeni ve görselleri kendisi seçerek tamamen özgün web sayfaları tasarlar.

Bozuk duran bir tasarımı düzeltmek, çalışmayan bir butonu halletmek, menüyü doğru hizalamak…
Bunların hepsi birer küçük mühendislik problemidir.

Bu eğitimi alan bir öğrenci daha sonra rahatlıkla:

• React, Vue gibi modern web kütüphanelerin
• Backend dillerine (C#, Python, Node.js vb.),
• Mobil ve masaüstü arayüz geliştirmeye

geçiş yapabilir.

Öğrenciler, eğitim boyunca adım adım:

• Kendi kişisel tanıtım sayfalarını,
• Basit bir kurumsal site taslağını,
• Butonlu, menülü, bölümlü bir tek sayfa (one-page) siteyi,
• Form, liste, başlık ve görsellerle zenginleştirilmiş tasarımları,
• JavaScript ile ufak etkileşimler ve dinamik içerikler

oluşturmayı öğrenecekler.

Örneğin:

• “Hakkımda” sayfa
• Basit bir “İletişim Formu”,
• “Hizmetlerimiz” bölümü,
• Üst menü, alt bilgi (footer) alanları,
• Tıklayınca renk değiştiren buton
• Küçük JavaScript efektleri ve uyarıları

gibi unsurlar pratiğe dökülecek.