Tutorial: Cek Tampilan HP & Tablet Langsung dari Builder (Device Mode)
Sebelum publish, cek dulu tampilan website kamu di desktop, tablet, dan HP langsung dari preview builder — tanpa perlu buka device asli.
Website yang bagus di layar laptop belum tentu enak dilihat di HP. Daripada nebak-nebak atau bolak-balik buka dari HP asli, TanpaNgoding AI punya toggle Device Mode di preview builder — tinggal klik, tampilan langsung berubah sesuai ukuran layar yang mau dicek.
Sebelum lanjut, pastikan kamu sudah tahu cara bikin project baru dan kirim prompt pertama — baca dulu Tutorial: Bikin Aplikasi Toko Kue Online dari Nol Pakai TanpaNgoding AI kalau belum. Tutorial ini fokus langsung ke Device Mode saja.
1. Preview default: mode Desktop
Begitu buka builder, preview otomatis tampil dalam mode desktop — tiga ikon perangkat (desktop, tablet, ponsel) ada di pojok kanan atas preview panel, dengan ikon desktop aktif berwarna biru.
2. Klik ikon Tablet
Klik ikon tablet (di tengah), preview langsung menyempit ke lebar tablet. Perhatikan navigasi atas yang otomatis berubah jadi menu hamburger — ini nunjukkan responsive design halaman kamu beneran jalan, bukan cuma di-scale gambar.
3. Klik ikon Ponsel
Klik ikon ponsel (paling kanan) buat lihat versi mobile-nya. Semua elemen otomatis menyesuaikan — teks, tombol, spacing — persis kayak yang bakal dilihat pengunjung dari HP mereka.
Tinggal klik ikon desktop lagi kapan pun buat balik ke tampilan awal. Cek Device Mode ini jadi kebiasaan baik sebelum publish — biar nggak ada kejutan tampilan berantakan pas dibuka dari HP.
Video Tutorial
Mau lihat langsung alurnya jalan? Tonton video singkatnya di bawah ini:
Artikel Terkait
Tutorial: Bikin Aplikasi Toko Kue Online dari Nol Pakai TanpaNgoding AI
Panduan step-by-step bikin aplikasi toko kue online sederhana — dari buka builder, kirim prompt, sampai preview jadi — tanpa nulis kode sama sekali.
Tutorial: Publish Project Kamu Biar Bisa Diakses Publik
Cara publish project TanpaNgoding AI ke subdomain gratis .builtwithcb.com, dari setting domain sampai project live dan bisa diakses siapa saja.
Cara Mencegah Transaksi Ganda di Aplikasi Buatan AI
Tombol Simpan sudah dinonaktifkan, tetapi transaksi masih bisa tercatat dua kali. Pahami penyebabnya, lalu gunakan contoh prompt dan skenario uji untuk memeriksa perlindungan di server.
Ide Project #9: Bikin Aplikasi Manajemen Kost dalam Satu Prompt
Aplikasi manajemen kost lengkap dari satu prompt: status kamar yang sinkron dengan penghuni, tagihan bulanan yang aman dari dobel, denda keterlambatan otomatis, kwitansi siap cetak, laporan bulanan, sampai pengingat WhatsApp untuk penghuni yang telat bayar.
Fitur Baru Periksa Keamanan: Audit Celah Aplikasi Buatan AI dengan Satu Klik
Riset Veracode menemukan sekitar 44 persen tugas penulisan kode oleh AI memunculkan celah keamanan. Lewat fitur baru Periksa Keamanan, kamu bisa meminta agent TanpaNgoding AI memeriksa seluruh kode project, lalu menerima laporan yang diurutkan dari P0 sampai P3 lengkap dengan saran perbaikannya.
Aplikasi Kasir Langganan atau Bikin Sendiri dengan AI? Hitung Dulu Biaya Tiga Tahunnya
Harga aplikasi kasir langganan terlihat ringan karena ditulis per bulan, tapi satu add-on dan satu cabang baru bisa membuat totalnya menembus puluhan juta rupiah dalam tiga tahun. Ini cara menghitungnya, dan kapan membuat aplikasi kasir sendiri dengan AI justru lebih masuk akal.