Your First Project

Build a markdown note-taking app in 30 minutes while learning Claude Code.

Before We Start (2 min)

Quick verification that Claude Code is ready:

claude --version

✅ If you see version info, you're ready!
❌ If not, check our installation guide.

Step 1: Create Your Project (3 min)

Let's create a workspace for our notes app:

mkdir my-notes-app
cd my-notes-app
claude

You'll see Claude's welcome message. We're ready to build!

Step 2: Your First Prompt (5 min)

Type this prompt exactly:

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. Let's see it in action:

open index.html  # On macOS
# Or drag the file to your browser

🎉 Congratulations! You've built your first app with Claude Code!

Step 3: Making It Better (5 min)

Claude is great at iterating. Try these improvements:

Add a title input field above the markdown area

Notice how Claude:

• Understands context from previous work
• Shows you the changes being made
• Maintains existing functionality

Try another:

Add local storage to save the note when typing

💡 Tip: Claude remembers your conversation, so build on previous requests!

Step 4: Using Plan Mode (5 min)

For bigger changes, use plan mode. Press Shift+Tab to switch modes:

[PLAN] Add these features:

• Multiple notes with a sidebar list
• Create new note button
• Delete note functionality
• Switch between notes

Review Claude's plan, then approve it. Watch how Claude:

• Breaks down complex features
• Implements step-by-step
• Keeps everything working

Step 5: Version Control with Git (5 min)

Let's add version control. First, install the Git MCP server:

claude mcp add-json git '{"command": "uvx", "args": ["mcp-server-git"]}' -s user

Restart Claude, then:

Initialize git and create a first commit with a good message

Claude now has git superpowers! Try:

Show me what changes I've made

Step 6: Project Conventions (5 min)

Create a CLAUDE.md file for project-specific instructions:

Create a CLAUDE.md file with conventions for this project:

• Use semantic HTML
• Keep all code in single files for simplicity
• Add comments explaining key functionality
• Use localStorage for persistence

Now Claude will follow these conventions automatically!

Step 7: Final Touches (5 min)

Let's polish the app:

Add keyboard shortcuts:

• Ctrl+S to save current note
• Ctrl+N for new note
• Ctrl+D to delete current note

Test your app - it's feature-complete! 🚀

What You've Built

In 30 minutes, you've built a complete application with:

✅ Multi-file note app - HTML, CSS, and JavaScript functionality
✅ Iterative development - Added features through conversation
✅ Planning workflow - Used Plan Mode for complex features
✅ Tool integration - MCP servers extending Claude's capabilities
✅ Project conventions - CLAUDE.md guiding development patterns

Ideas to Try

Try these enhancements on your own:

1. Export to Markdown: Add a download button
2. Search: Find text across all notes
3. Tags: Organize notes with hashtags
4. Themes: Add dark mode toggle

Common Issues

"Claude doesn't understand my request"

• Be specific about what you want
• Reference existing elements: "In the sidebar..."
• Break complex requests into steps

"The code doesn't work"

• Ask Claude: "Debug why [specific issue]"
• Claude can read error messages from browser console
• Try: "Fix any errors in the current implementation"

"I want to start over"

• Use: "Refactor this to be cleaner"
• Or start fresh: "Replace the current implementation with..."

Next Steps

Ready for more? Explore:

• Chat - Master auto-accept and plan mode
• Steering - Advanced prompting techniques
• MCP Servers - Extend Claude's abilities