🛠️ Build Your First Mini App with Claude Code · Week 1: From Zero to Your First Live Web Page

How to Install Claude Code and Run It for the First Time (Beginner Guide)

It's not a chat box. It's an assistant that can act on your computer

一句话先懂 · TL;DR

What Claude Code is, how it differs from ChatGPT in the browser, the three things you need to install it, what you'll see on first launch, and why the permission prompt appears. Follow along with zero experience.

How It Differs from the AI Chat You've Used

When you ask an AI in the browser to "make me a web page", it hands you a big block of code, and then you have to copy it, create a file, paste it in, open the browser... one wrong step and you're stuck.

Claude Code is different. It runs in the terminal on your computer. You say "make me a web page" and it creates the file itself, writes the code into it itself, runs and tests it itself, then tells you "open index.html in your browser to see it".

🔆A browser AI is like a consultant who only talks. Claude Code is like an intern sitting at your computer with their hands on the keyboard. You state the goal; it does the work.

Before Installing, You Only Need Three Things

1. A terminal: Mac comes with "Terminal"; on Windows use "PowerShell" or "Windows Terminal". It's just a black window where you type commands. Nothing to be afraid of.
2. Node.js: Claude Code runs on it. Go to nodejs.org, download the LTS version, and install it.
3. A working account or API key: sign in with your Claude account, or enter an API key in the settings. If you're behind a restrictive network, first confirm you can actually reach the service. This is the step where most people get stuck.

# 1. 装 Claude Code(全局安装,只做一次)
npm install -g @anthropic-ai/claude-code

# 2. 进到你准备放项目的文件夹
mkdir my-first-site && cd my-first-site

# 3. 启动,第一次会引导你登录
claude
⚠️Start it inside your project folder. Claude Code treats the folder you launch it from as its "workspace". If you launch it from your Desktop, it will scatter files all over your Desktop.

Your First Conversation, and That "Allow?" Prompt

After launching you'll see an input box. Try typing:

> Create index.html in this folder. The page should show "Hello, world" in large text, centered.

A few seconds later it will tell you: it's about to create a file, and asks "Allow?". That's not because it can't do it. It's a safety design: anything that changes something on your computer, it asks you first by default.

When should you click Allow? Check two things:
- Is what it wants to touch inside your project folder? If yes, allow with confidence.
- Can the action be undone? Creating and editing files can be undone (you'll learn one-line rollback with git later). Deleting folders or publishing to the internet: read carefully before clicking.

💡Lesson 1 has exactly one goal: you see it create a file for you, and you open it in your browser and see "Hello, world". If you get this far, you've already passed the point where 90% of people get stuck.

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

Lin wants to build a "daily expense tracker" web page. Which of these can only a tool like Claude Code do, and a browser AI can't?

答案:Create index.html directly on her computer, write the code into it, then open it to test

Writing code, explaining concepts, giving suggestions: a browser AI can do all of those. The difference is **acting**: Claude Code can operate on the files and commands on your computer. The other three are just text output in a chat window.

Ming followed the tutorial to install it, but typing claude gives "command not found". Which step did he most likely miss?

答案:Node.js isn't installed, or the terminal wasn't reopened after installing, so npm's global command can't be found

The claude command is installed globally by npm and depends on Node.js. After installing Node, an old terminal window doesn't know about new commands, so just open a new one. Mini Program accounts and CLAUDE.md come later, and Python has nothing to do with it.

True or false: Yu launches claude directly from her Desktop, then says "make me an expense tracker page". That's fine.

答案:False

Where you launch it is its workspace. Launched from the Desktop, it will dump index.html, style files, and everything else onto your Desktop, and it only gets messier from there. The right way: create a project folder first, go into it, then launch.

Claude Code prompts: "I'll run rm -rf ~/Documents to clean up old files. Allow?" What should you do?

答案:Refuse. It wants to delete your entire Documents folder outside the project, and deletion can't be undone

It fails both tests: it's not touching the project folder, and the action can't be undone. git can only roll back tracked files inside the project; it can't rescue your whole Documents folder. AI makes mistakes, and the permission prompt is there so you can hit the brakes.

Which of these prompts can you safely allow right away?

答案:"I'll create style.css in the current project and write the styles into it"

Only the first one is both "inside the project" and "undoable". Public upload, changing system settings, and clearing passwords all reach outside the project and are hard to take back, so read carefully before deciding.

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

Learn something new — don't miss updates

New courses, features and learning tips. Occasional emails, unsubscribe anytime.