Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- 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.
- 00:03Ses Sorunu ve Detay Sayfası Başlangıcı
- Konuşmacı sesinin az geldiği için ekstra mikrofon veya yaka mikrofonu almayı planladığını belirtiyor.
- Detay sayfası yapımına devam edeceklerini söylüyor.
- Header kısmından başlayarak kalem yazısı font size 32 px olarak ayarlanıyor.
- 01:06Text Stil Ayarları
- Text component'ten gelen text'i component'den yükleyerek stillendirmeye geçiliyor.
- Text'in padding'i 16px olarak ayarlanıyor ve rengi textlight olarak belirleniyor.
- Margin top değeri ayarlanarak aranın açılması sağlanıyor.
- 02:42Action Button Komponenti Oluşturma
- Action button adında yeni bir komponent oluşturuluyor.
- Komponent içinde React fonksiyonu çağrılıyor ve button return ediliyor.
- Butonun içine ikon ve text gönderilebileceği şekilde child özelliği kullanılıyor.
- 03:53Action Button Kullanımı
- Oluşturulan action button komponenti detay sayfasında kullanılıyor.
- Butonun içine mor ikon ve text gönderiliyor.
- Butonun flex direction row özelliği ile düzenlemesi yapılıyor.
- 05:02Action Button Stil Ayarları
- Butonun border radius'ı full olarak ayarlanıyor.
- Butonun minimum genişliği tema boyutlarından alınarak ayarlanıyor.
- Butonun içine ikon ve text gönderilebileceği şekilde child özelliği kullanılıyor.
- 06:43Action Button Text Komponenti
- Action button text adında yeni bir komponent oluşturuluyor.
- Bu komponent içinde text component çağrılıyor.
- Action button title adında yeni bir komponent oluşturuluyor ve export ediliyor.
- 08:07Action Button Stil Ayarları
- Butonun rengi textlight olarak ayarlanıyor.
- Butonun arka planı white olarak belirleniyor.
- Butonun shadow değeri ayarlanıyor ve padding değerleri düzenleniyor.
- 12:26İkonlar ve Renk Ayarları
- İkonlar için ikonset adında bir klasör oluşturuluyor.
- İkonlar SVG formatında temizleniyor ve isimlendiriliyor.
- İkonların fill değeri current color olarak ayarlanıyor ve tema renkleriyle uyumlu hale getiriliyor.
- 16:44İkon ve Favori Durumu
- İkonları kullanırken hangi ikonun gönderileceğini belirleyemedikleri için mecburen duplicate etmek zorunda kalıyorlar.
- Favori durumunu göstermek için solid olanı yukarı alıyorlar ve aralarındaki margin'leri ayarlıyorlar.
- Header'ın patlak olması nedeniyle sayfayı yenileyip iOS sürümünü kontrol ediyorlar.
- 20:24Komponent Oluşturma
- Detay açıklama list item komponenti oluşturmak için yeni bir komponent oluşturuyorlar.
- Komponent içinde box, isim ve açıklama bilgilerini göstermek için text komponentlerini kullanıyorlar.
- Komponenti detay sayfasında kullanmak için export ediyorlar.
- 24:29Stil Ayarları
- Komponente font size ve bold özellikleri ekleyerek stil ayarları yapıyorlar.
- Tipografi konusunda sty god çıkmadığı için her komponente özel font ayarlaması yapıyorlar.
- Komponentin içine girinti ve padding değerleri ekleyerek tasarımsal düzenlemeler yapıyorlar.
- 31:35Border Ekleme
- İki komponentin birleşim yerinde arada bir border olması gerektiğini belirtiyorlar.
- Border özelliği için bir property yollayıp, birinci komponente border top with değeri 1 olarak ayarlıyorlar.
- 32:41Border Ekleme ve Düzenleme
- Border geldiğinde bir değer atanıyor ve rengi belirleniyor.
- Border tam kesmediği için, içine bir box daha oluşturuluyor.
- Border için position absolute, left ve top değerleri ayarlanıyor ve genişliği 12 piksel olarak belirleniyor.
- 35:16Scroll View Ekleme
- Daha küçük bir iPhone'da sayfanın scroll olması gerekiyor.
- Header, action button'lar ve açıklama kısmı bir box'ın içine toplanıyor.
- Bu toparlayıcı box'a scroll view özelliği veriliyor.
- 36:44Son Düzenlemeler ve Tamamlama
- Scroll'un içindeki padding en dış safear view'a veriliyor.
- Overflow hidden problemi düzeltiliyor.
- Detay sayfası tamamlanıyor ve sonraki derslerde kaldığı yerden devam edileceği belirtiliyor.