Frontend Nasıl Yapılır? Hızlı Başlangıç Rehberi

Frontend, kullanıcıların gördüğü ve etkileşime girdiği kısım. Butonlar, menüler, formlar, animasyonlar... Kısacası tarayıcıda görünen her şey frontend'in işi.

Her frontend yolculuğu buradan başlar.

HTML - İskelet

HTML, sayfanın yapısını oluşturur. Başlıklar, paragraflar, resimler, linkler... hepsi HTML ile yazılır.

<h1>Merhaba Dünya</h1>
<p>Bu benim ilk web sayfam</p>
<button>Tıkla</button>

CSS ile bu iskeletin nasıl görüneceğini belirliyorsun. Renkler, boyutlar, konumlar, animasyonlar...

button {
  background-color: #0066ff;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

💡 Hızlı başlangıç ipucu: CodePen veya JSFiddle gibi online editörlerde kod yazmaya başla. Kurulum gerektirmiyor.

Statik bir site yetmiyorsa sıra JavaScript'te.

JavaScript Ne İşe Yarar?

• Butona tıklayınca bir şey olsun

• Sayfa yenilenmeden veri güncelle

• Form doğrulama yap

• Dinamik içerik göster

document.querySelector('button').addEventListener('click', () => {
  alert('Merhaba! Butona tıkladın');
});

Ne zaman kullanmalısın?

• Kullanıcı etkileşimi gerekiyorsa

• Veri fetch etmen gerekiyorsa

• Dinamik bir deneyim istiyorsan

Proje büyüdükçe sadece HTML/CSS/JS ile yönetmek zorlaşır. İşte burada framework'ler devreye giriyor.

React

En popüler frontend framework'ü. Facebook tarafından geliştirildi.

Avantajları:

• Component mantığı (her şey parçalı ve tekrar kullanılabilir)

• Geniş topluluk ve kaynak

• İş ilanlarında en çok aranan skill

function Button() {
  return <button onClick={() => alert('Tıklandı!')}>Tıkla</button>
}

Vue.js

Daha kolay öğrenilen, hafif bir alternatif.

Avantajları:

• Daha basit syntax

• Hızlı öğrenme eğrisi

• Küçük-orta projeler için ideal

Hangisini seçmeliyim?

• İş arıyorsan veya büyük proje yapacaksan → React

• Hızlı öğrenmek ve solo çalışacaksan → Vue.js

React veya Vue öğrendikten sonra, gerçek projelerde şunlar önemli hale gelir:

• SEO (Google'da görünmek)

• Performans

• Sunucu tarafında render (SSR)

Next.js (React için)

React'in en güçlü aracı. Vercel tarafından geliştirildi.

Ne sağlar?

• SEO dostu (Server-Side Rendering)

• Otomatik optimizasyon

• API route'ları (basit backend işleri yapabilirsin)

• Kolay deployment

Dikkat: Deploy süreci biraz karmaşık olabilir.

Remix (React için)

Next.js'e alternatif, daha modern bir yaklaşım.

Farkı ne?

• Veri yüklemesi daha kolay

• Progressive enhancement odaklı

• Daha iyi form handling

Nuxt.js (Vue için)

Vue kullanıyorsan Next.js'in karşılığı bu.

Ne zaman kullanmalısın?

• Blog, e-ticaret, landing page yapıyorsan

• SEO çok önemliyse

• Production-ready bir şey istiyorsan

1. HTML + CSS (2-3 hafta)
   ↓
2. JavaScript temelleri (3-4 hafta)
   ↓
3. React veya Vue.js (4-6 hafta)
   ↓
4. Next.js / Nuxt.js (2-3 hafta)

Toplam süre: 3-4 ay düzenli çalışmayla profesyonel frontend geliştiricisi olabilirsin.

Kod Editörü

• VS Code (en popüler, ücretsiz)

Online Editörler (Kurulum gerektirmez)

• CodePen

• CodeSandbox

• StackBlitz

Öğrenme Kaynakları

• Türkçe: Kodluyoruz, Prototurk, BTK Akademi

• İngilizce: freeCodeCamp, MDN Web Docs, Scrimba

CSS Framework'leri (İsteğe bağlı)

• Tailwind CSS (en popüler, utility-first)

• Bootstrap (hazır componentler)

Öğrenirken mutlaka proje yap:

1. Kişisel portföy sitesi (HTML/CSS/JS)

2. To-do list uygulaması (React/Vue)

3. Film arama sitesi (API kullanımı için)

4. Blog sitesi (Next.js/Nuxt ile SSR deneyimi)

Frontend yapmak için:

• Temel: HTML, CSS, JavaScript

• Framework: React veya Vue.js

• Production: Next.js, Remix veya Nuxt.js

Adım adım ilerle, acele etme. Her aşamada proje yaparak pekiştir.

Frontend'i öğrendin, ama veriler nerede tutulacak? Kullanıcı girişi nasıl yapılacak?

Bir sonraki blogda backend ve sunucu kurulumunu anlatıyorum. Backend Nasıl Yapılır?