Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Prototurk.com için hazırlanmış bir eğitim içeriğidir. Bir eğitmen tarafından sunulan front-end dersinin bir bölümüdür.
- Videoda, CSS Flexbox kullanarak sosyal platform UI bileşenlerinin nasıl tasarlanacağı adım adım gösterilmektedir. Eğitmen, Google Fonts'tan Mulish fontunu ekleyerek başlayıp, sıfırlama yaparak tasarım sürecini anlatmaktadır. Tasarım, "Front-End Değil" adlı bir site için hazırlanmış olup, komponentler, yazar listesi ve avatarlar gibi bölümlerden oluşmaktadır.
- Video boyunca flexbox özellikleri (display flex, align items, flex wrap, border radius, transition) ve CSS stilleri detaylı olarak açıklanmaktadır. Ayrıca, sosyal platform UI bileşenleri (follow button, like button, location) gibi tasarım elemanlarının nasıl oluşturulacağı da gösterilmektedir.
- Video Planı ve Flexbox Dersi
- Eğitmen, geçen haftadan beri CSS flex videosu hazırlamaya çalıştığını ancak içine sinmeyen videoları kanala atmak istemediğini belirtiyor.
- Hafta sonları ve belki de hafta içi çarşambaları video atmaya karar verdiğini, ancak bu planların her zaman uymayabileceğini söylüyor.
- Uzun zamandır front-end dersi çekmediğini belirterek, üç komponentten oluşan bir tasarımla flexbox dersini anlatacağını açıklıyor.
- 01:33Font ve Temel Sıfırlama
- Google Fonts'tan Mulish fontunu import ederek, regular ve bold versiyonlarını kullanıyor.
- CSS sıfırlama yaparak padding, margin, font family ve box-sizing özellikleri ekliyor.
- Body ve komponentlerin arka plan rengini beyaz olarak ayarlıyor.
- 04:33Komponent Tasarımı
- Komponentlerin genişliğini 500 piksel olarak belirliyor ve h3 etiketlerine padding 30x40 piksel veriyor.
- H3 etiketlerine font size 20, font weight bold ve font family bold özellikleri ekliyor.
- Komponent içindeki text'ler arasında 10 piksel boşluk bırakıyor.
- 06:04Flexbox Kullanımı
- Komponent içindeki text'ler için display flex özelliği kullanarak yan yana yerleştiriyor.
- Text'lere 40 piksel yükseklik, 1 piksel solid border ve flex-wrap özelliği ekliyor.
- Text'lerin margin right'ını 10 piksel, margin bottom'ını 10 piksel olarak ayarlıyor.
- 07:13Text Özellikleri ve Animasyon
- Text'lerin display flex ve align items center özellikleri ile ortalanmasını sağlıyor.
- Text'lere padding 15 piksel, font size 16 piksel, font weight bold ve 5 piksel radius ekliyor.
- Hover durumunda arka plan renginin değişmesi için transition özelliği ekliyor.
- 09:32Yazar Listesi Tasarımı
- Yazar listesi için ul etiketi kullanarak bir liste oluşturuyor.
- Görselleri ve ikonları SVG formatında export ediyor.
- Yazar listesi için padding top 20 piksel ve display flex özelliği kullanarak text'leri yan yana yerleştiriyor.
- 13:10CSS Flexbox Kullanımı
- Image'in genişliği ve yüksekliği 83 piksel olarak ayarlanarak, object-fit-crop özelliği kullanılarak düzgün bir görünüm elde edildi.
- Flexbox kullanılarak öğeler dikey olarak ortalandı ve "margin-right: 15px" ile aralarına 15 piksellik mesafe bırakıldı.
- "Align-items: center" özelliği ile öğeler kendi içinde ortalandı ve "font-size: 18px" ile yazı boyutu belirlendi.
- 15:02Follow Butonu Tasarımı
- "Follow button" sınıfı atanarak, "margin-left: auto" özelliği ile buton sağa doğru ortalanacak şekilde tasarlandı.
- Butonun yüksekliği 40 piksel olarak ayarlandı, "display: flex" ve "align-items: center" ile kendi içinde ortalandı.
- Arka plan rengi, padding, border ve border-radius özellikleri ile butonun görünümü belirlendi.
- 16:24Diğer Butonlar ve Düzenlemeler
- Butonlar arasında 30 piksellik mesafe bırakıldı ve "margin-bottom: 30px" özelliği ile düzenlendi.
- "Not-last-child" özelliği kullanılarak son öğenin margin-bottom değeri sıfırlandı.
- "Published" yazısı için "time" etiketi kullanılarak font-size: 16px ve renk ayarları yapıldı.
- 18:20Project Actions Bölümü
- "Project actions" bölümünde her birliğe image'ler eklendi ve "display: flex" özelliği ile düzenlendi.
- "Justify-content: space-around" özelliği ile öğelerin arası ve başlangıç-bitişteki öğelerin yarısı kadar mesafe bırakıldı.
- "Align-items: center" ile öğeler kendi içinde ortalandı ve "margin-right: 10px" ile aralarına mesafe bırakıldı.
- 21:50Like Butonu ve Genel Düzenlemeler
- "Like button" sınıfı atanarak, "margin-left: auto" özelliği ile buton sağa doğru ortalanacak şekilde tasarlandı.
- "Inline-flex" özelliği ile buton kendi içinde uzamasın ve "padding-bottom: 25px" ile düzenlendi.
- Body'e "display: flex", "flex-wrap: wrap" ve "justify-content: center" özellikleri verilerek tüm sayfa ortalanacak şekilde düzenlendi.
- 25:09Son Düzenlemeler ve Kapanış
- Body'e 500x500 piksel boyutunda bir arka plan eklendi ve "position: absolute" ile konumlandırıldı.
- "Box-shadow" özelliği ile arka plana gölge eklendi.
- "width: 500px" ve "min-width: 500px" özellikleri ile ekranın minimum genişliği 500 piksel olarak belirlendi.