Proje sonu - Portföy kartı
Tüm parçaları birleştirip portföy kartını tamamlarsın.
Proje sonu: tüm parçaları birleştir
Son adıma geldin. Stil sayfasında başlık yorumu, .card, .card-hero ve .card-title bölümleri var. Şimdi iki şeyi daha ekleyeceksin: bölüm yorumları ve açıklama metni 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. Her bölümün üstüne kısa bir yorum yazmak, dosyanın yapısını hızlıca görmeyi sağlar. Açıklama metni bölümü de kartı tamamlayan son parçadır.
Yorum yazma pratikleri
Yorum yazarken şu noktalara dikkat et:
- Kısa tut: birkaç sözcük yeter. Uzun açıklamalar dosyayı kalabalıklaştırır.
- Konum önemli: yorum, açıkladığı bölümün hemen üstünde olmalı.
- Anlamlı yaz: 'bölüm' yerine 'Kart iskeleti' ya da 'Başlık' gibi açık yaz.
İyi yorumlar, aylar sonra döndüğünde de dosyayı hızlıca anlamanı sağlar.
Tam dosya yapısı
Proje sonunda dosyan şu bölümlere ayrılmış olacak:
- Dosya başlığı: en üstte açıklayıcı yorum
- Kart iskeleti:
.cardbölümü (genişlik, iç boşluk, kenarlık, gölge) - Kapak görseli:
.card-herobölümü (arka plan görseli) - Başlık:
.card-titlebölümü (renk, yazı tipi) - Açıklama:
.card-textbölümü (renk, yazı tipi)
Her bölümün üstünde kısa bir yorum olacak. Bu yapı, dosyayı tararken her bölümün ne yaptığını hemen görmeni sağlar.
Uygulama Bölüm yorumlarını ve .card-text bölümünü ekle
Önceki dersin tüm bölümlerini içeren dosyayı al. Şu eklemeleri yap:
.cardbölümünden önce /* Kart iskeleti */ yorumunu ekle..card-herobölümünden önce /* Kapak görseli */ yorumunu ekle.- Dosyanın sonuna /* Açıklama */ yorumu ve bir
.card-textsınıf seçici bölümü ekle; içine color: #4a5568 ve font-family: Georgia, serif bildirimlerini yaz.
Örnek çözümü göster
/* Ayşe Tasarım - Portföy kartı */
/* Kart iskeleti */
.card {
width: 320px;
padding: 24px;
box-sizing: border-box;
border-radius: 12px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Kapak görseli */
.card-hero {
background-image: url("kapak.jpg");
background-size: cover;
height: 140px;
}
.card-title {
color: #2a3d66;
font-family: Georgia, serif;
}
/* Açıklama */
.card-text {
color: #4a5568;
font-family: Georgia, serif;
}Kendini test et
-
CSS dosyasına bölüm yorumları eklemek neden yararlıdır?
/* Kart iskeleti */- Bölümleri açıklamak ve okunabilirliği artırmak için
- Stil değişikliklerini tarayıcıdan gizlemek için
- Sayfa yüklenmesini hızlandırmak için
- Renkleri otomatik olarak seçmek için
Cevabı göster
Bölümleri açıklamak ve okunabilirliği artırmak için — Doğru. Yorumlar dosyayı okuyan kişiye açıklama yazar; tarayıcı bunları görmez.
-
CSS yorumunu başlatan işareti tamamla
____ Kart iskeleti */Cevabı göster
/* Kart iskeleti */ -
Proje kavramlarını anlamlarıyla eşleştir
- background-image
- arka plan görseli
- box-shadow
- kart gölgesi
- border-radius
- köşe yuvarlama
- /* ... */
- açıklama yorumu