CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol
Ücretsiz 4 seviye HTML

HTML

HTML Living Standard'a göre modern ve anlamsal web sayfaları yazmayı sıfırdan öğren.

HTML kursu sıfırdan başlar: belge iskeleti, metin, bağlantılar, listeler, görseller, tablolar, formlar ve anlamsal etiketler. Orta seviyede erişilebilirlik, ileri seviyede performans, SEO, yapısal veri ve web bileşenlerinin HTML tarafı işlenir. Tüm örnekler HTML Living Standard (HTML5) ile uyumludur.

  • 230 ders
  • 19 sa 55 dk
  • 12 proje
Ücretsiz başla Müfredatı gör

Hesap gerekmez, hemen başlayabilirsin. İlerlemeni kaydetmek istersen ücretsiz hesap aç

Seviyeler

HTML kursu dört seviyede sıfırdan uzmanlığa ilerler. İstediğin seviyeden başlayabilirsin.
Seviyeni bilmiyor musun? Seviye testini çöz
Başlangıç

HTML'in temellerini sıfırdan öğrenirsin: belge iskeleti, metin, bağlantılar, listeler, görseller, tablolar, formlar ve anlamsal etiketler.

  • Belge temelleri
  • Metin içeriği
  • Bağlantılar ve gezinme
  • Listeler
68 ders · 5 sa 29 dk Dersleri gör →
Orta

Orta seviye

İleri metin etiketleri, gelişmiş tablolar, form doğrulama, anlamsal düzen ve erişilebilirlik temellerini öğrenirsin.

  • İleri metin etiketleri
  • İleri bağlantılar
  • İleri tablolar
  • İleri form öğeleri
67 ders · 5 sa 41 dk Dersleri gör →
İleri

İleri seviye

Responsive görseller, erişilebilir video, kompleks formlar, SEO, yapısal veri, şablonlar ve web bileşenlerinin HTML tarafını öğrenirsin.

  • İleri medya
  • Picture ve responsive görsel
  • Karmaşık formlar
  • Meta veri ve SEO
56 ders · 4 sa 46 dk Dersleri gör →
Uzman

WCAG, ileri ARIA desenleri, performans, uluslararasılaştırma, güvenlik ve ileri web bileşenleri konularını öğrenirsin.

  • İleri erişilebilirlik
  • İleri ARIA desenleri
  • Uluslararasılaştırma
  • İleri web bileşenleri
39 ders · 3 sa 59 dk Dersleri gör →

Yapacağın projeler

Her seviyede öğrendiklerini gerçek bir sayfada birleştirirsin.
Hakkımda sayfası Başlangıç · 5 ders Kartvizit sayfası Başlangıç · 5 ders Tarif sayfası Başlangıç · 5 ders Landing sayfası Orta · 5 ders Veri tablosu Orta · 5 ders İletişim formu Orta · 5 ders Site iskeleti Orta · 5 ders Video oynatıcı İleri · 5 ders Schema.org işaretleme İleri · 5 ders Dashboard widget İleri · 5 ders Performanslı sayfa Uzman · 5 ders Güvenli sayfa Uzman · 5 ders

Nasıl çalışıyor?

Kısa anlatım

Her ders tek bir kavramı birkaç kısa kartla anlatır; uzun video ya da metin yok.

Hemen dene

Çoktan seçmeli, boşluk doldurma ve eşleştirme sorularıyla öğrendiğini anında pekiştirirsin.

Kendin yaz

Tarayıcıdaki editörde gerçek kod yazarsın; kodun anında kontrol edilir ve sonucu canlı görürsün.

Müfredat

41 grup · 230 ders · 19 sa 55 dk

HTML'in temellerini sıfırdan öğrenirsin: belge iskeleti, metin, bağlantılar, listeler, görseller, tablolar, formlar ve anlamsal etiketler.

1
Belge temelleri
6 ders · 26 dk
  1. 1 HTML nedir? HTML'in ne olduğunu, ne işe yaradığını ve bir web sayfasının temel yapı taşlarını öğrenirsin. 4 dk
  2. 2 Belge iskeleti <!DOCTYPE>, <html>, <head> ve <body> etiketleriyle bir HTML belgesinin iskeletini kurarsın. 5 dk
  3. 3 Head ve meta etiketleri Karakter seti, viewport ve description gibi meta etiketlerinin rolünü öğrenirsin. 4 dk
  4. 4 Başlık ve dil <title> etiketinin ve lang özniteliğinin ne işe yaradığını öğrenirsin. 4 dk
  5. 5 Yorumlar ve okunabilirlik HTML yorumlarını ve girinti ile okunabilir kod yazmayı öğrenirsin. 4 dk
  6. 6 Özet - İlk HTML sayfam Belge iskeletini, meta etiketlerini ve yorumları birleştirerek ilk tam HTML sayfanı yazarın. 5 dk
2
Metin içeriği
6 ders · 27 dk
  1. 1 Başlıklar: h1–h6 Altı başlık seviyesini ve hiyerarşi kurallarını öğrenirsin. 4 dk
  2. 2 Paragraflar <p> etiketiyle paragraf yazmayı ve metin akışını öğrenirsin. 4 dk
  3. 3 Satır sonu ve yatay çizgi <br> ve <hr> etiketlerinin ne zaman kullanılacağını öğrenirsin. 4 dk
  4. 4 Vurgu ve önemli metin <strong>, <em>, <mark> ve <small> etiketleriyle metne anlam katmayı öğrenirsin. 5 dk
  5. 5 Alıntı ve kaynak <blockquote>, <q> ve <cite> etiketlerinin farkını öğrenirsin. 5 dk
  6. 6 Özet - Makale sayfası Başlıklar, paragraflar ve alıntıları birleştirerek bir makale sayfası yazarsın. 5 dk
3
Proje: Hakkımda sayfasıProje
5 ders · 25 dk
  1. 1 Proje: Hakkımda sayfası 5 derslik projenin genel bakışı: kişisel bir tanıtım sayfası kuracaksın. 4 dk
  2. 2 İskelet ve başlık Belge iskeletini ve sayfa başlığını eklersin. 5 dk
  3. 3 Tanıtım metni Başlık ve paragraflarla kendini tanıtan metni yazarsın. 5 dk
  4. 4 Vurgu ve ayrım Önemli bölümleri vurgular ve yatay çizgiyle ayırırsın. 5 dk
  5. 5 Proje sonu - Hakkımda Tüm parçaları birleştirip sayfayı yorumlarla dokümante edersin. 6 dk
4
Bağlantılar ve gezinme
6 ders · 28 dk
  1. 1 Çapa bağlantıları <a> etiketi ve href özniteliğiyle başka sayfalara bağlantı vermeyi öğrenirsin. 4 dk
  2. 2 Mutlak ve göreli URL'ler Mutlak ve göreli URL farkını öğrenirsin. 4 dk
  3. 3 Sayfa içi bağlantılar Aynı sayfa içinde bölümlere bağlantı vermeyi öğrenirsin. 5 dk
  4. 4 Bağlantı hedefleri target ve rel öznitelikleriyle bağlantının nerede açılacağını kontrol edersin. 5 dk
  5. 5 E-posta ve telefon bağlantıları mailto: ve tel: şemalarıyla bağlantı oluşturmayı öğrenirsin. 5 dk
  6. 6 Özet - Gezinme menüsü İç ve dış bağlantılarla basit bir gezinme menüsü oluşturursun. 5 dk
5
Listeler
6 ders · 27 dk
  1. 1 Sırasız listeler <ul> ve <li> etiketleriyle sırasız liste oluşturmayı öğrenirsin. 4 dk
  2. 2 Sıralı listeler <ol> ve start, type öznitelikleriyle sıralı listeler kurarsın. 4 dk
  3. 3 Açıklama listeleri <dl>, <dt> ve <dd> etiketleriyle terim–açıklama listeleri oluşturursun. 4 dk
  4. 4 İç içe listeler Listeleri iç içe geçirerek hiyerarşik yapılar kurmayı öğrenirsin. 5 dk
  5. 5 Liste öğelerinde bağlantı Menü ve içerik listeleri için <li> içine bağlantı yerleştirmeyi öğrenirsin. 5 dk
  6. 6 Özet - İçindekiler tablosu İç içe sıralı ve sırasız listelerle bir içindekiler tablosu oluşturursun. 5 dk
6
Proje: Kartvizit sayfasıProje
5 ders · 25 dk
  1. 1 Proje: Kartvizit sayfası 5 derslik projenin genel bakışı: bağlantılar ve listelerle kişisel kartvizit sayfası. 4 dk
  2. 2 İsim ve unvan Sayfa iskeletini ve isim–unvan başlıklarını eklersin. 5 dk
  3. 3 İletişim listesi İletişim bilgilerini sırasız liste ve mailto/tel bağlantılarıyla yazarsın. 5 dk
  4. 4 Beceriler ve bağlantılar Becerilerini sıralı liste, sosyal bağlantıları dış linklerle eklersin. 5 dk
  5. 5 Proje sonu - Kartvizit Tüm bölümleri birleştirip son kartvizit sayfasını yayınlanır hale getirirsin. 6 dk
7
Görseller ve medya
6 ders · 29 dk
  1. 1 Görsel ekleme <img> etiketi ve src, alt öznitelikleriyle görsel eklemeyi öğrenirsin. 4 dk
  2. 2 Görsel boyutları width ve height özniteliklerini ve yararlarını öğrenirsin. 5 dk
  3. 3 Figure ve figcaption <figure> ve <figcaption> ile görsellere başlık eklemeyi öğrenirsin. 5 dk
  4. 4 Ses ve video <audio> ve <video> etiketleriyle medya eklemeyi öğrenirsin. 5 dk
  5. 5 Alternatif kaynaklar <source> ve type özniteliğiyle farklı medya biçimleri sağlarsın. 5 dk
  6. 6 Özet - Medya galerisi Görseller, figcaption ve video öğelerini birleştirerek bir galeri sayfası yaparsın. 5 dk
8
Tablolara giriş
6 ders · 28 dk
  1. 1 Tablo iskeleti <table>, <tr>, <td> etiketleriyle basit bir tablo kurmayı öğrenirsin. 4 dk
  2. 2 Başlık hücreleri <th> etiketi ve scope özniteliğiyle erişilebilir tablo başlıkları oluşturursun. 4 dk
  3. 3 Tablo bölümleri <thead>, <tbody>, <tfoot> etiketleriyle tabloyu mantıksal bölümlere ayırırsın. 5 dk
  4. 4 Başlık ve caption <caption> etiketiyle tabloyu başlıklandırıp erişilebilirliği artırırsın. 5 dk
  5. 5 Hücre birleştirme colspan ve rowspan öznitelikleriyle hücreleri birleştirmeyi öğrenirsin. 5 dk
  6. 6 Özet - Ders programı tablosu Tüm tablo öğelerini kullanarak haftalık bir ders programı tablosu oluşturursun. 5 dk
9
Proje: Tarif sayfasıProje
5 ders · 25 dk
  1. 1 Proje: Tarif sayfası 5 derslik projenin genel bakışı: listeler ve tablolarla bir tarif sayfası. 4 dk
  2. 2 Tarif başlığı ve özet Başlık, kısa açıklama ve servings bilgisini eklersin. 5 dk
  3. 3 Malzeme listesi Malzemeleri sırasız liste olarak yazıp miktarları vurgularsın. 5 dk
  4. 4 Adımlar ve pişirme tablosu Adımları sıralı liste, pişirme süresi/sıcaklığını tablo olarak eklersin. 5 dk
  5. 5 Proje sonu - Tarif sayfası Tüm bölümleri birleştirip son tarif sayfasını yayınlanır hale getirirsin. 6 dk
10
Formlara giriş
6 ders · 29 dk
  1. 1 Form iskeleti <form> etiketi ve action/method öznitelikleriyle form iskeletini kurarsın. 4 dk
  2. 2 Etiketli input <label> ve <input> etiketlerinin nasıl eşleştirildiğini öğrenirsin. 5 dk
  3. 3 Input türleri text, email, password, number, date gibi input türlerini öğrenirsin. 5 dk
  4. 4 Textarea ve button <textarea> ve <button> etiketlerinin kullanımını öğrenirsin. 5 dk
  5. 5 Seçim alanları <select>, <option> ve <input type=checkbox|radio> ile seçim alanları kurarsın. 5 dk
  6. 6 Özet - Geri bildirim formu Tüm form öğelerini birleştirerek bir geri bildirim formu oluşturursun. 5 dk
11
Anlamsal etiketlere giriş
6 ders · 29 dk
  1. 1 Anlamsal etiketler neden önemli Anlamsal etiketlerin erişilebilirlik ve SEO açısından rolünü öğrenirsin. 4 dk
  2. 2 Header ve footer <header> ve <footer> etiketlerinin kullanımını öğrenirsin. 5 dk
  3. 3 Nav ve main <nav> ve <main> etiketleriyle sayfanın ana bölümlerini işaretlersin. 5 dk
  4. 4 Article ve section <article> ve <section> etiketlerinin farkını öğrenirsin. 5 dk
  5. 5 Aside ve address <aside> ve <address> etiketlerinin ne zaman kullanılacağını öğrenirsin. 5 dk
  6. 6 Özet - Anlamsal blog iskeleti Tüm anlamsal etiketleri kullanarak bir blog sayfası iskeleti kurarsın. 5 dk
12
Başlangıç finaliFinal
5 ders · 31 dk
  1. 1 Meydan okuma - Belge iskeleti Sıfırdan tam bir HTML belge iskeleti yazarak temelleri test edersin. 6 dk
  2. 2 Meydan okuma - Metin ve bağlantılar Başlık, paragraf, vurgu ve bağlantıları birleştiren bir sayfa yazarsın. 6 dk
  3. 3 Meydan okuma - Listeler ve tablolar İç içe listeler ve bir program tablosu içeren bir sayfa yazarsın. 6 dk
  4. 4 Meydan okuma - Form ve anlamsal yapı Anlamsal etiketlerle sarılı bir geri bildirim formu sayfası yazarsın. 6 dk
  5. 5 Meydan okuma - Başlangıç projesi Tüm başlangıç konularını birleştiren kişisel bir ana sayfa yazarsın. 7 dk

İleri metin etiketleri, gelişmiş tablolar, form doğrulama, anlamsal düzen ve erişilebilirlik temellerini öğrenirsin.

1
İleri metin etiketleri
6 ders · 30 dk
  1. 1 Abbr, cite ve time <abbr>, <cite> ve <time> etiketleriyle metne ince anlam katarsın. 5 dk
  2. 2 Code, kbd ve samp <code>, <kbd>, <samp> ve <var> etiketlerini öğrenirsin. 5 dk
  3. 3 Sub ve sup <sub> ve <sup> ile alt ve üst simge yazarsın. 5 dk
  4. 4 Pre ve code bloğu <pre><code> ile biçimlendirilmemiş kod bloğu yazarsın. 5 dk
  5. 5 Wbr ve bdi, bdo Satır kırılım noktaları ve çift yönlü metin kontrolünü öğrenirsin. 5 dk
  6. 6 Özet - Teknik doküman Tüm metin etiketlerini kullanarak teknik bir referans sayfası yazarsın. 5 dk
2
İleri bağlantılar
6 ders · 30 dk
  1. 1 Download bağlantıları download özniteliğiyle indirilebilir dosya bağlantıları oluşturursun. 5 dk
  2. 2 Ping ve rel türleri rel özniteliğinin noopener, noreferrer, license, bookmark gibi türlerini öğrenirsin. 5 dk
  3. 3 Hreflang ve canonical Çok dilli bağlantılarda hreflang ve sayfa ilişkilerini öğrenirsin. 5 dk
  4. 4 Bağlantı erişilebilirliği Anlamlı bağlantı metni ve aria-label kullanımını öğrenirsin. 5 dk
  5. 5 Buton vs bağlantı Hangi durumda <button> hangi durumda <a> kullanılacağını öğrenirsin. 5 dk
  6. 6 Özet - Çok dilli menü İndirme, dış ve dil bağlantıları içeren bir menü oluşturursun. 5 dk
3
Proje: Landing sayfasıProje
5 ders · 25 dk
  1. 1 Proje: Ürün landing sayfası 5 derslik projenin genel bakışı: bir ürün için landing page. 4 dk
  2. 2 Hero bölümü Ana başlık, alt başlık ve CTA butonunu içeren hero bölümünü yazarsın. 5 dk
  3. 3 Özellik listesi Ürün özelliklerini anlamsal etiketlerle ve listelerle eklersin. 5 dk
  4. 4 Fiyat tablosu Üç paketin fiyatlarını karşılaştıran bir tablo bölümü yazarsın. 5 dk
  5. 5 Proje sonu - Landing Tüm bölümleri birleştirip landing sayfasını tamamlayıp dokümante edersin. 6 dk
4
İleri tablolar
6 ders · 30 dk
  1. 1 Col ve colgroup <col> ve <colgroup> ile sütunlara stil köprüsü kurarsın. 5 dk
  2. 2 Scope ve headers scope, headers ve id ile karmaşık tablo erişilebilirliği sağlarsın. 5 dk
  3. 3 Tablo erişilebilirliği summary (kaldırıldı), caption ve aria-* kullanımını öğrenirsin. 5 dk
  4. 4 Responsive tablolar Tabloları küçük ekranlarda kaydırılabilir yapmayı öğrenirsin. 5 dk
  5. 5 Tablo görsel yapısı Yardımcı etiketlerle tablo yapısını netleştirirsin. 5 dk
  6. 6 Özet - Karşılaştırma tablosu Tüm tablo tekniklerini uygulayan bir ürün karşılaştırma tablosu yazarsın. 5 dk
5
Proje: Veri tablosuProje
5 ders · 25 dk
  1. 1 Proje: Veri tablosu 5 derslik projenin genel bakışı: erişilebilir bir veri tablosu. 4 dk
  2. 2 Başlık ve caption Tablo iskeletini, başlık satırını ve caption'ı kurarsın. 5 dk
  3. 3 Gövde verisi Veri satırlarını tbody içine mantıksal sırayla eklersin. 5 dk
  4. 4 Toplam satırı tfoot içine toplam/özet satırı eklersin. 5 dk
  5. 5 Proje sonu - Veri tablosu Tabloyu colgroup ve erişilebilirlik öznitelikleriyle tamamlayıp dokümante edersin. 6 dk
6
İleri form öğeleri
6 ders · 30 dk
  1. 1 Fieldset ve legend <fieldset> ve <legend> ile form grupları oluşturursun. 5 dk
  2. 2 Datalist ve output <datalist> ve <output> etiketlerini öğrenirsin. 5 dk
  3. 3 Progress ve meter <progress> ve <meter> etiketlerinin farkını öğrenirsin. 5 dk
  4. 4 Input öznitelikleri placeholder, required, pattern, min/max, step gibi öznitelikleri öğrenirsin. 5 dk
  5. 5 Autocomplete ve inputmode autocomplete ve inputmode ile mobil deneyimi iyileştirirsin. 5 dk
  6. 6 Özet - Anket formu Tüm gelişmiş form öğeleriyle bir anket formu oluşturursun. 5 dk
7
Form doğrulama
6 ders · 30 dk
  1. 1 Required ve pattern Tarayıcı tarafı doğrulama için required ve pattern kullanırsın. 5 dk
  2. 2 Min, max ve step Sayısal inputlarda sınır ve adım kontrolü yaparsın. 5 dk
  3. 3 Minlength ve maxlength Metin uzunluğu sınırlarını öğrenirsin. 5 dk
  4. 4 Type-based doğrulama email, url, date inputlarının otomatik doğrulamasını öğrenirsin. 5 dk
  5. 5 Novalidate ve formnovalidate Doğrulamayı devre dışı bırakmayı öğrenirsin. 5 dk
  6. 6 Özet - Kayıt formu doğrulama Doğrulama kurallarıyla dolu bir kayıt formu yazarsın. 5 dk
8
Proje: İletişim formuProje
5 ders · 25 dk
  1. 1 Proje: İletişim formu 5 derslik projenin genel bakışı: doğrulamalı iletişim formu. 4 dk
  2. 2 Form iskeleti Form, fieldset, legend ve etiketleri kurarsın. 5 dk
  3. 3 Kişi alanları İsim, e-posta ve telefon alanlarını doğru tiplerle eklersin. 5 dk
  4. 4 Mesaj ve konu Konu seçimi (select) ve mesaj alanı (textarea) eklersin. 5 dk
  5. 5 Proje sonu - İletişim formu Doğrulama, gönder butonu ve erişilebilirlik özniteliklerini ekleyip tamamlayıp dokümante edersin. 6 dk
9
Anlamsal düzen
6 ders · 30 dk
  1. 1 Header yapısı Sitenin <header> bölümünü nav ve logo ile yapılandırırsın. 5 dk
  2. 2 Ana içerik <main> içinde article ve section kullanımını öğrenirsin. 5 dk
  3. 3 Sidebar ve aside <aside> ile yan içerik bölümleri oluşturursun. 5 dk
  4. 4 Footer yapısı <footer> içine copyright, bağlantı ve address eklersin. 5 dk
  5. 5 Bölümleme kuralları Anlamsal bölümlerin hiyerarşisini doğru kurmayı öğrenirsin. 5 dk
  6. 6 Özet - Magazin sayfası Tüm landmark'larla bir magazin ana sayfası iskeleti kurarsın. 5 dk
10
Erişilebilirlik temelleri
6 ders · 30 dk
  1. 1 ARIA temelleri role, aria-label, aria-labelledby, aria-describedby kullanırsın. 5 dk
  2. 2 Saklı başlık Sadece ekran okuyucu için başlık ve metin yazmayı öğrenirsin. 5 dk
  3. 3 Skip link Sayfa başında ana içeriğe atla bağlantısı oluşturursun. 5 dk
  4. 4 Form erişilebilirliği Label, aria-required, aria-invalid kullanırsın. 5 dk
  5. 5 Tablo erişilebilirliği Scope, headers ve caption ile tablo erişilebilirliğini sağlarsın. 5 dk
  6. 6 Özet - Erişilebilir kart Tüm ARIA tekniklerini uygulayan erişilebilir bir profil kartı yazarsın. 5 dk
11
Proje: Site iskeletiProje
5 ders · 25 dk
  1. 1 Proje: Çok sayfalı site iskeleti 5 derslik projenin genel bakışı: tutarlı landmark'lı site iskeleti. 4 dk
  2. 2 Tutarlı header/footer Tüm sayfalarda tekrar eden header ve footer'ı yazarsın. 5 dk
  3. 3 Ana sayfa Ana sayfada hero ve özet içerik bölümlerini yazarsın. 5 dk
  4. 4 Hakkında ve iletişim Hakkında sayfası ve iletişim sayfası için iskeleti kurarsın. 5 dk
  5. 5 Proje sonu - Site iskeleti Tüm sayfaları bağlantılarla birbirine bağlayıp dokümante edersin. 6 dk
12
Orta seviye finaliFinal
5 ders · 31 dk
  1. 1 Meydan okuma - İleri metin Tüm ileri metin etiketlerini kullanan bir teknik doküman yazarsın. 6 dk
  2. 2 Meydan okuma - Erişilebilir tablo Colgroup, scope ve headers içeren bir finans tablosu yazarsın. 6 dk
  3. 3 Meydan okuma - Doğrulamalı form Tüm doğrulama öznitelikleriyle bir rezervasyon formu yazarsın. 6 dk
  4. 4 Meydan okuma - Anlamsal düzen Anlamsal landmark'larla bir haber sitesi ana sayfası yazarsın. 6 dk
  5. 5 Meydan okuma - Orta seviye projesi Tüm orta seviye konularını birleştiren bir dokümantasyon sitesi yazarsın. 7 dk

Responsive görseller, erişilebilir video, kompleks formlar, SEO, yapısal veri, şablonlar ve web bileşenlerinin HTML tarafını öğrenirsin.

1
İleri medya
6 ders · 30 dk
  1. 1 Loading lazy loading="lazy" ile görselleri tembel yüklemeyi öğrenirsin. 5 dk
  2. 2 Decoding async decoding="async" ile görsel kod çözme davranışını kontrol edersin. 5 dk
  3. 3 Srcset ve sizes Farklı ekran boyutları için srcset ve sizes kullanırsın. 5 dk
  4. 4 Width/height ve CLS Görsel boyutlarıyla cumulative layout shift'i azaltmayı öğrenirsin. 5 dk
  5. 5 Preload ve prefetch <link rel="preload"> ile kritik kaynakları önceden yüklersin. 5 dk
  6. 6 Özet - Performans galerisi Tüm performans teknikleriyle bir görsel galerisi yazarsın. 5 dk
2
Picture ve responsive görsel
6 ders · 30 dk
  1. 1 Picture ve source <picture> ve <source> ile görsel seçimini öğrenirsin. 5 dk
  2. 2 Media özniteliği <source media="..."> ile ekran bazlı görsel değiştirme yaparsın. 5 dk
  3. 3 Type özniteliği AVIF/WebP gibi modern biçimleri progresif olarak sunarsın. 5 dk
  4. 4 Aspect-ratio CSS aspect-ratio ve width/height ile oran korumayı öğrenirsin. 5 dk
  5. 5 Background ve img Dekoratif görsellerde <img alt=""> kuralını öğrenirsin. 5 dk
  6. 6 Özet - Responsive hero <picture> ile ekran başına değişen bir hero görseli yazarsın. 5 dk
3
Proje: Video oynatıcıProje
5 ders · 25 dk
  1. 1 Proje: Erişilebilir video oynatıcı 5 derslik projenin genel bakışı: altyazılı video sayfası. 4 dk
  2. 2 Video iskeleti <video> ve birden çok <source> ile video iskeletini kurarsın. 5 dk
  3. 3 Track ve altyazı <track> ile altyazı ve chapter eklersin. 5 dk
  4. 4 Poster ve önizleme poster özniteliği ve preload ile önizleme davranışını ayarlarsın. 5 dk
  5. 5 Proje sonu - Video oynatıcı Tüm video tekniklerini birleştirip erişilebilir oynatıcıyı dokümante edersin. 6 dk
4
Karmaşık formlar
6 ders · 30 dk
  1. 1 Form yönelimi autocomplete token'ları (email, tel, address-line1) öğrenirsin. 5 dk
  2. 2 Hidden input <input type="hidden"> ile form meta verisi gönderirsin. 5 dk
  3. 3 File upload <input type="file">, multiple, accept kullanırsın. 5 dk
  4. 4 Range ve color <input type="range"> ve <input type="color"> kullanırsın. 5 dk
  5. 5 Output ve form event <output> ve form öznitelikleriyle hesap gösterimi öğrenirsin. 5 dk
  6. 6 Özet - Ayarlar paneli Tüm gelişmiş input türleriyle bir ayarlar paneli yazarsın. 5 dk
5
Meta veri ve SEO
6 ders · 30 dk
  1. 1 Meta description description, author, robots meta etiketlerini öğrenirsin. 5 dk
  2. 2 Open Graph og:title, og:image, og:type ile sosyal paylaşım meta verisi kurarsın. 5 dk
  3. 3 Twitter card twitter:card, twitter:title, twitter:image kullanırsın. 5 dk
  4. 4 Canonical ve hreflang <link rel="canonical"> ve hreflang ile çift içerik sorununu çözersin. 5 dk
  5. 5 Title ve slug stratejisi SEO uyumlu title ve slug yazma kurallarını öğrenirsin. 5 dk
  6. 6 Özet - SEO paketi Bir blog yazısı için tam SEO meta paketi yazarsın. 5 dk
6
Proje: Schema.org işaretlemeProje
5 ders · 25 dk
  1. 1 Proje: Schema.org işaretleme 5 derslik projenin genel bakışı: yapısal veri işaretleme. 4 dk
  2. 2 Itemtype ve itemid itemscope, itemtype ile bir Article işaretleme başlatırsın. 5 dk
  3. 3 Itemprop headline, datePublished, author itemprop'larını kullanırsın. 5 dk
  4. 4 Nested itemtype Person ve Organization gibi iç içe tipleri kullanırsın. 5 dk
  5. 5 Proje sonu - Yapısal veri Bir makaleye tam Schema.org işaretlemesini ekleyip dokümante edersin. 6 dk
7
Web bileşenleri HTML
6 ders · 30 dk
  1. 1 Template element <template> ile yeniden kullanılabilir HTML şablonu yazarsın. 5 dk
  2. 2 Slot element <slot> ile esnek içerik yerleştirme noktaları oluşturursun. 5 dk
  3. 3 Custom element isimleri Öğe adlandırma kurallarını ve yedek içerik öğrenirsin. 5 dk
  4. 4 Shadow DOM iskeleti Shadow DOM'un HTML tarafını (slot, template) öğrenirsin. 5 dk
  5. 5 Declarative shadow DOM <template shadowrootmode> ile bildirimsel shadow DOM yazarsın. 5 dk
  6. 6 Özet - Kart şablonu Template ve slot ile yeniden kullanılabilir kart şablonu yazarsın. 5 dk
8
Şablonlar ve partial
6 ders · 30 dk
  1. 1 Server-rendered vs client HTML şablonlama yaklaşımlarını ve HTML'in rolünü öğrenirsin. 5 dk
  2. 2 Partial HTML Yeniden kullanılabilir HTML parçaları tasarlamayı öğrenirsin. 5 dk
  3. 3 Data attributes data-* öznitelikleriyle bileşen verisi taşmayı öğrenirsin. 5 dk
  4. 4 Hydration hooks İstemci tarafı framework'ler için id ve data-* köprüsü yazarsın. 5 dk
  5. 5 Noscript ve progressive <noscript> ile yedek içerik yazmayı öğrenirsin. 5 dk
  6. 6 Özet - Bileşen iskeleti Tüm şablon teknikleriyle bir bileşen iskeleti yazarsın. 5 dk
9
Proje: Dashboard widgetProje
5 ders · 25 dk
  1. 1 Proje: Dashboard widget 5 derslik projenin genel bakışı: şablonlu bir widget iskeleti. 4 dk
  2. 2 Widget iskeleti Anlamsal etiketlerle widget iskeletini kurarsın. 5 dk
  3. 3 Veri görsel yapı Veriyi tablo ve figure ile yapılandırırsın. 5 dk
  4. 4 Şablon ve slot <template> ve <slot> ile yeniden kullanılabilir parça yazarsın. 5 dk
  5. 5 Proje sonu - Widget Tüm parçaları birleştirip noscript yedeği ve data-* hook'ları ekleyip dokümante edersin. 6 dk
10
İleri seviye finaliFinal
5 ders · 31 dk
  1. 1 Meydan okuma - Responsive görsel <picture> ile ekran ve format bazlı değişen bir hero yazarsın. 6 dk
  2. 2 Meydan okuma - Erişilebilir video Altyazılı, poster'li ve preload kontrollü bir video yazarsın. 6 dk
  3. 3 Meydan okuma - Karmaşık form Hidden, file, range, color ve output içeren bir form yazarsın. 6 dk
  4. 4 Meydan okuma - SEO ve yapısal veri Bir ürüne tam SEO + Schema.org işaretleme paketi yazarsın. 6 dk
  5. 5 Meydan okuma - İleri seviye projesi Tüm ileri konuları birleştiren bir dashboard sayfası yazarsın. 7 dk

WCAG, ileri ARIA desenleri, performans, uluslararasılaştırma, güvenlik ve ileri web bileşenleri konularını öğrenirsin.

1
İleri erişilebilirlik
6 ders · 36 dk
  1. 1 WCAG ilkeleri POUR ilkelerini (Perceivable, Operable, Understandable, Robust) öğrenirsin. 6 dk
  2. 2 Klavye navigasyonu Tab sırası, tabindex ve focus yönetimini öğrenirsin. 6 dk
  3. 3 Live regions aria-live ve aria-atomic ile dinamik içerik duyurusu yaparsın. 6 dk
  4. 4 Dialog ve modal <dialog> etiketi ve ARIA diyaloğu desenini öğrenirsin. 6 dk
  5. 5 Heading outline Belge başlık hiyerarşisini ve outline algoritmasını öğrenirsin. 6 dk
  6. 6 Özet - Erişilebilir widget Tüm ARIA teknikleriyle erişilebilir bir widget iskeleti yazarsın. 6 dk
2
İleri ARIA desenleri
6 ders · 36 dk
  1. 1 ARIA roles role değer tiplerini (widget, document, landmark, abstract) öğrenirsin. 6 dk
  2. 2 States ve properties aria-* durum ve özelliklerini doğru kullanırsın. 6 dk
  3. 3 Grid ve tree ARIA grid, tree ve treegrid desenlerini öğrenirsin. 6 dk
  4. 4 Tabs ve accordion ARIA tab ve accordion desenlerini uygularsın. 6 dk
  5. 5 Menu ve menubar ARIA menu ve menubar desenlerini öğrenirsin. 6 dk
  6. 6 Özet - Erişilebilir tabpanel Tüm ARIA desenleriyle bir tabpanel bileşeni iskeleti yazarsın. 6 dk
3
Proje: Performanslı sayfaProje
5 ders · 29 dk
  1. 1 Proje: Performanslı sayfa 5 derslik projenin genel bakışı: CLS ve LCP odaklı sayfa. 5 dk
  2. 2 Kritik kaynak sırası <head> içindeki kaynak sıralamasını ve preload kullanırsın. 5 dk
  3. 3 Görsel optimizasyonu srcset, sizes, loading, decoding ve width/height ile optimize görseller yazarsın. 6 dk
  4. 4 Şablon ve noscript <template> ve <noscript> ile progressive enhancement kurarsın. 6 dk
  5. 5 Proje sonu - Performans sayfası Tüm performans tekniklerini birleştirip dokümante edersin. 7 dk
4
Uluslararasılaştırma
6 ders · 36 dk
  1. 1 Lang ve dir lang ve dir öznitelikleriyle çift yönlü ve çok dilli yapı kurarsın. 6 dk
  2. 2 Hreflang stratejisi <link rel="alternate" hreflang> ile çok dilli sayfa kümesi kurarsın. 6 dk
  3. 3 Bidi ve bdo <bdi> ve <bdo> ile karışık yönli metinleri kontrol edersin. 6 dk
  4. 4 Rtl uyumlu işaretleme RTL uyumlu tablo, form ve landmark yazmayı öğrenirsin. 6 dk
  5. 5 Çok dilli SEO Çok dilli sayfalarda canonical ve hreflang birlikteliğini öğrenirsin. 6 dk
  6. 6 Özet - Çok dilli sayfa Tüm i18n teknikleriyle iki dilli bir sayfa iskeleti yazarsın. 6 dk
5
Proje: Güvenli sayfaProje
5 ders · 30 dk
  1. 1 Proje: Güvenli form sayfası 5 derslik projenin genel bakışı: güvenlik odaklı form sayfası. 5 dk
  2. 2 Rel noopener target="_blank" ile rel="noopener noreferrer" kullanımını öğrenirsin. 6 dk
  3. 3 CSP meta <meta http-equiv="Content-Security-Policy"> temel kullanımını öğrenirsin. 6 dk
  4. 4 Referrer policy <meta name="referrer"> ile referrer kontrolünü öğrenirsin. 6 dk
  5. 5 Proje sonu - Güvenli sayfa Tüm güvenlik tekniklerini birleştirip dokümante edersin. 7 dk
6
İleri web bileşenleri
6 ders · 36 dk
  1. 1 Custom element registry customElements API'sinin HTML tarafını (isim kuralları, yedek) öğrenirsin. 6 dk
  2. 2 Slot ve shadow boundary Shadow boundary'ı ve slot dağıtımını öğrenirsin. 6 dk
  3. 3 Declarative shadow DOM <template shadowrootmode> ile SSR-uyumlu shadow DOM yazarsın. 6 dk
  4. 4 Form-associated custom element ElementInternals ve form özniteliği ile form bağlamayı öğrenirsin. 6 dk
  5. 5 AOM ve accessibility tree Öğelerin accessibility tree'ye etkisini öğrenirsin. 6 dk
  6. 6 Özet - Bileşen kütüphanesi iskeleti Tüm web bileşen teknikleriyle bir kart ve modal iskeleti yazarsın. 6 dk
7
Uzman finaliFinal
5 ders · 36 dk
  1. 1 Meydan okuma - Erişilebilir dialog <dialog> ve ARIA ile tam erişilebilir bir modal yazarsın. 7 dk
  2. 2 Meydan okuma - ARIA tabpanel Tam ARIA tabpanel deseniyle bir sekmeli arayüz yazarsın. 7 dk
  3. 3 Meydan okuma - Çok dilli RTL hreflang, dir ve bidi içeren iki dilli RTL sayfa yazarsın. 7 dk
  4. 4 Meydan okuma - Güvenlik paketi CSP, referrer policy ve noopener içeren güvenli bir sayfa yazarsın. 7 dk
  5. 5 Meydan okuma - Uzman projesi Tüm uzman konularını birleştiren bir uygulama iskeleti yazarsın. 8 dk

Dersler ücretsiz, hesap ilerlemeni korur

Hesap açmak zorunlu değil. Açarsan kaldığın yerden devam eder, emeğini kaybetmezsin.

  • İlerlemen her cihazda kayıtlı
  • XP ve rozet kazan
  • Günlük seriyi koru
  • Kursu bitirince sertifika al
ücretsiz hesap aç

Sık sorulan sorular

HTML dersleri ücretsiz mi?

Evet. HTML kursundaki 230 dersin tamamı ücretsiz ve hesap açmadan başlayabilirsin.

Başlamak için ön bilgi gerekiyor mu?

Hayır. Başlangıç seviyesi sıfırdan anlatır; yalnızca bir tarayıcı yeterli. Konuyu biliyorsan üst seviyelerden başlayabilirsin.

Kursu bitirmek ne kadar sürer?

Dersler 2–8 dakikalık. Tüm kurs yaklaşık 20 saat; günde 15–20 dakikayla birkaç ayda bitirebilirsin.

Sertifika veriliyor mu?

Evet. Ücretsiz hesapla kursu tamamladığında adına doğrulanabilir bir sertifika oluşturulur.

Hesap açmadan ilerlemem kaybolur mu?

Hesapsız ilerlemen yalnızca kullandığın tarayıcıda tutulur. Ücretsiz hesap açtığında bu ilerleme hesabına aktarılır.

Sonraki adım CSS

CSS3 ve modern CSS ile web sayfalarını biçimlendirmeyi öğrenin.