Proje: Ürün landing sayfası

5 derslik projenin genel bakışı: bir ürün için landing page.

Proje: TaskFlow landing sayfası

Bu 5 derslik projede TaskFlow adlı görev yönetimi aracı için bir landing sayfası yapacaksın. Her derste sayfaya bir bölüm ekleyecek, son derste tam sayfayı elinde tutacaksın.

Şu bölümleri kuracaksın:

Hero: slogan ve eylem düğmesi
Özellikler: ürün yetenekleri
Fiyatlandırma: plan tablosu
Header ve footer: menü ve telif

HTML iskeleti, başlıklar, bağlantılar, listeler, tablolar ve anlamsal etiketler kullanacaksın.

Landing sayfa yapısı

İyi bir landing sayfa tek bir hedefe odaklanır: ziyaretçiyi kaydolmaya ya da satın almaya yöneltmek. Bunun için sayfayı bölümlere ayırırsın.

Hero: büyük başlık, kısa açıklama ve eylem düğmesi
Özellikler: ürünün sunduğu değer maddeleri
Fiyatlandırma: planları karşılaştıran tablo
Header: logo ve menü bağlantıları
Footer: telif ve yardımcı bağlantılar

Her bölümü anlamsal etiketlerle sınırlarsın.

Uygulama Boş HTML belge iskeletini yaz

Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde <!DOCTYPE html>, <html>, <head> ve boş <body> bulunsun. lang, meta ve başlıkları sonraki derslerde ekleyeceksin.

Örnek çözümü göster

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Kendini test et

Bir landing sayfanın temel amacı nedir?
- Site haritası göstermek
- Ziyaretçiyi bir eyleme yöneltmek
- Tüm ürünleri listelemek
- Yönetici paneli sunmak
Cevabı göster

Ziyaretçiyi bir eyleme yöneltmek — Doğru. Landing sayfa ziyaretçiyi kaydolma veya satın alma gibi tek bir eyleme odaklar.

HTML belgesinin ilk satırını yaz

____
<html>
  <head></head>
  <body></body>
</html>

Cevabı göster

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

Landing sayfa bölümünü rolüyle eşleştir

Hero

Slogan ve eylem
Özellikler

Ürün yetenekleri
Fiyatlandırma

Plan tablosu
Footer

Telif ve bağlantılar

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

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler