HTML & CSS EĞİTİMİ
HTML ve CSS, web arayüzlerinin temelini oluşturan iki kritik teknolojidir. Bu eğitimde, modern web sayfalarını doğru semantik yapı ile kurmayı, sürdürülebilir ve ölçeklenebilir CSS mimarileriyle görsel katmanı yönetmeyi öğrenirsiniz. Ekipler için ortak standartlarla ilerlemek, tasarım tutarlılığını ve geliştirme hızını doğrudan artırır.
Program boyunca gerçek hayattaki arayüz ihtiyaçlarına odaklanır; düzen, tipografi, bileşenleşme ve responsive yaklaşımı birlikte ele alırız. Sonuç olarak katılımcılar, tarayıcı uyumluluğunu gözeten, okunabilirliği yüksek ve kolay bakım yapılabilir arayüzler üretmek için gerekli pratikleri kazanır.
Katılımcı Profili
Eğitim, aşağıdaki profiller için özellikle uygundur:
- Frontend geliştiriciler: sağlam HTML/CSS temeli oluşturur
- UI/UX tasarımcıları: tasarımları kodla uyumlar
- Web geliştiriciler: arayüz kalitesini standartlaştırır
- Yazılım ekip liderleri: ortak UI prensipleri belirler
- Ürün ekipleri: bileşen dilini netleştirir
Ön Gereklilikler
Bu eğitime katılım için aşağıdaki temel yeterlilikler önerilir:
- Bilgisayar ve dosya yönetimi konularında temel hakimiyet
- Web tarayıcılarının çalışma mantığına dair genel fikir
- Basit metin editörleri ile çalışma alışkanlığı
- Temel düzeyde internet ve web kavramlarına aşinalık
- Örnekleri takip edecek düzeyde İngilizce teknik terim okuma
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 sonunda katılımcılar, modern web arayüzlerini daha hızlı ve tutarlı şekilde geliştirebilecek pratik kazanımlara sahip olur:
- Semantik HTML ile erişilebilir ve okunabilir sayfa yapıları kurma
- CSS seçicileri ve cascade mantığı ile kontrollü stillendirme yapma
- Responsive yaklaşım ile farklı ekranlara uyumlu arayüz tasarlama
- Flexbox ve Grid ile düzen problemlerini doğru yöntemle çözme
- Form, tablo ve medya bileşenlerini tarayıcı uyumlu yönetme
- Component mantığında tekrar kullanılabilir UI blokları oluşturma
- Debug ve performans için tarayıcı geliştirici araçlarını etkin kullanma
- Tasarım standartlarıyla ekip içinde ortak UI dili oluşturma
HTML & CSS Eğitimi Konuları
1. HTML & CSS Eğitimi - HTML Temelleri ve Semantik Yapı
- HTML doküman yapısını doğru şekilde kurmak
- Semantik etiketleri anlamlandırmak için pratik örnekler yapmak
- Başlık ve metin hiyerarşisini düzenler çünkü okunabilirlik artar
- Liste ve bağlantıları kurallı biçimde kullanmak
- Yaygın HTML hatalarını tarayıcıda hızlı yakalamak
- Sayfa iskeletini ekip standardına uygun kurmak ve paylaşmak
2. HTML & CSS Eğitimi - Formlar ve Kullanıcı Girdisi Deneyimi
- Form etiketlerini doğru ilişkilendirme ve kullanmak
- Input türlerini seçmek için gerçek kullanım senaryoları
- Doğrulama davranışlarını yönetmek ve kullanıcı hatalarını azaltmak
- Label ve placeholder farkını doğru yerde kullanmak
- Form erişilebilirliğini artırmak için temel kuralları uygulamak
3. CSS Temelleri: Seçiciler, Cascade ve Özgüllük
- CSS yazım kurallarını pratikle pekiştirmek
- Seçici tiplerini kullanmak için örnek senaryolar çözmek
- Özgüllüğü anlamak ve çakışmaları bilinçli şekilde yönetmek
- İstendiğinde inline ve external stilleri doğru seçmek
- Bakımı kolay CSS için okunabilir sınıf yapısı kurmak
- Yanlış override’ları bulmak ve düzeltmek için yöntem izleme
4. Kutu Modeli ve Ölçülendirme Stratejileri
- Box model bileşenlerini net biçimde kavramak
- Padding ve margin kullanımı için pratik düzen örnekleri
- Ölçü birimlerini seçmek ama responsive hedefi korumak
- Border ve outline farkını doğru senaryoda uygulamak
- Taşma ve kırpma davranışlarını yönetmek için teknikler kullanmak
5. Tipografi, Renk ve Görsel Tutarlılık
- Font ailelerini tanımlamak için doğru fallback zinciri kurmak
- Line-height ve spacing ile okunabilirliği artırmak
- Renk kullanımını sistematikleştirmek ve tasarım dilini korumak
- Metin hiyerarşisi oluşturmak için pratik başlık ölçekleri seçme
- UI tutarlılığı için tasarım token mantığını uygulama
- Tarayıcı farklılıklarında tipografiyi stabilize etme yöntemleri
6. Görseller, Medya ve Performans Temelleri
- Görsel etiketlerini doğru boyutlandırma ve konumlandırmak
- Medya formatlarını seçmek için temel karşılaştırmalar yapmak
- Lazy-loading yaklaşımını uygulamak ve sayfa açılışını hızlandırmak
- Responsive görseller için srcset kullanımını kavramak
- Medya içeriklerini layout bozmadan yönetme
7. Responsive Tasarım Mantığı ve Breakpoint Planı
- Mobile-first yaklaşımını temel prensipleriyle uygulamak
- Breakpoint seçimi için tasarım ihtiyaçlarını analiz etme
- Medya sorgularını planlamak ve tekrarları azaltmak için yapı kurmak
- Esnek ölçülerle farklı ekranları sorunsuz destekleme
- Responsive test sürecini standardize etmek ve hataları erken yakalamak
8. Layout Pratikleri: Display, Position ve Akış Yönetimi
- Normal akış mantığını anlamak ve düzeni buna göre kurmak
- Position türlerini seçmek için kullanım örnekleri çözme
- Katmanlama problemlerini yönetmek çünkü z-index karmaşıklaşır
- Sticky ve fixed kullanımında kullanıcı deneyimini korumak
- Layout sorunlarını DevTools ile adım adım analiz etme
9. Flexbox ile Bileşen Yerleşimi ve Hizalamak
- Flex container ve item mantığını hızlı kavramak
- Hizalama seçeneklerini kullanmak için örnek UI parçaları tasarlamak
- Boşluk dağıtımını yönetmek ve tutarlı hizalama yakalamak
- Flex büyüme ve küçülme davranışlarını kontrollü ayarlamak
- Tek satır ve çok satır senaryolarında doğru teknik seçme
- Yaygın hizalama hatalarını teşhis etme ve kalıcı düzeltme yapmak
10. CSS Grid ile Sayfa İskeleti Kurmak
- Grid temellerini öğrenmek için basit şablonlar kurmak
- Alan tanımlamak için grid-template yaklaşımını uygulamak
- Auto-fit ve minmax kullanmak ve esnek kolonlar üretmek
- Grid ile responsive sayfa planını daha az kodla yönetme
- Grid hizalama problemlerini DevTools ile hızlı çözme
- Grid ve Flexbox seçimini senaryoya göre doğru yapmak
11. Bileşenleşme: Yeniden Kullanılabilir UI Blokları
- BEM benzeri isimlendirme ile sınıf mimarisi kurmak
- Component CSS yazmak için kapsülleme yaklaşımı seçme
- Tekrar eden stilleri ayıklamak ve bakım maliyetini düşürmek
- Durum sınıflarıyla interaktif bileşen davranışlarını yönetme
- Takım içinde ortak UI sözlüğü oluşturmak için örnekler üretme
12. Erişilebilirlik: HTML/CSS ile Temel A11y
- Semantik yapı ile ekran okuyucu uyumunu artırmak
- Odak yönetimi için görünür ve tutarlı focus stilleri oluşturmak
- Renk kontrastını değerlendirmek ve erişilebilir arayüzler tasarlamak
- Form alanlarında hata mesajlarını doğru ilişkilendirme
- ARIA’ya ihtiyaç duyulan yerleri ayırt etme ve minimal kullanmak
13. Tarayıcı Uyumluluğu ve Debug Süreci
- Uyumluluk sorunlarını tespit etmek için test alışkanlığı kazanmak
- CSS sorunlarını çözmek için computed stilleri inceleme
- Layout shift nedenlerini bulmak ama gereksiz yeniden akışı azaltmak
- Vendor prefix gereksinimini anlamak ve doğru araçlarla yönetmek
- Debug sürecini ekipte standartlaştırmak için kontrol listesi oluşturmak
- Performans odaklı küçük optimizasyonlar yapmak ve etkisini ölçmek
14. Ek Modül: Responsive Tasarım ve Kurumsal UI Standardı
- Kurumsal arayüz standartlarını belgelemek için pratik yöntemler
- Grid, spacing ve tipografi kurallarını tek sistemde toplamak
- UI kit yaklaşımını uygulamak ve ekip içinde tutarlılık sağlamak
- Breakpoint ve component davranışlarını tasarım dokümanına yansıtmak
- Review sürecini hızlandırmak için UI kontrol noktaları tanımlamak
15. Ek Modül: Modern Layout (Flexbox / Grid) Pratikleri
- Gerçek sayfa düzeni senaryolarını birlikte çözme
- Flexbox ve Grid kombinasyonu için etkili stratejiler üretme
- Hata yapmayı azaltmak ama hızlı layout kurmak için şablonlar oluşturmak
- Yapışkan header ve responsive sidebar gibi düzenleri uygulamak
- Layout performansını iyileştirmek için yeniden akış risklerini azaltmak
16. Ek Modül: Bootstrap CSS
- Bootstrap grid sistemini hızlı kurmak için pratik uygulamalar
- Utility sınıflarıyla prototip çıkarmak ve geliştirme hızını artırmak
- Component kullanımında tutarlılık sağlamak ama gereksiz override’lardan kaçınmak
- Özelleştirme seçeneklerini tanımak ve kurumsal tema yaklaşımı belirlemek
- Bootstrap ile erişilebilir bileşenleri doğru şekilde kullanmak
17. Ek Modül: Tailwind CSS
- Utility-first yaklaşımını anlamak ve örneklerle uygulamak
- Component stilini hızlandırmak için sınıf kompozisyonu kullanmak
- Design token mantığını kurmak ama tekrarı azaltmak için config yönetmek
- Responsive ve state varyasyonlarını pratikle oturtmak
- Kurumsal UI standardını Tailwind ile sürdürülebilir hale getirme
HTML & CSS Eğitimi ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Semantik HTML neden önemlidir ve ekip standartlarını nasıl etkiler?
Semantik HTML, sayfa yapısının anlamını netleştirir; erişilebilirliği, SEO uyumunu ve bakım kolaylığını artırır. Ekip içinde ortak bir yapı dili oluştuğunda kod inceleme süresi kısalır ve sayfa tutarlılığı güçlenir.
CSS’te cascade ve özgüllük sorunlarını kalıcı olarak nasıl yönetebiliriz?
Özgüllük kurallarını bilinçli kullanmak, sınıf temelli bir mimari benimsemek ve tekrar eden stilleri component mantığıyla düzenlemek temel yaklaşımdır. Ayrıca DevTools üzerinden computed stil incelemesi ile çakışmalar hızlıca tespit edilir.
Responsive tasarım için Flexbox mı yoksa Grid mi tercih edilmeli?
İkisi farklı problem tipleri için idealdir: Flexbox daha çok tek boyutlu hizalama ve bileşen yerleşimi için, Grid ise sayfa iskeleti ve iki boyutlu düzenler için uygundur. Eğitimde karar vermeyi kolaylaştıran pratik kurallar ve örnekler çalışılır.
Erişilebilirlik açısından HTML/CSS ile en kritik iyileştirmeler nelerdir?
Semantik etiket kullanımı, form alanlarında doğru label ilişkileri, görünür odak stilleri ve yeterli kontrast temel iyileştirmelerdir. Bu adımlar, kullanıcı deneyimini artırırken kurumsal ürünlerin uyumluluk hedeflerine destek olur.
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 ekibinize göre uyarlayabiliriz. 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 ekibinizin uygunluğuna göre planlarız. Program sonunda katılım sertifikası verilir; talep edilirse ölçme-değerlendirme ve raporlama eklenebilir.
