Bu video, bir eğitmen tarafından sunulan web sitesi tasarımı ve CSS kullanımı eğitim içeriğidir. Eğitmen, Frontend Mentor tarafından sunulan bir web sitesi projesini adım adım göstermektedir.. Video, grid ve flexbox kullanarak basit bir web sitesi tasarımı sürecini kapsamaktadır. Eğitim, temel yapılandırma ve reset CSS ile başlayıp, header, main alan, sidebar ve bottom news bölümlerinin HTML ve CSS ile oluşturulması, mobil tasarım için media breakpoint kullanımı ve son olarak hamburger menüsünün JavaScript ile nasıl oluşturulacağı konularını içermektedir.. Eğitim boyunca CSS seçicileri, flexbox özellikleri, responsive tasarım teknikleri ve CSS kodlarının optimize edilmesi gibi konular detaylı olarak anlatılmaktadır. Ayrıca, web geliştirme için temel CSS ayarları, renk ve yazı tipi seçimi, padding, margin gibi özelliklerin kullanımı ve accessibility konularına da değinilmektedir.
Margin auto works for block-level images with width less than 100%. Display flex with justify-content: center centers flex children horizontally. Text-align: center centers images when container is block-level. Position absolute with calc/transform moves image horizontally
Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından CSS Flexbox konusuna giriş yapılmaktadır.. Videoda Flexbox'ın ne olduğu, temel kavramları ve kullanım alanları anlatılmaktadır. Eğitmen, Flexbox'ın "esnek kutu modeli" olarak tanımlandığını, konteyner ve flex item kavramlarını açıklamakta ve bu modelin modern web tasarımlarında float yerine tercih edildiğini belirtmektedir. Ayrıca main axis ve cross axis gibi temel terimler tanıtılmakta ve bir sonraki derste bu özelliklerin detaylı olarak ele alınacağı ifade edilmektedir.
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, Photoshop'ta tasarlanan bir web sayfasının HTML ve CSS kodlarıyla nasıl oluşturulacağını adım adım göstermektedir.. Video, CSS'de resimli menü yapımı konusunu ele almaktadır. İçerikte, klasör yapısının oluşturulması, Visual Studio Code editörünün kullanımı, HTML ve CSS dosyalarının oluşturulması ve düzenlenmesi anlatılmaktadır. Eğitmen, Spotify örneği üzerinden konteyner oluşturma, logo ve banner ekleme, butonların tıklanabilir hale getirilmesi ve flexbox özellikleri kullanarak butonların hizalanmasını göstermektedir.. Eğitim, bir sonraki derste menünün animasyonla hareketlendirileceğini belirterek sona ermektedir. Video boyunca Photoshop'tan görselleri dışa aktarma, HTML'de div ve image etiketleri kullanma, CSS ile boşluk ayarlama ve liste yapıları ile menü oluşturma gibi temel web geliştirme teknikleri detaylı olarak açıklanmaktadır.
Bu video, Emir adlı bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, izleyicilerin isteği üzerine responsive web tasarımı konusunu ele almaktadır.. Videoda, daha önce oluşturulan scroll animasyonlu bir web sitesinin mobil görünümüne dönüştürülmesi adım adım gösterilmektedir. Eğitmen, Visual Studio Code kullanarak CSS kodlarını düzenleyerek web sitesinin mobil cihazlarda daha iyi görünmesini sağlar. İlk olarak web sitesini parçalara ayırarak her bir bölüme ayrı ayrı responsive CSS ayarları yapar, ardından JavaScript ile animasyonların mobil cihazlarda düzgün çalışmasını sağlar.. Eğitimde flexbox kullanarak içeriklerin mobil cihazlarda nasıl düzenleneceği, font boyutlarının, margin değerlerinin ve ekran genişliğine göre düzenlemeleri gösterilmektedir. Ayrıca, sayfa genişliğine göre farklı CSS ayarları yaparak mobil görünümü iyileştirir ve tıklandığında mavi kutu oluşturma gibi görsel özellikler ekler.
Flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. Default value is 0 1 auto. Flex: 1 means making flex item flexible and setting flex basis to zero
Bu video, Emre Sabuncu tarafından sunulan CSS derslerinin üçüncü bölümüdür. Emre, flex yapısının temel özelliklerini ve kullanımını anlatmaktadır.. Videoda flex yapısının esnek kutu oluşturma özelliği detaylı olarak gösterilmektedir. Emre, bir div kutusu oluşturarak başlayıp, içine üç div kutusu yerleştirerek flex özelliğinin nasıl çalıştığını pratik bir örnek üzerinden açıklamaktadır. Flex yapısının temel mantığı, kapsayıcıya flex özelliği verildiğinde içindeki tüm etiketlerin esnek bir yapıya sahip olması ve sayfa boyutuyla uyumlu şekilde davranmasıdır. Ayrıca, flex ve inline flex kullanırken display özelliği verildiğinde webkit ön ekinin kullanılması gerektiği de belirtilmektedir.
Bu video, bir eğitmen tarafından sunulan front-end programlama eğitim içeriğidir. Eğitmen, Twitter'da front-end'e yeni başlayanlar için bir görsel tasarım sorusu sormuş ve bu videoda bu tasarımın nasıl yapılacağını adım adım göstermektedir.. Video, HTML ve CSS kullanarak bir tasarım oluşturma sürecini detaylı şekilde anlatmaktadır. İlk bölümde HTML yapısı oluşturma ve CSS ile tasarım özellikleri (renk, boyut, hizalama, boşluk) ayarlama adımları gösterilirken, ikinci bölümde CSS Flexbox ve after/before pseudo-elementlerinin kullanımı ele alınmaktadır.. Videoda flexbox ile div'leri yan yana getirme, justify content center ve align items center gibi hizalama özellikleri, gap ile boşluk doldurma ve repeating linear gradient ile tekrarlanan gradyan ekleme gibi teknikler gösterilmektedir. Ayrıca, CSS bilgisinin geniş olmasıyla birlikte JavaScript öğrenmenin önemi vurgulanmakta ve yeni başlayanlar için kendini zorlayacak örnekler yapmanın gerekliliği belirtilmektedir.
Flexbox enables flexible and responsive website layouts. Flex container is an HTML element with flex or inline-flex display. Flex items are direct children of flex container
Position: relative makes child absolute relative to parent. Top/bottom: 0 centers vertically, left/right: 0 centers horizontally. Margin: auto distributes remaining space evenly
Text-align property works for block-level containers like divs. Margin-auto requires specifying image width and converting to block. Position and transform properties need relative container and absolute image. Display-flex property enables flexible layout without float
Bu video, bir eğitmen tarafından sunulan Flexbox konulu eğitim setinin giriş dersidir. Eğitmen, daha önce Bootstrap ile ilgili beş derslik bir eğitim seti çektiğini belirtiyor.. Videoda Flexbox'ın temel kavramları açıklanıyor. Flexbox, CSS'de bir display özelliği olarak tanımlanıyor ve Bootstrap'ın row ve column mantığına benzer bir yapıya sahip. Eğitmen, yaklaşık 10-15 derslik bir eğitim seti planladığını, her dersin 2-3 dakikalık olacağını ve flexbox'ın temel yapı taşlarını kademe kademe inceleyeceğini belirtiyor. İlk altı-yedi derste flexbox'ın konteyner özellikleri, sonraki altı-yedi derste ise içindeki div'lerin özellikleri işleneceği söyleniyor.
Bu video, bir eğitim içeriği olup, bir eğitmen tarafından Flexbox özellikleri anlatılmaktadır. Eğitmen, Visual Studio Code kullanarak örnekler göstermektedir.. Video, Flexbox'ın flex item'lara verilebilecek özelliklerini detaylı şekilde ele almaktadır. Öncelikle flex item'lara renk atama, ardından order özelliği ile item sıralamasını değiştirme, justify content ve align self/align items ile item'ların iç düzenini düzenleme ve flex-grow özelliği ile boş alanları doldurma işlemleri gösterilmektedir. Eğitmen, her özelliği adım adım uygulamalı olarak anlatarak, responsive tasarımlarda bu özelliklerin nasıl kullanılacağını açıklamaktadır. Video, bir sonraki bölümde uygulamalar geliştirileceğini belirterek sona ermektedir.
Bu video, bir eğitmen tarafından sunulan HTML ve CSS kullanarak web sayfası tasarımı eğitimidir. Eğitmen, Tasarım Kodlama.com sitesinden alınan bir şablonu adım adım oluşturmayı göstermektedir.. Video, üç bloklu bir web sayfasının HTML ve CSS kodlarının nasıl yazılacağını detaylı şekilde anlatmaktadır. Eğitim, sayfanın üst kısmından başlayarak menü düzenlemesi, orta kısmın dört bölüm (kapak resmi, üç kutu ve bir çizgi) oluşturulması, alt kısmın bağlantılarının eklenmesi ve Google Font kullanımı gibi konuları kapsamaktadır.. Eğitimde flexbox kullanımı, font boyutları, renk ayarları, padding, margin değerleri, boşluklar (margin, gap), altı çizili görünüm, çerçeve ekleme, resim düzenleme ve logo üzerinde ilk harfin üzerine gelme efekti gibi CSS özellikleri detaylı olarak gösterilmektedir. Ayrıca Pixum Photos sitesinden resimlerin nasıl alınacağı ve tasarımın tasarımla uyumlu hale getirilmesi için gerekli düzenlemeler de anlatılmaktadır.
Flex container becomes flexible by setting display: flex. Flex properties include direction, wrap, flow, justify-content, align-items, align-content
Bu video, Emre Sabuncu tarafından sunulan CSS derslerinin üçüncü bölümüdür.. Videoda flex flow özelliği anlatılmaktadır. Flex flow, flex wrap ve flex direction özelliklerinin kısayolu olarak kullanılmaktadır. Emre Sabuncu, flex flow'un nasıl çalıştığını, row, row-reverse, column, column-reverse, wrap ve nowrap değerlerinin ne anlama geldiğini ve bunların kutuların dizilimini nasıl etkilediğini örneklerle göstermektedir. Ayrıca, bu özelliğin webkit ve mozilla için nasıl kullanılacağı ve tarayıcı uyumluluğu hakkında bilgiler verilmektedir.
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, izleyicilere adım adım bir todo uygulaması oluşturmayı göstermektedir.. Videoda, todo uygulamasının kullanıcı arayüzü tasarımı ve işlevselliği geliştirilmektedir. Eğitmen önce flexbox kullanarak liste öğelerini düzenler, ardından Icon.io kütüphanesinden check ve uyarı ikonları ekler. Daha sonra, kullanıcıların yeni görevler ekleyebilmesi için bir fonksiyon oluşturur ve bu fonksiyonun mevcut todo listesine yeni görev eklemesini gösterir. Video, basit bir todo uygulamasının nasıl geliştirileceğini öğrenmek isteyenler için faydalı bir kaynaktır.
Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, Bootstrap kullanarak mobil uyumlu olmayan bir web sitesinin tasarımını adım adım göstermektedir.. Videoda, web sitesinin alt kısmının tasarımı anlatılmaktadır. İlk olarak konteyner ve row-col yapısı oluşturulup, Font Awesome'dan ikonlar kullanılarak bir paragraf ve buton eklenmektedir. Ardından "Hizmetlerimiz" bölümünün nasıl oluşturulacağı gösterilmekte, her bir hizmet için resim ve metin ekleme, yazı formatlama ve boşluk ayarları yapılmaktadır.. Eğitim, flexbox yapısı kullanarak öğeleri yan yana düzenleme, class'lar vererek tasarım biçimlendirme ve padding, margin gibi CSS özellikleri uygulama gibi teknik detayları içermektedir. Video sonunda, bir sonraki derste "Hakkımızda" bölümünün yapılacağı belirtilmektedir.
Bu video, Siper Akademi'de sunulan bir web geliştirme eğitim dersidir. Eğitmen, önceki derste esnek kutucuklara (flex divlere) örnekler verdiğini belirterek, bu derste yeni flexbox özelliklerini anlatmaktadır.. Videoda flexbox'ın temel özellikleri adım adım gösterilmektedir. Eğitmen önce section ve div'lere esneklik vererek webkitbox flex özelliğini tanımlar, ardından align center ile div'leri ortalar. Daha sonra flex-stretch özelliğini kullanarak esnek olmayan kutucuklara esneklik katar ve flex-stretch ile flex olmayan kutucukların nasıl uzatılacağını gösterir. Video, flexbox kurallarının temel kullanımını öğrenmek isteyenler için faydalı bir kaynaktır.
Bu video, Tayfun Erbilen tarafından Prototurk.com için hazırlanan bir CSS eğitim içeriğidir. Eğitmen, CSS scroll snap ve flexbox özellikleri hakkında detaylı bilgiler sunmaktadır.. Videoda, eski JavaScript yöntemlerine göre daha performanslı ve basit bir şekilde scroll davranışlarını belirlemek için CSS scroll snap özelliğinin kullanımı adım adım gösterilmektedir. Ayrıca flexbox düzenleyicisi ve scroll snap özelliğinin birlikte kullanımı da ele alınmaktadır. Eğitim, temel HTML ve CSS yapılandırması ile başlayıp, scroll snap type, scroll snap align, scroll padding, scroll margin gibi özelliklerin pratik örneklerle anlatımını içermektedir.. Eğitimde yatay ve dikey scroll snap örnekleri, flex-direction, overflow gibi CSS özellikleri üzerinden örnekler verilmekte ve farklı tarayıcılardaki uyumluluk testleri yapılmaktadır. Özellikle Internet Explorer dışında diğer tarayıcılardaki scroll snap özelliğinin davranışı da videoda ele alınmaktadır.