• Buradasın

    Tailwind CSS

    Özetteki ilgi çekici içerikler

    • 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

    • 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

    • 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 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

    • 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

    • 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

    • 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

    • 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

    • 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 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

    • 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

    • 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

    • 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

    • 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 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

    • 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

    • Locify Lightning ile Figma'dan Koda Tek Adımda Dönüşüm

      Bu video, bir yazılım geliştirici tarafından sunulan, Locify.ai adlı yapay zeka aracının yeni ürünü olan "Locify Lightning"i tanıtan bir teknik demo ve incelemedir. Sunucu, tasarım ve kodlama süreçleri arasındaki verimsizliği ele alarak, Figma dosyalarını doğrudan yüksek kaliteli ön yüz koduna dönüştüren bu aracı tanıtıyor.. Video, önce Figma'nın "DevMode"u içinde Locify eklentisinin nasıl kurulacağını ve tek bir tıklamayla React, Next.js veya Tailwind gibi tercih edilen teknolojilerle kodun nasıl üretileceğini adım adım gösterir. Ardından, oluşturulan kodun Locify Builder arayüzünde nasıl dinamik verilerle bağlanabileceği, bileşenlerin nasıl özelleştirilebileceği ve projenin GitHub, Vercel veya Netlify gibi platformlara nasıl senkronize edileceği detaylandırılır. Son olarak, tüm bu işlemlerin tarayıcı yerine doğrudan VS Code entegrasyonu üzerinden de yapılabileceği gösterilerek araç, geliştirme ortamına entegre edilmiş bir çözüm olarak sunulur.. Bu içerik, özellikle kullanıcı arayüzü tasarımlarını kodlamaya dönüştürme sürecini hızlandırmak isteyen ön yüz geliştiriciler ve tasarımcılar için faydalı olacaktır. Video, aracın ücretsiz olduğunu ve Figma ile VS Code arasında sorunsuz bir iş akışı sağladığını vurgulayarak, geleneksel manuel kodlama yöntemlerine alternatif bir yapay zeka tabanlı çözüm sunmaktadır.

      • 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 ile Koyu Mod Desteği Ekleme Rehberi

      Bu video, Tailwind CSS kullanarak web sitelerine manuel tema değiştirme (açık/koyu mod) işlevselliği eklemeyi gösteren bir teknik eğitim videosudur. Sunucu, kodlama sürecini adım adım açıklayan tek bir kişidir ve izleyicilere React bileşenleri ile Tailwind yapılandırması hakkında bilgi verir.. Video, önce Tailwind CSS'in varsayılan sistem tercihlerini nasıl kullandığını ve bunu manuel seçim için nasıl değiştireceğinizi (`darkMode: 'class'`) anlatarak başlar. Ardından, yerel depolamayı (localStorage) ve sistem tema değişikliklerini dinleyen özel bir React hook'u (`useTheme`) oluşturulması ve bu hook'un bir tema değiştirme bileşenine entegre edilmesi detaylı bir şekilde kodlanır.. İzleyiciler, web projelerine profesyonel bir şekilde koyu mod desteği eklemek ve bu işlevi otomatize etmek için gerekli kod yapısını ve mantığını öğrenmek istiyorsa bu video faydalı olacaktır.

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