Paylaştığınız müfredat dosyasını satır satır inceleyerek, istediğiniz kurallar doğrultusunda (süreler, "Önizleme" yazıları, ders/saat bilgileri ve anlamsız satırlar temizlenerek) baştan sona detaylı bir eğitim rehberi olarak tasarladım.

Dosyanın kapsamı ve proje uygulama bölümü oldukça uzun olduğu için, içeriğin hiçbir detayını kaybetmemek ve tam istediğiniz gibi özet yapmadan, bol örnek ve uygulamalarla ilerlemek adına bu kılavuzu iki ana parçaya böldüm.

Bu ilk bölümde, HTML5'in temellerini, editörleri, metin biçimlendirmeyi, stilleri, tabloları ve formları tüm detaylarıyla ele alıyoruz.

🎯 "Öğrenecekleriniz" Bölümünün Açıklaması

Bu kursun temel amacı, modern web geliştirme dünyasının kapılarını tamamen sıfırdan başlayarak aralamaktır. Eğitim boyunca internetin ve web sitelerinin arkasındaki ana mekanizma olan World Wide Web (W3) mimarisini kavrayacaksınız. Web sitelerinin temel iskeletini oluşturan HTML sistemini, en temel etiketlerden ileri düzey elemanlara kadar öğreneceksiniz.

Kursun en büyük avantajlarından biri, henüz stil dili olan CSS veya programlama dili olan JavaScript bilmeseniz bile, sadece HTML etiketlerinin kendi yeteneklerini ve style özniteliğini (attribute) kullanarak metinleri gelişmiş şekilde biçimlendirebilecek, tablolar, dinamik kullanıcı formları ve hatta görsel olarak zengin, modern web siteleri inşa edebilecek seviyeye geleceksiniz.

📘 BÖLÜM 1: HTML5 Giriş ve Geliştirme Ortamları

1. Web'in ve HTML'in Temelleri

Web geliştirici olma yolundaki ilk adım, kodların nerede ve nasıl çalıştığını anlamaktır.

World Wide Web (W3) Nedir?

Dünya çapındaki bilgisayarların birbirine bağlanarak bilgi paylaşmasını sağlayan devasa bir ağ sistemidir. İnternet üzerindeki sayfalar, resimler ve videolar bu sistem sayesinde adreslenir (URL) ve birbirine köprülerle (link) bağlanır.

HTML (HyperText Markup Language) Nedir?

HTML bir programlama dili değil, bir hiper metin işaretleme dilidir. Web sayfalarının iskeletini, yapısını ve tarayıcıya hangi içeriğin nerede duracağını söyleyen kurallar bütününü oluşturur.

2. Kod Editörleri (Kullanım ve Dosya Oluşturma)

HTML kodları yazmak için karmaşık programlara ihtiyacınız yoktur. Bilgisayarınızdaki basit metin düzenleyiciler bile işinizi görür.

Microsoft Notepad

Windows ile yerleşik gelen en basit metin editörüdür.

• Uygulama: Notepad'i açın, kodunuzu yazın ve kaydederken dosya adını index.html yapın. Kayıt türünü ise "Tüm Dosyalar" olarak seçin. Çift tıkladığınızda tarayıcınızda açılacaktır.

Notepad++

Notepad'in gelişmiş, kod renklendirme özelliğine sahip ücretsiz bir alternatifidir. Kodlarınızı renklendirerek hata yapmanızı engeller.

Visual Studio Code (VS Code)

Günümüzde profesyonel web geliştiricilerin en çok tercih ettiği modern, genişletilebilir ve ücretsiz kod editörüdür. Otomatik tamamlama (IntelliSense) ve canlı önizleme gibi eklentileriyle kodlama sürecini çok hızlandırır.

3. İlk HTML Sayfa Yapısı ve Elemanları

Bir web sayfasının tarayıcı tarafından doğru okunabilmesi için standart bir şablona ihtiyacı vardır.

Basit Bir HTML Dokümanı Şablonu

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <title>İlk Web Sayfam</title>

</head>

<body>

    <h1>Merhaba Dünya!</h1>

    <p>Bu benim ilk HTML5 sayfamdır.</p>

</body>

</html>

HTML Elemanı (Tag/Etiket) Mantığı

HTML etiketleri genellikle bir açılış etiketı, içerik ve kapanış etiketinden oluşur.

• Örnek: <etiket_adi>İçerik</etiket_adi>
• <p> açılış etiketidir, </p> kapanış etiketidir.

İnternet Tarayıcılarının Rolü

Chrome, Edge, Safari veya Firefox gibi tarayıcılar yazdığınız HTML kodlarını doğrudan kullanıcıya göstermez. Bu kodları okur, yorumlar ve görsel bir web sayfası haline getirerek ekrana yansıtır.

📗 BÖLÜM 2: Temel HTML Etiketleri ve Metin Biçimlendirme

1. Başlıklar, Paragraflar ve Temel Yapılar

HTML Başlıkları (<h1> - <h6>)

Web sayfanızdaki başlıkların önem sırasını belirtir. <h1> en büyük ve en önemli başlığı temsil ederken, <h6> en küçük başlıktır.

<h1>Ana Başlık (Sayfada 1 adet olmalı)</h1>

<h2>Alt Başlık</h2>

<h3>Daha Küçük Alt Başlık</h3>

HTML Paragrafları (<p>)

Düz metinleri ve açıklamaları gruplamak için kullanılır. Her <p> etiketi otomatik olarak alt satırdan başlar ve altına boşluk bırakır.

Satır Atlatma (<br>) ve Yatay Çizgi (<hr>)

• <br> (Break): Kapanış etiketi yoktur. Metin içinde bir alt satıra geçmek için kullanılır.
• <hr> (Horizontal Rule): Sayfaya konusal ayrım belirtmek amacıyla yatay bir çizgi çeker.

<p>İstanbul'un havası bugün çok güzel.<br>Yarın ise yağmur bekleniyor.</p>

<hr>

<p>Bu yeni bir konunun başlangıcıdır.</p>

2. Multimedya ve Bağlantılar

HTML Linkleri (<a>)

Kullanıcıları başka bir web sayfasına veya aynı sayfa içinde başka bir yere yönlendirmek için kullanılır. En önemli özniteliği href (bağlantı adresi) kısmıdır.

<a href="https://google.com" target="_blank">Google'a Git</a>

<!-- target="_blank" linkin yeni sekmede açılmasını sağlar -->

HTML Görselleri (<img>)

Sayfaya resim eklemek için kullanılır. Kapanış etiketi yoktur. src (resim yolu) ve alt (resim yüklenemezse görünecek alternatif metin) özniteliklerini alır.

<img src="manzara.jpg" alt="Dağ ve Deniz Manzarası" width="500">

HTML Ses (<audio>) ve Video (<video>) Dünyası

Web sayfanıza harici bir oynatıcıya ihtiyaç duymadan doğrudan medya yerleştirmenizi sağlar.

<!-- Ses Oynatıcı -->

<audio controls>

    <source src="sarki.mp3" type="audio/mpeg">

    Tarayıcınız ses ögesini desteklemiyor.

</audio>

 

<!-- Video Oynatıcı -->

<video width="400" controls>

    <source src="tanitim.mp4" type="video/mp4">

    Tarayıcınız video ögesini desteklemiyor.

</video>

(Not: controls özniteliği oynat, durdur ve ses açma butonlarını ekrana getirir.)

3. Gelişmiş Metin Biçimlendirme Elemanları

Yazılarınızı sadece görsel olarak değil, tarayıcılara ve arama motorlarına anlamsal (semantic) olarak da tanıtmak için bu etiketleri kullanırız.

Etiket	Görevi	Tarayıcı Görünümü
<b>	Kalın Yazı (Sadece görsel)	Kalın
<strong>	Kalın Yazı (Önemli vurgu)	Önemli Kalın
<i>	Eğik/İtalik Yazı (Sadece görsel)	İtalik
<em>	Vurgulu İtalik Yazı (Anlamsal vurgu)	Vurgulu İtalik
<small>	Daha küçük yazı boyutu	Küçük Metin
<mark>	Arka planı fosforlu sarı boyalı yazı	Vurgulanmış
<del>	Üstü çizili yazı (Silinmiş veri)	Silinmiş
<ins>	Altı çizili yazı (Yeni eklenmiş veri)	Eklenmiş
<sub>	Alt simge (Örn: Kimyasal formüller)	H2O
<sup>	Üst simge (Örn: Matematiksel üsler)	23 = 8

🎨 BÖLÜM 3: CSS Olmadan Tasarım (Styles & Comments)

1. HTML Style Attribute (Stil Özniteliği)

CSS dosyası oluşturmadan, doğrudan HTML etiketlerinin içine style="..." yazarak renk, yazı boyutu ve hizalama gibi temel tasarımsal değişiklikleri yapabilirsiniz.

Uygulamalı Stil Örnekleri

<!-- Arka Plan Rengi Değiştirme -->

<div style="background-color: lightblue; padding: 20px;">

   

    <!-- Yazı Rengi Değiştirme -->

    <h2 style="color: darkred;">Stilli Başlık</h2>

   

    <!-- Yazı Tipi (Font) Değiştirme -->

    <p style="font-family: 'Courier New', sans-serif;">Bu yazı fontu farklıdır.</p>

   

    <!-- Yazı Boyutu Değiştirme -->

    <p style="font-size: 24px;">Bu yazı oldukça büyüktür.</p>

   

    <!-- Yazı Hizalama -->

    <p style="text-align: center;">Bu metin sayfaya ortalanmıştır.</p>

   

</div>

2. HTML Yorum Satırı (<!-- ... -->)

Kodlarınızı yazarken kendinize veya ekip arkadaşınıza notlar bırakmak için kullanılır. Yorum satırları tarayıcı tarafından okunur ancak web sayfasında ziyaretçilere gösterilmez.

<!-- Bu bir yorum satırıdır. Tarayıcı bu kısmı es geçer. -->

<p>Bu metin ekranda görünecektir.</p>

📋 BÖLÜM 4: Listeler ve Gelişmiş Tablo Yapıları

1. HTML Listeleri

Sırasız Listeler (<ul>)

Maddelerin başında nokta veya benzeri simgeler bulunur. Sıralama önemli olmadığında kullanılır (Örn: Alışveriş listesi).

<ul>

    <li>Elma</li>

    <li>Armut</li>

    <li>Muz</li>

</ul>

Sıralı Listeler (<ol>)

Maddelerin başında 1, 2, 3 gibi sayısal veya harfsel bir düzen bulunur. Adım adım ilerleyen durumlarda kullanılır (Örn: Yemek tarifi).

<ol>

    <li>Fırını 180 dereceye ayarlayın.</li>

    <li>Malzemeleri karıştırın.</li>

    <li>Keki fırına verin.</li>

</ol>

2. HTML Tabloları (<table>)

Verileri satırlar ve sütunlar halinde düzenli bir şekilde göstermek için kullanılır.

Temel Tablo Bileşenleri:

• <table>: Tabloyu başlatır.
• <tr> (Table Row): Satır oluşturur.
• <th> (Table Header): Kalın ve ortalanmış başlık hücresi oluşturur.
• <td> (Table Data): Standart veri hücresi oluşturur.

💻 Uygulama: Gelişmiş Seviye Tablo Yapısı (Öğrenci Not Tablosu)

<table border="1" style="border-collapse: collapse; width: 100%; text-align: left;">

    <thead>

        <tr style="background-color: #f2f2f2;">

            <th>Öğrenci Adı</th>

            <th>Vize Notu</th>

            <th>Final Notu</th>

            <th>Durum</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Ahmet Yılmaz</td>

            <td>75</td>

            <td>85</td>

            <td style="color: green; font-weight: bold;">Geçti</td>

        </tr>

        <tr>

            <td>Elif Kaya</td>

            <td>40</td>

            <td>50</td>

            <td style="color: red; font-weight: bold;">Kaldı</td>

        </tr>

    </tbody>

</table>

📝 BÖLÜM 5: HTML Form Yapısı ve Kullanıcı Etkileşimi

Formlar, web sitenizin ziyaretçilerinden bilgi (ad, e-posta, şifre, mesaj) toplamanızı sağlayan en kritik yapılardır.

1. Form Elemanları ve Görevleri

• <form>: Tüm form elemanlarını sarmalayan ana yapıdır.
• <label>: Form elemanlarının (input) ne işe yaradığını belirten açıklama yazılarını içerir. Tıklanabilirliği artırır.
• <input>: Veri giriş alanıdır. type özniteliğine göre şekil alır.
• <textarea>: Kullanıcının uzun mesajlar veya yorumlar yazabileceği çok satırlı metin kutusudur.
• <fieldset> ve <legend>: Form içindeki ilişkili alanları bir kutu içine alarak gruplar.

2. Input Kontrol Tipleri

• Password Field: Girilen karakterleri nokta veya yıldız ile maskeler.
• Email Field: Girilen metnin geçerli bir e-posta formatı (@ işareti barındırması vb.) olup olmadığını otomatik kontrol eder.
• Radio Button: Kullanıcıya sunulan seçeneklerden sadece bir tanesini seçtirmek için kullanılır. (name öznitelikleri aynı olmalıdır).
• Checkbox: Kullanıcının birden fazla seçeneği aynı anda işaretlemesine izin verir.
• Submit Button: Formdaki tüm verileri toplayıp sunucuya gönderen tetikleyici butondur.

💻 Uygulama: Detaylı Kullanıcı Kayıt Formu Projesi

Tüm form elemanlarını pekiştireceğimiz kapsamlı bir kayıt formu yapalım:

<fieldset>

    <legend style="font-weight: bold; color: blue;">Yeni Üye Kayıt Formu</legend>

   

    <form action="/kaydet_sunucu" method="POST">

       

        <!-- Ad Soyad Girişi -->

        <p>

            <label for="adSoyad">Adınız ve Soyadınız:</label><br>

            <input type="text" id="adSoyad" name="kullanici_ad" placeholder="Örn: Can Demirok" required>

        </p>

       

        <!-- E-posta Girişi -->

        <p>

            <label for="eposta">E-posta Adresiniz:</label><br>

            <input type="email" id="eposta" name="kullanici_email" placeholder="ornek@alanadi.com" required>

        </p>

       

        <!-- Şifre Girişi -->

        <p>

            <label for="sifre">Şifre Belirleyin:</label><br>

            <input type="password" id="sifre" name="kullanici_sifre" required>

        </p>

       

        <!-- Tekli Seçim: Cinsiyet (Radio Button) -->

        <p>

            <label>Cinsiyetiniz:</label><br>

            <input type="radio" id="erkek" name="cinsiyet" value="E">

            <label for="erkek">Erkek</label>

           

            <input type="radio" id="kadin" name="cinsiyet" value="K">

            <label for="kadin">Kadın</label>

        </p>

       

        <!-- Çoklu Seçim: İlgi Alanları (Checkbox) -->

        <p>

            <label>İlgi Alanlarınız (Birden fazla seçebilirsiniz):</label><br>

            <input type="checkbox" id="html5" name="ilgiler" value="HTML">

            <label for="html5">HTML5 Geliştirme</label><br>

           

            <input type="checkbox" id="tasarim" name="ilgiler" value="Tasarim">

            <label for="tasarim">UI/UX Tasarım</label>

        </p>

       

        <!-- Uzun Metin Kutusu: Biyografi -->

        <p>

            <label for="biyo">Kendinizden Kısaca Bahsedin:</label><br>

            <textarea id="biyo" name="kullanici_biyo" rows="4" cols="40" placeholder="Yazılım geçmişiniz..."></textarea>

        </p>

       

        <!-- Formu Gönderme Butonu -->

        <p>

            <input type="submit" value="Kayıt İşlemini Tamamla" style="background-color: green; color: white; padding: 10px 20px; border: none; cursor: pointer;">

        </p>

       

    </form>

</fieldset>

🏗️ BÖLÜM 6: İleri Düzey HTML Yapı Taşları (<div> & <span>)

Web sayfalarındaki içerikleri mantıksal kutulara bölmek ve daha sonra onları şekillendirmek için iki temel etiket kullanırız.

1. <div> Tagı (Block-level Element)

Sayfada blok düzeyinde alanlar oluşturur. Yani içine yazıldığı alanı tamamen kaplar ve kendisinden sonra gelen her şeyi bir alt satıra zorlar. Web sitelerinin Header, Sidebar, Footer gibi ana bölümlerini kutulamak için kullanılır.

2. <span> Tagı (Inline Element)

Satır içi bir etiketidir. Sadece içindeki metnin kapladığı alan kadar yer kaplar, yeni bir satır başlatmaz. Bir paragraf içindeki tek bir kelimenin rengini veya stilini değiştirmek istediğinizde idealdir.

💻 Karşılaştırmalı Canlı Uygulama

<!-- DIV Örneği: İki ayrı blok oluşturur -->

<div style="background-color: yellow; padding: 10px; margin-bottom: 10px;">

    Bu birinci DIV bloğudur. Satırı tamamen kaplar.

</div>

<div style="background-color: orange; padding: 10px;">

    Bu ikinci DIV bloğudur. Alt satırdan başlar.

</div>

 

<br><hr><br>

 

<!-- SPAN Örneği: Aynı satır içinde biçimlendirme yapar -->

<p>

    Web sitemizde gezinirken lütfen

    <span style="color: red; font-weight: bold;">Kullanıcı Sözleşmesini</span>

    dikkatlice okuyunuz. Bu kırmızı alan bir span ile ayrılmıştır.

</p>

 

Harika! HTML5 teorik yapısını, etiketleri, tabloları ve formları eksiksiz bir şekilde tamamladığımıza göre, şimdi kursun en büyük ve en önemli kısmına geçiyoruz: 8 saat 48 dakikalık dev "MP3 İndirme Platformu" Proje Uygulaması.

Bu bölümde, CSS ve JavaScript kullanmadan, sadece saf HTML5 yeteneklerini, gelişmiş etiketleri (<div>, <span>), çoklu ortam öğelerini (<audio>), gelişmiş formları ve tabloları harmanlayarak modern bir müzik portalı inşa edeceğiz.

Müfredat listesindeki tüm adımları, süreleri ve anlamsız ifadeleri temizleyerek, satır satır mantığını açıklayarak, bol kod örneği ve tam tasarımlarla projenin sonuna kadar eksiksiz ilerliyoruz.

🚀 BÖLÜM 7: Büyük Proje Uygulaması – MP3 İndirme Platformu

1. Proje Hazırlığı ve Materyal Temini

Bir web sitesi yapmaya başlamadan önce, projenin klasör yapısını kurmalı ve kullanacağımız tüm materyalleri (ses dosyaları, sanatçı resimleri, ikonlar) organize etmeliyiz.

• Uygulama Adımı: Bilgisayarınızda mp3-platformu adında bir klasör açın. İçine index.html dosyasını oluşturun. Yanına sesler ve resimler adında iki alt klasör ekleyerek tüm .mp3 ve .jpg dosyalarınızı buraya yerleştirin.

2. Ana Sayfa İskeletinin İnşası (Home Page)

Web sitemizin giriş sayfası üç ana bölümden oluşur: Üst bilgi (Header), Ana içerik (Main Content) ve Alt bilgi (Footer).

🏷️ Home Page - Header (Üst Menü ve Logo Alanı)

Header bölümünde sitemizin adı (Logo) ve kullanıcıların sayfalar arasında geçiş yapmasını sağlayacak bir navigasyon menüsü (Navigation Bar) yer alır. CSS kullanmadığımız için elemanları yan yana getirmek veya hizalamak için style niteliğindeki display: flex; veya alternatif HTML hizalamalarını kullanacağız.

<!-- Home Page - Header Bölümü -->

<header style="background-color: #2c3e50; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center;">

    <!-- Logo Alanı -->

    <div style="font-size: 24px; font-weight: bold;">

        🎵 MuZikDünyası<span style="color: #e74c3c;">.com</span>

    </div>

   

    <!-- Navigasyon Çubuğu (Navigation Bar) -->

    <nav>

        <a href="index.html" style="color: white; text-decoration: none; margin-right: 15px; font-weight: bold;">Ana Sayfa</a>

        <a href="trendler.html" style="color: #bdc3c7; text-decoration: none; margin-right: 15px;">Trendler</a>

        <a href="turkce.html" style="color: #bdc3c7; text-decoration: none; margin-right: 15px;">Türkçe Pop</a>

        <a href="yabanci.html" style="color: #bdc3c7; text-decoration: none; margin-right: 15px;">Yabancı Hit</a>

        <a href="sanatcilar.html" style="color: #bdc3c7; text-decoration: none; margin-right: 15px;">Sanatçılar</a>

        <a href="iletisim.html" style="color: #bdc3c7; text-decoration: none; font-weight: bold; background-color: #e74c3c; padding: 5px 10px; border-radius: 3px;">İletişim</a>

    </nav>

</header>

📑 Home Page - Main Content (Ana İçerik Alanı)

Ana içerik bölümü sitemizin gövdesidir. Burada hoş geldiniz mesajı, öne çıkan albümler ve popüler müzik listeleri sergilenir. Yapıyı bloklara bölmek için <div> etiketlerini etkili bir şekilde kullanıyoruz.

<!-- Home Page - Main Content Bölümü -->

<main style="padding: 30px; font-family: Arial, sans-serif; background-color: #f9f9f9;">

   

    <!-- Bölüm 1: Karşılama ve Tanıtım -->

    <div style="text-align: center; margin-bottom: 40px; background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0px 2px 5px rgba(0,0,0,0.1);">

        <h1 style="color: #2c3e50; font-size: 32px;">Sınırsız MP3 Dinleme ve İndirme Platformuna Hoş Geldiniz</h1>

        <p style="color: #7f8c8d; font-size: 16px;">En güncel şarkıları, albümleri ve sanatçı profillerini tek bir tıkla keşfedin. Tamamen yasal ve yüksek kaliteli ses deneyimi!</p>

    </div>

 

    <!-- Bölüm 2: Haftanın Popüler Şarkıları Listesi (Tablo Yapısıyla) -->

    <div style="margin-bottom: 40px;">

        <h2 style="color: #2c3e50; border-left: 5px solid #e74c3c; padding-left: 10px; margin-bottom: 20px;">🔥 Haftanın En Çok İndirilenleri</h2>

       

        <table border="0" style="width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0px 2px 5px rgba(0,0,0,0.05);">

            <thead>

                <tr style="background-color: #34495e; color: white; text-align: left;">

                    <th style="padding: 12px;">Sıra</th>

                    <th style="padding: 12px;">Şarkı Adı</th>

                    <th style="padding: 12px;">Sanatçı</th>

                    <th style="padding: 12px;">Dinle</th>

                    <th style="padding: 12px;">İşlem</th>

                </tr>

            </thead>

            <tbody>

                <tr style="border-bottom: 1px solid #eee;">

                    <td style="padding: 12px; font-weight: bold;">1</td>

                    <td style="padding: 12px;">Ateş ve Barut</td>

                    <td style="padding: 12px;">Murat Boz</td>

                    <td style="padding: 12px;"><audio controls style="height: 30px;"><source src="sesler/murat-boz.mp3" type="audio/mpeg"></audio></td>

                    <td style="padding: 12px;"><a href="sesler/murat-boz.mp3" download style="color: #27ae60; font-weight: bold; text-decoration: none;">📥 MP3 İndir</a></td>

                </tr>

                <tr style="border-bottom: 1px solid #eee;">

                    <td style="padding: 12px; font-weight: bold;">2</td>

                    <td style="padding: 12px;">Shape of You</td>

                    <td style="padding: 12px;">Ed Sheeran</td>

                    <td style="padding: 12px;"><audio controls style="height: 30px;"><source src="sesler/ed-sheeran.mp3" type="audio/mpeg"></audio></td>

                    <td style="padding: 12px;"><a href="sesler/ed-sheeran.mp3" download style="color: #27ae60; font-weight: bold; text-decoration: none;">📥 MP3 İndir</a></td>

                </tr>

            </tbody>

        </table>

    </div>

</main>

👣 Home Page - Footer (Alt Bilgi Alanı)

Telif hakkı bildirimleri, sosyal medya bağlantı simgeleri ve kısa site bilgilerinin yer aldığı, sayfanın en alt kapanış kısmıdır.

<!-- Home Page - Footer Bölümü -->

<footer style="background-color: #2c3e50; color: #bdc3c7; text-align: center; padding: 20px; font-size: 14px; margin-top: 20px;">

    <p>&copy; 2026 MuZikDünyası.com - Tüm Hakları Saklıdır.</p>

    <p>

        <a href="#" style="color: #e74c3c; text-decoration: none; margin: 0 10px;">Kullanım Şartları</a> |

        <a href="#" style="color: #e74c3c; text-decoration: none; margin: 0 10px;">Gizlilik Politikası</a> |

        <a href="iletisim.html" style="color: #e74c3c; text-decoration: none; margin: 0 10px;">Bize Ulaşın</a>

    </p>

</footer>

3. Navigasyon Sayfalarının Detaylı Tasarımı

📞 Navigation Bar - Contact (İletişim Sayfası)

Kullanıcıların site yönetimiyle iletişime geçebileceği, istek parça gönderebileceği, Bölüm 5'te öğrendiğimiz gelişmiş form yapısını içeren iletisim.html sayfasıdır.

<!-- iletisim.html İçerik Bloğu -->

<div style="max-width: 600px; margin: 30px auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-family: sans-serif;">

    <h2 style="color: #2c3e50; border-bottom: 2px solid #e74c3c; padding-bottom: 10px;">📩 İletişim & İstek Parça Formu</h2>

   

    <form action="#" method="POST">

        <p>

            <label for="isim" style="font-weight: bold;">Adınız Soyadınız:</label><br>

            <input type="text" id="isim" name="isim" style="width: 100%; padding: 8px; margin-top: 5px; box-sizing: border-box;" required>

        </p>

        <p>

            <label for="email" style="font-weight: bold;">E-posta Adresiniz:</label><br>

            <input type="email" id="email" name="email" style="width: 100%; padding: 8px; margin-top: 5px; box-sizing: border-box;" required>

        </p>

        <p>

            <label for="konu" style="font-weight: bold;">Mesaj Konusu:</label><br>

            <select id="konu" name="konu" style="width: 100%; padding: 8px; margin-top: 5px;">

                <option value="istek">İstek Şarkı Bildirimi</option>

                <option value="hata">Hatalı/Kırık Link Bildirimi</option>

                <option value="reklam">Reklam ve İş Birliği</option>

            </select>

        </p>

        <p>

            <label for="mesaj" style="font-weight: bold;">Mesajınız / Şarkı Talebiniz:</label><br>

            <textarea id="mesaj" name="mesaj" rows="5" style="width: 100%; padding: 8px; margin-top: 5px; box-sizing: border-box;" required></textarea>

        </p>

        <p>

            <input type="submit" value="Mesajı Gönder" style="background-color: #e74c3c; color: white; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 4px;">

        </p>

    </form>

</div>

🎤 Navigation Bar - Artists & Profiles (Sanatçılar ve Profil Sayfaları)

Ziyaretçilerin sanatçıları liste halinde görebileceği (sanatcilar.html) ve bir sanatçıya tıkladığında açılacak biyografi ve albüm listesini içeren profil tasarımlarıdır.

Sanatçılar Listesi Alanı (sanatcilar.html - Görsel Izgara Tasarımı)

<div style="padding: 20px; font-family: Arial, sans-serif;">

    <h2 style="color: #2c3e50; text-align: center; margin-bottom: 30px;">⭐ Popüler Sanatçılar</h2>

   

    <!-- Yan Yana Sanatçı Kartları Bloğu -->

    <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;">

       

        <!-- Sanatçı Kartı 1 -->

        <div style="width: 200px; text-align: center; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">

            <img src="resimler/murat-boz.jpg" alt="Murat Boz" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">

            <h3 style="margin: 10px 0 5px 0; color: #2c3e50;">Murat Boz</h3>

            <p style="color: #7f8c8d; font-size: 13px;">Türkçe Pop</p>

            <a href="murat-boz-profil.html" style="display: inline-block; background-color: #34495e; color: white; text-decoration: none; padding: 6px 12px; font-size: 12px; border-radius: 4px; margin-top: 5px;">Profile Git</a>

        </div>

 

        <!-- Sanatçı Kartı 2 -->

        <div style="width: 200px; text-align: center; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">

            <img src="resimler/ed-sheeran.jpg" alt="Ed Sheeran" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">

            <h3 style="margin: 10px 0 5px 0; color: #2c3e50;">Ed Sheeran</h3>

            <p style="color: #7f8c8d; font-size: 13px;">Yabancı Pop / Pop Rock</p>

            <a href="ed-sheeran-profil.html" style="display: inline-block; background-color: #34495e; color: white; text-decoration: none; padding: 6px 12px; font-size: 12px; border-radius: 4px; margin-top: 5px;">Profile Git</a>

        </div>

 

    </div>

</div>

Örnek Sanatçı Detay Profili Sayfası (murat-boz-profil.html)

<div style="padding: 30px; font-family: sans-serif; max-width: 800px; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">

    <!-- Üst Banner Alanı -->

    <div style="display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #eee; padding-bottom: 20px;">

        <img src="resimler/murat-boz.jpg" alt="Murat Boz" style="width: 150px; height: 150px; border-radius: 10px; object-fit: cover;">

        <div>

            <h1 style="margin: 0; color: #2c3e50;">Murat Boz</h1>

            <p style="color: #7f8c8d; font-style: italic;">Doğum: 7 Mart 1980 | Tür: Türkçe Pop</p>

            <p style="font-size: 14px; color: #34495e; line-height: 1.5;">Murat Boz, Türk şarkıcı, söz yazarı ve oyuncu. 2000'lerin başından itibaren çıkardığı hit parçalarla Türk pop müziğinin en önemli isimlerinden biri haline gelmiştir.</p>

        </div>

    </div>

 

    <!-- Sanatçıya Ait Şarkı Panelleri -->

    <h3 style="color: #e74c3c; margin-top: 25px;">🎵 Sanatçının Popüler Parçaları</h3>

    <!-- Şarkı Oynatma Panelleri alt alta listelenir -->

    <div style="background: #f8f9fa; padding: 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">

        <span><strong>1. Ateş ve Barut</strong> (Süre: 3:45)</span>

        <audio controls style="height: 32px;"><source src="sesler/murat-boz.mp3" type="audio/mpeg"></audio>

        <a href="sesler/murat-boz.mp3" download style="background: #27ae60; color: white; padding: 5px 10px; text-decoration: none; border-radius: 4px; font-size: 12px;">İndir</a>

    </div>

</div>

4. Kategori Bazlı Şarkı Listeleme Sayfaları

📈 Navigation Bar - Trends (Trend Şarkılar Sayfası)

Dünya genelinde ve platformda anlık olarak yükselişte olan, en çok aranan 10 popüler parçanın sıralı liste (<ol>) mantığıyla estetik bir şekilde sunulduğu trendler.html sayfasıdır.

🇹🇷 Navigation Bar - Turkish Songs (Türkçe Şarkılar Sayfası)

Sadece yerel sanatçıların, Türkçe pop, rap, rock tarzındaki parçalarının süzülerek listelendiği, indirme butonlarının yeşil temalı aksiyon butonlarıyla tasarlandığı kategoridir.

🗺️ Navigation Bar - Foreign Songs (Yabancı Şarkılar Sayfası)

Billboard listeleri başta olmak üzere küresel hit müziklerin, yabancı albüm kapaklarının ve telifsiz önizleme ses dosyalarının yer aldığı kategoridir.

5. 🛠️ Uygulama: Şarkı İndirme Panelleri (Song Download Panels)

Kullanıcı deneyimini en üst seviyeye çıkarmak adına, platformdaki tüm şarkı dinleme ve indirme butonlarını standart, temiz ve göze hoş gelen bağımsız kart (panel) tasarımlarına dönüştürüyoruz.

<!-- Tekli Şarkı İndirme Paneli Şablonu (Kapsamlı Örnek) -->

<div style="background: white; border: 1px solid #e0e0e0; border-radius: 6px; padding: 15px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; font-family: Arial, sans-serif;">

   

    <!-- Sol Taraf: Albüm Resmi ve Şarkı Bilgisi -->

    <div style="display: flex; align-items: center; gap: 15px;">

        <div style="width: 50px; height: 50px; background-color: #e74c3c; color: white; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: bold; font-size: 20px;">

            🎼

        </div>

        <div>

            <h4 style="margin: 0; color: #2c3e50; font-size: 16px;">Geri Dönüş Olsa</h4>

            <p style="margin: 3px 0 0 0; color: #7f8c8d; font-size: 13px;">Murat Boz • Albüm: Janti</p>

        </div>

    </div>

   

    <!-- Orta Taraf: Canlı Önizleme Oynatıcı -->

    <div>

        <audio controls style="height: 35px;">

            <source src="sesler/murat-boz-2.mp3" type="audio/mpeg">

            Tarayıcınız ses ögesini desteklemiyor.

        </audio>

    </div>

   

    <!-- Sağ Taraf: İndirme Butonu -->

    <div>

        <a href="sesler/murat-boz-2.mp3" download="Murat Boz - Geri Donus Olsa.mp3" style="background-color: #27ae60; color: white; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: bold; display: inline-block; transition: background 0.2s;">

            📥 Güvenli İndir (MP3)

        </a>

    </div>

</div>

6. 📝 Navigation Bar - Recently Added Album [ÖDEV PROJESİ]

Müfredatımızın son bölümü, öğrendiğiniz tüm bu bilgileri birleştirerek kendi başınıza yapmanız beklenen bir Uygulama Ödevidir.

🎯 Ödevin Amacı ve Talimatlar:

Sitenin navigasyon barına bağlanacak son-eklenenler.html adında yeni bir sayfa oluşturun. Bu sayfada platforma sistemsel olarak en son yüklenmiş 3 yeni albümü tanıtacaksınız.

• Kriter 1 (Yapı): En üstte bir <header> ve menü yapısı olmalı.
• Kriter 2 (Kutulama): Her albümü ana bir <div> bloğu içerisine alın. Albüm kapak görsellerini eklemek için <img> etiketini kullanın.
• Kriter 3 (Listeleme): Albüm içindeki şarkıları göstermek için Sıralı Listelerden (<ol>) yararlanın.
• Kriter 4 (Multimedya & İndirme): Her şarkı maddesinin yanına bir <audio controls> paneli ve o şarkıyı yerel bilgisayara indirmeyi sağlayacak download öznitelikli bir <a> (link) elemanı ekleyin.
• Kriter 5 (Görsel Zenginlik): CSS kullanmadan, sadece etiket içi style özniteliğini kullanarak arka plan renklerini, yazı boyutlarını ve fontları (font-family) düzenleyerek göze hitap eden modern bir albüm lansman sayfası tasarlayın.

 

Paylaştığınız ders müfredatını en ince ayrıntısına kadar, hiçbir konuyu atlamadan ve özet geçmeden satır satır ele alarak kapsamlı bir eğitim rehberine dönüştürüyoruz. İstediğiniz gibi süreleri, "Önizleme" yazılarını, "ders" istatistiklerini ve anlamsız satırları temizleyerek tamamen kod örneklerine, teorik açıklamalara ve pratik uygulamalara odaklanıyoruz.

Müfredat çok uzun ve detaylı olduğu için, kaliteden ödün vermemek adına bu içeriği parça parça işleyeceğiz. İlk bölümde kursun temel vaatlerini ve ilk ana modül olan HTML Temelleri (HTML Fundamentals) kısmını eksiksiz şekilde tasarlıyoruz.

🌟 "Öğrenecekleriniz" Bölümünün Detaylı Açıklaması

Bu kurs, sıfırdan başlayarak profesyonel bir web geliştirici (Frontend Developer) olmanız için tasarlanmıştır. Bu bölümde vadedilen yetkinliklerin analizi şöyledir:

• Sıfırdan Modern ve Özgüvenli Geliştirici Olmak: Hiçbir kodlama bilginiz olmasa bile, modern web standartlarına uygun olarak kendi başınıza kod yazma özgüvenini kazanacaksınız.
• Portfolyo İçin Gerçek Dünya Projesi: Sadece teorik kodlar öğrenmeyecek, öğrendiğiniz her şeyi gerçek bir ajans düzeyinde, portfolyonuza ekleyebileceğiniz büyüklükte bir web projesine (Omnifood) dönüştüreceksiniz.
• Semantik ve Erişebilir HTML5: Arama motorlarının (SEO) ve ekran okuyucu kullanan engelli bireylerin web sitenizi kolayca anlayabilmesi için modern ve anlamlı etiketler kullanmayı öğreneceksiniz.
• Gelişmiş CSS Düzenleri (Flexbox ve Grid): Eski nesil zorlayıcı yöntemler yerine, modern web tasarımının kalbi olan esnek kutu modelleri (Flexbox) ve iki boyutlu ızgara sistemleri (CSS Grid) ile sayfa düzenlemeyi ustalıkla yapacaksınız.
• Derinlemesine CSS Teorisi: Kutuların tarayıcıda nasıl konumlandığını (Box Model), elemanların ekranda nasıl yerleştiğini, stillerin alt elemanlara nasıl aktarıldığını (Inheritance) ve çakışan kodların nasıl çözüldüğünü kavrayacaksınız.
• Görsel Tasarım Çerçevesi: Kod yazmanın ötesinde; tipografi, renk teorisi, boşluk yönetimi ve kullanıcı deneyimi (UX) kurallarıyla göze hitap eden profesyonel tasarımlar yapabileceksiniz.
• Responsive (Mobil Uyumlu) Tasarım: Yazdığınız sitelerin sadece bilgisayarlarda değil; tabletlerde, büyük ve küçük ekranlı tüm akıllı telefonlarda kusursuz görünmesini sağlayacaksınız.
• Geliştirici Refleksleri: Bir problemle karşılaştığınızda dokümantasyon okumayı, Chrome DevTools kullanarak hataları (debugging) bulmayı ve Netlify gibi platformlarda sitenizi dünya çapında yayına almayı öğreneceksiniz.

🛠️ BÖLÜM 1: Web Geliştirmeye Giriş ve İlk Sayfa

Web Geliştirmeye Üst Düzey Bakış (A High-Level Overview of Web Development)

Web geliştirme temel olarak ikiye ayrılır: Frontend (Kullanıcının gördüğü arayüz) ve Backend (Sunucu ve veri tabanı işlemleri). Biz bu müfredatta web sitelerinin yüzünü, yani Frontend dünyasını inşa ediyoruz.

• HTML: Sitenin iskeletidir (Yazılar, resimler, butonlar).
• CSS: Sitenin kıyafetidir (Renkler, düzen, yazı boyutları, animasyonlar).
• JavaScript: Sitenin beynidir (Butona basılınca açılan menüler, dinamik veriler).

Kod Editörünün Kurulması (Setting Up Our Code Editor)

Dünya standartlarında en popüler kod editörü olan Visual Studio Code (VS Code) programını kullanacağız. Kod yazarken hız kazanmak için içerisindeki Emmet kısayollarından ve sayfayı kaydettiğimiz an tarayıcıda otomatik güncellenmesini sağlayan Live Server eklentisinden yararlanacağız.

İlk Web Sayfanız! (Your Very First Webpage!)

Bir web sayfasının çalışabilmesi için bilgisayarımıza dosya uzantısının .html olduğunu söylememiz gerekir.

<!-- index.html -->

Merhaba Dünya! Bu benim ilk web sayfam.

Tarayıcı bu dosyayı okuduğunda ekrana direkt bu yazıyı basar. Ancak profesyonel standartlarda bu şekilde ham yazı yazılmaz, HTML standartlarına uyulur.

🏗️ BÖLÜM 2: HTML Temelleri (HTML Fundamentals)

HTML Belge Yapısı (HTML Document Structure)

Her HTML dosyası belirli bir hiyerarşik şablonla başlamak zorundadır. Bu şablon tarayıcıya sayfa hakkında teknik bilgiler verir.

Kod Tasarımı ve Uygulama:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Benim Modern Portfolyom</title>

</head>

<body>

    <!-- Kullanıcının göreceği tüm içerikler buraya yazılır -->

    <h1>Web Siteme Hoş Geldiniz</h1>

</body>

</html>

• <!DOCTYPE html>: Tarayıcıya bu dosyanın modern HTML5 standartlarında yazıldığını söyler.
• <html lang="tr">: Sayfanın ana dilinin Türkçe olduğunu belirtir. Arama motorları için kritiktir.
• <head>: Sayfada görünmeyen ama arka planda çalışan teknik ayarlar, karakter tanımlamaları (UTF-8) ve sayfa başlığı (<title>) burada yer alır.
• <body>: Sitede ziyaretçilerin gördüğü tüm metinler, resimler ve formlar bu etiketin içine yazılır.

Metin Elemanları (Text Elements)

HTML'de başlıklar ve paragraflar anlamsal önem sırasına göre dizilir.

Kod Tasarımı ve Uygulama:

<h1>Ana Başlık (Sayfada sadece 1 adet olmalıdır)</h1>

<h2>Alt Başlık (Önemli kategoriler için)</h2>

<h3>Alt Kategorinin Başlığı</h3>

<h4>Daha Küçük Başlık</h4>

<h5>Yan Başlık</h5>

<h6>En Küçük Başlık</h6>

 

<p>Bu bir paragraf etiketidir. Web sitenizdeki tüm düz yazılar, açıklamalar ve blog içerikleri bu etiket kullanılarak yazılır. Paragraflar kendiliğinden alt satıra geçer ve altlarında hafif bir boşluk bırakırlar.</p>

 

<p>Yazı içinde <strong>kalın yazmak istediğimiz alanları</strong> strong içine alırız. Vurgulamak istediğimiz yerleri ise <em>eğik (italik) yani em etiketleriyle</em> belirtiriz.</p>

Daha Fazla Metin Elemanı: Listeler (More Text Elements: Lists)

Web tasarımında menüler, özellik listeleri veya maddelendirmeler için iki tür liste kullanılır: Sıralı (<ol>) ve Sırasız (<ul>).

Kod Tasarımı ve Uygulama:

<!-- Sırasız Liste (Genelde menüler ve madde işaretleri için) -->

<h3>Alışveriş Listesi</h3>

<ul>

    <li>Süt</li>

    <li>Yumurta</li>

    <li>Ekmek</li>

</ul>

 

<!-- Sıralı Liste (Aşamalı işlemler veya sıralamalar için) -->

<h3>Yemek Tarifi Adımları</h3>

<ol>

    <li>Soğanları küp küp doğrayın.</li>

    <li>Tencereye yağı ekleyip soğanları pembeleşene kadar kavurun.</li>

    <li>Salçayı ve suyu ekleyip kaynamaya bırakın.</li>

</ol>

Görseller ve Öznitelikler (Images and Attributes)

HTML etiketlerine ek özellikler kazandıran yapılara Attribute (Öznitelik) denir. Resim eklemek için kullandığımız <img> etiketinin kapanış ortağı yoktur (Self-closing) ve çalışmak için iki zorunlu attribute ister: src (kaynak yolu) ve alt (alternatif metin).

Kod Tasarımı ve Uygulama:

<img src="https://unsplash.com"

     alt="Laptop önünde çalışan bir web geliştirici"

     width="600"

     height="400">

• src: Resmin internetteki adresini veya bilgisayarınızdaki klasör yolunu belirtir.
• alt: Resim yüklenemezse ekranda çıkacak yazıdır. Ayrıca görme engelli bireylerin ekran okuyucuları bu yazıyı okur, SEO için çok değerlidir.

Bağlantılar - Linkler (Hyperlinks)

Sayfalar arası geçiş yapmak veya dış bir web sitesine yönlendirme sağlamak için <a> (Anchor) etiketi kullanılır. En önemli attribute'u href (Hedef adres) yapısıdır.

Kod Tasarımı ve Uygulama:

<!-- Dış bağlantı ve yeni sekmede açma -->

<a href="https://google.com" target="_blank">Google'a Git (Yeni Sekme)</a>

 

<!-- Sayfa içi iç bağlantı (Sayfa tasarımında aşağı kaydırma için) -->

<a href="#iletisim-bolumu">İletişime Kaydır</a>

 

<!-- E-posta veya Telefon Tetikleme -->

<a href="mailto:info@kodlama.com">Bize E-posta Gönder</a>

<a href="tel:+905555555555">Bizi Ara</a>

Sayfamızı Yapılandırma ve Semantik HTML (Structuring our Page & Semantic HTML)

Eski web tasarımında her yer <div> (anlamsız kutu) etiketleriyle dolduruluyordu. Modern HTML5 ile beraber, arama motorlarının sitenin neresinde ne olduğunu anlaması için Semantik (Anlamsal) Etiketler geldi.

Yapısal Mimari Tasarımı:

<header>

    <!-- Sitenin en üst kısmı: Logo ve Navigasyon Menüsü -->

    <nav>

        <ul>

            <li><a href="#">Anasayfa</a></li>

            <li><a href="#">Hizmetler</a></li>

            <li><a href="#">Blog</a></li>

        </ul>

    </nav>

</header>

 

<main>

    <!-- Sitenin ana ve özgün içeriği burada yer alır -->

   

    <section>

        <!-- Birbiriyle ilişkili içeriklerin toplandığı genel bölümler -->

        <h2>Hakkımızda</h2>

        <p>Geliştirme ekibimiz profesyonel çözümler üretir.</p>

    </section>

 

    <section>

        <h2>Son Blog Yazıları</h2>

        <article>

            <!-- Tek başına anlam ifade eden bağımsız yazılar, haberler veya kartlar -->

            <h3>HTML5'in Gücü</h3>

            <p>Semantik kod yazarak SEO skorlarınızı uçurun...</p>

        </article>

    </section>

   

    <aside>

        <!-- Ana içerikle dolaylı yoldan ilişkili yan menü, reklamlar veya kategoriler -->

        <h3>Kategoriler</h3>

        <p>Yazılım, Tasarım, Yaşam</p>

    </aside>

</main>

 

<footer>

    <!-- Sitenin en alt kısmı: Telif hakları, sosyal medya linkleri ve iletişim bilgileri -->

    <p>&copy; 2026 Tüm Hakları Saklıdır.</p>

</footer>

🏆 HTML UYGULAMA PROJESİ (Challenge #1 & #2 Birleşimi)

Şu ana kadar öğrendiğimiz tüm HTML bilgilerini bir araya getirerek anlamlı, semantik ve eksiksiz bir Blog Makale Sayfası inşa ediyoruz.

Kodların Tamamı:

<!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Teknoloji Blogu | Geliştirici Günlükleri</title>

</head>

<body>

 

    <header>

        <h1>CodeCraft Teknoloji Blogu</h1>

        <nav>

            <ul>

                <li><a href="#makale">Makaleyi Oku</a></li>

                <li><a href="#yazar">Yazar Hakkında</a></li>

                <li><a href="#bulten">Bültene Abone Ol</a></li>

            </ul>

        </nav>

    </header>

 

    <main>

        <article id="makale">

            <header>

                <h2>Neden Web Geliştirici Olmalısınız?</h2>

                <p>Yayınlanma Tarihi: <strong>4 Eylül 2026</strong> | Yazar: <em>Ahmet Yılmaz</em></p>

            </header>

 

            <p>Günümüz dijital dünyasında web siteleri ve uygulamaları hayatımızın merkezinde yer alıyor. Bu ekosistemi inşa eden <strong>Web Geliştiricilerine (Web Developers)</strong> olan ihtiyaç her geçen gün artıyor.</p>

 

            <img src="https://unsplash.com" alt="Kod satırları gösteren bilgisayar ekranı" width="1000">

 

            <h3>Web Geliştirmenin 3 Temel Taşı</h3>

            <p>Bir web projesi geliştirirken aşağıdaki teknolojiler senkronize şekilde çalışır:</p>

            <ul>

                <li><strong>HTML5:</strong> Sayfa yapısını ve içeriğini belirler.</li>

                <li><strong>CSS3:</strong> Görsel tasarımı ve düzeni ayarlar.</li>

                <li><strong>JavaScript:</strong> Sayfayı etkileşimli hale getirir.</li>

            </ul>

 

            <h3>Öğrenme Sürecinde Dikkat Edilmesi Gerekenler</h3>

            <ol>

                <li>Hergün düzenli olarak kod yazın ve pratik yapın.</li>

                <li>Başkalarının yazdığı açık kaynaklı kodları inceleyin.</li>

                <li>Hata yapmaktan korkmayın, hata çözmek sizi geliştirir.</li>

            </ol>

 

            <p>Daha detaylı bilgi edinmek için <a href="https://mozilla.org" target="_blank">MDN Web Docs</a> dökümanlarını inceleyebilirsiniz.</p>

        </article>

 

        <hr>

 

        <section id="yazar">

            <h3>Yazar Hakkında</h3>

            <p>Ahmet Yılmaz, 10 yılı aşkın süredir sektörde aktif olarak Frontend mimarileri üzerine çalışan bir kıdemli yazılım geliştiricidir.</p>

        </section>

 

        <section id="bulten">

            <h3>Yeni Yazılardan Haberdar Olun</h3>

            <p>E-posta listemize katılarak haftalık içerikleri kaçırmayın.</p>

            <!-- Form elemanları bir sonraki aşamalarda derinleşecektir -->

            <a href="mailto:bulten@codecraft.com">Kayıt İçin Bize Yazın</a>

        </section>

    </main>

 

    <footer>

        <p>&copy; 2026 CodeCraft. Geleceği Kodlayanlar Topluluğu.</p>

    </footer>

 

</body>

</html>

 

Harika! HTML iskeletimizi kusursuz bir şekilde kurduğumuza göre, şimdi bu iskelete ruh, renk ve şekil vereceğimiz CSS Temelleri (CSS Fundamentals) bölümüne satır satır geçiş yapıyoruz.

Müfredattaki tüm teorik başlıkları, tarayıcı arka plan mekanizmalarını ve pratik geliştirici becerilerini yine sürelerden ve anlamsız satırlardan arındırarak en detaylı haliyle, örnek uygulamalarla tasarlıyoruz.

🎨 BÖLÜM 3: CSS Temelleri (CSS Fundamentals)

CSS'e Giriş (Introduction to CSS)

CSS (Cascading Style Sheets), HTML ile yazdığımız düz metin ve elemanların tarayıcıda nasıl görüneceğini belirleyen stil dilidir. Bir CSS kuralı iki ana parçadan oluşur: Seçici (Selector) ve Bildirim Bloku (Declaration Block).

/* CSS Anatomisi */

secici {

    ozellik: deger;

}

Satır İçi, Dahili ve Harici CSS (Inline, Internal and External CSS)

CSS kodlarını HTML sayfamıza entegre etmenin 3 farklı yolu vardır. Profesyonel projelerde kod karmaşasını önlemek için Harici CSS yöntemi zorunludur.

1. Satır İçi (Inline) CSS:

Doğrudan HTML etiketinin içine style attribute'u yazılarak uygulanır. Sadece tek bir elemana anlık müdahale için kullanılır, bakımı çok zordur.

<h1 style="color: blue; font-size: 24px;">Satır İçi Stillendirilmiş Başlık</h1>

2. Dahili (Internal) CSS:

HTML dosyasının <head> bölümünün içine <style> etiketleri açılarak yazılır. Sadece o HTML sayfasına özel stiller için tercih edilir.

<head>

    <style>

        p {

            color: green;

            line-height: 1.6;

        }

    </style>

</head>

3. Harici (External) CSS (En Profesyonel Yöntem):

Stiller tamamen bağımsız bir .css uzantılı dosyada (örneğin style.css) toplanır. HTML sayfasının <head> kısmına <link> etiketiyle bağlanır. Bu sayede bir CSS dosyasıyla yüzlerce HTML sayfasını aynı anda stillendirebilirsiniz.

<!-- index.html içindeki bağlantı -->

<head>

    <link rel="stylesheet" href="style.css">

</head>

Metin Stillendirme (Styling Text)

Web tasarımında okunabilirlik en önemli unsurdur. CSS ile metinlerin boyutunu, kalınlığını, yazı tipini ve satır boşluklarını tam yetkiyle yönetebiliriz.

Kod Tasarımı ve Uygulama:

/* style.css */

p {

    font-family: 'Helvetica', Arial, sans-serif; /* Yazı tipi ailesi */

    font-size: 18px;                             /* Yazı boyutu */

    font-weight: 400;                            /* Yazı kalınlığı (400=Normal, 700=Bold) */

    line-height: 1.6;                            /* Satırlar arası boşluk oranı */

    text-align: justify;                         /* Metni iki yana yaslama */

    text-transform: capitalize;                  /* Her kelimenin ilk harfini büyük yapma */

    letter-spacing: 0.5px;                       /* Harfler arası boşluk */

}

Seçicileri Birleştirme, Class ve ID Seçicileri (Combining Selectors, Class and ID Selectors)

HTML elemanlarını hedef alırken nokta atışı yapabilmek için farklı seçici türlerini ve bunları birleştirmeyi bilmemiz gerekir.

1. Element Seçici:

Doğrudan etiket adını hedef alır. Sayfadaki tüm o etiketleri etkiler.

h2 { color: darkred; }

2. Class (Sınıf) Seçici (Önemli):

Aynı stilleri birden fazla elemana uygulamak istediğimizde kullanılır. HTML'de class="..." tanımlanır, CSS'te başına nokta (.) konularak çağrılır.

<!-- HTML -->

<div class="card-box">Kart İçeriği</div>

<div class="card-box">Başka Bir Kart</div>

/* CSS */

.card-box {

    background-color: #f4f4f4;

    border: 1px solid #ddd;

}

3. ID Seçici:

Sayfada sadece tek bir benzersiz elemana özel stil vermek veya JavaScript ile yakalamak için kullanılır. HTML'de id="..." tanımlanır, CSS'te başına kare (#) konularak çağrılır.

<!-- HTML -->

<footer id="main-footer">Alt Bilgi</footer>

/* CSS */

#main-footer {

    background-color: #333;

    color: white;

}

4. Seçicileri Birleştirme (Kombinatörler):

Bir elemanın altındaki başka bir elemanı hedeflemek veya birden fazla seçiciye aynı stili vermek için kullanılır.

/* Gruplama: Hem h1 hem h2 hem de p elemanlarına aynı yazı tipini uygula */

h1, h2, p {

    font-family: sans-serif;

}

 

/* Torun (Descendant) Seçici: Sadece .article-container içindeki p etiketlerini etkile */

.article-container p {

    color: #555;

}

Renklerle Çalışmak (Working With Colors)

CSS'te renk tanımlamanın modern web tasarımında kullanılan 3 ana yöntemi vardır:

• Renk İsimleri: red, blue, crimson gibi hazır tarayıcı isimleri.
• Hex Kodları (#): 16'lık sayı sistemine dayanır. En yaygın kullanımdır. Örnek: #ff5733.
• RGB / RGBA: Kırmızı, Yeşil ve Mavi karışımıdır. RGBA modelindeki sondaki "A" (Alpha) değeri rengin şeffaflığını (0 ile 1 arası) belirler.

Kod Tasarımı ve Uygulama:

.card {

    color: #2c3e50; /* Koyu Gri-Mavi Hex Kodu */

    background-color: rgba(52, 152, 219, 0.2); /* %20 şeffaflıkta açık mavi background */

    border-color: rgb(46, 204, 113); /* Saf yeşil */

}

Pseudo-classes (Yalancı Sınıflar) ve Hiperlinklerin Stillendirilmesi

Elemanların belirli durumlarına (örneğin üzerine gelindiğinde, tıklandığında veya kaçıncı eleman olduğuna) stil vermek için Yalancı Sınıflar kullanılır. Bağlantı etiketleri (<a>) bunun en net örneğidir.

Kod Tasarımı ve Uygulama:

/* Linkin ilk, yalın hali */

a:link {

    color: #3498db;

    text-decoration: none; /* Alt çizgiyi kaldır */

}

 

/* Ziyaret edilmiş link durumu */

a:visited {

    color: #9b59b6;

}

 

/* Fare ile linkin üzerine gelindiğinde (Hover Durumu) */

a:hover {

    color: #2980b9;

    text-decoration: underline; /* Alt çizgiyi geri getir */

}

 

/* Linke tıklandığı an (Active Durumu) */

a:active {

    color: red;

}

 

/* Liste elemanlarından sadece İLKİNE stil vermek */

li:first-child {

    font-weight: bold;

}

 

/* Liste elemanlarından sadece SONUNCUSUNA stil vermek */

li:last-child {

    border-bottom: none;

}

Geliştirici Becerisi: Chrome DevTools Kullanımı (Using Chrome DevTools)

Bir web geliştiricinin en büyük silahı tarayıcı geliştirici araçlarıdır. Tarayıcıda boş bir yere sağ tıklayıp "İncele" (Inspect) dediğinizde açılan panelde şunları yapabilirsiniz:

1. Elements Paneli: HTML yapısını canlı olarak görebilir ve etiketleri geçici olarak değiştirebilirsiniz.
2. Styles Sekmesi: Elemanlara uygulanan CSS kodlarını canlı olarak kapatıp açabilir, yeni CSS özellikleri ekleyerek sayfadaki değişimi anlık simüle edebilirsiniz. Yazdığınız kodun neden çalışmadığını buradaki üstü çizili CSS kurallarından anlarsınız.

📐 BÖLÜM 4: Gelişmiş CSS Teorisi ve Kutu Modeli (CSS Box Model)

CSS Teorisi 1: Seçici Çakışmaları ve Öncelik Sıralaması (Specificity)

Tarayıcı, aynı HTML elemanına birden fazla yerden farklı stiller tanımlandığında hangisini uygulayacağına Öncelik Puanına (Specificity) bakarak karar verir.

Puanlama Hiyerarşisi (Zayıftan Güçlüye):

1. Evrensel Seçici (*): 0 Puan.
2. Element Seçici (p, h1): 1 Puan.
3. Class Seçici (.menu-item): 10 Puan.
4. ID Seçici (#main-header): 100 Puan.
5. Satır İçi (Inline) CSS (style="..."): 1000 Puan.

Eğer puanlar tamamen eşitse, CSS dosyasında en altta (en son) yazılan kod geçerli olur.

CSS Teorisi 2: Kalıtım ve Evrensel Seçici (Inheritance & The Universal Selector)

Bazı CSS özellikleri (özellikle yazı tipi, renk ve satır yükseklikleri gibi metin özellikleri) üst elemandan (Parent) alt elemana (Child) otomatik olarak miras kalır. Buna Kalıtım (Inheritance) denir. Genişlik, yükseklik, margin ve padding gibi yapısal özellikler ise asla miras kalmaz.

Kod Tasarımı ve Uygulama:

/* Evrensel Seçici: Sayfadaki istisnasız TÜM elemanları seçer */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box; /* İlerleyen maddede detaylandırılacak kritik kural */

}

 

/* Kalıtım Örneği: Body'e verilen yazı tipi altındaki tüm p, h1, span etiketlerine geçer */

body {

    font-family: 'Segoe UI', sans-serif;

    color: #333;

}

CSS Teorisi 3 & 4: CSS Kutu Modeli ve Kutu Türleri (The CSS Box Model & Types of Boxes)

Tarayıcı gözünde, web sayfasındaki her bir HTML elemanı dört katmandan oluşan dikdörtgen bir kutudur.

1. Content (İçerik): Yazının veya resmin kendisi.
2. Padding (İç Boşluk): İçerik ile sınır (border) arasındaki şeffaf boşluk.
3. Border (Kenarlık): Kutunun etrafını saran çizgi.
4. Margin (Dış Boşluk): Kutunun diğer dış kutularla arasındaki mesafe.

+-----------------------------------+

 

|             MARGIN                |

|    +-------------------------+    |

|    |         BORDER          |    |

|    |    +---------------+    |    |

|    |    |    PADDING    |    |    |

|    |    |   +-------+   |    |    |

|    |    |   |CONTENT|   |    |    |

|    |    |   +-------+   |    |    |

|    |    +---------------+    |    |

|    +-------------------------+    |

+-----------------------------------+

Kutu Türleri (Display Property):

• Block-level (Blok Elemanlar): <div>, <p>, <h1>, <section>. Sayfanın tüm satırını kaplarlar, yan yana gelemezler. Genişlik (width) ve yükseklik (height) alabilirler.
• Inline (Satır İçi Elemanlar): <span>, <a>, <strong>. Sadece içlerindeki metin kadar yer kaplarlar. Yan yana dizilebilirler. Genişlik ve yükseklik alamazlar! Üst ve alt margin değerlerini kabul etmezler.
• Inline-Block: Hem satır içi gibi yan yana dizilirler hem de blok elemanlar gibi genişlik, yükseklik, margin ve padding değerlerini kusursuzca alırlar.

Ölçülendirme, Boşluklar ve Sayfa Ortalama (Dimensions, Margins, Paddings and Centering)

Kutu modelini yönetirken değerleri tek tek (top, right, bottom, left) verebileceğimiz gibi Shorthand (Kısa Yazım) yöntemiyle de tanımlayabiliriz.

Kod Tasarımı ve Uygulama:

.container {

    width: 1200px;      /* Sabit genişlik */

    max-width: 95%;    /* Mobil uyumluluk için koruma bariyeri */

    height: auto;       /* İçeriğe göre dinamik yükseklik */

   

    /* Shorthand Saat Yönü Kuralı: Üst | Sağ | Alt | Sol */

    padding: 20px 15px 20px 15px;

   

    /* Shorthand İkili Kural: Üst-Alt | Sağ-Sol */

    padding: 20px 15px;

 

    /* Sayfayı Yatayda Kusursuz Ortalamanın Formülü:

       Üst ve alt boşluğu serbest bırak, sağ ve solu tarayıcıya otomatik paylaştır. */

    margin: 40px auto;

   

    border: 2px solid #222;

}

CSS Teorisi 5: Mutlak Konumlandırma (Absolute Positioning)

Elemanları normal sayfa akışından kopararak, en yakın konumlandırılmış üst kapsayıcısına göre serbestçe piksel piksel yerleştirmek için kullanılır. Bir elemana absolute verebilmek için, onu saran kutuya relative verilmelidir.

Kod Tasarımı ve Uygulama:

/* Kapsayıcı Kutu */

.card-parent {

    position: relative; /* Kilit nokta: Yavru kutuya referans noktası olur */

    width: 300px;

    height: 400px;

    background-color: white;

}

 

/* Kartın sağ üst köşesine iğnelemek istediğimiz "İndirim" Rozeti */

.badge-child {

    position: absolute;

    top: 15px;      /* Yukarıdan 15px aşağıda */

    right: 15px;    /* Sağdan 15px içeride */

    background-color: red;

    color: white;

    padding: 5px 10px;

}

Pseudo-elements (Yalancı Elemanlar)

HTML'e fazladan etiket eklemeden, CSS aracılığıyla bir elemanın önüne (::before) veya arkasına (::after) hayali dekoratif kutular/tasarımlar eklememizi sağlar. Mutlaka bir content: ""; kuralı yazılmalıdır.

Kod Tasarımı ve Uygulama:

/* Başlıkların altına dekoratif kırmızı bir çizgi ekleme uygulaması */

.main-title {

    position: relative;

    padding-bottom: 10px;

}

 

.main-title::after {

    content: ""; /* Boş da olsa yazılması zorunludur */

    position: absolute;

    bottom: 0;

    left: 0;

    width: 60px;

    height: 4px;

    background-color: red; /* Kırmızı şerit çizgi */

}

Geliştirici Becerileri: Arama Motorlarını Kullanma ve Debugging

• Googling & Dökümantasyon: Kimse tüm CSS kodlarını ezbere bilmez. Bir hata oluştuğunda veya bir tasarımın nasıl yapılacağı bilinmediğinde en doğru dökümantasyon adresi MDN Web Docs'tur. Arama yaparken css flexbox mdn veya css center div stackoverflow gibi nokta atışı kalıplar kullanılır.
• Hata Ayıklama (Debugging): Yazdığınız CSS çalışmıyorsa DevTools'u açın. İlgili elemana tıklayın. Stillere bakın; eğer bir stilin yanında sarı ünlem işareti varsa yazım hatası (syntax error), üzerinde çizgi varsa başka bir güçlü kod tarafından ezildiği anlamına gelir.

🏆 CSS UYGULAMA PROJESİ (Challenge #1, #2 ve #3 Birleşimi)

Bölüm 2'de yazdığımız HTML yapısını, az önce öğrendiğimiz tüm CSS kurallarıyla (Box model, Kalıtım, Seçiciler, Yalancı elemanlar ve Konumlandırma) profesyonel, modern bir Blog Kart Modülüne dönüştürüyoruz.

Uygulamanın Tam CSS Kodları:

/* 1. Evrensel Ayarlar ve Sıfırlama */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: #f0f3f5;

    color: #333;

    line-height: 1.6;

    padding: 40px 20px;

}

 

/* 2. Ana Kart Kapsayıcısı */

.blog-card {

    position: relative; /* Badge konumlandırması için */

    background-color: #ffffff;

    max-width: 450px;

    margin: 0 auto; /* Sayfada ortalama */

    border-radius: 12px; /* Köşe yumuşatma */

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Yumuşak gölge */

    overflow: hidden; /* Taşmaları engelle */

}

 

/* 3. Görsel Alanı */

.card-image {

    width: 100%;

    height: 250px;

    object-fit: cover; /* Resmin oranını bozmadan kutuya sığdırır */

    display: block;

}

 

/* 4. Mutlak Konumlandırılmış Rozet (Badge) */

.category-badge {

    position: absolute;

    top: 20px;

    right: 20px;

    background-color: #e74c3c;

    color: white;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    padding: 6px 14px;

    border-radius: 20px;

    letter-spacing: 1px;

}

 

/* 5. Kart İçerik Alanı */

.card-content {

    padding: 30px;

}

 

.card-title {

    font-size: 22px;

    color: #2c3e50;

    margin-bottom: 12px;

    position: relative;

    padding-bottom: 10px;

}

 

/* Başlığın altına dekoratif çizgi */

.card-title::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 3px;

    background-color: #3498db;

}

 

.card-text {

    color: #666;

    font-size: 15px;

    margin-bottom: 20px;

}

 

/* 6. Buton ve Link Ayrımı */

.read-more-btn {

    display: inline-block; /* Genişlik/boşluk alabilmesi için */

    background-color: #3498db;

    color: white !important; /* Renk kalıtımını ezmek için */

    text-decoration: none;

    padding: 10px 20px;

    border-radius: 6px;

    font-weight: 600;

    transition: background-color 0.3s ease; /* Yumuşak geçiş efekti */

}

 

/* Hover Efekti */

.read-more-btn:hover {

    background-color: #2980b9;

}

 

Harika! CSS'in temel taşlarını ve kutu modelini tamamen kavradığımıza göre, modern web geliştiriciliğinin en heyecan verici ve en çok kullanılan alanına geçiyoruz: Düzen Mimarlığı (Layouts: Floats, Flexbox, and CSS Grid Fundamentals).

Bu bölümde, web sayfalarını yan yana dizmenin eski ve zorlu yollarından başlayarak, günümüz dünyasını yöneten devrimsel tek boyutlu (Flexbox) ve iki boyutlu (CSS Grid) sistemleri satır satır, tüm detaylarıyla ve pratik uygulamalarıyla tasarlıyoruz.

📐 BÖLÜM 5: Düzen Tasarımı (Layouts)

Sayfa Düzeni Oluşturmanın 3 Yolu (The 3 Ways of Building Layouts)

Web tasarım tarihinde elemanları yan yana dizmek ve büyük web sayfaları inşa etmek için üç ana dönem ve yöntem olmuştur:

1. Floats: Aslında resimlerin etrafına yazı sarmak için üretilmiş, ancak geçmişte zorunluluktan sayfa düzeni yapmak için kullanılmış eski bir yöntemdir.
2. Flexbox (Flexible Box): Tek boyutlu (ya sadece satır ya sadece sütun) hizalama ve esnek düzenler için mükemmel modern yöntemdir.
3. CSS Grid: İki boyutlu (aynı anda hem satır hem sütun) büyük ve karmaşık sayfa ızgaraları oluşturmak için tasarlanmış en gelişmiş modern yöntemdir.

Eski Nesil Düzen: Floats ve Temizleme (Using Floats & Clearing Floats)

Bir elemana float: left veya float: right dendiğinde, o eleman normal sayfa akışından sola veya sağa doğru kayar. Yanındaki elemanlar onun etrafını sarar.

En Büyük Sorun (Collapse): Kapsayıcı kutu, içerisindeki float uygulanmış elemanların yüksekliğini algılayamaz ve yüksekliği 0 piksele düşer (çökme yaşanır). Bunun çözülmesi için float akışının temizlenmesi (clearing) gerekir.

Kod Tasarımı ve Uygulama (Eski Düzen Yapısı):

/* clearfix yöntemi: Çökmeyi önlemek için kapsayıcıya uygulanır */

.clearfix::after {

    content: "";

    display: block;

    clear: both; /* Sola ve sağa kaydırılmış tüm float akışını sıfırlar */

}

 

.column-left {

    float: left;

    width: 30%;

    background-color: #f4f4f4;

}

 

.column-right {

    float: right;

    width: 65%;

    background-color: #e0e0e0;

}

Kutuların Gizli Kahramanı: box-sizing: border-box

Eski sistemlerde bir kutuya width: 50% verip üzerine padding: 20px eklediğinizde, kutunun gerçek genişliği %50 + 40px olurdu ve yan yana durması gereken kutular aşağı patlardı. box-sizing: border-box; kuralı tarayıcıya şunu söyler: "Verdiğim genişlik değerinin içine padding ve border'ı da dahil et, kutuyu dışarı doğru büyütme!" Evrensel seçicide (*) kullanılmasının sebebi budur.

Modern Devrim: Flexbox Temelleri (Introduction to Flexbox)

Flexbox, elemanları tek bir eksen üzerinde (yatayda veya dikeyde) zahmetsizce hizalamak, dağıtmak ve sıralamak için kullanılır. Bir kutuyu flex yapmak için kapsayıcısına display: flex; yazılır.

Flexbox Ekseni Mantığı:

• Main Axis (Ana Eksen): Varsayılan olarak soldan sağa doğrudur.
• Cross Axis (Kesişen Eksen): Varsayılan olarak yukarıdan aşağıya doğrudur.

En Önemli Flexbox Özellikleri ve Görevleri:

• flex-direction: Ana eksenin yönünü belirler. row (yan yana) veya column (alt alta).
• justify-content: Elemanları Ana Eksen (Yatay) üzerinde hizalar.
• align-items: Elemanları Kesişen Eksen (Dikey) üzerinde hizalar.
• gap: Flex elemanlarının arasına, margin kullanmadan eşit boşluklar bırakır.

Kod Tasarımı ve Uygulama:

.flex-container {

    display: flex;

    flex-direction: row;            /* Elemanları yan yana diz */

    justify-content: space-between; /* Elemanların arasına eşit boşluk dağıt, köşelere yasla */

    align-items: center;            /* Elemanları dikeyde tam ortala */

    gap: 20px;                      /* Her eleman arasına 20px boşluk bırak */

    background-color: #ffffff;

    padding: 20px;

}

 

/* Kapsayıcının içindeki esnek yavrular (Flex Items) */

.flex-item {

    /* flex property: grow (büyüme), shrink (küçülme) ve basis (başlangıç genişliği) shorthand'idir. */

    flex: 1; /* Tüm elemanlar boş alanı eşit olarak paylaşır ve birlikte büyür */

    background-color: #3498db;

    color: white;

    padding: 15px;

}

İki Boyutlu Güç: CSS Grid Temelleri (Introduction to CSS Grid)

Flexbox tek satırda harikalar yaratırken, tüm sayfa şablonunu (Grid satırları ve sütunları) aynı anda yönetmek için CSS Grid kullanılır. Kapsayıcıya display: grid; verilerek aktifleştirilir.

En Önemli Grid Özellikleri:

• grid-template-columns: Kaç sütun olacağını ve bunların genişliklerini belirler. fr (fractional unit) birimi, kalan boşluğun paylaştırılmasını sağlar.
• grid-template-rows: Satırların yüksekliklerini ayarlar.
• grid-column / grid-row: Belirli bir grid elemanının kaç sütun veya satır kaplayacağını (spanning) kontrol eder.

Kod Tasarımı ve Uygulama:

.grid-container {

    display: grid;

    /* repeat(3, 1fr) formülü: Yan yana eşit genişlikte 3 sütun oluşturur (1fr 1fr 1fr) */

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: auto auto; /* İki satır, yükseklik içeriğe göre */

    gap: 30px; /* Satır ve sütunlar arası boşluk */

}

 

/* Özel bir grid elemanının yerini değiştirme ve genişletme */

.special-grid-item {

    /* 1. sütundan başla, 3. sütunun başına kadar uzan (Yani 2 sütunluk yer kapla) */

    grid-column: 1 / 3;

    background-color: #2ecc71;

}

🏆 DÜZEN MİMARLIĞI UYGULAMA PROJESİ (Challenge #1, #2 ve #3 Birleşimi)

Şu ana kadar öğrendiğimiz Flexbox ve CSS Grid güçlerini birleştirerek, gerçek dünya projelerinde sıkça karşımıza çıkan 3 Sütunlu Özellikler Bölümü (Features Section) ve Gelişmiş Navigasyon Barı tasarımını yapıyoruz.

HTML Yapısı:

<div class="layout-wrapper">

    <!-- FLEXBOX UYGULAMASI: Navigasyon Barı -->

    <header class="main-header">

        <div class="logo">KODAKADEMİ</div>

        <nav class="nav-menu">

            <a href="#">Kurslar</a>

            <a href="#">Hakkımızda</a>

            <a href="#">Topluluk</a>

            <a href="#" class="cta-nav-btn">Başla</a>

        </nav>

    </header>

 

    <!-- CSS GRID UYGULAMASI: 3 Sütunlu Kart Düzeni -->

    <main class="services-grid">

        <div class="service-card">

            <h3>Frontend Geliştirme</h3>

            <p>HTML5, CSS3, Flexbox ve Grid mimarileriyle arayüz tasarlayın.</p>

        </div>

        <div class="service-card special-card">

            <h3>UI/UX Tasarım Çerçevesi</h3>

            <p>Tipografi, renk teorisi ve kullanıcı deneyimi kurallarını projelerinize entegre edin.</p>

        </div>

        <div class="service-card">

            <h3>Yayınlama ve Optimizasyon</h3>

            <p>Netlify entegrasyonu, performans testleri ve Lighthouse analizleri yapın.</p>

        </div>

    </main>

</div>

CSS Tasarımı:

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

body {

    font-family: 'Segoe UI', sans-serif;

    background-color: #f9fafb;

    padding: 20px;

}

 

.layout-wrapper {

    max-width: 1200px;

    margin: 0 auto;

}

 

/* --- FLEXBOX NAV BAR TASARIMI --- */

.main-header {

    display: flex;

    justify-content: space-between; /* Logoyu sola, menüyü sağa yasla */

    align-items: center;            /* Dikeyde hizala */

    background-color: #ffffff;

    padding: 15px 30px;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

    margin-bottom: 40px;

}

 

.logo {

    font-weight: 800;

    letter-spacing: 1px;

    color: #1f2937;

}

 

.nav-menu {

    display: flex;

    align-items: center;

    gap: 25px; /* Menü elemanları arasındaki boşluk */

}

 

.nav-menu a {

    text-decoration: none;

    color: #4b5563;

    font-weight: 500;

}

 

.cta-nav-btn {

    background-color: #4f46e5;

    color: white !important;

    padding: 8px 18px;

    border-radius: 6px;

}

 

/* --- CSS GRID KART DÜZENİ TASARIMI --- */

.services-grid {

    display: grid;

    /* Ekran genişliğine göre 3 eşit sütun oluşturur */

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

 

.service-card {

    background-color: #ffffff;

    padding: 30px;

    border-radius: 10px;

    border: 1px solid #e5e7eb;

    box-shadow: 0 4px 6px rgba(0,0,0,0.02);

}

 

.service-card h3 {

    color: #1f2937;

    margin-bottom: 12px;

}

 

.service-card p {

    color: #6b7280;

    font-size: 15px;

}

 

/* Grid sistemi içinde öne çıkan özel kart stili */

.special-card {

    border-top: 4px solid #4f46e5;

    box-shadow: 0 10px 15px rgba(79, 70, 229, 0.1);

}

 

Harika! Kod yazma mekaniklerini (HTML ve CSS) ve sayfa düzeni mimarisini (Flexbox ve CSS Grid) tamamen kavradık. Şimdi, yazılan kodların amatörce değil, dünya standartlarında profesyonel bir ajans elinden çıkmış gibi görünmesini sağlayan en kritik modüle geçiyoruz: Web Tasarım Kuralları ve Görsel Çerçeve (Web Design Rules and Framework).

Bu bölümde; bir web sitesine ruh katan tasarım teorilerini, tipografiyi, renk psikolojisini, boşluk yönetimini ve kullanıcı deneyimini (UX) hiçbir detayı atlamadan, pratik formüllerle satır satır işliyoruz.

🎨 BÖLÜM 6: Web Tasarım Kuralları ve Görsel Çerçeve

Web Tasarım Kuralları 1: Tipografi ve Yazı Tipi Seçimi (Typography)

Yazı tipi, sitenizin karakterini ve ses tonunu belirler. Doğru tipografi yönetimi için şu kurallara uyulmalıdır:

• Yazı Tipi Çeşitliliği: Bir web sitesinde en fazla 2 farklı yazı tipi ailesi kullanılmalıdır (Biri başlıklar, diğeri gövde metinleri için). Genelde okunabilirliği artırmak adına gövde metinlerinde Inter, Roboto veya Open Sans gibi sans-serif fontlar tercih edilir.
• Satır Yükseklikleri (line-height): Gövde metinlerinin sıkışık görünmemesi ve rahat okunması için satır yüksekliği, yazı boyutunun 1.5 ile 1.8 katı arasında olmalıdır.
• Zıtlık ve Kalınlık: Başlıklar (font-weight: 700) ve gövde metinleri (font-weight: 400) arasında gözle görülür bir kontrast olmalıdır.

Kod Tasarımı ve Uygulama:

body {

    font-family: 'Inter', sans-serif;

    font-size: 16px;

    line-height: 1.6; /* 16px * 1.6 = 25.6px satır yüksekliği */

    color: #333333;

}

 

h1, h2, h3 {

    font-family: 'Poppins', sans-serif;

    font-weight: 700;

    color: #111111;

    letter-spacing: -0.5px; /* Başlıkları daha toplu ve şık gösterir */

}

Web Tasarım Kuralları 2: Renk Teorisi ve Palet Oluşturma (Colors)

Rastgele seçilen renkler sitenizin güvenilirliğini zedeler. Profesyonel bir renk paleti şu formüle dayanır:

• 60-30-10 Kuralı:
• %60 Baskın Renk: Genelde arka planlar ve geniş alanlar için nötr bir renk (Beyaz, açık gri veya çok koyu gri).
• %30 İkincil Renk: Metinler, kartlar ve bileşenler için yapısal bir renk (Koyu lacivert, antrasit).
• %10 Vurgu (Accent) Rengi: Kullanıcının tıklamasını istediğimiz butonlar, linkler ve önemli uyarılar için dikkat çekici bir renk (Turuncu, parlak mavi, yeşil).

Kod Tasarımı ve Uygulama (CSS Değişkenleri ile Palet Yönetimi):

:root {

    --primary-bg: #f8fafc;    /* %60 Baskın (Arka Plan) */

    --text-main: #1e293b;     /* %30 İkincil (Metin ve Yapı) */

    --accent-color: #ff6b6b;  /* %10 Vurgu (Butonlar / Aksiyonlar) */

}

 

body {

    background-color: var(--primary-bg);

    color: var(--text-main);

}

 

.cta-button {

    background-color: var(--accent-color);

    color: white;

}

Web Tasarım Kuralları 3 & 4: Görseller, İllüstrasyonlar ve İkonlar (Images & Icons)

• Görsel Seçimi: Sitede kullanılan fotoğraflar yüksek çözünürlüklü olmalı ancak webi yavaşlatmamalıdır (Optimizasyon şarttır). Görsellerin üzerine yazı geleceği zaman, yazının okunabilmesi için görselin üzerine karanlık bir katman (overlay) atılmalıdır.
• İkon Setleri: Projenizde FontAwesome, Phosphor Icons veya Heroicons gibi sadece tek bir ikon kütüphanesi seçin ve her yerde aynı stil dilini (çizgisel veya dolu ikonlar) kullanın.

Kod Tasarımı ve Uygulama (Görsel Üstü Karartma Katmanı):

.hero-image-container {

    position: relative;

    background-image: url('hero-bg.jpg');

    background-size: cover;

    height: 500px;

}

 

/* Yalancı eleman ile karartma perdesi oluşturma */

.hero-image-container::before {

    content: "";

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* %50 siyah şeffaf katman */

}

Web Tasarım Kuralları 5 & 6: Gölgeler ve Köşe Yumuşatma (Shadows & Border-radius)

Modern web tasarımı "düz" (flat) olmaktan çıkıp derinlik kazanan bir yapıya evrilmiştir.

• Yumuşak Gölgeler: Sert ve siyah gölgeler yerine, opaklığı çok düşük (rgba ile %5 veya %10) ve yayılımı geniş gölgeler profesyonel bir hava katar.
• Köşe Yumuşatma Tutarlılığı: Sitedeki kutuların, butonların ve resimlerin köşe kavisleri birbiriyle uyumlu olmalıdır (Örn: Butonlar 6px, Kartlar 12px).

Kod Tasarımı ve Uygulama:

.modern-card {

    border-radius: 12px;

    /* Profesyonel, gözü yormayan derinlik gölgesi */

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    background-color: #ffffff;

    padding: 24px;

}

Web Tasarım Kuralları 7 & 8: Negatif Alan (Boşluk) ve Görsel Hiyerarşi (Whitespace & Visual Hierarchy)

• Negatif Alan (Whitespace): Sitenizdeki elemanların etrafına bolca boşluk bırakmaktan korkmayın. Boşluk, kullanıcının gözünü dinlendirir ve onu doğrudan odaklanması gereken içeriğe yönlendirir. Bölümler arasında (<section>) en az 80px - 120px dikey boşluk bırakılmalıdır.
• Görsel Hiyerarşi: Sayfaya bakan bir kullanıcı, ilk olarak nereyi okuması gerektiğini font boyutu, rengi ve ağırlığı sayesinde saniyeler içinde anlamalıdır.

Web Tasarım Kuralları 9: Kullanıcı Deneyimi (UX) Esasları

Kullanıcı deneyimi, sitenin sadece güzel görünmesi değil, kolayca kullanılabilmesidir.

• Fitts Kanunu: Tıklanmasını istediğiniz butonlar (CTA), kullanıcının mouse veya parmağıyla kolayca erişebileceği büyüklükte (en az 44px yükseklikte) olmalıdır.
• Geri Bildirim: Bir butona tıklandığında veya üzerine gelindiğinde (hover), butonun renk değiştirmesi veya hafifçe yükselmesi gibi görsel tepkiler (transition) verilmelidir.

🏆 GÖRSEL TASARIM ÇERCEVESİ UYGULAMA PROJESİ (Bileşen ve Düzen Kalıpları)

Bu bölümde öğrendiğimiz tüm tasarım kurallarını (Tipografi, 60-30-10 renk paleti, yumuşak gölgeler, hiyerarşi ve UX tepkileri) uygulayarak sıfırdan lüks bir Fiyatlandırma Kartı Bileşeni (Pricing Component) inşa ediyoruz.

HTML Yapısı:

<section class="pricing-section">

    <div class="pricing-container">

        <!-- Görsel Hiyerarşi: Üst Başlıklar -->

        <span class="sub-title">Yatırım Planınız</span>

        <h2 class="section-title">Büyümek İçin Doğru Planı Seçin</h2>

       

        <!-- Profesyonel Fiyat Kartı -->

        <div class="pricing-card premium-plan">

            <span class="badge">En Popüler</span>

            <h3 class="plan-name">Profesyonel Paket</h3>

            <p class="plan-price">₺499<span>/aylık</span></p>

           

            <ul class="plan-features">

                <li><span class="icon">✓</span> Sınırsız Proje Yayını</li>

                <li><span class="icon">✓</span> 7/24 Öncelikli Canlı Destek</li>

                <li><span class="icon">✓</span> Gelişmiş Lighthouse Performans Analitiği</li>

                <li><span class="icon">✓</span> Özel Netlify Alan Adı Entegrasyonu</li>

            </ul>

           

            <a href="#" class="pricing-btn">Hemen Başla</a>

        </div>

    </div>

</section>

CSS Tasarımı:

/* Tasarım Kuralları Entegrasyonu */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

body {

    font-family: 'Inter', sans-serif;

    background-color: #f1f5f9; /* %60 Baskın Renk (Açık Gri) */

    color: #0f172a;            /* %30 İkincil Renk (Koyu Antrasit) */

    padding: 100px 20px;       /* Whitespace Uygulaması */

}

 

.pricing-container {

    max-width: 500px;

    margin: 0 auto;

    text-align: center;

}

 

/* Görsel Hiyerarşi Kurgusu */

.sub-title {

    color: #4f46e5; /* Vurgu tonu */

    font-weight: 700;

    text-transform: uppercase;

    font-size: 13px;

    letter-spacing: 1.5px;

    display: inline-block;

    margin-bottom: 8px;

}

 

.section-title {

    font-size: 32px;

    font-weight: 800;

    margin-bottom: 40px;

    letter-spacing: -0.5px;

}

 

/* Kart Tasarımı, Gölgeler ve Köşeler */

.pricing-card {

    background-color: #ffffff;

    border-radius: 16px; /* Yumuşak köşe */

    padding: 40px;

    text-align: left;

    position: relative;

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06); /* Ajans düzeyinde yumuşak gölge */

    border: 1px solid rgba(15, 23, 42, 0.04);

}

 

/* Öne Çıkarma Kart Dokunuşu */

.premium-plan {

    border: 2px solid #4f46e5;

}

 

.badge {

    position: absolute;

    top: -14px;

    right: 30px;

    background-color: #4f46e5; /* %10 Vurgu Rengi */

    color: white;

    font-size: 12px;

    font-weight: 700;

    padding: 6px 16px;

    border-radius: 20px;

}

 

.plan-name {

    font-size: 20px;

    color: #475569;

    margin-bottom: 12px;

}

 

.plan-price {

    font-size: 48px;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 30px;

}

 

.plan-price span {

    font-size: 16px;

    color: #64748b;

    font-weight: 400;

}

 

/* Liste Yapısı ve Boşluklar */

.plan-features {

    list-style: none;

    margin-bottom: 40px;

}

 

.plan-features li {

    font-size: 15px;

    color: #334155;

    margin-bottom: 16px;

    display: flex;

    align-items: center;

}

 

.plan-features .icon {

    color: #10b981; /* Başarı yeşili */

    font-weight: bold;

    margin-right: 12px;

}

 

/* UX Geri Bildirimli Buton Tasarımı (Fitts Kanunu Uyumlu) */

.pricing-btn {

    display: block;

    text-align: center;

    background-color: #4f46e5; /* Aksiyon Rengi */

    color: white;

    text-decoration: none;

    font-weight: 600;

    padding: 14px 24px; /* Geniş tıklama alanı */

    border-radius: 8px;

    transition: all 0.3s ease; /* Yumuşak UX geçişi */

}

 

/* Hover Etkileşimi */

.pricing-btn:hover {

    background-color: #3730a3;

    transform: translateY(-2px); /* Hafif yukarı sıçrama efekti */

    box-shadow: 0 8px 20px rgba(79, 72, 229, 0.2);

}

 

Harika! Tasarım kurallarını koda dökmeyi öğrendiğimize göre, şimdi modern web sitelerinde kullanıcıların karşısına çıkan en popüler ve profesyonel arayüz elemanlarını sıfırdan inşa edeceğimiz Bileşenler ve Düzen Kalıpları (Components and Layout Patterns) bölümüne geçiyoruz.

Müfredat doğrultusunda Akordeon (Accordion), Karusel (Carousel/Slider), Veri Tabloları (Table Components) ve web sitelerinin giriş yüzü olan Hero Section mimarilerini tüm HTML/CSS kodları ve çalışma mantıklarıyla birlikte satır satır tasarlıyoruz.

🛠️ BÖLÜM 7: Bileşenler ve Düzen Kalıpları (Components & Layout Patterns)

Web Tasarım Kuralları 10 - Parça 1: Elemanlar ve Bileşenler (Components)

Bir web sitesi tasarlanırken her sayfa sıfırdan çizilmez. Web arayüzü, tekrar kullanılabilir Bileşenlerin (Components) bir araya gelmesiyle oluşur. Şimdi bu bileşenleri en modern CSS teknikleriyle inşa edelim.

1. Akordeon Bileşeni Tasarımı (Building an Accordion Component)

Sıkça Sorulan Sorular (SSS) sayfalarında kullanılan, tıklandığında aşağı doğru açılan kompakt yapılara akordeon denir. Sayfa alanından inanılmaz tasarruf sağlar.

HTML Yapısı:

<div class="accordion">

    <!-- Aktif/Açık olan Akordeon Öğesi -->

    <div class="accordion-item open">

        <div class="accordion-header">

            <span class="number">01</span>

            <h3 class="title">Kurs materyallerini nasıl indirebilirim?</h3>

            <span class="icon">↓</span>

        </div>

        <div class="accordion-content">

            <p>Kursun ilk bölümünde yer alan "Kurs Materyallerini İndirme" dersindeki bağlantıları kullanarak tüm kaynak kodları, resimleri ve başlangıç dosyalarını bilgisayarınıza tek tıkla indirebilirsiniz.</p>

        </div>

    </div>

 

    <!-- Kapalı Akordeon Öğesi -->

    <div class="accordion-item">

        <div class="accordion-header">

            <span class="number">02</span>

            <h3 class="title">Hiç kodlama bilmeyen biri bu kursa katılabilir mi?</h3>

            <span class="icon">↓</span>

        </div>

        <div class="accordion-content">

            <p>Kesinlikle evet! Müfredatımız sıfırdan başlar ve sizi adım adım modern bir HTML/CSS geliştiricisi haline getirecek şekilde tasarlanmıştır.</p>

        </div>

    </div>

</div>

CSS Tasarımı:

.accordion {

    max-width: 600px;

    margin: 40px auto;

    display: flex;

    flex-direction: column;

    gap: 24px;

}

 

.accordion-item {

    background-color: #fff;

    border-radius: 8px;

    padding: 24px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    border-top: 4px solid transparent;

    transition: all 0.3s;

}

 

.accordion-header {

    display: flex;

    align-items: center;

    gap: 24px;

    cursor: pointer;

}

 

.accordion-item .number {

    font-size: 24px;

    font-weight: 700;

    color: #ced4da;

}

 

.accordion-item .title {

    font-size: 18px;

    font-weight: 600;

    color: #343a40;

    flex: 1; /* Başlığı orta alana yayar, ikonu sağa iter */

}

 

.accordion-item .icon {

    font-size: 20px;

    color: #4f46e5;

    transition: transform 0.3s;

}

 

/* Gizli İçerik Alanı */

.accordion-content {

    display: none;

    margin-top: 24px;

    padding-left: 52px; /* Numara hizasının boş bırakılması için */

    color: #6c757d;

    line-height: 1.6;

}

 

/* --- AKTİF/AÇIK DURUM STİLLERİ --- */

.accordion-item.open {

    border-top: 4px solid #4f46e5;

}

 

.accordion-item.open .number,

.accordion-item.open .title {

    color: #4f46e5;

}

 

.accordion-item.open .accordion-content {

    display: block; /* İçeriği göster */

}

 

.accordion-item.open .icon {

    transform: rotate(180deg); /* İkonu yukarı döndür */

}

2. Karusel (Slider) Bileşeni Tasarımı (Building a Carousel Component)

Kullanıcı yorumlarını (Testimonials) veya referansları yan yana kaydırarak göstermek için kullanılan dinamik vitrin bileşenidir.

HTML Yapısı:

<div class="carousel">

    <!-- Sol Değiştirme Butonu -->

    <button class="btn btn-left">&lt;</button>

   

    <!-- Aktif Yorum Kartı -->

    <div class="testimonial-slide">

        <img src="https://unsplash.com" alt="Öğrenci Resmi" class="user-img">

        <blockquote class="testimonial-text">

            "Bu kurs sayesinde hayatımda ilk defa sıfırdan bir web sitesi tasarlayıp yayına aldım. Flexbox ve Grid mantığını o kadar net anlattı ki, artık portfolyom için özgüvenle kod yazabiliyorum!"

        </blockquote>

        <p class="user-name">Elif Serter</p>

        <p class="user-job">Junior Frontend Developer</p>

    </div>

 

    <!-- Sağ Değiştirme Butonu -->

    <button class="btn btn-right">&gt;</button>

 

    <!-- Sayfalama Noktaları (Dots) -->

    <div class="dots">

        <button class="dot-item">&nbsp;</button>

        <button class="dot-item active">&nbsp;</button>

        <button class="dot-item">&nbsp;</button>

    </div>

</div>

CSS Tasarımı:

.carousel {

    max-width: 800px;

    margin: 50px auto;

    background-color: #4f46e5;

    color: white;

    border-radius: 12px;

    padding: 32px 80px; /* Butonlara yer açmak için sağ ve soldan geniş boşluk */

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}

 

.user-img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid white;

    margin-bottom: 24px;

}

 

.testimonial-text {

    font-size: 18px;

    font-style: italic;

    line-height: 1.7;

    margin-bottom: 16px;

}

 

.user-name {

    font-weight: 700;

    font-size: 16px;

}

 

.user-job {

    font-size: 14px;

    color: #c7d2fe;

}

 

/* Navigasyon Okları (Absolute Konumlandırma) */

.btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: white;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    font-weight: bold;

    color: #4f46e5;

    cursor: pointer;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

 

.btn-left { left: 20px; }

.btn-right { right: 20px; }

 

/* Noktalar (Dots) */

.dots {

    display: flex;

    gap: 12px;

    margin-top: 32px;

}

 

.dot-item {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #c7d2fe;

    border: none;

    cursor: pointer;

}

 

.dot-item.active {

    background-color: white;

    width: 24px; /* Aktif noktayı elips yaparak şıklaştırıyoruz */

    border-radius: 6px;

}

3. Profesyonel Veri Tablosu Bileşeni (Building a Table Component)

Fiyat kıyaslamaları, özellik listeleri veya ham verileri düzenli göstermek için semantik <table> mimarisi kullanılır.

HTML Yapısı:

<table class="data-table">

    <thead>

        <tr>

            <th>Paket Özelliği</th>

            <th>Başlangıç Plânı</th>

            <th>Profesyonel Paket</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Aylık Proje Yayını</td>

            <td>5 Proje</td>

            <td>Sınırsız Proje</td>

        </tr>

        <tr>

            <td>Depolama Alanı</td>

            <td>10 GB SSD</td>

            <td>100 GB SSD</td>

        </tr>

        <tr>

            <td>Öncelikli Destek</td>

            <td>E-posta ile</td>

            <td>7/24 Canlı Destek</td>

        </tr>

    </tbody>

</table>

CSS Tasarımı:

.data-table {

    width: 100%;

    max-width: 700px;

    margin: 40px auto;

    border-collapse: collapse; /* Kenarlıkların çift kat olmasını engeller */

    font-size: 16px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.02);

    border-radius: 8px;

    overflow: hidden;

}

 

.data-table th,

.data-table td {

    padding: 16px 24px;

    text-align: left;

}

 

.data-table th {

    background-color: #1e293b;

    color: white;

    font-weight: 600;

}

 

.data-table td {

    color: #475569;

    border-bottom: 1px solid #e2e8f0;

}

 

/* Zebra Çizgileri Efekti: Çift sayıdaki satırların arka planını boyar */

.data-table tbody tr:nth-child(even) {

    background-color: #f8fafc;

}

 

/* Satır Hover Efekti */

.data-table tbody tr:hover {

    background-color: #f1f5f9;

}

Web Tasarım Kuralları 10 - Parça 2: Düzen Kalıpları (Layout Patterns)

Bileşenlerimizi tek tek ürettikten sonra, bunları büyük sayfa bloklarına yerleştiririz. Web projelerinin en kritik düzen kalıbı Hero Section (Açılış/Giriş Ekranı) yapısıdır.

🚀 KAHRAMAN ALANI UYGULAMASI (Building a Hero Section)

Bir web sitesine girildiğinde kullanıcının karşısına çıkan, sitenin ne yaptığını özetleyen, büyük başlık ve ana aksiyon butonlarının (CTA) yer aldığı en üst devasa bölümdür.

HTML Yapısı:

<section class="hero-section">

    <div class="hero-container">

        <!-- Sol Taraf: Metin İçerikleri (Flex veya Grid ile yönetilir) -->

        <div class="hero-text-box">

            <h1 class="hero-title">Her Gün Sağlıklı ve Harika Yemekler Kapınızda</h1>

            <p class="hero-description">

                Yılın 365 günü sağlığınızı korumanız için tasarlanmış, beslenme uzmanları onaylı abonelik sistemimizle yemek yapma derdine son verin. Sizin için pişiriyor ve getiriyoruz.

            </p>

            <div class="hero-cta-box">

                <a href="#" class="btn-cta btn-full">Sağlıklı Beslenmeye Başla</a>

                <a href="#" class="btn-cta btn-outline">Daha Fazla Bilgi Edin &darr;</a>

            </div>

        </div>

       

        <!-- Sağ Taraf: Büyük Görsel -->

        <div class="hero-img-box">

            <img src="https://unsplash.com" alt="Taze ve sağlıklı yemek kasesi" class="hero-image">

        </div>

    </div>

</section>

CSS Tasarımı:

.hero-section {

    background-color: #fdf2e9; /* Hafif sıcak/turuncu arka plan */

    padding: 96px 0; /* Whitespace kuralı gereği geniş üst-alt boşluk */

}

 

.hero-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 32px;

   

    /* 2 Sütunlu CSS Grid Tasarımı */

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 96px;

    align-items: center; /* Sağ ve solu dikeyde eşitle */

}

 

.hero-title {

    font-size: 52px;

    font-weight: 800;

    line-height: 1.1;

    color: #333;

    margin-bottom: 32px;

    letter-spacing: -1px;

}

 

.hero-description {

    font-size: 20px;

    line-height: 1.6;

    color: #555;

    margin-bottom: 48px;

}

 

.hero-cta-box {

    display: flex;

    gap: 16px;

}

 

/* CTA Buton Tasarımları */

.btn-cta {

    display: inline-block;

    text-decoration: none;

    font-size: 18px;

    font-weight: 600;

    padding: 16px 32px;

    border-radius: 9px;

    transition: all 0.3s;

}

 

.btn-full {

    background-color: #e67e22; /* Ana Vurgu Rengi */

    color: white;

}

 

.btn-full:hover {

    background-color: #cf711f;

}

 

.btn-outline {

    background-color: white;

    color: #555;

    border: 3px solid white;

}

 

.btn-outline:hover {

    background-color: transparent;

    border: 3px solid #e67e22;

    color: #e67e22;

}

 

/* Sağ Taraf Görsel Alanı */

.hero-image {

    width: 100%;

    border-radius: 12px;

    box-shadow: 0 24px 48px rgba(0,0,0,0.08);

 

Harika! Temel bileşenleri ve düzen kalıplarını ustalıkla tamamladık. Şimdi, kurstaki tüm teorik ve pratik birikimin nihai birleşme noktası olan, 10 saatten fazla süren devasa web projesinin ilk aşamasına giriş yapıyoruz: Omnifood Projesi – Kurulum ve Masaüstü Sürümü (Omnifood Project – Setup and Desktop Version).

Bu bölümde; profesyonel bir web sitesinin hayata geçirilmesindeki 7 stratejik adımı, küresel ölçülendirme standartlarını (rem ve max-width mantığını) ve projenin masaüstü sürümüne ait tüm arayüz bölümlerini (Navigasyon, Izgara Sistemi, Yemekler, Kullanıcı Yorumları ve Fiyatlandırma) en ince detayına kadar kodlayarak tasarlıyoruz.

🏬 BÖLÜM 8: Omnifood Projesi – Planlama, Kurulum ve Masaüstü Sürümü

Harika Bir Web Sitesi İçin 7 Adım (The 7 Steps to a Great Website)

Profesyonel bir geliştirici, tasarıma doğrudan kod yazarak başlamaz. Müfredatta uygulanan evrensel süreç şu 7 adımdan oluşur:

1. Tanımlama (Define): Sitenin amacını, hedef kitlesini ve vermesi gereken mesajı netleştirme.
2. Planlama (Plan): Sayfa yapısını, hangi bölümlerin (section) olacağını ve içerik haritasını çıkarma.
3. Taslak Çizim (Sketch): Kağıt üzerinde veya dijital araçlarla ilk kaba yerleşim fikirlerini (wireframe) oluşturma.
4. Tasarım (Design): Renk paletini, tipografiyi, boşlukları ve görsel materyalleri kural setine göre belirleme.
5. Geliştirme (Develop): Temiz, semantik, erişilebilir HTML ve modern CSS (Flexbox/Grid) kullanarak kodlama.
6. Test Etme (Test): Tarayıcı uyumluluğu, performans analizleri (Lighthouse) ve link kontrolleri yapma.
7. Yayınlama (Optimize & Deploy): Görselleri optimize ederek siteyi Netlify gibi platformlar üzerinden dünyaya açma.

Responsive Ölçekleme Esasları: rem ve max-width Mekanizması

Responsive (mobil uyumlu) tasarımların temelini atan en kritik kural, sabit piksel (px) değerleri yerine esnek ölçü birimleri kullanmaktır.

• rem Birimi: Tarayıcının varsayılan kök yazı boyutuna (genelde 16px) bağlı katmandır. 1rem = 16px demektir. CSS'te kök boyutu %62.5 yaparak 1rem = 10px eşitliğine çekeriz. Böylece 2.4rem yazmak 24px anlamına gelir ve ekran küçüldüğünde sadece kök boyutu değiştirerek tüm siteyi tek hamlede ölçekleyebiliriz.
• max-width Güvencesi: Geniş kutularda width: 1200px kullanırsanız, ekran 1200 pikselden küçük olduğunda yatay kaydırma çubuğu (kayma hatası) çıkar. Bunun yerine max-width: 1200px ve width: 100% kullanılarak kutunun ekrandan taşması önlenir.

Proje Başlangıç Kurulum Kodları:

/* style.css - Global Kurulum */

html {

    /* 16px değerinin %62.5'i 10px yapar. 1rem = 10px formülü aktiftir. */

    font-size: 62.5%;

    box-sizing: border-box;

}

 

* {

    margin: 0;

    padding: 0;

    box-sizing: inherit;

}

 

body {

    font-family: "Rubik", sans-serif;

    line-height: 1;

    font-weight: 400;

    color: #444;

    background-color: #fdf2e9;

}

Reusable (Yeniden Kullanılabilir) Izgara Sistemi (Setting Up a Reusable Grid)

Proje boyunca her bölümde sürekli 2'li, 3'lü veya 4'lü sütunlar kullanacağız. Bunları her seferinde tekrar yazmamak için küresel yardımcı grid sınıfları oluşturuyoruz.

/* Yeniden Kullanılabilir Grid Altyapısı */

.grid {

    display: grid;

    column-gap: 6.4rem; /* 64px Sütun Boşluğu */

    row-gap: 9.6rem;    /* 96px Satır Boşluğu */

}

 

/* Sayfayı ortalayan ve taşmayı engelleyen ana kapsayıcı */

.container {

    max-width: 120rem; /* 1200px */

    margin: 0 auto;

    padding: 0 3.2rem;

}

 

/* Sütun Çeşitleri */

.grid--2-cols { grid-template-columns: repeat(2, 1fr); }

.grid--3-cols { grid-template-columns: repeat(3, 1fr); }

.grid--4-cols { grid-template-columns: repeat(4, 1fr); }

Omnifood Projesi Masaüstü Sürüm Mimari Tasarımı

Aşağıda, Omnifood projesinin masaüstü görünümünün tüm iskelet bölümlerini içeren HTML yapısı ve bu bölümleri kusursuz şekilde stillendiren CSS kod mimarisi yer almaktadır.

HTML Yapısı (index.html):

<!-- Üst Navigasyon ve Header Bölümü -->

<header class="header">

    <a href="#">

        <span class="logo">OMNIFOOD</span>

    </a>

    <nav class="main-nav">

        <ul class="main-nav-list">

            <li><a class="main-nav-link" href="#how">Nasıl Çalışır?</a></li>

            <li><a class="main-nav-link" href="#meals">Yemekler</a></li>

            <li><a class="main-nav-link" href="#testimonials">Yorumlar</a></li>

            <li><a class="main-nav-link" href="#pricing">Fiyatlandırma</a></li>

            <li><a class="main-nav-link nav-cta" href="#cta">Ücretsiz Dene</a></li>

        </ul>

    </nav>

</header>

 

<main>

    <!-- Nasıl Çalışır Bölümü (How It Works) -->

    <section class="section-how" id="how">

        <div class="container">

            <span class="subheading">Uygulama Adımları</span>

            <h2 class="heading-secondary">3 Basit Adımda Sağlığınız Kontrol Altında</h2>

        </div>

 

        <div class="container grid grid--2-cols">

            <!-- Adım 01 Metin -->

            <div class="step-text-box">

                <p class="step-number">01</p>

                <h3 class="heading-tertiary">Neleri sevdiğinizi (ve neleri sevmediğinizi) bize söyleyin</h3>

                <p class="step-description">Yılın her günü beslenme uzmanlarımız ve şeflerimiz sizin için çalışarak kişiselleştirilmiş haftalık yemek planları hazırlar.</p>

            </div>

            <!-- Adım 01 Görsel -->

            <div class="step-img-box">

                <img src="https://unsplash.com" class="step-img" alt="Yemek seçimi yapan kullanıcı">

            </div>

        </div>

    </section>

 

    <!-- Yemekler Bölümü (Meals Section) -->

    <section class="section-meals" id="meals">

        <div class="container text-center">

            <span class="subheading">Yemek Seçenekleri</span>

            <h2 class="heading-secondary">Şeflerimizin Hazırladığı Popüler Tarifler</h2>

        </div>

 

        <div class="container grid grid--3-cols">

            <!-- Yemek Kartı 01 -->

            <div class="meal-card">

                <img src="https://unsplash.com" class="meal-img" alt="Avokado Salatası">

                <div class="meal-content">

                    <span class="tag tag--vegetarian">Vejetaryen</span>

                    <p class="meal-title">Avokado ve Yumurtalı Salata</p>

                    <ul class="meal-attributes">

                        <li class="meal-attribute"><strong>400</strong> Kalori</li>

                        <li class="meal-attribute">NutriScore &reg; <strong>92</strong></li>

                        <li class="meal-attribute"><strong>4.8</strong> Derecelendirme (412)</li>

                    </ul>

                </div>

            </div>

 

            <!-- Yemek Kartı 02 -->

            <div class="meal-card">

                <img src="https://unsplash.com" class="meal-img" alt="Diyet Pizza">

                <div class="meal-content">

                    <span class="tag tag--vegan">Vegan</span>

                    <span class="tag tag--paleo">Paleo</span>

                    <p class="meal-title">Kinoa Tabanlı Sebzeli Pizza</p>

                    <ul class="meal-attributes">

                        <li class="meal-attribute"><strong>550</strong> Kalori</li>

                        <li class="meal-attribute">NutriScore &reg; <strong>89</strong></li>

                        <li class="meal-attribute"><strong>4.9</strong> Derecelendirme (540)</li>

                    </ul>

                </div>

            </div>

 

            <!-- Diyet Listesi Kategorileri -->

            <div class="diets-box">

                <h3 class="heading-tertiary">Her Diyete Uygun Çözümler:</h3>

                <ul class="list">

                    <li>✓ Glutensiz Diyetler</li>

                    <li>✓ Ketojenik Beslenme</li>

                    <li>✓ Laktozsuz Seçenekler</li>

                    <li>✓ Yüksek Proteinli Menüler</li>

                </ul>

            </div>

        </div>

    </section>

 

    <!-- Kullanıcı Yorumları Bölümü (Testimonials) -->

    <section class="section-testimonials" id="testimonials">

        <div class="testimonials-container">

            <span class="subheading">Kullanıcı Deneyimleri</span>

            <h2 class="heading-secondary">Bir Kez Deneyen Bir Daha Bırakamıyor</h2>

 

            <div class="testimonials grid grid--2-cols">

                <div class="testimonial">

                    <blockquote class="testimonial-text">"Omnifood kelimenin tam anlamıyla hayatımı kurtardı! Artık yemek düşünmek veya hazırlamak zorunda değilim. Hem sağlıklı besleniyorum hem de zaman kazanıyorum."</blockquote>

                    <p class="testimonial-name">&mdash; Can Tekin</p>

                </div>

                <div class="testimonial">

                    <blockquote class="testimonial-text">"Beslenme uzmanlarının onayından geçmiş yemeklerin bu kadar lezzetli olabileceğini hiç tahmin etmezdim. Herkese şiddetle tavsiye ederim!"</blockquote>

                    <p class="testimonial-name">&mdash; Melis Aksoy</p>

                </div>

            </div>

        </div>

       

        <!-- Sağ Taraf Galeri Görselleri Grid Yapısı -->

        <div class="gallery">

            <figure class="gallery-item"><img src="https://unsplash.com" alt="Yemek fotoğrafı 1"></figure>

            <figure class="gallery-item"><img src="https://unsplash.com" alt="Yemek fotoğrafı 2"></figure>

            <figure class="gallery-item"><img src="https://unsplash.com" alt="Yemek fotoğrafı 3"></figure>

            <figure class="gallery-item"><img src="https://unsplash.com" alt="Yemek fotoğrafı 4"></figure>

        </div>

    </section>

</main>

CSS Tasarımı (style.css):

/* --- HEADER & NAVİGASYON TASARIMI --- */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #fdf2e9;

    height: 9.6rem; /* 96px */

    padding: 0 4.8rem;

}

 

.logo {

    font-size: 2.2rem;

    font-weight: 900;

    color: #e67e22;

    letter-spacing: 2px;

}

 

.main-nav-list {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 3.2rem;

}

 

.main-nav-link:link,

.main-nav-link:visited {

    text-decoration: none;

    color: #333;

    font-weight: 500;

    font-size: 1.8rem;

    transition: all 0.3s;

}

 

.main-nav-link:hover,

.main-nav-link:active {

    color: #cf711f;

}

 

/* Aksiyon (CTA) Navigasyon Butonu */

.main-nav-link.nav-cta:link,

.main-nav-link.nav-cta:visited {

    padding: 1.2rem 2.4rem;

    border-radius: 9px;

    color: white;

    background-color: #e67e22;

}

 

.main-nav-link.nav-cta:hover,

.main-nav-link.nav-cta:active {

    background-color: #cf711f;

}

 

/* --- ORTAK BAŞLIK VE METİN TASARIMLARI --- */

.subheading {

    display: block;

    font-size: 1.6rem;

    font-weight: 600;

    color: #cf711f;

    text-transform: uppercase;

    letter-spacing: 0.75px;

    margin-bottom: 1.6rem;

}

 

.heading-secondary {

    font-size: 4.4rem;

    line-height: 1.2;

    font-weight: 700;

    color: #333;

    margin-bottom: 9.6rem;

}

 

.heading-tertiary {

    font-size: 3.0rem;

    line-height: 1.2;

    font-weight: 700;

    color: #333;

    margin-bottom: 3.2rem;

}

 

/* --- NASIL ÇALIŞIR BÖLÜMÜ (SECTION HOW) --- */

.section-how {

    padding: 9.6rem 0;

    background-color: #fff;

}

 

.step-number {

    font-size: 8.6rem;

    font-weight: 600;

    color: #ddd;

    margin-bottom: 1.2rem;

}

 

.step-description {

    font-size: 1.8rem;

    line-height: 1.8;

}

 

.step-img {

    width: 65%;

    border-radius: 20px;

    box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.06);

}

 

.step-img-box {

    display: flex;

    align-items: center;

    justify-content: center;

}

 

/* --- YEMEKLER BÖLÜMÜ (SECTION MEALS) --- */

.section-meals {

    padding: 9.6rem 0;

}

 

.meal-card {

    background-color: white;

    border-radius: 12px;

    overflow: hidden; /* Resmin keskin köşeleri taşmasın diye */

    box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.08);

    transition: all 0.4s;

}

 

.meal-card:hover {

    transform: translateY(-1.2rem);

    box-shadow: 0 3.2rem 6.4rem rgba(0,0,0,0.06);

}

 

.meal-img {

    width: 100%;

    height: 24rem;

    object-fit: cover;

}

 

.meal-content {

    padding: 3.2rem 4.8rem 4.8rem 4.8rem;

}

 

.tag {

    display: inline-block;

    padding: 0.4rem 0.8rem;

    font-size: 1.2rem;

    font-weight: 600;

    text-transform: uppercase;

    color: #fff;

    border-radius: 100px;

    margin-bottom: 1.2rem;

}

 

.tag--vegetarian { background-color: #51cf66; }

.tag--vegan { background-color: #94d82d; }

.tag--paleo { background-color: #ffd43b; color: #333; }

 

.meal-title {

    font-size: 2.4rem;

    font-weight: 600;

    color: #333;

    margin-bottom: 3.2rem;

}

 

.meal-attributes {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 2.0rem;

    font-size: 1.8rem;

}

 

.list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 1.6rem;

    font-size: 1.8rem;

}

 

/* --- KULLANICI YORUMLARI & GALERİ GRİD BÖLÜMÜ --- */

.section-testimonials {

    background-color: #fdf2e9;

    display: grid;

    grid-template-columns: 55fr 45fr; /* Sol ve sağ asimetrik grid dengesi */

    align-items: center;

}

 

.testimonials-container {

    padding: 9.6rem;

}

 

.testimonial-text {

    font-size: 1.8rem;

    line-height: 1.8;

    margin-bottom: 1.6rem;

}

 

.testimonial-name {

    font-size: 1.6rem;

    color: #777;

}

 

/* Sağ Galeri Grid Sistemi (2x2 Küp Düzenleme) */

.gallery {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.6rem;

    padding: 1.6rem;

}

 

.gallery-item {

    overflow: hidden;

    border-radius: 8px;

}

 

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s;

}

 

/* Profesyonel Hover Görsel Yakınlaşma Efekti */

.gallery-item img:hover {

    transform: scale(1.1);

}

 

Harika! Omnifood projemizin masaüstü sürümünü kusursuz bir şekilde ayağa kaldırdık. Şimdi projenin en kritik aşamalarından birine, yani yazılan tüm bu devasa arayüzün mobil cihazlarda, tabletlerde ve küçük ekranlı laptoplarda kusursuz görünmesini sağlayacak olan Responsive Web Tasarımı (Omnifood Project – Responsive Web Design) modülüne geçiyoruz.

Bu bölümde; Media Query mekanizmasının çalışma prensiplerini, ekran kırılma noktalarını (Breakpoints) profesyonelce seçmeyi ve en önemlisi CSS ile Açılır-Kapanır Mobil Navigasyon Menüsü (Hamburger Menu) yapımını satır satır tasarlıyoruz.

📱 BÖLÜM 9: Omnifood Projesi – Responsive Web Tasarımı

Media Query Mekanizması Nasıl Çalışır? (How Media Queries Work)

Media Query'ler, tarayıcının ekran genişliğini, yüksekliğini veya çözünürlüğünü kontrol ederek sadece belirlenen şartlar sağlandığında devreye giren CSS bloklarıdır.

• Mobil Öncelikli (Mobile-First): Tasarıma küçük ekrandan başlanıp min-width ile büyütülür.
• Masaüstü Öncelikli (Desktop-First): Tasarıma büyük ekrandan başlanıp max-width ile küçültülür. Omnifood projesi masaüstü odaklı başladığı için biz burada Desktop-First (max-width) yöntemini kullanacağız.

/* Örnek Şablon: Ekran genişliği 1200px ve altına düştüğünde buradaki kodlar çalışır */

@media (max-width: 120rem) {

    .container { max-width: 96rem; }

}

Profesyonel Kırılma Noktalarının Seçimi (How to Select Breakpoints)

Sektördeki en büyük amatörlük, kodları popüler telefon modellerinin (iPhone 15, Samsung S24 vb.) ekran piksellerine göre yazmaktır. Çünkü telefonlar sürekli değişir. Doğru yöntem, tasarımın bozulduğu yerde (kırılma noktası) müdahale etmektir.

Omnifood projesinde tüm ekranları kapsayacak küresel standart kırılma noktalarımız şunlardır:

• 1344px (84rem): Küçük Laptoplar ve Büyük Ekranlar
• 1200px (75rem): Yatay Tabletler (Landscape Tablets)
• 944px (59rem): Dikey Tabletler (Tablets) & Mobil Menü Geçişi
• 704px (44rem): Küçük Tabletler (Smaller Tablets)
• 544px (34rem): Akıllı Telefonlar (Phones)

Omnifood Projesi Mobil Uyum ve Responsive Kod Mimarisi

Bölüm 8'de yazdığımız masaüstü kodların altına ekleyeceğimiz, projeyi tamamen mobil uyumlu hale getiren Responsive CSS Mimarisini tasarlıyoruz.

CSS Tasarımı (responsive.css):

/* ==========================================================================

   1. KÜÇÜK LAPTOPLAR VE BÜYÜK EKRANLAR (Max-width: 1344px / 84rem)

   ========================================================================== */

@media (max-width: 84rem) {

    .container {

        max-width: 114rem;

    }

}

 

/* ==========================================================================

   2. YATAY TABLETLER - LANDSCAPE TABLETS (Max-width: 1200px / 75rem)

   ========================================================================== */

@media (max-width: 75rem) {

    html {

        /* Yazı boyutunu 9px'e düşürüyoruz (9px / 16px = %56.25)

           Böylece rem kullanan tüm margin, padding ve yazı boyutları otomatik küçülüyor! */

        font-size: 56.25%;

    }

   

    .grid {

        column-gap: 4.8rem;

        row-gap: 6.4rem;

    }

   

    .heading-secondary { font-size: 3.6rem; }

    .heading-tertiary { font-size: 2.4rem; }

}

 

/* ==========================================================================

   3. DİKEY TABLETLER VE MOBİL MENÜ GEÇİŞİ (Max-width: 944px / 59rem)

   ========================================================================== */

@media (max-width: 59rem) {

    html {

        font-size: 50%; /* 1rem = 8px değerine çekildi */

    }

 

    /* Üst menü düzenini bozup 3 sütunlu gridleri 2 sütuna çekiyoruz */

    .grid--3-cols {

        grid-template-columns: repeat(2, 1fr);

    }

   

    /* Diyet kategorisi kutusunu tüm satıra yayıp ortalıyoruz */

    .diets-box {

        grid-column: 1 / -1;

        justify-self: center;

    }

 

    .section-testimonials {

        grid-template-columns: 1fr; /* Kullanıcı yorumları ve galeri alt alta gelir */

    }

   

    .gallery {

        grid-template-columns: repeat(4, 1fr); /* Galeri resimleri yan yana 4 tane sıralanır */

    }

 

    /* ----- 🛠️ MOBİL NAVİGASYON İNŞASI ----- */

    /* Masaüstü menüsünü tamamen gizliyoruz */

    .main-nav {

        position: absolute;

        top: 0;

        left: 0;

        background-color: rgba(253, 242, 233, 0.95); /* Arkayı hafif gösteren şık perde */

        width: 100%;

        height: 100vh; /* Tüm ekranı kaplasın */

       

        display: flex;

        align-items: center;

        justify-content: center;

        transition: all 0.5s ease-in-out;

       

        /* CSS İLE GİZLEME FORMÜLÜ:

           display: none yerine bunları kullanıyoruz ki yumuşak geçiş (animation) yapabilelim */

        opacity: 0;

        pointer-events: none;

        visibility: hidden;

        transform: translateX(100%); /* Sağ tarafa fırlatıp gizle */

    }

 

    .main-nav-list {

        flex-direction: column; /* Linkleri alt alta diz */

        gap: 4.8rem;

    }

 

    .main-nav-link:link,

    .main-nav-link:visited {

        font-size: 3.0rem; /* Menü linklerini parmakla tıklanabilecek kadar büyüt */

    }

 

    /* ----- 🍔 HAMBURGER BUTONU TASARIMI ----- */

    /* HTML'e ekleyeceğimiz açma/kapama butonu */

    .btn-mobile-nav {

        display: block;

        background: none;

        border: none;

        cursor: pointer;

        z-index: 9999; /* Her şeyin üstünde dursun */

    }

 

    /* Hamburger İkon Çizgileri */

    .icon-mobile-nav {

        display: block;

        width: 4rem;

        height: 0.4rem;

        background-color: #333;

        position: relative;

        transition: all 0.3s;

    }

 

    /* İkonun alt ve üst hayali çizgilerini oluşturuyoruz */

    .icon-mobile-nav::before,

    .icon-mobile-nav::after {

        content: "";

        position: absolute;

        width: 4rem;

        height: 0.4rem;

        background-color: #333;

        left: 0;

        transition: all 0.3s;

    }

 

    .icon-mobile-nav::before { top: -1.2rem; } /* Üst çizgi */

    .icon-mobile-nav::after { top: 1.2rem; }   /* Alt çizgi */

 

    /* ----- 💥 AKTİF/AÇIK MOBİL MENÜ DURUMU ----- */

    /* JavaScript veya HTML kontrolü ile header sınıfına "nav-open" eklendiğinde: */

    .nav-open .main-nav {

        opacity: 1;

        pointer-events: auto;

        visibility: visible;

        transform: translateX(0); /* Menüyü ekrana geri getir */

    }

 

    /* Hamburger ikonunu "X" işaretine dönüştürme sihri */

    .nav-open .icon-mobile-nav {

        background-color: transparent; /* Orta çizgiyi yok et */

    }

   

    .nav-open .icon-mobile-nav::before {

        top: 0;

        transform: rotate(45deg); /* Üst çizgiyi kır */

    }

   

    .nav-open .icon-mobile-nav::after {

        top: 0;

        transform: rotate(-45deg); /* Alt çizgiyi ters kır */

    }

}

 

/* ==========================================================================

   4. KÜÇÜK TABLETLER (Max-width: 704px / 44rem)

   ========================================================================== */

@media (max-width: 44rem) {

    .grid--2-cols,

    .grid--3-cols,

    .grid--4-cols {

        grid-template-columns: 1fr; /* Tüm sütunları tek kolona düşürüyoruz */

    }

   

    .step-img-box:nth-child(2) {

        grid-row: 1; /* Mobilde resimlerin yazıların üstüne çıkması için sıralama ayarı */

    }

   

    .step-img {

        width: 50%;

        margin-bottom: 3.2rem;

    }

}

 

/* ==========================================================================

   5. AKILLI TELEFONLAR - PHONES (Max-width: 544px / 34rem)

   ========================================================================== */

@media (max-width: 34rem) {

    .gallery {

        grid-template-columns: repeat(2, 1fr); /* Küçük ekranlarda galeriyi 2x2 yapıyoruz */

    }

}

 

Harika! Mobil uyumluluk mimarimizi de tamamladığımıza göre, artık projemizin ve tüm eğitim müfredatının büyük finaline geçiyoruz: Omnifood Projesi – Efektler, Optimizasyonlar ve Yayına Alma (Omnifood Project – Effects, Optimizations and Deployment).

Bu son bölümde; sayfaya işlevsellik katacak kısa bir JavaScript dokunuşunu, kullanıcı deneyimini zirveye çıkaracak efektleri, performans testlerini ve projemizi Netlify üzerinde dünya çapında canlıya alma adımlarını satır satır tasarlayıp tamamlıyoruz.

🚀 BÖLÜM 10: Efektler, Optimizasyonlar ve Yayına Alma

JavaScript ile Mobil Menüyü Çalıştırmak (Making the Mobile Navigation Work)

Bir önceki bölümde CSS ile hazırladığımız .nav-open sınıfını, hamburger butonuna tıklandığı an HTML iskeletimize dinamik olarak ekleyip çıkarmak için tarayıcının yerleşik dilini (JavaScript) kullanıyoruz.

Kod Tasarımı ve Uygulama (script.js):

// 1. Elemanları Seçme

const btnNavEl = document.querySelector(".btn-mobile-nav");

const headerEl = document.querySelector(".header");

 

// 2. Tıklama Olayını (Event Listener) Dinleme

btnNavEl.addEventListener("click", function () {

    // toggle özelliği: nav-open sınıfı varsa siler, yoksa ekler

    headerEl.classList.toggle("nav-open");

});

Yumuşak Kaydırma Efekti (Implementing Smooth Scrolling)

Kullanıcı menüdeki linklere (Örn: "Yemekler") tıkladığında sayfanın küt diye değil, yumuşak bir şekilde aşağı doğru kayması modern UX için zorunludur.

Kod Tasarımı ve Uygulama:

Bunun için saf CSS kodu (html { scroll-behavior: smooth; }) kullanılabilir. Ancak eski tarayıcılar ve bazı mobil sürümlerde tam kararlılık sağlamak için JavaScript ile bağlantıları yakalamak profesyonel yöntemdir:

const allLinks = document.querySelectorAll("a:link");

 

allLinks.forEach(function (link) {

    link.addEventListener("click", function (e) {

        e.preventDefault(); // Tarayıcının varsayılan küt atlama davranışını engelle

        const href = link.getAttribute("href");

 

        // Sayfa tepesine pürüzsüz kaydırma (# linki için)

        if (href === "#") window.scrollTo({ top: 0, behavior: "smooth" });

 

        // Belirli bir ID'ye sahip bölüme pürüzsüz kaydırma

        if (href !== "#" && href.startsWith("#")) {

            const sectionEl = document.querySelector(href);

            sectionEl.scrollIntoView({ behavior: "smooth" });

        }

 

        // Linke tıklandıktan sonra mobil menüyü otomatik kapat

        if (link.classList.contains("main-nav-link")) {

            headerEl.classList.remove("nav-open");

        }

    });

});

Yapışkan Menü Barı (Implementing a Sticky Navigation Bar)

Kullanıcı sayfayı aşağı kaydırırken, menünün yukarıda kaybolup gitmesi yerine ekranın tepesinde sabit (yapışkan) kalması, kullanıcının sitede kaybolmasını önler. Sitede sarsıntı (flicker) olmaması için modern Intersection Observer API yöntemi tercih edilir.

Kod Tasarımı ve Uygulama:

const sectionHeroEl = document.querySelector(".section-how"); // Hero alanı geçildiğinde tetiklensin

 

const obs = new IntersectionObserver(function (entries) {

    const ent = entries[0];

   

    if (ent.isIntersecting === false) {

        document.body.classList.add("sticky");

    }

   

    if (ent.isIntersecting === true) {

        document.body.classList.remove("sticky");

    }

}, {

    root: null, // Tarayıcı ekranını baz al

    threshold: 0,

    rootMargin: "-80px" // Menü yüksekliği kadar kala devreye girsin

});

obs.observe(sectionHeroEl);

/* Sticky CSS Sınıfı */

.sticky .header {

    position: fixed;

    top: 0;

    bottom: 0;

    width: 100%;

    height: 8rem;

    background-color: rgba(255, 255, 255, 0.97);

    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);

    z-index: 999;

}

/* Menü sabitlendiğinde içeriğin yukarı zıplamasını önlemek için body'e üst boşluk veriyoruz */

.sticky .section-how { margin-top: 9.6rem; }

Performans, SEO ve Görsel Optimizasyonları (SEO and Image Optimizations)

Site kodlaması bittikten sonra Google arama motorlarında üst sıralara çıkmak ve sitenin saniyeler içinde açılmasını sağlamak için şu adımları tamamlıyoruz:

1. Meta Açıklamaları ve Favicon: HTML dosyasının <head> alanına arama motorları için özet yazı (meta description) eklenir. Tarayıcı sekmesinde çıkacak küçük ikon (favicon.png) tanımlanır.

2.  <meta name="description" content="Omnifood, yılın 365 günü sizi sağlıklı besleyen, yapay zekâ destekli ve beslenme uzmanı onaylı lider yemek abonelik servisidir.">

3.  <link rel="icon" href="img/favicon.png" type="image/png">

4. Görsel Optimizasyonu: Web sitesindeki en büyük yavaşlık sebebi devasa boyutlu ham fotoğraflardır. Resimlerin kalitesini bozmadan boyutlarını sıkıştırmak için Squoosh veya TinyPNG servisleri kullanılır. Dosya uzantıları modern ve hafif olan .webp formatına dönüştürülür.
5. Lighthouse Analizi: Chrome tarayıcısında sağ tıklayıp İncele -> Lighthouse paneline gidilir. Performans, Erişilebilirlik, En İyi Pratikler ve SEO kategorilerinde siteniz test edilir. Kurs standartlarında hedefimiz tüm değerleri %90 ve üzeri (Yeşil Bölge) yapmaktır.

Netlify ile Yayına Alma ve Form Yönetimi (Deployment to Netlify)

Yazdığımız bu harika projeyi bilgisayarımızdan çıkarıp tüm dünyanın erişimine sunuyoruz.

1. Canlıya Alma (Deployment): Sitenizin tüm dosyalarını (index.html, style.css, script.js ve img klasörünü) tek bir ana klasörde toplayın. Netlify adresine ücretsiz üye olun. Sürükle-bırak (Drag and Drop) alanına bu klasörü bırakın. Saniyeler içinde siteniz dünya çapında https://netlify.app adresiyle yayına alınacaktır.
2. Netlify Forms (İletişim Formunu Çalıştırmak): Arka planda sunucu (backend) kodu yazmadan sitedeki formların çalışmasını sağlamak Netlify ile çok kolaydır. HTML form etiketinin içine sadece data-netlify="true" özniteliğini eklemeniz yeterlidir. Böylece kullanıcılar formu doldurduğunda, gönderilen tüm mesajlar anında Netlify panelinize düşer.

3.  <form name="contact" method="POST" data-netlify="true">

4.      <input type="email" name="email" placeholder="E-posta adresiniz" required>

5.      <button type="submit">Abone Ol</button>

6.  </form>