menu_bookhands-on

Code Playground

Kumpulan latihan coding singkat dengan contoh kode nyata yang bisa kamu pelajari dan praktikkan sendiri.

ℹStatus: editor interaktif dalam pengembangan

Editor kode langsung-di-browser untuk halaman ini belum tersedia. Untuk sekarang, salin contoh kode di bawah ke text editor lokal (VS Code) atau sandbox online seperti CodeSandbox/StackBlitz untuk mencobanya secara langsung.

Daftar Latihan

HTML Dasar

Belajar struktur dasar HTML: heading, paragraf, link, dan gambar.

HTMLpemula

CSS Flexbox

Praktik layout dengan Flexbox: align, justify, dan wrap.

CSSpemula

JavaScript DOM

Manipulasi elemen HTML menggunakan JavaScript.

JavaScriptpemula

React Component

Membuat komponen React pertama dengan props dan state.

Reactmenengah

Fetch API

Mengambil data dari API eksternal menggunakan fetch.

JavaScriptmenengah

Tailwind CSS Grid

Membuat layout responsif menggunakan Tailwind CSS Grid.

Tailwindmenengah

HTML Dasar

Belajar struktur dasar HTML: heading, paragraf, link, dan gambar.

html-basic.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Pertamaku</title>
</head>
<body>
  <h1>Selamat Datang</h1>
  <p>Ini adalah paragraf pertama saya.</p>
  <a href="https://dev.khelmi.biz.id">Kunjungi dev.khelmi</a>
</body>
</html>

✓Yang akan kamu pahami

Setelah latihan ini, kamu paham struktur dokumen HTML minimal dan kapan memakai tag semantik (heading vs paragraf) alih-alih <div> untuk segalanya.

CSS Flexbox

Praktik layout dengan Flexbox: align, justify, dan wrap.

css-flexbox.css

.container {
  display: flex;
  justify-content: space-between; /* sumbu horizontal */
  align-items: center;            /* sumbu vertikal */
  gap: 1rem;
}

✓Yang akan kamu pahami

Setelah latihan ini, kamu paham perbedaan justify-content (sumbu utama) dan align-items (sumbu silang) — dua properti yang paling sering membingungkan pemula Flexbox.

JavaScript DOM

Manipulasi elemen HTML menggunakan JavaScript.

js-dom.js

const button = document.querySelector('#myButton')
const text = document.querySelector('#myText')
 
button.addEventListener('click', () => {
  text.textContent = 'Tombol sudah diklik!'
})

✓Yang akan kamu pahami

Setelah latihan ini, kamu paham cara memilih elemen (querySelector) dan mengubahnya secara dinamis saat ada interaksi pengguna (event listener).

React Component

Membuat komponen React pertama dengan props dan state.

react-component.tsx

function Counter({ label }) {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>{label}: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  )
}

✓Yang akan kamu pahami

Setelah latihan ini, kamu paham perbedaan props (data dari luar komponen, read-only) dan state (data internal komponen yang bisa berubah).

Fetch API

Mengambil data dari API eksternal menggunakan fetch.

api-fetch.js

async function getUser(id) {
  try {
    const res = await fetch(`https://api.example.com/users/${id}`)
    if (!res.ok) throw new Error('Gagal mengambil data')
    return await res.json()
  } catch (err) {
    console.error(err)
  }
}

✓Yang akan kamu pahami

Setelah latihan ini, kamu paham pola async/await untuk menunggu data dari server, dan pentingnya menangani error (misal koneksi gagal).

Tailwind CSS Grid

Membuat layout responsif menggunakan Tailwind CSS Grid.

tailwind-grid.html

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-gray-100 rounded">Card 1</div>
  <div class="p-4 bg-gray-100 rounded">Card 2</div>
  <div class="p-4 bg-gray-100 rounded">Card 3</div>
</div>

✓Yang akan kamu pahami

Setelah latihan ini, kamu paham cara membuat grid yang menyesuaikan jumlah kolom otomatis di breakpoint berbeda (mobile vs desktop).

Tips Berlatih Efektif

Jangan hanya membaca — ketik ulang kode dengan tangan sendiri, jangan copy-paste
Setelah paham, coba modifikasi kode (misal ganti warna, tambah elemen baru)
Jika ada error, baca pesan error di console dengan teliti sebelum bertanya ke orang lain
Kerjakan latihan level pemula secara berurutan sebelum lanjut ke level menengah