01
// TEMEL SEVİYE (0→1)
Web Temelleri + HTML + CSS + JS
Internet · DOM · Semantic · Flexbox · Grid · Events
▶
HTTP/HTTPSDNSClient/Server
DOM RenderingSemantic HTML
FlexboxCSS GridMedia Queries
DOM ManipulationEvent Listener
🌐 Web Temelleri: URL yazdığında ne olur? DNS → IP → TCP bağlantısı → HTTP isteği → HTML gelir → Tarayıcı parse eder → DOM ağacı → CSSOM → Render tree → Layout → Paint. Bu akışı kör ezberle.
HTTP/HTTPS
Request/Response döngüsü, status codes (200/404/500), headers, methods
DOM
Document Object Model — HTML'in JS tarafından manipüle edilen ağaç temsili
Client/Server
Tarayıcı (client) sunucudan kaynak ister. Frontend = client tarafı mantığı
DNS
Domain → IP çözümleme. example.com → 93.184.216.34 nasıl bulunur?
// HTML — ISKELET
<!-- Semantic HTML — SEO + A11Y için kritik -->
<header>
<nav>
<ul><li><a href="/">Ana Sayfa</a></li></ul>
</nav>
</header>
<main>
<section aria-labelledby="hero-h">
<h1 id="hero-h">Başlık</h1>
<p>İçerik</p>
</section>
<article>...</article>
</main>
<footer>...</footer>
// CSS — GÖRSELLIK
/* Flexbox — modern layout temeli */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
/* Grid — sayfa layout */
.layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
gap: 24px;
}
/* Responsive — mobile first */
.container { padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1200px) { .container { max-width: 1200px; margin: 0 auto; } }
// JAVASCRIPT — CANLILIK
// DOM Manipulation + Event System
const btn = document.querySelector(".ekle-btn");
const liste = document.querySelector("#todo-list");
btn.addEventListener("click", (e) => {
const input = document.querySelector("#todo-input");
if (!input.value.trim()) return;
const li = document.createElement("li");
li.textContent = input.value;
li.classList.add("todo-item");
liste.append(li);
input.value = "";
});
Kişisel Site
Blog Sayfası
Responsive Landing
To-Do App
Calculator
02
// ORTA SEVİYE (1→2)
Advanced JS + Git + Build Tools
ES6+ · Async/Await · Fetch · npm · Vite · Event Loop
▶
// ES6+ — Modern JavaScript
const kullanicilar = [
{ id: 1, isim: "Ali", yas: 22, aktif: true },
{ id: 2, isim: "Veli", yas: 17, aktif: false },
];
// Destructuring + optional chaining
const { isim: ad = "Misafir", yas = 18 } = kullanicilar[0];
const sehir = kullanicilar[0]?.adres?.sehir ?? "Bilinmiyor";
// Array methods zinciri
const aktifIsimler = kullanicilar
.filter(u => u.aktif && u.yas >= 18)
.map(u => u.isim.toUpperCase());
// Async/Await + hata yönetimi
async function kullanicilariGetir() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
return data;
} catch (err) {
console.error(err);
}
}
Event Loop
Call Stack → Web API → Callback Queue → Microtask Queue. JS single-threaded çalışır.
Git & GitHub
git init/add/commit/push. Branching: feature → main. Pull request workflow.
npm / yarn
package.json, node_modules, scripts, devDependencies vs dependencies ayrımı.
Vite
Lightning fast dev server, ESM tabanlı. Webpack'ten 10-100x hızlı. Modern standart.
# Git temel workflow
git init && git add . && git commit -m "feat: ilk commit"
git checkout -b feature/todo-app
git merge feature/todo-app && git push origin main
# npm / Vite
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev
Weather App
API Dashboard
GitHub User Search
03
// FRAMEWORK SEVİYESİ (2→3)
React + State + Routing + Tailwind
Component · Props · Hooks · Context · Redux · React Router
▶
// React Component Anatomy
import { useState, useEffect, useCallback } from "react";
function KullaniciKarti({ kullanici, onSil }) {
const [aktif, setAktif] = useState(false);
useEffect(() => {
document.title = aktif ? `${kullanici.isim} seçildi` : "Frontend App";
return () => { document.title = "Frontend App"; }; // cleanup
}, [aktif, kullanici.isim]);
const handleSil = useCallback(() => {
onSil(kullanici.id);
}, [kullanici.id, onSil]);
return (
<div className={`kart ${aktif ? "aktif" : ""}`}
onClick={() => setAktif(prev => !prev)}>
<h3>{kullanici.isim}</h3>
<button onClick={handleSil}>Sil</button>
</div>
);
}
// Custom Hook — logic'i ayır, tekrar kullan
function useFetch(url) {
const [data, setData ] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError ] = useState(null);
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(r => r.json()).then(setData).catch(setError)
.finally(() => setLoading(false));
return () => controller.abort();
}, [url]);
return { data, loading, error };
}
Context API
Global state küçük-orta app için. createContext → Provider → useContext. Redux'tan önce dene.
Redux Toolkit
createSlice, configureStore, useSelector/useDispatch. Büyük app için standart.
React Router v6
createBrowserRouter, nested routes, loader, action. SPA navigasyonunun standartı.
Tailwind CSS
Utility-first. Hızlı prototipleme. JIT compiler. Dark mode: dark: prefix. cn() helper.
Dashboard
Blog App
E-Commerce Frontend
Netflix Clone UI
04
// İLERİ SEVİYE (3→4)
Next.js + Auth + Testing + Performance
SSR · SSG · JWT · Jest · Lazy Loading · Code Splitting
▶
// Next.js App Router — modern pattern
// app/blog/[slug]/page.tsx — SSG
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map(p => ({ slug: p.slug }));
}
export default async function BlogPage({ params }) {
const post = await getPost(params.slug); // server comp
return <article>{post.content}</article>;
}
// API Route — app/api/users/route.ts
export async function GET(request) {
const users = await db.user.findMany();
return Response.json({ users });
}
// Performance — Lazy loading + Code splitting
import { lazy, Suspense } from "react";
const HeavyChart = lazy(() => import("./HeavyChart"));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}
// useMemo — pahalı hesaplamayı cache'le
const filtrelenmis = useMemo(
() => data.filter(d => d.aktif),
[data] // sadece data değişince hesapla
);
JWT Auth Flow
Login → JWT al → header'a ekle → Protected route → Refresh token pattern.
Jest + RTL
Unit test (fonksiyon), integration test (component), snapshot test. %80 coverage hedef.
GraphQL
REST'e alternatif. Query/Mutation/Subscription. Apollo Client ile React entegrasyonu.
Core Web Vitals
LCP < 2.5s · FID < 100ms · CLS < 0.1. Lighthouse ile ölç, PageSpeed Insights.
Auth + Protected Routes
E-Ticaret (Next.js)
SEO Blog
05
// UZMANLIK SEVİYESİ (4→5)
Architecture + Advanced Topics + Mobile
Design Patterns · Micro Frontend · WebSocket · PWA · Virtual DOM
▶
// Virtual DOM & Reconciliation anlaması
// React diff algoritması — Fiber mimarisi
// 1. Render → Virtual DOM ağacı oluştur
// 2. Reconcile → eski ve yeni VDom'u karşılaştır
// 3. Commit → sadece değişen DOM node'larını güncelle
// Key prop neden önemli?
// React key ile hangi item'ın değiştiğini anlar
{liste.map(item =>
<Item key={item.id} {...item} /> // id, index DEĞİL!
)}
// WebSocket — gerçek zamanlı
const ws = new WebSocket("wss://api.example.com/ws");
ws.onmessage = (event) => {
const mesaj = JSON.parse(event.data);
setMesajlar(prev => [...prev, mesaj]);
};
Component Patterns
Compound, Render Props, HOC, Composition. Hangi problem için hangisi?
Micro Frontend
Module Federation (Webpack 5). Bağımsız deploy. Her team kendi tech stack'i.
PWA
Service Worker, Web App Manifest, offline support, push notification, installable.
TypeScript
Interface, Generic, Union Type, Type Guard. Compile-time hata yakalama. Büyük projede şart.
React Native
Aynı JS/React bilgisi ile iOS+Android. Expo ile hızlı başlangıç. Native bridge.
Framer Motion
Production animasyon kütüphanesi. Layout animation, gesture, stagger, exit animation.
🔥 Senior Mindset: "Nasıl çalışır?" sorusunu sor. Virtual DOM, Fiber, reconciliation, hydration — bunları anlayan developer, sadece kullanan developer'dan ayrışır. Kaynak kodu oku.
SaaS Dashboard
Real-time Chat App
Admin Panel
UI Kit / Design System