8 Haftalık Modern Web Geliştirme Eğitimi: Proje Odaklı Yol Haritası

Bu yol haritası, başlangıç seviyesinden orta düzeye doğru ilerlemek isteyenler için tasarlanmış, proje odaklı bir 8 haftalık program sunar. Amaç; HTML/CSS, JavaScript, bir modern ön yüz kütüphanesi (React) ile temel bir arka uç API'sini (örnek: ASP.NET Core) öğrenmek ve haftalık küçük projelerle bunları uygulamaktır. Örnek içerik ve yapılandırma için sektördeki kurslara ve akademik ders içeriklerine bakılabilir; örneğin Udemy'deki kapsamlı uygulamalı kurslar ve üniversite dersleri pratik örnekler sağlar (Udemy — Komple Uygulamalı Web Geliştirme Eğitimi 2026, Marmara Üniversitesi — Web Tabanlı Programlama).

Kimler için uygundur?

Bu program, web geliştirmeye yeni başlayan veya temelleri olan ve kısa sürede proje deneyimi kazanmak isteyenler içindir. Temel bilgisayar okuryazarlığı ve internet kullanım bilgisi yeterlidir; program sırasında Git kullanmayı öğrenmek faydalıdır.

Önkoşullar ve çalışma temposu

Önerilen çalışma süresi haftada 8–15 saattir; tempo sizin hedefinize göre ayarlanabilir. Temel HTML/CSS veya kodlama deneyimi yoksa ilk hafta tempoyu hafif tutun. Ücretsiz etkileşimli kaynaklar başlangıç için uygundur (Mrebi — ücretsiz etkileşimli dersler).

Haftalık Müfredat (8 hafta)

Hafta 1 — Temel HTML & proje başlatma

Hedefler: HTML5 semantic yapı, sayfa iskeleti, form elemanları, erişilebilirlik (alt, heading hiyerarşisi) ve temel Git kullanımı.

  • Uygulama: Kişisel portfolyo sayfası (index.html) oluşturun: başlık, hakkında, projeler ve iletişim formu.
  • Ödev: GitHub'da bir depo oluşturun ve ilk commitleri yapın; sayfayı yerel olarak test edin.
  • Süre önerisi: 8–10 saat.

Hafta 2 — CSS3, düzen ve responsive tasarım

Hedefler: Box model, Flexbox, Grid, medya sorguları, temel responsive desenler ve temel erişilebilir stil önerileri.

  • Uygulama: Portfolyonuzu responsive hale getirin; mobil ve masaüstü düzenlerini ayırın.
  • Ödev: Bir proje sayfasının düzenini Grid veya Flexbox kullanarak yeniden oluşturun.
  • Süre önerisi: 10–12 saat.

Hafta 3 — JavaScript (Temeller) ve DOM

Hedefler: Temel değişkenler, fonksiyonlar, döngüler, DOM seçimi, olaylar ve form doğrulama.

  • Uygulama: Portfolyo sayfanıza interaktif menü, form doğrulama ve küçük UI animasyonları ekleyin.
  • Ödev: Basit bir modal veya açılır menü bileşeni oluşturun.
  • Süre önerisi: 12 saat.

Hafta 4 — Modern JavaScript ve araçlar

Hedefler: ES6+ özellikleri (let/const, arrow fonksiyonlar, template literals), fetch API, async/await, localStorage ve temel hata ayıklama.

  • Uygulama: LocalStorage kullanan bir To‑Do uygulaması (CRUD operasyonlarını tarayıcıda tutun).
  • Ödev: Bir kamu API'sini (ör. JSONPlaceholder) fetch ile tüketip veriyi sayfada gösterin.
  • Süre önerisi: 12–14 saat.

Hafta 5 — Ön yüz kütüphanesi: React giriş

Hedefler: React bileşen yapısı, props, state, temel Hook'lar (useState, useEffect) ve bileşen yaşam döngüsü anlayışı.

  • Uygulama: To‑Do uygulamasını React ile yeniden yazın (tek sayfa uygulaması).
  • Ödev: React Router ile basit bir multi‑page deneyimi kurun (Anasayfa, Projeler, Hakkında).
  • Süre önerisi: 12–16 saat.

Hafta 6 — Arka uç temelleri ve API tasarımı (örnek: ASP.NET Core)

Hedefler: HTTP temel kavramları, REST prensipleri, JSON, API endpoint tasarımı ve API'yi test etme araçları (Postman/HTTPie). Örnek eğitimlerde ASP.NET Core ve API geliştirme örnekleri bulunur; bu teknolojilerle gerçek dünyaya yakın servisler oluşturabilirsiniz (örnek kurs).

  • Uygulama: Basit bir REST API oluşturun (GET/POST/PUT/DELETE) — To‑Do nesnelerini yönetir.
  • Ödev: API'yi yerelde çalıştırın ve Postman ile test edin.
  • Süre önerisi: 12–16 saat.

Hafta 7 — Tam yığın entegrasyonu ve veritabanı

Hedefler: Ön yüz ve API entegrasyonu, CORS, form gönderimleri, hata yönetimi ve kalıcı depolama. Akademik ders materyalleri arka uç temelleri konusunda yol gösterir (Marmara Üniversitesi — Web Tabanlı Programlama).

  • Uygulama: React uygulamanız backend API'ye bağlansın; To‑Do verileri veritabanında (ör: SQL Server veya başka bir RDBMS) saklansın.
  • Ödev: Kayıt, listeleme ve filtreleme özellikleri çalışır durumda olsun.
  • Süre önerisi: 14–18 saat.

Hafta 8 — Test, paketleme ve dağıtım (deployment)

Hedefler: Uygulamayı üretime hazırlama, temel üretim yapılandırmaları, ön yüz dağıtımı (Netlify/Vercel gibi) ve arka uç dağıtımı (bulut sağlayıcıları veya container tabanlı platformlar). Ayrıca portfolyonuzu tamamlayıp yayınlayın.

  • Uygulama: Front‑end’i bir statik host’a, API’yi seçtiğiniz sunucuya dağıtın ve canlı şekilde test edin.
  • Final proje: Çalışır, responsive ve deploy edilmiş bir tam‑yığın uygulama + README + proje sunumu.
  • Süre önerisi: 10–20 saat (dağıtım ve optimizasyon seviyesine bağlı).

Ödev örnekleri ve teslim kriterleri

  • Hafta 1: index.html dosyası, açıklayıcı README, Git commits.
  • Hafta 2: responsive CSS dosyası ve ekran görüntüleri.
  • Hafta 4: To‑Do localStorage versiyonunun çalışır hâli.
  • Hafta 5–7: React ön yüz + REST API entegrasyonu, açık API dökümantasyonu (örnek: OpenAPI/README).
  • Final: Canlı bağlantılar (front ve back), kod deposu, proje sunumu veya kısa video demo.

Kullanışlı kaynaklar

Değerlendirme ve sonraki adımlar

Program sonunda, değerlendirmeniz için teslim kriterlerini karşılayan bir proje portfolyosu oluşturulmuş olmalıdır. Sonraki adımlar: açık kaynak katkısı, küçük freelance projeler veya ileri düzey konular (performans optimizasyonu, güvenlik, test otomasyonu) üzerinde çalışmak olabilir. Bu yol haritası temel bir çerçeve sunar; ihtiyaçlarınıza göre teknolojik seçimleri değiştirebilirsiniz.