• Buradasın

    Bootstrap ile Mobil Uyumlu Olmayan Web Sitesi Tasarımı Eğitimi

    youtube.com/watch?v=-5J8tqxKLNY

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, Bootstrap kullanarak mobil uyumlu olmayan bir web sitesinin tasarımını adım adım göstermektedir.
    • Videoda, web sitesinin alt kısmının tasarımı anlatılmaktadır. İlk olarak konteyner ve row-col yapısı oluşturulup, Font Awesome'dan ikonlar kullanılarak bir paragraf ve buton eklenmektedir. Ardından "Hizmetlerimiz" bölümünün nasıl oluşturulacağı gösterilmekte, her bir hizmet için resim ve metin ekleme, yazı formatlama ve boşluk ayarları yapılmaktadır.
    • Eğitim, flexbox yapısı kullanarak öğeleri yan yana düzenleme, class'lar vererek tasarım biçimlendirme ve padding, margin gibi CSS özellikleri uygulama gibi teknik detayları içermektedir. Video sonunda, bir sonraki derste "Hakkımızda" bölümünün yapılacağı belirtilmektedir.
    00:17Mobil Uyumlu Olmayan Sitede Tasarım Başlangıcı
    • Mobil uyumlu olmayan sitede menü ve tasarım kısmının tasarımına başlanıyor.
    • Üst kısımla ilgili işler bittiği için alt tarafa geçilerek yeni bir konteyner oluşturuluyor.
    • Row ve col kullanılarak md-12'lik bir yapı oluşturuluyor.
    01:39Font Awesome Kullanımı
    • Tasarımda tırnak işaretleri ve ikonlar için Font Awesome kullanılacak.
    • Font Awesome CDN linki stil dosyasına ekleniyor.
    • Font Awesome sitesinden ikonlar aratılarak tasarıma dahil ediliyor.
    03:02HTML ve CSS ile Tasarım
    • Tasarımda bir paragraf ve bir buton bulunuyor.
    • Butona "btn btn btn-warning" class'ı veriliyor.
    • İkonlar için "kota left" kullanılıyor ve flex yapısı ile yan yana yerleştiriliyor.
    05:23Flex Yapısı ve Düzenleme
    • Justify-content-around özelliği ile öğeler aynı satırda birbirine yakın duruyor.
    • Align-items-center özelliği ile dikeyde ortalanıyor.
    • Paragrafa "imza" class'ı veriliyor ve span etiketi ile özel düzenlemeler yapılıyor.
    08:20Stil Uygulamaları
    • Her öğe için ayrı class'lar oluşturuluyor.
    • Teklif al kısmına yükseklik değeri veriliyor ve tırnakların rengi, font size'ı ve font weight'i ayarlanıyor.
    • İmza kısmına font size'ı 20 piksel olarak ayarlanıyor ve padding değeri ile ferah bir görüntü elde ediliyor.
    12:44Hizmetler Kısmının Tasarımı
    • Hizmetler kısmı için container class'ı kullanılıyor.
    • "Hizmetlerimiz" yazısı için h3 class'ı ve display: column özelliği kullanılıyor.
    • Yazılar tam ortaya getiriliyor ve background color'ı ayarlanıyor.
    14:22HTML ve CSS ile Hizmetlerimiz Kısmının Oluşturulması
    • Nokta col.md sınıfı kullanılarak 12 birimlik yer 3'er 3'er bölünüyor.
    • Resimlerin altında img flud sınıfı verilerek responsive tasarım sağlanıyor.
    • Konteyner kullanılarak iç boşluklar ayarlanıyor ve margin-top 5 değeri verilerek daha ferah bir görünüm elde ediliyor.
    16:03Yazı ve Resim Ekleme
    • İmaj src'nin altında p tag'ı açılarak "Web Tasarımı" yazısı ve lorem text ekleniyor.
    • Yazı stilini ayarlamak için text-color black-50, font-weight bold ve margin-top 2 değerleri kullanılıyor.
    • Tüm yazıların ortalanması için row veya konteyner'a text-center sınıfı veriliyor.
    17:44Diğer Hizmetlerin Oluşturulması
    • Diğer hizmetler için sadece resim ve yazı değiştiriliyor.
    • Geliştirme, grafik tasarım ve e-ticaret başlıkları için ilgili resimler ve yazılar ekleniyor.
    • Her hizmetin altına margin-bottom 3 değeri verilerek alt boşluk oluşturuluyor.
    19:36Sonuç ve Gelecek Ders
    • Tasarım mobil uyumunda bazı ufak sıkıntılar var ancak bunlar için ayrı bir ders çekilecek.
    • Bir sonraki videoda "Biz Kimiz" ve diğer kısımlar yapılacak.
    • Ders detaylı bir şekilde tek tek kodlar yazarak gerçekleştiriliyor.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor