CSS İle Gerçek Uygulamalar ( Eğitim Videom )

/silindi

Emeğine sağlık, işime yarar bişey buldum

Sadece iyi niyetle tavsiye için yazıyorum. Dikkate alıp almamak size kalmış.
Kapsayıcıya flex özelliği verdiğinizde alt elemanlara flex : 0 0 auto; verdikten sonra width değeri atamanız daha sağlıklı olacaktır.
Header kısmında genişliği sabit olabilecek tek alan logo alanı. Bu alana bir width değeri verip diğerlerini serbest bırakmak gerekebilir.
Sağ kısımda zaten mobile geçtiğinizde yazıları kapatıyorsunuz sol kısımdada bir adet materyal bulunduğu için mobil ekrana düştüğünde logonun genişliğiyle oynamanız yeterli olacaktır.

İkonları svg çıktı almak yerine svg kod çıktısı alıp ekleyebilirsiniz ekstra img'e filter ile renk değişimi kodlarından kurtulmuş olursunuz yada ikon kütüphanelerinden faydalanarak i vb taglar ile statik şekilde koyarak yine css kısmında sadece color özelliğine etki edebilirsiniz.

Emekleriniz için teşekkürler.

@UPRSoft; teşekkürler hocam.
@thealiyasar;
"Kapsayıcıya flex özelliği verdiğinizde alt elemanlara flex : 0 0 auto; verdikten sonra width değeri atamanız daha sağlıklı olacaktır." bunu tam olarak anlamadım örnek olarak yazar mısınız ?

"İkonları svg çıktı almak yerine svg kod çıktısı alıp ekleyebilirsiniz ekstra img'e filter ile renk değişimi kodlarından kurtulmuş olursunuz yada ikon kütüphanelerinden faydalanarak i vb taglar ile statik şekilde koyarak yine css kısmında sadece color özelliğine etki edebilirsiniz." Normalde evet SVG eklenebilir doğru. Amacım şu ama:
1:Büyük projelerde her yere SVG eklenmesi tavsiye edilmez DOM'un şişmemesi için, pagespeed uyarı verir ona. Bu sebeple farklı kullanımları göstermeye çalışıyorum.
İkon eklemenin dediğiniz gibi 4-5 farklı yöntemi var. O yöntemlerede farklı bir videoda değineceğim.
Yeri gelmişken konuyla ilgili yazılarımı da paylaşayım merak eden olursa diye:
https://tasarlab.com/nucleo-ile-font...si-olusturmak/
https://tasarlab.com/htmlde-ikon-ekl...rn-yontemleri/

Teşekkürler hocam yorumunuz için.

Flex özelliğine sahip bir itemin genişlik değerini sabit tutmak için flex : 0 0 auto; width:300px; olarak kullanırsanız boyut kuculdukce sabıt bir width değerine sahıp olacaktır. Anlatmaya çalıştığım şey budyu.

İkon kısmına gelecek olursak ikon kütüphaneleri yeni çıkmayan bir teknoloji lakin sayfa yüklenme hızı ve kullanım kolaylığı için bulunmaz hint kumaşıdır. Diğer yöntemleri gösterip güncel teknoloji olan kütüphanelerin kullanılması daha uygundur bunu anlatmaya çalıştım.

Başarılar dilerim.

@thealiyasar;
Anladım hocam, güzel alternatif tabi. Teşekkürler sizede.