Proje: Landing sayfası

5 derslik projenin genel bakışı: bir ürün landing sayfası kuracaksın.

Proje: Landing sayfası

Bu 5 derslik projede TaskFlow adlı bir görev yönetim uygulaması için landing (açılış) sayfası biçimlendireceksin. Her derste stil sayfasına bir parça ekleyecek, son derste tam bir landing sayfası elinde olacak.

Projede şunları kullanacaksın:

Flexbox ile hero, özellik ve fiyat bölümleri
justify-content ve align-items ile hizalama
flex-wrap ve gap ile duyarlı kart düzeni
box-shadow ve border-radius ile kart görselliği
Yorumlarla bölümleri ayırma

Hazırsan başlayalım.

Proje yol haritası

Projede her ders stil sayfasına yeni bir bölüm ekler. Bir önceki dersin yazdığın kod, sonraki dersin başlangıç kodu olur. Böylece dosya adım adım büyür.

Yol haritası:

Hero bölümü: esnek kapsayıcı ve arka plan rengi
Özellik listesi: kartların alt satıra geçişi ve boşlukları
Fiyat kartları: dikey dizilim ve gölge
Proje sonu: bölüm yorumları ve alt bilgi

Hedef landing sayfası

TaskFlow landing sayfasında dört bölüm olacak: üstte hero (büyük başlık ve çağrı), altında özellikler (kart listesi), sonra fiyatlandırma (plan kartları) ve en altta alt bilgi. Her bölümü ayrı bir seçiciyle biçimlendireceğiz.

Seçiciler: .hero, .features, .feature-card, .pricing, .price-card ve .footer. İlk adımda dosyaya bir başlık yorumu ekleyerek başlayacağız.

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

Projeye başlarken stil sayfasının en üstüne bir yorum ekle. Yorum TaskFlow sözcüğünü 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 ders boş bir dosyayla başlar
- Her dersin başlangıç kodu önceki dersin çözümünü içerir
- Başlangıç kodu yalnızca ilk derste görünür
- Başlangıç kodu her ders değişir, önceki silinir
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

Hero bölümü

display: flex, background-color
Özellik listesi

flex-wrap, gap, border-radius
Fiyat kartları

flex-direction, box-shadow
Proje sonu

yorumlar, alt bilgi bölümü

Sıradaki ders: Hero bölümü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler