Langkau ke kandungan
WANCODE
EN

▍WANCODE / BENGKEL PENGEKODAN TERBUKA

JANGAN SEKADAR TENGOK KOD.TULIS. ROSAKKAN. BINA.

Belajar kod dengan betul-betul menulis kod. Pelajaran interaktif, projek sebenar dan playground pengekodan dalam pelayar. Tiada pemasangan. Tiada akaun. Hanya anda dan idea seterusnya.

Mula Kod Teroka Playground

Percuma untuk bermula. Tiada pendaftaran.

Editor langsung — ubah kod dan lihat pratonton berubah

index.html
<style>
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: system-ui, sans-serif;
    background: #eef1e8;
  }
  .card {
    max-width: 240px;
    margin: 16px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  }
  h1 { margin: 0 0 8px; font-size: 24px; }
  p { margin: 0 0 18px; color: #555; line-height: 1.5; }
  button {
    background: #17201b;
    color: white;
    border: 0;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  button:hover { transform: translateY(-2px); }
</style>

<div class="card">
  <h1>Hai, saya sedang belajar kod</h1>
  <p>Kad ini ialah HTML dan CSS sebenar. Ubah apa sahaja — pratonton dikemas kini semasa anda menaip.</p>
  <button>Tekan saya 👋</button>
</div>
Cuba iniTukar warna butang.Sekarang jadikan ia bulat.Cuba tukar tajuknya.

01 / Belajar

Setiap developer bermula di suatu tempat.

Pilih satu laluan. Setiap laluan ialah siri pelajaran pendek dan praktikal yang berakhir dengan sesuatu yang anda bina sendiri.

01Pemula

HTML & CSS

Bina Laman Web Pertama Anda

Bermula dari kosong. Fahami cara web berfungsi, tulis HTML sebenar, gayakan dengan CSS, kuasai Flexbox dan Grid, jadikan ia responsif — dan akhiri dengan landing page anda sendiri.

Struktur HTMLPenggayaan CSSBox modelFlexbox & GridReka bentuk responsif
12 pelajaran diterbitkan2.9 jam
Mula
02Pemula

JavaScript

Hidupkan Laman Web

Pelajari asas pengaturcaraan dengan JavaScript: nilai, syarat, function, array, objek dan loop — kemudian guna DOM dan event untuk membina kalkulator interaktif.

Pemboleh ubah & jenis dataFunctionArray & objekManipulasi DOMEvent
12 pelajaran diterbitkan3.1 jam
Mula
03Pertengahan

React

Bina Antara Muka Moden

Belajar React secara praktikal dalam sandbox React sebenar di pelayar: komponen, JSX, props, state, event, senarai, borang dan effect — dan akhiri dengan membina pengurus tugasan.

Komponen & JSXProps & stateEvent & borangSenarai & keyEffect
12 pelajaran diterbitkan3.6 jam
Mula
04Pertengahan

Pengekodan Dibantu AI

Kod Bersama AI. Fahami Setiap Baris.

Untuk mereka yang sudah menggunakan Claude Code, Codex atau pembantu lain. Fahami cara ia berfungsi, cara prompt untuk kod yang mudah disemak, dan cara membaca, debug, menguji serta menyemak keselamatan kod yang dijana.

Prompt untuk kodSemakan kodDebuggingGit diffAsas keselamatan
10 pelajaran diterbitkan2.9 jam
Mula
05Akan datang

TypeScript

Asas TypeScript

Tangkap kesilapan sebelum kod dijalankan.

Topik yang dirancang

Jenis · Interface · Generic · Narrowing · API selamat jenis

06Akan datang

Full-Stack

Asas Full-Stack

Apa yang berlaku antara pelayar dan pangkalan data.

Topik yang dirancang

HTTP · REST API · Pangkalan data & SQL · Sempadan pelayan/klien · Konsep pengesahan · Deployment

07Akan datang

Pengekodan Kreatif

Pengekodan Kreatif

Gerakan, canvas, SVG dan visual generatif.

Topik yang dirancang

Animasi CSS · Canvas · SVG · WebGL & Three.js · Seni generatif

02 / READ → UNDERSTAND → MODIFY → RUN → DEBUG → BUILD

Belajar dengan membuat.

Setiap pelajaran ikut rentak yang sama: baca sedikit, kemudian terus pegang kod.

  1. 01

    Faham

    Pelajaran kecil menerangkan satu idea utama pada satu masa.

  2. 02

    Uji kaji

    Ubah kod dan lihat apa yang berubah.

  3. 03

    Bina

    Gunakan idea itu dalam projek yang bermakna.

  4. 04

    Debug

    Fahami kenapa kod gagal, bukan hafal jawapan.

  5. 05

    Terbitkan

    Eksport projek atau belajar cara deploy.

03 / Cabaran

Cuba satu cabaran kod.

Semakan sebenar dijalankan pada halaman sebenar — bukan sekadar padanan teks.

Boleh anda letak kad ini di tengah?

Ubah CSS supaya kad berada tepat di tengah kotak — mendatar dan menegak. Semakan mengukur kedudukan sebenar kad, jadi apa-apa teknik yang betul akan lulus.

Cabaran
index.html
<style>
  .stage {
    height: 220px;
    background: #eef1e8;
    border: 2px dashed #b9c4b0;
  }
  .card {
    width: 140px;
    padding: 16px;
    background: #17201b;
    color: #c4f66a;
    border-radius: 12px;
    font-family: system-ui, sans-serif;
    text-align: center;
  }
</style>

<div class="stage">
  <div class="card">Centre me!</div>
</div>
  • Kad berada di tengah secara mendatar
  • Kad berada di tengah secara menegak

04 / Projek

Bina benda sebenar.

Projek berpandu dengan peringkat, petunjuk dan penyelesaian lengkap yang boleh dimuat turun.

Projek
#011.5 jam

Halaman Portfolio Peribadi

Bina halaman portfolio peribadi yang kemas dan responsif — hero, bahagian tentang diri, grid projek dan pautan hubungan — dengan HTML dan CSS sahaja.

HTMLCSSResponsive designCSS Grid
#0260 minit

Kalkulator Tip & Pembahagi Bil

Bina kalkulator untuk membahagi bil restoran: bil + tip % + bilangan orang → tip dan jumlah seorang dalam RM, dengan validasi dan pembundaran yang betul.

HTML formsJavaScriptEventsValidation
#031.5 jam

Aplikasi To-do Yang Ingat

Bina aplikasi to-do klasik dengan cara yang betul: state dalam array, function render, event untuk tambah/siap/padam/tapis, dan localStorage supaya ia kekal selepas refresh.

JavaScriptDOMEventsArrayslocalStorage
#041.8 jam

Penjejak Perbelanjaan Bulanan

Jejak ke mana ringgit anda pergi: tambah perbelanjaan mengikut kategori, lihat jumlah setiap kategori, baki berbanding bajet, padam kesilapan — dan simpan semuanya dalam storan pelayar.

JavaScriptArrays & objectsreduceFormslocalStorage
#051.5 jam

Papan Pemuka Cuaca (dengan Data Contoh)

Guna fetch, async/await dan pengendalian ralat untuk membina papan pemuka cuaca bagi bandar-bandar di Malaysia — dikuasakan oleh fail data contoh yang dilabel dengan jelas.

JavaScriptfetchasync/awaitJSONError handling
#0675 minit

Landing Page Beranimasi

Hidupkan landing page dengan transition CSS, keadaan hover dan fokus, animasi masuk @keyframes dan pendedahan berperingkat — sambil menghormati pengguna yang mahukan kurang gerakan.

CSSTransitions@keyframesAccessibilityResponsive design

AI BOLEH TULIS KOD. TAPI ANDA FAHAM TAK?

Jangan sekadar prompt. Fahamkan.

Pembantu AI memang hebat menghasilkan kod. WANCode mengajar anda membacanya, mempersoalkannya, mengujinya dan membaikinya — supaya anda kekal sebagai jurutera.

  • Baca kod jana AI baris demi baris
  • Kenal pasti bug logik dan pengurusan state yang lemah
  • Semak risiko keselamatan sebelum dihantar
  • Baca output terminal dan git diff
  • Tulis prompt yang menghasilkan kod mudah disemak
  • Sahkan output dengan ujian sebenar
Mula Kod Bersama AI

Apa yang ditulis pembantu AI

cart.js
function getTotal(items) {
  let total = 0;
  for (let i = 0; i <= items.length; i++) {
    total += items[i].price * items[i].qty;
  }
  return total;
}

list.innerHTML = "<li>" + userInput + "</li>";
  • ⚠ baris 3: `<=` membaca satu item melepasi hujung array → TypeError
  • ⚠ baris 9: input pengguna dimasukkan sebagai HTML → risiko XSS

Apa yang dihantar oleh penyemak

cart.js
function getTotal(items) {
  return items.reduce(
    (sum, item) => sum + item.price * item.qty,
    0
  );
}

const li = document.createElement("li");
li.textContent = userInput; // never parsed as HTML
list.append(li);

Rasa ingin tahu anda tak perlukan akaun.

  • Tiada pendaftaran

    Buka pelajaran dan terus menaip. Tiada apa perlu didaftarkan.

  • Berjalan dalam pelayar

    Kod dijalankan dalam sandbox terasing pada peranti anda.

  • Disimpan secara setempat

    Kemajuan dan draf disimpan dalam pelayar ini.

  • Sandaran mudah alih

    Muat turun data pembelajaran sebagai fail. Import di mana-mana.

Dibina oleh orang yang suka membina.

Sebuah projek oleh WANSTUDIO.

Tentang