Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- 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.
- 00:07Talwind CSS Eğitimine Giriş
- Bu bölümde Talwind CSS hakkında bilgiler verilecek ve Talwind CSS'in ilk girişini sekiz adımda tamamlanacak.
- Eğitmen, Talwind CSS'i incelediği farklı platformlardan kendine göre bir dökümantasyon çıkarmış ve her haftaki videolarda Talwind CSS ile ilgili derslerin devam etmesini öngörüyor.
- 00:57Visual Studio Code Kurulumu
- Talwind CSS'in çalıştırılması için ilk adım Visual Studio Code kurulumudur.
- Firefox tarayıcısında "visual studio.com" adresine girerek Mac OS, Linux ve Windows için programı indirebilirsiniz.
- 01:23Gerekli Eklentilerin Kurulumu
- Talwind CSS'in çalışması için Visual Studio Code içerisinde Live Server eklentisi kurulmalıdır.
- Talwind CSS'in kendi eklentisi olan "tailwind-intl" kurulabilir.
- Yabancı kanallarda görülen "headwind" eklentisi de kurulabilir, ilerleyen zamanlarda nasıl çalıştığı hakkında bilgi verilecektir.
- 03:21Git Versiyon Sistemi Kurulumu
- Git versiyon sistemi opsiyonel bir kavramdır ve kurmak zorunda değilsiniz.
- Google'da "git" araması yaparak kendinize uygun platformu seçip kurabilirsiniz.
- Git kurulumu için terminalde "git init" komutu ile versiyon sistemi oluşturulabilir ve "git ignore" dosyası oluşturulabilir.
- 05:25Node.js Paket Yönetimi Kurulumu
- Üçüncü adımda npm init paketi (paket.json dosyası) oluşturulmalıdır.
- Terminalde "npm install tailwindcss postcss autoprefixer" komutu ile Tailwind CSS, postcss ve autoprefixer modülleri kurulabilir.
- Kurulum tamamlandıktan sonra sol tarafta "node_modules" klasörü içerisinde modüller görünür.
- 08:30Proje Yapılandırması
- Talwind CSS ile alakalı config ayarları yapılmalıdır.
- Ana dizinde "tailwind.css" adında bir dosya oluşturulmalıdır.
- Ana dizinde "dist" klasörü oluşturulmalı ve içinde "css" ve "apps" klasörleri oluşturulmalıdır.
- 11:10HTML Dosyasında Tailwind CSS Çağrısı
- Index.html dosyasında Tailwind CSS dosyası çağrılmalıdır.
- HTML dosyasında "!link rel='stylesheet' href='dist/css/tailwind.css'" kodu ile Tailwind CSS dosyası çağrılabilir.
- Bu derste Talwind CSS'e ufaktan bir giriş yapılmış olup, bir sonraki derslerde proje geliştirme ve Talwind CSS'in klas yapısı öğrenilecektir.