İçeriğe geç
Codary
İnteraktif CSS3 & Responsive Tasarım Müfredatı

CSS3 ile Modern Web Tasarımı

HTML sayfalarına renk, yazı tipi, boşluk ve düzen vermeyi sıfırdan öğrenin: seçiciler, kutu modeli, Flexbox, CSS Grid, responsive tasarım, değişkenler, geçişler, animasyonlar ve 5 uygulamalı arayüz projesi.

Başlangıç - Orta 5 modül 27 ders 27 quiz 5 proje Tarayıcıda çalışır

CSS3 Kurs Müfredatı

Zorluk dağılımı: Kolay · 8 Orta · 12 Zor · 7
Başlamadan önce oku CSS3 nedir, bu kurs nasıl işler?

CSS (Cascading Style Sheets, yani Basamaklı Stil Sayfaları), HTML ile kurduğun iskelete görünüm kazandıran dildir. Renkler, yazı tipleri, boşluklar, kenarlıklar, gölgeler, sayfa düzeni, telefona uyum ve animasyonlar CSS ile yapılır.

Önce HTML bilmelisin

CSS, HTML etiketlerini seçip onlara stil verir. Bu yüzden HTML kursunu bitirmiş olman (en azından başlık, paragraf, liste, bağlantı ve div gibi temel etiketleri tanıman) yeterlidir. Kursta yeni bir HTML etiketi gerektiğinde onu da kısaca anlatıyoruz.

CSS nasıl düşünülür?

Her CSS kuralı iki sorunun cevabıdır: "Neyi?" ve "Nasıl?". Örneğin "tüm başlıkları (neyi) mavi ve büyük yap (nasıl)". Neyi sorusunun cevabına seçici, nasıl sorusunun cevabına bildirim denir. Kursun ilk dersinde bu yapıyı ayrıntılı göreceğiz.

Bir ders nasıl işler?

  • Anlatım: Önce özelliğin ne işe yaradığını günlük hayattan bir örnekle anlatıyoruz.
  • Örnek kod: Ardından küçük bir örneği satır satır inceliyoruz. Örnek kodlar kopyalanamaz; kendi elinle yazmak öğrenmeni hızlandırır.
  • Görev: Editöre önce <style> etiketiyle CSS kurallarını, sonra bu kuralların uygulanacağı HTML'i yazarsın. Çalıştır dediğinde sonucu hemen altta görürsün.
  • İpucu ve zorluk: Takılırsan İpucu al butonu ipuçlarını tek tek açar. Her dersin yanında Kolay, Orta veya Zor etiketi vardır.

Kodun nasıl kontrol edilir?

Editör, kodunda görevin istediği seçicilerin ve özelliklerin olup olmadığını kontrol eder. İki nokta üst üste ve süslü parantez etrafındaki boşluklar önemli değildir, ama özellik adlarını ve değerleri görevdeki gibi yazmalısın.

İpucu: Bir değeri değiştirip tekrar çalıştırmak CSS öğrenmenin en hızlı yoludur. Görevi bitirdikten sonra sayılarla ve renklerle oynamaktan çekinme.
1 Modül 1 · 0/6 ders Modül 1: CSS3 Sıfırdan Giriş ve Seçiciler CSS ekleme yolları, seçiciler (Class, ID, Evrensel), renkler ve fontlar

1.1 CSS3 Nedir, Dahili, Harici ve Inline CSS

1.2 CSS Seçiciler: Element, Class ve ID Seçicileri

1.3 Renkler ve Arka Planlar (RGB, HEX, HSL)

1.4 Yazı Tipleri ve Tipografi (Font-Family & Size)

1.5 Kombinatör Seçiciler (Torun, Çocuk, Kardeş)

1.6 Hatayı Bul: Stil Uygulanmıyor

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
2 Modül 2 · 0/5 ders Modül 2: Kutu Modeli (Box Model) ve Düzen Yapısı Margin, padding, border, box-sizing, display ve position özellikleri

2.1 CSS Kutu Modeli (Box Model: Content, Padding, Margin)

2.2 Box-Sizing ve Çerçeve Yarıçapı (Border-Radius)

2.3 Görüntüleme Özellikleri (Display: Block, Inline, Flex)

2.4 Konumlandırma (Position: Relative, Absolute, Fixed, Sticky)

2.5 Taşma (Overflow) ve Gölgelendirme (Box-Shadow)

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
3 Modül 3 · 0/6 ders Modül 3: Modern Flexbox ve Grid Düzen Mimarisi Flex konteyner, hizalama, esneme, CSS Grid sütunları ve alan yerleşimleri

3.1 Modern Flexbox Temelleri (Display: Flex)

3.2 Flexbox Hizalama (Justify-Content & Align-Items)

3.3 Flex Çocuk Elemanları (Flex-Grow, Shrink & Basis)

3.4 CSS Grid Temelleri (Grid-Template-Columns & Fr Birimi)

3.5 Gelişmiş Grid Alanları (Grid-Column & Grid-Row)

3.6 Hatayı Bul: Menü Yan Yana Durmuyor

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
4 Modül 4 · 0/5 ders Modül 4: Responsive Tasarım, Animasyonlar ve Değişkenler Medya sorguları, CSS değişkenleri, transform, transition ve keyframes

4.1 Responsive Tasarım ve Medya Sorguları (@media)

4.2 CSS Değişkenleri (Custom Properties - `--var`)

4.3 CSS Dönüşümleri (Transform: Rotate, Scale, Translate)

4.4 Yumuşak Geçişler (Transitions)

4.5 Keyframe Animasyonları (@keyframes)

Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz
5 Modül 5 · 0/5 ders Modül 5: Uygulamalı Pratik CSS3 Web Projeleri Profil kartı, flexbox menü, grid ızgara, karanlık mod ve fiyatlandırma tabloları

5.1 Proje 1: Şık Profil Kartı ve Rozet Tasarımı

PROJE

5.2 Proje 2: Esnek Flexbox Navigasyon Menüsü

PROJE

5.3 Proje 3: Responsive Kart Izgarası (Grid Layout)

PROJE

5.4 Proje 4: Açık/Karanlık Tema Toggle ve CSS Değişkenleri

PROJE

5.5 Proje 5: Animasyonlu Fiyatlandırma Tablosu

PROJE
Modül tekrarı 5 soru · Modül sonunda çözmeni öneririz