Sass ile ölçeklenen stil sistemleri yazın
Extending CSS with Sass Eğitimi, CSS'i ölçeklenebilir ve sürdürülebilir kılan Sass ön işlemcisini uygulamalı öğretir. Program SCSS söz dizimi, değişken, iç içe yazım ve partial'larla başlar; mixin, @function ve @extend ile yeniden kullanım işlenir.
Değişken ve iç içe yazımdan mixin ve @extend'e, kontrol yapılarından modüler mimariye akış
Extending CSS with Sass Eğitimi, CSS'i ölçeklenebilir ve sürdürülebilir kılan Sass ön işlemcisini uygulamalı öğretir. Katılımcılar değişken, iç içe yazım ve partial'larla stilleri düzenler; mixin, fonksiyon ve @extend ile yeniden kullanım kurar. @if, @each, @for ve @while kontrol yapıları ile map ve liste veri yapıları işlenir. Program, @use ve @forward modül sistemi, 7-1 mimarisi ve derleme hattının üretime taşınmasıyla tamamlanır.
4 Gün. Her gün dört modül; sade bir stil dosyası adım adım değişken, mixin ve modül sistemiyle Sass tabanlı bir yapıya dönüşür.
Orta Seviye — Sass değişkeni, mixin, @extend, kontrol yapıları ve modüler mimariyle güçlü stil yazımı
Her modülde yazılan Sass kodu CSS'e derlenir ve tarayıcıda görülür; teknikler gerçek bir stil sistemi üzerinde uygulanır.
Değişken ve map'lerle renk, boşluk ve tipografi değerlerini merkezi tutarak proje genelinde tutarlı ve kolay güncellenen stil kurarsınız.
Mixin, fonksiyon ve @extend ile tekrar eden desenleri bir kez yazar, farklı bileşenlerde esnek ve tutarlı biçimde yeniden kullanırsınız.
@use ve @forward modül sistemiyle kodu bağımsız parçalara ayırır, 7-1 gibi düzenlerle ölçeklenebilir bir stil mimarisi kurarsınız.
Eğitimden verim almak için faydalı olacak bilgi ve ortam
Seçiciler, kutu modeli ve temel biçimlendirme gibi CSS konularına iyi düzeyde aşinalık beklenir.
Komut satırında basit komutlar çalıştırmak derleme adımlarında gereklidir.
Node ve npm ile paket kurulumu Dart Sass derleyicisini çalıştırmak için faydalıdır.
Bir kod editörü ve güncel bir tarayıcı derlenen stilleri görmek için gereklidir.
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:
Sass değişkenleri, list ve map'lerle tasarım değerlerini merkezi tutarak tutarlı ve kolay güncellenen stil sistemleri kurarsınız.
İç içe yazım ve partial'larla kodu düzenler, & referansını kullanır ve dosyaları mantıklı modüllere bölersiniz.
Parametreli mixin'ler ve @content bloğuyla tekrar eden desenleri esnek ve yeniden kullanılabilir biçimde yazarsınız.
@function ile değer döndüren işlevler yazar, renk ve matematik fonksiyonlarıyla dinamik ve tutarlı değerler üretirsiniz.
@extend ve placeholder seçicilerle ortak stilleri paylaşır, hangi senaryoda mixin'e tercih edileceğini bilerek uygularsınız.
@if, @each, @for ve @while ile koşullu ve döngüsel stil üretir, yardımcı sınıf setlerini otomatik oluşturursunuz.
@use ve @forward ile kodu bağımsız modüllere ayırır, namespace ile çakışmasız ve düzenli bir yapı kurarsınız.
7-1 mimarisi, tema token'ları ve derleme hattıyla ölçeklenebilir ve sürdürülebilir bir stil sistemini üretime taşırsı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.
transition, transform, keyframe animasyonu ve performans teknikleriyle akıcı ve erişilebilir CSS tabanlı hareket tasarlamayı öğreten uygulamalı eğitim.
Detayları Gör →
Web'in çalışmasından HTML yapısına, CSS stillemeden Flexbox yerleşime ve gerçek bir sayfa projesine sıfırdan HTML ve CSS öğreten başlangıç eğitimi.
Detayları Gör →
Semantik HTML, WCAG, klavye ve ekran okuyucu, ARIA ve test araçlarıyla erişilebilir ve kapsayıcı web arayüzleri kurmayı öğreten uygulamalı eğitim.
Detayları Gör →
HTML belge yapısı, anlamsal etiketler, bağlantı, görsel, tablo ve form ile sıfırdan web içeriği yazma eğitimi. Erişilebilir ve doğrulanmış HTML temeli.
Detayları Gör →
HTML5'in gelişmiş formları, audio/video, Canvas, SVG, Web Storage, IndexedDB ve cihaz API'leriyle zengin içerik geliştirme eğitimi. İleri ve uygulamalı.
Detayları Gör →
HTML form kontrolleri, tek ve iki yönlü veri bağlama ve koleksiyonları liste, tablo ve ızgaraya bağlama eğitimi. Tepkisel ve performanslı arayüzler.
Detayları Gör →