CSS EĞİTİMİ

Modern CSS ve Düzen

HTML sayfaya yapı kazandırır; CSS o yapıya görünüm verir. Eski CSS, sayfayı görsel olarak düzenleyen sınırlı bir araçtı. Bugünkü modern CSS ise Flexbox, Grid, animasyon, değişken, custom property gibi araçlarla neredeyse programlama dili düzeyinde güçlüdür. Tasarımcının veya geliştiricinin CSS'i sağlam bilmesi modern web'de tartışılmaz bir gereklilik haline geldi.

CSS Eğitimi, modern CSS yazımını sistematik kazandırır. Seçiciler (selector) ve özgünlük (specificity), kutu modeli, renkler ve birimler, tipografi, kenar boşlukları, position özellikleri, Flexbox tek boyutlu yerleşim, CSS Grid iki boyutlu yerleşim, responsive tasarım (media query, container query), CSS değişkenleri (custom property), animasyon ve transition, transform ve modern CSS özellikleri işlenir.

CSS Eğitimi, web tasarımcılar, frontend geliştiricileri, dijital pazarlama uzmanları, kendi web sitesini özelleştirmek isteyen WordPress kullanıcıları ve UI/UX tasarımcılar için tasarlanmıştır. Eğitim sonunda katılımcı, modern responsive web sayfalarını sıfırdan tasarlayabilir.

Ön Koşullar

CSS Eğitimi için ön koşul, temel HTML bilgisidir. HTML eğitimi alanlar veya HTML kullanan profesyoneller için doğrudan uygulanabilir.

Kimler Katılmalı

Web Tasarımcıları: Modern CSS ile responsive tasarım yapan profesyoneller
Frontend Geliştiricileri: Bileşen ve sayfa düzeni kuran kadrolar
WordPress Kullanıcıları: Tema özelleştirmesi için CSS düzenleyenler
Dijital Pazarlama Uzmanları: Landing page görselliğini iyileştirmek isteyenler
UI/UX Tasarımcıları: Tasarımı koda dönüştürmek isteyen profesyoneller
E-Ticaret Operatörleri: Tema CSS düzenlemesi yapan kadrolar
Email Marketing Uzmanları: Bülten HTML/CSS'ini şekillendiren profesyoneller

Eğitim Yöntemi

Sunum, Flexbox ve Grid atölyesi, responsive landing page tasarımı, animasyon egzersizi ve katılımcının kendi tasarımını CSS ile kodlama pratiği ile yürür.

Kazanımlar

Seçiciler ve Özgünlük: Specificity hesabıyla kural çatışmalarını çözme
Kutu Modeli: Content, padding, border, margin ilişkisini kontrol etme
Flexbox: Tek boyutlu hizalama ve dağıtım
CSS Grid: İki boyutlu kompleks yerleşim
Responsive Tasarım: Media query ve container query kullanımı
CSS Değişkenleri: Custom property ile tema yönetimi
Animasyon ve Transition: @keyframes ve transform kombinasyonları

Eğitim Süresi

2 Gün (16 Saat). Kurumsal talebe göre 1 günlük özet veya 3 günlük uygulamalı versiyon olarak planlanabilir.

CSS Eğitimi İçeriği

1. CSS Temelleri

HTML ile CSS ilişkisi
Inline, internal, external CSS
CSS sözdizimi
Yorumlar

2. Seçiciler (Selectors)

Element, class, id seçici
Descendant ve child seçici
Attribute seçici
Pseudo-class (hover, focus)
Pseudo-element (::before, ::after)

3. Specificity ve Cascade

Specificity hesabı
Cascade kuralları
Inheritance
!important kullanımı (ve tehlikesi)

4. Kutu Modeli

Content, padding, border, margin
box-sizing
Block, inline, inline-block
Display: none ve visibility

5. Renk ve Birimler

HEX, RGB, HSL
px, em, rem, %, vw, vh
CSS değişkenleri (custom property)
calc() fonksiyonu

6. Tipografi

Font ailesi ve fallback
Web font ekleme
Font weight, style, size
Satır yüksekliği ve harfler arası

7. Position Özellikleri

static, relative, absolute, fixed, sticky
z-index ve katmanlar
Yaygın kullanım senaryoları

8. Flexbox

Flex container ve flex item
justify-content ve align-items
flex-grow, shrink, basis
flex-wrap ve order
Pratik düzen örnekleri

9. CSS Grid

Grid container kurulumu
grid-template-rows ve columns
fr birimi
grid-area ile şablon yerleşimi
auto-fit ve auto-fill

10. Responsive Tasarım

Viewport meta etiketi
Media query yapısı
Mobil-öncelik yaklaşımı
Container query'ler
Esnek görsel kullanımı

11. Animasyon ve Transition

transition özelliği
@keyframes
animation özellikleri
prefers-reduced-motion

12. Transform

translate, rotate, scale, skew
Origin noktası
3D transform
Performans dikkati

13. CSS Değişkenleri

Custom property tanımı
Tema yönetimi
JavaScript ile değiştirme
Dark mode uyumu

14. Modern CSS Özellikleri

Subgrid
:has() seçici
Logical properties
Container query
aspect-ratio

15. CSS Yazma Disiplini

BEM metodolojisi
Mobil öncelik
Performans optimizasyonu
Tarayıcı uyumluluğu
SCSS/Sass'a giriş