Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, The Codefather tarafından sunulan "Yap-İşlet-Devret" web tasarım serisinin bir bölümüdür. Eğitmen, daha önce Figma kullanarak tasarladığı hayali bir kayak merkezi sitesinin front-end kodlarını yazmaya başlıyor.
- Video, web sitesinin ana iskeletinin belirlenmesiyle başlıyor ve Visual Code kullanarak klasör mimarisi oluşturma sürecini gösteriyor. Eğitmen, dinamik ve statik içerik dosyalarını ayırmak için "assets" klasörü oluşturuyor, Google Fonts'tan fontları ve Fon Tasm'dan ikonları ekliyor. Video, bir sonraki bölümde içerik kodlamaya başlanacağını belirterek sona eriyor.
- Web Tasarım Serisi Tanıtımı
- The Codefather ile "Yap-İşlet-Devret" web tasarım serisinin yeni bir bölümüne hoş geldiniz.
- Bu video serisinde daha önce sıfırdan tasarlanan web sitesinin HTML, CSS ve JavaScript kodları (front-end kısmı) yazılacak.
- Daha önce Figma kullanarak hayali bir kayak merkezi sitesi tasarlanmış ve bu tasarım serisinin videolarına sağ üstteki karttan ulaşılabilir.
- 00:53Sitenin Ana İskeleti
- Kodu yazmaya başlamadan önce sitenin ana iskeletinin belirlenmesi gerekiyor.
- Sitenin ana bölümleri: header (top/navbar), slider, welcome, action, harita, footer ve copyright.
- Header bölümünde menü ve logo, slider bölümünde resimlerin kayarak geçtiği veya değiştiği bir bölüm olacak.
- 02:34Visual Code Kurulumu
- Seri programlanırken Visual Code kullanılacak ve Visual Code programının kurulumu ile Live Server eklentisinin kurulumu ile ilgili video sağ üstteki karttan bulunabilir.
- Visual Code klasör modunda açılmalı, alttaki bar mor renkte ise dosya modunda, mavi renkte ise klasör modunda demektir.
- Proje klasörünün içerisine "site" adında yeni bir klasör oluşturulmalı ve tüm kodlar bu klasörün içerisinde olmalı.
- 04:01Klasör Mimarisi
- Web sitenin iki türde dosyası olur: dinamik içerik dosyaları (HTML, resimler, videolar) ve statik içerik dosyaları (stil dosyaları, JavaScript dosyaları, logo, ikonlar).
- Klasör mimarisi için "assets" adında yeni bir klasör oluşturulmalı.
- Assets klasörünün içerisine "style.css" ve "script.js" klasörleri oluşturulmalı.
- 06:03Dosya Bağlantıları ve Live Server
- HTML dosyasında head kısmında link ile assets klasöründen style.css dosyası bağlanmalı.
- Body'nin en sonuna script ile assets klasöründen script.js dosyası bağlanmalı.
- Command+Shift+C (Windows'ta) ve Ctrl+Shift+F (Mac'te) tuşlarına basıp "Live Server Open with Live Server" komutu verilerek dosya çalıştırılabilir.
- 07:03Figma'dan Veri Aktarımı
- Figma'da kullanılan SVG formatında logo dosyası proje klasörünün içerisinde "logo.svg" adıyla kayıtlı.
- Figma'da bölümlere ayrılmış olan header, slider, welcome, action, map, footer ve copyright bölümleri HTML'de de bulunacak.
- Her bölümün yüksekliği not alınmalı: header 100 piksel, slider 800 piksel, welcome 600 piksel, action 600 piksel, harita 500 piksel, footer 400 piksel, copyright 100 piksel.
- 10:07Font ve İkon Ekleme
- Figma'da kullanılan "Work Sans" isimli font Google Fonts'tan indirilmeli.
- Google Fonts'tan indirilen fontun linkleri HTML'de CSS linkinin üstüne yapıştırılmalı.
- İkonlar için "fontawesome" CDN'si indirilmeli ve HTML'de "i" elementi kullanılarak ikonlar eklenmeli.