Web geliştirme dünyası, iki temel bileşenden oluşur: Frontend (kullanıcının gördüğü ve etkileşime geçtiği arayüz) ve Backend (arka planda çalışan sistemler ve veri yönetimi). Bir web sitesine girdiğinizde gördüğünüz butonlar, metinler, animasyonlar ve görseller frontend'in bir parçasıyken, bu bileşenlerin arkasında çalışan veri tabanları, sunucular ve iş mantıkları backend tarafından yönetilir.
Bu yazıda frontend’in ne olduğunu, nasıl çalıştığını ve hangi teknolojilerle geliştirildiğini basit ve anlaşılır bir şekilde ele alacağız. Eğer web geliştirmeye yeni başlıyorsanız veya frontend ile ilgili temel bir anlayış kazanmak istiyorsanız, doğru yerdesiniz!
1. Frontend Nedir?
Frontend, bir web sitesine veya uygulamaya girildiğinde kullanıcının gördüğü ve doğrudan etkileşime geçtiği arayüzdür. Butonlar, menüler, görseller, formlar, yazılar, animasyonlar ve kaydırma efektleri gibi unsurlar frontend geliştirmenin temel bileşenleridir. Kullanıcı deneyimi (UX) ve kullanıcı arayüzü (UI) tasarımı, frontend’in önemli bir parçasıdır ve sitenin hem estetik açıdan hoş hem de kolay kullanılabilir olmasını sağlar.
Gerçek Hayattan Bir Örnek
Bir restoranı düşünelim. Müşterinin gördüğü menü, masa düzeni, dekorasyon ve garsonlarla etkileşimi frontend’e benzetilebilir. Kullanıcı, yemek siparişi verirken veya menüde gezindiğinde bu sürecin kolay ve akıcı olmasını ister. Ancak mutfakta yemeklerin hazırlandığı, siparişlerin işlendiği ve ödemelerin yönetildiği kısım backend’dir. Web sitelerinde de frontend, kullanıcının gördüğü ve doğrudan deneyimlediği yüzeydir, ancak arka planda çalışan sistemler (backend) bu deneyimi destekler.
Bu nedenle iyi bir frontend geliştirme, sadece güzel bir tasarımdan ibaret değildir; aynı zamanda hızlı, erişilebilir ve kullanıcı dostu bir deneyim sunmalıdır.
2. Frontend ve Backend Arasındaki Fark
Özellik | Frontend | Backend |
|---|---|---|
Görevi | Kullanıcının gördüğü ve etkileşime geçtiği arayüzü oluşturur. | Verileri işler, saklar ve frontend’e sunar. |
Diller ve Teknolojiler | HTML, CSS, JavaScript, React, Vue, Angular | Node.js, Python, PHP, Java, MySQL, PostgreSQL |
Örnek İşlevler | Butonlar, menüler, formlar, animasyonlar, sayfa tasarımı | Kullanıcı doğrulama, veri saklama, sipariş işlemleri, sunucu yönetimi |
Kim Kullanır? | Kullanıcılar doğrudan frontend ile etkileşime girer. | Kullanıcılar backend’i doğrudan görmez, ama onun sağladığı hizmetleri kullanır. |
3. Frontend Teknolojileri ve Temel Araçlar
Frontend geliştirme için HTML, CSS ve JavaScript en temel teknolojilerdir.
1. HTML (HyperText Markup Language)– Web Sayfalarının İskeleti
HTML, bir web sayfasının iskeletidir. Tıpkı bir evin duvarları, çatısı ve odaları gibi, bir web sayfasının temel yapısını oluşturur.
HTML Ne Yapar?
Başlıkları, paragrafları ve butonları ekler
Görselleri ve bağlantıları yerleştirir
Sayfanın düzenini belirler
Bir web sayfasını bir kitap gibi düşünelim:
Kitabın başlığı (Title): Kitabın ne hakkında olduğunu gösterir. (HTML’de <h1>Başlık</h1> olarak yazılır.)
Paragraflar: Kitabın içeriği, anlatılan hikayeler veya bilgiler. (<p>Bu bir paragraf.</p>)
Sayfa numaraları ve bölümler: Kitabın düzenini belirler. (<div> veya <section>)
Resimler ve çizimler: Kitabı daha ilgi çekici hale getirir. (<img src="resim.jpg">)
Butonlar ve bağlantılar: Okuyucunun farklı sayfalara geçmesini sağlar. (<a href="link">Tıklayın</a> veya <button>Bas</button>)
Basit Bir HTML Örneği:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Benim İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1> <!-- Büyük başlık -->
<p>Bu benim ilk web sayfam. HTML öğreniyorum!</p> <!-- Paragraf -->
<button>Tıklayın</button> <!-- Buton -->
</body>
</html>Bu kodu bir tarayıcıda açarsanız ekranda şunları görürsünüz:
Merhaba Dünya! (Büyük başlık)
Bu benim ilk web sayfam. HTML öğreniyorum! (Paragraf)
[Tıklayın] (Buton)
HTML’in yaptığı iş tam olarak budur: Web sayfasının içeriğini oluşturur ve düzenler!
2. CSS (Cascading Style Sheets)– Web Sayfalarına Stil Eklemek
CSS, bir web sayfasının görsel tasarımını belirler. HTML sayfanın iskeletini oluştururken, CSS renk, yazı tipi, arka plan, düğmelerin şekli gibi tasarım unsurlarını ekleyerek sayfayı güzel ve şık hale getirir.
CSS Ne Yapar?
Renkleri belirler (Örneğin, başlık kırmızı mı, mavi mi olacak?)
Yazı tipini ve büyüklüğünü ayarlar (Kalın, italik veya büyük harf mi olacak?)
Arka plan resimleri ve renkleri ekler
Butonların, kutuların ve resimlerin şeklini düzenler
Sayfa düzenini belirler (Örneğin, metin ortada mı yoksa solda mı duracak?)
Bir web sayfasını bir insan gibi düşünelim:
HTML: İskelet ve vücut (Kafası, kolları, bacakları var ama sade görünüyor)
CSS: Giysiler ve aksesuarlar (Şık bir elbise, ayakkabı, gözlük ekler)
HTML olmadan bir web sitesi içeriği olmayan boş bir sayfa gibi olur, CSS olmadan ise gri ve düz bir sayfa olur!
Basit Bir CSS Örneği
Şimdi, basit bir HTML sayfasını CSS ile nasıl güzelleştirebileceğimizi görelim:
Önce HTML Kodu:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Benim Şık Web Sayfam</title>
<link rel="stylesheet" href="style.css"> <!-- CSS dosyamızı bağlıyoruz -->
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim şık ve renkli web sayfam!</p>
<button>Tıklayın</button>
</body>
</html>Bu kodu tarayıcıda açtığımızda görsel olarak düz ve sade bir sayfa olur. Şimdi CSS ekleyelim!
Şimdi CSS ile Güzelleştirelim (style.css dosyası):
body {
background-color: #f0f8ff; /* Sayfa arka planını açık mavi yap */
text-align: center; /* Tüm metni ortala */
font-family: Arial, sans-serif; /* Yazı tipini değiştir */
}
h1 {
color: #ff5733; /* Başlık rengini turuncu yap */
font-size: 36px; /* Başlık boyutunu büyüt */
}
p {
color: #333; /* Paragraf rengini koyu gri yap */
font-size: 18px; /* Yazı boyutunu artır */
}
button {
background-color: #28a745; /* Buton rengini yeşil yap */
color: white; /* Yazıyı beyaz yap */
padding: 10px 20px; /* Butonu büyüt */
border: none;
border-radius: 5px; /* Kenarları yuvarlat */
cursor: pointer; /* Üzerine gelince imleç değişsin */
}
button:hover {
background-color: #218838; /* Üzerine gelince koyu yeşil olsun */
}Şimdi sayfamızı tekrar açarsak şöyle bir görüntü elde ederiz:
-Arka plan açık mavi
-Başlık turuncu ve büyük
-Paragraflar düzgün hizalanmış ve şık bir font ile yazılmış
-Yeşil bir buton var ve üzerine gelince rengi değişiyor!
CSS, bir web sitesini düz ve sıkıcı bir sayfadan, şık ve göz alıcı bir tasarıma dönüştürür! Eğer bir web geliştirici olmak istiyorsanız, HTML’in temel yapıyı oluşturduğunu, CSS’in ise bu yapıyı güzelleştirdiğini ve düzenlediğini unutmayın!
3. JavaScript
JavaScript, bir web sayfasına hareket, etkileşim ve zeka katar! HTML sayfanın iskeletini oluşturur, CSS ona güzel bir görünüm kazandırır ama JavaScript sayesinde sayfa "canlanır" ve kullanıcılarla iletişime geçer.
JavaScript Ne Yapar?
- Butona tıklayınca bir mesaj gösterebilir.
- Fare ile üzerine gelindiğinde renkleri değiştirebilir.
- Bir form doldurulduğunda bilgilerin doğruluğunu kontrol edebilir.
- Saat, hava durumu veya dinamik içerikler gösterebilir.
-Kullanıcının kaydırma veya tıklama hareketlerine tepki verebilir.
Bir web sayfasını bir insan gibi düşünelim:
HTML = İskelet ve organlar (Sayfanın var olmasını sağlar)
CSS = Giysiler ve görünüm (Sayfanın güzel ve düzenli görünmesini sağlar)
JavaScript = Beyin ve kaslar (Sayfanın hareket etmesini ve akıllı davranmasını sağlar)
JavaScript olmadan bir web sitesi hareketsiz bir poster gibidir, ama JavaScript eklediğimizde canlanan bir uygulama olur!
Gerçek Hayattan Örnek
JavaScript’i bir oyun gibi düşünelim:
HTML: Oyun dünyasını oluşturur (binalar, yollar, karakterler vb.)
CSS: Grafik ve efektleri belirler (karakterlerin kıyafetleri, gölgeler, ışıklar vb.)
JavaScript: Oyunun çalışmasını sağlar (karakterin zıplaması, düşmanların hareket etmesi, puan hesaplama vb.)
Yani, eğer JavaScript olmasaydı oyunlarda hiçbir şey hareket etmez, butonlar çalışmaz ve ekrandaki karakterler donup kalırdı.
Basit Bir JavaScript Örneği
Şimdi, JavaScript’in nasıl çalıştığını görmek için küçük bir butona tıkladığımızda mesaj gösteren bir örnek yapalım!
Önce HTML Kodu (index.html)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Örneği</title>
<script defer src="script.js"></script> <!-- JavaScript dosyamızı bağlıyoruz -->
</head>
<body>
<h1>Merhaba! JavaScript ile Eğlenceli İşler Yapabiliriz!</h1>
<button id="myButton">Bana Tıkla!</button>
</body>
</html>Bu kod, bir başlık ve bir "Bana Tıkla!" butonu ekler. Ama şu an tıklasak hiçbir şey olmaz! Hadi JavaScript ekleyelim!
JavaScript ile Butonu Canlandıralım (script.js)
// Butonu seç ve bir olay ekle
document.getElementById("myButton").addEventListener("click", function() {
alert("Merhaba! JavaScript seni gördü ve bir mesaj gönderdi! 🎉");
});Ne Oldu?
-Kullanıcı butona tıklayınca JavaScript devreye giriyor ve bir mesaj kutusu açılıyor!
-JavaScript olmadan butona tıklayınca hiçbir şey olmazdı.
Bu basit bir örnek ama aynı teknikle şunları yapabiliriz:
-Animasyonlar ekleyebiliriz.
-Açılır menüler yapabiliriz.
-Arama kutusu oluşturabiliriz.
-Canlı saat veya sayaç ekleyebiliriz.
JavaScript, web sitelerini statik bir afişten, yaşayan ve kullanıcıyla iletişim kuran bir uygulamaya dönüştürür!
Eğer bir web geliştirici olmak istiyorsanız JavaScript öğrenmek kesinlikle en önemli adımlardan biri!
4. Frontend İle Neler Yapabiliriz?
Frontend geliştirme ile şunları yapabiliriz:
Modern, mobil uyumlu web siteleri
Animasyonlar ve görsel efektler
Kullanıcı formları (giriş, kayıt olma vb.)
Duyarlı (responsive) tasarımlar
Tek sayfa uygulamaları (SPA - Single Page Applications)
Sonuç
Bu yazıda frontend'in ne olduğunu, backend ile farklarını ve temel frontend teknolojilerini giriş seviyesinde anlattık.
Bir sonraki yazımızda HTML'i en detaylı şekilde ele alarak web sayfalarının temel yapısını oluşturmaya başlayacağz. Web geliştirme serüveninde bir sonraki adımı kaçırmamak için takipte kal!
Etiketler:htmlcssjavascript