Sayfalarını etkileşimli hâle getir
HTML ile İnteraktif Web Sayfaları Tasarımı Eğitimi, statik sayfaları JavaScript ve DOM ile etkileşimli arayüzlere dönüştürmeyi öğretir.
DOM seçiminden olaylara, form doğrulamadan fetch ve erişilebilir bileşenlere
HTML ile İnteraktif Web Sayfaları Tasarımı Eğitimi, statik HTML sayfalarını JavaScript ve DOM ile kullanıcıya yanıt veren arayüzlere dönüştürmeyi öğretir. Katılımcılar DOM ağacını seçer ve değiştirir, olay dinleyicileriyle kullanıcı etkileşimini yakalar. Program form doğrulama, fetch ile sunucudan veri çekme ve dinamik içerik üretimini kapsar. Son gün sekme, modal ve açılır menü gibi erişilebilir etkileşimli bileşenler kurularak küçük bir uygulama tamamlanır.
4 Gün. Her gün dört modül; her kavram çalışan bir etkileşim örneğiyle uygulanır ve bileşenler erişilebilirlik ve kullanılabilirlik açısından denetlenir.
Orta Seviye — HTML yapısını JavaScript ve DOM ile birleştirerek etkileşimli web sayfaları kurmayı öğreten program
Tek bir sayfa, modül modül etkileşimli hâle getirilir; her yeni JavaScript kavramı doğrudan sayfadaki bir bileşene uygulanarak pekiştirilir.
Olay dinleyicileri ve DOM güncellemeleriyle kullanıcı eylemlerine anında yanıt veren canlı arayüzler kurarsınız.
fetch ve asenkron JavaScript ile sunucudan veri çekerek sayfayı dinamik içerikle güncellemeyi öğrenirsiniz.
Modal, sekme ve menü gibi bileşenleri klavye ve ekran okuyucuyla da kullanılabilir biçimde doğru kurarsınız.
Eğitime başlamadan önce beklenen bilgi ve hazırlık
Belge yapısı, etiketler ve form öğelerini bilmek etkileşim eklenecek yapıyı anlamayı sağlar.
Değişken, fonksiyon, dizi ve koşul gibi temel JavaScript kavramlarına aşinalık dersin akışını kolaylaştırır.
Seçiciler ve class ile stil değiştirmeyi bilmek, durum değişimlerini görselleştirmeyi kolaylaştırır.
Bir editör ve geliştirici araçları olan güncel bir tarayıcı, konsol ile çalışmak için yeterlidir.
Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.
Program sonunda katılımcılar:
querySelector ve ilişkisel yöntemlerle DOM öğelerini güvenle seçer ve ağ üzerinde doğru biçimde gezinirsiniz.
textContent, öznitelik ve classList ile sayfa içeriğini ve görünümünü XSS riskine dikkat ederek güncellersiniz.
addEventListener, olay nesnesi ve yayılma kavramlarıyla kullanıcı etkileşimini doğru biçimde yakalarsınız.
Köpürmeden yararlanan delegasyonla dinamik öğeleri tek dinleyiciyle verimli biçimde yönetirsiniz.
createElement, template ve DocumentFragment ile sayfaya verimli ve güvenli biçimde dinamik öğe eklersiniz.
FormData ve Constraint Validation API ile form gönderimini yönetir ve erişilebilir doğrulama kurarsınız.
async ve await ile fetch kullanarak sunucudan veri çeker, hata ve yükleniyor durumlarını düzgün yönetirsiniz.
Sekme, modal ve menüyü ARIA, odak yönetimi ve klavye desteğiyle herkes için kullanılabilir biçimde kurarsınız.
Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.
Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.
try/catch, özel hatalar, Promise ve async/await hata yönetimi, global yakalama ve izleme ile dayanıklı JavaScript yazmayı öğreten eğitim.
Detayları Gör →
Less değişkenleri, mixin, iç içe yazım, guard, fonksiyon ve derleme hattıyla ölçeklenebilir ve sürdürülebilir CSS yazmayı öğreten uygulamalı eğitim.
Detayları Gör →
Sass değişkeni, mixin, @extend, @if ve @each kontrol yapıları, map ve @use modül sistemiyle modüler CSS yazmayı öğreten uygulamalı eğitim.
Detayları Gör →
DOM, olaylar, form doğrulama, fetch ve modüllerle çerçeve kullanmadan etkileşimli web uygulamaları kurmayı öğreten uygulamalı JavaScript eğitimi.
Detayları Gör →
Cascade layers, :has, container query, subgrid, oklch ve scroll-driven animasyonlarla güncel CSS özelliklerini öğreten ileri seviye front-end eğitimi.
Detayları Gör →
Semantik HTML, form ve medya, seçiciler, kutu modeli, renk ve tipografiyle HTML ve CSS özelliklerini derinlemesine öğreten ön yüz geliştirme eğitimi.
Detayları Gör →