Project pertama yang benar-benar saya publish live adalah website untuk penjualan kost teman saya. Sebelum itu, semua project saya cuma berakhir di localhost — jalan di komputer saya, tidak di tempat lain. Saat teman itu tanya “kamu bisa bantu bikin web untuk kost saya?”, saya bilang iya, padahal dalam hati ragu. Tapi itu kesempatan emas untuk belajar deployment. Saya ceritakan pengalaman ini supaya kamu yang baru mulai tidak terjebak di localhost selamanya.
Ide & Planning
Saya mulai dengan brainstorm bareng teman (calon klien). Apa yang dia mau? Fotonya berapa? Harga per tipe kamar? Ada kontak via WhatsApp atau form? Saya buat mockup di Figma dulu — meskipun jelek, ini penting supaya tidak coding sambil bingung arah. Setelah disetujui, baru mulai ngoding.
Development
Tech stack: HTML, CSS, JavaScript murni. Saya pikir ini project kecil, framework overkill. 5 hari kerja, sekitar 15 jam total. Saya buat 1 landing page dengan section: hero (foto kamar + tagline), galeri (grid 6 foto), fitur (icons + text), pricing (3 card), testimoni (2 orang), dan footer dengan kontak.
Banyak belajar di tahap ini. Responsive design awalnya bikin pusing. Saya pakai CSS Grid untuk galeri dan Flexbox untuk card. Pertama kali coba, di mobile layoutnya berantakan. Setelah baca-baca, saya paham konsep mobile-first: tulis CSS untuk mobile dulu, baru naik ke desktop pakai media query @media (min-width: 768px).
Persistent Bug yang Bikin Grogi
Salah satu bug yang paling bikin saya grogi: di iPhone Safari, ada bagian layout yang aneh — tombol “Pesan Sekarang” jadi terlalu kecil saat di-tap. Saya debug berkali-kali, akhirnya nemu solusi: tambah -webkit-tap-highlight-color: transparent dan ubah touch target jadi minimum 44px (Apple HIG standard).
Kesalahan lain: saya pakai position: fixed untuk navbar, tapi lupa kasih background-color, jadi saat scroll, konten di belakang navbar tembus pandang. Fix cepat, tapi pelajaran penting: always test di real device, bukan cuma responsive view Chrome DevTools.
Deployment: Saat Terselip Jantung
Setelah website jadi, waktunya upload. Saya kira ini gampang — upload ke hosting, selesai. REALITY CHECK: pilih hosting mana? Domain beli di mana? Bagaimana setup DNS? Saya kecilmikan ini.
Saya akhirnya beli domain di Namecheap (~$10/tahun untuk .com) dan shared hosting di Hostinger (~$2/bulan). Setup DNS: arahkan nameserver domain ke hosting, tunggu propagasi 24 jam. Saat pertama website tidak bisa diakses, jantung sempat turun. Ternyata DNS belum propagasi.
Upload file: saya pakai FileZilla FTP. Upload semua file ke public_html. Wait 5 menit, buka domain di browser. Loading… loading… muncul! Tapi tanpa CSS! Saya lupa upload folder assets/. Upload lagi, refresh. Akhirnya muncul dengan benar.
Tracking: saya pasang Google Analytics dan Search Console. Pertama kali lihat real-time visitor 1 (yang itu cuma saya sendiri), rasanya puas sekali. Dalam 2 minggu pertama, ada 50 pengunjung unik. Tidak banyak, tapi membuktikan website benar-benar live dan discoverable.
Feedback & Iterasi
Teman saya happy, tapi kasih feedback: “kalau bisa chat WhatsApp tidak perlu buka aplikasi dulu, lebih enak langsung dari web”. Saya riset, ketemu WhatsApp Click-to-Chat API: https://wa.me/6281234567890?text=Halo%20saya%20tertarik%20dengan%20kostnya. Tinggal pakai link ini di tombol “Pesan”, langsung buka WhatsApp dengan pesan pre-filled. Mudah, gratis, no backend.
Setelah live 1 bulan, teman saya bilang ada 8 pertanyaan masuk via WhatsApp, 2 di antaranya beneran konversi. Cuma 2 konversi dari 8 pertanyaan. Tapi buat pemilik kost kecil, itu sudah cukup signifikan — sebelum ini, jarang ada yang tanya dari online channel.
Pelajaran Penting
Jangan takut “belum siap”. Kalau tunggu sampai expert, tidak akan pernah mulai. Saya yang cuma bisa HTML/CSS/JS dasar berhasil deliver project. Skill belajar cepat lebih penting daripada skill sempurna. Mockup dulu sebelum ngoding. Malas bikin mockup = ngoding 2x lebih lama karena revisi terus. Bahkan sketsa di kertas cukup. Test di device asli. DevTools responsive mode tidak akurat 100%. Kalau bisa, tes di iPhone, Android, tablet sungguhan. Kalau tidak punya, pakai BrowserStack (ada free tier). Deployment bukan sihir. Pelajari dasar FTP/SFTP, DNS, nameserver, SSL. Ini skill yang tidak diajarkan di banyak kursus, tapi krusial. Dokumentasi proses. Saya tulis setiap step deployment di Notion. Saat project kedua, saya bisa deploy dalam 30 menit bukan 5 jam. Reuse knowledge.
Project pertama selalu ingatan. Banyak grogi, banyak salah, tapi juga banyak belajar. Yang penting: langsung publish. Setelah lewati hambatan mental “publish ke internet”, project kedua, ketiga, keempat akan jauh lebih mudah.