• Buradasın

    Flexbox

    Özetteki ilgi çekici içerikler

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • HTML, CSS ve JavaScript ile Web Sayfası Animasyonu Eğitimi

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, izleyicilere adım adım kodlama sürecini göstererek anlatmaktadır. Video, Visual Studio Code'da bir proje oluşturma ile başlayıp, HTML ile temel sayfa yapısını oluşturma, CSS ile tasarım ve animasyon ekleme, son olarak JavaScript ile dinamik animasyonlar eklemeyi kapsamaktadır. Eğitmen, navbar, header, liste öğeleri, başlıklar ve paragraflar gibi web sayfası bileşenlerini oluşturup, bunlara animasyon eklemeyi göstermektedir. Eğitim boyunca flexbox, pozisyonlama, linear gradient, background image gibi CSS özellikleri kullanılarak sayfanın görünümü biçimlendirilmekte ve "movebop", "movetoleft" ve "moveline" gibi keyframe animasyonları oluşturulmaktadır. Eğitmen, kodları detaylı bir şekilde açıklamakta ve izleyicilerin konuyu anlaması için yavaş anlatım yapmaktadır.

      • 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

    • 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

    • 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 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

    • 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

    • 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

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

      Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisidir. Eğitmen, izleyicilere adım adım web sayfası oluşturma sürecini göstermektedir. Videoda, JavaScript ve CSS kullanarak "Doğa Keşif" temasına sahip bir web sayfası tasarımı anlatılmaktadır. Eğitim, HTML body kısmında bir div ile başlayıp, header, logo, fotoğraf, butonlar ve form alanları gibi web sayfasının temel bileşenlerinin oluşturulmasına kadar uzanmaktadır. Eğitmen, Pexels'ten fotoğraf indirme, Google Fonts'tan yazı tipi ekleme ve çeşitli CSS özellikleri (display, flex, justify-content, background-image, linear-gradient, text shadow, position absolute, padding, margin, cursor pointer) kullanarak sayfanın görünümünü şekillendirme tekniklerini göstermektedir. Video, bir serinin parçası olup, bir sonraki bölümde devam edeceği belirtilmektedir. Eğitim boyunca, margin ve padding arasındaki farklar gibi temel CSS kavramları da açıklanmaktadır.

      • 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
  • Yazeka sinir ağı makaleleri veya videoları özetliyor