Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bilgisayar mühendisi ve yazılım geliştiricisi Ali Onur Geve tarafından sunulan bir eğitim içeriğidir.
- Video, giriş seviyesinde HTML, CSS ve GitHub bilgisi olan kişiler için internet sitesi kurma sürecini adım adım göstermektedir. İçerikte GitHub hesabı oluşturma, repository oluşturma, Visual Studio Code kullanarak index.html dosyası oluşturma, meta tag'ları, viewport ayarları, CSS dosyası oluşturma ve sosyal medya butonları ekleme gibi temel web geliştirme işlemleri anlatılmaktadır.
- Eğitim ayrıca butonlara arka plan rengi verme, hover efekti ekleme, responsive tasarım yapma ve linklerin yeni tab'da açılmasını sağlama gibi CSS özellikleri de kapsamaktadır. Video, oluşturulan web sitesinin GitHub'a yüklenmesi ve GitHub Pages üzerinden online olarak erişilebilir hale getirilmesi ile sonlanmaktadır.
- 00:00İnternet Sitesi Kurma İçin Gerekli Malzemeler
- Videoda HTML, CSS ve GitHub Pages kullanarak internet sitesi nasıl kurulur sorusuna çözüm sunulacak.
- İnternet sitesi kurmak için giriş seviyesinde HTML, CSS, Git ve GitHub bilgisi gerekiyor.
- Kodları yazmak için bir text editör (örneğin Visual Studio Code) kullanılmalı.
- 00:47GitHub Hesabı Oluşturma
- İnternet sitesini host etmek için bir GitHub hesabı gerekiyor.
- GitHub'da yeni bir repository oluşturup, ismini kullanıcı adı.github.io şeklinde belirtmek gerekiyor.
- Repository oluşturulduktan sonra GitHub Pages'i etkinleştirmek için ayarlar kısmından "Enable GitHub Pages" seçeneği kullanılmalı.
- 02:42Kod Yazma Hazırlığı
- Repository'yi kendi bilgisayara çekmek için GitHub Desktop uygulaması kullanılabilir.
- Visual Studio Code gibi bir text editörde repository açılıp, içine index.html dosyası oluşturulmalı.
- HTML dosyasında meta charset, viewport ve title etiketleri eklenerek başlangıç ayarları yapılmalı.
- 06:04Web Sitesi İçeriği Oluşturma
- Web sitesinin gövdesi için bir div (bölüm) oluşturulmalı.
- Div içine isim ve meslek açıklaması gibi içerikler eklenebilir.
- CSS dosyası oluşturulup, div'in ortalanması ve responsive yapısı için stil ayarları yapılmalı.
- 08:53Sosyal Medya Butonları Ekleme
- Sosyal medya butonlarını tutacak yeni bir div oluşturulmalı.
- Butonlar için link ve class özellikleri eklenerek GitHub'dan import edilen fontlar kullanılabilir.
- Butonların görünümü için CSS ile şekilleri, renkleri ve konumları düzenlenebilir.
- 10:26Web Sitesi Tasarımına Ek Özellikler
- Butonların araları açılıp, marjinleri ve büyüklükleri değiştirildi.
- Butonlara arka plan rengi vermek için CSS dosyasına "background body" özelliği eklendi.
- Hover özelliği kullanılarak butonlara üzerine geldiğinde farklı görünüm kazandıran bir etki eklendi.
- 11:24Web Sitesinin Düzenlenmesi
- CSS dosyasına background özelliği eklendi ve imajın ismi belirtildi.
- Yazı rengi siyahdan beyaza değiştirildi.
- Linklere "opener no refer" özelliği eklendi, böylece tıklanınca yeni bir sekmede açılacaklar.
- 12:51Web Sitesinin Online Yapılması
- Web sitesinin kodları GitHub'a gönderildi.
- GitHub Pages özelliği kullanılarak web sitesi online olarak sunuldu.
- Web sitesi artık internet üzerinden erişilebilir hale geldi.