Full Stack Web Geliştirme

Full Stack Web Geliştirme Eğitimi Programı

🕒 Süre: 8 Hafta
📦 Kapsam: Frontend (HTML, CSS, JS, React) + Backend (.NET Web API)
🧰 Teknolojiler:HTML5, CSS3, JavaScript (ES6+), Bootstrap 5, React.js, .NET 8 Web API, Entity Framework Core, RESTful API, SQLite/SQL Server, Postman, Git & GitHub
Hafta 1: Web Geliştirmeye Giriş + HTML5

Amaç: Katılımcıların temel web yapı taşlarını kavraması ve semantik HTML ile temiz, erişilebilir sayfalar oluşturabilmesi.
Konular:
• İnternetin ve web’in mimarisi (Client / Server / HTTP)
• HTML elementleri, etiket yapısı
• Sayfa iskeleti, başlık, paragraf, link, liste, resim, video
• Form elementleri ve input türleri
• Semantik HTML & erişilebilirlik (accessibility)

Uygulama:
• Kişisel portfolyo iskeleti oluşturma
• HTML ile form ve iletişim sayfası

Hafta 2: CSS3 ile Stil ve Responsive Tasarım
Amaç: Katılımcıların stillendirme, kutu modeli ve responsive tasarım konularına hâkim olması.
Konular:
• CSS yazım kuralları ve seçiciler
• Box Model, padding, margin, border
• Renk, font, arka plan, transition
• Flexbox, Grid, Media Queries ile responsive tasarım

Uygulama:
• Portfolyo sayfasını stillendirme
• Responsive landing page tasarımı

Hafta 3: Bootstrap 5 ile Modern UI Bileşenler
Amaç: Hazır UI bileşenleriyle profesyonel görünümlü arayüzlerin hızlıca oluşturulması.
Konular:
• Bootstrap grid sistemi
• Navbar, Carousel, Modal, Card, Collapse, Toasts
• Form yapıları ve validasyonlar
• Renk şemaları, ikon kullanımı
Uygulama:
• Ürün tanıtım sitesi tasarımı (1 sayfalık responsive site)

Hafta 4: JavaScript Temelleri ve DOM Manipülasyonu
Amaç: Dinamik sayfa davranışları ve kullanıcı etkileşimi için JS temellerinin kavranması.
Konular:
• Değişkenler, veri türleri, operatörler
• Koşullar, döngüler, fonksiyonlar
• Array & Object işlemleri
• DOM erişimi ve event handling
• Form doğrulama ve veri işleme

Uygulama:
• Hesap makinesi
• Dinamik yapılabilirler (Todo) listesi

Hafta 5: React.js ile Bileşen Tabanlı Frontend
Amaç: Modern SPA mimarisiyle bileşen tabanlı UI geliştirme.
Konular:
• React’e giriş, Component mantığı
• JSX kullanımı
• Props & State, useState, useEffect
• Routing: React Router
• Form işlemleri ve controlled components

Uygulama:
• React ile çok sayfalı blog arayüzü
• Todo App (ekle, sil, tamamla, filtrele)

Hafta 6: .NET Web API ile Backend Geliştirme
Amaç: RESTful API yapısı kurarak frontend’e veri sağlayan backend yazma.
Konular:
• .NET mimarisi, proje yapısı
• Controller, Routing, Dependency Injection
• CRUD işlemleri (Create, Read, Update, Delete)
• Entity Framework Core ile veritabanı bağlantısı
• DTO, AutoMapper kullanımı

Uygulama:
• Blog API (makale listeleme, ekleme, silme, güncelleme)
• Postman ile test senaryoları

Hafta 7: React ile API Entegrasyonu ve Durum Yönetimi
Amaç: Frontend’in backend ile iletişimi ve senkron veri yönetimi.
Konular:
• Axios ile veri çekme (GET, POST, PUT, DELETE)
• useEffect ile veri yükleme
• useState ile formdan veri gönderme
• Conditional rendering, loading / error state
• Basit context API ile global state mantığı

Uygulama:
• Blog arayüzünü backend API ile bağlama
• Blog oluşturma, detay görüntüleme, silme

Hafta 8: Full Stack Proje Geliştirme ve Yayınlama
Amaç: Gerçek bir projeyi baştan sona geliştirip yayına alma deneyimi kazanma.
Konular:
• Frontend + Backend entegrasyon testi
• Git versiyonlama, GitHub’a proje yükleme
• Vercel (React) + Render (API) deployment
• API güvenliği, CORS, form validasyonları
• Son değerlendirme, kod kalitesi ve öneriler

Uygulama:
• Full Stack Blog Projesi:
Kullanıcı, blog yazısı, detay sayfası, yorumlar (opsiyonel)

Bonus Materyaller:
• ✅ Her hafta ödev dosyası (.pdf)
• ✅ Final proje kriterleri ve değerlendirme rubriği
• ✅ Github üzerinden kod paylaşımı ve PR pratiği
• ✅ Sertifika şablonu ve paylaşım önerileri