Önce küçük bir değişiklik.

Nasıl açılır?

1. Bu klasördeki index.html dosyasına çift tıkla veya dosyayı Chrome, Firefox ya da Edge ile aç.
2. Tarayıcıda JavaScript etkin olsun. Dersler bu klasördeki JavaScript dosyalarından gelir.
3. Klasörün tamamı birlikte kalmalı. Fontlar assets/ içinde, dersler ayrı dosyalarda bulunur.

Atölye, ana site KIVILCIM klasörünün yanındaki kivilcim-atolyesi/ klasöründe, kendi Git deposu olarak durur. Ana siteye bağlantı veya menü eklenmedi. Eğitim, ana sitenin dosyalarını okumak için o klasöre ihtiyaç duymaz: gerekli kaynak kopyası kendi içindedir.

Telefonda

1. Atölye yayına alındıysa adresini telefonun tarayıcısında aç. Menüden Ana ekrana ekle (iPhone'da Paylaş → Ana Ekrana Ekle) ile uygulama gibi kur. Bir kez açtıktan sonra internet olmadan da çalışır.
2. Alttaki çubuk Dersler, Kaynak, Sahneler, Sözlük ve Notlar arasında geçiş yapar. Ders listesini üstteki “Dersleri göster” düğmesi açar.
3. Dene sekmesinde KOD / SONUÇ düğmeleriyle kod ile çalışan sayfa arasında geç. Çalıştır'a basınca sonuç kendiliğinden açılır.
4. Yazı alanının üstündeki sembol çubuğu < > { } ( ) ; = " gibi işaretleri ve iki boşluklu girintiyi ekler; klavyeyi kapatmaz.
5. Notların telefonda ayrı saklanır. Bilgisayardaki çalışmanı taşımak için orada Notlarım → Yedeği indir, telefonda Yedeği birleştir.

Yeni bir sürüm yayımlandığında altta “Atölyenin yeni sürümü hazır” bildirimi çıkar; Yenile'ye bas.

Bir dersi nasıl çalışmalısın?

1. Öğren: Açıklamayı oku. Altı noktalı çizilmiş bir terime dokununca kısa tanımı açılır; diğer kelimeler için sözlüğe bak. Kodun her satırını kendi cümlenle anlat.
2. Dene: HTML, CSS veya JavaScript sekmesini seç. Önce tek bir değeri değiştir. HTML ve CSS değişikliği yazmayı bırakınca sonuca kendiliğinden yansır; JavaScript değişikliği için Çalıştır'a bas (Ctrl/Cmd + Enter da çalıştırır). Hata olursa alt satırda hatanın JavaScript sekmesindeki satır numarası ve Türkçe bir ipucu görünür.
3. Sıra sende: Görevi kendin çöz. Takılırsan ipucunu aç. Çözümü kendi denemenden sonra incele.
4. Kendini sına: Soruları yanıtla ve gerekçeleri oku. Ezberden çok nedenini açıklayabilmeye odaklan.
5. Bir cümlelik not yaz. “Dersi çalıştım” işaretini kendin koy. Bu işaret bir başarı puanı veya yeterlilik belgesi değildir.

“Örneğe dön” o dersteki kod taslağını başlangıç örneğiyle değiştirir; fikrini değiştirirsen hemen ardından “Kodumu geri getir” ile önceki kodun döner. Kalıcı saklamak için “HTML indir”i kullan. İndirilen dosya HTML, CSS ve JavaScript'i birlikte içerir; tek başına açılabilir. Kod tezgâhındaki HTML alanı, sayfanın gövdesi içindir; tam belge iskeleti indirme sırasında eklenir.

Hangi sırayla?

Kaynak kodu sayfasında Kıvılcım'ın beş gerçek dosyasını satır satır inceleyebilirsin. Derslerdeki bağlantı seni ilgili sözcüğe götürür. Sahne atlası 13 gerçek çiziciyi çalıştırır; sürgü ile aşamaları incele ve açıklamayı kodla eşleştir. Tek başına bir dosyayı indirmek, özgün sitenin bütününü indirmek anlamına gelmez.

Notların kaybolmasın

Atölye notları, soru yanıtlarını, kod taslaklarını ve çalışıldı işaretlerini tarayıcının localStorage alanında saklamayı dener. Bu kayıt bilgisayarlar arasında kendiliğinden taşınmaz. file:// adreslerinde davranış tarayıcıya bağlıdır; klasör adı, tarayıcı veya gizlilik ayarı değişince farklı kayıt alanı açılabilir.

Notlarım → Yedeği indir ile JSON yedeği al. Aynı sayfada Yedeği birleştir ile geri yükle. Birleştirme aynı dersin not, taslak ve yanıtlarını yedektekiyle değiştirir; çalışıldı işaretlerini birleştirir. Yedeği okumak kodunu çalıştırmaz. Tarayıcı kaydı engelliyse sayfa bunu bildirir; kapatmadan önce yedek al.

Sınırlar ve ilk yardım

• Dersler ve örnekler çevrimdışı çalışır. “Daha derine git” altındaki MDN bağlantıları internet ister.
• Önizleme ayrı bir sandbox içindedir. Kendi küçük örneklerini denemek içindir; dış dosya yüklemeleri kısıtlanır. Dosya yolu, font ve çok dosyalı teslim deneylerini gerçek bir deneme klasöründe de yap.
• Bitmeyen döngü yazarsan tarayıcı takılabilir. Dersi yeniden açıp Örneğe dön'ü kullan; döngünün bitiş koşulunu kontrol et.
• Sayfa biçimsizse style.css ve assets yanında mı? Ders listesi boşsa üç lessons-*.js dosyası mevcut mu? Console'daki ilk hatayı oku.
• Kaynak kopyası 14.10.2026'da alındı; tarih Kaynak kodu sayfasında da yazar. Ana site sonradan değişirse bu kopya kendiliğinden güncellenmez.
• Eğitim bu sitenin teknik kapsamına odaklanır; web geliştirme alanının tamamı veya dersin bütün teslim koşulları için yeterlilik iddiası değildir. Dreamweaver'ın sürümüne göre menüler değişebilir.

Son hedef: Yapay zekâya “bu kod ne yapıyor?” diye sormadan önce kendin bir tahmin yap. Küçük bir değişiklikle tahminini dene. Gösteremediğin veya açıklayamadığın kısmı yeniden çalış.