Arayüzlerinize akıcı CSS hareketi katın
Getting Started with CSS-based Animations Eğitimi, arayüzlere JavaScript'e ihtiyaç duymadan akıcı hareket katmayı öğretir. Program transition ile durum geçişleri ve transform ile 2B ve 3B dönüşümlerle başlar; @keyframes ile çok adımlı animasyonlar ve kademele…
Geçiş ve dönüşümlerden keyframe animasyonlarına, performans ve erişilebilirliğe uzanan akış
Getting Started with CSS-based Animations Eğitimi, arayüzlere JavaScript'e ihtiyaç duymadan akıcı hareket katmayı öğretir. Katılımcılar transition ile durum geçişlerini, transform ile 2B ve 3B dönüşümleri, @keyframes ile çok adımlı animasyonları uygular. Program zamanlama fonksiyonları ve cubic-bezier ile doğal yumuşamayı, animasyon performansını ve derleme katmanını, scroll tabanlı hareketi ve prefers-reduced-motion ile erişilebilirliği kapsar.
3 Gün. Her gün dört modül; her teknik gerçek arayüz bileşenleri üzerinde animasyonlanıp tarayıcıda akıcılığıyla değerlendirilir.
Orta Seviye — Geçiş, dönüşüm, keyframe animasyonu ve performansla akıcı CSS tabanlı hareket tasarımı
Her modülde yazılan animasyon canlı bir bileşene uygulanır; akıcılık ve performans tarayıcıda gözlemlenip denetlenir.
Durum geçişleri ve mikro etkileşimlerle arayüzü daha canlı ve anlaşılır kılarak kullanıcı deneyimini belirgin biçimde zenginleştirirsiniz.
Animasyonları çoğunlukla CSS ile kurarak JavaScript yükünü azaltır, derleme katmanından yararlanıp akıcı ve performanslı sonuç alırsınız.
prefers-reduced-motion ve bilinçli tasarımla hareketi rahatsız etmeyen, herkes için erişilebilir ve amaçlı animasyonlar üretirsiniz.
Eğitimden verim almak için faydalı olacak bilgi ve ortam
Sayfa yapısını kuran temel HTML etiketlerine aşinalık beklenir; animasyonlar bu öğelere uygulanır.
Seçiciler, kutu modeli ve temel özellik yazımı gibi CSS konularını bilmek eğitimden verim için gereklidir.
Tarayıcı geliştirici araçlarıyla animasyon denetimi ve performans gözlemi örneklerde kullanılır.
VS Code gibi bir editör ve güncel bir tarayıcı gereklidir; canlı önizleme ile hareket anında görülür.
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:
transition ile hover, focus ve durum değişimlerinde yumuşak geçişler kurar, animasyonlanabilir özellikleri doğru seçersiniz.
ease, steps ve cubic-bezier ile hareketin ritmini kontrol eder, doğal ve algılanan hızı iyi ayarlanmış animasyonlar üretirsiniz.
transform ile 2B ve 3B dönüşümleri uygular, perspektif ve dönüşüm merkezini yöneterek kart çevirme gibi efektler kurarsınız.
@keyframes ile çok adımlı animasyonlar tanımlar, yineleme, yön ve fill-mode davranışını yöneterek karmaşık hareketler kurarsınız.
Liste ve bileşenlerde gecikmeli kademe efektleri kurar, yükleme göstergesi ve dikkat çeken desenleri etkili biçimde uygularsınız.
transform ve opacity odaklı yaklaşımla derleme katmanından yararlanır, jank'ı önler ve akıcı, yüksek kare hızlı animasyonlar üretirsiniz.
Kaydırmaya bağlı animasyon ve görünürlük tetiklemeli hareketle sayfaya kontrollü ve amaçlı scroll efektleri eklersiniz.
prefers-reduced-motion ve amaçlı tasarımla rahatsız etmeyen, herkes için erişilebilir ve anlamlı mikro etkileşimler oluşturursunuz.
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.
Bootstrap 5 geliştirme ortamı kurma eğitimi. CDN ve npm, Sass kaynağından derleme, PostCSS, Vite ve Webpack entegrasyonu uygulamalı anlatılır.
Detayları Gör →
Bootstrap 5 grid, flex yardımcıları ve form bileşenleriyle duyarlı düzen ve form kurma eğitimi. Input group, floating label ve doğrulama uygulamalı.
Detayları Gör →
Adobe Dreamweaver CC ile HTML yazımı ve tarayıcı önizlemesi eğitimi. Code ve Live view, Emmet, CSS Designer ve cihaz önizlemesi uygulamalı anlatılır.
Detayları Gör →
Adobe Captivate ile duyarlı e-öğrenme projeleri eğitimi. Fluid Boxes, breakpoint görünümleri, HTML5 yayını ve SCORM ile LMS entegrasyonu uygulamalı.
Detayları Gör →
Saf CSS ile duyarlı web tasarımı eğitimi. Mobil öncelik, media query, Flexbox, CSS Grid, srcset, clamp ve container query uygulamalı anlatılır.
Detayları Gör →
Bootstrap ızgarası ve bileşenleri, jQuery ile DOM ve AJAX, ilişkisel veritabanı ve SQL ile dinamik web sayfası kurmayı öğreten uygulamalı eğitim.
Detayları Gör →