Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- 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.
- 00:01Spotify Klonu Projesi Başlangıcı
- React ve Tailwind kullanarak Spotify klonu projesi yapılacak.
- Proje, Spotify'ın web versiyonundaki web player tasarımını taklit edecek.
- Bomboş bir projede npx create react app ile React projesi oluşturuluyor.
- 00:57Tailwind Kurulumu
- Tailwind kurulumu npm ile gerçekleştiriliyor.
- Tailwind config dosyası npx tailwindcss init komutuyla oluşturuluyor.
- Tailwind.js dosyasına tailwind.base, utilities ve components ekleniyor.
- 03:16Proje Hazırlığı
- İhtiyasız dosyalar silinerek projenin temizlenmesi yapılıyor.
- React projesi başlatılıyor ve Tailwind watch işlemi başlatılıyor.
- Routing yapısı kurulacak ve Spotify arayüzünün farklı bölümleri için komponentler oluşturulacak.
- 04:30Komponentlerin Oluşturulması
- Sidebar, Navbar, Bottom Bar ve Content komponentleri için src klasöründe components klasörü oluşturuluyor.
- Absolute path kullanımı için jsconfig.json dosyası oluşturuluyor.
- Komponentler App.js dosyasına import ediliyor.
- 07:11Ana Kapsayıcı ve Layout
- Ana kapsayıcı içinde sidebar ve content komponentleri yan yana yerleştirilecek.
- Bottom bar komponenti alt tarafta yer alacak.
- Content'in içinde navbar komponenti bulunacak.
- 09:25Tailwind Stil Uygulamaları
- App.js dosyasına import edilen tailwind.css dosyası sayesinde Tailwind stil uygulamaları başlıyor.
- Root elementine flex ve flex-col sınıfları eklenerek alt alta düzen yapılıyor.
- Bottom bar için height değeri 2rem (yaklaşık 24px) olarak ayarlanıyor.
- 12:51Renk Tanımlamaları
- Sayfa boyutu 96 piksel olarak ayarlandı.
- Sayfada kullanılan renkler tanımlanıyor: backdrop, primary (ana brand rengi), active color ve footer renkleri.
- Renk tanımlamaları için "colors" kullanılıyor ve her renk için uygun isim veriliyor.
- 15:39Body ve Sidebar Düzenlemeleri
- Body'ye backdrop rengi ve text white (beyaz yazı) özelliği veriliyor.
- Sidebar'ın genişliği 241 piksel (15rem) olarak belirleniyor ve "v-6" class'ı ekleniyor.
- Content alanına "flex-auto" class'ı verilerek genişletme özelliği tanıtılıyor.
- 16:40Container ve Content Düzenlemeleri
- "Container" yerine "content" veya "wrapper" ismi kullanılıyor çünkü Tailwind'de "container" class'ı var.
- Content'e "flex" özelliği verilerek yan yana düzenlenmesi sağlanıyor.
- Sidebar 240 piksel genişliğinde, content alanı ise olabildiğince geniş.
- 17:32SVG Logo Ekleme
- SVG formatında bir logo kopyalanıp "image" klasörüne kaydediliyor.
- Sidebar'a logo import ediliyor ancak ilk başta görünmüyor.
- SVG'nin görünmemesinin sebebi, SVG dosyasında gerekli stil bilgilerinin eksik olması.
- 19:10SVG Düzenlemeleri
- Google Fonts'tan bir ikon seçiliyor ve SVG dosyasına ekleniyor.
- İkonun rengi "current color" yerine "fff" (beyaz) olarak değiştiriliyor.
- Logo boyutu ayarlanıyor ve "mh-10" class'ı eklenerek yukarıdan ve aşağıdan boşluk veriliyor.
- 20:36Padding ve Menü Düzenlemeleri
- Sidebar'a "py-6" class'ı eklenerek üst ve alt padding veriliyor.
- Menü için "px-2" class'ı eklenerek sağdan ve soldan 8 piksellik padding veriliyor.
- Menü öğeleri arasında "mb-5" class'ı kullanılarak 20 piksellik boşluk bırakılıyor.
- 23:50Tailwind CSS ile Menü Tasarımı
- Menü için flex ve flex-col özellikleri kullanılarak düzen oluşturuluyor.
- Her bir menü elemanına class name "h-10 flex items-center" veriliyor ve yazı boyutu 14 piksel (text-sm) olarak ayarlanıyor.
- Menü elemanlarının yazı rengi text-link olarak belirleniyor ve hover durumunda text-white olacak şekilde tasarlanıyor.
- 25:19Menü Elemanlarının Özellikleri
- Menü elemanlarının padding değeri 16 piksel (px-4) olarak ayarlanıyor.
- Aktif durumda menü elemanlarına "bg-active" arka plan rengi veriliyor.
- Menü elemanlarının kenarları 4 piksel (rounded) yuvarlatılıyor.
- 26:50İkonlar İçin Component Oluşturma
- İkonlar için "icons" adında bir JavaScript dosyası oluşturuluyor.
- Her ikon için ayrı bir komponent tanımlanıyor (home icon, search icon, collection icon).
- İkonlar için "Icon" adında bir genel komponent oluşturuluyor ve size ve name parametreleri alıyor.
- 28:33İkonların Kullanımı
- Menüde "Icon" komponenti kullanılarak ikonlar eklenebiliyor.
- İkonların rengi "fill-current" olarak ayarlandığı için, menü elemanının rengi değiştiğinde ikonun rengi de değişiyor.
- İkonlar ve yazılar arasında 16 piksel (gap-x-4) mesafe bırakılıyor.
- 31:46Footer Tasarımı
- Footer için "bg-footer" arka plan rengi ve "border-white" kenarlık kullanılıyor.
- Kenarlığın opaklığı %5 olarak ayarlanıyor.
- Footer'un altına 18 piksel (mb-18) boşluk bırakılıyor.
- 35:04React Router Ekleme
- Projeye React Router ekleniyor (npm install react-router-dom).
- React Router ile sayfa yönlendirmeleri (routing) yapılabiliyor.
- Link komponenti kullanılarak aktif sayfaya "active" sınıfı verilebiliyor.
- 36:39Geliştirme Ortamı ve Projeyi Bölmenin Avantajları
- Eskiden sadece HTML, CSS ve PHP gibi dillerde kod yazarken, sonucu hemen görebiliyorduk ve geliştirme ortamı daha kolaydı.
- Projeyi bölmenin başlangıçta yavaşlatması olsa da, sonradan mutlu eden bir yapıya sahiptir.
- İyi bir editörün indexleme özelliği çok önemlidir, aksi takdirde kod yazma aşamasına geçmek zorunda kalırız.
- 37:50React Router Kullanımı
- React Router'ı projeye dahil ederek route'ları yönetebiliriz.
- Ana sayfa için "Home" komponenti, arama sayfası için "Search" komponenti oluşturularak views klasörüne yerleştirilir.
- "Switch" ve "Route" kullanılarak farklı URL'ler için farklı komponentler görüntülenebilir.
- 42:49Menü Linklerini NowLink ile Düzenleme
- Menüdeki linkler için "a" etiketleri yerine "NowLink" kullanılır.
- NowLink'in "to" özelliği ile hangi sayfaya yönleneceği belirlenir.
- NowLink'in "activeClassName" özelliği ile aktif menü öğesine özel bir class eklenerek görünümü değiştirilebilir.
- 45:10Sidebar İçeriği Oluşturma
- Sidebar'da çalma listesi oluşturma ve beğenilen şarkılar gibi öğeler eklenir.
- Artı ve kalp ikonları oluşturulur ve flexbox kullanılarak ortalanır.
- Butonlara padding, margin ve renk özellikleri eklenerek görünümü ayarlanır.
- 52:28CSS Özelliklerinin Ayarlanması
- Grup hover durumunda opacity değeri ayarlanıyor.
- Gradient efekti için "before" özelliği kullanılıyor.
- Hover durumunda opacity değeri 100'e çekiliyor.
- 53:14Renk ve Opacity Ayarları
- Renk değerleri ve opacity ayarları yapılarak istenen görünüm elde ediliyor.
- Renk değerleri "from blue 300" ve "indigo 600" gibi belirleniyor.
- Hover durumunda opacity değeri 60 olarak ayarlanıyor.
- 55:29Komponent Oluşturma
- "22 Çalma Playlisti" adında bir alan oluşturuluyor.
- Sidebar altında "playlist" adında bir komponent oluşturuluyor.
- Playlist'e margin left ve right değerleri 24 piksel, mt değeri 4 piksel veriliyor.
- 56:37Playlist Stil Ayarları
- Playlist'e flex auto özelliği verilerek kalan alanı tamamlaması sağlanıyor.
- Border ve padding değerleri ayarlanıyor.
- İçeriklerin boyutları 14 piksel olarak belirleniyor.
- 58:01İçerik Listeleme ve Düzenleme
- "22 Çalma Listesi" başlığı ekleniyor.
- Liste öğeleri için text sm, text link hover ve text white özellikleri kullanılıyor.
- Liste öğelerinin yüksekliği 32 piksel olarak ayarlanıyor.
- 59:12Özel Ayarlar ve Düzenlemeler
- Sidebar'da boşluk sorunu çözülüyor.
- Özel spacing değeri 13 piksel olarak tanımlanıyor.
- Font size değeri 0.83 rem olarak ayarlanıyor.
- 1:01:01Uygulama Yükle Butonu
- "Uygulamayı Yükle" butonu oluşturuluyor.
- Butonun ikonu 24x24 boyutunda ayarlanıyor.
- Butonun davranışları Progressive Web Application olarak yüklenmesi için programlanıyor.
- 1:02:01Komponent Yönetimi ve Kapanış
- Farklı komponentlerin ayrı tutulması yönetimi açısından kolaylık sağlıyor.
- Routing yapısı kurulmuş ve her biri farklı root dosyalarından gelecek.
- Bu dersle sidebar alanı tamamlanmış oluyor.