CSS layout

Bir Web ön-uç(front-end)  geliştiricisi mi olmak istiyorsun?

Bu noktaya kadar CSS'in temellerini, metnin nasıl şekillendirileceğini ve içeriğinizin iiçnde bulunduğu kutualrı nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanına ve birbirlerine göre doğru yere nasıl yerleştiriceğinize bakacağız. CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski tekniklere bir göz atacağız.

Hedefinize ulaşmak için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.

Başlayın

Ön koşullar

Bu üniteye başlamdan önce şunları yapmalısınız:

  1. HTML'ye Giriş ünitesinde anlatıldığı gibi temel HTML bilgisine sahip olun.
  2. CSS'e Giriş bölümünde anlatıldığı gibi, temel CSS bilgisine sahip olun.
  3. Kutuları şekillendirme hakkında bilgi sahibi olun.

Not: Kendi dosayalrınızı oluşturma yeteneğinizin olmadığı bir bilgisayar/table/başka bir cihaz üzerinde çalışıyorsanız, JSBin veya Glitch gibi bir çevrim içi kodlama programıyla okd örnelerinin çoğunu deneyebilirsiniz.

Dersler

Bu dersler, CSS'de bulunan temel düzen araçları ve teknikleri hakkında talimat sağlayacaktır. Derslerin sonunda, bir web sayfası düzenleyerek düzen yöntemlerini anlamanıza yardımcı olacak değerlendirmelerimiz mevcuttur.

CSS mizanpajına giriş
bu derste, önceki derslerde değindiğimiz bazı CSS mizanpaj özelliklerini — farklı display nitelik değerleri gibi — özetleyecek ve  bu ünite boyunca ele alacağımız bazı kavramları tanıtacağız.
Normal akış(Normal Flow)
Web sayfalarındaki öğeler, biz bunu değiştirmek için bir şeyler yapana kadar kendilerini normal akışa göre düzenler. Bu derste, nasıl değiştirileceğini öğrenmek için normal akışın temellerini  açıklayacağız.
Esnek kutular (Flexbox)
Flexbox, öğelerin satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu derste tüm temelleri açıklayacağız. Bu dersi inceledikten sonra, devam etmeden önce anlayıp anlamadığınızı kontrol etmek için flexbox becerilerinizi test edebilirsiniz.
Izgaralar(Grids)
CSS Izgara(Grid) düzeni, web için iki boyutlu bir düzen sistemidir. içeriği satırlar ve sütunlar halinde yerleştirmenize olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu derste size sayfa düzenine başlamak için bilmeniz gereken her şeyi verecek, ardından devam etmeden önce ızgara(grid) becerilerinizi test edecektir.
Yüzen nesneler (Floats)
Başlangıçta metin blokları içerisindeki görüntüleri konumlandırmak için kullanılan float niteliği, tüm öğelerin konumlandırılması ve web sayfalarıda sütunlar oluşturmak için kullanılan en yaygın araçlardan biri haline geldi. Fakat Flexbox ve Grid'in kullanıma sokulmasıyla, bu derste açıklandığı gibi asıl kullanım amacına geri döndü.
Konumlandırma(Positioning)
Konumlandırma, öğeleri normal belge mizanpajı akışından çıkarmanıza ve bunların farklı şekilde davranmasını sağlar. örn öğelerin birbirinin üstüne durabilmesini ve/veya taryıcı görünüm alanı içinde her zaman aynı konumda kalmasını sağlar. Bu derste farklı position değerlerinin nasıl kullanılacağını açıklamaktadır.
Birden çok sütun düzeni
Çok sütunlu düzen özelliği, bir gazetede görebileceğiniz gibi, içeriği sütunlar halinde yerleştirmek için bir yöntem sunar. Bu derste, bu özelliğin nasıl kullanılacağını açıklamaktadır.
Duyarlı tasarım
Web özellikli cihazlarda daha çeşitli ekran boyutları ortaya çıktıkça, duyarlı web tasarımı (RWD) kavramı ortaya çıkmıştır: web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmesine izin veren bir dizi uygulama. Bir web sayfasının farklı cihazlarda tasarım şeklimizi değiştiren bir fikirdir ve bu derste, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.
Acemiler için medya sorguları klavuzu
CSS Medya Sorugusu size, tarayıcı ve cihaz ortamının genişliğinin belirttiğiniz kural ile eşleştiğinde uygulamak istediğiniz CSS tanımlarını uygulamanıza olanak tanır. Ortam sorguları, görüntü alanının boyutuna bağlı olarak farklı düzenler oluşturmanıza olanak sağladığından, duyarlı web tasarımının önemli bir parçasıdır, ayrıca sitenizin üzerinde çalıştığı ortamla ilgili diğer bilgileride size sağlayabilir, örneğin kullanıcı fare yerine dokunmatik ekran kullanıyor. Bu derste önce medya sorgualraında kullanılan sözdizimi hakkında bilgi edinecek ve ardından bunları basit bir tasarımın nasıl duyarlı hale getirilebileceğini gösteren işlenmiş bir örnekte kullanmayı deneyeceksiniz.
Eski düzen yönetmleri
Izgara sistemleri, CSS mizanpajlarında kullanılan çok yaygın bir özelliktir ve CSS Grid Layout'tan önce kayan öğeler veya diğer mizanpaj özelliklerinde kullanılmaktaydılar. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edin ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırın. Bu derste, daha eski bir projede çalışıyorsanız nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyceğiz.
Eski tarayıcıları desteklemek
Bu derste, tasarımlarınız için ana yerleşim yöntemleri olarak Flexbox ve Grid'i kullanmanızı öneririz. Bununla birlikte, sitenize, kullandığınız yöntemleri desteklemeyen eski  tarayıcıları kulllanan ziyaretçiler olacaktır. Bu, web'de her zaman geçerli olacaktır — yani özellikler geliştirildikçe, farklı tarayıcılar farklı şeylere öncelik verecektir. Bu derste, eski teknoloji kullanıcılarını engellemeden modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.
Değerlendirme: Temel düzeni anlama
Bir web sayfası düzenleyerek farklı düzen yöntemlerini hakkındaki bilginizi test etmek için bir değerlendirme.

Ayrıca bakınız

Pratik konumlandırma örnekleri
Bu derst, konumlandırmayla ne tür şeyler yapabilceğinizi göstermek için bazı gerçek dünya örneklerini nasıl oluşturacağınızı gösterir.