• Buradasın

    Flexbox

    Özetteki ilgi çekici içerikler

    • CSS Flexbox ile Görsel Web Sitesi Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS Flexbox kullanımını anlatan kapsamlı bir eğitim içeriğidir. Videoda, CSS ile HTML elementlerinin konumlandırılması ve flexbox kullanarak görsel bir web sitesi oluşturma süreci adım adım gösterilmektedir. Eğitmen önce HTML iskeleti oluşturma, ardından CSS ile görsellerin boyutlandırılması ve flexbox ile öğelerin merkeze konumlandırılması gibi temel adımları anlatmaktadır. Eğitim boyunca başlık oluşturma, border ekleme, padding ayarlama ve görselleri ortalamak gibi temel CSS özellikleri de gösterilmektedir. Video sonunda, Flexbox'ı öğrenmek için "Xbox Frog" adlı bir oyun önerilmektedir. Ayrıca, izleyicilere CSS Trix sitesi gibi kaynaklar da gösterilmekte ve egzersiz yapabilecekleri kaynaklar önerilmektedir.

      • youtube.com

    • Flex Shrink Özellikleri ve Kullanımı

      Bu video, CSS Flexbox düzenleyicisinde flex shrink özelliğinin nasıl çalıştığını gösteren bir eğitim içeriğidir. Eğitmen, Visual Studio Code'da kod düzenleyerek ve tarayıcıda sonuçları göstererek konuyu açıklamaktadır. Video, flex shrink özelliğinin temel kavramlarını ve kullanımını anlatmaktadır. Flex shrink'in varsayılan değeri 1 olduğu, bu sayede flex konteynerin genişliği azaldığında flex öğelerinin otomatik olarak küçüldüğü gösterilmektedir. Eğitmen, flex shrink değerini 0'a ayarlayarak küçülme işlemini nasıl engellediğini ve farklı flex öğelerine farklı flex shrink değerleri vererek küçülme oranlarını nasıl ayarladığını örneklerle açıklamaktadır.

      • youtube.com

    • Flexbox Özellikleri Eğitim Videosu

      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.

      • youtube.com

    • Esnek Div Özellikleri Eğitim Videosu

      Bu video, Siper Akademi'de sunulan bir CSS eğitim dersidir. Eğitmen, esnek divlerin özelliklerini göstermektedir. Videoda, section etiketi ve alt divlerin (child div) özellikleri detaylı olarak anlatılmaktadır. Eğitmen, webkitbox pack ve webkitbox flex gibi CSS özellikleri kullanarak divleri ortalamak ve esnek hale getirmek için örnekler göstermektedir. Ayrıca, divlerin sıralamasını belirleme ve flex özelliğinin divlerin boş alanlara yayılma özelliğini nasıl etkilediği de açıklanmaktadır. Video, bir önceki derste bırakılan yerden devam eden bir eğitim serisinin parçasıdır.

      • youtube.com

    • Bootstrap ile Mobil Uyumlu Olmayan Web Sitesi Tasarımı Eğitimi

      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.

      • youtube.com

    • Flexbox Sıfırdan Kapsamlı Eğitim Seti Giriş Dersi

      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.

      • youtube.com

    • CSS Flex Yapısı Eğitim Videosu

      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.

      • youtube.com

    • Web Sitesi Tasarımı ve CSS Kullanımı Eğitimi

      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.

      • youtube.com

    • CSS Scroll Snap ve Flexbox Eğitimi

      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.

      • youtube.com

    • Front-End Programlama Eğitim Videosu: HTML ve CSS ile Tasarım Oluşturma

      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.

      • youtube.com

    • HTML ve CSS ile İletişim Sayfası Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan web tasarım eğitim serisidir. Eğitmen, kod düzenleyicisinde pratik uygulamalar yaparak izleyicilere adım adım anlatım yapmaktadır. Videoda, HTML ve CSS kullanarak basit bir iletişim sayfası tasarımı adım adım gösterilmektedir. Eğitim, sayfanın genel görünümünden başlayarak, HTML ile içerik oluşturma, CSS ile stil ve düzenlemeleri içermektedir. Flexbox kullanımı, form elemanlarının özelleştirilmesi, footer tasarımı ve responsive tasarım konuları ele alınmaktadır. Eğitim boyunca, "display flex", "justify-content", "align-items" gibi CSS özellikleri, form elemanlarının düzenlenmesi, input ve butonların görünümü, renkler, border ve hover durumları gibi kullanıcı deneyimini iyileştiren özellikler detaylı olarak gösterilmektedir. Video, bir sonraki derste responsive tasarım konusuna geçileceği bilgisiyle sonlanmaktadır.

      • youtube.com

    • Todo Uygulaması Geliştirme Eğitimi

      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.

      • youtube.com

    • CSS Flexbox Giriş Dersi

      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.

      • youtube.com

    • Flexbox Özellikleri Eğitim Videosu

      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.

      • youtube.com

    • CSS'de Z-Index Kullanımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS dersidir. Eğitmen, CSS'de z-index özelliğinin nasıl kullanılacağını adım adım göstermektedir. Video, z-index özelliğinin tanımıyla başlayıp, bir araba modeli üzerinden pratik bir uygulama sunmaktadır. Eğitmen önce HTML ve CSS kodlarını yazarak bir araba modeli oluşturur, ardından z-index özelliğini kullanarak tekerleklerin gövdeye göre üst üste gelmesini gösterir. Z-index değerlerinin nasıl ayarlanacağı, pozitif ve negatif değerlerin etkileri ve flexbox özellikleriyle birlikte kullanımı detaylı olarak anlatılmaktadır. Video sonunda, örnek uygulamanın açıklama kısmında verileceği belirtilmektedir.

      • youtube.com

    • CSS Flex Flow Dersi

      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.

      • youtube.com

    • CSS Grid ve Flexbox ile Web Sayfası Tasarımı Eğitimi

      Bu video, bir eğitmen tarafından sunulan CSS Grid ve Flexbox kullanarak web sayfası tasarımı eğitimidir. Eğitmen, adım adım bir haber sayfası tasarımını göstermektedir. Video, CSS Grid ile içerik alanlarının oluşturulması, flexbox kullanarak içeriklerin hizalanması ve biçimlendirilmesi konularını kapsamaktadır. Eğitmen, "content başlık" alanı oluşturma, resim boyutlandırma, kategori başlıklarının stilize edilmesi ve haber başlıklarının düzenlenmesi gibi konuları detaylı şekilde anlatmaktadır. Eğitim, font boyutları, margin değerleri, border radius özellikleri ve display flex dizilişi gibi CSS özellikleri kullanılarak içerik kutularının düzenlenmesi, renk değişiklikleri ve görsel düzenlemeler yapmaktadır. Video, bir sonraki derste footer tasarımı ile ana sayfanın tamamlanacağı bilgisiyle sonlanmaktadır.

      • youtube.com

    • Web Sayfası Hakkında Sayfası Oluşturma Eğitimi

      Bu video, bir web geliştirme eğitim serisinin bir parçasıdır. Eğitmen, önceki videoda başlayan bir web sayfasının "hakkımızda" (about) sayfasını oluşturma sürecini adım adım göstermektedir. Videoda, "hakkımızda" sayfası için HTML ve CSS dosyalarının oluşturulması, ikonların eklenmesi, telefon, mail, adres ve faks bilgilerinin düzenlenmesi anlatılmaktadır. Eğitmen, flexbox kullanarak sayfanın düzenini ayarlayarak, arka plan resmi ekleme, buton oluşturma ve tıklama efektleri uygulama gibi CSS özellikleri göstermektedir. Ayrıca, sayfa arasındaki bağlantıları kurma ve butonların işlevselliğini test etme adımları da paylaşılmaktadır.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor