CSS Grid, Flexbox ve Diğer Modern Tekniklerle Web Düzeni
A course by Javier Usobiaga Ferrerweb tasarımcısı
A course by Javier Usobiaga Ferrer, web tasarımcısı
CSS Şekilleri, değişkenler ve paralaks efektleri ile yeni ızgaraları ve web sitesi tasarlamanın diğer yollarını keşfedin
Web sürekli bir değişim içinde yaşıyor ve CSS Grid ve Flexbox'ın gelişiyle oyunun kuralları yeniden değişti. Javier Usobiaga – web tasarımcısı, FrontEnd geliştiricisi ve Swwweet stüdyosunun kurucu ortağı – Barselona Kent Konseyi gibi müşteriler için çeşitli projeler oluşturma konusunda 13 yıllık deneyime sahiptir ve engin deneyimiyle sizi en modern teknikleri ve araçları keşfetmeye davet ediyor bunlar sektörde devrim yaratıyor.
Eğer kurstaysa HTML ve CSS ile Duyarlı Web Geliştirmeye Giriş , duyarlı web dünyasına zaten başladınız; bunda CSS Grid, Flexbox, CSS Şekilleri, görünüm birimleri, CSS değişkenleri, 3D dönüşümler veya paralaks tipi efektler gibi araçlarla çeşitli ileri teknikleri öğreneceksiniz.
Bu çevrimiçi kursta ne öğreneceksiniz?
1 ders & 1 indirme
Görünüm birimleri
4 dakika, 40 saniye
Nesneye sığdırılan görseller
4 dakika, 44 saniye
CSS sütunları
3 dakika, 1 saniye
CSS şekilleri
7 dakika, 5 saniye
CSS'deki değişkenler
4 dakika, 11 saniye
Flexbox'a giriş
3 dakika, 12 saniye
Bu kursa neler dahil?
Yapacağınız ilk şey Javier Usobiaga'yı, profesyonel kariyerini ve en dikkat çekici projelerini tanımak olacaktır.
Düzeni görünüm birimleriyle, object-fit özelliğiyle nasıl şekillendireceğinizi ve CSS sütunlarıyla sütunlardaki metni nasıl dağıtacağınızı öğrenerek başlayacaksınız. klip yolu ve CSS Şekilleri ile web şekillerinin nasıl dikdörtgen olmaktan çıkabileceğini göreceksiniz ve ayrıca kodunuzu yerel özel özellikler değişkenleriyle nasıl optimize edeceğinizi öğreneceksiniz.
Flexbox'ın web düzeni dünyasında yarattığı devrimi keşfedeceksiniz. Javier size elemanları hizalamanın tüm olanaklarını öğretecek. Bunu yapmak için, kabın ve içeriğin özellikleri ve bir ana eksen, bir çapraz eksen ve alternatif eksenlerle hizalama yetenekleri açıklanacaktır.
Kodunuzu yapılandırma ve düzenini düzenleme şeklinizi tamamen değiştirerek CSS Grid ile oyunun yeni kurallarını keşfetmeye devam edeceksiniz. Bazı ızgara işlevlerini, düzen ve boyut özelliklerini ve tekrarlama ve minmax işlevleriyle farklı ekran boyutlarına uyum sağlayan bir ızgarayı nasıl oluşturabileceğinizi öğreneceksiniz.
Javier, CSS Grid ile ızgara alanları, hizalama ve sıralama, iç içe yerleştirme hakkında daha gelişmiş teknikleri açıklayacak ve bir örnek aracılığıyla Grid ve Flexbox'ı bir projede nasıl bir arada kullanabileceğinizi göreceksiniz.
Sonunda Javier tarafından ilham kaynağı olarak seçilen projeleri, örnekleri ve kaynakları görmek için kaydırmada pratik bir derinlik ve efekt örneğiyle 3D dönüşümler hakkında kısaca bilgi edineceksiniz.
What is this course's project?
Öğrenilen tekniklerden bir veya birkaçını kullanarak ücretsiz bir egzersiz yapacaksınız. Javier, Güney Kutbu'nun fethi hakkında bilgilendirici bir sayfa oluşturacak, istediğiniz temayı ve projeyi seçebilirsiniz.
Kurs öğrencilerinin projeleri
Who is this online course for?
CSS Grid, Flexbox ve diğer modern tekniklerle tasarım ve modern düzen tekniklerine ilgi duyan herkese.
Requirements and materials
Bu kursu almak için HTML ve CSS hakkında sağlam bilgiye, bir bilgisayara ve bir kod düzenleyiciye sahip olmanız gerekir.
Yorumlar
- 8 ay önce
An Amazing course to learn Flexbox & Grid and some advanced animations.
- 9 ay önce
increíble
- creative_250792PLUS9 ay önce
Cours très instructif, agréable, très complet
- 1 yıl önce
Es un curso muy bueno
- 1 yıl önce
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Ayrıca Elisava, IDEP gibi tanınmış atölyelerde ve okullarda Web Tasarımı öğretmeni olarak görevinden büyük keyif alıyor.
Usobiaga, web'in yalnızca bilgisayar ekranında ne kadar güzel görünebileceğini değil, aynı zamanda farklı cihazlar ve koşullardaki kullanılabilirliğini de bir bütün olarak anlıyor.
Onun sözleriyle, "Estetik kadar ne kadar hızlı yüklendiği veya ne kadar iyi tepki verdiğinin de önemli olduğunu düşünüyorum ve bana öyle geliyor ki endüstrimizde bunu sıklıkla unutuyoruz."
İçerik
- U 1
giriiş
- Sunum
- Etkiler
- U 2
Düzeni şekillendirmek
- Görünüm birimleri
- Nesneye sığdırılan görseller
- CSS sütunları
- CSS şekilleri
- CSS'deki değişkenler
- U 3
Flexbox ile tek boyutlu düzen
- Flexbox'a giriş
- Kapsayıcı özellikleri
- İçerik özellikleri
- Ana eksen ve çapraz eksendeki hizalamalar
- Gelişmiş kadrolar
- Flexbox ile gelişmiş düzenler
- U 4
CSS ızgarasıyla iki boyutlu düzen
- CSS ızgarasına giriş
- Izgara işlevleri
- Dağıtım ve boyut
- Otomatik duyarlı ızgara
- U 5
Gelişmiş CSS Izgarası
- Izgaradaki alanlar
- Hizalama ve düzen
- Yuvalama
- Uygulamada ızgara (ve esnek kutu)
- U 6
Üçüncü boyut: derinlik ve kaydırma efektleri
- 3B dönüşümlere giriş
- Sabit başlıklar
- Kaydırmayla senkronize edilen animasyonlar
- İlham ve kaynaklar
- FP
Bitirme projesi
- Web düzeni teknikleri
Bir Domestika kursundan neler beklenebilir?
Kendi hızınızda öğrenin
Belirli bir program olmadan ve takip edilmesi kolay bir yöntemle evden öğrenmenin tadını çıkarın. Kendi hızınızı kendiniz belirlersiniz.
En iyi profesyonellerden öğrenin
Yaratıcı sektörün en iyi uzmanlarının açıkladığı değerli yöntem ve teknikleri öğrenin.
Uzman öğretmenlerle tanışın
Her uzman, her derste açık yönergelerle, gerçek tutkuyla ve profesyonel anlayışla en iyi yaptıkları şeyi öğretir.
Certificates
PLUSIf you're a Plus member, get a özel sertifika signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Ön sıra koltukları alın
En yüksek kalitede videolar sayesinde tek bir ayrıntıyı kaçırmazsınız. Sınırsız erişim sayesinde tekniğinizi mükemmelleştirmek için bunları istediğiniz kadar izleyebilirsiniz.
Bilgi ve fikirleri paylaşın
Sorular sorun, geri bildirim isteyin veya çözümler sunun. Öğrenme deneyiminizi topluluktaki, yaratıcılığa sizin kadar tutkulu olan diğer öğrencilerle paylaşın.
Küresel bir yaratıcı toplulukla bağlantı kurun
Topluluk, dünyanın her yerinden meraklı ve yaratıcılıklarını keşfetme ve ifade etme konusunda tutkulu milyonlarca insana ev sahipliği yapıyor.
Profesyonelce hazırlanmış kursları izleyin
Domestika, yüksek kaliteli bir çevrimiçi öğrenme deneyimi sağlamak için öğretmen kadrosunu seçer ve her dersi kendi bünyesinde üretir.
SSS
This course is designed for people with basic CSS knowledge who want to dive deeper into advanced layouts, modern techniques, and experimenting with the latest properties. You don’t need to be an expert, but you should know the basics of HTML and CSS.
You should have basic knowledge of HTML and CSS, plus a code editor and a modern browser. No special tools or framework experience required.
You’ll learn to build advanced, responsive layouts with Flexbox and CSS Grid, parallax animations, custom shapes, viewport units, image and column control, CSS variables, and 3D transforms for innovative web interfaces.
The course covers element alignment, advanced properties, differences between Flexbox and Grid, responsive layouts, nested grids, custom areas, distribution techniques, and when to choose each method based on design needs.
Viewport units like vh and vw are used to size blocks, text, and images relative to the browser window, creating responsive interfaces and avoiding horizontal scroll or poor proportions.
Yes, you’ll learn to create parallax animations, sticky headers, and scroll-synced effects using pure CSS and advanced visual interaction techniques.
Yes, the course teaches how to adjust images with object-fit, object-position, media queries, and techniques to make images adapt to any container or screen.