HTML & CSS EĞİTİMİ
HTML ve CSS eğitimi, "biz HTML'i biliyoruz" cümlesini gerçek bir semantik ve responsive yetkinliğe taşıyan programdır. Semantik HTML5 tag'leri SEO ve accessibility için bilinçle kullanılır; Flexbox ile Grid arasında 1-boyutlu ve 2-boyutlu senaryolarda seçim yapma günlük pratik haline getirilir.
Program sonunda katılımcı, CSS custom property ile design token kurar; media query ve container query ile responsive tasarım yapar; z-index ve stacking context'i frustration olmadan yönetir. BEM, Atomic CSS ve utility-first arasında ekibe göre karar verme; View Transitions API ile animasyonlu geçiş eğitimin modern kapanışıdır. Eğitim, MDN Web Belgeleri baz alınarak kurgulanır.
Katılımcı Profili
Bu eğitim, HTML ve CSS'i semantik ve responsive disiplinle yazmak isteyen rollere yöneliktir:
- Frontend Geliştiriciler: Semantik HTML ve modern CSS hedefleyen mühendisler
- UI Mühendisleri: Design system ve component library kuran roller
- Web Tasarımcıları: Tasarımı koda dönüştüren ekipler
- Yeni Başlayan Geliştiriciler: Frontend kariyerine başlayan roller
- E-ticaret Geliştiricileri: Conversion-optimized landing page yazan ekipler
Ön Gereklilikler
Bu eğitime katılım için teknik ön koşul minimaldir; aşağıdakiler avantaj sağlar:
- Bir tarayıcı ile temel internet kullanımı
- Metin editörü (VS Code, Sublime Text) ile dosya kaydetme deneyimi
- Klasör ve dosya yapısı hakkında temel bilgi
- Bir programlama veya tasarım disiplinine ilgi
- Git ile temel sürüm kontrol bilgisi (tercihen)
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, ekibinizin uygunluğuna göre birlikte planlanır.
Kazanımlar
Eğitim bitiminde katılımcı, "biz HTML'i bilmiyoruz" cümlesini geçmişe atar — semantik ve responsive yazar:
- Semantik HTML5 tag'lerini SEO ve accessibility için bilerek kullanır
- Flexbox ile Grid arasında 1-boyutlu ve 2-boyutlu senaryolarda seçer
- CSS custom property ile design token kurar
- Media query ve container query ile responsive tasarım yapar
- BEM, Atomic CSS ve utility-first arasında karar verir
- z-index ve stacking context'i frustration olmadan yönetir
- View Transitions API ile sayfa geçişlerini animasyonlu kurar
HTML & CSS Eğitimi Konuları
1. HTML5 Semantik Etiketler
- article, section, nav, aside, header, footer
- main element ve landmark roller
- figure, figcaption ile içerik gruplama
- time, address, mark anlamsal etiketler
2. Document Outline ve Heading Hiyerarşisi
- h1-h6 hiyerarşi ve SEO etkisi
- Outline algoritması ve sectioning content
- Tek h1 prensibi ve sınırları
- Skip link ve ekran okuyucu navigasyonu
3. Form ve Input Tipleri
- Modern input type'lar: email, tel, date, range, color
- Form validation: required, pattern, min/max
- label, fieldset, legend ile yapı
- autocomplete ve autofill yönlendirme
- Custom validation ve constraint validation API
4. Erişilebilirlik (a11y) ve ARIA
- WCAG seviyeleri: A, AA, AAA
- ARIA role, state, property
- Klavye navigasyonu ve tabindex
- Color contrast oranı (4.5:1, 3:1)
- Screen reader test (NVDA, VoiceOver)
5. CSS Selector ve Specificity
- Type, class, id, attribute selector
- Combinator: descendant, child, sibling
- Pseudo-class ve pseudo-element
- Specificity hesabı (a,b,c) ve !important
- Cascade ve inheritance kuralları
6. Box Model ve Layout
- content-box vs border-box
- Margin collapse davranışı
- Display: block, inline, inline-block
- Position: static, relative, absolute, fixed, sticky
- Stacking context ve z-index
7. Flexbox
- flex-direction, flex-wrap, flex-flow
- justify-content, align-items, align-content
- flex-grow, flex-shrink, flex-basis
- order ile görsel sıralama
- Yaygın flexbox pattern'ler
8. CSS Grid
- grid-template-columns/rows
- fr unit ve minmax fonksiyonu
- Named line ve named area
- auto-fit ve auto-fill ile responsive
- Subgrid (modern destek)
9. Responsive Design ve Media Query
- Mobile-first ve desktop-first yaklaşımı
- Breakpoint stratejisi (content-based)
- min-width, max-width, orientation
- Container query: parent-based responsive
- clamp() ile fluid typography
10. CSS Variables (Custom Properties)
- --variable tanımı ve var() kullanımı
- :root vs scoped tanım
- JavaScript ile dinamik değişim
- Theme switching pattern
- Sass değişkenleriyle karşılaştırma
11. Animation ve Transition
- transition: property, duration, timing-function
- @keyframes ve animation
- Transform: translate, rotate, scale, skew
- will-change ve GPU acceleration
- prefers-reduced-motion ile erişilebilirlik
12. Modern CSS - Container Query, :has()
- :has() parent selector
- Container query ve component-based responsive
- Cascade layer (@layer)
- Nesting (CSS native)
- color-mix() ve modern color function
13. CSS Metodolojileri - BEM, Atomic, Utility-First
- BEM (Block Element Modifier)
- OOCSS ve SMACSS yaklaşımları
- Atomic CSS ve utility-first
- CSS-in-JS alternatifi
14. Tailwind CSS
- Utility-first felsefe
- Tailwind config ve theme
- JIT compiler ve purge
- Component extraction ve @apply
- Dark mode ve responsive variant
15. Performance - Critical CSS ve Lazy Load
- Critical CSS extraction
- preload, prefetch, dns-prefetch
- Lazy image ve loading="lazy"
- CSS containment ve will-change
- Lighthouse performance ölçümü
16. Browser DevTools ve Debug
- Elements panel ve computed style
- Layout shift ve paint indicators
- Mobile emulation ve throttling
- Accessibility tree inspection
- Coverage tool ile kullanılmayan CSS
HTML & CSS EĞİTİMİ ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Flexbox ile CSS Grid arasında nasıl seçim yapılır?
Flexbox 1-boyutlu (row veya column) layout için ideal — navigation bar, form satırları, list flow. Grid 2-boyutlu (row + column) için doğru — kart düzeni, sayfa layout. Modern tasarım ikisini birlikte kullanır: dış container Grid, içeri Flexbox. Eski browser desteği gerekmiyorsa Grid ciddi güç katar.
