Proyek 2: Landing Page Produk
Proyek penutup: membuat halaman penjualan sederhana dengan hero, fitur, harga, testimoni, FAQ, dan formulir berlangganan, lengkap dengan HTML yang bersih dan aksesibel.
Landing page: halaman yang mengajak bertindak
Landing page adalah halaman tunggal yang bertujuan membuat pengunjung melakukan satu hal: mendaftar, membeli, atau berlangganan. Bagian-bagian umumnya:
| Bagian | Isi | Elemen yang cocok |
|---|---|---|
| Hero | Judul kuat, penjelasan singkat, tombol ajakan | header, h1, p, a |
| Fitur | 3 keunggulan produk | section, article/div, h3 |
| Harga | Paket dan fiturnya | table atau kartu dengan ul |
| Testimoni | Kata pelanggan | blockquote + cite |
| FAQ | Pertanyaan umum | details + summary |
| Ajakan akhir | Formulir berlangganan | form |
Elemen baru: details dan summary
Dua elemen ini membuat bagian yang bisa dibuka-tutup tanpa JavaScript, cocok untuk FAQ:
<details>
<summary>Apakah ada uji coba gratis?</summary>
<p>Ya, 14 hari penuh tanpa kartu kredit.</p>
</details><summary> adalah judul yang selalu terlihat; isi lainnya muncul saat diklik. Tambahkan atribut open agar terbuka sejak awal.
Tips mengerjakan
- Mulai dari kerangka kosong dengan semua
sectiondanh2. - Tulis konten asli (bukan "lorem ipsum" semata); lebih menyenangkan dan realistis.
- Pastikan setiap tombol ajakan berupa tautan
<a>ke bagian formulir (#daftar). - Tutup dengan memeriksa heading,
alt, danlabel.
Selamat! Setelah proyek ini kamu sudah menguasai HTML. Langkah berikutnya: kursus CSS dari Nol untuk membuat halamanmu tampil cantik, lalu JavaScript untuk membuatnya hidup.