CSS Grid Changes EVERYTHING - Amazing Presentation

HN ▲ 280WebKanal: Coding TechYayın: 16.07.2017Süre: 32:06

Neden izlemeli?

CSS Grid’in modern tarayıcılarda sağladığı düzen yeteneklerini ve web layout tasarımını nasıl değiştirdiğini anlatıyor; frontend geliştiriciler ve UI tasarımcıları için doğrudan uygulanabilir bilgiler içeriyor. İzleyiciler responsive ve esnek grid düzenleri oluşturmayı somut örneklerle öğrenir.

Video özeti

Bu konuşma, CSS Grid Layout modülünün tarayıcılarda yaygınlaşmasıyla web düzen tasarımında nelerin değiştiğini adım adım anlatıyor. Başlangıçta mevcut web layout problemlerini ve semantik işaretlemenin bozulma riskini tartışıyor, ardından mevcut araçların sınırlılıklarını ve grid tabanlı yeni yaklaşımları ortaya koyuyor. Konuşmanın ortasında CSS Grid terimlerine giriş yapılıyor; grid-template, grid-template-areas, nested grids ve bileşenlerde grid kullanımı gibi somut kavramlar örneklerle gösteriliyor. Tarayıcı desteği, geriye dönük uyumluluk için fallbacks ve progressive enhancement stratejileri üzerinde duruluyor, son bölümde benimseme rehberi ve öğrenme kaynakları ile geleceğe yönelik tasarım yaklaşımları ele alınıyor.

Bu sunumu frontend geliştiriciler, UI/UX tasarımcıları ve responsive web tasarımıyla ilgilenenler izlemeli; temel HTML ve CSS bilgisi faydalı olacaktır. İzleyici; CSS Grid ile nasıl esnek, kaynak bağımsız (document order'dan bağımsız) düzenler oluşturulacağını, grid terimlerini ve özelliklerini nasıl uygulayacağını, nested grid ve template-areas gibi teknikleri pratik örneklerle öğrenerek projelerine hızlıca uygulayabilecek bilgi ve kaynaklara erişim kazanır.

Bölümler

  1. Web düzenlerinde yaşanan temel sorunlar
  2. Mevcut araçların ve yaklaşımların sınırlılıkları
  3. CSS Grid’e giriş ve temel kavramlar
  4. Grid’i CSS ile uygulama örnekleri
  5. Grid template areas ile düzenleme
  6. Tarayıcı desteği ve geri dönüşümler
  7. Benimseme rehberi ve kaynaklar

Öne çıkan fikirler

  • CSS Grid, tarayıcıyı gerçek bir tasarım yüzeyi olarak kullanarak belge kaynağı sırasına bağımlılığı kırar.
  • grid-template-areas ve nested grids, karmaşık layout’ları daha okunabilir ve sürdürülmesi kolay parçalara ayırır.
  • Progressive enhancement ve fallbacks planlayarak Grid’e geçiş, mevcut kullanıcı deneyimini korur ve adaptasyonu hızlandırır.

Özet ve bölüm başlıkları Opendart editörlüğünde hazırlanmıştır; videonun içeriği ve hakları kanal sahibine aittir.

Hacker News'te 280 puan ve 86 yorum aldı: tartışmayı oku · YouTube'da aç

Opendart Akademi

Bu konuyu canlı derste, gerçek projelerle öğrenin → Angular Eğitimi

Diğer ilgili eğitimler: Vue.js Eğitimi · React Native Eğitimi

Eğitmen eşliğinde, canlı online veya sınıf içi; bireysel ve kurumsal seçenekler. Tüm eğitimler