Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Tailwind CSS eğitim serisinin ikinci bölümüdür. Eğitmen, adım adım Tailwind CSS'in temel özelliklerini ve kullanımını göstermektedir.
- Videoda, Tailwind CSS kullanarak bir web sayfası tasarımı yapımı detaylı olarak anlatılmaktadır. Eğitmen, Proturk benzeri bir layout oluşturarak header, sidebar, content ve footer gibi temel bileşenleri Tailwind CSS klasleriyle tasarlamaktadır. Ayrıca flexbox, grid, spacing, tipografi, border, efektler, transition ve SVG gibi Tailwind'in temel özelliklerini kullanarak responsive tasarım yapmaktadır.
- Eğitim içeriğinde, menü öğeleri, butonlar, ikonlar ve koyu mod gibi interaktif bileşenlerin nasıl oluşturulacağı da gösterilmektedir. Eğitmen, bir sonraki derste pop-up, drop-down menü ve plugin kullanımı gibi konuları işleyeceğini belirterek, Tailwind CSS'in React gibi frameworklerle birlikte nasıl kullanılacağı hakkında da bilgi vermektedir.
- 00:01Tailwind CSS Kullanımı ve Planlama
- İlk derste iki buton yapılmış, ikinci bölümde Tailwind CSS'in nasıl kullanılacağı gösterilecek.
- Proturk'un layout'u çıkarılacak; header, sidebar ve content kısımları yapılacak.
- Bir sonraki bölümde dark mod, responsive tasarım ve bazı plugin'ler ele alınacak.
- 01:01Tailwind CSS'in Temel Özellikleri
- Tailwind CSS'te konteyner, box sizing, display, float ve pozisyonlama gibi layout özellikleri kullanılır.
- Layout oluştururken flex ve grid kullanılabilir, konuşmacı genellikle flex'i tercih ediyor.
- Tailwind CSS'i iyi kullanabilmek için CSS bilgisine sahip olmak önemlidir.
- 02:05Tailwind CSS'in Kullanım Alanları
- Spacing, padding, margin ve space between gibi özellikler sıkça kullanılır.
- Tipografi, border, ring (outline), efektler, filtreler ve transition özellikleri Tailwind'de kullanılır.
- SVG kullanımı da Tailwind CSS'te desteklenmektedir.
- 03:41Tailwind CSS Konfigürasyonu
- Tailwind CSS'te varsayılan özelliklerin aksine kendi değerlerinizi oluşturmak için konfigürasyon dosyası düzenlenir.
- Konfigürasyonda "extend" kullanarak mevcut özellikleri genişletebilir veya tamamen değiştirebilirsiniz.
- Kendi renklerinizi tanımlayarak (örneğin "twitter" rengi) Tailwind'de kullanabilirsiniz.
- 07:51Tailwind CSS Kullanımı ve Özel Boyut Ayarları
- Tailwind CSS'te "h-15" gibi yükseklik ayarları kullanılırken, özel piksel değerleri için "rem" birimi kullanılabilir.
- "rem to px" çevirici kullanılarak, root font size'i 16 piksel olduğunda 60 piksel için 3.75rem değerini hesaplayabilirsiniz.
- Tailwind'in config dosyasında istediğiniz her şeyi özelleştirebilirsiniz, ancak bu işlem için biraz pratik gerekiyor.
- 10:04Border ve Flexbox Kullanımı
- Border özellikleri için "border" veya "border-bottom" gibi sınırlayıcılar kullanılabilir ve renk değerleri ile belirtilen piksel değerleri ile çizgiler oluşturulabilir.
- Flexbox kullanarak elemanları düzenlemek için "justify-content-space-between" ve "items-center" gibi sınıflar kullanılabilir.
- Elemanlara "px-5" gibi sınıflar eklenerek piksel değerlerinde boşluklar verilebilir.
- 11:54Metin ve Font Ayarları
- Metin boyutları için "text-20" gibi sınıflar kullanılabilir ve "font-medium" veya "font-normal" gibi ağırlık ayarları yapılabilir.
- Google Font'ları (örneğin Montserrat) projeye dahil ederek font family'si belirlenebilir.
- Özel renk tanımları yaparak "text-prototurk" gibi sınıflar oluşturulabilir.
- 14:56Buton ve Arama Kutusu Tasarımı
- Butonlar için "bg-prototurk" ve "text-white" sınıfları kullanılarak arka plan ve yazı rengi ayarlanabilir.
- Butonlara "rounded" sınıfı eklenerek köşeleri yuvarlanabilir ve "px-5" gibi sınıflar ile iç boşluklar verilebilir.
- Arama kutusu için "w-1/2" gibi genişlik sınıfları ve "bg-gray-100" gibi arka plan renkleri kullanılabilir.
- 17:38Sayfa Yapısı ve Layout
- Sayfa yapısını oluşturmak için "main" ve "section" gibi div'ler kullanılabilir.
- "flex" ve "flex-direction-column" sınıfları ile elemanların dikey olarak düzenlenebilmesi sağlanabilir.
- "mx-auto" ve "max-w-screen-lg" gibi sınıflar kullanılarak içeriklerin sayfa merkezinde yerleştirilmesi ve maksimum genişlik ayarlanması yapılabilir.
- 22:21Menü Oluşturma ve Düzenleme
- Menü için "anasayfa", "akış", "keşfet", "makaleler" ve "soru-cevap" başlıkları oluşturuluyor.
- Başlıklara "flex", "items center", "h-40", "rounded" ve "px-12" özellikleri uygulanıyor.
- Metin için "text-base" ve "text-gray-500" özellikleri kullanılıyor, ayrıca "hover:bg-gray-100" ve "transition-colors" özellikleri ile fare üzerine gelindiğinde renk değişimi sağlanıyor.
- 25:00Alt Menü ve Ayırıcı Ekleme
- HTML, CSS, JavaScript, PHP, MySQL, Laravel ve Python gibi teknoloji başlıkları içeren alt menü oluşturuluyor.
- Menü elemanları arasına "divider" ekleniyor ve "divider-y" özelliği ile yatay çizgi oluşturuluyor.
- Menü elemanları arasında "space-y-3" özelliği ile boşluk bırakılıyor.
- 27:44Koyu Mod Butonu Ekleme
- Sidebar'a "flex-col" özelliği uygulanarak elemanlar alt alta yerleştiriliyor.
- "Koyu mod" butonu ekleniyor ve "mt-auto" özelliği ile en alta yerleştiriliyor.
- Butona "bg-gray-800", "h-8", "flex", "items-center", "justify-center", "rounded" ve "text-white" özellikleri uygulanıyor.
- 30:39İkon Ekleme ve Buton Düzenleme
- Google Fontlar'dan "dark" ikonu SVG olarak indiriliyor ve butona ekleniyor.
- İkona "fill-current" özelliği uygulanarak rengi ayarlanıyor.
- Butona "hover:bg-gray-600", "transition-colors", "cursor-pointer" ve "w-full" özellikleri eklenerek interaktif hale getiriliyor.
- 35:34Grid Yapısı Oluşturma
- Grid yapısı için div oluşturuluyor ve 10 kolonlu bir yapı oluşturuluyor.
- Grid elemanlarına "span-2" özelliği uygulanarak her biri 2 kolon genişliğinde oluyor.
- Grid elemanlarına "border", "flex-col", "p-4", "rounded" ve "gap-28" özellikleri eklenerek görünümü ayarlanıyor.
- 37:11CSS Kapsayıcı ve İkon Tasarımı
- Kapsayıcı için padding, width ve height değerleri ayarlanıyor ve kapsayıcıya border ve rounded full sınıfı ekleniyor.
- İkonlar için kapsayıcı içinde span elementi oluşturuluyor ve absolute konumlandırma yapılıyor.
- İkonun arka plan rengi ve boyutu ayarlanıyor, z-index değeri negatif olarak veriliyor ve opacity ile saydamlaştırılıyor.
- 43:09Metin ve Renk Ayarları
- HTML metni için inline-flex kapsayıcı oluşturuluyor ve text-white, bg-red-500 özellikleri ekleniyor.
- Renkler değiştirilebiliyor, örneğin red yerine blue, indigo veya pink kullanılabilir.
- Hover durumunda border rengi değişimi ve transition efekti uygulanabilir.
- 45:52Twitter İkonu ve Metin Tasarımı
- Twitter için özel bir kapsayıcı oluşturuluyor ve Twitter rengi için "bg-twitter" sınıfı kullanılıyor.
- Metin için text-white, rounded-lg ve font-semibold özellikleri ekleniyor.
- İkon ve metin için flex kapsayıcı oluşturuluyor ve aralarına mesafe ekleniyor.
- 50:37Tailwind CSS Kullanımı ve Özellikleri
- Tailwind CSS ile tasarım yapıldığında, butonlar ve bağlantılar için "nowlink" veya "navlink" gibi sınıflar kullanılabilir.
- React ile yazılmadığı için komponent tabanlı yapı kullanılamıyor, ancak React ile yazılacak olsa sidebar için özel CSS'e bulaşmadan komponent oluşturulabilirdi.
- "Active" durumunda "bg-primary" ve "text-white" gibi özellikleri uygulayarak aktif menü öğesini belirtebilirsiniz.
- 53:21Gelecek Derste Yapılacaklar
- Bir sonraki derste giriş yapma butonuna basıldığında pop-up pencere örneği yapılacaktır.
- Giriş yaptıktan sonra dropdown menü örneği denenecek ve responsive tasarımı yapılacak.
- Koyu mod kullanımı gösterilecek ve bir veya iki plugin inceleyerek Tailwind serüveni tamamlanacaktır.
- 53:45Kapanış ve Teşekkür
- Tailwind ile tasarım yapmanın keyifli olduğu belirtiliyor, normal CSS'ten daha heyecan verici bulunuyor.
- Tailwind'in gerçekten kullanışlı olup olmadığı için daha büyük projelerde, özellikle React ile bir video çekilecek.
- İzleyicilerden kanala destek olmaları ve prototurk.com'daki reklamlara tıklamaları isteniyor.