Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web tasarımı eğitim serisinin bir bölümüdür. Eğitmen, izleyicilere adım adım PSD dosyasının HTML ve CSS'e dönüştürülmesi konusunda rehberlik etmektedir.
- Videoda, temel HTML ve CSS kodlarının nasıl yazılacağı gösterilmektedir. Eğitmen, konteyner ve content klas'larına yıldız işareti kullanarak tüm elementleri seçme, display inline block özelliği verme, metinleri ortala, font boyutu ve rengi ayarlama, harfler arası boşluk ayarlama, paragrafları düzenleme ve ok simgelerini oluşturma gibi CSS özellikleri anlatmaktadır.
- Ayrıca responsive tasarım için genişlik ayarları, marjin/padding kullanımı, "background attachment fixed" özelliğinin işlevi ve dairenin genişliğini ayarlama gibi konular da ele alınmaktadır. Video, bir sonraki derste future bölümünün işleneceği bilgisiyle sonlanmaktadır.
- CSS Temel Kodları
- PSD dosyasının HTML ve CSS dönüştürülmesi dersine hoş geldiniz.
- Konteyner klas'ın altına yıldız (*) kullanılarak tüm elementler seçiliyor ve boxing border özelliği veriliyor.
- Tüm elementlere margin ve padding gibi özellikler verildiğinde, bu özellikleri kullanılan elementin dahil olmasını istiyoruz.
- 01:26Content Klas Özellikleri
- İçerikler content klas içerisinde toplanmış durumda.
- Content klas'a display inline block özelliği verilerek başlık ve logo ile navigation menü arasındaki boşluk oluşturuluyor.
- Content klas'a text-align center özelliği verilerek içerikler ortalanıyor ve margin-top 200 piksel olarak verilerek başlık ile content arasında boşluk oluşturuluyor.
- 03:46H1 Başlığı Özellikleri
- H1 başlığına font-size 72 piksel, font-weight light ve font-color #f1c40f özellikleri veriliyor.
- Tüm başlıklara text-transform uppercase özelliği verilerek tüm başlıklar büyük harflerle gösteriliyor.
- Harfler arası boşluk için letter-spacing 5 piksel özelliği veriliyor ve paragraflar için margin-bottom 40 piksel olarak boşluk oluşturuluyor.
- 08:35Slogan Paragrafı Özellikleri
- Slogan paragrafına main-slogan classı veriliyor ve genişliği %75 olarak ayarlanıyor.
- Slogan paragrafı marjin-zero auto özelliği ile ortalanıyor.
- Tüm paragraflara color #ff600F özelliği verilerek beyaz renk veriliyor.
- 11:11Ok Klas Özellikleri
- Ok klasına genişlik ve yükseklik 100 piksel, border 3 piksel solid ve border-radius 100 piksel özellikleri veriliyor.
- Ok klasının üst ve alt boşlukları 160 piksel, sağ ve sol boşlukları 120 piksel olarak ayarlanıyor.
- Ok klası marjin-zero auto özelliği ile ortalanıyor.
- 14:52CSS Düzenlemeleri
- Index.html'deki angle down class'ı büyütmek için 4x özelliği kullanılıyor.
- CSS ile class ismi alınarak gerekli editlemeler yapılıyor.
- Okun rengi beyaz olarak ayarlanıyor ve dairenin genişliği 5 piksel olarak değiştiriliyor.
- 16:19Tasarım Tamamlama
- Okun rengi tasarımdaki diğer renklerle aynı hale getiriliyor.
- Dairenin yüksekliği 100 piksel olarak ayarlanıyor ve line height 90 piksel olarak değiştiriliyor.
- Okun rengi tekrar beyaz olarak ayarlanıyor ve tasarım tamamlanıyor.
- 18:01Background Attachment Fixed
- Background attachment fixed özelliği, içerikler aşağı yukarı çevrildiğinde arka planın sabit kalmasını sağlıyor.
- Tasarım %100 olarak büyütüldüğünde web sayfası istenilen şekilde görünüyor.
- Bir sonraki derste future bölümü ile devam edilecek.