Build Your First Project

Build a working todo app with Cline and learn the core workflow.

This tutorial walks you through building a todo app with Cline. Along the way, you’ll learn how to give tasks, approve changes, iterate on your work, and recover from mistakes.

Prerequisites

• Cline installed in your editor (Install Guide)
• AI model connected (Model Setup)
• Any folder open in your editor (empty folder works best)

Give Cline a Task

Click the Cline icon in your editor’s sidebar to open the chat panel. Paste this prompt:

Build a todo app in a single HTML file. Include:
- Input field to add new tasks
- List that displays all tasks
- Checkbox to mark tasks complete (with strikethrough styling)
- Button to delete individual tasks
- Clean, modern design with CSS
- All JavaScript inline in the same file

Press Enter and watch Cline analyze your request.

Use Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and search “Cline: Open In New Tab” to give Cline more screen space.

Discuss Your Plan with Cline

Cline may start in Plan mode, where it analyzes your request and discusses the approach without making any changes yet. This is a great opportunity to have a conversation:

• Ask questions about the implementation
• Clarify requirements
• Discuss alternative approaches
• Refine the plan together

Once you’re happy with the plan, click the Act button in the bottom right of the Cline panel to switch to Act mode. Cline will now start creating files and writing code.

For simple tasks, you can start directly in Act mode. Use Plan mode when you want to think through a problem before committing to an approach. Learn more in the Plan and Act guide.

Approve or Reject Changes

Cline asks permission before modifying your project. When it wants to create or edit a file, you’ll see a diff preview showing exactly what will change.

• Click Approve to let Cline proceed
• Click Reject to stop and provide different instructions

This approval step keeps you in control. Every file creation, edit, and terminal command requires your explicit permission.

Once you’re comfortable with Cline, you can enable auto-approve to skip confirmations for specific actions.

Watch Cline Work

After approval, Cline creates your files. You’ll see:

• File diffs showing each change
• Token usage tracking your API costs
• A summary when the task completes

For this todo app, Cline creates a single index.html file with HTML structure, CSS styling, and JavaScript logic.

View Your Todo App

Open the file to see your app in action:

Option 1: Terminal command

open index.html

Option 2: File explorer Find index.html in your editor’s file explorer, right-click, and select “Reveal in Finder” (Mac) or “Reveal in File Explorer” (Windows). Double-click to open in your browser.

Option 3: Live Server If you have the Live Server extension, right-click index.html and select “Open with Live Server” for auto-refresh on changes.

Try adding a few tasks, marking them complete, and deleting them. The app works entirely in your browser with no backend required.

Iterate on Your Project

Cline remembers your conversation context. In the same chat, try follow-up requests:

Add local storage so tasks persist when I refresh the page

Or change the design:

Switch to a dark theme with purple accent colors

Or add features:

Add a filter to show all, active, or completed tasks

Each request builds on the existing code. Cline reads your current files, understands the structure, and makes targeted changes.

Undo Mistakes with Checkpoints

Cline automatically saves checkpoints after each change. If something breaks or you don’t like a modification, you can restore to any previous state.

Look for the Compare and Restore buttons next to each step in your conversation:

• Compare shows what files changed at that step
• Restore lets you roll back your project

When restoring, you have three options:

Option	What it does
Restore Task and Workspace	Resets both your files and conversation to that point
Restore Task Only	Keeps file changes but reverts conversation context
Restore Workspace Only	Resets files but keeps conversation context

Use “Restore Workspace Only” when you want to try a different approach without losing the conversation context.

Checkpoints work independently from Git. Your commits and branches stay untouched.

Learn more in the Checkpoints guide.

What You Learned

You built a functional todo app and learned the core Cline workflow: describe what you want, approve the changes, and iterate with follow-up requests. You also discovered checkpoints for undoing mistakes and Plan/Act modes for tackling complex problems.

These patterns scale from simple scripts to large applications. The more context you give Cline about your project, the better results you’ll get.

Need Help?

• Start fresh: Type /new in the chat to begin a new task
• Report issues: Use /reportbug to help us improve
• Get support: Join our Discord community