CSS Öğren - Kodlama Kursu
CSS Öğren - Kodlama Kursu — Telefonunda canlı HTML ve CSS editörüyle CSS kodlama pratiği
CSS Öğren - Kodlama Kursu, CSS kodlamayı telefonunda uygulayarak öğrenmek isteyen tamamen yeni başlayanlar, tasarımcılar ve kariyer değiştirenler için ücretsiz bir iOS ve Android uygulamasıdır. Canlı HTML ve CSS editörü sayfanın anında önizlemesini gösterir; 40 kurs, seçiciler ve box model'den flexbox, grid, animation ve responsive layout konularına ilerler. Buna 20 rehberli tasarım projesi ve 20 hata avı görevi eşlik eder.
- Fiyat
- Ücretsiz, Pro yükseltmesi
- Platformlar
- iOS ve Android
- Diller
- 22
- Yaş sınırı
- 4+
- Gereksinimler
- iOS 15.1 veya üzeri
Bir özellik kutuyu ya hareket ettirdi ya da ettirmedi.
CSS, kodlamayı öğrenebileceğin neredeyse her şeyden daha hızlı geri bildirim verir: Bir değeri değiştirirsin ve önündeki sayfa ya hareket eder ya da etmez. Editörün anında önizlemesi bu gerçeği temel alır — bir kuralın çalışıp çalışmadığını anlamak için beklemez, gerçekleşmesini izlersin.
Nedir
CSS Öğren - Kodlama Kursu, CSS'i ilk seçiciden responsive layout, animation ve modern tasarım kalıplarına kadar öğreten, iOS ve Android için ücretsiz bir eğitim uygulamasıdır. Canlı HTML ve CSS editörü, yazdıkça sayfanın önizlemesini gösterir. 40 kurs; box model, flexbox, grid, responsive design ve cascade konularını kapsar. Ayrıca 20 rehberli proje, 20 hata avı görevi ve beklediğin şekilde render edilmeyen her şey için bir AI Mentor bulunur.
Uygulamanın içinde
Nasıl görünüyor
Kurs
CSS kursu neleri kapsıyor?
Uygulamanın kendi kurs listesinden alınmış 40 kurs ve 159 ders — ilk seçiciden container queries, Sass ve modern layout kalıplarına kadar.
Söz Dizimi, Renk ve Tipografi
CSS Syntax & Selectors, Colors & Backgrounds, Typography & Text, CSS Units & Values, Pseudo-classes ve Pseudo-elements.
Box Model ve Konumlandırma
Box Model, Display Properties, Positioning Essentials ve Scroll & Overflow — başlangıç düzeyindeki layout karmaşasının çoğuna yol açan dört kurs.
Flexbox ve Grid
Flexbox Fundamentals, Advanced Flexbox, CSS Grid Basics, Advanced Grid ve CSS Logical Properties.
Responsive Design
Responsive Design, Media Queries, Container Queries ve Dark Mode & Color Schemes.
Hareket ve Görsel Efektler
CSS Transitions, CSS Animations & Keyframes, CSS Transforms, Filters & Blend Modes ve CSS Shapes & Clip-path.
Cascade ve Modern CSS
Specificity & Cascade, CSS Variables, CSS Functions, CSS Layers (@layer), CSS Houdini ve CSS Future.
Mimari ve Araçlar
CSS Architecture & BEM, Sass Preprocessor, PostCSS & CSS Tooling, CSS-in-JS Patterns, Design Tokens & Theming, CSS Debugging & DevTools, CSS Testing, CSS Component Patterns, Modern Layout Patterns ve CSS Performance.
Nasıl çalışır
Editörde bir oturum nasıl işler?
Her ders, kısa bir açıklamayı uygulamanın canlı editörüyle eşleştirir. Böylece az önce öğrendiğin özellik ile onun değiştirdiği sayfa, ayrı bir alıştırmada değil aynı ekranda yer alır.
Bir CSS fikrini oku, sonra editörü aç
Kısa bir ders tek bir kavramı — bir seçiciyi, bir flex özelliğini veya bir media query'yi — ele alır ve sana yan yana HTML ve CSS editörüyle birlikte anında önizleme paneli sunar.
Bir değeri değiştir, sayfanın hareketini izle
Derste öğrendiğin kuralı yazdığında önizleme hemen güncellenir; box model'i veya bir flex özelliğini yanlış kullandığında önizleme bunun tam olarak nasıl göründüğünü gösterir. CSS'i sonuçlarını görmesi en hızlı konulardan biri yapan geri bildirim döngüsü budur ve uygulama yalnızca açıklamak yerine bundan yararlanacak şekilde tasarlanmıştır.
Bir proje oluştur ya da hata avına çık, takıldığında sor
20 rehberli proje — bir toolbar, bir card grid, sabitlenen bir header, titreşen bir düğme — ve 20 hata avı görevi dersleri takip eder: sütunundan 42px daha geniş bir card, hiç çalışmayan bir media query. Bir layout hâlâ beklediğin gibi davranmadığında AI Mentor kavramı, hatayı veya kendi kodunu açıklar.
İçinde neler var
Uygulamayla gelenler
40
A1'den C1'e kurslar
Söz dizimi ve seçicilerden box model, flexbox ve grid'e; responsive design, animation, Sass, PostCSS ve modern layout kalıplarına uzanan 40 kursta toplam 159 ders.
Canlı
HTML ve CSS editörü
HTML ve CSS'yi yan yana gösteren ve anında önizleme sunan editör; bir dersi takip etmek veya kendi sayfanı denemek için kullanılır.
20
Rehberli tasarım projeleri
Bir toolbar, card grid, sabitlenen bir header, titreşen bir düğme ve daha fazlası; tümünü kopyalamak yerine adım adım oluşturulur.
Hata Avı
20 hata avı görevi
Bulup düzeltebileceğin gerçek layout hataları — sütunundan 42px daha geniş bir card, telefonda hiç çalışmayan bir media query, sayfanın arkasında takılı kalan bir modal.
AI
AI Mentor
Bir layout, özellik veya kendi kodun hakkında soru sor; Pro ayrıca, tarif ettiğin bir sayfayı gerçek HTML ve CSS'ye dönüştüren bir AI playground ekler.
Sertifika
Tamamlama sertifikası
Özellikler ve seçicilerden oluşan 69 maddelik bir cheat sheet ile cevapları bulunan 50 front-end mülakat sorusunun yanı sıra final sınavı ve tamamlama sertifikası.
Arka plan
CSS nedir ve hangi kısımlar yeni başlayanları gerçekten zorlar?
CSS, bir web sayfasının nasıl görüneceğine karar veren dildir. HTML içeriği — bir başlığı, listeyi ya da görseli — adlandırır; CSS ise bunların rengini, boşluklarını, yazı tipini ve ekrandaki konumunu belirler. CSS ile ilgili ilk hayal kırıklıklarının neredeyse tamamı üç noktadan birine dayanır: box model (padding ve border'ın bir elementi yazdığın sayıdan daha büyük hâle getirmesi), specificity (beklemediğin bir kuralın seninkinin üzerine yazması) veya yanlış layout sistemine yönelmek (tek satır için tasarlanmış bir araçla iki boyutlu bir sayfayı zorlamaya çalışmak).
Box modelboşluklar neden şaşırtır?
Her element; içerik, padding, border ve bunların çevresinde üst üste duran margin'den oluşan bir kutudur. Varsayılan olarak padding ve border, bir elementin belirtilen genişliğinden eksilmek yerine bu genişliğe eklenir. Bir kutunun, ayarladığın sayıdan daha geniş olmasının en yaygın nedeni budur.
Specificity ve cascadebir kural neden yok sayılır?
İki CSS kuralı aynı elementi hedeflediğinde tarayıcı, dosyada hangi kuralın önce yer aldığına değil, specificity'yi — kabaca, bir seçicinin ne kadar kesin yazıldığını — kullanarak birini seçer. Doğru görünen ama başka bir yerdeki daha specific bir kurala sessizce yenilen bir kural, sık rastlanan bir kafa karışıklığı kaynağıdır.
Flexboxtek boyutlu layout
Öğeleri tek bir satır veya sütun üzerinde düzenlemeyi ve arta kalan alanı aralarında paylaştırmayı sağlayan bir layout sistemidir — bir navigation bar ya da düğme satırı gibi. Yıllarca kullanılan float tabanlı layout hilelerinin yerini aldı ve genellikle yeni başlayanların öğrendiği ilk gerçek layout aracıdır.
Gridiki boyutlu layout
Satırları ve sütunları aynı anda tanımlayan bir layout sistemidir. Böylece öğeler margin'lerle konumları hafifçe kaydırılarak değil, gerçek bir grid içine yerleştirilir. Modern sayfa düzeyi layout'lar genellikle flexbox yerine bununla oluşturulur; flexbox tek bir satır için daha uygundur.
Uygunluk
Kimler için uygun — kimler için değil
Şu durumlarda senin için uygun
- Daha önce hiç stylesheet yazmadın ve arkasındaki teoriyi öğrenmeden önce bir kuralın sayfayı nasıl değiştirdiğini görmek istiyorsun
- Tasarımlarını başkasına devretmek yerine kendi sayfalarını biçimlendirmek isteyen bir tasarımcısın
- Biraz HTML biliyorsun ve sonunda flexbox, grid'i ve layout'ların bazen neden beklediğin gibi davranmadığını anlamak istiyorsun
- Yalnızca property'lerle ilgili çoktan seçmeli sorular değil, rehberli tasarım projeleri ve düzeltebileceğin gerçek hatalar istiyorsun
- Kariyer değiştiriyorsun veya front-end mülakatına hazırlanan bir öğrencisin
Şu durumlarda doğru araç değil
- Editörün hiç bağlantı olmadan çalışmasına ihtiyacın var — anlık önizleme özellikle bağlantı gerektiriyor
- Her şeyin ücretsiz olmasını bekliyorsun: ilk kurs, ilk proje, iki görev ve editör ücretsiz; geri kalanların kilidini Pro açıyor
- Flexbox, grid ve cascade konusunda zaten rahatsın ve kurs yerine derinlemesine başvuru materyali istiyorsun
- Akredite bir yeterliliğe ihtiyacın var — sertifika, resmî bir yeterlilik değil, kursu tamamlama sertifikasıdır
Sorular
Sık sorulan sorular
CSS layout'um neden beklediğim gibi çalışmıyor?
Başlangıç seviyesindeki layout sorunlarının çoğuna üç nokta neden olur. Box model: padding ve border'lar varsayılan olarak bir elementin tanımlanan genişliğine eklenir; bu yüzden kutu, yazdığın sayıdan daha geniş olur. Specificity: başka bir yerdeki daha özgül bir kural, seninkini sessizce geçersiz kılar. Yanlış layout aracı: tek bir satır için tasarlanmış flexbox ile iki boyutlu bir sayfa oluşturmaya çalışmak. CSS Öğren - Kodlama Kursu, bu üç konuyu deneme yanılmayla keşfetmen yerine doğru sırayla anlamanı sağlayacak şekilde kurslarını sıralar.
CSS öğrenmeden önce HTML bilmem gerekiyor mu?
Biraz bilmen yeterli; ayrıca bunu önce tamamen öğrenmek yerine derslerle birlikte öğrenebilirsin. CSS, HTML elementlerinin nasıl sunulacağını tanımlar. Bu nedenle bir sayfanın elementlerden — başlıklar, paragraflar, listeler ve görsellerden — oluştuğunu bilmek başlamak için yeterli bir temeldir. Uygulamanın canlı editörü hem HTML'i hem de CSS'i birlikte gösterir; böylece ikisi arasındaki bağlantı ilk dersten itibaren görünür olur.
Flexbox ve grid arasındaki fark nedir, hangisini ne zaman kullanmalıyım?
Flexbox, öğeleri tek bir çizgi üzerinde — bir düğme satırı veya navigasyon çubuğu gibi — düzenler ve kalan alanı bu tek eksen boyunca dağıtır. Grid ise satırları ve sütunları aynı anda tanımlar; böylece öğeleri margin'lerle itiştirmek yerine gerçek bir iki boyutlu grid'e yerleştirirsin. Sayfa düzeyindeki layout genellikle grid, içindeki tek bir kontrol satırı ise genellikle flexbox kullanır; kurs, kararı sana bırakmadan önce ikisini de öğretir.
Dosyada benim kuralım daha sonra yer alsa bile neden daha özgül bir kural bazen kazanıyor?
CSS, çakışan kuralları önce specificity'ye, sonra kaynak sırasına göre çözer. Bir ID selector, stylesheet'te daha aşağıda yer alsa bile class selector'ı; class ise düz element selector'ını geçer. Bu yüzden doğru görünen bir kural, başka bir yerde unuttuğun bir kurala yine de yenilebilir. Uygulamadaki Specificity & Cascade kursu, bu sırayı gizemli olmaktan çıkarıp öngörülebilir hale getirmek için var.
2026'da CSS öğrenmeye hâlâ değer mi, yoksa Tailwind gibi framework'ler onun yerini mi alıyor?
Evet, doğrudan CSS öğrenmeye hâlâ değer. Tailwind gibi utility framework'leri, CSS kavramları üzerine kurulmuş bir katmandır; onların yerine geçmez. Bir utility class beklediğin gibi çalışmadığında, seni çözüme ulaştıracak olan şey box model'i, specificity'yi ve altta yatan layout sistemlerini anlamandır. Ayrıca sonuçlarını görmenin en hızlı yollarından biridir; her değişiklik sayfada hemen görünür.
Gerçek bir sayfayı biçimlendirme konusunda rahat hale gelmek ne kadar sürer?
Toplam saatten çok istikrar önemlidir. Kısa günlük derslerle ilerleyen çoğu başlangıç öğrencisi, specificity'nin uç durumları veya container queries gibi daha zor konulara gelmeden birkaç hafta içinde selector'ları, boşlukları, tipografiyi ve temel flexbox ya da grid layout'unu güvenle kullanabilir. Uygulamadaki 20 rehberli proje, tam olarak bu aşamada pratik yapman için hazırlanmıştır; her seferinde gerçek bir sayfa üzerinde çalışırsın.
CSS Öğren - Kodlama Kursu ücretsiz mi?
Uygulama App Store ve Google Play üzerinden ücretsiz indirilebilir. İlk kurs, ilk rehberli proje, iki hata bulma görevi ve canlı editör ücretsizdir; günlük AI Mentor kullanım hakkı da dahildir. Pro; tüm kursların, 20 projenin ve 20 görevin, sertifika sınavının ve sınırsız AI Mentor kullanımının kilidini açar ve reklamları kaldırır.
CSS Öğren - Kodlama Kursu iPhone ve Android'de kullanılabilir mi, kimler için?
CSS Öğren - Kodlama Kursu, App Store'da iPhone ve iPad; Google Play'de Android için kullanılabilir. Arayüz 22 dili destekler ve yaş derecelendirmesi 4+'tır. Uygulama; tamamen yeni başlayanlar, kendi sayfalarını biçimlendirmek isteyen tasarımcılar ve front-end mülakatlarına hazırlanan kariyer değiştiriciler ya da öğrenciler içindir.
Canlı önizleme çevrimdışıyken, metroda veya uçakta çalışır mı?
Anlık önizlemenin HTML ve CSS'ini işleyebilmesi için özellikle bağlantı gerekir; uygulama bunu sessizce işlev azaltarak değil, açıkça belirtir. Ders metinleri ve okuma materyalleri zayıf bir bağlantıda da çalışmaya devam edecek şekilde hazırlanmıştır; bu, çoğu yolculuk için yeterlidir. Ancak tamamen çevrimdışı canlı önizleme oturumu bu editörün sunduğu bir özellik değildir.
Hangi platformları ve dilleri destekliyor, sertifika var mı?
CSS Öğren - Kodlama Kursu, App Store üzerinden iOS'ta ve Google Play üzerinden Android'de çalışır; uygulama 22 dilde kullanılabilir. Yaş derecelendirmesi 4+'tır. Final sınavını geçtiğinde uygulama bir kursu tamamlama sertifikası verir. Bu sertifika, yaptığın çalışmanın kanıtıdır ve hakkında konuşabileceğin rehberli projelerle birlikte CV'nde işe yarar; ancak akredite bir yeterlilik değildir.
Başla
İlk sayfanı bugün biçimlendir
iOS ve Android'de, 22 dilde, ücretsiz başlayabilirsin.
CoddyKit'ten daha fazlası
iOS ve Android üzerinde kullanılabilir.