CSS
Proje sonu - Landing sayfası
Tüm parçaları birleştirip landing sayfasını tamamlarsın.
Proje sonu: tüm parçaları birleştir
Son adıma geldin. Stil sayfasında başlık yorumu ve hero, özellikler, fiyat bölümleri var. Şimdi iki şeyi daha ekleyeceksin: bölüm yorumları ve alt bilgi bölümü.
Yorumlar dosyayı sen ve başkaları için okunabilir tutar. Tarayıcı bunları göstermez ama kaynağı görüntüleyen herkes okur. Alt bilgi bölümü ise sayfanın en altındaki bağlantı ve düğmeleri esnek düzenler.
Yorum yazma pratikleri
CSS yorumları /* ... */ ile yazılır. Her bölümün üstüne kısa bir yorum koymak, dosyanın yapısını hızlıca görmeyi sağlar. Yorum içinde bölümün ne işe yaradığını tek satırda yazmak yeter.
Örneğin hero bölümünden önce /* Hero bölümü */, özelliklerden önce /* Özellikler */ yazmak dosyayı bölümlere ayırır. Uzun açıklamalar yerine kısa ve öz ifadeler tercih et.
Tam dosya yapısı
Son dosyada şu bölümler olacak: başlık yorumu, hero, özellikler, fiyatlandırma ve alt bilgi. Her bölüm kendi yorumuyla ayrılmış. Bu yapı, ekibi olan ve birden çok kişinin dokunduğu dosyalarda işe yarar.
Alt bilgi bölümünde .footer esnek kapsayıcı, .footer-btn ise yuvarlatılmış köşeli ve gölgeli düğme olacak. Şimdi son kodu yaz ve projeyi tamamla.
Uygulama Bölüm yorumlarını ve alt bilgi bölümlerini ekle
Önceki dersin tüm bölümlerini içeren dosyayı al. Şu eklemeleri yap:
.hero bölümünden önce /* Hero bölümü */ yorumunu ekle..features bölümünden önce /* Özellikler */ yorumunu ekle..pricing bölümünden önce /* Fiyatlandırma */ yorumunu ekle..price-card bölümünden sonra /* Alt bilgi */ yorumu, bir .footer ve bir .footer-btn bölümü ekle. .footer içine display: flex, flex-wrap: wrap ve gap: 12px yaz. .footer-btn içine border-radius: 6px ve box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) yaz.
Örnek çözümü göster
/* TaskFlow landing sayfası */
/* Hero bölümü */
.hero {
display: flex;
justify-content: center;
align-items: center;
background-color: #1a2b4a;
}
/* Özellikler */
.features {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.feature-card {
flex-grow: 1;
border-radius: 8px;
}
/* Fiyatlandırma */
.pricing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.price-card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Alt bilgi */
.footer {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.footer-btn {
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
Kendini test et
-
CSS yorumları neden yararlıdır?
- Tarayıcı bunları sayfa üzerinde gösterir
- Kaynağı okuyana açıklama bırakır, tarayıcı görmez
- Sayfa yüklenmesini hızlandırır
- Renkleri otomatik ayarlar
Cevabı göster
Kaynağı okuyana açıklama bırakır, tarayıcı görmez — Doğru. Yorumlar kaynağı okuyan kişiye not bırakır; tarayıcı bunları yok sayar.
-
CSS yorumunu başlatan işareti tamamla
____ Bu dosya TaskFlow landing sayfasını biçimlendirir */
Cevabı göster
/* Bu dosya TaskFlow landing sayfasını biçimlendirir */
-
Proje kavramlarını anlamlarıyla eşleştir
- display: flex
- Esnek kapsayıcı
- flex-wrap: wrap
- Alt satıra geçiş
- gap
- Ögeler arası boşluk
- box-shadow
- Gölge ile derinlik
- border-radius
- Yuvarlatılmış köşe
Sıradaki ders: Grid container nedir?
