Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Emre Sayın tarafından sunulan bir web geliştirme eğitim içeriğidir. Eğitmen, izleyicilere Bootstrap kütüphanesi kullanarak ücretsiz web sitesi oluşturma sürecini adım adım göstermektedir.
- Video, COVID-19 döneminde internet üzerinden iş yapmak isteyenler için hazırlanmış olup, MDB Bootstrap'ın indirilmesi, favicon ekleme, menü linkleri oluşturma, "Neden bizi tercih etmelisiniz" bölümü eklemesi, kartlar, iletişim ve footer oluşturma gibi konuları kapsamaktadır. Eğitmen, Atom code editörü kullanarak örnek bir web sitesi oluşturarak HTML ve CSS kodlarını göstererek pratik bilgiler sunmaktadır.
- Eğitimde ayrıca ızgara grid sistemi kullanarak sayfanın düzenini ayarlamak, butonlar eklemek, footer kısmında iletişim bilgilerini düzenlemek ve yukarı çık butonu eklemek gibi konular ele alınmaktadır. Eğitmen, ileride HTML ve CSS konularında daha detaylı videolar atılacağını da belirtmektedir.
- 00:01Web Sitesi Kurma Tanıtımı
- Videoda ücretsiz bir şekilde web sitesi nasıl kurulacağı gösterilecek.
- Bootstrap aracılığıyla site kurulacağı için az buçuk HTML ve CSS bilgisi yeterli olacak.
- Corona pandemi nedeniyle satış yapmak isteyenlerin ve blog yazanların internet üzerinden işlerini sürdürmek için siteye ihtiyaç duydukları belirtiliyor.
- 01:16Örnek Site Gösterimi
- Örnek site intro kısmı, neden bizi tercih etmelisiniz kısmı, örnek projeler, kartlar, iletişim ve linkler kısımlarından oluşuyor.
- Site ayrıca makaleler ve videolar içeren içerikler içeriyor.
- Site içerisinde ana sayfaya, makalelere ve diğer sayfalara bağlantılar bulunuyor.
- 02:42MDB Bootstrap Kurulumu
- MDB Bootstrap sitesinden "getting started" kısmından zip dosyası indiriliyor.
- İndirilen dosya yeni bir klasöre çıkartılıyor ve gerekli CSS dosyaları korunuyor.
- Ek dosyalar olarak isim logosu, arka plan intro fotoğrafı ve örnek projeler hazırlanıyor.
- 04:45Site Düzenlemeleri
- Atom code editörü kullanılarak site düzenleniyor.
- Dil ayarı Türkçe olarak değiştiriliyor ve başlık "Örnek Site" olarak ayarlanıyor.
- Favicon (site ikonu) ek dosyalardan alınarak siteye ekleniyor.
- 07:25Intro Kısmı Ekleme
- MDB Bootstrap sitesinden intro kısmı seçilerek HTML ve CSS kodları kopyalanıyor.
- Kopyalanan kodlar siteye ekleniyor ve intro kısmı görüntüleniyor.
- Intro kısmındaki yazılar kalınlaştırılıyor ve renkleri değiştiriliyor.
- 13:34Menü Düzenlemeleri
- MDB kısmında yer alan yazı "Emre Sayın" olarak değiştiriliyor.
- Menüde "Makaleler" ve "Hakkımda" bağlantıları ekleniyor.
- Bağlantıların linkleri "makaleler.html" ve "hakkimda.html" olarak belirleniyor.
- 17:06Neden Bizi Tercih Etmelisiniz Kısmı
- MDB Bootstrap'tan "neden bizi tercih etmelisiniz" kısmının kodları kopyalanıyor.
- Kopyalanan kodlar siteye ekleniyor ve düzenleniyor.
- İkonlar değiştirilebiliyor ve renkleri ayarlanabiliyor.
- 24:36Örnek Projeler Kısmı Oluşturma
- Örnek projeler kısmı için image seçeneği kullanılıyor.
- JavaScript kodları script etiketi içine ekleniyor.
- Örnek projeler için container oluşturuluyor ve grid sistemine göre düzenleniyor.
- 30:37Resim Ekleme ve Düzenleme
- Resimler farklı bir sekmede açılması için target="_blank" komutu kullanılıyor.
- Resimler için linkler ekleniyor ve alt yazılarda resim dosyaları belirtiliyor.
- Resimler tıklandığında 1600x1070 boyutunda açılıyor.
- 35:27Kartlar ve Başlıklar Ekleme
- Kartlar component kısmından alınıp container içine yerleştiriliyor.
- Kartlar grid sistemine göre düzenleniyor ve her kartın üstüne col-md-3 classı ekleniyor.
- Başlıklar için h2 etiketi kullanılarak "Örnek Projeler" ve "Göz Atın" başlıkları ekleniyor.
- 41:03İletişim ve Footer Kısmı
- İletişim kısmı için section etiketi kullanılıyor ve container içine alınıyor.
- Footer kısmı navigation kısmından alınıp site boyunca genişletilmiş şekilde ekleniyor.
- Footer'daki sosyal medya linkleri değiştirilebiliyor ve kendi linkleriniz eklenerek tıklanıldığında farklı sekmede açılması sağlanıyor.
- 48:17Sayfa Düzenlemeleri
- İletişim kısmında "smile" yerine "iletisim" yazısı değiştirildi.
- Sayfaya "yukarı çık" butonu eklendi, bunun için ikon kullanıldı ve mor renkte gösterildi.
- Buton sağ tarafa yerleştirildi ve "a" etiketi ile link verilerek sayfanın üst kısmına çıkma özelliği sağlandı.
- 52:46Makale Sayfası Oluşturma
- Makaleler için ayrı bir sayfa (makaleler.html) oluşturuldu.
- Makale sayfasında intro kısmından iletişim kısmına kadar olan içerikler silindi.
- Makale sayfasında "section" etiketi kullanılarak makaleler eklendi ve linkleri ana sayfaya yönlendirildi.
- 56:23Daha Fazla Bilgi ve Kapanış
- HTML ve CSS ile ilgili baştan eğitim videoları paylaşılacağı belirtildi.
- Kanal takibi ve destek istenildi.
- Kişisel site örneği gösterildi ve domain-hosting alımı için farklı bir video yapılacağı belirtildi.