Frontend Nedir? Frontend Geliştirici Ne Yapar?

Frontend, kullanıcının tarayıcıda gördüğü ve etkileşime geçtiği uygulama katmanıdır. Sayfa düzeni, butonlar, formlar, menüler, animasyonlar, responsive görünüm ve API'den gelen verinin ekrana yerleşmesi frontend tarafına girer.

Kısa tanım: frontend, kullanıcı deneyimini çalışan arayüze dönüştürür.

Konuyu ders formatında çalışmak için Frontend 101 dersine geçebilirsin.

Frontend Geliştirici Ne Yapar?

Frontend geliştirici:

• ▸HTML ile sayfa yapısını kurar.
• ▸CSS ile görünümü tasarlar.
• ▸JavaScript ile etkileşim ekler.
• ▸API'den veri alır ve ekranda gösterir.
• ▸Responsive tasarım yapar.
• ▸Erişilebilirlik kurallarına dikkat eder.
• ▸Performans ve SEO sinyallerini iyileştirir.
• ▸React, Vue veya Svelte gibi araçlarla bileşen geliştirir.

Frontend sadece "güzel tasarım" değildir. Kullanılabilir, hızlı, erişilebilir ve sürdürülebilir arayüz üretmektir.

İyi Frontend Nasıl Anlaşılır?

İyi frontend kendini sadece büyük ekranda değil, küçük ekranda ve hata anında da gösterir. Sayfa yavaş internetle açıldığında loading durumu vardır. API hata verdiğinde kullanıcı boş beyaz ekran görmez. Uzun başlıklar taşmaz. Butonlar mobilde rahat tıklanır.

Kalite işaretleri:

• ▸Semantik HTML kullanılır.
• ▸Mobilde yatay taşma yoktur.
• ▸Form hataları anlaşılırdır.
• ▸Klavye ile kullanılabilir.
• ▸Renk tek bilgi taşıyıcı değildir.
• ▸Görseller layout shift üretmez.
• ▸Liste boşsa empty state görünür.
• ▸API hatasında error state vardır.

Frontend Temel Teknolojileri

Yeni başlayan biri önce HTML, CSS, JavaScript temelini kurmalı, sonra React gibi kütüphanelere geçmelidir.

Responsive Tasarım Nedir?

Responsive tasarım, arayüzün mobil, tablet ve masaüstünde düzgün çalışmasıdır. Bir başlığın mobilde yana taşması, butonun küçük ekranda tıklanamaması veya tabloyun dışarı akması frontend kalitesi için ciddi problemdir.

Temel prensipler:

• ▸Sabit genişliklerden kaçın.
• ▸max-width ve min-width kullan.
• ▸Metni kırılabilir yap.
• ▸Grid ve flex yapısını bilinçli kur.
• ▸Dokunmatik hedefleri yeterince büyük tut.

Frontend ve SEO İlişkisi

Frontend geliştirici SEO'dan da sorumludur. Arama motoru sayfanın başlığını, içeriğini, linklerini ve performansını frontend çıktısı üzerinden görür.

Frontend tarafında SEO için:

• ▸Tek ve anlamlı h1
• ▸Doğru heading hiyerarşisi
• ▸İç linkler
• ▸Semantik article, nav, main
• ▸Hızlı ilk yükleme
• ▸Görsel alt metni
• ▸Mobil uyumluluk

CodeForge gibi içerik sitelerinde frontend kalitesi doğrudan indeksleme ve kullanıcı davranışını etkiler.

React Ne Zaman Öğrenilmeli?

React'e geçmeden önce şu sorulara evet diyebilmelisin:

• ▸HTML ile semantik yapı kurabiliyor muyum?
• ▸CSS ile responsive düzen yapabiliyor muyum?
• ▸JavaScript ile array, object, function ve async/await biliyor muyum?
• ▸API'den veri çekip ekrana basabiliyor muyum?

React'i tanımak için React Nedir? yazısını okuyabilirsin.

Frontend Öğrenme Sırası

1. ▸HTML
2. ▸CSS
3. ▸Responsive tasarım
4. ▸JavaScript temeli
5. ▸DOM ve events
6. ▸API tüketimi
7. ▸React component mantığı
8. ▸State management
9. ▸Form yönetimi
10. ▸Performans ve SEO

Mini Proje: İçerik Kartları Sayfası

Frontend öğrenmek için iyi bir proje, makale kartları listeleyen responsive bir sayfadır.

Projede şunlar olsun:

• ▸Arama inputu
• ▸Kategori filtresi
• ▸Responsive kart grid'i
• ▸Uzun başlık desteği
• ▸Empty state
• ▸Loading state
• ▸API hata durumu

Kod örneği olarak JavaScript Debounce ile Arama Inputu bu proje için doğrudan kullanılabilir.

Sık Sorulan Sorular

Frontend için tasarım bilmek şart mı?

Profesyonel tasarımcı olmak şart değildir. Ama boşluk, hizalama, okunabilirlik, renk kontrastı ve responsive düzen gibi temel UI bilgileri gerekir.

Frontend geliştirici backend bilmeli mi?

Temel API mantığını bilmelidir. Backend uzmanı olması gerekmez ama veri nereden geliyor, hata nasıl dönüyor ve auth nasıl çalışıyor anlamalıdır.

Frontend için JavaScript şart mı?

Evet. Modern frontend geliştirmede JavaScript veya TypeScript temel beceridir.