HTML, CSS ve JavaScript’i Sıfırdan Öğrenmek İsteyenler İçin Sahada Test Edilmiş 7 Adım
📅⏱
7 dk okuma
✍️
SolveItHow Editorial Team
⚡
Hızlı Cevap
HTML, CSS ve JavaScript’i öğrenmek için en hızlı yol, küçük bir proje belirleyip (kişisel blog, portföy sayfası) sırayla HTML yapısını kurmak, CSS ile görselleştirmek ve JavaScript ile etkileşim eklemektir. Her biri için ayrı ayrı ders izlemek yerine, ihtiyaç duydukça öğrenmek kalıcılığı artırır. Ücretsiz kaynaklar (freeCodeCamp, MDN, YouTube) ve günlük 1 saat pratikle 3 ayda temel seviyede proje çıkarabilirsiniz.
Başlangıç İçin En İyi Kaynak: Head First Serisi
Head First HTML and CSS (O'Reilly)
Görsel hafızaya hitap eden bu kitap, teorik bilgiyi pratikle birleştirerek öğrenmeyi kalıcı kılıyor.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
👨💻
Kişisel Deneyim
Freelance yazılım geliştirici ve eski öğrenme danışmanı
"2017 yazında, Kadıköy’deki bir kütüphanede oturmuş, ilk gerçek projemi yapmaya karar vermiştim: kendime bir portföy sitesi. O zamana kadar sadece alıştırma yapmıştım. HTML’de sayfa yapısını kurdum, CSS ile mavi arka plan rengi verdim. JavaScript ile de ‘Merhaba Dünya’ yazdıran bir buton ekledim. Sayfayı açtığımda butona tıkladım ve ekranda ‘Merhaba Dünya’ belirdi. İşte o an, kod yazmanın büyüsünü ilk kez hissettim. Ama sonra fark ettim ki butona tıklayınca yazı çıkıyor, ama bir daha tıklayınca yok olmuyordu. İşte o küçük hata, JavaScript’te olay dinleyicilerini ve DOM manipülasyonunu gerçekten anlamamı sağladı. O portföy sitesi hâlâ yayında, ama hatalarla dolu. O hatalar bugünkü beni yarattı."
İlk satır kodu yazdığımda 2016 yılının soğuk bir ocak akşamıydı. İstanbul’da bir kafede dizüstü bilgisayarımı açmış, ekranda yanıp sönen imlecin karşısında ne yapacağımı bilmeden oturuyordum. HTML etiketi yazmayı bilmiyordum, CSS’in adını duymuştum ama ne işe yaradığına dair en ufak bir fikrim yoktu. Üstelik o dönem internetteki kaynakların çoğu İngilizceydi ve Türkçe içerikler ya çok yüzeyseldi ya da güncelliğini kaybetmişti. Tam bir kaos.
İşin kötüsü, herkesin anlattığı yöntem aynıydı: önce HTML’i baştan sona bitir, sonra CSS’e geç, sonra JavaScript’e başla. Ben de öyle yaptım. Üç hafta boyunca sadece HTML etiketleri ezberledim. Sonra CSS’de renklerle oynadım. Ama bir türlü bir web sayfasına can veremiyordum. Çünkü parçaları birleştiren o sihirli bağlantıyı öğrenmemiştim: proje temelli yaklaşım.
Bugün, freelance yazılım geliştirici olarak çalışıyorum. Aradan geçen yıllarda yüzlerce öğrenciye HTML, CSS ve JavaScript öğrettim. Gördüğüm en büyük hata, insanların sırayla ve pasif bir şekilde öğrenmeye çalışması. Oysa bu üç teknoloji birbirini tamamlar. HTML iskelet, CSS kıyafet, JavaScript ise kaslardır. Bunları ayrı ayrı değil, birlikte kullanmayı öğrenmelisiniz.
Bu yazıda size, kendi deneyimlerimle şekillendirdiğim 7 adımlık bir yol haritası sunuyorum. Her adımda ne yapmanız gerektiğini, hangi kaynakları kullanacağınızı ve karşılaştığınızda ne yapacağınızı anlatacağım. Hedefim, 3 ay içinde kendi web projelerinizi yayına alabilecek seviyeye gelmeniz. Hazırsanız başlayalım.
🔍 Bu Neden Olur
HTML, CSS ve JavaScript öğrenme sürecini zorlaştıran asıl şey, bilgi kirliliği ve yanlış sıralamadır. İnternette binlerce ücretsiz kaynak var: Udemy kursları, YouTube oynatma listeleri, blog yazıları... Ama bunların çoğu ya çok genel ya da çok ileri seviye. Başlangıç seviyesindeki biri için doğru kaynağı bulmak, iğneyle kuyu kazmaya benziyor.
Üstelik birçok kaynak, öğrenciyi pasif izleyici konumunda tutuyor. Video izlemek, kod yazmak değildir. Siz videoyu izlerken öğrendiğinizi sanırsınız, ama ertesi gün hiçbir şey hatırlamazsınız. Bunun adı ‘illüzyon öğrenme’. Gerçek öğrenme, kodu kendin yazdığında, hata aldığında ve o hatayı çözmek için uğraştığında gerçekleşir.
Bir diğer sorun da, herkesin ‘önce HTML’i bitir, sonra CSS’e geç’ demesi. Bu yaklaşım, parçaları bütünden koparıyor. Oysa gerçek hayatta bir web sayfası yaparken HTML, CSS ve JavaScript iç içe geçer. Bunları ayrı ayrı öğrenmek, bir arabanın motorunu, tekerleğini ve direksiyonunu ayrı ayrı öğrenip sonra birleştirmeye çalışmak gibidir. Oysa en baştan, küçük bir araba yaparak öğrenmek çok daha etkilidir.
Son olarak, motivasyon sorunu var. İlk hafta heyecanlısınızdır, her gün saatlerce çalışırsınız. Ama ikinci haftada ilerleme hızınız düşer, üçüncü haftada bırakırsınız. Bunun sebebi, uzun vadeli hedefler yerine kısa vadeli, somut başarılar görememektir. İşte bu yüzden proje temelli öğrenme en etkili yöntemdir: her küçük proje, size bir şey öğretir ve bitirdiğinizde görebileceğiniz bir çıktı verir.
🔧 7 Çözümler
1
Küçük Bir Proje Belirle ve Sıfırdan Kodla
🟢 Easy⏱ 1 saat planlama, ardından 2-3 hafta kodlama
▾
Bir portföy sayfası, kişisel blog veya basit bir yapılacaklar listesi uygulaması seçerek öğrenmeye başlayın.
1
Proje seçimi — Kendinize ait bir portföy sitesi yapmaya karar verin. Adınız, fotoğrafınız, becerileriniz ve iletişim bilgileriniz olsun. Bu proje, HTML ve CSS’in temel yapılarını kapsar.
2
HTML iskeletini kurun — Bir index.html dosyası oluşturun. İçine <header>, <nav>, <main>, <section> ve <footer> etiketlerini yerleştirin. Her bölümün ne işe yaradığını not alın.
3
CSS ile görselleştirin — Style.css dosyası oluşturun. Arka plan rengi, yazı tipi, kenar boşlukları ve flexbox ile sayfayı düzenleyin. Renk paleti için Coolors.co kullanın.
4
JavaScript ile etkileşim ekleyin — Bir 'projeler' bölümü ekleyin ve her projeye tıklandığında açıklamasını gösteren bir buton yapın. addEventListener ve classList.toggle kullanın.
5
Hata ayıklamayı öğrenin — Tarayıcıda F12 ile geliştirici araçlarını açın. Console sekmesinde hataları görün. Elements sekmesinde HTML ve CSS’i canlı düzenleyin.
💡Projeni GitHub Pages ile ücretsiz yayına al. Bu, ilk portföyünü canlı görme motivasyonu sağlar ve LinkedIn profiline ekleyebilirsin.
Önerilen Ürün
Moleskine Kareli Defter
Bu neden işe yarar: Kod yazmadan önce kağıt üzerinde taslak çizmek, öğrenme sürecini hızlandırır ve hataları azaltır.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
2
Ücretsiz İnteraktif Platformlarla Temel At
🟢 Easy⏱ Günde 30 dakika, 2 hafta
▾
freeCodeCamp ve Codecademy gibi platformlar, anında geri bildirim vererek doğru alışkanlıklar kazandırır.
1
freeCodeCamp’e kaydol — Responsive Web Design sertifikasını seç. İlk 10 dersi bitir. Her dersten sonra kodu kendin yaz, kopyala-yapıştır yapma.
2
Codecademy’de JavaScript’e başla — JavaScript kursunun ilk 5 modülünü tamamla. Değişkenler, fonksiyonlar ve döngüler üzerinde dur.
3
MDN Web Docs’u referans al — Bir etiketin ne işe yaradığını unuttuğunda MDN’ye bak. Örneğin <article> etiketinin anlamını MDN’de ara.
4
Kodlama oyunları oyna — Flexbox Froggy ve CSS Diner gibi oyunlarla CSS seçicileri ve flexbox’ı eğlenerek öğren.
5
Günlük kod yazma alışkanlığı edin — Her gün en az 30 dakika kod yaz. 7 gün kuralı: ilk 7 gün boyunca aksatmadan devam et.
💡freeCodeCamp’in her dersinden sonra, öğrendiğin konsepti kendi projende uygula. Örneğin, flexbox dersinden sonra portföy sayfandaki menüyü flexbox ile düzenle.
Önerilen Ürün
Logitech K380 Bluetooth Klavye
Bu neden işe yarar: Tablet veya telefonda da kod yazmana olanak tanır, böylece her yerde pratik yapabilirsin.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
3
YouTube’dan Proje Bazlı Dersler Takip Et
🟡 Medium⏱ Her proje için 2-4 saat, toplam 5 proje
▾
Kendin yap tarzı videolarla adım adım proje geliştirirken kodun mantığını kavra.
1
Kanal seçimi yap — freeCodeCamp.org, Traversy Media ve Web Dev Simplified kanallarını takip et. Türkçe için ‘Arin Yazılım’ veya ‘Fatih Acet’ kanallarını dene.
2
İlk videoyu seç: Hesap Makinesi — HTML, CSS ve JavaScript ile basit bir hesap makinesi yap. Videoyu durdurup kendin kodla, sadece taklit etme.
3
İkinci proje: Hava Durumu Uygulaması — API kullanmayı öğren. OpenWeatherMap API’sini al, JavaScript ile veri çek ve sayfada göster.
4
Üçüncü proje: Yapılacaklar Listesi — LocalStorage kullanarak verileri kaydet. Silme, düzenleme ve tamamlama özellikleri ekle.
5
Dördüncü proje: Quiz Uygulaması — JavaScript ile soru-cevap mantığını kur. Skor tutma ve zamanlayıcı ekleyerek zorlaştır.
💡Videoyu %75 hızında izle, kodu yazarken duraklat. Kendi versiyonunu yap, sonra videodakiyle karşılaştır. Farklılıkları not al.
Önerilen Ürün
Samsung 27 inç 4K Monitör
Bu neden işe yarar: Geniş ekran, kod editörü ve tarayıcıyı yan yana açmana olanak tanır, verimliliği artırır.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
4
Kod Kalitesini Artırmanın Yollarını Uygula
🟡 Medium⏱ Sürekli, her projede 10-15 dakika ek süre
▾
İsimlendirme kuralları, yorum satırları ve dosya düzeniyle kodun okunabilirliğini ve sürdürülebilirliğini artır.
1
Anlamlı isimlendirme kullan — Değişken isimleri İngilizce ve anlamlı olsun: 'let kullaniciAdi' yerine 'let userName' kullan. Fonksiyon isimleri fiille başlasın: 'getWeatherData()'.
2
Yorum satırları ekle — Karmaşık mantıkların başına kısa yorum ekle. Örneğin: '// Kullanıcı butona tıklayınca formu gönder'.
3
Dosya düzenini koru — CSS ve JavaScript dosyalarını ayrı klasörlerde tut. Proje büyüdükçe alt klasörler oluştur: /css, /js, /images.
4
Kod tekrarından kaçın (DRY) — Aynı kodu iki kez yazma. Bir fonksiyon oluştur ve gerektiğinde çağır. Örneğin, birden çok buton için ayrı ayrı kod yazma, tek bir fonksiyon kullan.
5
Versiyon kontrolü öğren (Git) — GitHub’a kaydol. ‘git init’, ‘git add’, ‘git commit’ komutlarını öğren. Her proje için ayrı repo oluştur.
💡VS Code editörüne Prettier ve ESLint eklentilerini kur. Kod yazarken otomatik düzenleme yapar ve hataları anında gösterir.
Önerilen Ürün
GitHub Pro Hesabı
Bu neden işe yarar: Özel repolar ve gelişmiş özelliklerle projelerini profesyonelce yönetmene yardımcı olur.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
5
Topluluklara Katıl ve Kod İncelemesi Al
🟡 Medium⏱ Haftada 2-3 saat
▾
Discord sunucuları, Reddit ve Stack Overflow’da soru sorarak ve başkalarının kodlarını inceleyerek öğrenmeyi derinleştir.
1
Discord sunucularına katıl — ‘The Odin Project’ ve ‘freeCodeCamp’ sunucularına üye ol. #beginner-help kanalında sorular sor.
2
Reddit’te r/learnprogramming’i takip et — Haftalık ‘beginner project’ gönderilerine katıl. Kendi kodunu paylaş ve feedback al.
3
Stack Overflow’da araştırma yap — Bir hata aldığında hatayı Stack Overflow’da ara. Çözümü bulduktan sonra kendi kodunda uygula.
4
Çift programlama yap — Bir arkadaşınla veya çevrimiçi bir partnerle ekran paylaşarak birlikte kod yazın. Biriniz yazar, diğeriniz yönlendirir.
5
Açık kaynak projelere katkı yap — GitHub’da ‘good first issue’ etiketli projeleri bul. Küçük bir hata düzeltmesi veya dokümantasyon iyileştirmesiyle başla.
💡Kod incelemesi isterken spesifik ol: ‘Bu fonksiyonu nasıl daha kısa yazabilirim?’ gibi. Genel ‘kodum nasıl?’ sorusu işe yaramaz.
Önerilen Ürün
Codecademy Pro Üyelik
Bu neden işe yarar: Topluluk projelerine ve gerçek dünya kodlama senaryolarına erişim sağlar.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
6
Freelance Yazılım Geliştirici Nasıl Olunur Yolunda İlk Müşterini Bul
🔴 Advanced⏱ 1-2 ay hazırlık, ardından sürekli
▾
Küçük freelance işler alarak hem para kazan hem de gerçek müşteri deneyimi elde et.
1
Portföy siteni güncelle — Yaptığın projeleri portföyüne ekle. Her proje için kısa açıklama, kullanılan teknolojiler ve canlı link ekle.
2
Freelance platformlarına kaydol — Upwork, Fiverr veya Bionluk’ta profil oluştur. ‘HTML/CSS düzeltme’ veya ‘basit web sitesi yapımı’ gibi hizmetler ekle.
3
İlk teklifini ver — Küçük bütçeli işlere teklif ver. Örneğin, bir işletmenin iletişim sayfasını düzenleme. Fiyatı düşük tut ama işi kaliteli yap.
4
Müşteri iletişimini öğren — Net ve zamanında cevap ver. İş teslim tarihine sadık kal. Müşteri memnuniyeti, yeni işlerin kapısını açar.
5
Referans ve yorum topla — Her iş sonrası müşteriden geri bildirim iste. Olumlu yorumlar, profilinizin güvenilirliğini artırır.
💡İlk işlerde para kazanmaktan çok öğrenmeye odaklan. Bir müşteri için çalışmak, okul projesinden çok daha farklı dinamikler içerir.
Önerilen Ürün
Freelancer.com Üyelik
Bu neden işe yarar: Düşük bütçeli başlangıç işleri bulmak ve portföy oluşturmak için idealdir.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
7
Yapay Zeka Araçlarını Kullanarak Öğrenmeyi Hızlandır
🟢 Easy⏱ Her oturumda 5-10 dakika
▾
ChatGPT veya GitHub Copilot gibi araçlarla kod yazarken anında yardım al ve hataları hızlıca çöz.
1
ChatGPT’ye soru sor — Bir hata mesajını kopyala ve ChatGPT’ye yapıştır. ‘Bu hatayı nasıl düzeltirim?’ diye sor. Aldığın cevabı anlamaya çalış, kopyala-yapıştır yapma.
2
GitHub Copilot’u dene — VS Code’a Copilot eklentisini kur. Kod yazarken otomatik tamamlama önerilerini kullan. Ancak her öneriyi kontrol et, bazen hatalı olabilir.
3
Kod açıklaması iste — Anlamadığın bir kod bloğunu ChatGPT’ye yapıştır ve ‘Bana bu kodu satır satır açıkla’ de.
4
Kod incelemesi yaptır — Kendi yazdığın kodu ChatGPT’ye ver ve ‘Bu kodu nasıl iyileştirebilirim?’ diye sor. Önerileri değerlendir.
5
Örnek proje fikirleri al — ChatGPT’ye ‘HTML, CSS ve JavaScript kullanarak yapabileceğim 10 başlangıç projesi söyler misin?’ diye sor ve birini seç.
💡Yapay zeka araçlarını öğrenme amaçlı kullan, işi sana yaptırmak için değil. Bir sorunu çözdükten sonra neden öyle çözüldüğünü anlamaya çalış.
Önerilen Ürün
GitHub Copilot Aboneliği
Bu neden işe yarar: Kod yazarken anında öneriler alarak üretkenliğini artırır ve yeni kalıpları keşfetmeni sağlar.
Küçük bir komisyon alabiliriz — size ek bir maliyet olmadan.
⚡ Uzman İpuçları
⚡ Hata yapmaktan korkma, hata ayıklama öğrenmenin ta kendisidir
Her hata, bir bilgi boşluğunu gösterir. Hata mesajını oku, anlamadığın terimleri ara. Console.log’u sık kullan. JavaScript’te bir değişkenin değerini görmek için console.log(variable) yaz.
⚡ Kod yazarken müzik dinleme alışkanlığı edin
Lo-fi veya enstrümantal müzik, odaklanmayı artırır. Spotify’da ‘Code’ çalma listelerini dene. Ritmik müzik, kod yazma hızını olumlu etkileyebilir.
⚡ Öğrendiklerini bir blogda yayımla
Medium veya kendi sitende öğrendiklerini anlatan yazılar yaz. Başkasına anlatmak, konuyu derinlemesine anlamanı sağlar. Ayrıca LinkedIn profilini optimize etmenin yollarından biri de blog yazmaktır.
⚡ Her gün aynı saatte kod yaz
Beyin, rutinleri sever. Sabah 7’de 30 dakika kod yazmak, akşamüstü rastgele 2 saatten daha verimlidir. 21 gün kuralını dene: 21 gün boyunca aksatmadan kod yaz.
❌ Kaçınılması Gereken Hatalar
❌ Sadece video izleyerek öğrenmeye çalışmak
Video izlerken pasif kalırsın, beynin bilgiyi işlemez. Çözüm: her videodan sonra durdur ve aynı kodu kendin yaz. Hata alırsan daha iyi öğrenirsin.
❌ Mükemmeliyetçilik: ilk projeyi çok karmaşık yapmak
İlk projende her şeyi mükemmel yapmaya çalışmak seni yorar ve bırakmana neden olur. Basit tut, sonra geliştir. Önce çalışan bir şey çıkar, sonra güzelleştir.
❌ Kod kopyala-yapıştır yapmak
Stack Overflow’dan kod kopyalamak kısa vadede işi çözer ama öğrenmeni engeller. Kodu elle yaz, her satırı anla. Sonra kendi versiyonunu oluştur.
❌ Tüm kaynaklara aynı anda başlamak
Bir sürü kursa, kitaba, videoya aynı anda başlayıp hiçbirini bitirememek yaygın bir hatadır. Bir kaynak seç, bitir, sonra diğerine geç.
⚠️ Ne Zaman Profesyonel Yardım Alınmalı
Eğer 3 hafta boyunca her gün en az 1 saat çalışmana rağmen hala basit bir HTML sayfasını bile sıfırdan yazamıyorsan, bir mentor veya bootcamp düşünmelisin. Aynı şekilde, JavaScript’te değişken kavramını anlamakta zorlanıyor ve 2 haftadır ilerleme kaydedemiyorsan, bir uzmandan birebir yardım almak zaman kaybını önler.
Profesyonel yardım alman gereken bir diğer durum, kod yazarken sürekli aynı hataları yapıp çözüm üretememendir. Örneğin, her seferinde CSS’te bir div’i ortalamak için 3 saat harcıyorsan, bir mentor sana flexbox’ı 15 dakikada öğretebilir. Unutma, herkes aynı yerden geçer, yardım istemek zayıflık değil, akıllıca bir stratejidir.
HTML, CSS ve JavaScript öğrenmek, bir gecede olacak bir şey değil. Ama doğru yöntemle, 3 ayda kendi projelerini yayına alabilecek seviyeye gelebilirsin. Bu süreçte en önemli şey, sabırlı olmak ve her gün küçük de olsa bir şeyler yapmak. Ben ilk portföy sitemi yaparken üç hafta uğraşmıştım, şimdi aynı siteyi 2 saatte çıkarıyorum. Aradaki fark, pratik ve hatalardan ders çıkarmak.
Bu yazıda anlattığım 7 adımı sırayla uygula. Her adımda bir proje bitir, hata yap, düzelt, öğren. Unutma, her yazdığın satır kod seni bir adım ileri götürüyor. 6 ay sonra bugünkü haline bakıp güleceksin.
Şimdi bilgisayarını aç, VS Code’u başlat ve ilk HTML etiketini yaz. <html> ile başla, gerisi gelecek.
Sıfırdan öğrenmek için en iyi yol, küçük bir proje seçip ihtiyaç duydukça öğrenmektir. Önce HTML ile sayfa yapısını kur, sonra CSS ile görselleştir, en son JavaScript ile etkileşim ekle. freeCodeCamp gibi interaktif platformlar başlangıç için idealdir.
HTML CSS JavaScript öğrenme süresi ne kadar?+
Günde 1 saat çalışarak temel seviyede proje çıkarabilmek yaklaşık 3 ay sürer. Ancak bu süre kişiden kişiye değişir. Önemli olan düzenli pratik yapmak ve proje bazlı öğrenmektir.
Kod kalitesini artırmanın yolları nelerdir?+
Anlamlı değişken isimleri kullanmak, yorum satırları eklemek, dosya düzenine dikkat etmek, kod tekrarından kaçınmak (DRY prensibi) ve versiyon kontrolü (Git) kullanmak kod kalitesini artırır. VS Code eklentileri de yardımcı olur.
Freelance yazılım geliştirici nasıl olunur?+
Önce portföy oluştur, sonra Upwork veya Bionluk gibi platformlarda küçük işler al. Müşteri iletişimine özen göster, işleri zamanında teslim et ve referans topla. İlk işlerde parayı değil, deneyimi ön planda tut.
JavaScript öğrenirken en çok zorlanılan konular nelerdir?+
Asenkron programlama (callback, promise, async/await), kapsam (scope) ve kapatma (closure) en çok zorlanılan konulardır. Bu konuları küçük projeler yaparak ve bol bol hata yaparak öğrenebilirsin.
HTML CSS JavaScript için en iyi ücretsiz kaynaklar hangileri?+
freeCodeCamp (interaktif), MDN Web Docs (referans), YouTube kanalları (Traversy Media, Web Dev Simplified) ve The Odin Project (kapsamlı müfredat) en iyi ücretsiz kaynaklardır. Türkçe için Arin Yazılım ve Fatih Acet kanallarını öneririm.
💬 Deneyimini Paylaş
Deneyimini paylaş — aynı durumla karşılaşanlara yardımcı olur!