CSS Dersleri
CSS ile stil vermeyi öğren ve tasarımını güzelleştir
Bu Kursun Sertifika Şartları
- Tüm zorunlu dersleri tamamla.
- Derslerin en az %80’ini çözümü görmeden tamamla.
Sertifika Henüz Hazır Değil
Sertifika için tüm dersleri tamamlamalısın (100/100).
CSS Giriş
İlk CSS stillerini öğren
Arka Plan Rengi
Background color kullanmayı öğren
Yazı Boyutu
Font-size ile yazı boyutunu değiştir
Margin ve Padding
Box model'i öğren
Flexbox Giriş
Flexbox ile öğeleri hizala
Flexbox Align
Dikey hizalama öğren
Border ve Radius
Kenarlık ve köşe yuvarlama
Hover Efekti
Mouse ile etkileşim
CSS Grid
Grid layout ile karmaşık düzenler oluştur
Position
Elementleri konumlandır
Media Queries
Responsive tasarım
Transform
Elementleri dönüştür
CSS Arka Plan Resmi
background-image kullan
CSS Text Align
Metin hizalama
Line Height
Satır yüksekliği
Font Weight
Yazı kalınlığı
Letter Spacing
Harf aralığı
CSS Overflow
Taşan içeriği yönet
CSS Z-index
Katman sırası
CSS Opacity
Şeffaflık
Box Shadow
Gölge ekle
Border Style
Kenarlık stilleri
Outline
Dış çizgi
Named Colors
Renk isimleri
CSS Hex Colors
Hex renk kodları
RGB Colors
RGB renk modeli
CSS Variables
Değişken tanımlama
CSS Pseudo Classes
Duration pseudo sınıfları
Gradient Background
Degrade arka plan
Text Shadow
Metin gölgesi
CSS Pseudo Elements
::before ve ::after
CSS !important
Öncelik kuralı
CSS Position Sticky
Yapışkan konumlandırma
Display Block
Blok gösterim
Display Inline
Satır içi gösterim
Max Width
Maks genişlik
Flex Direction
Flex yönü
Flex Gap
Flex boşluk
Flex Wrap
Taşan elemanları sarma
CSS Cursor
Mouse imleci
Align Content
İçerik hizalama
Flex Basis
Temel boyut
Flex Grow
Elemanların büyüyen
Grid Areas
Grid alanları
Animation Basics
CSS animasyonları
CSS Filter
Görsel filtreleri
Transform Scale
Ölçekleme
Transform Translate
Öteleme
Transform Skew
Eğme
CSS Final
Kombinasyon
Flex-basis
Elemanın ilk boyutu
Flex-grow
Boşluğu büyüme oranı
Flex-shrink
Daralırken boyut kontrolü
Flex Order
Görsel sırayı değiştir
Gap
Elemanlar arası boşluk
Grid Area
Adlarla yerleşim
Minmax & Auto-fit
Esnek sütun genişliği
Grid Fr Birimi
Oransal sütunlar
Keyframes
Animasyon kareleri
Animation Timing
Hız eğrisi ve tekrar
3D Transform
Perspektif ile derinlik
Nth-child
Pozisyona göre seçim
Child Combinators
Doğrudan ve kardeş seçim
Is ve Where
Grup seçiciler
Focus-within
İçerideki odak stili
Custom Properties
CSS değişkenleri
Media Queries
Ekran boyutuna göre stil
Clamp
Akışkan font boyutu
Fluid Grid
Esnek kart dizisi
Container Queries
Kapsayıcı boyutuna göre
Has Seçici
İçerik koşuluna göre stil
Scroll Behavior
Yumuşak kaydırma
Aspect Ratio
Sabit orantılı kutu
Dark Mode
Tercihe göre tema
Responsive Capstone
Tüm kavramları birleştir
CSS Değişkenleri (Custom Properties)
Temel renkleri değişkene bağla
clamp ile Akışkan Tipografi
clamp() ile ekrana göre ölçeklenen yazı boyutu
grid-template-areas
İsimli grid alanlarla yerleşim tanımla
minmax + auto-fit
Otomatik sığdıran duyarlı grid ızgara
aspect-ratio
Görüntü oranını CSS ile sabitle
Logical Properties
margin-inline ile dilden bağımsız boşluk
:has() Seçicisi
İçeriğe göre üst elemanı düzenle
@container Sorguları
Bileşen ölçüsüne göre stil değiştir
scroll-snap
Yatay kaydırma yakalama
prefers-reduced-motion
Kullanıcı hareket azaltma tercihine saygı duy
background-clip: text
Metni degrade ile renklendir
::selection
Metin seçim rengini özelleştir
@layer Cascade Katmanları
Stil önceliğini katmanlarla düzenle
CSS Nesting
Yerleşik (nested) kurallar
color-mix
Renkleri CSS ile karıştır
text-wrap: balance
Başlıkları dengeli sarmala
sticky ile Yapışan Başlık
scroll sırasında başlığı üstte tut
:focus-visible
Klavye odağını görünür yap
columns ile Gazete Düzeni
Metni isteğe bağlı sayfaya böl
mask-image
Degrade ile yumuşak kaybolma maskesi
writing-mode
Dikey metin akışı
Custom Scrollbar
::-webkit-scrollbar ile görünümü özelleştir
viewport Birimleri dwv/svw
Dinamik viewport birimleri
gap Yerine N Grid Margin
Görünür boşluğu oto yatayan lastik
Konuşkan Tema: prefers-color-scheme
Koyu/açık tema tercihini oku