Sıfırdan İleriye JavaScript (HTML, CSS) Eğitimi: Web Geliştirmenin Temelleri
İnternette gördüğün her sayfa, basit bir yapıdan doğar. Doğru adımları izleyince, senin de eli değen sayfalar ortaya çıkar. Bu yazıda, sıfırdan başlayan biri için yol çizeceğiz. Önce HTML ile yapı kuracağız, sonra CSS ile tasarımı güçlendireceğiz, en sonda JavaScript ile sayfayı canlı hale getireceğiz. Küçük projelerle pekiştirerek ilerleyeceğiz.
Bir tarayıcı ve basit bir metin editörü (VS Code gibi) yeterli. Kurulum derdi yok, hemen başla. Bu yazı, kendine güvenle öğrenmen için hazır. Adım adım ilerleyeceksin. İçerikte “javascript eğitim, html css, web geliştirme” konularını sade dille anlatıyoruz. İlk mini projeni yazının sonunda yapabileceksin. Devam ederken ihtiyaç duyarsan, JavaScript Eğitimi: HTML ve CSS Temelleri yazısını da referans olarak inceleyebilirsin.
HTML Temelleri ile Sağlam Başlangıç: Etiketler, Yapı ve Anlam
HTML, web sayfasının iskeletidir. Tarayıcıya “bu bir web sayfası” demek için <!DOCTYPE html> kullanırız. Tüm içerik html etiketinde yer alır. Üst bilgi ve ayarlar head içinde, görünen kısım body içinde olur.
Sık kullanılan etiketler:
h1-h6: Başlık seviyeleri. Sayfanın ana ve alt başlıklarını belirler.
p: Paragraf metni. Uzun metinler için kullanılır.
a: Bağlantı oluşturur. İç ve dış sayfalara gider.
img: Görsel ekler. Kaynak ve açıklama içerir.
ul/ol/li: Sırasız ve sıralı listeler. Maddeleri düzenler.
div: Blok seviyesinde kapsayıcı. Bölümleme için.
span: Satır içi kapsayıcı. Küçük metin parçalarını biçimlemek için.
Semantik HTML, etikete anlam katar. header, nav, main, section, article, footer gibi etiketler arama motorlarına ve ekran okuyuculara yol gösterir. Bu, SEO’ya katkı sağlar ve erişilebilirliği artırır. Doğru etiket seçimi, içerik hiyerarşisini netleştirir.
Erişilebilirlik için küçük ama etkili ipuçları kullan. Görsellere açıklayıcı alt metni yaz. Başlıkları mantıklı sırayla kullan. Bağlantı metinleri anlaşılır olsun, “buraya tıkla” yerine hedefi anlatan metinler yaz.
Basit bir proje iskeleti kurmak düzen sağlar. Kök dizinde index.html olsun. css klasöründe stiller, assets veya images klasöründe görseller yer alsın. Bu yapı, büyüyen projelerde işleri kolaylaştırır.
İlk eylem: Bir index.html oluştur. Bir h1 başlık, bir p paragraf, bir img görsel ve bir a bağlantı ekle. Böylece “html css” ile ilk adımı atmış olursun. Bu basit yapı, “web geliştirme” sürecinin kapısını açar.
Semantik HTML neden önemlidir?
Semantik etiketler, içeriğin ne olduğunu anlatır. header üst alanı, nav menüyü, main ana içeriği, article bağımsız yazıyı temsil eder. Arama motorları bu işaretleri okuyup sayfanı daha doğru anlar. Ekran okuyucular da bölümleri kolay dolaşır. Sonuç, daha anlaşılır, erişilebilir ve SEO dostu sayfalar olur.
Yaygın etiketler: başlık, paragraf, liste, bağlantı, görsel
h1: Sayfanın ana başlığı. Tek kez kullanılır.
p: Metin blokları için. Uzun metni tek bir paragrafa yığma.
ul/ol ve li: Maddeler için. Liste dışına madde yazma.
a: Bağlantı. Anlamlı metin kullan, boş href yazma.
img: Görsel. alt metnini atlama, genişlik ve yükseklik ayarla.
Temiz dosya yapısı ve basit proje iskeleti
Proje klasörü aç. İçinde index.html oluştur. css/ klasöründe style.css, images/ klasöründe görselleri tut. Gerekirse js/ klasöründe app.js ekle. Düzenli isimler kullan ve tek bir ana HTML dosyasıyla başla.
Erişilebilirlik için alt metin ve doğru başlık hiyerarşisi
h1 yalnızca bir kez kullan. Alt başlıklar h2, h3 ile mantıklı sırada ilerlesin. Görsel alt metni görselin amacını kısa anlatmalı. Örnek: Ürün fotoğrafı için “Kırmızı spor ayakkabı, yan görünüş” gibi net bir açıklama uygundur.
CSS ile Tasarım: Responsive Düzen, Flexbox ve Grid Kolay Anlatım
CSS, görsel dili kurar. Renk, boşluk, hizalama, tipografi ve düzeni kontrol eder. Seçicilerle elementleri hedeflersin. Sınıflar .sinif, id’ler #kimlik ile tanımlanır. Sınıf, tekrar kullanım için idealdir, id benzersiz elemanlar içindir.
Kutu modeli, her elemanı bir kutu gibi düşünerek çalışır. Kutunun içi içerik, içerikle kenar arasındaki boşluk padding, kenarlık border, dış boşluk margin olur. box-sizing: border-box kullanırsan, genişlik hesapları daha öngörülebilir olur.
Responsive yaklaşım, farklı ekranlarda düzenin akıcı kalmasını sağlar. Genişlikleri yüzde ile ver, max-width ile taşmayı engelle. Basit medya sorguları ile kırılım noktaları ekle. Mobil öncelikli düşün, yani önce küçük ekran için tasarla, sonra genişlet.
Flexbox ve Grid düzen kurmak için güçlü araçlardır. Flexbox, tek boyutlu hizalama ve küçük düzenler için çok pratik. Grid, sayfa seviyesinde karmaşık düzenleri daha temiz kurar. Hangi durumda hangisini kullanacağını bilmek, daha az kodla daha net sonuç verir.
Tasarımda tutarlılık önemlidir. Renk paleti ve tipografi ölçeği seç. CSS değişkenleriyle (:root, --renk-ana) temayı yönet. Bu, büyük projelerde bakım süresini kısaltır.
Okuyucu eylemi: İki sütunlu bir düzeni önce Flexbox ile kur, sonra Grid ile tekrar dene. İçerik taşmasın, boşluklar dengeli olsun. Böylece “html css” ve “web geliştirme” aklında netleşir.
Kutu modeli, boşluklar ve tipografi
Bir kargo kutusu düşün. İçerik kutunun içindeki ürün, padding ürünle kutu duvarı arasındaki boşluk, border kutunun duvarı, margin ise kutunun dışındaki nefes alanıdır. Tipografide okunabilir bir yazı tipi seç. Satır yüksekliğini genelde 1.4 ile 1.6 aralığında tut. Paragraflar uzun olmasın, başlık hiyerarşisi net görünsün.
Renk, tema ve değişken kullanımı
Uygun kontrast, okunabilirlik için şarttır. Açık arka plan üzerinde koyu metin güvenli bir seçenektir. CSS değişkenleri ile tema renklerini merkezden yönet. Örnek mantık: :root içinde --ana, --ikincil, --metin tanımla. Karanlık tema için aynı değişkenleri farklı değerlerle güncelle, tüm site uyum sağlar.
Mobil uyum için pratik responsive teknikleri
Yüzde veya rem tabanlı genişlikler kullan. Görsellere max-width: 100% ver, taşma engellenir. Konteynerlere max-width ve otomatik kenar boşluğu ver, içerik ortalanır. Basit medya sorguları ile 768 piksel ve altı için tek sütun düzenine geç.
Flexbox ve Grid ile düzen kurma
Flexbox, menüler, kart grupları, hizalama işleri için idealdir. Yatayda dikeyde ortalama yapmak kolaydır. Grid, ana sayfa şablonları ve farklı yükseklikli bloklar için güçlüdür. Örneğin, blog listelerinde Grid ile iki sütun, alt satırda geniş içerik gibi senaryoları rahat kurarsın.
Aşağıda hızlı bir karşılaştırma:
Araç | Kullanım Alanı | Güçlü Yanı |
Flexbox | Tek boyutlu hizalama, küçük layout | Esnek hizalama, basitlik |
Grid | Sayfa şablonu, karmaşık layout | İki boyutlu kontrol, netlik |
JavaScript Temelleri: Değişken, Koşul, Döngü ve Fonksiyonlarla Etkileşim
JavaScript, sayfaya hareket katar. Butona tıklanınca bir alanın değişmesi, formun kontrolü, dinamik içerik ekleme gibi işleri yapar. Tarayıcı konsolunu açıp denemek, öğrenmenin en hızlı yoludur. “javascript eğitim” sürecinde konsolu bolca kullan.
Değişkenlerde let ve const en sık kullanılır. const sabit referanslar için, let değişebilen değerler için uygundur. Veri tipleri basittir: sayı, metin, boolean, dizi, obje. Dizi listeler, obje ise özellik toplayan yapılardır.
Karar yapıları ve döngüler düşünmeyi öğretir. if/else ile koşul kontrol edersin. for sayarak döner, while koşul doğru olduğu sürece sürer. Gerçekçi örnekler: 50 TL üzeri siparişe kargo ücretsiz, sayaç artırma, listeden yalnız okunmuş öğeleri filtreleme.
Fonksiyonlar, tekrar eden işleri toplar. Parametre alır, değer döndürebilir. Küçük ve tek iş yapan fonksiyonlar daha okunur. Scope, değişkenin nerede yaşadığını anlatır. Fonksiyon içindeki değişken dışarı sızmaz, bu iyi bir alışkanlıktır.
DOM, sayfadaki elemanları temsil eder. Bir elemanı seçip metnini değiştirirsin, sınıf ekleyip stil uygularsın. Olaylar ile kullanıcı etkileşimini yakalarsın. Tıklama, klavye, input değişimi gibi. Küçük senaryo: Butona basınca kutuya active sınıfını ekle, metin “Açıldı” olsun; tekrar basınca çıkar, metin “Kapandı” olsun.
Hata ayıklamada console.log bir yol arkadaşıdır. Nerede ne var görürsün. Gerekirse tarayıcı debugger’ı ile durdurup adım adım ilerle. Bu disiplin, “web geliştirme” sürecini hızlandırır.
İlgini çeken kurs seçeneklerini keşfetmek için Web Geliştirme Online Eğitimleri HTML CSS JS içeriğine de göz atabilirsin.
let, const ve veri tipleri basit örneklerle
Değişmeyecek referanslar için const kullan. Örneğin sabit API adresi veya renk listesi. Değeri güncellenecek sayaçlar için let uygundur. Dizi ve obje const ile tutulduğunda referans sabit kalır, ancak içeriği güncellenebilir. Bu bir hata değildir, beklenen davranıştır.
Koşullar ve döngüler ile karar verme
Not kontrolü düşün. 50 ve üstü geçti, altı kaldı. Sayaç örneği, 0’dan 10’a artış. Bir alışveriş sepetinde ürün listesini dolaşmak için döngü kullan, stokta olmayanları atla. Hayata yakın senaryolar, kavramları kalıcı kılar.
Fonksiyonlar, scope ve pratik kullanım
Tek iş yapan küçük fonksiyonlar yaz. Örneğin “fiyata KDV ekle” gibi. Yerel değişken fonksiyon içinde yaşasın, global kirlenmeyi önle. Parametreleri az ve net tut. Geri dönüş değeri, fonksiyonun sonucunu açık etsin.
DOM ve olaylar: tıklama, giriş, sınıf ekleme
Basit bir buton düşün. Tıklanınca metin değişsin ve bir active sınıfı eklensin. Tekrar tıklayınca sınıf kalksın. Formlarda, e-posta alanı boşsa kullanıcıyı uyar. Olayları ele alırken varsayılan davranışları yönetmeyi unutma.
Uygulamalı Mini Projeler ve Çalışma Planı: Sıfırdan İleriye Yol
Mini projeler öğrenmeyi hızlandırır. Küçük hedef, kısa geri bildirim, hızlı ilerleme sağlar. Aşağıdaki projeler ile “javascript eğitim, html css, web geliştirme” üçlüsünü birlikte kullanacaksın.
Renk değiştirici: Bir butona basınca sayfanın arka plan rengi değişsin. Renk üretimi ve DOM güncelleme pratiği kazanırsın.
Sayaç: Artır, azalt, sıfırla. Olay yönetimi, durum takibi ve koşullar pekişir.
Yapılacaklar listesi: Ekle, tamamla, sil. Liste yönetimi, dizi metotları ve sınıf ekleme çıkarma öğrenilir.
Basit form doğrulama: Zorunlu alan kontrolü, e-posta formatı, hata mesajları. Form olayları ve temel regex yaklaşımı anlaşılır.
Adım adım entegrasyon:
HTML iskelet: İçeriği ve alanları yerleştir.
CSS düzen: Renk, boşluk, hizalama ve responsive yapı ekle.
JS olaylar: Tıklama, giriş, doğrulama ve DOM güncellemeleri bağla.
Çalışma planı önerisi, 4 ila 6 hafta:
Hafta 1: HTML temelleri ve semantik yapı. Her gün 45 dakika pratik.
Hafta 2: CSS kutu modeli, tipografi, renkler. Basit responsive.
Hafta 3: Flexbox, Grid, küçük layout çalışmaları.
Hafta 4: JavaScript değişken, koşul, döngü, fonksiyon.
Hafta 5: DOM ve olaylar, mini projeler.
Hafta 6: Projeleri iyileştirme, erişilebilirlik ve performans.
Versiyon kontrolü için Git ve GitHub kullan. Bir repo oluştur, anlamlı commit mesajları yaz. Küçük değişiklikleri sık sık commit et. Yerelde çalıştıktan sonra push ile GitHub’a gönder. Bu hem yedek hem portföy olur. Profesyonel kurs arıyorsan, Web Geliştirme Yazılım Eğitimi Detayları sayfası yol gösterebilir.
İleri adımlar için kriterler:
Temeller oturduktan sonra TypeScript, React ve TailwindCSS düşünebilirsin.
Önce DOM ile rahatsın, modüler JS yazabiliyorsun.
Responsive düzenleri rahat kuruyorsun.
Küçük projelerden oluşan bir portföyün var.
Başlangıç projeleri: yapılacaklar listesi, sayaç, renk değiştirici
Yapılacaklar listesi: Hedef, görev ekleme ve tamamlama. Gerekli beceriler, dizi yönetimi ve DOM manipülasyonu. Çıktı, basit bir görev paneli.
Sayaç: Hedef, artan azalan sayı. Gerekli beceriler, olaylar ve koşullar. Çıktı, temiz bir kontrol paneli.
Renk değiştirici: Hedef, rastgele veya seçilen renklerle arka planı değiştirmek. Gerekli beceriler, fonksiyon ve sınıf yönetimi. Çıktı, canlı bir arayüz.
HTML, CSS, JavaScript birleştirme: adım adım
Sıra hep aynı:
HTML içerik: Başlık, buton, alanlar. Etiketleri semantik seç.
CSS düzen: Kutu modeli, renkler, tipografi, responsive.
JS etkileşim: Eleman seçimi, olay bağlama, içerik güncelleme.
Kısa kontrol listesi: Anlamlı sınıf adları, erişilebilir alt metinler, tek h1, tutarlı boşluklar, hatayı konsolda izle.
Hata ayıklama, sürüm kontrolü ve dosya düzeni
console.log ile veri akışını takip et. Şüpheli yerde log koy, hatayı daralt. Anlamlı commit mesajları yaz, tek değişiklik tek commit. Klasör düzenini standart tut: css/, js/, images/. Dosya adlarını açıklayıcı seç.
İleriye hazırlık: TypeScript, React, Tailwind için ne zaman hazırız?
DOM seçme ve olay yönetimi rahat akıyor.
Fonksiyonlarını modüler yazıyor, dosyalara ayırabiliyorsun.
Flexbox ve Grid ile responsive sayfa kurabiliyorsun.
En az 3-4 mini projeyi tamamladın ve GitHub’da sergiliyorsun.
Basit form doğrulama ve durum yönetimi mantığını kavradın.
Sonuç
“html css” yapı ve tasarımı kurar, JavaScript etkileşim katar. Küçük projelerle pratik yapınca öğrenme hızlanır. Bugün bir sayfa aç, bir başlık yaz, ufak bir stil ekle, bir butona tıklama olayı bağla. Yarın bu sayfayı iki sütuna böl, sonra küçük bir sayaç ekle. Bu tempo ile “javascript eğitim” ve “web geliştirme” adımları kalıcı hale gelir. İlerleyen yazılarda TypeScript, React ve Tailwind gibi araçlara geçiş için net örneklerle devam edeceğiz. Öğrendiklerini paylaşmayı ve sorularını not almayı unutma. En güçlü alışkanlık, düzenli pratik yapmaktır.
