Web geliştirmeye başlamak heyecan verici olabilir, ancak çoğu insanın aklında hep aynı sorular vardır: “Nereden başlayacağım?” veya “Bu iş bana uygun mu?” Endişelenmeyin! Çünkü bu yazıda, sıfırdan başlamak isteyenler için adım adım bir rehber hazırladık. Üstelik sadece 30 gün içinde, HTML, CSS ve JavaScript kullanarak kendi web sitenizi oluşturacak seviyeye geleceksiniz. Evet, doğru okudunuz! Kendi sitenizi yapabilirsiniz.

İlk hafta, web geliştirmenin temeli olan HTML ile tanışacağız. HTML (HyperText Markup Language), internetin iskeleti gibidir. Bütün web sayfaları, HTML etiketleriyle şekillenir.

İlk adımda HTML'yi öğrenmek, sitenizin yapısını anlamanızı sağlayacak. Şu adımları takip edebilirsiniz:

- HTML dosyası oluşturma: İlk web sayfanızın HTML dosyasını nasıl oluşturacağınızı öğrenin.
- Temel Etiketler: ``, ``, ``, `

`, `

`, ``, ve `` gibi temel etiketleri öğrenin.
- Yapılandırma: Bir başlık, birkaç paragraf, bir görsel ve bağlantı ekleyerek basit bir sayfa oluşturun.

İşte başlangıç için bir örnek kod:

  
    
    
    
  
  
    
Merhaba, Dünya!
    
Bu benim ilk web sayfam.
    Google'a git
  

Bu kodu kullanarak, internet tarayıcınızda basit bir sayfa oluşturabilirsiniz. Bu hafta boyunca, HTML’yi derinlemesine keşfedeceksiniz.

2. Hafta: CSS ile Tasarım Yapın - Sitenize Renk Katın

İkinci hafta geldiğinde, siteyi sadece metinlerden ibaret olmaktan kurtarıp, şık bir tasarıma kavuşturacağız. Bu noktada CSS (Cascading Style Sheets) devreye giriyor. CSS ile sitenizin renklerini, yazı tiplerini, düzenini ve görsel çekiciliğini ayarlayabilirsiniz.

İlk olarak şunlara odaklanın:

- Renk ve Arka Plan: Metin renkleri, arka plan renkleri nasıl değiştirilir?
- Yazı Tipi ve Stil: Farklı yazı tiplerini nasıl kullanırsınız? Stil özelliklerini nasıl değiştirirsiniz?
- Düzenleme: Sayfanızın düzenini nasıl yapacağınız hakkında bilgi edinin. Örneğin, öğeleri sola, sağa veya ortaya nasıl hizalarsınız?

Bir örnek CSS kodu:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}

h1 {
  color: #007bff;
  text-align: center;
}

a {
  color: #ff6347;
  text-decoration: none;
}

a:hover {
  color: #ff4500;
}

Bu CSS kodu, sayfanızdaki yazı tiplerini ve renkleri değiştirecek. Böylece, web siteniz daha profesyonel bir görünüm kazanacak.

3. Hafta: JavaScript ile İnteraktif Öğeler Ekleyin

Üçüncü haftada ise biraz daha eğlenceli ve dinamik olmaya başlayacağız. JavaScript, web sayfalarına etkileşim kazandırmak için kullanılan programlama dilidir. Bu hafta boyunca, sayfanıza basit etkileşimler ekleyeceğiz.

Başlangıç için şu konuları öğrenebilirsiniz:

- JavaScript Değişkenleri: Değişkenler nedir? Nasıl kullanılır?
- Event Listener: Kullanıcı etkileşimini nasıl takip ederiz? Örneğin, bir butona tıklanınca bir mesaj nasıl gösterilir?
- Basit Fonksiyonlar: Sayfada butona tıklandığında bir şeyler yapacak bir JavaScript fonksiyonu yazmayı öğrenin.

Örnek bir JavaScript kodu:

document.getElementById("clickMe").addEventListener("click", function() {
  alert("Butona tıkladınız!");
});

Burada, bir butona tıklandığında basit bir uyarı mesajı gösteriyoruz. JavaScript ile web sayfanıza çok daha fazla etkileşimli özellik ekleyebilirsiniz.

4. Hafta: SEO İpuçları ve Web Sitenizi Yayınlayın

Son hafta, öğrendiğiniz her şeyi birleştirip, web sitenizi internette yayınlamaya hazır hale getireceğiz. Ayrıca, SEO (Search Engine Optimization - Arama Motoru Optimizasyonu) hakkında bazı temel ipuçları vereceğiz.

İşte SEO için bazı önemli ipuçları:

- Başlık ve Meta Açıklamalar: Sayfanızın başlığını ve açıklamalarını doğru şekilde ayarlayın.
- Anahtar Kelimeler: Web sayfanızda doğru anahtar kelimeleri kullanarak arama motorlarında daha görünür hale gelin.
- Responsive Tasarım: Mobil cihazlar için de uyumlu bir site tasarımı oluşturun.

Web sitenizi yayınlamak için, bir web hosting hizmeti seçip, dosyalarınızı yüklemeniz gerekecek. Bu işlem, biraz teknik bilgi gerektirebilir, ancak internet üzerinde bulacağınız rehberlerle bu işlemi kolayca yapabilirsiniz.

İşte SEO için bazı öneriler:

Bu küçük ama etkili değişiklikler, sitenizin SEO performansını artıracaktır.

Sonuç: Kendi Web Sitenizi Yapmak İçin İlk Adımlar

30 günün sonunda, sadece HTML, CSS ve JavaScript hakkında temel bilgi sahibi olmakla kalmayacak, aynı zamanda kendi web sitenizi kurabilecek seviyeye geleceksiniz. Bu süreç, sizi sadece teknik becerilerle değil, aynı zamanda yaratıcılığınızla da tanıştıracak. Web geliştirme, sürekli öğrenmeyi gerektiren bir alan olsa da, ilk adımları atmak her zaman en önemli adımdır.

Şimdi, öğrendiklerinizi hayata geçirme zamanı! Kendi web sitenizi oluşturun, içeriğinizi yayınlayın ve çevrenizle paylaşın. Hem kendinizi geliştirin hem de başarılarınızı kutlayın.