CSS

1

Flexbox temelleri

6 ders · 30 dk

1. 1 Flex container nedir? display: flex ile esnek kapsayıcıyı öğrenirsin. 5 dk
2. 2 Flex-direction flex-direction ile ana eksen yönünü öğrenirsin. 5 dk
3. 3 Justify-content justify-content ile ana eksen hizalamayı öğrenirsin. 5 dk
4. 4 Align-items align-items ile çapraz eksen hizalamayı öğrenirsin. 5 dk
5. 5 Flex-wrap flex-wrap ile öğelerin satır atlamasını öğrenirsin. 5 dk
6. 6 Özet - Yatay menü Flexbox ile yatay menü ve araç çubuğu kurarsın. 5 dk

2

İleri flexbox

6 ders · 30 dk

1. 1 Flex-grow flex-grow ile öğelerin büyümesini öğrenirsin. 5 dk
2. 2 Flex kısayolu flex kısayolu ile grow, shrink ve basis'i tek satırda yazarsın. 5 dk
3. 3 Order order ile öğelerin görüntülenme sırasını öğrenirsin. 5 dk
4. 4 Align-self align-self ile tek öğenin hizalamasını öğrenirsin. 5 dk
5. 5 Gap gap ile flex öğeleri arasındaki boşluğu öğrenirsin. 5 dk
6. 6 Özet - Kart ızgarası Flexbox ile duyarlı kart ızgarası kurarsın. 5 dk

3

Sözde sınıflar

6 ders · 30 dk

1. 1 :hover ve :focus :hover ve :focus sözde sınıflarını öğrenirsin. 5 dk
2. 2 :nth-child :nth-child ile kardeş seçimini öğrenirsin. 5 dk
3. 3 :not ve :is :not ve :is sözde sınıflarını öğrenirsin. 5 dk
4. 4 :first-child ve :last-child :first-child ve :last-child sözde sınıflarını öğrenirsin. 5 dk
5. 5 :checked ve :disabled :checked ve :disabled sözde sınıflarını öğrenirsin. 5 dk
6. 6 Özet - Etkileşimli liste Sözde sınıflarla etkileşimli liste arayüzü kurarsın. 5 dk

4

Sözde elementler

6 ders · 30 dk

1. 1 ::before ve ::after ::before ve ::after sözde elementlerini öğrenirsin. 5 dk
2. 2 Content özelliği content özelliği ile sözde element içeriğini öğrenirsin. 5 dk
3. 3 ::first-letter ve ::first-line ::first-letter ve ::first-line sözde elementlerini öğrenirsin. 5 dk
4. 4 ::selection ::selection ile metin seçim stillerini öğrenirsin. 5 dk
5. 5 ::placeholder ::placeholder ile input ipucu stillerini öğrenirsin. 5 dk
6. 6 Özet - Dekoratif başlık Sözde elementlerle dekoratif başlık süslemeleri kurarsın. 5 dk

5

İleri seçiciler

4 ders · 20 dk

1. 1 Kardeş seçiciler (+ ve ~) + bitişik kardeş ve ~ genel kardeş birleştiricilerini öğrenirsin. 5 dk
2. 2 Öznitelik seçici desenleri [attr^=], [attr$=], [attr*=] desenlerini öğrenirsin. 5 dk
3. 3 :where ve :has :where ve :has sözde sınıflarını öğrenirsin. 5 dk
4. 4 Özet - Breadcrumb menü İleri seçicilerle breadcrumb menü kurarsın. 5 dk

6

Proje: Landing sayfasıProje

5 ders · 25 dk

1. 1 Proje: Landing sayfası 5 derslik projenin genel bakışı: bir ürün landing sayfası kuracaksın. 4 dk
2. 2 Hero bölümü Flexbox ile hero bölümü düzenini kurarsın. 5 dk
3. 3 Özellik listesi Flexbox ile özellik listesi ızgarası kurarsın. 5 dk
4. 4 Fiyat kartları Flexbox ile fiyat kartları düzenini kurarsın. 5 dk
5. 5 Proje sonu - Landing sayfası Tüm parçaları birleştirip landing sayfasını tamamlarsın. 6 dk

7

Grid temelleri

6 ders · 30 dk

1. 1 Grid container nedir? display: grid ile ızgara kapsayıcısını öğrenirsin. 5 dk
2. 2 Grid-template-columns grid-template-columns ile sütun yapısını öğrenirsin. 5 dk
3. 3 Grid-template-rows grid-template-rows ile satır yapısını öğrenirsin. 5 dk
4. 4 Grid gap gap ile ızgara hücreleri arasındaki boşluğu öğrenirsin. 5 dk
5. 5 Repeat fonksiyonu repeat() ile tekrarlayan sütun/satır tanımlarını öğrenirsin. 5 dk
6. 6 Özet - Foto galeri Grid ile foto galeri ızgarası kurarsın. 5 dk

8

İleri grid

6 ders · 30 dk

1. 1 Grid-column grid-column ile öğelerin sütun boyunca yerleşimini öğrenirsin. 5 dk
2. 2 Grid-row grid-row ile öğelerin satır boyunca yerleşimini öğrenirsin. 5 dk
3. 3 Grid-template-areas grid-template-areas ile adlandırılmış bölgeleri öğrenirsin. 5 dk
4. 4 Grid-area grid-area ile öğeleri bölgelere yerleştirirsin. 5 dk
5. 5 Minmax fonksiyonu minmax() ile esnek sütun/satır boyutlarını öğrenirsin. 5 dk
6. 6 Özet - Magazin düzeni Grid-template-areas ile magazin düzeni kurarsın. 5 dk

9

Duyarlı tasarım temelleri

6 ders · 30 dk

1. 1 Görünüm alanı meta HTML'deki viewport meta etiketinin CSS ile ilişkisini öğrenirsin. 5 dk
2. 2 Media query temelleri @media kuralını ve ekran genişliği koşullarını öğrenirsin. 5 dk
3. 3 Breakpoints Yaygın breakpoint değerlerini ve seçim ölçütlerini öğrenirsin. 5 dk
4. 4 Duyarlı tipografi clamp() ve vw birimleriyle duyarlı tipografiyi öğrenirsin. 5 dk
5. 5 Duyarlı görseller max-width: 100% ile görsellerin duyarlı olmasını öğrenirsin. 5 dk
6. 6 Özet - Duyarlı kart Media query ile duyarlı kart düzeni kurarsın. 5 dk

10

Duyarlı düzen

6 ders · 30 dk

1. 1 Mobil öncelikli yaklaşım Mobil öncelikli CSS yazma yöntemini öğrenirsin. 5 dk
2. 2 Grid ile duyarlı düzen auto-fit ve minmax ile duyarlu ızgara kurarsın. 5 dk
3. 3 Flex ile duyarlı düzen flex-wrap ile duyarlı flex düzeni kurarsın. 5 dk
4. 4 Gizleme ve gösterme display: none ile öğeleri duyarlı olarak gizlemeyi öğrenirsin. 5 dk
5. 5 Yazdırma stilleri @media print ile yazdırma stillerini öğrenirsin. 5 dk
6. 6 Özet - Çok sütunlu sayfa Duyarlı çok sütunlu bir sayfa düzeni kurarsın. 5 dk

11

Geçişler

6 ders · 30 dk

1. 1 Transition nedir? transition özelliğinin temelini öğrenirsin. 5 dk
2. 2 Transition-property transition-property ile hangi özelliğin geçiş yapacağını öğrenirsin. 5 dk
3. 3 Transition-duration transition-duration ile geçiş süresini öğrenirsin. 5 dk
4. 4 Timing function transition-timing-function ile geçiş eğrisini öğrenirsin. 5 dk
5. 5 Transition-delay transition-delay ile geçiş gecikmesini öğrenirsin. 5 dk
6. 6 Özet - Hover efektleri Transition özellikleriyle hover efektli düğmeler kurarsın. 5 dk

12

Dönüşümler

6 ders · 30 dk

1. 1 Transform nedir? transform özelliğinin temelini öğrenirsin. 5 dk
2. 2 Translate translate() ile öğeleri kaydırmayı öğrenirsin. 5 dk
3. 3 Rotate rotate() ile öğeleri döndürmeyi öğrenirsin. 5 dk
4. 4 Scale scale() ile öğeleri ölçeklendirmeyi öğrenirsin. 5 dk
5. 5 Skew skew() ile öğeleri eğmeyi öğrenirsin. 5 dk
6. 6 Özet - Etkileşimli kart Transform ile hover efektli etkileşimli kart kurarsın. 5 dk

13

CSS değişkenleri

6 ders · 30 dk

1. 1 CSS değişkenleri nedir? Custom property (--name) kavramını öğrenirsin. 5 dk
2. 2 Değişken tanımlama :root ve element üzerinde değişken tanımlamayı öğrenirsin. 5 dk
3. 3 Var() fonksiyonu var() ile değişken kullanmayı öğrenirsin. 5 dk
4. 4 Değişken fallback var() içinde fallback değer kullanmayı öğrenirsin. 5 dk
5. 5 Tema değiştirme Değişkenlerle tema değiştirmeyi öğrenirsin. 5 dk
6. 6 Özet - Tasarım sistemi Değişkenlerle küçük bir tasarım sistemi kurarsın. 5 dk

14

Form stilleri

6 ders · 30 dk

1. 1 Input stilleri input etiketini biçimlendirmeyi öğrenirsin. 5 dk
2. 2 Label ve placeholder label ve ::placeholder stillerini öğrenirsin. 5 dk
3. 3 Focus durumları :focus ve :focus-visible ile odak stillerini öğrenirsin. 5 dk
4. 4 Button stilleri button etiketini biçimlendirmeyi öğrenirsin. 5 dk
5. 5 Checkbox ve radio checkbox ve radio stillerini öğrenirsin. 5 dk
6. 6 Özet - Kayıt formu Form stilleriyle kayıt formu kurarsın. 5 dk

15

Tablo stilleri

6 ders · 30 dk

1. 1 Tablo iskeleti table, tr, td için temel stilleri öğrenirsin. 5 dk
2. 2 Border-collapse border-collapse ile hücre kenarlıklarını birleştirirsin. 5 dk
3. 3 Başlık hücreleri th için özel stiller öğrenirsin. 5 dk
4. 4 Zebra çizgiler :nth-child(even) ile zebra çizgili tablo öğrenirsin. 5 dk
5. 5 Hover satırı :hover ile satır hover efektini öğrenirsin. 5 dk
6. 6 Özet - Veri tablosu Tablo stilleriyle profesyonel veri tablosu kurarsın. 5 dk

16

SVG stilleri

6 ders · 30 dk

1. 1 SVG nedir? SVG'in CSS ile nasıl biçimlendirildiğini öğrenirsin. 5 dk
2. 2 Fill ve stroke fill ve stroke özelliklerini öğrenirsin. 5 dk
3. 3 SVG hover efektleri SVG öğelerine hover efektleri eklersin. 5 dk
4. 4 CurrentColor currentColor ile metin rengini SVG'e aktarmayı öğrenirsin. 5 dk
5. 5 SVG ikonları SVG ile ikon sistemini öğrenirsin. 5 dk
6. 6 Özet - İkon kümesi SVG ile ikon kümesi kurarsın. 5 dk

17

Orta seviye finaliFinal

5 ders · 31 dk

1. 1 Meydan okuma - Flexbox galeri Flexbox ile duyarlı bir foto galeri kurarsın. 6 dk
2. 2 Meydan okuma - Grid magazin Grid-template-areas ile magazin düzeni kurarsın. 6 dk
3. 3 Meydan okuma - Duyarlı navbar Mobil öncelikli duyarlı bir navbar kurarsın. 6 dk
4. 4 Meydan okuma - Form ve tablo Form ve tablo stilleriyle kayıt arayüzü kurarsın. 6 dk
5. 5 Meydan okuma - Orta seviye projesi Tüm orta seviye konularını birleştiren bir ana sayfa kurarsın. 7 dk

1

Animasyonlar

6 ders · 30 dk

1. 1 Keyframes nedir? @keyframes kuralını ve animasyon temellerini öğrenirsin. 5 dk
2. 2 Animation-name ve duration animation-name ve animation-duration özelliklerini öğrenirsin. 5 dk
3. 3 Animation timing function animation-timing-function ile animasyon eğrisini öğrenirsin. 5 dk
4. 4 Animation iteration animation-iteration-count ile tekrar sayısını öğrenirsin. 5 dk
5. 5 Animation direction ve fill-mode animation-direction ve animation-fill-mode özelliklerini öğrenirsin. 5 dk
6. 6 Özet - Yükleyici animasyonu Animasyon özellikleriyle dönen yükleyici kurarsın. 5 dk

2

Gradyanlar

6 ders · 30 dk

1. 1 Lineer gradyan linear-gradient() ile doğrusal gradyanları öğrenirsin. 5 dk
2. 2 Radyal gradyan radial-gradient() ile dairesel gradyanları öğrenirsin. 5 dk
3. 3 Konik gradyan conic-gradient() ile açısal gradyanları öğrenirsin. 5 dk
4. 4 Renk durakları Color stop konumlandırmayı öğrenirsin. 5 dk
5. 5 Katmanlı gradyanlar Birden çok gradyanı katmanlamayı öğrenirsin. 5 dk
6. 6 Özet - Düğme varyasyonları Gradyanlarla düğme varyasyonları kurarsın. 5 dk

3

Filtreler ve blend

6 ders · 30 dk

1. 1 Filter özelliği filter: blur, brightness, contrast fonksiyonlarını öğrenirsin. 5 dk
2. 2 Grayscale ve sepia grayscale() ve sepia() filtrelerini öğrenirsin. 5 dk
3. 3 Hue-rotate ve saturate hue-rotate() ve saturate() filtrelerini öğrenirsin. 5 dk
4. 4 Drop-shadow drop-shadow() ile Alpine gölgeyi öğrenirsin. 5 dk
5. 5 Mix-blend-mode mix-blend-mode ile karışım modlarını öğrenirsin. 5 dk
6. 6 Özet - Görsel efektler Filtre ve blend modlarıyla görsel efekt galerisi kurarsın. 5 dk

4

Modern düzen

6 ders · 30 dk

1. 1 Subgrid subgrid ile iç ızgara kalıtımını öğrenirsin. 5 dk
2. 2 Container queries @container kuralını öğrenirsin. 5 dk
3. 3 Aspect-ratio aspect-ratio ile en-boy oranını öğrenirsin. 5 dk
4. 4 Object-fit object-fit ile görsel sığdırma yöntemlerini öğrenirsin. 5 dk
5. 5 Gap çoklu sütun column-count ve column-gap ile çoklu sütun düzenini öğrenirsin. 5 dk
6. 6 Özet - Modern kart ızgarası Modern düzen özellikleriyle kart ızgarası kurarsın. 5 dk

5

Yazım modları ve mantıksal özellikler

6 ders · 30 dk

1. 1 Writing-mode writing-mode ile metin yönünü öğrenirsin. 5 dk
2. 2 Logical properties margin-inline, padding-block gibi mantıksal özellikleri öğrenirsin. 5 dk
3. 3 Inset özelliği inset ile konumlandırma öğrenirsin. 5 dk
4. 4 Block ve inline block ve inline eksen kavramlarını öğrenirsin. 5 dk
5. 5 Direction ve unicode-bidi direction ve unicode-bidi özelliklerini öğrenirsin. 5 dk
6. 6 Özet - Çok yönlü kart Mantıksal özelliklerle çok yönlü kart düzeni kurarsın. 5 dk

6

Erişilebilir CSS

6 ders · 30 dk

1. 1 Sr-only tekniği Ekran okuyucu için görsel gizleme tekniğini öğrenirsin. 5 dk
2. 2 Focus-visible :focus-visible ile erişilebilir odak stillerini öğrenirsin. 5 dk
3. 3 Tercih edilen renk şeması @media (prefers-color-scheme) ile koyu tema öğrenirsin. 5 dk
4. 4 Tercih edilen hareket azaltma @media (prefers-reduced-motion) ile animasyon azaltmayı öğrenirsin. 5 dk
5. 5 Tercih edilen kontrast @media (prefers-contrast) ile yüksek kontrastı öğrenirsin. 5 dk
6. 6 Özet - Erişilebilir tema Erişilebilir tema kurallarıyla tam erişilebilir tema kurarsın. 5 dk

7

Yazdırma ve sayfalanmış medya

6 ders · 30 dk

1. 1 @page kuralı @page kuralı ile sayfa boyutunu öğrenirsin. 5 dk
2. 2 Page break break-before, break-after, break-inside özelliklerini öğrenirsin. 5 dk
3. 3 Print medya @media print ile yazdırma stillerini öğrenirsin. 5 dk
4. 4 Print renk ayar print-color-adjust ile yazdırma rengini öğrenirsin. 5 dk
5. 5 Sayfa numarası CSS ile sayfa numarası eklemeyi öğrenirsin. 5 dk
6. 6 Özet - Yazdırılabilir rapor Yazdırma stilleriyle yazdırılabilir rapor sayfası kurarsın. 5 dk

8

Proje: Dashboard UIProje

5 ders · 25 dk

1. 1 Proje: Dashboard UI 5 derslik projenin genel bakışı: bir dashboard arayüzü kuracaksın. 4 dk
2. 2 Sidebar ve üst bilgi Grid ile sidebar ve üst bilgi düzeni kurarsın. 5 dk
3. 3 KPI kartları Flexbox ile KPI kartları ızgarası kurarsın. 5 dk
4. 4 Veri tablosu Tablo stilleriyle veri tablosu kurarsın. 5 dk
5. 5 Proje sonu - Dashboard Tüm parçaları birleştirip dashboard'u tamamlarsın. 6 dk

9

İleri seviye finaliFinal

5 ders · 31 dk

1. 1 Meydan okuma - Animasyonlu hero Animasyon ve gradyanlarla bir hero bölümü kurarsın. 6 dk
2. 2 Meydan okuma - Sözde element kartı Sözde elementlerle dekoratif kart kurarsın. 6 dk
3. 3 Meydan okuma - İleri seçiciler İleri seçicilerle bileşik liste arayüzü kurarsın. 6 dk
4. 4 Meydan okuma - Modern düzen Subgrid ve container queries ile modern düzen kurarsın. 6 dk
5. 5 Meydan okuma - İleri seviye projesi Tüm ileri seviye konularını birleştiren bir portföy sayfası kurarsın. 7 dk

1

CSS mimarisi

6 ders · 35 dk

1. 1 BEM metodolojisi Block, Element, Modifier adlandırma metodolojisini öğrenirsin. 6 dk
2. 2 CSS örgütme Büyük CSS dosyalarını örgütleme yöntemlerini öğrenirsin. 6 dk
3. 3 Specificity yönetimi Spesifite hesabını ve yönetimini öğrenirsin. 6 dk
4. 4 Cascade layers @layer kuralı ile katmanlı cascading'i öğrenirsin. 6 dk
5. 5 Modüler CSS Modüler CSS yazma yöntemlerini öğrenirsin. 6 dk
6. 6 Özet - Bileşen kütüphanesi BEM ve cascade layers ile bileşen kütüphanesi iskeleti kurarsın. 5 dk

2

CSS performansı

6 ders · 35 dk

1. 1 CSS performansı nedir? CSS'in render performansını etkileyen faktörleri öğrenirsin. 6 dk
2. 2 Selector performansı Seçici performansını ve optimize etmeyi öğrenirsin. 6 dk
3. 3 Layout ve paint Layout ve paint maliyetini öğrenirsin. 6 dk
4. 4 Will-change will-change ile performans ipucu vermeyi öğrenirsin. 6 dk
5. 5 Contain contain ile render izolasyonunu öğrenirsin. 6 dk
6. 6 Özet - Hızlı kart listesi Performans teknikleriyle hızlı kart listesi kurarsın. 5 dk

3

CSS Houdini

6 ders · 35 dk

1. 1 Houdini nedir? CSS Houdini projelerini öğrenirsin. 6 dk
2. 2 Paint API CSS Paint API ile özel çizim öğrenirsin. 6 dk
3. 3 Layout API CSS Layout API ile özel düzen öğrenirsin. 6 dk
4. 4 Properties ve values API CSS Properties and Values API ile değişken kaydı öğrenirsin. 6 dk
5. 5 Typed OM CSS Typed OM ile tip güvenli değerleri öğrenirsin. 6 dk
6. 6 Özet - Özel arka plan deseni Houdini ile özel arka plan deseni kurarsın. 5 dk

4

İleri container queries

6 ders · 35 dk

1. 1 Container-type derinlemesine container-type: inline-size ve size değerlerini öğrenirsin. 6 dk
2. 2 Container-name container-name ile adlandırılmış kapsayıcıları öğrenirsin. 6 dk
3. 3 Container query units cqw, cqh, cqi, cqb birimlerini öğrenirsin. 6 dk
4. 4 Container-style style() fonksiyonu ile kapsayıcı stillerini öğrenirsin. 6 dk
5. 5 Container bileşenleri Container queries ile tekrar kullanılabilir bileşen kurarsın. 6 dk
6. 6 Özet - Duyarlı widget sistemi Container queries ile duyarlı widget sistemi kurarsın. 5 dk

5

View transitions

6 ders · 35 dk

1. 1 View transitions nedir? View Transitions API ile sayfa geçişlerini öğrenirsin. 6 dk
2. 2 ::view-transition ::view-transition sözde elementini öğrenirsin. 6 dk
3. 3 View-transition-name view-transition-name ile adlandırılmış geçişleri öğrenirsin. 6 dk
4. 4 Geçiş animasyonları View transition için özel animasyon öğrenirsin. 6 dk
5. 5 Cross-document transitions Çok sayfalı geçişleri öğrenirsin. 6 dk
6. 6 Özet - Geçişli galeri View transitions ile geçişli galeri kurarsın. 5 dk

6

Kaydırma tabanlı animasyonlar

6 ders · 35 dk

1. 1 Scroll-driven animasyonlar animation-timeline: scroll() ile kaydırma tabanlı animasyonu öğrenirsin. 6 dk
2. 2 Scroll function scroll() fonksiyonunu öğrenirsin. 6 dk
3. 3 View function view() fonksiyonu ile görünürlük tabanlı animasyonu öğrenirsin. 6 dk
4. 4 Timeline_ATTACHMENT animation-range ile zaman aralığını öğrenirsin. 6 dk
5. 5 Scroll-snap scroll-snap-type ve scroll-snap-align özelliklerini öğrenirsin. 6 dk
6. 6 Özet - Kaydırma hikayesi Kaydırma tabanlı animasyonlarla hikaye anlatımı kurarsın. 5 dk

7

Anchor positioning

6 ders · 35 dk

1. 1 Anchor positioning nedir? CSS anchor positioning temellerini öğrenirsin. 6 dk
2. 2 Anchor-name anchor-name ile çapa adlandırmayı öğrenirsin. 6 dk
3. 3 Position-anchor position-anchor ile çapaya bağlamayı öğrenirsin. 6 dk
4. 4 Anchor() fonksiyonu anchor() fonksiyonu ile konumlandırma öğrenirsin. 6 dk
5. 5 Position-try position-try ile çakışma çözümünü öğrenirsin. 6 dk
6. 6 Özet - Açılır panel Anchor positioning ile açılır panel kurarsın. 5 dk

8

CSS nesting

6 ders · 35 dk

1. 1 CSS nesting nedir? CSS native nesting sözdizimini öğrenirsin. 6 dk
2. 2 & nesting selector & nesting seçicisini öğrenirsin. 6 dk
3. 3 Nested media @media içinde nested kullanmayı öğrenirsin. 6 dk
4. 4 Nested pseudo &:hover gibi nested sözde sınıfları öğrenirsin. 6 dk
5. 5 Nested compound &.class gibi bileşik seçicileri öğrenirsin. 6 dk
6. 6 Özet - Bileşen stili Nesting ile bileşen stilleri kurarsın. 5 dk

9

Uzman finaliFinal

5 ders · 36 dk

1. 1 Meydan okuma - BEM mimarisi BEM ve cascade layers ile büyük bir bileşen mimarisi kurarsın. 7 dk
2. 2 Meydan okuma - Container sistemi Container queries ile tekrar kullanılabilir widget sistemi kurarsın. 7 dk
3. 3 Meydan okuma - View transitions View transitions ile sayfa geçişli uygulama kurarsın. 7 dk
4. 4 Meydan okuma - Anchor panel Anchor positioning ile akıllı açılır panel kurarsın. 7 dk
5. 5 Meydan okuma - Uzman projesi Tüm uzman konularını birleştiren bir tasarım sistemi kurarsın. 8 dk