0Pricing
Tailwind CSS Academy icon
HTMLCssFrontendDesignSeviyeler A1 → B215 dil

Tailwind CSS Academy

OpenAI, Vercel ve Shopify tarafından güvenilen utility-first CSS framework'ünü öğrenin. Her utility'i, responsive design'ı, dark mode'u, animasyonları ve production optimizasyonunu öğrenin. CoddyKit öğrenme yolu: 30 kısa kurs ve 120 etkileşimli ders; yanında 7/24 AI Öğretmen.

Kurslar
30
Dersler
120
Etkileşimli adımlar
1,559
Başlamak ücretsiz
Kurs 1
Müfredat

Bu yolda 30 kurs

Tailwind CSS Academy öğrenme yolundaki her kurs, öğrenme sırasına göre. İlki ücretsiz.

1

A14 dersÜcretsiz

Tailwind CSS'in yardımcı sınıf öncelikli felsefesini keşfedin ve Bootstrap gibi geleneksel CSS çatılarından nasıl farklı olduğunu anlayın. Bir projede Tailwind'i nasıl kuracağınızı ve yardımcı sınıfl…

  1. 1Yardımcı Sınıf Öncelikli CSS Açıklaması
  2. 2Tailwind'i Yükleme ve Yapılandırma
  3. 3İlk Tailwind Sayfanız
  4. +1 daha fazla
Ücretsiz öğrenmeye başla
2

A14 dersPRO

Yazı tipi boyutlarını, kalınlıklarını, satır yüksekliklerini, harf aralıklarını ve metin hizalamasını denetlemek için Tailwind'in zengin tipografi yardımcıları kümesinde ustalaşın. Özel CSS yazmadan…

  1. 1Yazı Boyutu ve Yazı Kalınlığı
  2. 2Metin Rengi ve Saydamlık
  3. 3Satır Yüksekliği ve Harf Aralığı
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
3

A14 dersPRO

Tailwind'in kapsamlı renk paletini keşfedin; arka plan renklerini, geçişleri ve arka plan görsellerini nasıl uygulayacağınızı öğrenin. Saydamlık değiştiricilerini nasıl kullanacağınızı ve görsel açıd…

  1. 1Tailwind'in Renk Paleti
  2. 2Arka Plan Degradeleri
  3. 3Saydamlık ve Renk Değiştiricileri
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
4

A14 dersPRO

Herhangi bir ögeye kenar boşluğu ve iç boşluk eklemek için Tailwind'in tutarlı boşluk ölçeğini öğrenin. Yerleşimi hassas biçimde denetlemek için yön kısayollarını ve negatif kenar boşluklarını anlayı…

  1. 1Tailwind Boşluk Ölçeği
  2. 2İç Boşluk Yardımcı Sınıfları
  3. 3Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
5

A14 dersPRO

Tek bir özel CSS satırı yazmadan Tailwind'in flex yardımcılarıyla CSS Flexbox yerleşimleri uygulayın. Yatay ve dikey yerleşimler oluşturacak, hizalamayı denetleyecek ve kaydırmayı kolayca yöneteceksi…

  1. 1Flex'i ve Yönü Etkinleştirme
  2. 2İçeriği Gerekçelendirme ve Öğeleri Hizalama
  3. 3Flex Büyümesi, Küçülmesi ve Temeli
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
6

A24 dersPRO

Karmaşık iki boyutlu yerleşimler oluşturmak için Tailwind'in grid yardımcıları aracılığıyla CSS Grid'den yararlanın. Basit sınıf adlarıyla sütunları, satırları ve alanları tanımlayacak; ögelerin konu…

  1. 1Izgara Sütunlarını Tanımlama
  2. 2Sütun ve Satır Birleştirme
  3. 3Izgara Satırları ve Otomatik Yerleştirme
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
7

A24 dersPRO

Tailwind'in genişlik, yükseklik, minimum/maksimum kısıtlama ve en-boy oranı yardımcılarını kullanarak öge boyutlarını denetleyin. Duyarlı ve sabit boyutlu bileşenleri güvenle oluşturun.

  1. 1Genişlik Yardımcı Sınıfları
  2. 2Yükseklik Yardımcı Sınıfları
  3. 3Minimum ve Maksimum Sınırlamalar
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
8

A24 dersPRO

Tailwind'in kenarlık ve gölge yardımcılarıyla ögelerin kenarlarını ve derinliklerini stillendirin. Yuvarlatılmış köşeler eklemeyi, kenarlık genişliğini ve rengini denetlemeyi, derinlik oluşturmak içi…

  1. 1Kenarlık Genişliği ve Rengi
  2. 2Kenarlık Yarıçapı ve Yuvarlatılmış Köşeler
  3. 3Kutu Gölgeleri
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
9

A24 dersPRO

Üzerine gelme, odaklanma, etkin, devre dışı ve diğer sözde durumlarda stilleri koşullu olarak uygulayarak kullanıcı arayüzünüze etkileşim ekleyin. Her etkileşim durumunu denetlemek için Tailwind'in ç…

  1. 1Üzerine Gelme ve Etkin Varyantları
  2. 2Odak ve Görünür Odak Varyantları
  3. 3Devre Dışı ve Yer Tutucu Varyantları
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
10

A24 dersPRO

Tailwind'in mobil öncelikli duyarlı kesme noktalarını kullanarak her ekran boyutuna uyum sağlayan yerleşimler oluşturun. Gerçekten duyarlı tasarımlar oluşturmak için belirli görünüm alanı genişlikler…

  1. 1Tailwind'in Kesme Noktası Sistemi
  2. 2Flex ve Izgarayla Duyarlı Düzenler
  3. 3Duyarlı Tipografi ve Boşluk
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
11

B14 dersPRO

Tailwind'in yerleşik dark çeşitlemesini kullanarak web uygulamalarınızda karanlık modu uygulayın. Sınıf stratejisi ile medya stratejisini öğrenin ve hem aydınlık hem de karanlık temalarda harika görü…

  1. 1Karanlık Mod Stratejileri
  2. 2Karanlık Varyantları Uygulama
  3. 3Karanlık Mod Geçişi Oluşturma
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
12

B14 dersPRO

tailwind.config.js dosyasında ustalaşarak Tailwind'in tüm gücünü ortaya çıkarın. Varsayılan temayı genişletmeyi, özel değerler eklemeyi, içerik yollarını yapılandırmayı ve eklentileri yönetmeyi öğren…

  1. 1tailwind.config.js Dosyasının Yapısı
  2. 2İçerik Yolları ve Kullanılmayanları Temizleme
  3. 3Temayı Genişletme ve Üzerine Yazma
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
13

B14 dersPRO

Özel renkler ekleyerek, Google Fonts'u entegre ederek ve özel bir boşluk ölçeği tanımlayarak Tailwind'i markanıza uyarlayın. Tailwind'in tüm yardımcılarından yararlanmaya devam eden, projeye özgü bir…

  1. 1Özel Renkler Ekleme
  2. 2Özel Yazı Aileleri
  3. 3Özel Boşluk Değerleri
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
14

B14 dersPRO

Tekrarlanan yardımcı sınıf kalıplarını yeniden kullanılabilir CSS sınıflarına çıkarmak için Tailwind'in @apply yönergesinin ne zaman ve nasıl kullanılacağını öğrenin. Yardımcı sınıf öncelikli yaklaşı…

  1. 1@apply Ne Yapar ve Ne Zaman Kullanılır
  2. 2Yeniden Kullanılabilir Bileşen Sınıfları Oluşturma
  3. 3Özel CSS'yi Katmanlarla Düzenleme
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
15

B14 dersPRO

Tailwind'in yerleşik geçiş ve animasyon yardımcılarını kullanarak kullanıcı arayüzünüze akıcı hareketler ekleyin. Süreyi, yumuşatmayı ve gecikmeyi denetlemeyi; ilgi çekici kullanıcı deneyimleri için…

  1. 1Geçiş Yardımcı Sınıfları
  2. 2Süre ve Yumuşatma
  3. 3Yerleşik Kare Animasyonları
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
16

B14 dersPRO

Tailwind yardımcı sınıflarını kullanarak özenle hazırlanmış, yeniden kullanılabilir kullanıcı arayüzü yapı taşları oluşturun. Çeşitlemeli düğmeler, başlık ve alt bilgi içeren kartlar ve küçük bilgile…

  1. 1Düğme Varyantları ve Durumları
  2. 2Kart Bileşeni Kalıpları
  3. 3Rozet ve Etiket Bileşenleri
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
17

B14 dersPRO

Tailwind yardımcılarını kullanarak duyarlı gezinme çubukları ve daraltılabilir kenar çubukları oluşturun. Mobil hamburger menülerini yönetmeyi ve kullanıcılar kaydırırken görünür kalan sabit gezinme…

  1. 1Duyarlı Gezinme Çubuğu Oluşturma
  2. 2Yapışkan ve Sabit Gezinme
  3. 3Dikey Kenar Çubuğu Düzeni
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
18

B14 dersPRO

Tailwind yardımcılarını kullanarak erişilebilir ve çekici form ögelerini stillendirin. Metin girdileri, seçim kutuları, onay kutuları, radyo düğmeleri ve doğrulama durumlarına sahip eksiksiz form yer…

  1. 1Metin Girdilerini ve Metin Alanlarını Stillendirme
  2. 2Seçim Menüler ve Onay Kutuları
  3. 3Form Düzeni Kalıpları
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
19

B14 dersPRO

Tailwind ve minimal JavaScript kullanarak kipler, iletişim kutuları ve açılır menüler gibi kaplama kullanıcı arayüzü kalıpları oluşturun. Konumlandırmayı, z-dizin katmanlamasını ve akıcı açılma/kapan…

  1. 1İletişim Penceresi Yapısı
  2. 2İletişim Penceresini Açma ve Kapatma Animasyonu
  3. 3Açılır Menü Bileşeni
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
20

B14 dersPRO

Tailwind'in Just-In-Time motorunu ve yalnızca kullandığınız CSS'i nasıl oluşturduğunu anlayın. Üretim paketini optimize etmeyi, çıktı boyutunu analiz etmeyi ve JIT motorunun algılayabileceği sınıflar…

  1. 1JIT Motoru Nasıl Çalışır
  2. 2Dinamik Sınıfları Güvenli Listeye Alma
  3. 3Paket Boyutunu Analiz Etme ve Küçültme
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
21

B24 dersPRO

Tutarlı çok markalı tema oluşturmayı mümkün kılmak için Tailwind yapılandırması içinde sağlam bir tasarım belirteçleri sistemi kurun. İlkel belirteçleri anlamsal belirteçlerle eşleyin ve büyük projel…

  1. 1İlkel ve Anlamsal Belirteçler
  2. 2CSS Değişkenleriyle Tema Oluşturma
  3. 3Birden Çok Marka İçin Tema Stratejisi
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
22

B24 dersPRO

Resmî kurulumu kullanarak Tailwind CSS'i React ve Next.js uygulamalarına entegre edin. JSX'te yardımcıları uygulamaya, koşullu sınıfları yönetmeye ve bileşen tabanlı mimarilerde stilleri düzenlemeye…

  1. 1Next.js’te Tailwind Kurulumu
  2. 2React’te Koşullu Sınıflar
  3. 3CVA ile Bileşen Varyantları
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
23

B24 dersPRO

Tamamen erişilebilir, stillendirilmemiş bileşenler oluşturmak için Tailwind CSS'i Headless UI ile birleştirin. Sağlam erişilebilirlik özelliklerini kutudan çıktığı hâliyle korurken menülere, iletişim…

  1. 1Headless UI’ye Giriş
  2. 2Headless Menü ve Açılır Menüyü Biçimlendirme
  3. 3Erişilebilir İletişim Kutuları Oluşturma
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
24

B24 dersPRO

Yeni yardımcılar, bileşenler ve çeşitlemeler ekleyen özel eklentiler yazarak Tailwind'in işlevselliğini genişletin. Yeniden kullanılabilir stil mantığını kapsüllemek ve projeler arasında paylaşmak iç…

  1. 1Tailwind Eklenti API’si
  2. 2Eklentiyle Özel Yardımcılar Ekleme
  3. 3Eklentiyle Özel Varyantlar Ekleme
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
25

B24 dersPRO

Renk karşıtlığı, odak yönetimi ve ekran okuyucu desteği için Tailwind yardımcılarını kullanarak WCAG erişilebilirlik standartlarını karşılayan kullanıcı arayüzü bileşenleri oluşturun. Herkes için çal…

  1. 1Renk Karşıtlığı ve Okunabilir Metin
  2. 2Odak Göstergeleri ve Klavye Gezintisi
  3. 3ARIA Öznitelikleri ve Ekran Okuyucular
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
26

B24 dersPRO

Tailwind CSS'i üretim uygulamalarında kullanıma sunmak için profesyonel en iyi uygulamaları benimseyin. Büyük ekiplerin kullandığı paket denetimi, sınıf düzenleme stratejileri, linting ve performans…

  1. 1CSS Çıktınızı Denetleme
  2. 2Sınıf Sıralama ve Prettier Eklentisi
  3. 3Tailwind’i ESLint ile Lint Etme
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
27

B24 dersPRO

Şimdiye kadar öğrendiğiniz her şeyi uygulayarak yalnızca Tailwind CSS kullanıp sıfırdan eksiksiz ve duyarlı bir pazarlama açılış sayfası oluşturun. Kahraman alanını, özellikleri, kullanıcı görüşlerin…

  1. 1Tanıtım ve Gezinme Bölümü
  2. 2Özellikler ve Sosyal Kanıt Bölümleri
  3. 3Fiyatlandırma Tablosu Bölümü
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
28

B24 dersPRO

Tailwind CSS kullanarak tüm özelliklere sahip bir yönetici gösterge tablosu arayüzü oluşturun. Tutarlı ve duyarlı bir yerleşimde kenar çubuğu, üst çubuk, istatistik kartları, veri tabloları ve grafik…

  1. 1Kontrol Paneli İskeleti ve Kenar Çubuğu
  2. 2Üst Çubuk ve İçerik Haritası
  3. 3İstatistik Kartları ve KPI Pencere Öğeleri
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
29

B24 dersPRO

Tailwind'in büyük ölçekli projelerde kullanılan daha geniş CSS mimarisi stratejilerine nasıl uyduğunu keşfedin. Dosyaları düzenlemeyi, bileşen katmanlarını yapılandırmayı ve eski CSS veya diğer stil…

  1. 1Dosya ve Klasör Düzenleme
  2. 2Eski CSS ile Birlikte Çalışma
  3. 3CSS Modülleri ve Tailwind
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
30

B24 dersPRO

Bu kurs yolundaki tüm becerileri bir araya getirerek Tailwind tabanlı eksiksiz bir tasarım sistemi oluşturun. Belirteçleri tanımlayın, bir bileşen kütüphanesi oluşturun, bir eklenti yazın ve sistemi…

  1. 1Tasarım Sistemini Planlama
  2. 2Belirteç ve Yapılandırma Katmanını Oluşturma
  3. 3Bileşen Kütüphanesi Oluşturma
  4. +1 daha fazla
Ücretsiz öğrenmeye başlaPRO ile aç
CoddyKit PRO

Bu yoldaki 30 kursun ve diğer tüm yolların kilidini aç

AI öğretmen, sertifikasyon sınavı ve sertifika. Web, iOS ve Android'de çalışır.

Tüm planları gör
Yıllık$29.90 / yılAylık yaklaşık $2.49Tek ödemeÖmür boyu$69.99 tek seferlikYenileme yok. PRO sonsuza kadar.
Kurs Özeti

Tailwind CSS Mastery

OpenAI, Vercel ve Shopify tarafından güvenilen utility-first CSS framework'ünü öğrenin. Her utility'i, responsive design'ı, dark mode'u, animasyonları ve production optimizasyonunu öğrenin. Bu track, mutlak başlangıç (A1) seviyesinden ileri (B2) seviyesine kadar 30 progresif mini-kursu içerir. Her biri kısa odaklanmış dersler ve her konsepti pekiştirmek için hızlı testlerden oluşur.

Neler Öğreneceksiniz

Temellerle başlayacak, ara ve ileri konulara kadar ilerleyeceksiniz. Her kurs bir öncekinin üzerine kurulmuştur. Her ders pratiktir, gerçek örnekler ve yardıma ihtiyaç duyduğunuzda size destek olacak bir AI tutor'u içerir.

Nasıl Çalışır

Her kurs dört odaklanmış dersten oluşur. Günde birkaç ders tamamlayın ve tüm track'i aylar değil haftalar içinde öğrenin.

Araçlar

Sadece okuma değil, AI ile pratik yap

AI destekli araçlar ve özelliklerle öğrenimini güçlendir

AI SohbetAI öğretmen ile sohbet etSüper Soru SorUzman seviyesi yanıtlar alPRODers OluşturAI destekli ders oluşturucuPROSertifikasyon Sınavını BaşlatSertifikanı kazanPROMeydan OkuBecerilerini test et

Nasıl Öğreneceksin

  1. 01

    Etkileşimli Dersler

    Gerçek zamanlı geri bildirim ile uygulamalı kodlama alıştırmaları

  2. 02

    AI Öğretmen

    Takılırsan AI'dan anında yardım al

  3. 03

    Yerleşik Editör

    Tarayıcında doğrudan kod yaz ve çalıştır

  4. 04

    Sertifika

    Kursu tamamladığında sertifika kazan

Keşfetmeye devam et

İlgili öğrenme yolları

Frontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Web Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.
SSS

Sıkça Sorulan Sorular

Tailwind CSS Academy kursu ücretsiz mi?

Evet. Tailwind 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.

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

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

CoddyKit'te HTML 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.

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

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

HTML öğrenimini telefonumda yapabilir miyim?

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

CoddyKit PRO ne kadar?

Tailwind CSS Academy yolundaki ilk kurs ücretsizdir. CoddyKit PRO tüm kursların kilidini açar: haftalık $5.90, aylık $7.90, yıllık $29.90 veya yenileme olmadan ömür boyu erişim için tek seferlik $69.99.

Tailwind CSS Academy kursunu tamamlamak ne kadar sürer?

Tailwind CSS Academy yolunda 30 kurs ve 120 ders bulunur. Derslerin çoğu yaklaşık 5–10 dakika sürer; bu nedenle tüm yol, kendi hızında yaklaşık 14 saatlik uygulamalı pratik sunar.

Tailwind CSS Academy Kursuna Şimdi Başla

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

Ücretsiz öğrenmeye başlaTüm Kursları Gözden Geçir