Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı Codelater.com için şarkı sözleri paylaşım teması oluşturma sürecini adım adım göstermektedir.
- Videoda, temel HTML ve CSS bilgileri kullanılarak bir şarkı sözleri paylaşım sitesi tasarımı anlatılmaktadır. İçerik, klasör oluşturma, yazı tipi ve ikon ekleme, CSS reset yapma, banner tasarımı ve üst menü tasarımı gibi aşamaları kapsamaktadır. Ayrıca Wix platformunda banner tasarımı, a etiketlerine müdahale ederek renk ve yazı boyutu ayarları, menü konumunu düzenleme, hashtag alanı, arama formu, önerilen aramalar ve reklam alanı gibi banner içeriğini oluşturma konuları ele alınmaktadır.
- Video yaklaşık 28 dakika sürmekte ve bir sonraki videoda şarkıların listeleneceği alt kısmın tasarlanacağı belirtilmektedir. Konuşmacı, Bootstrap yerine standart HTML bilgisiyle bu temayı oluşturabileceğini belirterek, izleyicilerin daha kolay takip edebilmesini sağlamaktadır.
- 00:01Giriş ve Proje Tanıtımı
- Codelater.com için hazırlanan bu videoda şarkı söz paylaşım teması yapılacak.
- Instagram sayfası "instagram.com/kodla" üzerinden paylaşımlar görülebilir.
- Olumlu yorumlar alınırsa daha sonra bu tema script olarak da yapılacak.
- 00:38Dosya Yapısı Oluşturma
- "Şarkı Sözleri" adında bir klasör oluşturuluyor.
- Klasör içinde "stil" klasörü, "index.html" ve "custom.css" dosyaları oluşturuluyor.
- Zen Coding++ adlı plugin kullanılarak HTML kodları otomatik tamamlanıyor.
- 01:56Yazı Tipi ve İkonlar
- Yazı tipi olarak Titilum Web kullanılıyor.
- İkonlar için bir kaynak seçiliyor.
- CSS reset kodları ekleniyor.
- 03:18Menü Yapısı
- Bootstrap yerine standart HTML bilgisiyle menü oluşturulacak.
- Container div'i oluşturuluyor.
- Banner için 1920x300 piksel boyutunda bir fotoğraf seçiliyor.
- 07:33Menü İçeriği ve Stil
- Menüde "Ana Sayfa", "Son Eklenenler", "Popüler Olanlar" ve "İletişim" seçenekleri olacak.
- Header'a absolute pozisyon veriliyor.
- Logo için beyaz renk, 9 piksel font boyutu ve alt çizgi kaldırılıyor.
- 10:51Menü Düzenlemesi
- Üst menüde bloodwrite yazı tipi kullanılıyor.
- Ul'den padding ve margin sıfırlanıyor.
- Ul inline grok olarak ayarlanarak yan yana gelmesi sağlanıyor.
- 11:34A Etiketi ve Menü Düzenlemesi
- A etiketinin rengi beyaz text olarak ayarlanıyor ve altındaki çizgi kaldırılıyor.
- Menü logoyla aynı hizaya getiriliyor ve header'a üstten 10 piksel boşluk veriliyor.
- Menü kolunun rengi değiştiriliyor.
- 13:38Hashtag Alanı Oluşturma
- Hashtag etiketi için bir ikon ekleniyor ve "banner üstü" adında bir div oluşturuluyor.
- Hashtag alanı için pozisyon absolute bottom kullanılıyor ve banner'ın içine yerleştiriliyor.
- Hashtag alanı için text center, beyaz renk ve font size 30 piksel olarak ayarlanıyor.
- 16:20Arama Formu Oluşturma
- Form alanı için bir input search ekleniyor ve placeholder'a "şarkı veya sanatçı ara" yazısı veriliyor.
- Form alanına buton ekleniyor ve üzerine ikon atanıyor.
- Form alanına margin top ve bottom 10 piksel boşluk veriliyor.
- 19:50Arama Butonu Stil Ayarları
- Arama butonuna width, padding 10 piksel, beyaz arka plan ve şeffaflık veriliyor.
- Butona border, border radius 5 piksel ve font size 16 piksel olarak ayarlanıyor.
- Butonun üzerine gelince cursor pointer özelliği ekleniyor.
- 22:02Önerilen Aramalar Bölümü
- Önerilen aramalar bölümü için bir div oluşturuluyor ve text center yapılıyor.
- Önerilen aramalar için li elemanları inline block olarak ayarlanıyor.
- A etiketlerine beyaz renk veriliyor ve ul'ye margin left -10 piksel ve font size 600 piksel olarak ayarlanıyor.
- 25:54Reklam Alanı Oluşturma
- Reklam alanı için bir div oluşturuluyor ve 970x250 piksel boyutunda ayarlanıyor.
- Reklam alanı için arka plan rengi veriliyor ve ortada yerleştiriliyor.
- Reklam alanına üstten ve alttan 20 piksellik boşluk veriliyor.