Yazılıma başlamak için önce küçük bir hedef seç, temel kavramları öğren ve her konunun ardından çalışan bir uygulama yap. Web geliştirme hedefliyorsan HTML, CSS ve JavaScript ile başlayıp React ve sunucu tarafına ilerleyebilirsin. İlerlemeni izlediğin video sayısıyla birlikte, yardım almadan tamamlayabildiğin görevlerle değerlendir.
Önce hangi alanda üretmek istediğini belirle
Bir internet sitesi hazırlamak, mobil uygulama geliştirmek ve veriler üzerinde çalışmak farklı öğrenme yolları gerektirir. İlk hedefin “bütün dilleri öğrenmek” yerine “kendimi tanıtan bir sayfa hazırlamak” veya “not ekleyebildiğim bir uygulama yapmak” olabilir.
| Hedef | İlk odak | İlk çalışma |
|---|---|---|
| Web arayüzü geliştirmek | HTML, CSS, JavaScript | Responsive bir profil sayfası |
| Sunucu ve API geliştirmek | JavaScript, Node.js, HTTP | İsteklere JSON yanıtı veren bir servis |
| Mobil uygulama geliştirmek | JavaScript, React, React Native | Ekleme ve silme işlemleri bulunan not uygulaması |
Bu rehber BilGen eğitimlerindeki web geliştirme yolunu esas alır. Bir alana karar verip temelini oturtman, ardından başka bir alana geçmeni de kolaylaştırır.
Başlangıç için hangi bilgilere ihtiyacın var?
Bilgisayarda dosya ve klasör oluşturabilmek, tarayıcı kullanmak ve bir kod editörü kurabilmek yeterli bir başlangıçtır. Değişken, koşul, döngü ve fonksiyon gibi kavramları uygulamalarla öğrenirsin. İleri matematik yerine ilk aşamada bir işi küçük adımlara ayırmaya ve sonucu kontrol etmeye odaklan.
Türkçe derslerle başlayabilirsin. Hata mesajlarını ve resmî dokümanları okurken teknik İngilizce de çalışmana yardımcı olur. Anlamadığın bir mesajı çevirirken kodun hangi satırına işaret ettiğini ayrıca incele.
Web geliştirme öğrenme sırası
- HTML ile içeriği kur. Başlık, paragraf, bağlantı, görsel, liste ve form elemanlarını kullan. Sayfanın bir ziyaretçi ve ekran okuyucu için anlamlı olmasını hedefle.
- CSS ile görünümü düzenle. Seçicileri, kutu modelini, Flexbox'ı ve responsive tasarımı öğren. Aynı sayfayı dar ve geniş ekranda kontrol et.
- JavaScript ile etkileşim ekle. Değişken, dizi, nesne, fonksiyon ve olayları öğren. Bir formdan veri alıp listede göster.
- Git ile değişikliklerini takip et. Küçük işleri tamamladıkça commit oluştur. Projenin nasıl çalıştırılacağını bir README dosyasında anlat.
- React ile bileşenlere geç. JavaScript temelin oturduğunda props, state, hook ve yönlendirme konularına ilerle.
- Node.js ve API geliştir. HTTP isteklerini, sunucu tarafını ve verinin arayüze nasıl ulaştığını öğren. Sonra frontend ve backend katmanlarını birleştir.
Sıfırdan Web Geliştirme Eğitimi HTML, CSS ve JavaScript temelini kurmak için kullanılabilir. React'e geçmeden önce fonksiyonları, dizi metotlarını, nesneleri ve asenkron JavaScript'i tekrar et. JavaScript ders notları bu tekrar sırasında örnek kaynak olarak kullanılabilir.
Haftada altı saat için örnek çalışma düzeni
Aşağıdaki düzen başlangıç için bir çalışma örneğidir. Öğrenme süren, ön bilgine, ayırdığın zamana ve tekrar ihtiyacına göre değişir.
| Çalışma | Süre | Çıkacak sonuç |
|---|---|---|
| Bir konuyu öğren ve örneği kendin yaz | 2 saat | Çalışan küçük bir örnek |
| Konuyu farklı bir problemde uygula | 2 saat | Örneğe eklediğin yeni bir özellik |
| Hataları düzelt, kodu düzenle, not al | 1 saat | Daha anlaşılır kod ve kısa notlar |
| Önceki konuları tekrar et, Git'e kaydet | 1 saat | Commit ve bir sonraki görev listesi |
Bir örneği videoyla beraber yaptıktan sonra videoyu kapatıp yeniden kurmayı dene. Takıldığın adımı not al. Sonraki çalışmanda bütün dersi baştan izlemek yerine önce o kavramı tekrar et.
İlk üç projende ne yapabilirsin?
Profil sayfası ile semantik HTML, CSS düzeni ve mobil uyumu çalış. İletişim bağlantılarını ve okunabilir başlıkları ekle.
Görev listesi ile bir formdan veri al, görev ekle, tamamlandı işaretle ve sil. Sayfayı yenilediğinde veriyi korumak için localStorage kullanımını incele.
Ürün listesi ve sepet ile diziler, nesneler, filtreleme ve toplam fiyat hesaplamasını bir arada kullan. E-ticaret arayüzü eğitimi bu aşamada daha kapsamlı bir çalışma sunar.
Projelerinin içine kullandığın araçları, kurulum adımlarını, yaptığın özellikleri ve geliştirmek istediğin alanları yaz. Uygulamalı proje örneklerini inceleyerek kapsamı karşılaştırabilirsin.
Yapay zekâyı öğrenirken nasıl kullanabilirsin?
Bir hata mesajını açıklamasını, yazdığın fonksiyon için örnek girdiler önermesini veya kodunu adım adım anlatmasını isteyebilirsin. Önerdiği kodu çalıştır, sonucu dene ve her satırını açıklamaya çalış. API anahtarlarını, parolaları ve kişisel verileri paylaşmadan yardım al.
Bir çözüm çalıştığında farklı bir girdiyle tekrar dene. Kaynağı MDN web geliştirme dokümanları ve React'in başlangıç rehberi gibi resmî açıklamalarla karşılaştır.
Kurs mu, kapsamlı bir kamp mı seçmelisin?
Tek bir konudaki açığını kapatmak istiyorsan ön koşulları sana uyan bir kurs seçebilirsin. Web temellerinden frontend, backend ve mobil geliştirmeye uzanan bir sıra arıyorsan Fullstack Camp kapsamını incele. Kurs ve bootcamp karşılaştırma rehberi eğitim biçimini, destek kapsamını ve ücretleri değerlendirmen için ölçütler sunar.