Frontend Nedir? HTML, CSS, JavaScript ve Responsive Tasarım

Frontend, kullanıcının gördüğü arayüzdür. Bu derste frontend'in sadece görünüm değil; erişilebilirlik, responsive yapı, performans ve API tüketimiyle birlikte düşünülmesi gerektiğini öğreneceksin.

Öğrenme Hedefleri

• ▸Frontend'in sorumluluklarını anlamak
• ▸HTML, CSS ve JavaScript rolünü ayırmak
• ▸Responsive tasarım hatalarını fark etmek
• ▸API'den gelen veriyi arayüze bağlama fikrini kavramak

Üç Temel Parça

Örnek:

<button id="save-button">Kaydet</button>

#save-button {
  min-height: 44px;
}

document.querySelector('#save-button').addEventListener('click', save);

Responsive Tasarım

Responsive tasarım, ekran boyutu değiştiğinde arayüzün kırılmamasıdır.

Dikkat et:

• ▸Uzun başlıklar taşmamalı.
• ▸Kartlar mobilde tek kolona düşmeli.
• ▸Butonlar dokunmatik için yeterli olmalı.
• ▸Görseller oranını korumalı.
• ▸Kod blokları yatay scroll ile taşmayı kontrol etmeli.

Erişilebilirlik Temelleri

Frontend sadece gören ve mouse kullanan kullanıcılar için yapılmaz. Klavye, ekran okuyucu ve farklı cihazlarla da kullanılabilir olmalıdır.

Dikkat et:

• ▸Buton gerçekten button olmalı.
• ▸Link gerçekten a olmalı.
• ▸Form inputlarında label bulunmalı.
• ▸Focus görünür olmalı.
• ▸Renk tek bilgi taşıyıcı olmamalı.
• ▸Görsellere anlamlı alt metin yazılmalı.

Bu temel kurallar hem kullanıcı deneyimini hem de SEO kalitesini güçlendirir.

API Verisiyle Çalışmak

Frontend çoğu zaman backend'den gelen veriyi gösterir.

const response = await fetch('/api/articles');
const articles = await response.json();

Bu veri geldikten sonra loading, error ve empty state düşünülmelidir.

Frontend Kalite Kontrol Listesi

• ▸Mobilde taşma var mı?
• ▸Klavye ile kullanılabiliyor mu?
• ▸Renk kontrastı yeterli mi?
• ▸Loading durumu var mı?
• ▸Hata durumu var mı?
• ▸Boş liste durumu var mı?
• ▸Sayfa hızlı açılıyor mu?

Performans Kontrolü

Frontend performansı için:

• ▸Gereksiz büyük görsel yükleme.
• ▸İlk ekranda kullanılmayan ağır kütüphaneleri ayır.
• ▸Liste renderlarını ölç.
• ▸Debounce gereken inputlarda API'yi koru.
• ▸Layout shift üreten görselleri sabit oranla göster.

React tarafında devam etmek için React Performans Optimizasyonu dersine bak. Arama inputu için JavaScript Debounce ile Arama Inputu örneği pratik bir başlangıçtır.

Alıştırma

Bir makale kartı tasarla:

• ▸Başlık
• ▸Kısa açıklama
• ▸Okuma süresi
• ▸Etiketler
• ▸Mobilde tek kolon
• ▸Uzun başlıkta taşma yok

Sonraki Adım

Frontend temelinden sonra React Nedir? yazısını oku, ardından React Hooks dersine geç.