CSS Grid Eğitimi
Requirements
- Temel Bilgisayar Bilgisi
- HTML ve CSS bilmek
Description
"Bir varmış bir yokmuş. Evvel zaman içinde web sitesi yapanlar HTML 'de tablo yapısını kullanarak sayfa planı çıkartırlar ve içini doldurmakla uğraşırlarmış. Sayfaya koyacakları öğeler için tablo satır ve sütunlarını şekil vermek için akla karayı seçerlermiş. Dikey olarak bir öğeyi ortalamak, eşit yükseklikte satırlar yapmak ise tam bir işkenceye dönermiş. " dersem inansanız iyi olur. Çünkü bir zamanlar bu şekilde web siteleri yapılıyordu. Ne yazık ki mi desem yoksa iyi ki görmüşüm mü desem bilemedim ama o zamanları gördüm.
CSS bir süre önce sayfa planını HTML’den aldı. Tablolar yerine, float kullanımı ve position değerleri gibi şeylerle sayfa planları oluşturduk ancak bazı konularda yine de; dikey de ortalama, eşit yükseklikte kolonlar vb sayfalar.. v.b. oluşturmak gibi ihtiyaçlar için farklı çözümler denememiz gerekti. Tüm bunlara rağmen CSS bu konuda bayağı yol kat etti.
Bir zaman sonra flex (CSS Flexbox) ile bu sorunların bazılarına çözümler bulduk.
Sayfa planları bir çerçeve içine alınacak ve basitçe çözülecek yapılar değildir. W3C sonuçta çok farklı tiplerdeki sayfa planlarını kapsayacak bir çözümler aradı diyebiliriz. Responsive web kavramının gelmesiyle (hani şu farklı cihazlarda sayfanın güzel görüntülenmesi olayı varya işte o) birlikte zorluk derecesi daha da arttı. Artık esnek yapılı sayfa planlarını da kapsayan çözümler gerekiyordu. Bu sorunları çözmek için çeşitli standartlar geliştirildi. Son çıkan çözüm ise CSS Grid.
Sayfa planlama konusunda grid ile birlikte önemli kazanımlarımız oldu. Bunların başında float ve flex ile devam eden tek eksenli sayfa planlamaları yerine iki eksenli sayfa planlamasını yapabiliyoruz.
İki eksenli sayfa planlamayı en son tablo ile sayfa planı oluştururken kullanıyorduk. Tekrar iki eksenli sayfa planlama metoduyla sayfalarımız kurgulamamız gerekiyor. Bu tek eksenli planlamaya göre büyük kolaylıklar sağlıyor. Bu arada aklınıza tablo ile iki eksenli sayfa planı yapıyorduk niye grid’e gerek var demeyin. Tablo yapıları çok sabit yapılardı esnek ve üzerine geçen sistemler için çok uygun değildi.
İki eksenli sayfa planlamanın responsive web geliştirmelerinde büyük kolaylığı var. Örneğin mobilde en alt sırada olan bir öğeyi masaüstünde sağ üste koymak grid öncesinde zordu. İki eksenli sayfa planından sayfadaki tüm ögeler ve sıralaması HTML’deki yerinden bağımsız şekilde sıralanabiliyor ve farklı özellikleri tanımlanabiliyor.
Tüm interneti düşününce tüm sayfa planlarına çözüm bulmak çokta kolay bir şey değildir. Grid bunu yapmak için ortaya çıktığı için anlaşılması diğer CSS özelliklerine göre nispeten daha zor bir konu oldu. İş karmaşık olunca haliyle çözümü de biraz karmaşıklaşıyor. Basit sayfa planlarını yapmak için basit iki satırlık kodlar yeterli olurken karmaşık sayfa planlarını oluştururken biraz işin inceliklerini bilmek gerekiyor.
İşte bu noktada CSS Grid Eğitimi ile temel atmaya başlıyoruz. Eğitim başlangıç seviyesindedir. Eğitimde temel kavram, yapı ve özellikleri anlatmaya çalıştım.
Aşağıdaki başlıklarda CSS Grid derslerini işliyor olacağım.
Grid Tanımı ve Terimleri
Grid Container Yapısı ve Özellikleri
Grid Öğeleri ve Özellikleri
Grid ile Örnek Uygulama Yapımı
Who this course is for:
- CSS Grid yapısını öğrenmek isteyen herkes
Instructor
- 4.2 Instructor Rating
- 496 Reviews
- 12,010 Students
- 7 Courses
20 yılı aşkın süredir Frontend, Backend ve FullStack olarak aktif olarak çalışmalar, projeler gerçekleştirmekteyim ve/veya aktif projelerde Frontend, Backend veya FullStack olarak bulundum ve hala da bulunmaya devam etmekteyim.
Bilgisayar Donanım ve Yazılım bilgisi haricinde HTML/HTML5, CSS/CSS3, Javascript, Ajax, jQuery, PHP, MySQL, PostgreSQL, Bootstrap, XML, JSON, Linux İşletim Sistemi (Centos, Debian, Ubuntu..vb), Server Management ve konfigürasyonları..vb. konularda yıllara yayılmış tecrübe ve bilgi birikimine sahibim. Her geçen gün bu tecrübelerime karşılaştığım durumlar sebebiyle yenilerini ekliyorum.
Ayrıca henüz tam anlamı ile tecrübe sahibi olmadığım ve hala öğrenmeye devam ettiğim Python, React konularında da kendimi geliştirmeye devam ediyorum.
Dipnot olarak evimde, iş yerinde uzun yıllardır (yaklaşık 15 yıl) aktif bir Linux kullanıcısıyım ve Linux'u ikinci işletim sistemi olarak değil ana işletim sistemi olarak kullanıyorum.
2002 yılında kurulan netopsiyon sitesinin kurucu ortaklarından biriyim. Yıllardır yöneticilik, teknik destek ve server management görevlerinde bulundum ve hala devam ediyorum.
Boş vakitlerimde yeni bir şeyler öğrenmeye çalışıyorum. Hala yeni şeyler öğrenmenin peşini bırakamadım.
Burada sizlere yılların bana vermiş olduğu bilgi birikimini ve tecrübelerimi aktarmaya çalışacağım.
I have been actively working and carrying out projects as Frontend, Backend and FullStack for more than 20 years and/or I have been and still continue to be involved in active projects as Frontend, Backend or FullStack.
Apart from computer hardware and software knowledge, HTML/HTML5, CSS/CSS3, Javascript, Ajax, jQuery, PHP, MySQL, PostgreSQL, Bootstrap, XML, JSON, Linux Operating System (Centos, Debian, Ubuntu..etc), Server Management and configurations. ..etc. I have years of experience and knowledge on the subject. I add new ones to these experiences every day due to the situations I encounter.
I also continue to improve myself in Python and React, which I do not yet have full experience with and am still learning.
As a side note, I have been an active Linux user at home and at work for many years (about 15 years) and I use Linux as the main operating system, not as a second operating system.
I am one of the founding partners of the netopsiyon site, which was established in 2002. I have worked in administrative, technical support and server management roles for years and I still continue to do so.
I try to learn something new in my spare time. I still can't stop learning new things.
Here I will try to convey to you the knowledge and experience that I have gained over the years.