GERİ DÖN

Ders Öğretim Planı

Dersin Kodu Dersin Adı Dersin Türü Yıl Yarıyıl AKTS
1910002102024 İLERİ CSS Ders 2 4 5,00

Dersin Seviyesi

Önlisans

Dersin Sunulduğu Dil

Dersin Amacı

Öğrencilere modern web standartlarına uygun, performanslı, erişilebilir ve karmaşık arayüz tasarımlarını saf CSS ve gelişmiş CSS araçlarıyla hatasız bir şekilde kodlama becerisi kazandırmaktır.

Dersi Veren Öğretim Görevlisi/Görevlileri

Öğr. Gör. Betül Feyza DEMİR

Öğrenme Çıktıları

1 CSS Grid ve Flexbox sistemlerini ileri düzeyde kullanarak her ekran boyutuna uyumlu (responsive) ve karmaşık sayfa yerleşimleri tasarlayabilir.
2 Sass veya SCSS araçlarını kullanarak değişkenler, döngüler ve fonksiyonlar yardımıyla sürdürülebilir ve temiz stil kodları yazabilir
3 @keyframes ve CSS geçişlerini (transitions) kullanarak JavaScript'e ihtiyaç duymadan performanslı ve kullanıcı dostu arayüz animasyonları üretebilir.

Öğretim Sistemi

Birinci Öğretim

Dersin Ön Koşulu Olan Dersler

Yok

Ders İçin Önerilen Diğer Hususlar

[Yok]

Dersin İçeriği

Seçici hiyerarşisi ve CSS mimarileriyle başlar; ardından Flexbox ve Grid ile gelişmiş sayfa yerleşimleri, CSS Animasyonları, geçişler, ön işlemciler (Sass/SCSS), modern CSS metodolojileri (BEM) ve performans optimizasyonu konularını kapsar.

Haftalık Ayrıntılı Ders İçeriği

Hafta Konular (Teorik) Uygulama Öğretim Yöntem ve Teknikleri Ön Hazırlık
1 CSS mimarisine derin bakış; seçici öncelikleri (specificity), kalıtım (inheritance) ve "cascade" kurallarının yönetimi.
2 Gelişmiş kutu modeli (box-model) detayları, özel konumlandırma (absolute, relative, fixed, sticky) senaryoları ve katman yönetimi (z-index).
3 İleri düzey Flexbox teknikleri; esnek kutu hizalama, sıralama ve iç içe geçmiş esnek yapılarla arayüz tasarımı.
4 CSS Grid Layout dünyasına giriş; satır/sütun şablonları, alan adlandırmaları (grid-template-areas) ve otomatik yerleşimler.
5 Hibrit yerleşim tasarımları; CSS Grid ve Flexbox sistemlerinin tek bir projede birlikte efektif kullanımı.
6 CSS Değişkenleri (Custom Properties) ile dinamik tema (karanlık/aydınlık mod) yönetimi ve merkezi stil kontrolü.
7 Modern CSS Metodolojileri; BEM (Block, Element, Modifier), OOCSS veya SMACSS kuralları ile ölçeklenebilir kod yazımı.
8 Ara Sınav (Vize) Haftası
9 CSS Ön İşlemcilerine (Preprocessors) giriş; Sass/SCSS kurulumu, değişkenler, iç içe yazım (nesting) kuralları.
10 Sass/SCSS ile ileri düzey yapılar; Mixin'ler, kalıtım (@extend), döngüler (@for, @each) ve fonksiyon kullanımı.
11 CSS Geçişleri (Transitions) ve Dönüşümler (2D/3D Transforms); elemanları döndürme, ölçekleme ve kaydırma efektleri.
12 CSS Animasyonları; @keyframes kullanımı, animasyon zamanlamaları, tetikleyiciler ve performans dostu animasyon kuralları.
13 Modern CSS Özellikleri ve Gelecek Teknolojiler; Subgrid, Container Queries ve modern tarayıcı uyumluluk testleri.
14 CSS Performans Optimizasyonu; kritik CSS (critical CSS) çıkarma, dosya sıkıştırma (minify) ve genel dönem sonu projesi teslimi.

Ders Kitabı / Malzemesi / Önerilen Kaynaklar

Planlanan Öğrenme Aktiviteleri ve Metodları

Değerlendirme

Yarıyıl (Yıl) İçi Etkinlikleri Adet Değer
Ara Sınav 1 100
Toplam 100
Yarıyıl (Yıl) Sonu Etkinlikleri Adet Değer
Final Sınavı 1 100
Toplam 100
Yarıyıl (Yıl) İçi Etkinlikleri 40
Yarıyıl (Yıl) Sonu Etkinlikleri 60

Staj Durumu

Yok

İş Yükü Hesaplaması

Etkinlikler Sayısı Süresi (saat) Toplam İş Yükü (saat)
Ara Sınav 1 1 1
Final Sınavı 1 1 1
Quiz 14 3 42
Derse Katılım 14 4 56
Ödev Problemleri için Bireysel Çalışma 14 3 42
Toplam İş Yükü (saat) 142

Program ve Öğrenme Çıktıları İlişkisi

PÇ 1 PÇ 2 PÇ 3 PÇ 4 PÇ 5
ÖÇ 1 2
ÖÇ 2
ÖÇ 3 2
* Katkı Düzeyi : 1 Çok düşük 2 Düşük 3 Orta 4 Yüksek 5 Çok yüksek