ahmet / static-page

# static-page

> _Bazen güç sadelikten gelir._

---

## Önsöz

Merhaba. Web bir ütopyadır ve burada kimseye maaş vermiyoruz — sadece sağlam
temel veriyoruz. Bu projede ne React var, ne Tailwind, ne de bir build aracı.
Sadece sen, bir metin editörü ve tarayıcı. İskeleti kendi ellerinle kuracaksın;
ve bittiğinde her kutunun neden orada durduğunu bileceksin.

---

## Zorunlu Kısım

Tek sayfalık bir web sitesi tasarlayacaksın. Konu sana ait; ama site aşağıdaki
maddelerin **hepsini** sağlamak zorunda:

- `<header>`, `<nav>` ve `<footer>` semantik olarak bulunmalı. `<nav>`, çalışan
  bağlantılar içermeli.
- Sayfa en az **üç bölümden** oluşmalı ve `<nav>` bu bölümler arasında gezinmeyi
  sağlamalı.
- Site **320px** genişlikten geniş masaüstü ekranlarına kadar bozulmadan
  görünmeli; hiçbir genişlikte yatay kaydırma çubuğu çıkmamalı.
- HTML, **W3C doğrulayıcısından** hatasız geçmeli.
- Güncel Chrome'daki **Lighthouse SEO** denetiminden **100** almalı.
- Sayfanın, içeriğini doğru yansıtan anlamlı bir **başlık** (`<title>`) ve bir
  **meta açıklaması** (`description`) olmalı — arama sonuçlarında bunlarla görünecek.
- Tüm stiller **harici** `style.css` içinde olmalı. `index.html` içinde satır içi
  `style` ya da `<style>` bloğu bulunamaz.
- Hiçbir **CSS framework'ü** kullanılamaz.
- Site **hiçbir JavaScript** içeremez.
- Tüm asset dosyaları (görseller, favicon vb.) `assets/` klasöründe tutulmalı.
  Bu klasöre asset olmayan hiçbir dosya (`.html`, `.css`, `.js` gibi) konulamaz.
- Sayfada en fazla **3 içerik görseli** kullanılabilir; her biri en fazla **2 MB**
  olabilir. Favicon ve sosyal önizleme görseli bu sayıya dahil değildir.

Nasıl yapılacağını burada anlatmıyoruz — orası senin işin. Dökümantasyonu okumak,
denemek ve takılınca çözmek bu projenin asıl dersi. Yoldan öğreneceksin.

---

## Bonus Kısım

Zorunlu kısım kusursuz değilse bonusa bakılmaz. Ama başarırsan, projen
"yeterli"den "etkileyici"ye geçer:

- Site bir **karanlık moda** sahip olsun ve kullanıcının sistem tercihine uysun.
- Sitenin bir **favicon**'u olsun.
- Site sosyal medyada paylaşıldığında düzgün bir **önizleme** versin.

Yine: nasıl yapılacağını söylemiyoruz.

---

## Örnekler

Konuyu sen seçiyorsun. Birkaç fikir:

- Bir dükkân tanıtımı
- Kendi CV'in / kişisel sayfan
- Ya da aklına gelen herhangi bir site — **özgürsün adamım.**

---

## Döndürülecek Dosyalar

```
static-page/
├── index.html
├── style.css
├── assets/        (görseller, favicon vb.)
└── README.md   (opsiyonel)
```

| Dosya | Zorunlu mu? | Açıklama |
|-------|:-----------:|----------|
| `index.html` | Evet | Sayfanın yapısı |
| `style.css`  | Evet | Tüm stiller burada |
| `assets/`    | Koşullu | Yalnızca asset dosyaları (görsel, favicon) |
| `README.md`  | Hayır | Projeni tanıtmak istersen |

---

> Az dosya, çok özen. Başarılar.