Projeyle Öğrenme: Nedir ve Neden Etkili?

Projeyle öğrenme, teorik bilgileri gerçek görevlerde uygulayarak becerileri pekiştirmeyi amaçlayan bir yaklaşımdır. Kendi projelerinizi yaparken karşılaştığınız hatalar, çözüm arayışları ve karar verme süreçleri öğrenmeyi hızlandırır ve kalıcı hale getirir. Daha detaylı bir öğrenme yol haritası için Kaliteweb'in rehberine bakabilirsiniz: Kodlama Öğrenme Yol Haritası — Kaliteweb.

Bu rehberde ne var?

• 3 uygulamalı proje: Todo uygulaması, Hava Durumu uygulaması, Etkinlik takip sistemi.
• 4 haftalık pratik plan ve günlük adım adım görevler.
• Her proje için hedefler, önerilen teknolojiler, kontrol listeleri ve yayınlama ipuçları.

Genel 4 haftalık plan

Aşağıdaki düzen, her projeyi tek haftada tamamlamayı, dördüncü haftayı ise tüm projeleri parlatma, test etme ve yayınlama için ayırmayı amaçlar.

Proje 1 — Todo Uygulaması (Hafta 1)

Öğrenme hedefleri: HTML/CSS ile kullanışlı bir arayüz oluşturma, JavaScript ile DOM manipülasyonu ve localStorage ile veri kalıcılığı. Todo uygulaması, temel web geliştirme kavramlarını uygulamak için ideal bir başlangıçtır; Patika.dev'deki örnekler faydalı fikirler verir: Frontend proje örnekleri — Patika.dev.

Gün gün adımlar

1. Gün 1: Wireframe ve HTML iskeleti. Görev ekleme formu, görev listesi alanı oluşturun.
2. Gün 2: Görev ekleme işlevi. Form gönderildiğinde yeni öğeyi DOM'a ekleyin.
3. Gün 3: Tamamlandı ve silme butonları ekleyin; olay dinleyicileriyle davranışı yönetin.
4. Gün 4: localStorage entegrasyonu: verileri kaydedin ve sayfa yenilendiğinde geri yükleyin.
5. Gün 5: Basit stil ve responsive düzen; küçük ekranlarda kullanılabilirliği kontrol edin.
6. Gün 6: Hata senaryolarını test edin (boş görev eklenmesi, uzun metinler vb.).
7. Gün 7: README yazın ve projeyi GitHub Pages üzerinden yayınlayın.

Kontrol listesi

• Görev ekleme, silme ve işaretleme çalışıyor mu?
• Veriler localStorage'da tutuluyor mu?
• Tasarım mobilde rahat kullanılabiliyor mu?
• README'de proje nasıl çalıştırılır açıklaması var mı?

Proje 2 — Hava Durumu Uygulaması (Hafta 2)

Bu proje, harici API çağrıları yapma, JSON verisini işleme ve asenkron JavaScript mantığını öğrenmek için uygundur. Adım adım örnek ve açıklamalar için Ichi.pro'daki rehbere bakabilirsiniz: Basit Hava Durumu Uygulaması — Ichi.pro.

Öğrenme hedefleri

• fetch veya axios ile API çağrıları yapma, async/await kullanımı.
• JSON'dan anlamlı veri çekme ve kullanıcı arayüzünde gösterme.
• Hata ve yükleniyor durumlarını yönetme.

Gün gün adımlar

1. Gün 1: API sağlayıcılarını inceleyin. Ücretsiz planlar ve kullanım şartlarına bakın.
2. Gün 2: Basit arayüz yapısı: arama çubuğu, sonuç kartı, yükleniyor alanı.
3. Gün 3: API çağrısını ekleyin; gelen JSON verisini işleyerek ekrana yazdırın.
4. Gün 4: Hata senaryoları (geçersiz şehir, ağ hatası) için kullanıcı uyarıları ekleyin.
5. Gün 5: İsteğe bağlı: kullanıcı konumunu alıp otomatik gösterme (geolocation API).
6. Gün 6: Stil, animasyon ve erişilebilirlik düzenlemeleri.
7. Gün 7: Test, README ve deploy.

API anahtarları ve güvenlik

Birçok hava durumu servisi API anahtarı ister. Basit uygulamalarda anahtarı istemcide kullanabilirsiniz, ancak anahtarın gizliliğine dikkat edin; üretim için küçük bir proxy veya serverless fonksiyon üzerinden istek yönlendirme düşünülebilir.

Proje 3 — Etkinlik Takip Sistemi (Hafta 3)

Etkinlik takip sistemi, form doğrulama, tarih/saat yönetimi ve listeler üzerinde filtreleme/sıralama gibi daha ileri konuları kapsar. Web programlama final projelerindeki benzer yaklaşımlar, proje kapsamını düşünürken faydalı olabilir: Web Programlama Final Proje Değerlendirme — Scribd.

Öğrenme hedefleri

• Form doğrulama ve kullanıcı girdisi temizleme.
• Etkinlik modeli: başlık, tarih, saat, açıklama gibi alanların yönetimi.
• Filtreleme, sıralama ve basit takvim görünümleri oluşturma.

Gün gün adımlar

1. Gün 1: Veri modelinizi tanımlayın ve formu oluşturun.
2. Gün 2: Ekleme ve listeleme işlevlerini uygulayın.
3. Gün 3: Düzenleme ve silme; tarih formatlarını düzgün gösterin.
4. Gün 4: Doğrulama: zorunlu alanlar, geçerli tarih kontrolü.
5. Gün 5: Filtreleme seçeneği (tarihe göre, bugünün etkinlikleri vb.).
6. Gün 6: İsteğe bağlı: küçük bir backend entegrasyonu (ör. Firebase) veya localStorage kullanımı.
7. Gün 7: Test, erişilebilirlik kontrolü ve deploy.

Hafta 4 — Parlatma, Test ve Deploy

Dördüncü haftada tüm projeleri gözden geçirip parlatın. Önerilen adımlar:

• Responsive düzeni tamamlayın; mobil kontrolleri test edin.
• Erişilebilirlik: form etiketleri, ARIA ifadeleri ve klavye erişimi kontrolü.
• README hazırlayın: proje amacı, kurulum adımları, canlı demo linki ve kullanılan teknolojiler.
• Projeleri GitHub Pages, Netlify veya Vercel üzerinden yayınlayın ve portföyünüze ekleyin.

Basit dosya yapısı örneği

• index.html
• styles.css
• app.js
• assets/ (resimler, ikonlar)
• README.md

Kısa deploy adımları (GitHub Pages örneği)

1. Projenizi bir Git deposuna ekleyin ve GitHub'a gönderin.
2. Depo ayarlarından GitHub Pages'i etkinleştirin (genellikle main veya gh-pages branch).
3. Canlı URL'i README'e ekleyin ve paylaşın.

Başarı ölçütleri ve kontrol listesi

• Her proje için temel özellikler tamam mı? (CRUD, API çağrıları, form doğrulama)
• Her proje için canlı demo ve kaynak kod deposu var mı?
• Kullanıcı deneyimi (mobil ve masaüstü) kabul edilebilir düzeyde mi?
• README, kurulum ve kullanım bilgilerini içeriyor mu?

İpuçları ve sık yapılan hatalar

• Küçük başlayın; önce temel işlevleri tamamlayın, sonra ekstra özellik ekleyin.
• Sürüm kontrolünü (git) düzenli kullanın; anlamlı commit mesajları yazın.
• API anahtarlarını istemcide açık bırakmamak için alternatif yollar düşünün.
• Tasarımı işlevselliğin önüne geçirmeyin; kullanılabilirlik önceliklidir.

Kaynaklar ve ileri okuma

• Kodlama Öğrenme Yol Haritası — Kaliteweb
• Frontend proje örnekleri — Patika.dev
• Basit Hava Durumu Uygulaması — Ichi.pro
• Web Programlama Final Proje Değerlendirme — Scribd

Sınırlamalar ve uyarılar

Bu rehber giriş düzeyinde bir çerçeve sunar. Daha karmaşık backend gereksinimleri, ölçeklenebilirlik veya üretim güvenliği konuları için ek öğrenim ve deneme gerekecektir. Üçüncü taraf API kullanırken hizmet şartları ve fiyatlandırmayı kontrol edin.

Sıkça Sorulan Sorular

Projeler için hangi araçlar yeterli?

Başlangıç için HTML, CSS ve vanilla JavaScript yeterlidir. İlerledikçe React, Vue veya küçük backend çözümleri (ör. Firebase) ekleyebilirsiniz.

Projeler ne kadar sürer?

Bu rehber, her projeyi bir haftada tamamlamanızı hedefler. Kişisel hızınıza göre süreler değişebilir; önemli olan düzenli ilerlemektir.

Canlıyayın ve portföy için öneriler nelerdir?

Her proje için kısa bir açıklama, kullanılan teknolojiler ve canlı demo linki ekleyin. README ve ekran görüntüleri projeyi daha anlaşılır kılar.

Sonuç

Projeyle öğrenme yöntemini uygulayarak dört hafta içinde üç tamamlanabilir proje üretmek, hem teknik becerilerinizi hem de problem çözme yeteneğinizi geliştirir. Adım adım planı takip edin, belgeleri düzenli tutun ve öğrendiklerinizi portföyünüzde sergileyin.