Tailwind CSS ile Modern Arayüz Tasarımı
Utility-first yaklaşımıyla Tailwind CSS öğrenin: renkler, boşluklar, tipografi, Flexbox, Grid, responsive tasarım, hover/dark durumları ve 5 gerçek arayüz projesi.
Tailwind CSS Kurs Müfredatı
Başlamadan önce oku Tailwind CSS nedir, bu kurs nasıl işler?
Tailwind CSS, son yıllarda en hızlı yayılan CSS framework'üdür. Bootstrap'ten farklı olarak hazır "buton" veya "kart" bileşenleri vermez; bunun yerine her biri tek bir iş yapan küçük sınıflar sunar: text-xl yazıyı büyütür, p-4 iç boşluk verir, bg-blue-600 arka planı maviye boyar. Bu sınıfları yan yana yazarak tasarımı doğrudan HTML'de kurarsın. Bu sitenin kendisi de Tailwind ile tasarlandı!
Önce ne bilmelisin?
HTML etiketlerini ve temel CSS kavramlarını (renk, boşluk, kutu modeli, flexbox) bilmen yeterlidir. Tailwind sınıflarının çoğu tek bir CSS özelliğine karşılık gelir; CSS bilgin ne kadar iyiyse Tailwind'i o kadar hızlı öğrenirsin.
Bir ders nasıl işler?
- Anlatım: Önce kavramın ne olduğunu ve neden gerektiğini günlük hayattan bir örnekle anlatıyoruz.
- Örnek kod: Ardından küçük bir örneği satır satır inceliyoruz. Örnek kodlar kopyalanamaz; kendi elinle yazmak öğrenmenin en hızlı yoludur.
- Görev: Sağdaki editöre görevi kendin yazarsın. Takılırsan İpucu al butonu ipuçlarını tek tek açar; tüm ipuçlarını açıp en az 3 kez denedikten sonra istersen örnek çözümü görebilirsin.
- Zorluk: Her dersin yanında Kolay, Orta veya Zor etiketi vardır. Zor dersleri acele etmeden, ipuçlarını kullanarak çöz.
Kodun nasıl kontrol edilir?
Editör, kodunda görevin istediği Tailwind sınıflarının olup olmadığını kontrol eder. Sınıf adlarını görevde yazıldığı gibi (küçük harf, tire ve sayılarla) yazmalısın. Tailwind önizlemeye otomatik eklenir; çalıştırınca sonucu hemen görürsün.