İleri CSS Eğitimi — Flexbox, Grid, Animasyon

Eğitim Hakkında

İleri seçicilerden Flexbox ve Grid'e, dönüşüm, animasyon ve duyarlı tasarıma

HTML with JavaScript & CSS: Advanced CSS Eğitimi, modern CSS ile karmaşık ve duyarlı arayüzleri sağlam biçimde kurmayı öğretir. Katılımcılar ileri seçiciler ve özgüllük, kutu modeli derinliği, Flexbox ve Grid yerleşimiyle başlar. Ardından transform, transition ve keyframe animasyonları, custom properties, duyarlı tasarım ve container query konularını uygular. Program bakımı kolay ve performanslı CSS mimarisi kurmayı ve JavaScript ile stili birlikte yönetmeyi hedefler.

Süre ve Format

5 Gün. Her gün dört modül; her CSS tekniği gerçek bir arayüz parçası üzerinde kurularak tarayıcıda sonucu anında denenir.

Seviye

İleri Seviye — Flexbox, Grid, dönüşüm, animasyon, özel özellikler ve duyarlı tasarımla ileri CSS

Öğrenme Metodu

Aynı arayüz bileşeni farklı yerleşim ve animasyon teknikleriyle kurulur; her yaklaşımın güçlü ve zayıf yanları karşılaştırılır.

Neden Bu Eğitim?

📐Modern yerleşim

Flexbox ve Grid ile float ve hile gerektirmeyen, esnek ve bakımı kolay karmaşık sayfa düzenleri kurarsınız.

🎬Akıcı hareket

Transition, transform ve keyframe animasyonlarıyla performanslı ve göze hoş gelen arayüz hareketleri tasarlarsınız.

📱Gerçek duyarlılık

Media ve container query, akışkan birimler ve clamp ile her ekranda doğru çalışan gerçekten duyarlı arayüzler üretirsiniz.

Anahtar Konular

ileri css eğitimicss grid eğitimiflexbox eğitimicss animasyon eğitimiduyarlı tasarım eğitimicss custom propertiesresponsive web tasarımmodern css kursuön yüz css eğitimicss3 eğitimi

“İyi CSS yalnızca güzel görünmez; öngörülebilir seçicilerle, modern yerleşimle ve her ekranda doğru davranışla ayakta durur.”

Ön Koşullar

Eğitimden en iyi verimi almak için önerilen bilgi düzeyi

1

Temel CSS bilgisi

Seçici, renk, yazı ve basit kutu modeli bilgisi ileri konuları takip etmek için gerekir.

2

Sağlam HTML

Anlamsal etiketler ve belge yapısına hâkimiyet, stil uygulamasını kolaylaştırır.

3

Temel JavaScript

Sınıf ekleme/çıkarma ve olay dinleme düzeyinde JavaScript, stil etkileşimi için faydalıdır.

4

Geliştirici araçları

Tarayıcı öğe denetçisi ve stil panelini kullanabilmek hata ayıklamayı hızlandırır.

Eğitim İçeriği

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.

Günün hedefiKatılımcı CSS seçicilerini, özgüllük ve cascade kurallarını derinlemesine kavrar; kutu modeli, birim sistemi ve akış davranışını kontrol ederek sağlam stil temeli kurar.

Modül 1

İleri Seçiciler ve Birleştiriciler

Alt, kardeş ve bitişik kardeş birleştiricileri
:nth-child ve :nth-of-type ile sıralı seçim
:not, :is ve :where ile seçici gruplama
Öznitelik seçicileri ve kısmi eşleşme
::before ve ::after ile sözde öğe üretimi
:has() ile üst öğeye göre koşullu seçim

Modül 2

Özgüllük ve Cascade

Özgüllük (specificity) hesaplama kuralları
Cascade ve kaynak sırasının önceliği
!important kullanımı ve kaçınma gerekçesi
Kalıtım (inheritance) ve initial, inherit
@layer ile katman tabanlı önceliklendirme
Seçici karmaşıklığını düşük tutma stratejisi

Modül 3

Birim Sistemi ve Hesaplama

px, em ve rem arasındaki ilişki ve seçim
%, vw, vh ve görünüm alanı birimleri
ch ve ex gibi tipografik birimler
min(), max() ve clamp() ile esnek değer
calc() ile birim karışık hesaplama
Akışkan tipografi için clamp uygulaması

Modül 4

Kutu Modeli ve Akış

box-sizing ile border-box kutu hesabı
margin çökmesi (collapsing) davranışı
block, inline ve inline-block akışı
position: relative, absolute ve sticky
z-index ve yığılma bağlamı (stacking context)
overflow ve kaydırma davranışı yönetimi

Günün hedefiKatılımcı Flexbox ile tek boyutlu esnek düzenler kurar; ana ve çapraz eksende hizalama, esneme ve sıralama kurallarıyla duyarlı bileşenler tasarlar.

Modül 1

Flex Konteyner ve Eksen

display: flex ile esnek konteyner oluşturma
flex-direction ile ana eksen yönü
flex-wrap ile satır taşması yönetimi
Ana eksen ve çapraz eksen kavramı
flex-flow kısaltmasıyla yön ve sarma
Konteyner ve öğe sorumluluk ayrımı

Modül 2

Hizalama ve Dağıtım

justify-content ile ana eksende dağıtım
align-items ile çapraz eksende hizalama
align-content ile çok satırlı hizalama
gap ile öğeler arası boşluk verme
space-between ve space-around farkı
align-self ile tekil öğe hizalaması

Modül 3

Esneme ve Öğe Boyutu

flex-grow ile boş alanı paylaştırma
flex-shrink ile daralma davranışı
flex-basis ile başlangıç boyutu
flex kısaltmasının yorumlanması
min-width ile daralmayı sınırlama
Esnek kart ve navigasyon düzeni örneği

Modül 4

Sıralama ve Pratik Desenler

order ile görsel sıralamayı değiştirme
Dikey ortalama (holy grail) deseni
Yapışkan alt bilgi (sticky footer) düzeni
Flexbox ile duyarlı navigasyon çubuğu
Erişilebilirlikte görsel ve DOM sırası uyumu
Flexbox ve Grid arasında seçim kriteri

Günün hedefiKatılımcı CSS Grid ile iki boyutlu karmaşık düzenler kurar; satır ve sütun tanımı, isimli alanlar ve otomatik yerleşimle esnek ve duyarlı sayfa yapıları tasarlar.

Modül 1

Grid Şablonu Tanımı

display: grid ile ızgara konteyneri
grid-template-columns ve rows tanımı
fr birimiyle oransal sütun genişliği
repeat() ile tekrar eden izler
minmax() ile esnek iz boyutu tanımı
gap ile satır ve sütun boşluğu

Modül 2

Izgarada Öğe Yerleştirme

grid-column ve grid-row ile konumlama
Hat (line) numarasıyla iz kapsama
span ile birden çok hücreyi kaplama
grid-template-areas ile isimli alanlar
grid-area ile alana yerleştirme
Örtüşen öğeler ve z-index yönetimi

Modül 3

Otomatik Yerleşim ve Akış

auto-fill ve auto-fit ile duyarlı sütun
repeat(auto-fit, minmax()) ile akışkan ızgara
grid-auto-flow ile otomatik akış yönü
grid-auto-rows ile örtük iz boyutu
dense paketleme ile boşluk doldurma
Kart ızgarası ve galeri düzeni örneği

Modül 4

Hizalama ve Duyarlı Grid

justify-items ve align-items hücre hizası
justify-content ve align-content ızgara hizası
place-items ve place-content kısaltmaları
Media query ile ızgara şablonu değişimi
Subgrid ile iç içe ızgara hizalama
Grid ile tam sayfa düzen (layout) kurma

Günün hedefiKatılımcı transform ile öğeleri dönüştürür, transition ve keyframe animasyonlarıyla akıcı hareket kurar ve bunları performanslı, erişilebilir biçimde uygular.

Modül 1

2B ve 3B Dönüşümler

translate, scale ve rotate dönüşümleri
skew ve birden çok dönüşümün birleşimi
transform-origin ile dönüşüm merkezi
perspective ile 3B derinlik etkisi
rotateX, rotateY ve 3B döndürme
backface-visibility ve kart çevirme etkisi

Modül 2

Geçişler (Transition)

transition-property ile hedef özellik
duration ve delay ile zamanlama
timing-function ve cubic-bezier eğrisi
Hover ve odak durumunda yumuşak geçiş
Birden çok özelliği birlikte geçirme
Yalnızca animasyon dostu özellikleri seçme

Modül 3

Keyframe Animasyonları

@keyframes ile animasyon aşamaları tanımı
animation-name ve duration bağlama
iteration-count ve infinite döngü
direction ve fill-mode davranışı
animation-delay ile sıralı başlatma
Yükleniyor göstergesi ve dikkat animasyonu

Modül 4

Performans ve Erişilebilirlik

transform ve opacity ile GPU hızlandırma
will-change ile tarayıcıya ipucu verme
Layout ve paint tetikleyen özelliklerden kaçınma
prefers-reduced-motion ile hareketi azaltma
60 fps için reflow maliyetini azaltma
DevTools performans paneliyle ölçüm

Günün hedefiKatılımcı custom properties ile tema kurar, media ve container query ile duyarlı tasarım uygular ve metodoloji ile ölçeklenebilir, bakımı kolay CSS mimarisi oluşturur.

Modül 1

CSS Custom Properties

-degisken tanımı ve var() ile kullanım
Kapsam (scope) ve kalıtım davranışı
var() içinde yedek (fallback) değer
JavaScript ile değişken okuma ve yazma
Tema değiştirme için değişken kullanımı
calc ile değişken tabanlı hesaplama

Modül 2

Duyarlı Tasarım Teknikleri

Mobile-first yaklaşımla media query
min-width ve max-width kırılma noktaları
Akışkan ızgara ve esnek görseller
clamp ile akışkan tipografi ve boşluk
prefers-color-scheme ile koyu tema
Yüksek yoğunluklu ekran için görsel sunma

Modül 3

Container ve Modern Sorgular

container-type ile bağlam tanımlama
@container ile bileşene göre duyarlılık
Container query birimleri (cqw, cqh)
@supports ile özellik tespiti yapma
aspect-ratio ile en-boy oranı koruma
Mantıksal özellikler (inline/block) kullanımı

Modül 4

Ölçeklenebilir CSS Mimarisi

BEM ile anlamlı sınıf adlandırma
Utility-first yaklaşımın güçlü yanları
@layer ile katmanlı stil organizasyonu
Tasarım belirteçleri (design tokens) kurma
Sass ile değişken, mixin ve iç içe seçici
Kritik CSS ve yükleme performansı

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Seçici ustalığı

İleri seçiciler, özgüllük ve cascade kurallarını kavrayarak öngörülebilir ve çakışmasız stil yazabilirsiniz.

✅

Kutu modeli kontrolü

box-sizing, konumlandırma ve yığılma bağlamını yöneterek karmaşık yerleşimleri güvenle kurgularsınız.

✅

Flexbox yerleşimi

Flexbox ile tek boyutlu esnek düzenleri, hizalama ve esneme kurallarıyla duyarlı biçimde tasarlarsınız.

✅

Grid ile düzen

CSS Grid ile iki boyutlu karmaşık ve duyarlı sayfa düzenlerini isimli alanlar ve otomatik akışla kurabilirsiniz.

✅

Dönüşüm ve geçiş

Transform ve transition ile öğeleri dönüştürüp durumlar arasında akıcı ve performanslı geçişler kurarsınız.

✅

Animasyon tasarımı

Keyframe animasyonlarıyla döngülü ve sıralı hareketler üretir, performans ve erişilebilirliği birlikte gözetirsiniz.

✅

Tema ve değişken

Custom properties ile tema ve tasarım belirteçleri kurarak JavaScript ile dinamik stil yönetimini sağlarsınız.

✅

Duyarlı ve ölçeklenebilir

Media ve container query, clamp ve BEM ile her ekranda çalışan, bakımı kolay CSS mimarisi oluşturursunuz.

Kimler İçin Uygundur?

CSS bilgisini profesyonel düzeye taşımak isteyen ön yüz geliştiriciler
karmaşık yerleşim
animasyon kuran arayüz geliştiricileri ve duyarlı tasarımı derinleştirmek isteyen web geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

CSS bilgisini profesyonel düzeye taşımak isteyen ön yüz geliştiriciler, karmaşık yerleşim ve animasyon kuran arayüz geliştiricileri ve duyarlı tasarımı derinleştirmek isteyen web geliştiricileri için uygundur. Temel CSS ve sağlam HTML bilgisi beklenir.

Flexbox mu Grid mi öğretiliyor?

İkisi de ayrıntılı işlenir. Flexbox tek boyutlu bileşen düzenleri, CSS Grid ise iki boyutlu sayfa düzenleri için ele alınır. Hangi senaryoda hangisinin uygun olduğu ve ikisinin birlikte kullanımı gerçek örneklerle karşılaştırmalı gösterilir.

Sass veya framework kapsanıyor mu?

Eğitim ağırlıklı olarak yalın modern CSS'e odaklanır; son gün Sass ile değişken, mixin ve iç içe seçici ile BEM gibi mimari yaklaşımlar işlenir. Kazanılan temel, Tailwind gibi framework'leri sonradan öğrenmeyi de kolaylaştırır.

Eğitimin süresi ve formatı nedir?

Eğitim beş gün sürer ve her gün dört modülden oluşur. Her CSS tekniği gerçek bir arayüz parçası üzerinde kurulur ve tarayıcıda sonucu anında denenir. Yüz yüze veya online yapılabilir ve kurumun ihtiyacına göre uyarlanır.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen CSS arayüz örneklerini belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

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.

Örnek Sertifika

HTML WITH JAVASCRIPT & CSS: ADVANCED CSS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

İleri Seçiciler ve Birleştiriciler

Özgüllük ve Cascade

Birim Sistemi ve Hesaplama

Kutu Modeli ve Akış

Flex Konteyner ve Eksen

Hizalama ve Dağıtım

Esneme ve Öğe Boyutu

Sıralama ve Pratik Desenler

Grid Şablonu Tanımı

Izgarada Öğe Yerleştirme

Otomatik Yerleşim ve Akış

Hizalama ve Duyarlı Grid

2B ve 3B Dönüşümler

Geçişler (Transition)

Keyframe Animasyonları

Performans ve Erişilebilirlik

CSS Custom Properties

Duyarlı Tasarım Teknikleri

Container ve Modern Sorgular

Ölçeklenebilir CSS Mimarisi

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Improving Responsiveness, Sharing Collections, and Parallelizing Algorithms Eğitimi

Introduction to HTML and CSS - Beginner Eğitimi

Introduction to HTML, CSS and JavaScript (TT4003) Eğitimi

JavaScript Rules, Functions, & HTML Elements Eğitimi

JQuery ve Bootstrap ile UI Eğitimi

Managing CSS with Scripts Eğitimi