Başlık, landmark, form, tablo ve bağlantıyı anlamına göre kur; DOM'u bilgi mimarisi yap.
Yol haritası 02 · Ürün katmanı
Ürün ve Web
Mühendisliği
Bir ekran değil, erişilebilir ve ölçülebilir bir ürün dilimi.
Tarayıcı temellerinden veri modeline, kullanıcı durumlarından yetkilendirmeye kadar tek bir özelliğin uçtan uca nasıl üretildiğini öğren. Framework bilgini; erişilebilirlik, sözleşme, güvenlik ve geri bildirim döngüsüyle mühendisliğe dönüştür.
Güncellik kontrolü: 20 Temmuz 2026 · ECMAScript 2026, Web Platform Baseline, WCAG 2.2 ve OWASP ASVS 5.0.0 esas alınmıştır.
Faz 01 · Hafta 1–3
Önce platformu öğren.
Framework tarayıcının üzerine kurulur. Semantik HTML, CSS yerleşimi, erişilebilirlik ve ağ davranışı bilinmeden üretilen arayüz yalnızca ideal ekranda çalışan bir resimdir.
Kapı kuralı: Sayfayı yalnızca klavye, dar ekran ve yavaş ağ koşulunda tamamlayabil.
Aynı görünüm, iki sonuç
Görsel benzerlik kullanılabilirlik değildir
Semantik
anlam
→
anlam
Klavye
erişim
→
erişim
Responsive
uyum
→
uyum
Performans
süre
süre
ÜRÜN
Arayüz farklı cihaz, yetenek ve ağ koşullarında görevini korur.
Div yığını
→
Mouse şart
→
Sabit piksel
→
Boş ekran
RİSK
Ekran görüntüsü doğru görünür; gerçek kullanıcı akışı kırılır.
Box model, normal flow, flex, grid, container ve responsive kısıtları öğren.
Odak sırası, isim/rol/değer, kontrast, hata mesajı ve reduced motion davranışı tasarla.
DOM, CSSOM, event loop, render ve storage sınırlarının kullanıcı deneyimine etkisini gör.
Request waterfall, cache, payload, status ve performans bütçesini DevTools ile oku.
Temel görevi sağlam HTML ile başlat; stil ve etkileşimi katmanlı biçimde ekle.
Faz 02 · Hafta 4–7
Durumları tasarla, ekranları değil.
Modern arayüzün gerçek karmaşıklığı component sayısında değil; veri yüklenirken, boşken, reddedilirken ve değişirken ne olduğundadır. TypeScript ve React bu durumları görünür kılmak için araçtır.
Kapı kuralı: Her özellik için başarı, yükleniyor, boş, hata ve yetkisiz durumunu göster.
Durum makinesi
Tek ekranın görünmeyen beş hali
Bekleme görünümü
Yükleniyor
Yerleşimi koruyan bir iskelet göster; kullanıcıya sürecin devam ettiğini bildir.
Kanıt: Yavaş ağ testi
Domain tipleri, union, narrowing, generics ve runtime validation sınırını öğren.
Tek sorumluluk, composition, controlled input ve erişilebilir primitive'lerle çalış.
Yerel, URL, sunucu ve global state'i birbirinden ayır; tek doğruluk kaynağı kur.
Doğrulama, hata özeti, bekleme, tekrar gönderim ve veri kaybı riskini tasarla.
Token, spacing, type scale ve component API ile tutarlılığı tekrar kullanılabilir yap.
Bundle, render, image, font ve Core Web Vitals darboğazlarını ölçerek iyileştir.
Faz 03 · Hafta 8–11
Sözleşmenin iki tarafını kur.
Frontend bir API tüketicisi, API ise veri ve kimlik sınırının sahibidir. URL tasarımından transaction'a, authentication'dan authorization'a kadar her karar kullanıcı deneyimine geri döner.
Kapı kuralı: Kullanıcı A'nın, kullanıcı B'nin kaynağına erişemediğini otomatik test ile kanıtla.
Uçtan uca dilim
Bir kullanıcı eylemi nerelerden geçer?
Form
doğrulama
→
doğrulama
API
sözleşme
→
sözleşme
Yetki
policy
→
policy
Postgres
transaction
transaction
HAZIR
İstemci doğrulaması deneyimdir; sunucu doğrulaması güvenlik sınırıdır.
Resource, method, status, pagination, filtering, idempotency ve hata şeması tasarla.
Route, service, domain ve repository sorumluluklarını gereksiz katman üretmeden ayır.
Constraint, relation, migration, transaction ve indeks kararlarını veri bütünlüğüyle bağla.
Session/token, cookie güvenliği, parola saklama ve hesap kurtarma akışını öğren.
Rol adından önce kaynak sahipliği ve eylem bazlı policy kur; deny-by-default uygula.
XSS, CSRF, injection, access control ve security misconfiguration risklerini test et.
“Buton basınca kayıt oluyor.”
Çift tıklama, bağlantı kesilmesi, yetkisiz erişim ve çakışan güncelleme görünmez kalır.
“Kayıt idempotent, yetkili ve geri bildirimli.”
Mutlu yol kadar hata ve tekrar deneme davranışı da sözleşmenin parçasıdır.
Faz 04 · Hafta 12–14
Özelliği yayınla, ölç ve öğren.
Bir ürün dilimi deploy ile bitmez. Kullanıcının görevi tamamlayıp tamamlamadığını, hatanın nerede oluştuğunu ve değişikliğin hangi metriği etkilediğini izleyebilmelisin.
Kapı kuralı: Özelliği preview ortamında test et, production'a çıkar ve bir davranış metriğiyle değerlendir.
Ürün döngüsü
Fikirden öğrenmeye kapalı çevrim
Problem
kanıt
→
kanıt
Dilim
kapsam
→
kapsam
Yayın
kontrol
→
kontrol
Ölçüm
öğrenme
öğrenme
BEKLİYOR
Çıktı “feature tamamlandı” değil; kullanıcı davranışı hakkında doğrulanmış yeni bilgidir.
Component, API integration ve kritik kullanıcı yolu testlerini risk haritasına yerleştir.
PR önizleme, migration sırası, environment ayrımı ve güvenli rollback pratiği kur.
Vanity metric yerine görev tamamlama, dönüşüm, hata ve terk sinyallerini ölç.
Frontend ve backend hatalarını release, kullanıcı akışı ve trace bağlamıyla ilişkilendir.
Problem, kullanıcı, karar, trade-off ve sonucu teknik olmayan kişiye de aktar.
Başlangıç hedefi belirle; bundle, LCP, INP ve API süresini release kapısına bağla.
0%kanıt oranı
Ürün ve web çıkış kontrolü
0 / 8 kanıt işaretlendi.
Gösterilebilir işler
Üç ürün dilimi.
Her proje farklı bir yetkinliği görünür kılar. “Netflix klonu” yerine gerçek problem, sınırlı kapsam ve ölçülebilir kalite hedefi seç.
01 · Arayüz
Erişilebilir Veri Paneli
Filtrelenebilen, klavyeyle kullanılabilen ve farklı ekranlarda düzenini koruyan dashboard.
- Semantik + WCAG kontrolü
- Responsive veri görünümü
- Component testleri
02 · Sözleşme
Tip Güvenli Kayıt Sistemi
Formdan PostgreSQL'e kadar aynı domain kurallarını taşıyan küçük CRUD ürünü.
- TypeScript + schema
- API + transaction
- Yetki senaryoları
03 · Üretim
Mini SaaS Dilimi
Onboarding, ana görev, ekip erişimi ve ölçüm döngüsü olan canlı servis.
- Preview + CI/CD
- Observability
- Ürün vaka anlatımı
Kaynak kontrolü · 20 Temmuz 2026
Standardı, taslaktan ayır.
Framework seçimi değişebilir; dil standardı, tarayıcı uyumluluğu, erişilebilirlik ve güvenlik kabul kriterleri programın sabit omurgasıdır.
ECMA INTERNATIONALECMA-262 · ECMAScript 2026JavaScript dilinin 17. baskısı; normatif HTML sürümü dil davranışının resmi referansıdır.Haziran 2026Normatif standart
WEB PLATFORM BASELINEBaseline 2026Web özelliklerinin güncel tarayıcılarda güvenle kullanılıp kullanılamayacağını yaşayan uyumluluk verisiyle gösterir.Erişim: 20 Temmuz 2026Yaşayan uyumluluk verisi
W3CWCAG 2.2Erişilebilirlik uygunluğu için geçerli W3C Recommendation. WCAG 3.0 henüz 3 Mart 2026 tarihli Working Draft statüsündedir.Recommendation · güncel uygunluk temeliNormatif standart
OWASPASVS 5.0.0Web uygulaması güvenlik gereksinimlerini test edilebilir kabul kriterlerine dönüştüren güncel doğrulama standardı.Temmuz 2026'da güncel stable sürümDoğrulama standardı
MDNMDN CurriculumYeni frontend geliştiriciler için semantic HTML, CSS, JavaScript, accessibility, performance, security ve testing kapsamı.Son güncelleme: Ekim 2025 · yaşayan curriculumMesleki müfredat
W3CWCAG 3.0Gelecekteki erişilebilirlik modelini izlemek için kullanılır; bugün uygunluk iddiasının temeli değildir.3 Mart 2026Working Draft
Uygulama kararı: Ürünler bugün WCAG 2.2 A/AA kriterleriyle doğrulanır. WCAG 3.0 yalnızca yön değişimini takip etmek için okunur; nihai standart gibi uygulanmaz.
Sıradaki uzmanlık
Ürünü güvenilir biçimde çalıştır.
Üçüncü yol haritasında uygulamayı container'a alacak, otomatik teslim edecek, gözlemleyecek ve arıza anında geri döndürebileceksin.
03 · Cloud, DevOps ve Güvenlik