• Buradasın

    Tailwind CSS

    Özetteki ilgi çekici içerikler

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

    • 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 ile HTML Email Template Oluşturma Eğitimi

      Bu video, Didem adlı bir eğitimcinin sunduğu, Tailwind CSS framework'ünü kullanarak HTML email template oluşturma sürecini anlatan bir eğitim içeriğidir.. Eğitim, Tailwind CSS ile email template oluşturma adımlarını kapsamlı şekilde ele almaktadır. İlk olarak Tailwind CSS'in ne olduğu ve nasıl kullanılacağı anlatılmakta, ardından npm ile proje kurulumu, config.js dosyası ayarları ve template oluşturma süreci adım adım gösterilmektedir. Video, logo ekleme, sosyal medya bağlantıları oluşturma, responsive tasarım yapma, subscribe butonu oluşturma ve component oluşturma gibi konuları içermektedir.. Eğitim ayrıca GitHub Pages kullanarak web sayfası tasarımı, layout ve body class'larını tanıtarak başlıyor, tablo oluşturma, text stillendirme ve buton tasarımı gibi temel web tasarım tekniklerini gösteriyor. Son olarak, oluşturulan şablonun Outlook ve Gmail gibi e-posta servislerinde nasıl görüneceği gösterilmektedir.

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

    • 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

    • 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

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

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

    • 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

    • Laravel ve Tailwind CSS ile Sıfırdan Web Projesi Oluşturma Eğitimi

      Bu video, Ferdi Şahin tarafından sunulan bir web geliştirme eğitim serisidir. Eğitmen, izleyicilere Laravel ve Tailwind CSS kullanarak sıfırdan bir web projesi oluşturma sürecini adım adım göstermektedir.. Video, Laravel kurulumundan başlayarak Tailwind CSS'in projeye entegrasyonuna kadar detaylı bir şekilde ilerlemektedir. İlk bölümde Laravel kurulumu, Tailwind CSS'in ekleme, config dosyasının yapılandırılması ve Webpack Mix ile çalışma gösterilirken, ikinci bölümde minimal bir web sayfası tasarımı için header, sidebar ve footer bölümlerinin nasıl oluşturulacağı anlatılmaktadır.. Eğitim, bir web sayfasının ön yüzünün tamamlanmasıyla sona erer ve bir sonraki derste backend kodlamaya başlanacağı belirtilir. Video boyunca minimal bir tasarım örneği üzerinden header oluşturma, grid kullanımı, logo ekleme, arama kutusu oluşturma ve menü tasarımı gibi temel Tailwind CSS özellikleri uygulamalı olarak gösterilmektedir.

      • youtube.com

    • Spotify Clone Projesi: Arama Sayfası ve Kategoriler Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin dördüncü bölümüdür. Eğitmen, izleyicilere adım adım Spotify clone projesinin arama sayfası ve kategoriler bölümünün nasıl oluşturulacağını göstermektedir.. Videoda, Tailwind CSS kullanarak Spotify tarzı bir arayüz tasarımı yapılmaktadır. İçerik, arama sayfasının üst kısmının ve "hepsine göz at" bölümünün kodlanması ile başlayıp, kategorilerin grid sisteminde düzenlenmesi, responsive tasarım özellikleri ve scroll etkinliklerinin JavaScript ile yönetilmesi ile devam etmektedir. Ayrıca, pop, hip hop, rock ve dans-elektronik gibi kategorilerin oluşturulması ve prev-next butonlarının eklenmesi gösterilmektedir.. Eğitim, CSS özellikleri, komponent oluşturma teknikleri ve veri dosyaları (data klasöründe categories.json) kullanarak Spotify arama sayfasının tasarımını taklit etmeyi içermektedir. Video, web geliştirme ve Tailwind CSS öğrenmek isteyenler için pratik bir rehber niteliğindedir.

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