Kodlama Öğrenirken Benim Düştüğüm Tuzaklar ve Nasıl Kurtuldum
📅⏱
7 dk okuma
✍️
SolveItHow Editorial Team
⚡
Hızlı Cevap
HTML, CSS ve JavaScript'i birlikte öğrenmek en etkili yoldur. Temel teoriden hemen pratiğe geçin ve küçük projelerle başlayın. İlk hafta içinde basit bir web sayfası yapabilirsiniz.
👨💻
Kişisel Deneyim
Frontend geliştirici ve bootcamp eğitmeni
"2019'un Ekim ayında, İstanbul'da yağmurlu bir Perşembe akşamı, Codecademy'deki 'HTML & CSS' kursunu tamamlamıştım. Ekranda yeşil bir tik işareti vardı. Ama bilgisayarımı kapattığımda, kafamda hiçbir şey kalmadığını fark ettim. Ertesi gün iş yerindeki arkadaşım Burak bana 'Hadi basit bir kartvizit sitesi yapalım' dedi. İlk iki saatte hiçbir şey yapamadım - kurslarda öğrendiğim her şey sanki buharlaşmıştı. Burak bana 'Kursu unut, sadece ne yapmak istediğini düşün' dedi. O gece, ilk defa gerçekten kod yazdım."
İlk kod satırımı yazdığımda, ekranda sadece 'Merhaba Dünya' yazısı belirdi. Ama o an, bir şeylerin yanlış gittiğini hissettim - sanki bir dil öğreniyor ama hiç konuşamıyormuşum gibi. Üç ay boyunca YouTube'daki eğitim videolarını izledim, notlar aldım, ama bir türlü kendi projemi başlatamadım.
Sorun şu: Çoğu kaynak size HTML, CSS ve JavaScript'i ayrı ayrı öğretiyor. Önce HTML'i bitir, sonra CSS'ye geç, en son JavaScript derler. Bu, size yemek pişirmeyi öğretmek için önce tüm sebzelerin isimlerini ezberletmeye benziyor. Mutfağa girmeden önce sıkılıp bırakıyorsunuz.
🔍 Bu Neden Olur
Web geliştirme öğrenirken en büyük tuzak, teorik bilgiyle pratik beceri arasındaki kopukluktur. Çoğu kurs size syntax'ı öğretir ama 'Bu kodu nerede kullanacağım?' sorusunu cevaplamaz. JavaScript öğrenirken console.log() yazmayı bilirsiniz ama bu fonksiyonu gerçek bir web sayfasında nasıl kullanacağınızı öğrenmezsiniz.
Standart tavsiye genelde 'Önce HTML, sonra CSS, en son JavaScript öğren' şeklindedir. Bu, bir binayı önce çatısız inşa etmeye benzer - motivasyonunuz ilk haftada tükenir. Aslında bu üç teknoloji birbiriyle iç içe çalışır ve birlikte öğrenildiğinde mantıklı hale gelir.
🔧 5 Çözümler
1
İlk Gün Kendi Web Sayfanızı Yapın
🟢 Easy⏱ 2-3 saat
▾
Teoriye girmeden önce, basit bir kişisel sayfa oluşturarak hemen pratiğe başlayın.
1
Boş bir HTML dosyası açın — Bilgisayarınızda 'index.html' adında bir dosya oluşturun ve içine sadece <h1>Merhaba, ben [İsminiz]</h1> yazın. Tarayıcıda açın ve çalıştığını görün.
2
CSS ile renk ekleyin — Aynı dosyaya <style> etiketi ekleyin ve h1'e bir renk verin: color: blue;. Değişikliği kaydedip tarayıyıcıyı yenileyin.
3
JavaScript ile etkileşim ekleyin — Sayfaya bir buton ekleyin: <button id='degistir'>Rengi Değiştir</button>. Altına <script> etiketi açın ve butona tıklayınca rengin değişmesini sağlayın: document.getElementById('degistir').onclick = function() { document.querySelector('h1').style.color = 'red'; }
4
Yerel dosyalarla çalışın — CSS'i ayrı bir .css dosyasına, JavaScript'i .js dosyasına taşıyın ve HTML'den bağlayın. Bu, gerçek proje yapısını anlamanızı sağlar.
💡İlk projenizde mükemmel olmaya çalışmayın. Benim ilk sayfamda yazılar ortalanmamıştı ve buton kötü görünüyordu - önemli olan çalışmasıydı.
Önerilen Ürün
Samsung T7 Portable SSD 500GB
Bu neden işe yarar: Kod dosyalarınızı hızlı taşımak ve yedeklemek için bu taşınabilir SSD, projelerinizi her yerde çalıştırmanızı sağlar.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
2
Küçük Bileşenlerle Pratik Yapın
🟡 Medium⏱ Haftada 4-5 saat
▾
Büyük projeler yerine, buton, menü, kart gibi küçük bileşenler yaparak becerilerinizi geliştirin.
1
Basit bir buton koleksiyonu yapın — Farklı stillerde 5 buton oluşturun: düz, yuvarlak köşeli, gölgeli, hover efekti olan, disabled durumda olan. Her birini hem HTML/CSS hem de JavaScript etkileşimi ekleyerek yapın.
2
Açılır menü bileşeni oluşturun — Tıklayınca açılan basit bir menü yapın. Önce HTML yapısını kurun, sonra CSS ile stil verin, en son JavaScript ile açma/kapama fonksiyonunu ekleyin.
3
Veri gösterme kartı tasarlayın — Bir ürün veya kişi kartı yapın. Resim, başlık, açıklama ve buton içersin. Mouse ile üzerine gelince efekt ekleyin.
💡Her bileşeni yaparken, önce kağıt üzerinde taslağını çizin. Ben ilk menümü 3 kez yeniden yazmak zorunda kaldım çünkü önce planlamamıştım.
Önerilen Ürün
Wacom Intuos Small Grafik Tableti
Bu neden işe yarar: Web tasarımı için fikirlerinizi önce çizmeniz, kodlamaya başlamadan önce plan yapmanızı kolaylaştırır.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
3
Gerçek Web Sitelerini İnceleyin ve Kopyalayın
🟡 Medium⏱ Haftada 2-3 saat
▾
Beğendiğiniz web sitelerinin nasıl yapıldığını inceleyin ve basit versiyonlarını oluşturun.
1
Tarayıcı geliştirici araçlarını açın — Chrome veya Firefox'ta F12'ye basın. Beğendiğiniz bir web sitesinde (örneğin bir blog veya portfolyo) Elements sekmesinden HTML yapısını, Styles sekmesinden CSS'leri inceleyin.
2
Basit bir bölümü kopyalayın — Sitenin header veya footer gibi basit bir bölümünü seçin. Kendi dosyalarınızda aynısını yapmaya çalışın. Tamamen aynı olması gerekmez - benzerini yapın.
3
Kodları anlamaya çalışın — Gördüğünüz CSS özelliklerini anlamadığınızda, MDN Web Docs'ta araştırın. Örneğin 'display: flex' ne işe yarıyor?
4
Kendi varyasyonunuzu yapın — Aynı yapıyı kullanarak farklı renkler, boyutlar veya düzenlerle kendi versiyonunuzu oluşturun.
5
JavaScript etkileşimlerini ekleyin — Orijinal sitedeki basit JavaScript etkileşimlerini (menü açma, slider gibi) kendi projenize eklemeyi deneyin.
💡Medium.com'un header'ını kopyalamaya çalıştığımda, flexbox'ın nasıl çalıştığını nihayet anlamıştım. Bazen görmek, okumaktan daha iyidir.
4
JavaScript'i Hemen HTML/CSS ile Birlikte Kullanın
🔴 Advanced⏱ 3-4 hafta
▾
JavaScript'i sadece ayrı bir dil olarak değil, web sayfalarınızı canlandırmak için bir araç olarak öğrenin.
1
DOM manipülasyonuyla başlayın — JavaScript'in document.getElementById() ve document.querySelector() gibi metodlarını kullanarak HTML elementlerini seçmeyi öğrenin. Basit bir örnek: Bir butona tıklayınca paragrafın rengini değiştirin.
2
Event listener'ları öğrenin — click, mouseover, keypress gibi olayları dinleyin. Örneğin, bir resmin üzerine gelince büyümesini sağlayın.
3
Form işleme yapın — Basit bir iletişim formu yapın. Kullanıcı adı ve email alanları ekleyin, gönder butonuna tıklayınca bu verileri konsola yazdırın.
4
Local Storage kullanın — Kullanıcının tercihlerini (örneğin karanlık mod seçimi) tarayıcıda saklayın. Sayfayı yenilediğinizde ayarların korunduğunu görün.
5
Basit API çağrıları yapın — Ücretsiz bir API (örneğin JSONPlaceholder) kullanarak fake veriler çekin ve sayfanızda gösterin.
6
Hata ayıklama öğrenin — Console.log() yerine debugger kullanmayı deneyin. Kodunuz nerede hata veriyor, adım adım takip edin.
💡JavaScript öğrenirken en çok 'fetch API' kısmında takıldım. İlk başta sadece local verilerle çalışın, sonra dış API'lere geçin.
5
Kodlama Alışkanlığı Geliştirin
🟢 Easy⏱ Günde 30 dakika
▾
Her gün küçük kodlama seansları yaparak süreklilik sağlayın ve unutmayı önleyin.
1
Günlük 30 dakika kuralı — Her gün aynı saatte (örneğin kahvaltıdan sonra) 30 dakika kod yazın. Süreyi telefonunuzdaki zamanlayıcı ile takip edin.
2
Küçük görevler belirleyin — Her seans için spesifik bir hedef koyun: 'Bugün responsive bir navbar yapacağım' veya 'CSS grid ile basit bir layout oluşturacağım' gibi.
3
Not tutun — Öğrendiğiniz her yeni şeyi kendi kelimelerinizle bir not defterine yazın. Ben Google Keep kullanıyorum ama fiziksel defter de işe yarar.
4
Hataları belgeleyin — Karşılaştığınız her hatayı ve çözümünü kaydedin. 2 ay sonra aynı hatayı yaptığınızda çözümü hatırlamanızı sağlar.
5
Haftalık tekrar yapın — Her Pazar, o hafta öğrendiklerinizi gözden geçirin. Eski projelerinize bakın ve nasıl geliştirebileceğinizi düşünün.
💡İlk 3 hafta her gün kod yazdım, 4. hafta 2 gün atladım ve geri dönmek çok zor oldu. Tutarlılık mükemmellikten daha önemli.
⚠️ Ne Zaman Profesyonel Yardım Alınmalı
Eğer 2-3 ay düzenli çalıştıktan sonra hala basit bir web sayfası yapamıyorsanız veya kod yazarken sürekli aynı hataları tekrarlıyorsanız, bir bootcamp'e veya mentorluk almaya başlamayı düşünün. Bazen yapısal bir öğrenme sorunu olabilir - örneğin temel programlama mantığını anlamakta zorlanıyorsanız, birebir destek almak aylarca tek başına çabalamaktan daha verimli olabilir. Ayrıca, öğrenirken sürekli hayal kırıklığı yaşıyor ve motivasyonunuz tamamen bitiyorsa, farklı bir öğrenme yöntemi denemek için profesyonel rehberlik almak mantıklı olabilir.
HTML, CSS ve JavaScript öğrenmek bir maraton değil, bir dizi küçük koşudur. İlk projeniz kötü görünecek - benimki öyleydi. İlk JavaScript kodunuz hata verecek - benimkiler verdi. Önemli olan, her gün küçük bir şey öğrenmek ve hemen uygulamaktır.
Unutmayın: Hiçbir geliştirici ilk günden mükemmel kod yazmadı. Ben hala bazen basit CSS hataları yapıyorum ve Stack Overflow'da saatlerce araştırma yapıyorum. Bu normal. Başlamak için mükemmel olmanıza gerek yok, sadece başlamanız yeterli. Bugün bir index.html dosyası açın ve ilk satırı yazın - gerisi gelecektir.
Temel seviyede çalışan web sayfaları yapmak 1-2 ay sürer. Ancak uzmanlaşmak 6 ay ile 1 yıl arasında değişir. Önemli olan süre değil, ne sıklıkta pratik yaptığınızdır. Haftada 10 saat çalışan biri, haftada 2 saat çalışandan çok daha hızlı öğrenir.
HTML CSS JavaScript hangi sırayla öğrenilmeli?+
Birlikte öğrenin. İlk gün basit bir HTML yapısı kurun, hemen CSS ile stil verin, ertesi gün JavaScript ile etkileşim ekleyin. Ayrı ayrı öğrenmek motivasyonunuzu düşürür ve birbirleriyle nasıl çalıştıklarını anlamanızı zorlaştırır.
JavaScript öğrenmeden web sitesi yapılır mı?+
Statik web siteleri için evet, ama günümüzdeki çoğu site etkileşimli özellikler içeriyor. JavaScript öğrenmeden menüler, form doğrulama, slider'lar gibi temel özellikleri yapamazsınız. Basit bir blog bile artık JavaScript kullanıyor.
En iyi ücretsiz kaynaklar neler?+
MDN Web Docs temel referansınız olsun. FreeCodeCamp interaktif alıştırmalar için iyi. YouTube'da Traversy Media ve Web Dev Simplified kanallarını takip edin. Türkçe kaynak olarak Yazılım Bilimi'nin web geliştirme serisine bakabilirsiniz.
Kod yazarken sürekli unutuyorum ne yapmalıyım?+
Bu normal. Her geliştirici syntax'ı unutur. Önemli olan mantığı anlamak. Unuttuğunuzda MDN'ye bakın. Zamanla en çok kullandığınız kodlar hafızanıza yerleşir. Not tutmak ve küçük projeler yapmak unutmayı azaltır.
💬 Deneyimini Paylaş
Deneyimini paylaş — aynı durumla karşılaşanlara yardımcı olur!