Proje: Portföy kartı

CSS kursu · Başlangıç · Ders 49/82

5 derslik projenin genel bakışı: bir portföy kartı kuracaksın.

Proje: Portföy kartı

Bu 5 derslik projede bir portföy kartı biçimlendireceksin. Kart; bir görsel, başlık ve kısa açıklama içeren, web sitelerinde sıkça rastlanan bir ögedir.

Projede bir tasarımcının kartını sıfırdan kuracaksın. Her derste stil sayfasına bir parça ekleyecek, son derste tamamlanmış bir kart elinde olacak.

Şunları kullanacaksın:

Sınıf seçici (.card) ve kutu modeli
Arka plan görseli ve yazı tipi
Gölge ve kenarlık
Yorumlarla bölümleri ayırma

Proje yol haritası

Projeyi adım adım şöyle kuracağız:

Başlangıç: dosyaya açıklayıcı bir yorum ekle.
Kart iskeleti: .card sınıfına genişlik, iç boşluk, kutu boyutlandırma ve köşe yuvarlama ver.
Görsel ve başlık: .card-hero için arka plan görseli, .card-title için renk ve yazı tipi ekle.
Gölge ve kenarlık: .card için gölge ve kenarlık yaz.
Proje sonu: bölümleri yorumlarla ayır ve açıklama metnini ekle.

Her dersin başlangıç kodu önceki dersin çözümünü içerir; sen sadece yeni parçayı eklersin.

Hedef dosya yapısı

Proje sonunda elinde şu yapı olacak:

Dosya başlığı: en üstte açıklayıcı yorum
Kart iskeleti: .card bölümü (genişlik, iç boşluk, köşe yuvarlama, 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)

Bu yapıyı 5 derste adım adım kuracaksın.

Uygulama Stil sayfasına başlık yorumu ekle

Projeye başlarken stil sayfasının en üstüne bir yorum ekle. Yorum Ayşe Tasarım ve Portföy kartı sözcüklerini içersin. CSS yorumları /* ... */ biçiminde yazılır ve tarayıcı bunları görmez; yalnızca kaynağı okuyan kişiye açıktır. Sonraki derslerde bu dosyayı adım adım dolduracağız.

Kendini test et

Proje grubunda başlangıç kodu nasıl çalışır?
- Her dersin başlangıç kodu önceki dersin çözümünü içerir
- Her ders boş bir dosyayla başlar
- Başlangıç kodu yoktur, her şey sıfırdan yazılır
- Başlangıç kodu yalnızca son derste görünür
Cevabı göster

Her dersin başlangıç kodu önceki dersin çözümünü içerir — Doğru. Projede başlangıç kodu her adımda birikir; sen sadece yeni parçayı eklersin.
Dersleri ekledikleri parçayla eşleştir

Başlık yorumu

/* açıklama */
Kart iskeleti

width, padding
Görsel ve başlık

background-image
Gölge ve kenarlık

box-shadow, border
Proje sonu

yorumlar + .card-text

.card sınıf seçicisini tamamla

____ {
  /* kart bildirimleri buraya */
}

Cevabı göster

.card {
  /* kart bildirimleri buraya */
}

Başlangıç bölümündeki tüm dersler

Proje: Portföy kartı