Want to start building with Claude Code? This guide walks you through installation, sign-in, and your first app, with fixes for common setup problems along the way.
Install Claude Code, sign in with your paid account, and start it inside a project folder. Then build a small plant-watering tracker you can open in your browser.
Use the terminal version for this guide. You do not need Cursor, a database or a hosting account to follow along.
Setup instructions checked October 23, 2026. The project is a guided exercise; Claude's generated code will vary.
Before you install
Start with Claude Pro if this is your first project. Max also works; Claude Free does not include Claude Code. See our pricing guide for the plan differences.
You need internet access and a supported computer with at least 4 GB of RAM. Anthropic supports macOS 13+, Windows 10 version 1809+ and supported Linux distributions. The native installer does not need Node.js. Full system requirements.
On a Mac, open Terminal through Spotlight. On Windows, open PowerShell from Start. This is where you will paste the installation command.
1. Install Claude Code for your operating system
Paste the command for your system. It downloads and runs Anthropic's installer. Official installation instructions.
macOS, Linux or WSL
Paste this into Terminal or your Linux shell, then press Enter:
curl -fsSL https://claude.ai/install.sh | bashWindows PowerShell
Paste this into PowerShell:
irm https://claude.ai/install.ps1 | iexIf Windows says irm is not recognized, you may be in CMD. Open PowerShell and try there. Anthropic also documents CMD, Homebrew and WinGet alternatives.
The download may show no progress. When installation finishes, open a new terminal window and run:
claude --versionYou should see a version number. If the command is not found, use the troubleshooting section below.
2. Create a folder and sign in
In your terminal, run these commands one at a time. They work in macOS/Linux shells and Windows PowerShell:
mkdir plant-tracker
cd plant-tracker
claudeThese commands create a folder, move into it and start Claude Code. If plant-tracker already exists, choose a new folder name.
Sign in with the Claude account attached to your Pro or Max subscription. Console/API accounts use separate billing. If an existing login or API key changes the sign-in flow, check Anthropic's account instructions.
When asked to trust the folder, confirm it is your new project folder. Read proposed actions before approving them.
3. Build a plant-watering tracker
Paste this into Claude Code:
Build a plant-watering tracker in this folder using one index.html file with plain HTML, CSS and JavaScript. Do not use a framework, package manager, external service or build step. I want to open the file directly in a browser. Let me add a plant name and watering interval in days, mark a plant as watered today, and see the next watering date. Save the plants in localStorage so they remain after refresh. Use labelled inputs and buttons I can operate with a keyboard. Validate that the interval is a positive whole number. First explain the files you plan to create, then wait for me to approve the plan.
Check the plan: one HTML file, browser storage and the features above. If it adds a database, login or paid API, ask it to keep the first version simple.
Approve the plan and let Claude build it. Review any permission prompts as it works.
This version stores plants in your browser. It does not sync between devices, and clearing browser storage can delete the data.
4. Open the app and test it
Find the plant-tracker folder in Finder or File Explorer and open index.html in your browser. If you cannot find the folder, ask Claude to tell you its full path.
Check these behaviors before adding anything else:
| Check | What should happen |
|---|---|
| Add “Basil” with an interval of 3 days | A plant entry appears with the chosen interval |
| Submit an empty name | The app explains what is missing |
| Enter 0, a negative number or a decimal interval | The app rejects the value rather than silently accepting it |
| Mark Basil as watered today | The next watering date becomes three calendar days after today |
| Refresh the page | The saved plant and watering date remain |
| Use Tab and Enter instead of the mouse | Inputs and buttons are reachable and usable |
If something fails, describe what you did and what happened. For example:
I added Basil with an interval of 3, marked it watered, and refreshed the browser. The plant is still there, but the watering date disappeared. Find why that field is not being restored. Fix only that issue and explain how I should check it again.
Ask which checks Claude actually ran, then repeat the browser checks yourself.
5. Add a delete button
Once the basic tracker works, ask for one addition:
Add a delete button for each plant. Ask for confirmation before deleting. Keep the existing storage format if possible, and make sure deletion persists after refresh. Do not redesign the page.
Cancel a deletion, then confirm one. Refresh after each. Add another plant and check that watering still works.
Back up the working folder before a larger change. For future projects, learn Git so you can review changes and restore earlier versions.
Common Claude Code setup problems
“claude: command not found” or “claude is not recognized”
Open a new terminal and try claude --version again. If it still fails, installation may be incomplete or the command may be missing from PATH, where your shell looks for programs. Follow the official troubleshooting steps for your operating system.
Claude starts, but the account or billing route looks wrong
Check the signed-in account. If this terminal previously used an API key, it may be following that billing route. Use the authentication guide to check it, and keep API keys out of screenshots or support threads.
The app opens as code or asks for a server
Check the filename is index.html, not index.html.txt. If Claude created a framework project, ask for the single-file version from the prompt. This exercise needs no build tool.
Claude runs, but something about the installation seems broken
Run this from your terminal:
claude doctorThis checks the installation. Give Claude app errors and the steps that caused them; take account or billing problems to Anthropic support. Troubleshooting guide.
What to build after this
Add export and import next so you can back up the plant list. Get that working before adding accounts or shared storage.
When you are ready for a shared app, follow our guide to building apps with Claude Code for the broader workflow.
Earlier video walkthrough
Watch the earlier beginner walkthrough below. Use the written commands above for the current installation steps.
Frequently Asked Questions
Do I need Node.js to install Claude Code?
Not for the native installer used here. A project you build later may require Node.js or other dependencies, but this single-file exercise does not.
Do I need Cursor or VS Code?
No. You can use Claude Code from your operating system's terminal. An editor can make it easier to inspect files, but it is optional for this exercise.
Does installing the Claude desktop app install the terminal command?
This tutorial uses the separate terminal installation steps. Verify the CLI with claude --version rather than assuming that access to the desktop app means the terminal is configured.
Why doesn't my generated app look exactly like someone else's?
Generated code and design can vary. Use the behavior checks in this tutorial to judge whether your app works, rather than expecting a particular screenshot.
Advertiser disclosure: some links on this website are affiliate links, meaning No Code MBA may make a commission if you click through and purchase.