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: .card bölümü (genişlik, iç boşluk, kenarlık, gölge)
Kapak görseli: .card-hero bölümü (arka plan görseli)
Başlık: .card-title bölümü (renk, yazı tipi)
Açıklama: .card-text bö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:

.card bölümünden önce /* Kart iskeleti */ yorumunu ekle.
.card-hero bölümünden önce /* Kapak görseli */ yorumunu ekle.
Dosyanın sonuna /* Açıklama */ yorumu ve bir .card-text sı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

Sıradaki ders: Liste stili türü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler