CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Proje: Landing sayfası

CSS kursu · Orta seviye · Ders 29/98

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ı:

  1. Hero bölümü: esnek kapsayıcı ve arka plan rengi
  2. Özellik listesi: kartların alt satıra geçişi ve boşlukları
  3. Fiyat kartları: dikey dizilim ve gölge
  4. 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

  1. 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.

  2. 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ü

Orta seviye bölümündeki tüm dersler

1 Flexbox temelleri

  1. Flex container nedir?
  2. Flex-direction
  3. Justify-content
  4. Align-items
  5. Flex-wrap
  6. Özet - Yatay menü

2 İleri flexbox

  1. Flex-grow
  2. Flex kısayolu
  3. Order
  4. Align-self
  5. Gap
  6. Özet - Kart ızgarası

3 Sözde sınıflar

  1. :hover ve :focus
  2. :nth-child
  3. :not ve :is
  4. :first-child ve :last-child
  5. :checked ve :disabled
  6. Özet - Etkileşimli liste

4 Sözde elementler

  1. ::before ve ::after
  2. Content özelliği
  3. ::first-letter ve ::first-line
  4. ::selection
  5. ::placeholder
  6. Özet - Dekoratif başlık

5 İleri seçiciler

  1. Kardeş seçiciler (+ ve ~)
  2. Öznitelik seçici desenleri
  3. :where ve :has
  4. Özet - Breadcrumb menü

6 Proje: Landing sayfası

  1. Proje: Landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat kartları
  5. Proje sonu - Landing sayfası

7 Grid temelleri

  1. Grid container nedir?
  2. Grid-template-columns
  3. Grid-template-rows
  4. Grid gap
  5. Repeat fonksiyonu
  6. Özet - Foto galeri

8 İleri grid

  1. Grid-column
  2. Grid-row
  3. Grid-template-areas
  4. Grid-area
  5. Minmax fonksiyonu
  6. Özet - Magazin düzeni

9 Duyarlı tasarım temelleri

  1. Görünüm alanı meta
  2. Media query temelleri
  3. Breakpoints
  4. Duyarlı tipografi
  5. Duyarlı görseller
  6. Özet - Duyarlı kart

10 Duyarlı düzen

  1. Mobil öncelikli yaklaşım
  2. Grid ile duyarlı düzen
  3. Flex ile duyarlı düzen
  4. Gizleme ve gösterme
  5. Yazdırma stilleri
  6. Özet - Çok sütunlu sayfa

11 Geçişler

  1. Transition nedir?
  2. Transition-property
  3. Transition-duration
  4. Timing function
  5. Transition-delay
  6. Özet - Hover efektleri

12 Dönüşümler

  1. Transform nedir?
  2. Translate
  3. Rotate
  4. Scale
  5. Skew
  6. Özet - Etkileşimli kart

13 CSS değişkenleri

  1. CSS değişkenleri nedir?
  2. Değişken tanımlama
  3. Var() fonksiyonu
  4. Değişken fallback
  5. Tema değiştirme
  6. Özet - Tasarım sistemi

14 Form stilleri

  1. Input stilleri
  2. Label ve placeholder
  3. Focus durumları
  4. Button stilleri
  5. Checkbox ve radio
  6. Özet - Kayıt formu

15 Tablo stilleri

  1. Tablo iskeleti
  2. Border-collapse
  3. Başlık hücreleri
  4. Zebra çizgiler
  5. Hover satırı
  6. Özet - Veri tablosu

16 SVG stilleri

  1. SVG nedir?
  2. Fill ve stroke
  3. SVG hover efektleri
  4. CurrentColor
  5. SVG ikonları
  6. Özet - İkon kümesi

17 Orta seviye finali

  1. Meydan okuma - Flexbox galeri
  2. Meydan okuma - Grid magazin
  3. Meydan okuma - Duyarlı navbar
  4. Meydan okuma - Form ve tablo
  5. Meydan okuma - Orta seviye projesi