Buradasın
Bootstrap ve CSS Flexbox ile Responsive Header Tasarımı Eğitimi
youtube.com/watch?v=OsFhie5O-I8Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, Bootstrap kütüphanesi ve CSS Flexbox kullanarak responsive bir web sayfası header tasarımı yapmaktadır.
- Videoda, HTML ve CSS kodları yazarak adım adım bir header tasarımı gösterilmektedir. Eğitmen önce temel HTML yapısını oluşturup, ardından Bootstrap class'ları ve CSS Flexbox özellikleri kullanarak logo yerleştirme, menü oluşturma, hover efektleri ekleme ve login alanı tasarımı gibi adımları detaylı olarak anlatmaktadır.
- Eğitimde ayrıca Font Awesome font kütüphanesinin ekleme, arama butonu ve input alanının oluşturulması, gradient arka plan oluşturma ve responsive tasarım için konteyner genişliği ayarlama gibi konular da ele alınmaktadır. Eğitmen, dökümantasyonu sık sık kullanarak class'ların anlamlarını açıklamakta ve flexbox yapısının responsive tasarım için önemini vurgulamaktadır.
- 00:00Projeye Giriş ve Tasarım Hedefleri
- Önceki projede renk ve font ayarları yapılmış, şimdi header kısmının oluşturulması planlanıyor.
- Taslak yapısı üzerinden ilerlenecek ve dökümantasyon sık sık başvurulacak çünkü hazır klasların çoğu hatırlanamıyor.
- Çalışmaların canlı sayfası olacak ve projede body arasındaki tüm içerikler temizlenecek.
- 01:11Header Bölümünün HTML Kodlanması
- Header section için HTML etiketi açılıp, black, py-12, text-gaga-grey, font ve uppercase klaslar eklendi.
- Header içinde bir konteyner div oluşturuldu ve konteyner, flex, items-center ve justify-between klasları eklendi.
- Flex yapısı, içerikleri yatay olarak birbirlerine göre ortalanacak şekilde düzenler ve elemanların birbirine olan uzaklıkları belirler.
- 04:55Flex Yapısının Anlatımı
- Flex class, mümkün olduğu kadar fazla yer kaplamaya çalışır ve içerikleri yatay olarak sıralar.
- Items-center, içerikleri yatay olarak birbirlerine göre sıralar ve en geniş olanın en altına göre uyarlar.
- Klasları daha iyi anlamak için döküman üzerinden arama yapmak, klas ve benzeri klaslara ait kullanımını gösterir.
- 06:38CSS Justify ve Flex Kullanımı
- Justify özelliği içerikleri aralarında mümkün olan en geniş boşluklarla yerleştirir.
- Center, contenti merkeze yanaştırırken, flex kullanarak içeriklerin yan yana yerleştirilmesi sağlanır.
- Flex-1 klası, logoya göre mümkün olan en fazla alanın kullanılmasını sağlar.
- 07:14Header ve Menü Yapısı
- Header konteyneri oluşturuldu ve logoya 16px boşluk bırakıldı.
- Logo için link etiketi kullanıldı ve "Gaga" yazısı klas=6, font-weight=bolt ve text-gaga-grey renkleriyle gösterildi.
- Menü için navigation divi oluşturuldu ve flex, justify-center ve flex-1 klasları kullanıldı.
- 09:36Menü Elemanları ve Hover Efekti
- Menü elemanları için flex, justify-center, text-lg ve space-x-8 klasları kullanıldı.
- Menü elemanları için hover state oluşturuldu ve üzerine geldiğinde text-vega-melon rengine dönmesi sağlandı.
- Hover efektine transition klası eklendi ve 500 milisaniye (yarım saniye) süresi belirlendi.
- 12:38Login Alanı ve Arama Kutusu
- Login alanı için flex, items-center ve space-x-8 klasları kullanıldı.
- Arama kutusu için form oluşturuldu ve sağ border için border-right klası eklendi.
- Input alanına border-bottom, border-tragega-rap ve focus state için outline-none özellikleri eklendi.
- 15:53Font CDN ve Buton Tasarımı
- Projeye Google Fonts CDN linki ekleniyor.
- Arama butonu için Font Awesome class'ları (fas search) kullanılıyor.
- Buton ve input alanı kapsayan bir div'e "group" classı ekleniyor.
- 17:35Hover Efektleri ve Animasyonlar
- Input alanına opacity:0 verilerek alt bordur gizleniyor.
- Grup hover durumunda opacity:1 verilerek alt bordur görünür hale geliyor.
- Transition ve duration:500 değerleriyle animasyon efekti ekleniyor.
- 19:01Buton ve Menü Tasarımı
- Butona negatif marjin (-ml-4) verilerek konumu ayarlanıyor.
- Hover durumunda butonun rengi kırmızıya dönüyor ve transition efekti ekleniyor.
- Menü için "say" div'i oluşturuluyor ve içinde login butonu yerleştiriliyor.
- 21:51Logoda Gradient Etkisi
- Logoya "text" ve "transparant" class'ları ekleniyor.
- Bgt gradient to t class'ı ile sağa doğru gradient efekti oluşturuluyor.
- Renkler kırmızıdan tuga grey'e doğru geçiş yapıyor.
- 23:17Konteyner Genişliği Ayarı
- Konteyner genişliği ayarlamak için tailwind.config.js dosyasına screen konfigürasyonu ekleniyor.
- lg ve xl ekran boyutlarında konteyner genişliği 140 piksel olarak ayarlanıyor.
- Bu değişiklik sayesinde konteynerlar aynı genişliğe sahip hale geliyor.