Menüyü Atla ve İçeriğe Git
Kodyazabil.me
Giriş Yap
HTML + TAİLWIND

Frontend Dünyasında Fark Yaratın: Erişilebilir ve Modern Web Geliştirme Kampı

Kodun sadece görsel değil, "işitsel ve anlamsal" dünyasını keşfedin.

Son Güncelleme: Ocak 2026 Dil: Türkçe
Frontend Dünyasında Fark Yaratın: Erişilebilir ve Modern Web Geliştirme Kampı

Neler Öğreneceksiniz?

  • Semantik (Anlamsal) HTML5: "Div çorbası" (karmaşık ve anlamsız kod yapısı) yerine, "header", "nav", "main", "section" gibi tarayıcılar ve ekran okuyucular tarafından doğru yorumlanan etiketlerin kullanımı.
  • Dijital Erişilebilirlik (Accessibility): Görme engelli kullanıcılar için form etiketlerinin (label/input) doğru eşleştirilmesi, klavye kullanıcıları için focus stillerinin görünür kılınması ve renk kontrastı kuralları.
  • Modern CSS ve Tailwind: Klasik CSS dosyalarıyla uğraşmadan "Utility-First" yaklaşımıyla hızlı stil verme, tipografi, boşluk yönetimi (spacing) ve renk kullanımı.
  • Sayfa Düzeni (Layout): Flexbox ve Grid sistemleri ile modern kutu modelleri oluşturma.
  • Responsive (Duyarlı) Tasarım: "Mobile-First" (Önce Mobil) prensibiyle, sitelerin telefondan masaüstüne kadar her cihazda uyumlu çalışmasını sağlama.
  • Durum Yönetimi: Hover (üzerine gelme), Focus (odaklanma) ve Active (tıklama) durumlarının stillendirilmesi.
  • Proje Yayınlama ve Araçlar: VS Code editörü, Prettier eklentisi, Git/GitHub ile versiyon kontrolü ve projenin Vercel veya Netlify üzerinden tüm dünyaya yayınlanması.
  • Karanlık Mod (Dark Mode): Tasarıma karanlık mod desteğinin eklenmesi.

Eğitim Müfredatı

4 Bölüm
1. Hafta: Anlamsal İskelet ve HTML5
7 içerik
Hedef: "Div çorbası" (div soup) yapmayı bırakıp sağlam bir temel atmak.
Web'in Dili: VS Code, Prettier ve Live Server kurulumu.
HTML5 İskeleti ve `lang="tr"` etiketinin önemi.
Headings Hiyerarşisi (h1-h6) ve Paragraf Yapıları.
Semantik Etiketler: `header`, `nav`, `main`, `section`, `article`, `footer`.
Formlar ve Label/Input eşleşmesinin kör kullanıcılar için hayati önemi.
Haftanın Ödevi: Sadece HTML etiketleri ile kişisel bir CV iskeleti oluşturmak.
2. Hafta: Tailwind CSS Mantığı ve Temel Tasarım
5 içerik
Hedef: Klasik CSS yazmadan stil vermenin hızını kavramak.
Tailwind Kurulumu ve Utility-First yaklaşımı.
Kutu Modeli ve Flexbox ile modern düzenler kurmak.
Renk Kontrastı: Neden açık gri üzerine beyaz yazı yazmamalıyız?
Haftanın Ödevi: HTML CV projesini Tailwind ile şık bir tasarıma kavuşturmak.
3. Hafta: Responsive (Duyarlı) Tasarım ve Etkileşim
7 içerik
Hedef: Sitenin telefondan masaüstüne kadar her cihazda kusursuz görünmesi.
Mobile-First: Neden önce mobil tasarımı kodlarız?
Tailwind Breakpoint Mantığı (`sm`, `md`, `lg`, `xl`).
Grid Sistemi ve Görsel Yönetimi.
Durumlar (States): `Hover`, `Focus` ve `Active` stilleri.
Erişilebilirlik Vurgusu: Klavye kullanıcıları için focus stillerinin görünür olması.
Haftanın Ödevi: Responsive ve interaktif bir "Fiyatlandırma Masası" (Pricing Table) yapmak.
4. Hafta: Final Projesi ve Yayına Alma
6 içerik
Hedef: Gerçek dünyada kullanılabilecek komple bir sayfa (Landing Page) yapmak.
Modern Landing Page Kodlama: `Navbar`, `Hero`, `Features` bölümleri.
Dark Mode (Karanlık Mod) entegrasyonu.
Basit Git komutları ile GitHub kullanımı.
Vercel veya Netlify kullanarak siteyi tüm dünyaya açma.
Mezuniyet Projesi: Kendi "Developer Portfolyo" sitenizi tasarlayıp yayınlamak.

Açıklama

Kodlamayı ezberlemeyin; mantığını, ruhunu ve en önemlisi "herkes için" erişilebilir olmasını öğrenin.

Piyasada yüzlerce HTML kursu bulabilirsiniz. Çoğu size ekrandaki pikselleri boyamayı, göze hoş gelen kutular çizmeyi öğretir. Ancak çok azı o piksellerin arkasındaki "anlamı" (semantiği) ve o sitenin görmeyen bir kullanıcı için ne ifade ettiğini anlatır.

Bu kampta ezbere kod yazmayı değil; Google'ın sevdiği, tarayıcıların anladığı ve herkesin erişebildiği temiz kod (clean code) mimarisini öğreneceksiniz.

Türkiye'de Bir İlk: Gören ve Görmeyenler Aynı Sınıfta!

Bu eğitimi benzersiz kılan en önemli özellik "Kapsayıcı ve Karma Sınıf" yapısıdır. Sınıfımızda gören geliştiriciler ile görmeyen geliştirici adayları yan yana (sanal ortamda) eğitim alabilecekler. Bu, sadece bir eğitim değil, gerçek bir deneyimdir. Oturumda görmeyen arkadaşınız ile erişilebilirliği bire bir deneyimleyebileceksiniz!

  • Gören bir geliştiriciyseniz: Yazdığınız kodun "erişilebilir olup olmadığını" teorik olarak düşünmenize gerek kalmayacak. Arkadaşınız ekran okuyucusuyla (NVDA/VoiceOver) sitenizi gezecek ve size anlık geri bildirim verecek. Erişilebilirliği bir zorunluluk olarak değil, bir iletişim biçimi olarak öğreneceksiniz.
  • Görmeyen bir geliştiriciyseniz: Sektör standartlarında, modern araçlarla (VS Code, Git, Tailwind) kod yazmayı ve gören geliştiricilerle aynı dili konuşarak proje üretmeyi deneyimleyeceksiniz.

Eğitmen Farkı: Ben Görmüyorum, Duyuyorum

"Arkadaşlar şu an bu butona hover efekti verdik ama ben görmüyorum, duyuyorum. Ekran okuyucum bana bunun tıklanabilir bir öğe olduğunu söylüyor çünkü doğru semantik etiketi (<button>) kullandık. Eğer sadece <div> kullansaydık, benim için bu buton yok hükmünde olacaktı."

Bir web sitesini görsel değil, işitsel ve yapısal olarak analiz eden bir eğitmenden ders almak; size görselin ötesindeki hataları görme yeteneği kazandıracak.

Kamp Detayları

  • Süre: 4 Hafta (Şubat 2026 boyunca)
  • Platform: Jitsi Meet (Canlı ve İnteraktif)
  • Kontenjan: Maksimum 20 Kişi (Birebir ilgilenebilmek için)
  • Metot: Mobile-First (Önce Mobil) Yaklaşımı

Gereksinimler

  • Editör: Visual Studio Code (VS Code).
  • Eklentiler: Kod düzeni için "Prettier" ve anlık önizleme için "Live Server".
  • Diğer: Git versiyon kontrol sistemi (GitHub kullanımı için).

Kimler İçin Uygun?

  • Yeni Başlayanlar
  • Erişilebilirliğe Önem Veren Geliştiriciler
  • Modern Yöntemlere Geçmek İsteyenler
  • Portfolyo Oluşturmak İsteyenler
3000,00₺ 2000,00₺