Getting started

WANCode is a free, interactive coding academy in English and Bahasa Melayu. There's no signup: you open a lesson and start writing real code in your browser. Your progress is saved on your device, not on our servers. It's part of WANSTUDIO.

Where to start

• Never coded before? Start with HTML & CSS — you'll build a real web page in the first lesson.
• Know some HTML? Go to JavaScript to make pages interactive, then React.
• Already using AI coding assistants? The AI-Assisted Coding track teaches you to read, test and review what they produce.
• Just want to experiment? Open the Playground. Want practice? Try the Challenges or a guided Project.

How a lesson works

Every lesson follows the same rhythm, so you always know what's next. Most take 8–15 minutes.

1. Read — a short explanation of one big idea, often with an interactive diagram.
2. Understand — a working example and what each part does.
3. Modify — change the example and predict what will happen.
4. Run — see the result instantly in the preview.
5. Debug — read the console and error messages, and fix what's broken.
6. Build — finish a task and a challenge that check your code really works.

A lesson ends with a few quiz questions ("Check understanding") and a short recap. It's marked complete when all of its exercises pass.

The workspace

• Lesson — the explanation, the current exercise and its instructions. On a phone, Lesson, Code and Preview are separate tabs.
• Code — a real code editor with syntax highlighting, autocompletion and one tab per file (for example index.html, style.css, script.js, or App.jsx for React).
• Preview — your page running live in a safe sandbox, with a Console below it for console.log output and errors. You can switch between Fit, Phone and Tablet sizes.
• Check answer — tests your code's real behaviour and shows a checklist of what passes and what's still missing. See Checks and hints.
• Hints — three per exercise, from a gentle nudge to a near-complete answer. Open them one at a time.
• Show solution — loads the reference solution into the editor after you confirm. You can go back to your own code, or reset to the starter files.

Keyboard shortcuts

Ctrl/⌘ + Enter

Run the code (refresh the preview).

Ctrl/⌘ + Shift + Enter

Check answer.

Ctrl/⌘ + S

Save now. (Your work also saves automatically.)

Shift + Alt + F

Format the current file.

Esc → Tab

Inside the editor, Tab inserts indentation. Press Esc first, then Tab, to move keyboard focus out of the editor to the next control.