Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- 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.
- Getir.com Responsive Tasarım Serisi
- Serinin son bölümünde Getir.com'un responsive tasarımı yapılacak.
- Kanalın topluluk sayfasında "React + Tailwind" serisinin devam edip etmeyeceği hakkında bir anket paylaşılmış.
- Getir.com'un sadece ana sayfası yapılmış, devam edilirse alt sayfaları da yapılabilir.
- 01:33Getir.com'un Mobil Görünümü
- Getir.com mobil versiyonunda ekran küçüldükçe bazı kısımlar değişiyor, "Dakikalar içinde kapınızda" yazısı ve slide gidiyor.
- Kampanyalar kısmı mobilde yukarıya geliyor, bu durumda farklı responsive çözümler uygulanabilir.
- Tailwind CSS'in mobile-first özelliği kullanılarak responsive tasarımlar oluşturulabilir.
- 05:00Kategori Sayısını Ayarlama
- Tailwind'de grid column değerleri kullanılarak kategori sayısı ekran boyutuna göre ayarlanabilir.
- XL ekranlarda 10 kategori, LG ekranlarda 8 kategori, MD ekranlarda 6 kategori, daha küçük ekranlarda 4 kategori gösterilebilir.
- Tailwind'in breakpoint özellikleri kullanılarak ekran boyutlarına göre farklı düzenlemeler yapılabilir.
- 07:40Banner ve Slayt Ayarları
- Banner'lar büyük ekranlarda çok büyük duruyor, responsive ayarları ile düzeltilmesi gerekiyor.
- Breakpoint değerlerine göre slayt sayısı ayarlanabilir: büyük ekranlarda 4, orta ekranlarda 3, küçük ekranlarda 2, en küçük ekranlarda 1 slayt gösterilebilir.
- Arrow ayarları da ekran boyutuna göre özelleştirilebilir.
- 12:53CSS Grid ve Responsive Tasarım
- Arrows değişkeni başlangıçta false olarak ayarlanıyor ve slayt gösterimindeki değişiklikler inceleniyor.
- Banner sayısının dörtten beşe çıkarılması ve grid cols değerlerinin ayarlanması (XL'de 8, LG'de 6, SM'de 4) yapıldı.
- Ürün listelerinde grid cols değerleri (2, 4, 6, 8) ve responsive tasarıma göre değişiklikler yapıldı.
- 16:58Hero Section ve Responsive Özellikler
- Hero section için class name'lerin ve blok özellikleri SM'den sonra nasıl ayarlanacağı incelendi.
- Text ve hata değerlerinin responsive tasarıma göre değişiklikleri (XL'de, MD'den sonra) yapıldı.
- MD'den sonra blok özelliği ve hata değerlerinin (h-auto, h-500) ayarlanması yapıldı.
- 19:16Window Size Kullanımı
- Window size (pencere genişliği) kullanarak responsive tasarıma otomatik ayar yapma yöntemi gösterildi.
- UseWindowWidth hook'u kullanılarak pencere genişliğinin 768 pikselden büyük veya eşit olduğunda belirli bir özelliklerin çalışması sağlandı.
- Pozisyon, left ve translate-x değerlerinin responsive tasarıma göre ayarlanması ve konteyner genişliğinin %100 olarak belirlenmesi yapıldı.
- 24:31Header Düzenlemesi
- Header'ı büyütüp ortalamak için bg-brand sınıfı kullanılıyor ve h11 yerine h15 sınıfı denenecek.
- Header'ın md'den sonra justify-center yerine justify-between hali verilecek.
- 768 piksel genişliğindeki ekranlarda header'ın görünümü ayarlanacak.
- 25:36Kampanyalar Kısmı Düzenlemesi
- Kampanyalar kısmını header'dan sonra ekleyerek, window with 768 pikselden büyük olduğunda görünmesini sağlayacak kodlar yazılacak.
- Container'ın genişliği ayarlanacak ve varsayılan olarak "by" veya "py-8" kullanılacak.
- Title component'ine "hidden md" sınıfı eklenerek mobilde gizlenmesi sağlanacak.
- 28:47Slider Problemi Çözümü
- Slider'ın genişliğe ihtiyaç duyduğu için hero section'daki genişlik değerleri import edilecek.
- Window with 768 pikselden küçük olduğunda 500 piksel genişlik verilecek.
- Overflow-x hidden özelliği eklenerek sorunun çözümü deneniyor.
- 31:47Layout Düzenlemesi
- İkonların gizlenmesi ve title'ların düzenlenmesi yapılacak.
- Mobile app için normalde flex, md'de flex-row olarak düzenlenecek.
- Grid cols 2 yerine md'de grid cols 3 kullanılacak ve place-items-center ile ortalama yapılacak.
- 37:20Responsive Tasarım Ayarları
- Image'lerin her birine class name verilip, 36-40 piksel boyutuna çekilmesi planlanıyor.
- Self-end özelliği kullanılarak öğelerin yerleştirilmesi ve md (medium) ekran boyutunda düzenlemeler yapılıyor.
- Cars (araba) bölümünde md'de 3, lg'de 3 tane gösterim yapılması planlanıyor.
- 41:18Footer ve Layout Düzenlemeleri
- Footer için grid cols 4 kullanılıyor ve md'de grid col 3, lg'de grid col 4 olarak ayarlanıyor.
- Footer'da gap y 6 ve padding değerleri eklenerek aralarındaki mesafeler düzenleniyor.
- Flex row ve flex col kullanılarak öğelerin sıralaması ve düzeni değiştiriliyor.
- 44:43Responsive Menü Geliştirme
- React Collapse eklentisi kullanılarak menüye açılış-kapanış özelliği ekleniyor.
- Use state ve use effect kullanılarak is open değişkeni true/false olarak değiştiriliyor.
- Window width değeri kontrol edilerek ekran boyutuna göre menü otomatik olarak açılması veya kapanması sağlanıyor.
- 52:57Grid ve Responsive Tasarım
- Grid içine alınması gereken öğeleri düzenlemek için "mb-4" sınıfı kullanılabilir.
- Grid cols iki ve md'de grid cols bir şeklinde düzenlenebilir.
- Gap değerleri normalde 2, md'de 4 olarak ayarlanabilir.
- 53:44Menü Butonu ve Animasyon
- Menü butonu için aşağı doğru bakan bir ok kullanılacak.
- Buton flex, items center ve justify between özellikleriyle düzenlenebilir.
- Buton için v-8 h-8 rounded-lg bg-primary-brand-color bg-opacity-on-text-brand-color-primary-brand-color özellikleri kullanılabilir.
- 56:37Animasyon Uygulaması
- Animasyon için "is-open" kontrolü kullanılabilir.
- Transition all özelliği ile animasyon uygulanabilir.
- Rotate-180 dönüşümü ile okun yönü değiştirilebilir.
- 59:58Mobil Görünüm ve Gizleme
- Mobil görünümde öğelerin gizlenmesi için "hidden" sınıfı kullanılabilir.
- MD'de grid haline getirilerek öğelerin görünmesi sağlanabilir.
- Mobil cihazlarda cursor pointer kullanımı gereksiz olabilir çünkü göremeyeceklerdir.
- 1:02:34Projenin Deploy Edilmesi
- Proje önce build alınıp sonra Netlify'a deploy edilebilir.
- Build alındıktan sonra Netlify'de yeni bir site oluşturulabilir.
- Projenin son halini GitHub deposundan da indirilebilir.
- 1:05:08Ek Özellikler ve Kapanış
- Görseller yüklenmeden önce play symbol animasyonu eklenebilirdi.
- Proje başarıyla çalışır durumda ve deploy edilmiş haldedir.
- Mobil görünüm için ek alan eklenebilir.
- 1:07:02React ve Tailwind Kullanımları
- Konuşmacı, bir location ikonu ve sağa bakan ok kullanarak "teslimat adresi belirle" metnini oluşturuyor.
- İkonları "react icons" kütüphanesinden import ederek kullanıyor.
- Div'in flex özelliği verilerek, içeriğin merkezde hizalanması sağlanıyor.
- 1:08:30Stil Ayarları
- İkonun boyutu 40 piksel olarak ayarlanıyor ve padding değerleri ekleniyor.
- Metne "text primary brand color" sınıfı verilerek renk ayarı yapılıyor.
- Metnin font ailesi "font semi bold" olarak ve opaklığı 800 olarak ayarlanıyor.
- 1:10:31Responsive Tasarım
- Tasarımın normalde flex olması istenirken, sm'den sonra heden'a çekilmesi planlanıyor.
- md'den sonra gelmesi istenen bir özellik ekleniyor.
- Bu özellik buton olarak da yapılabilir, bu konuda kullanıcıya seçenek sunuluyor.
- 1:11:17Kapanış ve Öneriler
- Konuşmacı, yeni sahiplendiği köpeği Monte ile ilgili konuşuyor.
- Gelecek projede Netflix veya Spotify'ın web versiyonu yapılıp React ve Tailwind kullanılarak ilerleyecek.
- İzleyicilerden görüşlerini yazmalarını ve serinin devam etmesi için destek olmalarını istiyor.