Metronic is a comprehensive toolkit of UI components built with Tailwind CSS. Contains over 1000 UI elements and 100+ pages for web applications. Includes 10 unique HTML and React demos with advanced layout features. Features extensive documentation and tutorials for developers of all levels
Bu video, bir eğitim içeriği olup, izleyicilere Tailwind CSS kullanarak UI komponent tasarımı yapma sürecini adım adım göstermektedir.. Video, Figma üzerinden bir buton tasarımı ile başlayıp, bu tasarımın Tailwind CSS ile nasıl kodlanacağını anlatmaktadır. Öncelikle Figma'da buton tasarımı yapılarak hover ve click durumları prototipleştirilir, ardından Tailwind CSS config dosyası oluşturulup özel renk varyasyonları tanımlanır. Son olarak, React sayfasında bu Tailwind CSS ile tasarlanmış butonun nasıl kullanılacağı gösterilir. Video, prototip oluşturma ve kod yazma sürecini test etmek için faydalı bir yöntem sunmaktadır.
Bu video, bir eğitmen tarafından sunulan yazılım eğitim içeriğidir. Eğitmen, React ve Tailwind CSS kullanarak bir detay sayfası tasarımı sürecini adım adım göstermektedir.. Video, detay sayfasının tüm tasarım aşamalarını kapsamaktadır. İlk olarak header kısmında kalem yazısı oluşturma ve action button komponenti stillendirme, ardından "Favorite" ve "Red" butonları için ikonlar ekleme, "Detail Item" adlı yeni bir komponent oluşturma ve son olarak scroll özelliği ekleme gibi konular ele alınmaktadır.. Eğitim boyunca margin, padding, font size, border, position, width gibi CSS özellikleri kullanılarak sayfanın görünümü şekillendirilmekte ve tema renkleri ayarlanmaktadır. Video, detay sayfasının tamamlanmasıyla sona erer ve bir sonraki derslerde kaldıkları yerden devam edileceği belirtilir.
Bu video, bir eğitim içeriği olup, sunucu Tailwind CSS hakkında temel bilgiler vermektedir. Sunucu, geçen hafta canlı yayında söz verdiği gibi Tailwind CSS'in ilk girişini sekiz adımda tamamlamayı amaçlamaktadır.. Video, Tailwind CSS'in çalıştırılması için gerekli adımları adım adım göstermektedir. İlk olarak Visual Studio Code kurulumu, ardından gerekli eklentilerin (Live Server, Tailwind, Headwind) kurulumu anlatılmaktadır. Daha sonra Git versiyon sistemi kurulumu, npm init ve npm install komutlarıyla Tailwind, PostCSS ve AutoPrefixer modüllerinin yüklenmesi, Tailwind CSS proje yapısının oluşturulması ve index.html dosyasında Tailwind CSS'in çağrılması gösterilmektedir. Sunucu, bu eğitim serisinin ilerleyen bölümlerinde Tailwind CSS ile proje geliştirme ve Tailwind'in klasör yapısını öğrenmeye devam edeceğini belirtmektedir.
CSS frameworks are pre-written stylesheets for quick website development. They provide foundation for UI components and responsive layouts. Over 40 frameworks available as of writing
Bu video, bir eğitmen tarafından sunulan, React'te form yönetimi ve doğrulama konularını kapsayan kapsamlı bir eğitim içeriğidir. Eğitmen, adım adım kod yazarak form elemanlarının nasıl kullanılacağını göstermektedir.. Video, Formik ve React Hook Form kütüphanelerinin kullanımını, form elemanlarının (input, textarea, checkbox, select, file) oluşturulmasını, form doğrulama kurallarının nasıl uygulanacağını ve form verilerinin nasıl yönetileceğini anlatmaktadır. Eğitim, login sayfası oluşturma, dosya yükleme işlemleri, form resetleme ve validation hatalarını kullanıcıya gösterme gibi pratik uygulamaları içermektedir.. Videoda ayrıca Tailwind CSS ile form elemanlarının stilize edilmesi, class names paketi kullanımı, form doğrulama kurallarının Türkçeleştirilmesi ve form elemanlarının görsel durumlarının validation durumuna göre nasıl değiştirileceği gibi konular da ele alınmaktadır. Video yaklaşık bir saat yarım sürmektedir.
Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitimidir. Eğitmen, izleyicilere React ve Tailwind CSS kullanarak Spotify'ın web versiyonunu klonlamayı adım adım göstermektedir.. Eğitim, bir React projesi oluşturma ve Tailwind kurulumu ile başlayıp, Spotify web player'ının temel bileşenlerini (sidebar, navbar, bottom bar, content) tasarlamayı içermektedir. Video boyunca, Tailwind CSS ile renk paleti oluşturma, flexbox kullanarak düzenlemeler yapma, SVG logo ekleme, Google Fonts kullanımı, menü komponenti oluşturma ve React Router ile sayfa geçişleri yapma gibi konular ele alınmaktadır.. Eğitim, sidebar ve bottom bar tasarımı, playlist komponenti oluşturma ve "Uygulamayı Yükle" butonu gibi detayları içermektedir. Eğitmen, bu serinin geceleri birer iki saatlik bölümler halinde devam edeceğini belirtmektedir.
Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, JavaScript, Tailwind CSS ve Jason Server kullanarak basit bir mesaj uygulaması geliştirme sürecini adım adım göstermektedir.. Video, POST metodu kullanarak sunucuya veri kaydetme işleminden başlayarak, Tailwind CSS'in projeye nasıl ekleneceği, yapılandırılacağı ve temel özelliklerinin nasıl kullanılacağı konularını ele almaktadır. Daha sonra Jason Server modülünün kurulumu, form verilerinin sunucuya gönderilmesi ve veritabanına veri ekleme işlemleri anlatılmaktadır. Son bölümde ise JSON veri yapısında sorgulama komutları gösterilmektedir.. Eğitim boyunca form oluşturma, Tailwind CSS ile tasarım yapma, npm paket yöneticisi kullanarak Tailwind CSS'i projeye ekleme, fetch fonksiyonu ile sunucuya post işlemi yapma, veritabanına veri kaydetme ve sorgulama işlemleri gibi pratik uygulamalar sunulmaktadır. Ayrıca, Tailwind CSS intellisense eklentisinin kurulumu, harici font ekleme ve kullanıcı dostu mesaj verme teknikleri de detaylı olarak ele alınmaktadır.
Install Tailwind as PostCSS plugin for most real-world projects. Install via npm with autoprefixer for vendor prefixes. Add tailwindcss and autoprefixer to PostCSS configuration. Create tailwind.config.js file using Tailwind CLI
Tailwind uses modifiers to conditionally apply utility classes. Modifiers control styles without leaving HTML. Modifiers can be stacked for more specific targeting
CSS cursor property can be used to change pointer to hand when hovering. Cursor can be set using li element with :hover selector. CSS class can be added to elements for mousechange treatment
Bu video, bir eğitim içeriği olup, konuşmacı Tailwind CSS ile ilgili temel text özelliklerini anlatmaktadır.. Video, Tailwind CSS'in normal kurulumunu açıklayarak başlıyor ve ardından text class'larının kullanımını örneklerle gösteriyor. İçerikte text boyutu, italik, kalın, font seçimi, spacing, line height, text hizalama, renk, altı çizili, üstü çizili ve harf büyük/küçük ayarları gibi temel text özellikleri detaylı olarak anlatılıyor. Konuşmacı, Tailwind CSS'in doktrini hakkında daha fazla bilgi edinmek isteyenler için bir kaynak da paylaşıyor.
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.
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin 5. bölümüdür. Eğitmen, React ve Tailwind CSS kullanarak Spotify benzeri bir müzik oynatıcı uygulamasının geliştirilme sürecini adım adım göstermektedir.. Videoda, müzik oynatıcısının full screen modunun nasıl oluşturulacağı, Tailwind CSS ile tasarım yapılması ve uygulamanın cover ekranı, playlist bilgileri gibi bölümlerin kodlanması anlatılmaktadır. Eğitmen, React use full screen ve use toggle kütüphaneleri kullanarak full screen modunu aktifleştirme, player'ı ve kontrolleri komponente dönüştürme, arka plan fotoğrafı ekleme ve full screen/full screen-off butonlarını oluşturma gibi konuları ele almaktadır.. Eğitim, div oluşturma, CSS stilleri uygulama, veri manipülasyonu ve event listener'lar gibi teknik detayları da içermektedir. Video, bir serinin parçası olup, bir sonraki derste devam edileceği belirtilmektedir.
Collection contains 35+ free React templates and themes. Templates cover various purposes including admin dashboards, websites, and portfolios. Resources are high-quality and not easily found online
Bu video, bir konuşmacının kendi web sitesi oluşturma sürecini adım adım anlattığı eğitim içeriğidir.. Video, sıfırdan bir blog sitesi oluşturma sürecini ele almaktadır. İlk bölümde Next.js framework ve Tailwind CSS kurulumu gösterilirken, ikinci bölümde Tailwind JIT özelliği, GitHub'a proje yükleme, Gitignore dosyası oluşturma, Pratier kurulumu ve Versel platformunda proje deploy edilmesi anlatılmaktadır. Video serisi altı bölümden oluşacak olup, sonraki bölümlerde layout tasarımı, blog listesi, yorum kutusu entegrasyonu ve Redis veritabanı kullanımı gibi konular ele alınacaktır.
Bu video, bir eğitim içeriği olup, izleyicilere Tailwind CSS'in nasıl kurulacağını adım adım göstermektedir.. Video, Tailwind CSS'in ne olduğunu açıklayarak başlıyor ve ardından kurulum sürecini detaylı şekilde anlatıyor. Önce Tailwind CSS dosyasının indirilmesi, ardından config.js dosyasının indirilmesi, CSS intellisense eklentisinin kurulumu ve son olarak HTML dosyasına Tailwind CSS'in nasıl ekleneceği gösteriliyor. Video, Tailwind CSS'in temel kullanımını göstermek için bir arka plan değişikliği örneğiyle sonlanıyor.
Bu video, bir eğitim içeriği olup, konuşmacı React için SCRO UI kütüphanesini tanıtmaktadır.. Video, SCRO UI'nin Tailwind CSS'e benzer özelliklere sahip ancak React komponentleriyle uyumlu bir UI kütüphanesi olduğunu açıklamaktadır. Konuşmacı, kütüphanenin kurulumunu, temp providing kısmını ve temel kullanımını göstermektedir. Özellikle açılır kapanan menü oluşturma örneği üzerinden use disclosure, draver, overlay ve content gibi komponentlerin nasıl kullanılacağı adım adım anlatılmaktadır. Video, React uygulamalarında Tailwind CSS alternatifi olarak SCRO UI'nin avantajlarını vurgulamaktadır.
Bu video, bir eğitmen tarafından sunulan React programlama dili eğitim içeriğidir. Eğitmen, React'te compound component (bileşik bileşen) kavramını ve popover komponentlerinin nasıl oluşturulacağını adım adım göstermektedir.. Video, compound component'in ne olduğunu ve avantajlarını açıklayarak başlıyor, ardından Tailwind CSS ile popover komponentlerinin nasıl oluşturulacağını gösteriyor. Eğitmen, kendi popover komponentini yazarak context kullanarak yönetilebilen bir popover oluşturmayı, kutu içine ve dışına tıklama kontrolünü, useEffect hook'unun yan etkilerini temizleme ve conditional class'ların nasıl kullanılacağını kod örnekleriyle açıklıyor.. Eğitim içeriğinde ayrıca ref kullanımı, close event'i çağırmak için gerekli kod değişiklikleri, class name'lerin yönetimi ve Tailwind CSS ile basit CSS kullanımı da gösterilmektedir. Video sonunda, izleyicilere popover'ın daha genel bir fonksiyon içinde nasıl kullanılacağı konusunda ödev verilmektedir.
Bu video, bir eğitmen tarafından sunulan, Getir.com web sitesinin prototipini React ve Tailwind kullanarak geliştirme eğitimidir. Eğitmenin yanında köpek olan Monti de videoda yer almaktadır.. Eğitim, bir web sayfasının responsive tasarımı üzerinde odaklanmaktadır. Videoda, kategori kutuları, banner'lar, header, slider, footer ve teslimat adresi belirle butonu gibi farklı bölümlerin farklı ekran boyutlarında nasıl görünmesi gerektiği adım adım gösterilmektedir. Tailwind CSS, grid sistemleri, flexbox düzenlemeleri ve medya sorguları kullanılarak mobil ve büyük ekranlar için responsive tasarım yapılmaktadır.. Eğitim serisinin son bölümünde, oluşturulan uygulama Netlify üzerinden deploy edilmekte ve GitHub'da paylaşılmaktadır. Ayrıca, React Collapse eklentisi kullanılarak mobil menü animasyonları ve butonlar oluşturulmaktadır. Video, web geliştiricileri için kapsamlı bir responsive tasarım rehberi niteliğindedir.