cline/docs/getting-started/your-first-project.mdx

---
title: "Build Your First Project"
description: "Build your first project with Cline in under a minute."
---

Ready to see Cline in action? This hands-on tutorial will walk you through building a website in under a minute. You'll experience how Cline understands your requirements, creates files, and iterates on your feedback—all through natural conversation.

By the end of this guide, you'll have built a working website and learned the fundamentals of working with Cline.

## Prerequisites

- **Cline installed** in your editor ([Install Guide](/getting-started/installing-cline))
- **AI model selected** ([Model Setup](/getting-started/selecting-your-model))
- **Any folder open** in your editor (or create a new empty folder)

## Step 1: Open Cline

Click the Cline icon in your editor's sidebar (left side). The chat panel will open.

<Info>
**Quick Tip:** You can also use `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux) and search for "Cline: Open In New Tab"
</Info>

## Step 2: Give Cline a Task

Copy and paste this prompt into Cline's chat:

```
Create a simple website in a single HTML file. It should have:
- A welcome message saying "Hello from Cline!"
- A colorful gradient background
- A button that cycles through different color themes when clicked
- Modern, clean design
- All CSS and JavaScript should be included in the same HTML file
```

<Frame>
  <img src="https://storage.googleapis.com/cline_public_images/chat-prompt.png" alt="Cline Chat Prompt"/>
</Frame>

Press Enter and watch Cline work!

## Step 3: What Happens Next

Cline will:

1. **Create a single file:**
   - `index.html` - A complete webpage with embedded CSS and JavaScript

2. **Ask for approval** (unless you've enabled auto-approve)
   - Click "Approve" to let Cline create the file
   - You can review what it plans to do first

3. **Complete the task** within seconds

## Step 4: View Your Website

Once Cline finishes:

1. **Find `index.html`** in your editor's file explorer
2. **Right-click it** and select:
   - "Reveal in Finder/Explorer" then double-click to open in your browser
3. **Click the button** to see the color themes change!

## Try Making Changes

In the same chat, try asking:

```
Add a counter that shows how many times the button has been clicked
```

or

```
Make the welcome message fade in when the page loads
```

Cline understands the context from your previous conversation and will update the file accordingly.

<Tip>
**You now know how to:**
- Give Cline a task with a clear prompt
- Review and approve Cline's actions
- Build a complete project in seconds
- Iterate and improve on existing work
</Tip>

## Next Steps

Now that you've experienced Cline's capabilities, explore more:

<CardGroup cols={2}>
<Card title="@ Mentions" href="/features/at-mentions/overview" icon="at">
Reference specific files, folders, and URLs in your prompts
</Card>

<Card title="Plan & Act Modes" href="/features/plan-and-act" icon="diagram-project">
Master planning vs. execution for complex tasks
</Card>

<Card title="Cline Rules" href="/features/cline-rules" icon="list-check">
Set project-specific guidelines for consistent results
</Card>

<Card title="Prompting Guide" href="/prompting/prompt-engineering-guide" icon="wand-magic-sparkles">
Learn to write prompts that get the best results
</Card>
</CardGroup>

## Need Help?

- **Stuck?** Try starting fresh with `/new` in the chat
- **Found a bug?** Use `/reportbug` to help us improve
- **Have questions?** Join our [Discord community](https://discord.gg/cline)