Learn VS Code
with Claude Code

An interactive guide built for your brain. Five sections, zero prerequisites, real keyboard practice.

Start learning ↓

1. The Window

VS Code has five regions. Hover to highlight, click to learn what each one does.

game.js — nomimon — VS Code
Explorer
▼ nomimon
  ▼ src
    📄 game.js
    📄 GameBattle.ts
    📄 GameEngine.ts
  📄 index.html
  📄 package.json
▼ reports
  📄 vscode-guide.html
📄 game.js
📄 index.html
1// Nomimon v0.4 — Game Boy RPG
2const TILE_SIZE = 16;
3const MAP_W = 40;
4
5class Game {
6  constructor() {
7    this.canvas = document.getElementById('game');
8    this.ctx = this.canvas.getContext('2d');
9    this.state = 'title';
10  }
11
12  init() {
13    // Load sprites & start loop
Terminal
Problems
Output
~ $ claude
Claude Code v1.0.16
Session restored from CURRENT.md
60 health checks PASS
claude > _
☑ main JavaScript UTF-8 Ln 6, Col 12 Claude Code

2. Shortcuts

Press the actual key combinations on your keyboard. They'll light up green when you nail them.

0 of 14 shortcuts practiced
Press the key combinations below on your physical keyboard. This page captures your keypresses and checks them against the target.

3. Claude in VS Code

The prompt-edit-diff-accept cycle. Watch it play out, then step through it yourself.

Permission Modes

Claude Code asks before modifying files. You control how much autonomy it gets. Click to explore.

The @ Mention System

Point Claude to specific files or ranges without copying text.

@file.js Adds the full file to context
@src/ Adds a directory listing
@game.js#100-150 Adds lines 100-150 only
@doc.pdf pages 1-5 Adds specific pages from a PDF
@https://url.com Fetches and adds web content

4. The System

Your custom Claude Code infrastructure. Click any node to see what it does and where it lives.

Hooks
MCP Servers
Memory
Skills
Core

Memory Layers

Seven layers, from ephemeral (top) to grounded (bottom). L5 is the Newtonian Fallback — plain .md files that always work, no server needed.

Skills 14 active

Type the trigger (e.g. /law) in Claude to activate. Click for details.

5. Your Day

Three real scenarios you'll encounter. Click each step to advance.

That's it. You know the tool, the shortcuts, the system.

Back to top ↑