CSS EĞİTİMİ
Aynı buton sitenin altı farklı sayfasında altı farklı şekilde görünmesin; bir tasarım kararı tüm site genelinde tek bir değişiklikle uygulanabilir kalsın. CSS'i sistemli kullanan ekip her revizyonu kopyala-yapıştır operasyonu olmaktan çıkarır; üretim hızı ile kod kalitesi aynı anda artar.
Box model ve flow, Flexbox ve Grid ile düzen, Custom Properties ile token sistemi, BEM ve modern alternatifleri, responsive yaklaşım (mobile-first, container query), animation ve transition disiplini, browser tutarlılığı ele alınır. Resmi başvuru için MDN CSS Documentation birincil kaynaktır.
Katılımcı Profili
CSS ile modern arayüz geliştiren profillere yöneliktir:
- Front-end Geliştiriciler: Flexbox, Grid ve responsive layout uygular
- UI Geliştiricileri: Component tabanlı CSS ve tasarım sistemi kurar
- Web Tasarımcıları: Tasarımdan koda geçişi yönetir
- Bootcamp Mezunları: Modern CSS pratiğiyle junior developer'lığa hazırlanır
- Freelance Web Developer'lar: Çoklu proje frontend hattı kurar
Ön Gereklilikler
Şu temeller hazırsa eğitim ilk günden uygulamaya geçer:
- HTML etiketleri ve doküman iskeleti mantığı
- Tarayıcı dev tools ile element inceleme alışkanlığı
- Dosya-klasör düzeni ve VS Code benzeri editör kullanımı
- Temel JavaScript okuryazarlığı (opsiyonel, faydalı)
- Git ile commit ve branch akışına genel aşinalık
Süresi ve Tarihi
Süre: 3 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, katılımcı grubunun uygunluğuna göre birlikte planlanır.
Kazanımlar
Eğitim sonunda CSS pratikleri ortak bir standarda kavuşur:
- Cascade, specificity ve inheritance mantığını doğru uygular
- Ölçeklenebilir sınıf isimlendirme yaklaşımı kurgular
- Flexbox ve Grid ile güvenilir layout stratejisi kurar
- Responsive tasarımda kırılım ve akış kontrolünü yönetir
- DevTools ile stil sorunlarını hızlı izole eder
- Performans odaklı stillendirmeyle gereksiz maliyeti azaltır
- Component bazlı UI için yeniden kullanılabilir CSS yazar
- Erişilebilirlik ve okunabilirlik için tipografi kurgular
CSS Eğitimi Konuları
1. CSS Temelleri, Selector ve Cascade
- CSS dosya bağlama: inline, internal, external
- Selector tipleri: element, class, id, attribute
- Cascade kuralı ve source order
- Comment yazımı ve dosya organizasyonu
- !important kullanım sınırları
2. Specificity ve Inheritance
- Specificity hesaplama: inline, id, class, element
- Kombinatörler: descendant, child, adjacent, general sibling
- Inheritance: hangi property'ler kalıtsal
- initial, inherit, unset, revert keyword'leri
- :where() ve :is() ile specificity yönetimi
3. Box Model ve Sizing
- Content, padding, border, margin katmanları
- box-sizing: content-box ve border-box
- width, min-width, max-width
- Margin collapsing davranışı
- Birim sistemi: px, em, rem, %, vw, vh
4. Display: block, inline, inline-block
- Block ve inline element davranışları
- inline-block ile karma kullanım
- display: none vs visibility: hidden
- Document flow ve normal flow
- aspect-ratio property kullanımı
5. Position, Float ve Z-Index
- Position: static, relative, absolute, fixed, sticky
- Float ve clear (legacy ama hâlâ kullanılan)
- Stacking context ve z-index hiyerarşisi
- Sticky header ve scroll-padding
- Containing block kavramı
6. Flexbox ile 1D Layout
- display: flex ve flex container
- flex-direction: row, column, reverse
- justify-content, align-items, align-content
- flex-grow, flex-shrink, flex-basis kısaltması
- gap ile boşluk yönetimi
- order ile sıralama değişikliği
7. CSS Grid ile 2D Layout
- grid-template-columns ve grid-template-rows
- fr birim ve minmax() fonksiyonu
- grid-template-areas ile named grid
- grid-column, grid-row ile yerleşim
- auto-fit ve auto-fill ile responsive grid
- subgrid (modern tarayıcılar)
8. Responsive Tasarım ve Media Query
- Mobile-first yaklaşım
- Breakpoint stratejisi: 640, 768, 1024, 1280
- @media (min-width, max-width, orientation)
- Container queries ile component-based responsive
- prefers-color-scheme ve prefers-reduced-motion
9. Tipografi ve Web Fonts
- font-family, font-size, font-weight
- line-height, letter-spacing, word-spacing
- @font-face ve woff2 yükleme
- Google Fonts ve self-hosted font
- font-display: swap ile FOUT yönetimi
10. Renk, Background ve Gradient
- HEX, RGB, RGBA, HSL, HSLA
- oklch() modern renk uzayı
- background-image, position, size
- linear-gradient ve radial-gradient
- Çoklu background ve blend mode
11. Transition, Animation ve Keyframes
- transition: property, duration, timing-function
- cubic-bezier ile özel easing
- @keyframes ve animation property
- transform: translate, rotate, scale, skew
- will-change ile performans hint
12. Custom Properties ve calc()
- :root scope ile global değişkenler
- var() fonksiyonu ve fallback değer
- calc() ile dinamik hesaplama
- clamp(), min(), max() fonksiyonları
- Theme switching ve dark mode
13. Pseudo-class ve Pseudo-element
- :hover, :focus, :active, :visited
- :nth-child, :nth-of-type
- :not(), :has() seçicileri
- ::before, ::after pseudo-element
- ::placeholder, ::selection özelleştirme
14. BEM, Component CSS ve DevTools
- BEM naming: Block__Element--Modifier
- CSS Modules ve CSS-in-JS karşılaştırması
- Chrome DevTools ile CSS debugging
- Computed, Layout, Animations panelleri
- Lighthouse ile performans analizi
CSS Eğitimi ile İlgili
Sıkça Sorulan Sorular ve Cevapları
CSS’te cascade ve specificity çakışmaları nasıl yönetilir?
Cascade sırası, specificity ve kaynak sırası birlikte değerlendirilir. Eğitimde tipik çakışma örnekleri üzerinden ilerleyerek seçici derinliğini azaltma, sınıf tabanlı yaklaşım ve katmanlama ile yönetilebilir bir stil hiyerarşisi kurulur.
Flexbox ve Grid’i hangi durumlarda tercih etmeliyiz?
Tek eksende hizalama ve dağıtım gereken yerlerde Flexbox, iki boyutlu sayfa yerleşimlerinde Grid daha uygundur. Eğitimde ortak UI örnekleri üzerinde iki yaklaşımın karar kriterleri ve birlikte kullanım pratikleri ele alınır.
CSS değişkenleri ile tema ve tasarım tokenları nasıl kurgulanır?
Custom properties ile renk, boşluk, tipografi gibi değerler token mantığıyla tanımlanır; bileşenler bu tokenları tüketir. Böylece tema geçişleri ve ölçeklenebilir bakım daha tutarlı hale gelir.
Performans açısından hangi CSS yaklaşımları risk oluşturur?
Aşırı karmaşık seçiciler, gereksiz yeniden boyama tetikleyen özellikler ve kontrolsüz animasyonlar maliyeti artırabilir. Eğitimde DevTools ile ölçümleme, kritik CSS yaklaşımı ve sadeleştirme teknikleriyle performans odaklı pratikler işlenir.
Eğitim içeriğini ihtiyaçlarımıza göre özelleştirebilir misiniz?
Evet. Eğitim öncesinde ihtiyaç analizi yaparak içerik ve örnekleri kurumun hedeflerine göre uyarlıyoruz. Modüller eklenebilir, bazı başlıklar derinleştirilebilir veya sadeleştirilebilir.
Eğitim yeri, yöntemi ve sertifikasyon süreci nasıl ilerliyor?
Eğitim online (canlı) veya yerinde gerçekleştirilebilir; tarih ve saatleri katılımcı grubunun uygunluğuna göre planlıyoruz. Program sonunda katılım sertifikası verilir; talep edilirse ölçme-değerlendirme ve raporlama eklenebilir.
