0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

Web tasarımlarınızı CSS Academy'deki kapsamlı derslerle CSS kullanarak geliştirin.

🤖 Yapay Zeka Destekli📚 40 kurs👥 100.000+ öğrenci⭐ 4,9 puan
Kurs Özeti

CSS: Webi Şekillendiren Dil

CSS bir web sayfasının her görsel detayını kontrol eder — renk, düzen, boşluk, animasyon ve duyarlılık. Basit bir sunum katmanından, container queries, @layer, mantıksal özellikler ve Houdini API gibi modern özelliklerle geliştiricilere rendering üzerinde ayrıntılı kontrol sağlayan tam bir tasarım sistemi diline evrilmiştir. Bu yol, ilk seçiciyi yazıp büyük production kod tabanlarında kullanılan ölçeklenebilir tasarım sistemleri mimarisine kadar CSS'nin tüm kapsamını içerir.

Öğrenecekleriniz

Sözdizimi, seçiciler, renkler ve tipografi ile başlayacak, ardından kutu modeli, display özellikleri ve konumlandırma konusunda sağlam bir temel oluşturacaksınız. Buradan Flexbox ve CSS Grid ile hem standart hem de ileri düzey düzenler üzerinde çalışacak, duyarlı tasarım ve medya sorgularını uygulayacak ve bakımı kolay temalar için CSS değişkenleri, özel işlevler ve tasarım tokenlarını kullanacaksınız. Ayrıca geçişler, keyframe animasyonları, transformlar, filtreler, blend modları ve dark mode'u — artı Sass, PostCSS ve CSS-in-JS desenleri gibi modern araçları da kapsayacaksınız. Yol, BEM kullanarak CSS mimarisi, özgüllük ve cascade, container queries, @layer cascade katmanları, CSS Houdini ve performans ile sonlanır.

Öğrenme Yolu

Kırk kurs A1'den C1'e kadar uzanır. Erken A1 ve A2 kursları temelleri oluşturur — seçiciler, kutu modeli, pseudo-sınıflar, pseudo-öğeler ve birimler. B1 kursları Flexbox, Grid, duyarlı tasarım, animasyonlar, DevTools ile hata ayıklama ve CSS işlevlerini kapsar. B2 kursları ileri Flexbox ve Grid, Sass, PostCSS, CSS-in-JS, tasarım tokenları, CSS Shapes, mantıksal özellikler, container queries ve CSS Layers'a adım atar. Üç C1 kursu — CSS Houdini, CSS Performance ve CSS Future — platformun en ileri düzeyine değinir.

Nasıl Çalışır

Her kurs, gerçek zamanlı geri bildirimle yerleşik editörde doğrudan tamamladığınız kısa, odaklanmış dersler halinde bölünmüştür. Takılıp kaldığınızda bir AI tutor mevcuttur ve ilerleme kasıtlı olarak kademeli olup her konsept sonrakinden önce tanıtılmadan önce öncekini pekiştirir.

Öğrenmeye Başla →

Nasıl Öğreneceksin

🎯
Etkileşimli Dersler
Gerçek zamanlı geri bildirim ile uygulamalı kodlama alıştırmaları
🤖
AI Öğretmen
Takılırsan AI'dan anında yardım al
💻
Yerleşik Editör
Tarayıcında doğrudan kod yaz ve çalıştır
🏆
Sertifika
Kursu tamamladığında sertifika kazan
Müfredat

40 Kurs

CSS Academy öğrenme yolundaki tüm kurslar.

01

CSS Söz Dizimi ve Seçiciler

A13 ders

CSS'nin temel söz dizimini ve HTML öğelerini etiket, sınıf, ID, öznitelik ve birleşik seçiciler kullanarak hedeflemeyi öğrenin.

02

Renkler ve Arka Planlar

A14 dersPRO

Görsel açıdan zengin web sayfaları oluşturmak için CSS renk biçimlerinde ve arka plan özelliklerinde ustalaşın.

03

Tipografi ve Metin

A14 dersPRO

Yazı tipleri, boyutlar, kalınlıklar, hizalama ve özel yazı tipi yükleme teknikleriyle metin içeriğini biçimlendirin.

04

Kutu Modeli

A24 dersPRO

Her HTML öğesinin bir kutu olduğunu anlayın; boyutunu, boşluklarını, kenarlıklarını ve gölgelerini denetleyin.

05

Görüntüleme Özellikleri

A24 dersPRO

Blok, satır içi ve satır içi blok görüntüleme kipleriyle öğelerin belgede nasıl akacağını denetleyin.

06

Konumlandırma Temelleri

A24 dersPRO

CSS konum değerlerini kullanarak öğeleri normal akıştan çıkarın ve z-index ile katmanlamayı denetleyin.

07

CSS Birimleri ve Değerleri

A24 dersPRO

Ölçeklenebilir ve duyarlı düzenler oluşturmak için mutlak ve göreli CSS birimlerinde ustalaşın.

08

Sözde Sınıflar

A24 dersPRO

Sözde sınıflarla öğeleri durumlarına, konumlarına ve diğer öğelerle ilişkilerine göre hedefleyin.

09

Sözde Öğeler

A24 dersPRO

CSS sözde öğelerini kullanarak dekoratif içerik ekleyin ve öğelerin belirli bölümlerini biçimlendirin.

10

Flexbox Temelleri

B14 dersPRO

CSS Flexbox ile tek boyutlu düzenler oluşturun; yönü, hizalamayı ve kaydırmayı denetleyin.

11

CSS Grid Temelleri

B14 dersPRO

İzleri, aralıkları ve şablon alanlarını kullanarak CSS Grid ile güçlü iki boyutlu düzenler oluşturun.

12

Duyarlı Tasarım

B14 dersPRO

Akışkan genişlikler ve duyarlı tekniklerle her ekran boyutuna kusursuzca uyum sağlayan düzenler oluşturun.

13

Medya Sorguları

B14 dersPRO

Medya sorgularıyla ekran boyutuna, yönüne ve kullanıcı tercihlerine göre farklı stiller uygulayın.

14

CSS Değişkenleri

B14 dersPRO

Yeniden kullanılabilen ve dinamik olarak güncellenebilen özel özelliklerle bakımı kolay stil sayfaları oluşturun.

15

CSS Geçişleri

B14 dersPRO

Geçiş kısaltmasını ve zamanlama işlevlerini kullanarak CSS özelliklerinde yumuşak animasyonlu durum değişiklikleri oluşturun.

16

CSS Animasyonları ve @keyframes

B14 dersPRO

@keyframes ve animasyon kısaltma özelliğini kullanarak karmaşık, çok adımlı animasyonlar oluşturun.

17

CSS Dönüşümleri

B14 dersPRO

CSS dönüşüm işlevlerini kullanarak öğeleri 2B ve 3B uzayda hareket ettirin, döndürün, ölçeklendirin ve eğin.

18

Özgüllük ve Basamaklama

B14 dersPRO

Birden çok kural aynı öğeyi hedeflediğinde hangi stillerin kazanacağını CSS'nin nasıl belirlediğini derinlemesine anlayın.

19

CSS İşlevleri

B14 dersPRO

Dinamik hesaplamalar, akışkan boyutlandırma, ızgara düzenleri ve modern renk işlemleri için güçlü CSS işlevlerini kullanın.

20

Filtreler ve Karıştırma Kipleri

B14 dersPRO

CSS filtrelerini ve karıştırma kipi birleştirmesini kullanarak öğelere ve görsellere görsel efektler uygulayın.

21

Kaydırma ve Taşma

B14 dersPRO

Akıcı kullanıcı deneyimleri için kaydırma davranışını, yakalama noktalarını ve taşma kırpmayı denetleyin.

22

Karanlık Kip ve Renk Şemaları

B14 dersPRO

CSS değişkenleri, color-scheme ve medya sorgularıyla otomatik ve el ile karanlık kip uygulayın.

23

CSS Hata Ayıklama ve DevTools

B14 dersPRO

CSS düzenini, animasyonları ve hesaplanan stilleri incelemek, hatalarını ayıklamak ve anlamak için tarayıcı DevTools'ta ustalaşın.

24

İleri Düzey Flexbox

B24 dersPRO

İleri düzey Flexbox hizalaması, sıralaması ve gerçek dünya düzen kalıplarıyla temellerin ötesine geçin.

25

İleri Düzey Grid

B24 dersPRO

Adlandırılmış satırlar, otomatik yerleştirme, alt ızgara ve karmaşık kalıplarla CSS Grid'in tüm gücünü açığa çıkarın.

26

CSS Mimarisi ve BEM

B24 dersPRO

Mimari kalıplar, adlandırma kuralları ve dosya yapılarıyla büyük CSS kod tabanlarını düzenleyin.

27

CSS Şekilleri ve Clip-path

B24 dersPRO

clip-path ve CSS Shapes kullanarak dikdörtgen olmayan öğeler ve metnin etrafında akacağı şekiller oluşturun.

28

CSS Mantıksal Özellikleri

B24 dersPRO

Mantıksal özellikleri kullanarak soldan sağa ve sağdan sola dillerde çalışan, yön bağımsız CSS yazın.

29

Kapsayıcı Sorguları

B24 dersPRO

Kapsayıcı sorgularıyla stilleri görünüm alanı yerine bir bileşenin kapsayıcı boyutuna göre uygulayın.

30

CSS Katmanları (@layer)

B24 dersPRO

Büyük kod tabanlarında özgüllük çakışmalarını ortadan kaldırmak için @layer kullanarak CSS basamaklama önceliğini açıkça yönetin.

31

Sass Ön İşlemcisi

B24 dersPRO

Sass ön işlemcisiyle değişkenler, iç içe yazım, karışımlar ve işlevler kullanarak CSS yazımını güçlendirin.

32

PostCSS ve CSS Araçları

B24 dersPRO

Otomatik önek ekleme, küçültme ve özel dönüşümler için PostCSS eklentileriyle CSS'yi dönüştürün ve iyileştirin.

33

CSS-in-JS Kalıpları

B24 dersPRO

styled-components, Emotion, CSS Modules ve Vanilla Extract ile bileşen kapsamlı biçimlendirmeyi keşfedin.

34

Tasarım Belirteçleri ve Temalandırma

B24 dersPRO

Tasarım belirteçleri ve CSS özel özellikleriyle çok markalı temalandırma kullanarak ölçeklenebilir tasarım sistemleri oluşturun.

35

CSS Testi

B24 dersPRO

Gerileme testleri, birim testleri ve erişilebilirlik denetimleriyle CSS'nin doğruluğunu ve görsel tutarlılığını güvenceye alın.

36

CSS Bileşen Kalıpları

B24 dersPRO

Yalnızca CSS teknikleriyle kartlar, iletişim pencereleri, açılır menüler ve sekmeler gibi üretime hazır arayüz bileşenleri oluşturun.

37

Modern Düzen Kalıpları

B24 dersPRO

Modern CSS Grid ve Flexbox teknikleriyle ileri düzey, gerçek dünya düzen kalıplarını uygulayın.

38

CSS Houdini

C14 dersPRO

Özel özellikler, boyama ve düzen için Houdini API'lerini kullanarak CSS'yi JavaScript ile genişletin.

39

CSS Performansı

C14 dersPRO

Tarayıcının oluşturma veri hattını anlayarak CSS'nin teslimatını ve oluşturma performansını iyileştirin.

40

CSS'nin Geleceği

C14 dersPRO

Yerel iç içe yazım, :has(), kapsamlı stiller ve Görünüm Geçişleriyle CSS'nin en yeni özelliklerini keşfedin.

SSS

Sıkça Sorulan Sorular

CSS Academy kursu ücretsiz mi?

Evet. CSS Academy kursunu ücretsiz olarak başlayabilir ve etkileşimli derslerini hiç ücret ödemeden tamamlayabilirsin. İsteğe bağlı PRO aboneliği gelişmiş yapay zeka araçlarını ve paylaşılabilir bir sertifikayı açar.

CSS öğrenmek için önceki deneyim gerekli mi?

Hayır. Kurs temel bilgilerle başlar ve giderek daha ileri konulara ilerler, bu nedenle CSS deneyimi olmasa bile başlayabilirsin.

CoddyKit'te CSS nasıl öğreneceksin?

Yaparak öğrenirsin. Kısa etkileşimli dersler, açık bir açıklama ile gerçek zamanlı çalışan uygulamalı bir kodlama alıştırmasını bir araya getirir ve 24/7 AI öğretmen takılırsan kişiselleştirilmiş yardım sağlar.

CSS Academy kursunu tamamladığımda sertifika alır mıyım?

Evet. PRO öğrenenler sınav yapabilir ve CSS Academy kursu için doğrulanabilir bir koduyla paylaşılabilir bir tamamlama sertifikası kazanabilirler.

CSS öğrenimini telefonumda yapabilir miyim?

Evet. CoddyKit web ve yerel iOS ile Android uygulamaları olarak erişilebilir, böylece CSS öğrenimini herhangi bir cihazda yapabilir ve ilerlemeniz cihazlar arasında senkronize olur.

CSS Academy Kursuna Şimdi Başla

Yapay zeka destekli derslerle programlamayı öğrenen binlerce öğrenciye katıl.

Ücretsiz Başla →Tüm Kursları Gözden Geçir