• Buradasın

    Tailwind CSS

    Özetteki ilgi çekici içerikler

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

    • React'te Form Yönetimi ve Doğrulama Eğitimi

      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.

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

    • 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

    • 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 UI Komponent Tasarımı Eğitimi

      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.

      • 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

    • 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

    • 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 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 Redux ile Hava Durumu Uygulaması Test Case Çözümü

      Bu video, bir eğitim içeriği olup, konuşmacı bir firmadan aldığı React ve Redux ile geliştirilen hava durumu uygulaması test case'ini nasıl çözdüğünü paylaşıyor.. Videoda, OpenWeatherMap API'si kullanılarak geliştirilen bir hava durumu uygulamasının test case'i adım adım anlatılıyor. Konuşmacı, API key'in session storage'de tutulması, sayfa yenilemesi durumunda key'in tekrar istenmemesi, şehir listesi ve harita kullanımı gibi test case'in önemli noktalarını açıklıyor. Ayrıca, uygulamanın görsel özellikleri, filtreleme fonksiyonları ve kullanıcı deneyimini artıran detaylar da gösteriliyor.. Videoda ayrıca Tailwind CSS ile tasarım yapma, Weather React Icons paketi ile hava durumu ikonları ekleme ve SVG grafiklerle hava durumu bilgilerini gösterme gibi ek özellikler de gösteriliyor. Konuşmacı, firmalara başvuru yaparken kendi katkılarınızı sunmanın önemini vurgulamakta ve izleyicilere benzer bir tascase üzerinde çalışıp kendi demo linklerini paylaşmalarını önermektedir.

      • 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 ve Alpine.js ile Espresso Lab Landing Page Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, Tailwind CSS ve Alpine.js kütüphanelerini kullanarak Espresso Lab'in web sitesini landing page olarak nasıl dökeceğini anlatmaktadır.. Eğitim, Tailwind CSS'in temel çalışma mantığını ve HTML'den ayrılmadan modern web sitelerini kodlamayı hedeflediğini açıklayarak başlıyor. Ardından Alpine.js'in Tailwind ekosistemine nasıl entegre olduğu ve JavaScript ile HTML arasında sağladığı kolaylıklar anlatılıyor. Video, kodlama sürecine geçmeden önce bu kütüphanelerin temel kullanımını öğrenmek isteyenler için faydalı bir kaynak niteliğindedir.. Eğitim yaklaşık üç saat sürecek ve responsive tasarımla tamamlanacaktır. Tailwind'in flex, padding, position gibi CSS özelliklerini nasıl sınıflarla temsil ettiği ve Alpine.js'in döngü oluşturma, değişkenler, veri sağlama, event tanımlamaları ve kısayollar gibi temel özellikleri örneklerle gösterilmektedir.

      • 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 ile Pop-Up Oluşturma Eğitimi

      Bu video, bir web geliştirme eğitim içeriğidir. Eğitmen, web sitelerinde kullanıcıların dikkatini çeken ve dönüşüm odaklı içerik sunmanın etkili yollarından olan pop-up'ların nasıl yapılacağını göstermektedir.. Video, pop-up'ların çalışma mantığını açıklayarak başlıyor ve ardından adım adım bir pop-up oluşturma sürecini gösteriyor. Eğitmen, Tailwind CSS kullanarak buton ve pop-up'ların stilini nasıl uygulayacağını, JavaScript ile butona tıklama işlevlerini nasıl gerçekleştireceğini ve pop-up'ın ekranda nasıl ortalanacağını anlatıyor. Ayrıca, pop-up'ın açılış ve kapanış animasyonlarını da gösteriyor. Video, web sitelerinde kullanıcı etkileşimini artırmak isteyenler için temel bir pop-up oluşturma rehberidir.

      • 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
  • Yazeka sinir ağı makaleleri veya videoları özetliyor