Skip to content
WANCODE
BM

▍WANCODE / THE OPEN CODING WORKSHOP

DON'T JUST WATCH CODE.WRITE IT. BREAK IT. BUILD IT.

Learn to code by actually coding. Interactive lessons, real projects, and a browser-based coding playground. No setup. No account. Just you and your next idea.

Start Coding Explore the Playground

Free to start. No signup required.

Live editor — edit the code and watch the preview change

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>Hi, I'm learning to code</h1>
  <p>This card is real HTML and CSS. Change anything — the preview updates as you type.</p>
  <button>Say hi 👋</button>
</div>
Try thisChange the button colour.Now make it round.Try changing the heading.

01 / Learn

Every developer starts somewhere.

Pick a path. Each one is a sequence of short, hands-on lessons that end in something you built.

01Beginner

HTML & CSS

Build Your First Website

Start from zero. Learn how the web works, write real HTML, style it with CSS, master Flexbox and Grid, make it responsive — and finish with your own landing page.

HTML structureCSS stylingBox modelFlexbox & GridResponsive design
12 published lessons2.9 h
Start
02Beginner

JavaScript

Make Websites Come Alive

Learn the fundamentals of programming with JavaScript: values, conditions, functions, arrays, objects and loops — then use the DOM and events to build an interactive calculator.

Variables & typesFunctionsArrays & objectsDOM manipulationEvents
12 published lessons3.1 h
Start
03Intermediate

React

Build Modern Interfaces

Learn React the practical way in a real in-browser React sandbox: components, JSX, props, state, events, lists, forms and effects — and finish by building a task manager.

Components & JSXProps & stateEvents & formsLists & keysEffects
12 published lessons3.6 h
Start
04Intermediate

AI-Assisted Coding

Code With AI. Understand Every Line.

For people who already use Claude Code, Codex or other assistants. Learn how they work, how to prompt for reviewable code, and how to read, debug, test and security-review generated code.

Prompting for codeCode reviewDebuggingGit diffsSecurity basics
10 published lessons2.9 h
Start
05Upcoming

TypeScript

TypeScript Essentials

Catch mistakes before your code runs.

Planned topics

Types · Interfaces · Generics · Narrowing · Type-safe APIs

06Upcoming

Full-Stack

Full-Stack Fundamentals

What happens between the browser and the database.

Planned topics

HTTP · REST APIs · Databases & SQL · Server/client boundaries · Authentication concepts · Deployment

07Upcoming

Creative Coding

Creative Coding

Motion, canvas, SVG and generative visuals.

Planned topics

CSS animation · Canvas · SVG · WebGL & Three.js · Generative art

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

Learn by doing.

Every lesson follows the same rhythm: read a little, then get your hands on the code.

  1. 01

    Understand

    Small lessons explain one core idea at a time.

  2. 02

    Experiment

    Edit the code and discover what changes.

  3. 03

    Build

    Apply the idea to a meaningful project.

  4. 04

    Debug

    Understand failures instead of memorising solutions.

  5. 05

    Ship

    Export a project or learn how to deploy it.

03 / Challenges

Try a coding challenge.

A real check runs against the real page — not a text match.

Can you centre this element?

Change the CSS so the card sits exactly in the middle of the box — horizontally and vertically. The check measures where the card really is, so any correct technique passes.

Challenges
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>
  • The card is centred horizontally
  • The card is centred vertically

04 / Projects

Build real things.

Guided projects with milestones, hints and a finished solution you can download.

Projects
#011.5 h

Personal Portfolio Page

Build a polished, responsive personal landing page with a hero, about section, projects grid and contact links — using only HTML and CSS.

HTMLCSSResponsive designCSS Grid
#0260 min

Tip & Bill Splitter

Build a calculator that splits a restaurant bill: bill + tip % + people → tip and total per person in RM, with validation and proper rounding.

HTML formsJavaScriptEventsValidation
#031.5 h

To-do App That Remembers

Build a classic to-do app the right way: state in an array, a render function, events for add/complete/delete/filter, and localStorage so it survives a refresh.

JavaScriptDOMEventsArrayslocalStorage
#041.8 h

Monthly Expense Tracker

Track where your ringgit goes: add expenses with a category, see totals per category, your balance against a budget, delete mistakes — and keep it all in browser storage.

JavaScriptArrays & objectsreduceFormslocalStorage
#051.5 h

Weather Dashboard (with Sample Data)

Use fetch, async/await and error handling to build a weather dashboard for Malaysian cities — powered by a clearly labelled sample data file.

JavaScriptfetchasync/awaitJSONError handling
#0675 min

Animated Landing Page

Bring a landing page to life with CSS transitions, hover and focus states, @keyframes entrances and a staggered reveal — while respecting users who prefer reduced motion.

CSSTransitions@keyframesAccessibilityResponsive design

AI CAN WRITE CODE. CAN YOU UNDERSTAND IT?

Don't just prompt it. Understand it.

AI assistants are brilliant at producing code. WANCode teaches you to read it, question it, test it and fix it — so you stay the engineer.

  • Read AI-generated code line by line
  • Spot logic bugs and bad state management
  • Review security risks before they ship
  • Read terminal output and git diffs
  • Write prompts that produce reviewable code
  • Verify output with real tests
Start Code With AI

What the assistant wrote

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>";
  • ⚠ line 3: `<=` reads one item past the end → TypeError
  • ⚠ line 9: user input is inserted as HTML → XSS risk

What a reviewer ships

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);

Your curiosity doesn't need an account.

  • No signup

    Open a lesson and start typing. Nothing to register.

  • Runs in your browser

    Code executes in an isolated sandbox on your device.

  • Saved locally

    Progress and drafts are kept in this browser.

  • Portable backup

    Download your learning data as a file. Import it anywhere.

Built by people who love building things.

A project by WANSTUDIO.

About