Menggunakan CodeSandbox.io

Jika Anda ingin mulai belajar pemrograman web tetapi tidak ingin repot menginstal editor teks seperti Visual Studio Code (VSCode) di komputer Anda, CodeSandbox.io adalah pilihan yang sangat baik. CodeSandbox.io adalah platform online yang memungkinkan Anda untuk menulis, mengedit, dan menjalankan kode langsung di browser tanpa perlu menginstal software apapun.

1. Membuat Akun di CodeSandbox.io

Langkah pertama untuk menggunakan CodeSandbox.io adalah membuat akun. Berikut adalah cara untuk mendaftar dan membuat akun di CodeSandbox.io:

Langkah 1: Kunjungi Situs CodeSandbox.io

Buka browser Anda dan pergi ke https://codesandbox.io .

Langkah 2: Mendaftar untuk Akun CodeSandbox

Di halaman utama CodeSandbox, klik tombol Sign Up di pojok kanan atas.
Anda akan diberi beberapa opsi untuk mendaftar:
- Sign up with GitHub: Jika Anda sudah memiliki akun GitHub, pilih opsi ini untuk mendaftar dengan akun GitHub Anda.
- Sign up with Google: Jika Anda memiliki akun Google (misalnya Gmail), Anda bisa mendaftar menggunakan akun Google.
- Sign up with Email: Jika Anda ingin menggunakan email, pilih opsi ini dan masukkan alamat email serta password yang ingin Anda gunakan.

Setelah memilih salah satu metode, ikuti instruksi untuk menyelesaikan proses pendaftaran.

Langkah 3: Verifikasi Email (Opsional)

Jika Anda mendaftar menggunakan email, CodeSandbox mungkin akan meminta Anda untuk memverifikasi alamat email Anda. Cek inbox email Anda dan klik link verifikasi yang dikirimkan oleh CodeSandbox.

2. Memulai Proyek Baru di CodeSandbox.io

Setelah berhasil membuat akun, Anda dapat memulai proyek pertama Anda. Berikut adalah langkah-langkah untuk membuat proyek baru di CodeSandbox.io:

Langkah 1: Masuk ke Dashboard

Setelah mendaftar, Anda akan dibawa ke dashboard utama CodeSandbox.
Di sini, Anda akan melihat berbagai template proyek dan sandboxes yang telah Anda buat sebelumnya (jika ada).

Langkah 2: Membuat Sandbox Baru

Klik tombol Create Sandbox di halaman utama atau klik tombol New Sandbox yang ada di dashboard.
Anda akan melihat berbagai pilihan template untuk memulai proyek:
- Vanilla (HTML, CSS, JavaScript): Untuk proyek dasar HTML, CSS, dan JavaScript.
- React: Untuk memulai proyek menggunakan React.
- Vue: Untuk memulai proyek menggunakan Vue.js.
- Angular: Untuk memulai proyek menggunakan Angular.
Pilih template Vanilla (HTML, CSS, JavaScript) jika Anda ingin memulai proyek dengan dasar HTML, CSS, dan JavaScript.

Langkah 3: Mulai Menulis Kode

Setelah memilih template, Anda akan dibawa ke editor CodeSandbox.
Anda akan melihat tiga panel utama:
- File Explorer di sisi kiri untuk mengelola file dan folder.
- Editor di tengah untuk menulis kode.
- Preview di sisi kanan untuk melihat hasil dari kode Anda.

Di dalam editor, Anda dapat mulai menulis kode HTML, CSS, dan JavaScript seperti yang Anda lakukan di editor lokal. Misalnya, Anda dapat menambahkan file HTML dan mulai menulis struktur halaman web Anda.

3. Menjalankan Kode di CodeSandbox.io

CodeSandbox memungkinkan Anda untuk melihat hasil kode Anda secara langsung tanpa perlu menjalankan server lokal. Berikut adalah cara untuk melihat hasil kerja Anda:

Langkah 1: Tulis Kode HTML

Misalnya, buat file index.html dan tambahkan kode HTML berikut:


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh CodeSandbox</title>
</head>
<body>
    <h1>Selamat datang di CodeSandbox!</h1>
    <p>Ini adalah halaman pertama yang dibuat menggunakan CodeSandbox.io.</p>
</body>
</html>