• Buradasın

    Tailwind CSS

    Özetteki ilgi çekici içerikler

    • Tailwind CLS Version 4 Kurulum Rehberi

      Bu video, DevTamin kanalında yayınlanan bir eğitim içeriğidir. Sunucu, Tailwind CLS versiyon 4'ü nasıl kuracağınızı adım adım göstermektedir.. Video, Tailwind CLS kurulumu için gerekli olan Visual Studio Code ve Node.js kurulumundan başlayarak, Tailwind CLI ile proje oluşturma, input.cls dosyası oluşturma ve Tailwind CSS'i HTML'e entegre etme sürecini detaylı şekilde anlatmaktadır. Sunucu, text-5xl, background-color ve container gibi temel Tailwind sınıflarının çalıştığını test ederek, projenin nasıl çalıştığını göstermektedir. Ayrıca, Live Server kullanımı, Tailwind Intelligence eklentisi ile otomatik tamamlama özelliği ve projenin farklı klasörlerde nasıl kullanılacağı da açıklanmaktadır.

      • youtube.com

    • Spotify Benzeri Müzik Oynatıcı Uygulaması Geliştirme Eğitimi

      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.

      • youtube.com

    • Tailwind CSS Giriş Eğitimi

      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.

      • youtube.com

    • React ve Tailwind ile Spotify Klonu Tasarım Eğitimi

      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.

      • youtube.com

    • React ve Tailwind CSS ile Detay Sayfası Tasarımı Eğitimi

      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.

      • youtube.com

    • Sıfırdan Web Sitesi Oluşturma Eğitimi

      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.

      • youtube.com

    • React için SCRO UI Kütüphanesi Tanıtımı

      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.

      • youtube.com

    • React.js ve Tailwind CSS ile Modern UI UX Tasarımlı Landing Sayfası Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan React.js ve Tailwind CSS kullanarak modern bir UI UX tasarımlı landing sayfası oluşturma eğitimidir.. Eğitim, adım adım bir React projesi oluşturma sürecini göstermektedir. Video, Veet ile React projesi oluşturma, Tailwind CSS kurulumu, navbar tasarımı, hero section, kod editörü, tablar, özellikler, fiyatlandırma ve testimonials bölümlerinin oluşturulması ve footer tasarımı gibi aşamaları kapsamaktadır. Her bölüm için Tailwind CSS'in responsive tasarım özellikleri, utility sınıfları ve animasyonlar detaylı şekilde gösterilmektedir.. Eğitim boyunca React'in useState hook'u, React Syntax Highlighter kütüphanesi ve flexbox gibi teknikler kullanılarak web sayfasının farklı ekran boyutlarında nasıl görüneceği gösterilmektedir. Video, Vercel platformu üzerinden web sitesinin nasıl deploy edileceğini göstererek sona ermektedir.

      • youtube.com

    • Getir.com Responsive Tasarım Eğitimi

      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.

      • youtube.com

    • React'te Compound Component ve Popover Kullanımı Eğitimi

      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.

      • youtube.com

    • Tailwind CSS ve React ile Web Sitesi Geliştirme Eğitimi

      Bu video, bir UI/UX tasarımcısı tarafından sunulan Tailwind CSS ve React kullanarak web sitesi geliştirme eğitimidir. Eğitmen, adım adım kod yazarak Tailwind CSS'in temel özelliklerini ve kullanımını göstermektedir.. Video, üç farklı proje üzerinden Tailwind CSS'in pratik kullanımını kapsamaktadır: portföy sitesi, e-ticaret sitesi ve restoran uygulaması. Her proje için navbar, hero section, top product section, feature section, footer gibi temel bileşenlerin nasıl oluşturulacağı, responsive tasarım için media query'lerin nasıl uygulanacağı ve Tailwind CSS'in flexbox özellikleri, props kullanımı gibi konular detaylı olarak anlatılmaktadır.. Eğitim boyunca Tailwind Play sitesi kullanılarak temel renk ve arka plan renk uygulamaları gösterilmekte, Tailwind CSS IntelliSense eklentisinin kullanımı anlatılmakta ve kod tekrarını önlemek için component oluşturma teknikleri paylaşılmaktadır. Ayrıca, Tailwind CSS'in Bootstrap, Material UI gibi diğer kütüphanelerden farkları ve avantajları da açıklanmaktadır.

      • youtube.com

    • Tailwind CSS Kurulum Rehberi

      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.

      • youtube.com

    • Locify Lightning: Figma'dan Kod'a Dönüştürme Rehberi

      Bu video, bir konuşmacının Locify Lightning adlı AI tabanlı tasarım-dan-kod'a dönüştürme aracını tanıttığı eğitim içeriğidir.. Video, Figma'da tasarlanan uygulamaların kodlanması sürecini otomatikleştiren Locify Lightning'in kullanımını adım adım göstermektedir. İçerikte, Figma'nın DevMode'unda Locify eklentisinin yükleme, tek tıklamayla kod oluşturma, Tailwind CSS gibi alternatif stil seçeneklerinin kullanımı, GitHub'a senkronizasyon ve VS Code'da Figma uzantısı ile aynı işlemlerin nasıl yapılacağı detaylı olarak anlatılmaktadır.. Ayrıca, Locify Builder aracılığıyla kodun özelleştirilmesi, oluşturulan kodun nasıl görüntüleneceği ve canlı prototip oluşturma özellikleri de videoda gösterilmektedir. Bu rehber, tasarımcıların Figma'dan kod'a dönüşüm sürecini hızlandırmalarına yardımcı olacak pratik bilgiler sunmaktadır.

      • youtube.com

    • Tailwind ile Temalı Web Sitesi Oluşturma

      Bu video, bir web geliştirme eğitim içeriğidir. Konuşmacı, Tailwind kullanarak çoklu tema seçeneği sunan bir web sitesi oluşturma yöntemini göstermektedir.. Video, Tailwind'in grup etiketleri ve veri özellikleri kullanarak farklı temalar oluşturmayı anlatmaktadır. Konuşmacı önce temel yapıyı göstererek, body'ye grup etiketi ve veri teması özelliği ekleyerek farklı temalar (brutalist ve round) oluşturmayı açıklar. Ardından CSS değişkenleri kullanarak bu temaları daha detaylı şekilde nasıl uygulayabileceğinizi gösterir. Video, kullanıcıların web sitesinde kendi tercihlerine göre tema seçebilmesini sağlayan pratik bir çözüm sunmaktadır.

      • youtube.com

    • Tailwind CSS Text Özellikleri Eğitimi

      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.

      • youtube.com

    • JavaScript ile Web Uygulaması Geliştirme Eğitimi

      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.

      • youtube.com

    • Tailwind CSS Kapsamlı Eğitim Serisi

      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.

      • youtube.com

    • Tailwind CSS ile Otomatik Tema Değiştirme Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere Tailwind CSS kullanarak web sitelerinde otomatik tema değiştirme (light ve dark mod) özelliğini nasıl uygulayabileceklerini göstermektedir.. Video, Tailwind CSS ile tema değiştirme işleminin adım adım nasıl yapılacağını anlatmaktadır. Önce temel bir tema değiştirme bileşeni oluşturulur, ardından Tailwind CSS'in dark modu nasıl çalıştığı açıklanır. Daha sonra, tema değiştirme işleminin manuel olarak nasıl yapılacağı gösterilir ve son olarak, bu işlemi otomatikleştirmek için bir hook (useTheme) yazarak tema değiştirme işleminin nasıl entegre edileceği detaylı olarak anlatılır. Video, tema değiştirme işleminin nasıl çalıştığını gösteren bir örnek ile sonlanır.

      • youtube.com

    • Tailwind CSS ile React Uygulaması Oluşturma Eğitimi

      Bu video, Charles adlı bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, izleyicilere adım adım Tailwind CSS ile React uygulaması oluşturma sürecini göstermektedir.. Video, Tailwind CSS'in kurulumu ve yapılandırılması ile başlayıp, React Router DOM kullanarak basit bir web uygulaması oluşturma, nav bar tasarımı, tema oluşturma ve dinamik tema değiştirme özellikleri gibi konuları kapsamaktadır. İçerik, bir şarap resmi ve metin içeriği içeren home sayfası tasarımı üzerinden mobil-responsive tasarım prensiplerini uygulamalı olarak anlatmaktadır.. Eğitimde ayrıca Google Fonts'tan Nunito fontunu ekleme, Hero Icons'tan SVG ikonlarını kullanma, CSS değişkenleri ile tema oluşturma ve Tailwind config dosyasını düzenleme gibi teknik detaylar da gösterilmektedir. Eğitmen, üç farklı renkli (kırmızı, siyah ve mor) butonlar oluşturarak, bu butonların tıklanmasıyla tema değişmesini sağlayan bir uygulama geliştirme sürecini adım adım anlatmaktadır.

      • youtube.com

    • Tailwind CSS Kapsamlı Eğitim Videosu

      Bu video, bir eğitmen tarafından sunulan Tailwind CSS hakkında detaylı bir eğitim içeriğidir. Eğitmen, Tailwind CSS'in temel prensiplerini ve kullanımını kod örnekleri üzerinden anlatmaktadır.. Video, Tailwind CSS'in ne olduğu ve utility-first yaklaşımının nasıl çalıştığı ile başlayıp, temel class'ların kullanımı, JIT compiler özelliği, flexbox ve grid layout özellikleri, responsive tasarım, medya sorguları, dark mode, özelleştirme yöntemleri ve ShadCN gibi bileşen kütüphanelerinin kullanımı gibi konuları kapsamaktadır. Eğitim, Tailwind Play platformu üzerinden interaktif örnekler sunarak, temel kavramlardan ileri seviye özelliklere kadar geniş bir yelpazede bilgi vermektedir.. Video, Tailwind CSS'in esnekliği ve özelleştirilebilirliği üzerinde durmakta, config dosyası kullanarak renk ve font özelleştirme yöntemlerini, layer bileşenlerini ve kendi utility stillerini tanımlama tekniklerini adım adım göstermektedir. Ayrıca, ShadCN gibi bileşen kütüphanelerinin kullanımı, accent rengi değiştirme, fluid metinler, dosya girişleri, highlight ayarları ve JavaScript yerine Tailwind ile basit görevler gibi pratik uygulamalar da sunulmaktadır. Video, bir sonraki bölümde build ve deploy bölümü ile Fitness Pro landing sayfası projesi ele alınacağını belirterek sona ermektedir.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor