Bu klavuz üzerinde çalıştıysanız, bugün CSS düzeni oluşturmak ve eski CSS ile çalışmak için bilmeniz gerekenlerin temellerini kavramış olmalısınız. Bu alıştırma, çeşitli teknikler kullanarak basit bir web sayfası düzeni geliştirme yoluyla bilgilerinizin bir kısmını test edecektir.
| Ön Koşullar: | Bu değerlendirmeye başlamadan önce bu modüldeki tüm makaleler üzerinde çalışmış olmanız gerekmektedir. |
|---|---|
| Amaç: | Flexbox, Grid, Float ve Konumlandırma kullanarak CSS düzen yöntemlerinin anlaşılmasını test etmek. |
Başlangıç noktası
HTML, CSS ve altı resimden oluşan bir seti buradan indirin.
HTML belgesini ve stil sayfasını bilgisayarınızdaki bir dizine kaydedin ve görüntüleri images adlı bir klasöre ekleyin. index.html dosyasını bir tarayıcıda açtığınızda, temel stillere sahip ancak düzen içermeyen bir sayfayla karşılaşacaksınız; bu sayfa aşağıdaki resme benzer bir şekilde görünmelidir.
Bu başlangıç noktası, düzeninizin tüm içeriğini tarayıcı tarafından normal akışta görüntülendiği şekilde içerir.
Alternatif olarak, HTML ve CSS’yi yapıştırarak değerlendirmenizi yapmak için Glitch gibi bir site kullanabilirsiniz. Çevrimiçi bir düzenleyici kullanıyorsanız görüntüleri yüklemeniz ve src niteliklerindeki değerleri yeni görüntü konumlarına işaret edecek şekilde değiştirmeniz gerekeceğini unutmayın. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu belgenin baş kısmındaki bir <style> öğesine koymaktan çekinmeyin.
Proje özeti
Size bazı ham HTML, temel CSS ve görseller sağlandı – şimdi tasarım için bir düzen oluşturmanız gerekiyor.
Görevleriniz
Şimdi düzeninizi uygulamanız gerekiyor. Başarmanız gereken başlıklar şunlar:
- Navigasyon öğelerini, öğeler arasında eşit miktarda boşluk bırakarak bir satır halinde görüntülemek.
- Gezinme çubuğu içerikle birlikte kaydırılmalı ve ardından görüntü alanına ulaştığında görüntü alanının en üstünde takılı kalmalı.
- Makalenin içindeki resmin etrafına metin sarılmış olmalıdır.
- <article> ve <aside> öğeleri iki sütunlu bir düzen olarak görüntülenmelidir. Sütunlar esnek bir boyutta olmalıdır, böylece tarayıcı penceresi küçüldüğünde sütunlar da daralmalıdır.
- Fotoğraflar, görüntüler arasında 1 piksel boşluk olacak şekilde iki sütunlu bir ızgara olarak görüntülenmelidir.
İpuçları ve tavsiyeler
Bu düzeni elde etmek için HTML’yi düzenlemenize gerek olmayacak. Kullanmanız gereken teknikler şunlardır:
- Flexbox
- Grid
- Float
- Konumlandırma – Positioning
Bu görevlerden bazılarını gerçekleştirmenin birkaç yolu vardır ve genellikle doğru ya da yanlış tek bir yol yoktur. Birkaç farklı yaklaşım deneyin ve hangisinin en iyi sonucu verdiğini görün. Deneme yaparken notlar alın.
Örnek
Aşağıdaki ekran görüntüsü, tasarım için bitmiş düzenin nasıl görünmesi gerektiğine dair bir örnek göstermektedir:
