SIFIRDAN WEB SİTESİ YAPMA YOL HARİTASI (FRONTEND ODAKLI)

Mesaj gönderen **ocalocal** » Cmt Eki 11, 2025 1:07 pm

SIFIRDAN WEB SİTESİ YAPMA YOL HARİTASI (FRONTEND ODAKLI)

1. GİRİŞ
Bir web sitesi yapmak istiyorsanız işe doğrudan kod yazmakla başlamamalısınız. HTML, CSS ve JavaScript’i öğrenmek ve bunları doğru sırayla uygulamak temel şarttır. Bu rehberde sıfırdan, hiçbir hazır tema veya kütüphane kullanmadan bir web sitesi yapma yolunu adım adım bulacaksınız. Metin yeni başlayanlar için anlaşılır, orta seviyedekiler için de detaylı olacak şekilde hazırlanmıştır.

HAZIRLIK AŞAMASI
Kodlamaya başlamadan önce gerekli araçları hazırlayın:

Kod editörü: VS Code önerilir.
Tarayıcı: Chrome veya Firefox.
Canlı sunucu eklentisi: VS Code Live Server (isteğe bağlı).

HTML, CSS ve JavaScript’in görev dağılımını bilin:

HTML: Sayfanın iskeleti ve içeriği.
CSS: Görsel düzen, renkler, yazı tipi ve konumlandırma.
JavaScript: Etkileşim, animasyon ve dinamik davranışlar.

2. PLANLAMA
Siteye başlamadan önce ne yapacağınızı planlayın. Hangi sayfalar olacak, hangi bölümler bulunacak, kullanıcılar ne yapacak? Örnek yapı:

index.html → Ana sayfa
about.html → Hakkında
contact.html → İletişim
assets/css → Stil dosyaları
assets/js → JavaScript dosyaları
assets/images → Görseller

Kâğıt üzerinde veya dijital araçlarla kabaca bir taslak çizerek (wireframe) hangi bölümün nerede olacağını belirleyin.

3. HTML: YAPI OLUŞTURMA
HTML ile sayfanın iskeletini kurun. Aşağıda temel bir HTML sayfası örneği vardır:

Kod: Tümünü seç

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bizim Web Sitemiz</title> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <header> <h1>Hoş Geldiniz</h1> <nav> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="about.html">Hakkında</a></li> <li><a href="contact.html">İletişim</a></li> </ul> </nav> </header> <main> <section id="hero"> <h2>Web Sitemize Hoş Geldiniz</h2> <p>HTML, CSS ve JavaScript öğrenmeye başlayalım.</p> </section> </main> <footer> <p>&copy; 2025 Tüm Hakları Saklıdır.</p> </footer> <script src="assets/js/main.js"></script> </body> </html>

İpuçları:

header, main, section, footer gibi semantik etiketleri kullanın.
img etiketlerinde alt özelliğini mutlaka belirtin.
Sayfa yapısını düzenli kurun, gereksiz div kullanımından kaçının.

4. CSS: TASARIM VE GÖRÜNÜM
HTML tamamlandıktan sonra siteye stil kazandırmak için CSS dosyası oluşturun. Basit bir örnek:

Kod: Tümünü seç

/* Temel sıfırlama */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Genel ayarlar */
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
color: #333;
line-height: 1.6;
}

/* Header */
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}

/* Navigasyon */
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
color: #f0a500;
}

/* Ana içerik */
#hero {
padding: 3rem;
text-align: center;
background: #fff;
margin: 2rem auto;
width: 80%;
border-radius: 10px;
}

/* Responsive tasarım */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
}

Öneriler:

CSS kodlarını mantıklı bölümlere ayırın.
Tekrar eden renk ve değerler için CSS değişkenleri kullanmayı öğrenin.
Mobil uyum için media query kullanmayı unutmayın.

5. JAVASCRIPT: DİNAMİK DAVRANIŞLAR
JavaScript ile siteye etkileşim ekleyebilirsiniz. Temel bir örnek:

Kod: Tümünü seç

document.addEventListener("DOMContentLoaded", function() {
console.log("Sayfa yüklendi");
const buton = document.getElementById("myButton");
if (buton) {
buton.addEventListener("click", function() {
alert("Butona tıklandı!");
});
}
});

Basit bir menü açma-kapama işlevi:

Kod: Tümünü seç

const menuToggle = document.querySelector(".menu-toggle");
const navMenu = document.querySelector("nav ul");

menuToggle.addEventListener("click", function() {
navMenu.classList.toggle("active");
});

Öneriler:

DOM yapısına hâkim olun. document.querySelector, addEventListener gibi temel fonksiyonları öğrenin.
Kodları ayrı dosyada tutarak HTML’den ayırın.
Gereksiz tekrarlardan kaçının, kodları fonksiyonlara bölün.

6. GELİŞMİŞ AŞAMALAR
Temel siteyi kurduktan sonra aşağıdaki konulara odaklanarak projelerinizi daha profesyonel hale getirebilirsiniz:

CSS framework’leri (Bootstrap, Tailwind) ile tasarımı hızlandırın.
JavaScript framework veya kütüphanelerini (React, Vue) öğrenin.
SEO temellerini uygulayın: title, meta description, semantic HTML.
Performans optimizasyonu yapın: görselleri küçültün, gereksiz kodu silin.
Kod validasyonu yapın: HTML ve CSS doğrulayıcıları kullanın.
Tarayıcı testleriyle uyumluluğu kontrol edin.

7. TEST VE YAYIN
Tüm dosyaları gözden geçirip hataları düzeltin. Mobil uyum testlerini yapın. Siteyi yayınlamak için:

Hosting ve domain satın alın.
Dosyaları FTP ile yükleyin veya GitHub Pages gibi ücretsiz servisleri kullanın.