Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir web tasarım eğitim serisinin ilk bölümüdür. Eğitmen, izleyicilere mobil uyumlu web sayfaları oluşturma konusunda bilgi vermektedir.
- Video, mobil uyumlu web sayfaları oluşturma eğitim setinin tanıtımıyla başlıyor. Eğitmen, Bootstrap kütüphanesi, Font Awesome ve Al Karusel gibi araçların kullanımını anlatıyor. Eğitim seti boyunca bir web sayfası kodlanacak ve bu sayfa mobil ve tablet cihazlarda farklı görünümler sunacak. Video, Bootstrap kütüphanesinin temel bileşenlerini (row, container, col) ve bunların mobil uyumluluğu sağlama mekanizmasını teorik olarak açıklıyor.
- 00:11Eğitim Seti Tanıtımı
- Bu eğitim seti boyunca mobile uyumlu web sayfaları oluşturmayı öğreneceksiniz.
- Bootstrap kütüphanesi ve Font Awesome hakkında bilgi edineceksiniz.
- Eğitim seti boyunca mobil uyumlu web sayfaları kodlamayı öğreneceksiniz.
- 00:41Mobile Uyumlu Web Sayfaları
- Mobile uyumlu web sayfaları, tablet ve mobil cihazlarda farklı görünümlerle kullanıcıların hoşuna giden, Google SEO açısından önemli bir tasarım türüdür.
- Günümüz web sitelerinin çoğu mobil uyumlu şekilde kodlanmaktadır.
- Mobile uyumlu yaparken vazgeçilmez Bootstrap kütüphanesi kullanılmaktadır.
- 01:28Bootstrap Kütüphanesi
- Bootstrap, gelişmiş bir CSS framework'üdür ve mobile uyumlu web sayfaları kodlarken kullanılır.
- Bootstrap sadece mobil için değil, büyük JavaScript dosyaları yerine ufak kodlarla istenen işlevleri elde etmek için de kullanılır.
- Bu eğitim seti boyunca Font Awesome'dan da yararlanılacaktır.
- 02:20Font Awesome ve Al Karusel
- Font Awesome, web sayfalarında kullanılan ikonları barındıran bir kütüphanedir.
- Bu kütüphaneden indirilen ikonlar web sayfasına çekilerek hem görüntü açısından hem de sayfanın açılış hızını etkileyen resimler yerine kullanılabilir.
- Al Karusel slider kullanırken de bu kütüphaneden yararlanılacaktır.
- 03:26Web Sayfası Tasarımı
- Eğitim seti boyunca kodlanacak web sayfasında header, logo, menü, telefon konumu ve arama ekranı bulunmaktadır.
- Ana sayfada slider, sosyal medya alanı, resim başlık içerik düzeni ve son eklenen yazılar bölümü yer alacaktır.
- Footer kısmında ufak bir form bulunmaktadır.
- 04:56Bootstrap Yapısı
- Bootstrap kütüphanesinde en çok kullanılan yapı "col" yapısıdır.
- Bootstrap'ta class yapısı, divlere önceden yazılmış sınıflarla eşleştirilerek stillerini verir.
- Bootstrap'ta "row" (satır) ve "container" (kapsayıcı) sınıfları da önemli yapı taşlarıdır.
- 07:00Row ve Container Yapısı
- Sayfanın en geniş alanı "row" (satır) olarak adlandırılır ve sayfanın tamamını kaplar.
- "Container" sınıfı, 1200 piksel genişliğinde bir alan oluşturur ve bu alan 12 parçaya bölünür.
- "col" yapısı, bu 12 parçayı kullanarak içeriklerin yerleştirilmesini sağlar.
- 09:27Col Yapısı Kullanımı
- "col" yapısı, içeriklerin mobil cihazlarda alt alta veya üst üste yerleştirilmesini sağlar.
- Sayfayı küçülttüğümüzde veya tablet moduna geçtiğimizde, Bootstrap sayesinde içerikler otomatik olarak düzenlenir.
- Bu yapı, mobile uyumlu web sayfaları yaparken çok yardımcı olur.