Baştan Sona HTML
YayındaEtiketten yayına: HTML'i anlam üzerinden öğreten, tamamı metin anlatımlı temel program. Semantik yapı, formlar ve erişilebilirlik merkezde; çerçeve yok, saf HTML.
9 bölüm36 ders5 ödev20 kaynak8 hafta
Kime uygun
Daha önce hiç kod yazmamış olanlara
Tasarımcılara: kendi arayüzünü kodlamak isteyenlere
HTML'i “biliyor sayılan” ama temelinden emin olmayanlara
Okulda ya da bootcamp'te bu konuyu hızlı geçip takılanlara
Ön koşul
Ön koşul yok
Bir bilgisayar ve güncel bir tarayıcı yeterli
Kod editörünü ilk derste birlikte kuruyoruz
Müfredat
Bir sayfa tarayıcıya nasıl ulaşır20 dk
Etiket, eleman, öznitelik22 dk
Belgenin iskeleti24 dk
Çalışma ortamı ve doğrulayıcı18 dk
Kendini tanıtan tek sayfaödev
MDN — HTML'e girişbağlantı
W3C Doğrulayıcıbağlantı
Başlıklar ve başlık düzeni22 dk
Paragraf, satır sonu ve boşluk kuralı20 dk
Anlam taşıyan metin elemanları26 dk
Alıntı ve önbiçimli metin20 dk
MDN — Metin temelleribağlantı
HTML Standard — Metin seviyesi elemanlarbağlantı
Bağlantı elemanı ve yollar26 dk
Bağlantı türleri: sayfa içi, e-posta, dosya22 dk
target, rel ve güvenlik20 dk
Gezinme yapısı kurmak22 dk
Üç sayfalı, gezinilebilir mini siteödev
MDN — Bağlantı oluşturmabağlantı
WebAIM — Atlama bağlantılarıbağlantı
Görsel eklemek ve alt metni24 dk
Duyarlı görseller: srcset, sizes, picture28 dk
figure, figcaption ve görsel açıklamaları18 dk
Video, ses ve gömme içerik26 dk
MDN — Duyarlı görsellerbağlantı
MDN — Video ve sesbağlantı
Sırasız ve sıralı listeler20 dk
Tablo temelleri24 dk
Karmaşık tablolar ve erişilebilirlik24 dk
details, dialog ve diğer yapı elemanları20 dk
Erişilebilir veri tablosuödev
MDN — Tablo temelleribağlantı
WebAIM — Erişilebilir tablolarbağlantı
Neden semantik? div çorbasının bedeli20 dk
header, main, footer22 dk
section, article, aside24 dk
Belge ana hattı ve landmark'lar22 dk
MDN — Belge ve site yapısıbağlantı
W3C — ARIA landmark kullanımıbağlantı
form elemanı: action ve method24 dk
Girdi türleri ve label28 dk
select, textarea ve gruplama22 dk
Tarayıcı doğrulaması24 dk
Erişilebilir başvuru formuödev
MDN — Form kılavuzubağlantı
MDN — Girdi türleribağlantı
Erişilebilirlik nedir, kimin içindir20 dk
Klavye, odak ve tıklanabilir eleman seçimi26 dk
Ekran okuyucu ve metin alternatifleri24 dk
ARIA: ne zaman, ne zaman değil22 dk
MDN — Erişilebilirlik öğrenme yolubağlantı
W3C — ARIA Authoring Practicesbağlantı
WebAIM — Klavye erişilebilirliğibağlantı
head'in tamamı24 dk
Open Graph ve paylaşım kartları20 dk
Doğrulama ve yaygın hatalar22 dk
Sayfayı yayına almak22 dk
Bitirme projesi: yayına alınmış çok sayfalı siteödev
MDN — head içindeki metadatabağlantı
Open Graph protokolübağlantı
GitHub Pages ile yayına almabağlantı
DersÖdevKaynak
Bu programda ne teslim ediyorsun
5 ödev, her biri bir bölümün sonunda. Hepsini ben okuyorum; geri bildirim kodun üzerinde.
01Kendini tanıtan tek sayfaBölüm 01
02Üç sayfalı, gezinilebilir mini siteBölüm 03
03Erişilebilir veri tablosuBölüm 05
04Erişilebilir başvuru formuBölüm 07
05Bitirme projesi: yayına alınmış çok sayfalı siteBölüm 09
Kaynaklar
20 kaynak · 9 bölüme dağılmış
Her kaynak ilgili dersin altında duruyor; ayrı bir liste ezberlemek gerekmiyor. Hepsi ücretsiz ve Türkçe karşılığı olanlar öncelikli.
Diğer programlar
Bu programla başlamak isterseniz.
Başvuruda "Baştan Sona HTML" seçin; tanışma görüşmesinde hangi bölümden başlayacağınızı ve haftalık ritmi birlikte belirleriz.