Claude ile temel web kodlama

Claude ile Temel Web Kodlama Dersleri

Claude ile temel web kodlama öğrenmek, geleneksel eğitimlerden farklı olarak etkileşimli, kişiselleştirilmiş ve anında çıktı odaklı bir süreçtir. Claude, teorik bilgileri sıkıcı duvar yazıları olarak vermek yerine, yazdığı kodları tarayıcıda doğrudan görmenizi sağlayan bir öğretmen gibi çalışır.

Claude ile Ders İşleme Mantığı

• Canlı Kodlama (Artifacts): Claude'a bir HTML/CSS dersi vermesini söylediğinizde, kodları sağ taraftaki özel bir panelde çalıştırır. Siz bir butona basıp rengini değiştirmesini istediğinizde değişikliği anında canlı olarak görürsünüz.
• Kişiselleştirilmiş Hız: Anlamadığınız bir yeri (örneğin "Flexbox mantığı") yüzlerce farklı yöntemle, günlük hayattan benzetmelerle (örneğin "bisküvi kutusu" analojisi) tekrar anlatmasını isteyebilirsiniz.
• Hata Ayıklama Dersleri: Kendi yazdığınız hatalı kodları Claude'a yapıştırarak, "Burada nerede hata yaptım, bana adım adım açıkla" diyerek en kritik öğrenme aşaması olan "debugging" (hata çözme) pratiği yapabilirsiniz.

Örnek Müfredat: 4 Adımda Temel Web Kodlama Dersi

Claude ile sıfırdan başlayarak şu sırayla ders işleyebilirsiniz:

• 1. Adım - HTML5 (Sitenin İskeleti): Başlıklar, paragraflar, formlar ve butonlar içeren basit bir "Kayıt Formu" yapısı oluşturma.
• 2. Adım - CSS3 & Tailwind (Görsel Tasarım): Oluşturulan iskeleti renklendirme, hizalama (Flexbox/Grid) ve modern Tailwind CSS sınıflarını kullanma.
• 3. Adım - JavaScript (Etkileşim): Butonlara tıklanınca çalışan sayaçlar, açılır menüler (dropdown) veya dinamik yapılacağına dair listeler (Todo App) yapımı.
• 4. Adım - Proje ve Dağıtım (Deployment): Geliştirilen mini sitenin GitHub veya Claude Code aracılığıyla canlıya alınması.

Claude'a Verilecek En Etkili Ders Başlangıç Komutu (Prompt)

Claude ile derslere başlamak için aşağıdaki taslağı kopyalayıp ona gönderebilirsiniz:

Bilginizi Test Edin!

Claude ve web kodlama mantığını ne kadar kavradığınızı ölçmek için hazırlanan bu testi çözebilirsiniz:

Soru 1 (HTML Temelleri)

HTML'in web geliştirme sürecindeki temel görevi veya tanımı nedir?

• Sayfaya görsel efektler ve animasyonlar eklemek. (Yanlış: Görsel efektler ve animasyonlar genellikle CSS ve JavaScript tarafından yönetilir.)
• Web sayfasının iskeletini ve yapısal içeriğini (metin, görsel vb.) oluşturmak. (Doğru! HTML, bir web sayfasının temel yapısını ve içeriğini etiketler aracılığıyla tarayıcıya tanıtan iskelet sistemidir.)
• Sunucu taraflı veri tabanı sorgularını yönetmek. (Yanlış: Veri tabanı sorguları sunucu taraflı diller ile yapılır.)
• Tarayıcıdaki çerezleri ve oturum açma işlemlerini şifrelemek. (Yanlış: Şifreleme veya güvenlik protokolleri HTML'in sorumluluğunda değildir.)

Soru 2 (CSS Mimarisi)

CSS kullanarak HTML sayfasındaki id'si "ana-baslik" olan bir elementi hedeflemek için hangi seçici (selector) kullanılır?

• .ana-baslik (Yanlış: Nokta işareti CSS'te class (sınıf) seçicilerini hedeflemek için kullanılır.)
• element#ana-baslik (Yanlış: Doğrudan bir ID hedeflemesi için bu kadar karmaşık bir yapıya gerek yoktur; ID'ler sayfada zaten tektir.)
• #ana-baslik (Doğru! CSS'te id değerine sahip elementleri seçmek için diyez (#) işareti kullanılır.)
• *ana-baslik (Yanlış: Yıldız işareti CSS'te evrensel seçici olarak görev yapar.)

Soru 3 (JavaScript Mimarisi)

JavaScript mimarisi ve web sayfalarındaki rolü hakkında aşağıdakilerden hangisi doğrudur?

• Sayfanın dinamik olmasını, kullanıcı etkileşimlerini (tıklama, form doğrulama vb.) yönetmeyi sağlar. (Doğru! JavaScript, sayfa içeriğini anlık değiştirmek ve dinamik davranışlar kazandırmak için kullanılır.)
• Web sayfasının yazı tiplerini ve renk paletini kalıcı olarak belirler. (Yanlış: Renkler ve yazı tipleri CSS'in alanına girer.)
• Yalnızca web sunucusunun donanım kaynaklarını optimize etmekle görevlidir. (Yanlış: JavaScript genellikle tarayıcıda (client-side) çalışır.)
• HTML etiketlerinin tarayıcıda düzgün yorumlanmasını engelleyen bir güvenlik protokolüdür. (Yanlış: JavaScript bir programlama dilidir, engelleyici değildir.)

Soru 4 (Claude ile Kodlama Mantığı)

Claude ile kodlama yaparken veya bir hata (bug) ayıklarken en verimli sonuçları almak için hangi yaklaşım izlenmelidir?

• Sadece "Kodum çalışmıyor, düzelt" diyerek tek cümlelik genel bir istekte bulunmak. (Yanlış: Yetersiz bağlam, Claude'un sorunu tahmin etmesini zorlaştırır.)
• Kodu doğrudan Claude'a yazdırıp hiç incelemeden kopyalayıp yapıştırmak. (Yanlış: Kodun mantığını anlamadan projeye eklemek potansiyel hataları görmenizi engeller.)
• Claude'a kodlama öğretmeyi reddetmesini sağlayacak karmaşık komutlar zinciri göndermek. (Yanlış: Amaç Claude'u açık ve yapılandırılmış şekilde yönlendirmektir.)
• Mevcut kod bloğunu, karşılaşılan hatayı ve hedeflenen çıktıyı net bir bağlamla birlikte paylaşmak. (Doğru! Net bağlam ve hata mesajlarının belirtilmesi Claude'un en doğru çözümü sunmasını sağlar.)

Soru 5 (Web Bileşenlerinin Rolü)

HTML, CSS ve JavaScript'in bir web sayfasındaki entegrasyonu ve iş birliği mantığı için en doğru ifade hangisidir?

• Her üç teknoloji de birbirinin yerine geçebilir ve aynı anda çalışmak zorunda değildir. (Yanlış: Her teknolojinin üstlendiği rol benzersizdir.)
• HTML yapı sağlar, CSS bu yapıyı biçimlendirir ve güzelleştirir, JavaScript ise mantık ve etkileşim katar. (Doğru! Bu üçlü web geliştirmenin temel katmanlarıdır ve iş birliği içinde çalışırlar.)
• JavaScript olmadan HTML ve CSS tek başına tam işlevli dinamik web uygulamaları oluşturabilir. (Yanlış: Dinamik işlem ve kullanıcı mantığı için JavaScript şarttır.)
• CSS doğrudan tarayıcıda JavaScript dosyalarını derleyerek çalıştırır. (Yanlış: CSS ve JavaScript tarayıcıda farklı motorlar tarafından yorumlanır.)