HTML Journey'nin bir parçasıPopülerYolculukCSS Öğren
Ücretsiz, interaktif bir CSS kursu. Her derste gerçek HTML'i stillendirirsin - seçiciler, kutu modeli, renkler, fontlar, flexbox, grid, duyarlı tasarım - yazdıkça canlı bir önizleme ve bitirdiğinde ücretsiz bir sertifika ile birlikte. Daha geniş HTML yolculuğunun bir parçası olduğundan, CSS'in ihtiyaç duyduğu işaretleme bağlamı tam orada.
269,396+ codders kayıtlı
- Başlangıç dostu
Yapay zeka destekli kodlama yardımı
Uygulamalı interaktif dersler
Her derste sesli anlatım
Bilgini sınamak için testler
Ücretsiz tamamlama sertifikası
Müfredat
Bu bölüm HTML Journey'nin bir parçası. Tam müfredatta daha fazla bölüm var - Journey sayfasında görmek için aşağıdaki herhangi bir önizlemeye tıkla.
- Bölüm 1Fundamentals60 ders
Bölüm 2
Styling with CSS
Bölüme başlaBaşlaGenişletDaraltBring your web pages to life with colors, layouts, and stylesGiriş
5 ders540- 01CSS Nedir?GörevQuiz
- 02CSS SözdizimiGörevQuiz
- 03CSS Yorum SatırlarıQuiz
- 04Head EtiketiGörevQuiz
- 05Title EtiketiGörevUstalıkQuiz
CSS Ekleme
4 ders725- 01Satır İçi CSSGörevUstalıkQuiz
- 02Dahili CSSGörevUstalıkQuiz
- 03Harici CSSGörevUstalıkQuiz
- 04Temel Stil Verme MücadelesiGörev
Temel Seçiciler
7 ders1247- 01Seçicilere GirişGörevQuiz
- 02Tür SeçiciGörevUstalıkQuiz
- 03Sınıf SeçiciGörevUstalıkQuiz
- 04ID SeçiciGörevUstalıkQuiz
- 05Grup SeçicilerGörevUstalıkQuiz
- 06Evrensel SeçiciGörevUstalıkQuiz
- 07Seçim Meydan OkumasıGörev
Metin Temelleri
8 ders1450- 01Metin RengiGörevUstalıkQuiz
- 02Yazı Tipi AilesiGörevUstalıkQuiz
- 03Yazı Tipi BoyutuGörevUstalıkQuiz
- 04Yazı Tipi KalınlığıGörevUstalıkQuiz
- 05Metin HizalamaGörevUstalıkQuiz
- 06Metin SüslemeGörevUstalıkQuiz
- 07Tekrar Görevi #1Görev
- 08Tekrar Görevi #2Görev
Renkler ve Arka Planlar
5 ders834- 01Arka Plan RengiGörevUstalıkQuiz
- 02HEX RenkleriGörevUstalıkQuiz
- 03RGB RenkleriGörevUstalıkQuiz
- 04RGBA ile ŞeffaflıkGörevQuiz
- 05Tekrar Görevi #1Görev
Kafe Menüsü
Proje3 ders1- 01Tipografi TemelleriGörev
- 02Metin ŞekillendirmeProje
- 03Renk ve Arka PlanlarProje
Kutu Modeli Bölüm 1
6 ders943- 01Kutu Modeli Nedir?Quiz
- 02PaddingGörevUstalıkQuiz
- 03MarginGörevUstalıkQuiz
- 04KenarlıklarGörevUstalıkQuiz
- 05Genişlik ve YükseklikGörevUstalıkQuiz
- 06Özet Meydan OkumasıGörev
Kutu Modeli Bölüm 2
5 ders834- 01Kutu BoyutlandırmaGörevQuiz
- 02Kenarlık YarıçapıGörevUstalıkQuiz
- 03TaşmaGörevUstalıkQuiz
- 04Kutu GölgesiGörevUstalıkQuiz
- 05Tekrar Meydan OkumasıGörev
Flex Box
6 ders943- 01Flex Box Nedir?GörevQuiz
- 02Flex DirectionGörevUstalıkQuiz
- 03Justify ContentGörevUstalıkQuiz
- 04Align ItemsGörevUstalıkQuiz
- 05Kusursuz OrtalamaGörevQuiz
- 06Flex Box Meydan OkumasıGörev
Giriş Formu
Proje4 ders1- 01GövdeGörev
- 02Form KapsayıcısıProje
- 03InputProje
- 04ButonProje
Yerleşim Teknikleri
7 ders1152- 01Block ve Inline ÖğelerGörevQuiz
- 02Konumlandırma TemelleriGörevUstalıkQuiz
- 03Relative KonumlandırmaGörevUstalıkQuiz
- 04Absolute KonumlandırmaGörevUstalıkQuiz
- 05Fixed KonumlandırmaGörevUstalıkQuiz
- 06Z-Index TemelleriGörevQuiz
- 07Özet Meydan OkumasıGörev
Duyarlı Tasarım Temelleri
6 ders1052- 01Responsive Tasarım Nedir?GörevQuiz
- 02Viewport Meta EtiketiGörevQuiz
- 03Akışkan DüzenlerGörevUstalıkQuiz
- 04Viewport BirimleriGörevUstalıkQuiz
- 05Media Queries TemelleriGörevUstalıkQuiz
- 06Esnek GörsellerGörevUstalıkQuiz
Tonga Web Sayfası
Proje6 ders1- 01Gezinme MenüsüGörev
- 02Karşılama BaşlığıProje
- 03Hakkında BölümüProje
- 04İletişim BölümüProje
- 05Viewport EtiketiProje
- 06Media QueryProje
Son Meydan Okumalar
4 ders4- 01Öğeleri DüzenleGörev
- 02Film ListesiGörev
- 03Düğün DavetiyesiGörev
- 04Yüzen BildirimGörev
Bölüm 3
CSS Mastery
Bölüme başlaBaşlaGenişletDaraltTake you css skills to the next level!Seçici Uzmanlığı – Kombinasyon
6 ders539- 01GirişQuiz
- 02Alt Öğe SeçicisiGörevQuiz
- 03Çocuk SeçiciGörevQuiz
- 04Bitişik Kardeş SeçicisiGörevQuiz
- 05Genel Kardeş SeçicisiGörevQuiz
- 06Özet Meydan OkumasıGörev
Etkileşimli Sözde Sınıflar
5 ders431- 01Sözde SınıflarQuiz
- 02Hover EfektleriGörevQuiz
- 03Odaklanma EfektleriGörevQuiz
- 04Aktif StillerGörevQuiz
- 05Özet Meydan OkumasıGörev
Yapısal sözde sınıflar
5 ders432- 01Yapısal sözde sınıflarQuiz
- 02İlk Çocuğu HedeflemeGörevQuiz
- 03Son Çocuğu HedeflemeGörevQuiz
- 04Desen Gücü: nth-child KullanımıGörevQuiz
- 05Özet Meydan OkumasıGörev
Açılır Menü Projesi
4 ders4- 01Alt Menüyü EkleGörev
- 02Alt Menüyü GösterGörev
- 03Daha Fazla Stil VermeGörev
- 04Input ve ButonGörev
Görsel Efektler
5 ders536- 01GradyanlarGörevQuiz
- 02CSS FiltreleriGörevQuiz
- 03TransformGörevQuiz
- 04Geçişler ve Hover EfektleriGörevQuiz
- 05Tekrar Meydan OkumasıGörev
Açılış Sayfası
5 ders5- 01Header Bölümünü Stilize EtGörev
- 02Butonu Stilize EtGörev
- 03Bölüm DüzeniGörev
- 04Kart DüzeniGörev
- 05Son Dokunuşları EkleGörev
CSS Grid ile İnşa Edin
4 ders426- 01Grid TemelleriGörevQuiz
- 02Grid-row Öğe YerleşimiGörevQuiz
- 03İsimlendirilmiş AlanlarGörevQuiz
- 04Tekrar GöreviGörev
Flavor Fiesta web sitesi
4 ders4- 01Grid yapısını kurmaGörev
- 02HeaderGörev
- 03Ana bölümGörev
- 04FooterGörev
Son Meydan Okumalar
5 ders5- 01Aktif Menüyü VurgulamaGörev
- 02Zebra Tablo SatırlarıGörev
- 03Buton Hover EfektiGörev
- 04Grid Kart DüzeniGörev
- 05Bulanık Hero GörseliGörev
- Bölüm 4Practical Frontend35 ders
- Bölüm 5JavaScript in Action27 ders
Neden CSS'i Coddy ile öğrenmelisin
- CSS'i tarayıcında yaz ve sayfanın canlı olarak yeniden stillendiğini izle. Derleme adımı yok, editör kurulumu yok. Bir seçiciye veya özelliğe yaptığın her değişiklik anında görünür, böylece her kuralın gerçekte ne yaptığını görürsün.
- Temel CSS: seçiciler ve özgüllük, kutu modeli, konumlandırma, flexbox, CSS grid, geçişler, medya sorguları ve duyarlı tasarım. Her ön uç geliştiricinin günlük olarak ihtiyaç duyduğu CSS.
- Yapay zeka ipuçları, herkesi her zaman zorlayan şeyleri ayıklamana yardımcı olur - özgüllük sürprizleri, düzen taşmaları, garip flexbox davranışları - çözümü açık etmeden, böylece CSS sihirli olmaktan çıkıp sezgisel hale gelir.
- Bölümü bitirdiğinde ücretsiz CSS sertifikası. Tam bir ön uç temeli için HTML ve JavaScript kurslarıyla doğal olarak eşleşir.
CSS öğrenmeyle ilgili sıkça sorulan sorular
CSS nedir?
CSS (Cascading Style Sheets), HTML sayfalarının nasıl göründüğünü kontrol eden dildir - renkler, fontlar, boşluklar, düzen, animasyonlar ve ekran boyutları arasında duyarlı davranış. HTML sayfada neyin olduğunu tanımlar; CSS ise bunun nasıl sunulduğunu tanımlar.
CSS öğrenmesi zor mu?
Temel CSS - seçiciler, renkler, fontlar, kutu modeli - birkaç saatte kolayca kavranır. Daha zor kısımlar sonra gelir: özgüllük kuralları, flexbox ve grid düzenleri ve her ekran boyutunda işlerin doğru görünmesini sağlamak. Kurs bunları küçük adımlarla ve canlı bir önizlemeyle tanıtır, böylece her kuralın tam olarak ne yaptığını görürsün.
CSS'ten önce HTML öğrenmeli miyim?
Evet. HTML bir sayfanın yapısını tanımlar; CSS ise onu stillendirir. HTML olmadan stillendirecek hiçbir şeyin olmaz. Bu CSS bölümü tam da bu yüzden HTML yolculuğunun bir parçasıdır - önce HTML temelleri bölümü gelir, ardından yolculuğun büyük bölümünü onu stillendirerek geçirirsin.
CSS, Flexbox ve Grid arasındaki fark nedir?
Flexbox ve Grid, CSS içindeki düzen modülleridir - ayrı teknolojiler değil, CSS özellikleridir. Flexbox tek boyutlu düzenler için en iyisidir (bir sıra kart, bir gezinme çubuğu). Grid ise iki boyutlu düzenler için en iyisidir (bütün bir sayfa, karmaşık bir kart düzeni). Çoğu gerçek site her ikisini de kullanır ve kurs hangisine ne zaman başvurman gerektiğini ele alır.
CSS'i çevrimiçi ücretsiz öğrenebilir miyim?
Evet. İnteraktif CSS bölümü ücretsizdir - tam dersler, kodlama alıştırmaları, canlı bir önizleme ve bir sertifika. Her şey tarayıcıda çalışır, böylece başlamak için herhangi bir editör veya araç kurmana gerek kalmaz.
CSS kursundan sonra sertifika alıyor muyum?
Evet. CSS bölümünü bitirmek sana ücretsiz bir tamamlama sertifikası kazandırır. Bir ön uç portföyünün parçası olarak HTML ve JavaScript sertifikalarının yanında özgeçmişine ekleyebileceğin veya LinkedIn'de paylaşabileceğin, doğrulanabilir bir kanıt.
