Skip to content

Your First Project

Build a markdown notes app and learn the feedback loop: prompt → response → steer → iterate.

Setup

bash
mkdir my-notes-app
cd my-notes-app
claude --version  # Verify installation
claude            # Start a session

The Loop

1. First request

Write a complete initial prompt:

Create a simple HTML file with a markdown notes app. Include:
- A textarea for writing markdown
- A preview pane showing rendered HTML
- Basic styling to make it look nice

Claude will create index.html. Open it in your browser.

bash
open index.html  # macOS

You now have a working app. Claude's first attempt is often 80% there.

2. What Claude produced

Claude typically generates:

  • A single HTML file with embedded CSS and JavaScript
  • A markdown parser library (often marked.js)
  • Real-time preview as you type
  • Basic styling with a two-column layout

This is solid. It works. But it's missing something you want.

3. Steer with a follow-up

The app works, but the preview doesn't scroll independently. Tell Claude:

The preview pane should scroll on its own without scrolling the editor. Add overflow handling.

Claude revises the CSS and layout. The app now feels like a real editor.

4. Keep iterating

One more refinement:

Add local storage so the note persists if I close and reopen the browser

Claude adds localStorage code. Now your notes survive a session close.

This is the loop: prompt → see what Claude built → ask for a specific fix → see the change. You don't need to know every command. You need to know how to say "that didn't work, try this instead."

Using plan mode for bigger changes

When you want Claude to think through a multi-part change before writing code, use plan mode. Press Shift+Tab or type:

> Add these features:
- A sidebar list of multiple notes
- Create new note button
- Switch between notes

Claude shows a plan first. Review it, approve it, then Claude implements it. This prevents wasted work on solutions you wouldn't like.

See Chat for details on modes and commands.

Where to next

Now that you understand the feedback loop:

  • Chat — Explore commands, modes, and the interface
  • Permission Modes — Control what Claude can and can't do
  • Plan Mode — Use plan mode for complex multi-file changes
  • Subagents — Spawn Claude instances for parallel work
  • Memory — Let Claude remember context between sessions

Most of what you'll do is iteration within this loop. Master the loop first, then explore specialization.

Built with VitePress and powered by Claude Code