Program Studi Bisnis Digital • FEB

Landing Page & Pemrograman Web

Pertemuan 10 — Lab Startup Bisnis Digital

Dari prototipe Figma yang sudah diuji minggu lalu menuju halaman nyata di internet: anatomi landing page yang mengonversi, dasar HTML/CSS/JavaScript, dan cara menerbitkannya secara gratis.

RPS MINGGU 11 • 2X50 MENIT

Selamat pagi/siang, Anda semua. Minggu lalu tim startup Anda sudah menggambar wireframe, menyambungkannya jadi prototipe interaktif di Figma, dan mengujinya ke dua teman sekelas. Hari ini kita ambil langkah besar berikutnya: mengubah prototipe yang masih berupa gambar itu menjadi halaman sungguhan yang bisa dibuka siapa saja lewat sebuah tautan di internet, sama seperti saat Anda membuka bbca.co.id atau halaman promo Tokopedia. Kita akan bahas dulu anatomi landing page yang benar-benar mengonversi pengunjung jadi calon pelanggan, lalu masuk ke dasar-dasar pemrograman web yaitu HTML, CSS, dan JavaScript tanpa asumsi Anda pernah menulis kode sebelumnya, dan menutup dengan cara menerbitkan halaman itu secara gratis. Di akhir pertemuan, kelompok Anda akan punya landing page pertama yang benar-benar hidup di internet.

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda diharapkan mampu menyusun landing page yang mengonversi dan menerbitkannya sebagai halaman web nyata di internet.

CAPAIAN 1

ANATOMI

Menjelaskan elemen wajib landing page dan prinsip AIDA dalam menyusun pesan yang mengonversi.

CAPAIAN 2

HTML/CSS

Memahami struktur dasar HTML dan cara CSS mendandani tampilan halaman web.

CAPAIAN 3

BANGUN

Memilih jalur membangun landing page: no-code atau kode dasar, sesuai bujet dan waktu tim.

CAPAIAN 4

TERBIT

Menerbitkan (deploy) landing page ke internet lewat domain dan hosting gratis.

Bagian 1 dari 3

Anatomi Landing Page yang Mengonversi

Sebelum menulis satu baris kode pun, pahami dulu apa yang membuat pengunjung mau bertindak.

Landing Page vs Website: Beda Tujuan, Beda Struktur

Website Biasa

Banyak halaman & menu navigasi (Beranda, Produk, Tentang Kami)
Tujuan: informasi lengkap, eksplorasi bebas pengunjung
Contoh: situs resmi perusahaan besar seperti Telkomsel

Landing Page

Satu halaman fokus, tanpa menu yang mengalihkan perhatian
Tujuan: satu aksi spesifik — daftar, beli, unduh, isi form
Contoh: halaman promo "Daftar Beta Gratis" sebuah aplikasi startup

Aturan emas: landing page yang baik biasanya tidak punya menu navigasi keluar. Setiap elemen di halaman harus mengarahkan pengunjung ke satu tombol call-to-action (CTA), bukan membuka jalan keluar.

Enam Elemen Wajib di Setiap Landing Page

HERO

Judul besar & gambar utama, terlihat tanpa perlu scroll (above the fold).

VALUE PROP

Satu kalimat: apa manfaat utama produk bagi pengunjung.

CTA

Tombol aksi jelas: "Daftar Gratis", "Coba Sekarang" — kontras & menonjol.

BUKTI

Testimoni, logo klien, atau angka pengguna (social proof).

FITUR

2–4 fitur utama dijelaskan singkat, bukan daftar panjang teknis.

FOOTER

Kontak, media sosial, dan CTA kedua sebagai kesempatan terakhir.

Enam elemen ini adalah kerangka yang bisa Anda cek di hampir semua landing page yang berhasil, dari startup lokal sampai aplikasi besar. Hero harus langsung terlihat begitu halaman dibuka, tanpa pengunjung perlu menggulir layar, karena riset menunjukkan sebagian besar pengunjung memutuskan bertahan atau pergi dalam hitungan detik pertama. Value proposition harus satu kalimat tajam, bukan paragraf panjang — bandingkan dengan tagline aplikasi seperti "Belanja pasar tanpa antre" yang langsung jelas manfaatnya. Tombol CTA harus mencolok dan konsisten warnanya, mengulang prinsip hierarchy yang sudah kita bahas minggu lalu. Bukti sosial seperti testimoni atau jumlah pengguna terdaftar meyakinkan pengunjung ragu. Fitur cukup dua sampai empat poin saja, jangan membebani. Footer sering dilupakan padahal ini kesempatan terakhir menangkap pengunjung yang hampir pergi.

Coba Sendiri: Susun Urutan Elemen Landing Page Anda

Urutkan keenam elemen wajib dari Hero sampai Footer, lalu lihat apakah urutannya sudah menuntun pengunjung dengan benar.

Prinsip AIDA: Menyusun Pesan yang Mengonversi

AIDA adalah kerangka copywriting klasik: pesan landing page Anda harus menuntun pengunjung melewati empat tahap ini berurutan dari atas ke bawah halaman, bukan acak.

Coba Sendiri: Skor Pesan AIDA Landing Page Anda

Nilai seberapa kuat tiap tahap Attention, Interest, Desire, Action pada draft pesan landing page kelompok Anda.

Hitung dari Nol: Conversion Rate & Biaya per Leads

Landing page startup kelompok Anda dapat 2.000 pengunjung bulan ini dari kampanye iklan senilai Rp2.000.000. Conversion rate rata-rata industri B2C sekitar 2,5%.

Langkah	Perhitungan	Nilai
1. Total pengunjung bulan ini	diketahui	2.000
2. Conversion rate rata-rata industri	diketahui	2,5%
3. Estimasi leads (versi awal)	2,5% × 2.000	50 leads
4. Cost per acquisition (CPA) awal	Rp2.000.000 ÷ 50	Rp40.000/leads
5. Setelah optimasi CTA, conversion naik ke	diketahui	4%
6. Leads baru & CPA baru	4% × 2.000 = 80; Rp2.000.000 ÷ 80	80 leads • Rp25.000/leads

HASIL OPTIMASI

CPA turun Rp15.000 (37,5%)

Bagian 2 dari 3

Dasar Pemrograman Web: HTML, CSS, JavaScript

Tiga bahasa dasar di balik setiap halaman web yang pernah Anda buka.

Cara Kerja Web: Browser, Client, dan Server

HTML: Kerangka Konten Halaman

HTML (HyperText Markup Language) menyusun apa isi halaman memakai tag berpasangan — bukan tampilan, hanya struktur.

<!-- kerangka landing page sangat sederhana -->
<h1>Belanja Pasar Tanpa Antre</h1>
<p>Titip belanja pasar tradisional, diantar dalam 30 menit.</p>
<button>Daftar Gratis</button>

<h1>

Judul utama halaman

<p>

Paragraf teks biasa

Tombol yang bisa diklik

CSS: Mendandani Tampilan Halaman

CSS (Cascading Style Sheets) mengatur bagaimana rupa elemen HTML — warna, ukuran, jarak, posisi.

/* mendandani tombol daftar */
button {
  background-color: #16a34a;  /* warna hijau */
  color: white;
  padding: 14px 28px;
  border-radius: 8px;  /* sudut membulat */
}

Analogi: HTML adalah kerangka rumah (dinding, pintu, jendela), CSS adalah cat, furnitur, dan dekorasi. Rumah yang sama bisa terlihat sangat berbeda hanya dengan mengganti CSS-nya.

JavaScript: Menghidupkan Interaktivitas

JavaScript membuat halaman merespons tindakan pengguna tanpa perlu memuat ulang seluruh halaman.

// validasi sederhana: tombol aktif hanya jika email diisi
if (email.value === "") {
  alert("Mohon isi email Anda dulu");
}

TANPA JAVASCRIPT

Form kosong tetap terkirim, error muncul setelah reload halaman.

DENGAN JAVASCRIPT

Peringatan langsung muncul saat itu juga, tanpa reload — terasa "hidup".

Bagian 3 dari 3

Dari No-Code ke Publish: Membangun Landing Page

Memilih jalur yang realistis untuk tim Anda, menyusun file, lalu menerbitkannya ke internet.

Opsi Membangun: No-Code vs Menulis Kode

Jalur	Contoh Alat	Cocok Untuk
No-Code	Carrd, Framer, Notion-to-site	Tim tanpa anggota yang bisa coding, butuh cepat & murah
Website Builder	Webflow, WordPress + Elementor	Butuh lebih banyak kustomisasi, tetap tanpa menulis kode inti
Kode Dasar	HTML/CSS/JS langsung, atau template gratis	Tim punya anggota belajar coding, ingin kontrol penuh
Sewa Developer	Freelancer (Sribulancer, Fastwork)	Kebutuhan kompleks, ada anggaran khusus

Untuk MVP landing page validasi ide (seperti yang kita bahas di Lean Startup, Pertemuan 4), no-code hampir selalu jalur paling efisien — Anda bisa terbit dalam hitungan jam, bukan minggu.

Hitung dari Nol: Estimasi Biaya Bangun Landing Page

Bandingkan dua jalur untuk landing page MVP kelompok Anda: menulis kode dengan bantuan freelancer vs no-code.

Langkah	Perhitungan	Nilai
1. Jam kerja freelancer (kode dasar)	diketahui	20 jam
2. Tarif per jam freelancer	diketahui	Rp75.000/jam
3. Biaya jasa kode dasar	20 × Rp75.000	Rp1.500.000
4. Domain .com (1 tahun)	diketahui	Rp150.000
5. Total jalur kode dasar	Rp1.500.000 + Rp150.000	Rp1.650.000
6. Total jalur no-code (paket + domain, 1 tahun)	diketahui	Rp300.000

SELISIH UNTUK MVP AWAL

Hemat Rp1.350.000 (~82%)

Struktur Folder Proyek Web Sederhana

Domain, Hosting, & Deploy Gratis

DOMAIN

ALAMAT

Nama unik halaman Anda, mis. namastartup.com. Berbayar ~Rp150.000/tahun.

HOSTING

PENYIMPANAN

Server tempat file HTML/CSS/JS disimpan agar bisa diakses 24 jam.

DEPLOY

TERBIT

Proses mengunggah file dari komputer Anda ke hosting agar "hidup" di internet.

Layanan Gratis	Cocok Untuk
Netlify / Vercel	Landing page HTML/CSS/JS dasar, drag-and-drop folder
GitHub Pages	Tim yang sudah memakai Git untuk kerja kelompok
Carrd (built-in)	Jalur no-code, publish langsung dari editor

Checklist Sebelum Menekan Tombol Publish

Cek	Kenapa Penting
Terbuka rapi di layar HP (mobile-responsive)	>70% trafik iklan startup Indonesia datang dari ponsel
Waktu muat halaman <3 detik	Pengunjung cenderung pergi jika loading terlalu lama
Tombol CTA terlihat tanpa scroll	Menyambung prinsip above the fold di Bagian 1
Judul halaman & deskripsi singkat (SEO dasar)	Agar muncul rapi saat dibagikan di WhatsApp/pencarian Google
Semua tautan & tombol sudah dicoba klik	Menghindari tombol "mati" saat kampanye sudah berjalan

Sebelum kelompok Anda mengumumkan landing page ke publik, lima cek ini wajib dilakukan dulu. Pastikan tampilannya rapi di layar HP, karena sebagian besar pengunjung dari iklan Instagram atau TikTok akan membuka lewat ponsel, bukan laptop. Waktu muat yang lambat membuat calon pelanggan pergi sebelum sempat membaca apa pun, jadi kompres ukuran gambar sebelum diunggah. Pastikan tombol CTA tetap terlihat tanpa perlu menggulir layar, mengulang prinsip hero yang kita bahas di awal. Judul dan deskripsi singkat penting supaya saat tautan dibagikan di grup WhatsApp, pratinjaunya terlihat profesional, bukan sekadar alamat mentah. Terakhir, coba klik semua tombol dan tautan sendiri sebelum publish, karena tombol yang tidak berfungsi saat kampanye sudah berjalan akan merusak kepercayaan calon pelanggan.

Ringkasan Pertemuan Ini

Yang Sudah Kita Bahas

Landing page vs website: satu halaman, satu tujuan aksi
Enam elemen wajib & prinsip AIDA untuk pesan yang mengonversi
Dasar HTML (struktur), CSS (tampilan), JavaScript (interaktivitas)
Jalur no-code vs kode dasar, beserta estimasi biaya
Domain, hosting, deploy gratis, dan checklist sebelum publish

Menuju Pertemuan Berikutnya

Pertemuan 11: Strategi Pemasaran Digital
Landing page hari ini menjadi tujuan trafik kampanye iklan
Siapkan tautan landing page kelompok yang sudah terbit

Mari kita rangkum perjalanan hari ini. Kita mulai dari memahami kenapa landing page berbeda dari website biasa dan harus fokus pada satu aksi, lalu enam elemen wajib dan prinsip AIDA yang menyusun pesan persuasif seperti yang biasa Anda lihat di iklan Instagram. Kita lanjut ke dasar tiga bahasa pemrograman web, HTML untuk kerangka, CSS untuk tampilan, dan JavaScript untuk interaktivitas, tanpa Anda harus jadi programmer profesional. Kemudian kita bandingkan jalur no-code dan kode dasar secara angka, dan menutup dengan cara menerbitkan halaman itu ke internet lewat domain dan hosting gratis. Minggu depan, landing page yang sudah kelompok Anda terbitkan hari ini akan menjadi tujuan trafik untuk kampanye pemasaran digital yang akan kita rancang bersama — jadi pastikan tautannya sudah aktif dan bisa dibuka sebelum pertemuan berikutnya.

Latihan Kelompok Hari Ini

Instruksi (dikerjakan 40–50 menit di kelas, dilanjutkan sebagai tugas):

Susun struktur AIDA (Attention–Interest–Desire–Action) untuk landing page startup kelompok Anda, tuliskan satu kalimat per tahap.
Pilih jalur: no-code (Carrd/Framer) atau kode dasar (HTML/CSS sederhana), sesuai kemampuan anggota tim.
Bangun landing page dengan minimal enam elemen wajib (Slide 5), berbasis wireframe & prototipe Figma minggu lalu.
Jalankan checklist sebelum publish (Slide 18) — cek tampilan di HP masing-masing anggota tim.
Terbitkan (deploy) lewat layanan gratis (Netlify/Vercel/Carrd) hingga menghasilkan satu tautan aktif.

Kumpulkan tautan landing page yang sudah terbit sebelum pertemuan berikutnya. Tautan ini akan menjadi tujuan trafik kampanye pemasaran digital di Pertemuan 11.

Sekarang giliran kelompok Anda praktik langsung, dan saya akan berkeliling membantu terutama untuk kelompok yang memilih jalur kode dasar. Ikuti lima langkah berurutan: susun dulu pesan AIDA-nya di kertas sebelum menyentuh alat apa pun, karena pesan yang berantakan tetap gagal walau tampilannya indah. Pilih jalur yang realistis dengan kemampuan tim Anda saat ini, tidak perlu memaksakan kode dasar kalau tidak ada anggota yang familiar. Pastikan enam elemen wajib semua ada, dan jangan lupa jalankan checklist di slide sebelumnya, terutama cek tampilan mobile karena itu yang paling sering terlewat. Langkah terakhir dan terpenting: benar-benar tekan tombol publish sampai Anda mendapat sebuah tautan yang bisa dibuka dari HP siapa saja, karena tautan aktif inilah yang akan kita pakai langsung sebagai tujuan kampanye iklan di pertemuan berikutnya.