Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web tasarım eğitimidir. Eğitmen, Bootstrap ve CSS kullanarak mobil uyumlu bir web sayfası tasarımı yapmayı adım adım göstermektedir.
- Video, iki ana bölümden oluşmaktadır. İlk bölümde kaybolan navbar toggler ikonunun bulunması ve yeniden eklenmesi, menü öğelerinin mobil cihazlarda nasıl görüneceği için media screen özellikleri kullanılarak ayarlanması anlatılmaktadır. İkinci bölümde ise navbar'ın işi bittikten sonra alt kısmın tasarımı gösterilmekte, konteyner ve row class'ları kullanılarak düzen oluşturulmakta, logo ve yazılar yerleştirilmekte ve flexbox özellikleri kullanılarak responsive tasarım yapılmaktadır.
- Eğitim boyunca Bootstrap'in temel özellikleri, CSS ile mobil uyumluluk sağlama teknikleri, menü öğelerinin üzerine gelindiğinde arka plan rengi değiştirme, boşlukları temizleme ve menü öğelerinin sağa kayması gibi özelliklerin nasıl uygulanacağı detaylı olarak gösterilmektedir.
- 00:17Navbar Toggler İkonunu Bulma
- Mobil oyunda navbar toggler ikonunun kaybolduğu belirtiliyor.
- Navbar toggler ikonu, navbar light ve navbar dark altında bulunan özel bir yapıya sahip.
- Navbar light bg lite olayının silinmesi nedeniyle bootstrap'ten bir şey getirilemiyor.
- 01:25Navbar Toggler İkonunu Ekleme
- Kendi stilimizde navbar toggler ikona arka plan vermek gerekiyor.
- Bootstrap'in ikon sayfasından hamburger menü ikonu kopyalanıp kendi siteye yapıştırılıyor.
- İkonun rengi RGB şeklinde ayarlanarak beyaz renge dönüştürülüyor.
- 04:00Mobil Uyumlu Menü Oluşturma
- Menüyü mobil uyumlu hale çevirmek için medya ekranları (media screen) kullanılıyor.
- Breakpoint'lerde medium cihazlarda 768 piksel, large cihazlarda 992 piksel olarak belirtiliyor.
- Media screen özelliği ile maksimum genişlik 992 pikselin altına düştüğünde ayraç elemanının display none olarak ayarlanması sağlanıyor.
- 06:39Menü Stilini Düzenleme
- Menü öğelerine üzerine geldiğinde arka plan rengi siyah olarak ayarlanıyor.
- Container'ın iç boşlukları (padding) temizlenerek menü öğelerinin üzerine geldiğinde tam olarak görünmesi sağlanıyor.
- Menü öğelerine padding 2 verilerek menü daha hoş duruyor ve daha büyük görünüyor.
- 10:36Mobil Uyumluluk ve Alt Kısım Tasarımı
- Mobil uyumluluğu tamamladıktan sonra alt kısma geçildi.
- Üst kısımda 100 BH değeri bulunuyor ve navbar işi bitirildiği için now kapatıldı.
- Alt kısımda konteyner açılarak row ve col md-12 class'ları kullanıldı.
- 11:39Logo ve Metin Ekleme
- Resimlerin altında logo eklendi ve img-fluid class'ı verildi.
- H1 class'ına display-2 ve text-center class'ları eklendi.
- "Yenilikçi ve trend tasarımlar" yazısı eklendi ve text-white class'ı ile beyaz renge getirildi.
- 13:24Alt Kısım Düzenleme
- "Sadeliği seviyoruz" yazısı eklendi ve h2 class'ına display-3, text-center ve text-white class'ları verildi.
- Tüm öğeleri alt alta dizmek için flex-direction flex-column kullanıldı.
- Logo için align-items-center ve justify-content center class'ları eklendi.
- 15:07Stil Ayarları
- Üst kısımda boşluk için margin-top 100 piksel değeri verildi.
- Alt kısımda margin-bottom 4 piksel değeri eklendi.
- Yazılara font-weight bold ve shadow class'ları eklendi.
- 17:03Sonuç ve Gelecek Adımlar
- Tasarım başarılı bir şekilde tamamlandı ve küçültüldüğünde sorun yaşanmadı.
- Ön kısım tasarımı tamamlandı ve aşağı doğru devam edilecek.