Proje: Kulüp Sitesine Stil

Bu projede HTML bölümündeki Proje 3’te yaptığınız üç sayfalı kulüp sitesini tasarlayacaksınız. Bu bir kodlama egzersizi değil: Kodu kendiniz yazın, takıldığınız yerde ilgili derse dönün.

Proje 3’ü yapmadıysanız önce onu tamamlayın. Bu projede HTML’e neredeyse hiç dokunmayacaksınız. Stilleri kaldırıp sitenizin yalnızca CSS dosyasıyla nasıl değiştiğini görmek, bu bölümün asıl amacıdır.

Başlarken

1. kulup klasörünüzdeki stil.css dosyasını açın.
2. Sayfalarınızda style niteliği varsa içindeki kuralları bu dosyaya taşıyın.
3. Dosyanın başına temel kurallarınızı ve değişkenlerinizi yazın.
4. Önce telefon genişliğinde çalışın, geniş ekranı en sona bırakın.

Tasarım değişkenleri

:root içinde en az şunları tanımlayın:

• Zemin ve yazı renkleri
• Bir vurgu rengi
• Bir yazı tipi listesi
• Bir boşluk ölçüsü

Dosyanın geri kalanında renkleri elle yazmayın, yalnızca var() kullanın.

Bileşenler

Bu parçaların her biri kendi sınıfıyla yazılmalı ve her sayfada aynı görünmelidir:

• Üst menü: Geniş ekranda yan yana, dar ekranda alt alta. Bulunduğunuz sayfanın bağlantısı diğerlerinden farklı görünsün.
• Düğme: Temel görünüm ve en az bir çeşit.
• Etkinlik tablosu: Satırlar sırayla renklendirilsin, üzerine gelinen satır belli olsun.
• Form: Alanlar düzenli dursun. Hatalı alanlar ve odaklanan alan görsel olarak belli olsun.

Takıldıysanız: Hangi ders nerede işe yarar?

• Etkinlik tablosu için :nth-child(even): Yapısal Seçiciler
• Form alanları için :focus-visible ve :invalid: Durum Seçicileri
• Menü için flex-wrap: Uyumlu Flexbox ve Grid
• Başlığın altındaki çizgi için ::after: Sözde Elemanlar

Her ekrana uyum

• Sayfa 320 piksel genişlikte yana taşmamalı.
• En az bir min-width sorgusu yazın.
• Ana sayfada bir düzen, örneğin kulübün faaliyet kartları, auto-fit ile sütun sayısını kendisi belirlesin.
• Resimler ve gömülü içerikler kutularından taşmasın.

Karanlık mod

prefers-color-scheme: dark sorgusu ile değişkenlerin değerini değiştirin. Doğru kurduysanız başka bir kurala dokunmanız gerekmez. İşletim sisteminizin temasını değiştirerek deneyin.

Hareket

• Düğmelerde ve bağlantılarda kısa bir transition kullanın.
• İsterseniz sayfa açılırken hafif bir giriş animasyonu ekleyin.
• prefers-reduced-motion açıkken hareketler kapansın.

Kontrol listesi

Bitirdiğinizde şunların hepsini kontrol edin:

• Sayfalarda style niteliği ve <style> etiketi yok, bütün CSS tek bir dosyada.
• Üç sayfa da aynı stil.css dosyasını kullanıyor.
• Renkler değişkenlerden geliyor. Vurgu rengini tek satırda değiştirince bütün site değişiyor.
• Seçicilerin çoğu tek bir sınıf ve !important hiç yok.
• Yazı ile arka plan arasındaki karşıtlık yeterli, karanlık modda da.
• Tab tuşuyla bütün bağlantı ve düğmeler gezilebiliyor, odak her zaman görünüyor.
• 320, 768 ve 1280 piksel genişliklerde sayfa düzgün görünüyor.
• Karanlık mod ve hareket azaltma ayarları çalışıyor.
• CSS dosyası, W3C CSS doğrulayıcıdan hatasız geçiyor.