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