Tailwindcss - Sıfırdan Gerçek Web Projeleri ile Öğrenin.

Tailwind CSS nedir?

Tailwind CSS, Adam Wathan tarafından 4 kişilik bir ekiple geliştirilen, özelleştirilebilir yapıya sahip bir CSS kütüphanesidir. Tailwind CSS temel tüm css özelliklerini ön tanımlı ve konfigüre edilebilir şekilde sunan, tekrar eden css kullanımlarını engelleyen, html kodunuzdan ayrılmadan hızlı, ölçeklendirilebilir ve modern web arayüzleri oluşturabileğiniz utility-first CSS framework'üdür.

Note: Bu eğitim serisi geliştirilmeye devam etmektedir. Şu anda tüm konuların hazırlanmadığını belirtmek isterim.

Tailwind CSS'in diğerlerinden ayıran fark nedir?

Bootstrap, Semantic UI, Bulma ve Foundation’dan farklı olarak bir UI Kit değildir, içerisinde hazır bir tema ile gelmez. Tailwind’de, UI KIT yerine daha low-level tasarım abstraction’ları vardır. Bootstrap, Semantic UI, Bulma vb. klasik css frameworklerinin aksine sizlere button, navigation, card, accordion gibi UI componentler sunmaz. Bu componentleri ön tanımlı utility class'ları kullanarak kendiniz istediğiniz şekilde kolay bir şekilde oluşturabilirsiniz. Özellikle react, vue, angular gibi component bazlı tool'lar ile çalışıyorsanız component'larınıza yeni bir özellik eklemek çok daha kolay. Değişik yapmak istediğiniz zaman layout'u bozar mı, istenmedik bir yeri etkilenir mi gibi sorunlarla da uğraşmanıza gerek kalmaz. Çünkü component'imiz kendi kendini izole etmiş oluyor.

Tailwind’in temel özellikleri:

• Daha detaylı çalışabilmeyi sağladığından dolayı daha fazla esneklik sağlar.

• Birleşen(Component) oluşturmaya çok elverişlidir.

• Tüm elementleri responsive dizayna uyumludur.

• Genişletilebilir ve özelleştirilebilir yapıya sahiptir.

Proje 1 -  Lamborghini araba sitesi - Responsive

Tailwind css ile bir Lamborghini araba sitesi yapıyor olacağız. Sonrasında gece ve gündüz modu için light/dark modu özelliğini aktif hale getireceğiz.

Proje 3 -  Müzik web sitesi

Tailwind css ile responsive müzik web sitesi tasarımını birlikte kodluyor olacağız. Burada en önemli odaklanacağımız kısım responsive olarak masaüstü(desktop) ve mobil cihazlar için bir menünün geliştirilmesi olacak. Buna ek olarak bir alana background görsellerinin nasıl eklendiğini öğreniyor olacaksınız.

Proje 2 -  Responsive Personel Portfolio Website

Bu eğitim serisi hazırlanıyor.

Uyarı: Eğitimi hazırladıktan sonra ses kalitesinin düşük olduğunu fark ettim. Bu sebeple eğitimi her zaman en düşük ücret ile yayınlamayı planlıyorum. Eğitimi satın alırken bunu göz önünde bulundurmanızı rica ederim.

#tailwindcss #frontend #css #cihankoc #websatarım #webdesign #html #bootstrap #responsive #tailwind