Ahoy! Welcome aboard!

Welcome! I'm Captain Redbeard and I'll be your guide on the journey of learning to code. Today I'll show you Cursor - a modern code editor with built-in artificial intelligence.

What is Cursor?

Cursor is a code editor with built-in AI that helps you write code faster and more efficiently. Unlike traditional editors, Cursor has built-in artificial intelligence (Claude Sonnet 4.6, GPT-5) that:

Writes code - you describe what you want, AI generates code Explains - don't understand something? Ask the AI Debugs - got an error? AI will help fix it Suggests - AI suggests what to write next

Thanks to this, you learn faster and create more efficiently.

Cursor vs VS Code

VS Code (Visual Studio Code) is the most popular code editor in the world - free, open-source, used by millions of developers.

Cursor is built ON TOP OF VS Code, so:

• It looks nearly identical
• Has the same keyboard shortcuts
• Supports the same extensions
• PLUS: built-in AI (Claude Sonnet 4.6, GPT-5)

If you know VS Code - you'll feel right at home. If you don't - don't worry, I'll show you everything from scratch.

Installing Cursor - Step by Step

Now we'll install Cursor. This will take about 5 minutes.

Step 1: Download Cursor

1. Go to: https://cursor.com
2. Click the big "Download" button
3. Choose your platform:
   • Windows - downloads a .exe installer
   • Mac - downloads a .dmg installer
   • Linux - downloads an .AppImage or .deb

Step 2: Install

Windows:

1. Double-click the downloaded CursorSetup.exe file
2. Click "Yes" if Windows asks for permissions
3. Wait about 30 seconds for installation
4. Cursor will open automatically

Mac:

1. Double-click Cursor.dmg
2. Drag the Cursor icon to the Applications folder
3. Open Cursor from Launchpad or Applications
4. Click "Open" if Mac asks about security

Linux:

# For .AppImage
chmod +x Cursor.AppImage
./Cursor.AppImage

# For .deb (Ubuntu/Debian)
sudo dpkg -i cursor_*.deb

Step 3: First Launch

When Cursor opens for the first time, you'll see:

1. Welcome screen - the greeting page
2. "Sign In" - log in (via GitHub or email)
3. Choose your plan:
   • Free - free, Agent and chat with limited usage (plenty for learning!)
   • Plus, Premium, Super and Ultra - paid plans with higher limits (current prices: cursor.com/pricing)

Choose Free - it's more than enough to start!

Step 4: Import settings (optional)

If you've used VS Code before, Cursor will ask:

• "Import settings from VS Code?"
• Click "Yes" - it will transfer your settings, shortcuts, extensions

If this is your first editor - click "Skip".

Cursor Interface - What's Where?

Open Cursor and take a look:

┌─────────────────────────────────────────────────────────┐
│  File  Edit  View  ...                    [Cursor logo] │ <- Menu Bar
├───────┬─────────────────────────────────┬───────────────┤
│       │                                 │               │
│       │                                 │   AI CHAT     │
│ FILES │        EDITOR                   │               │
│       │      (you write code here)      │   (Cmd+L)     │
│       │                                 │               │
│       │                                 │               │
├───────┴─────────────────────────────────┴───────────────┤
│               TERMINAL (you type commands here)         │
└─────────────────────────────────────────────────────────┘

Left Panel - FILES (Explorer)

• List of all files in the project
• Creating new files/folders
• Navigating the project

Center - EDITOR

• This is where you write code
• You can have multiple tabs open
• Syntax highlighting (code coloring)

Right Panel - AI CHAT

• Conversation with AI
• Asking questions
• Generating code
• Open it with: Cmd+L (Mac) / Ctrl+L (Windows/Linux)

Bottom Panel - TERMINAL

• Type commands here (npm, git, etc.)
• Open it with: Cmd+** or **Ctrl+

Your First Conversation with AI

Time to test the magic of Cursor!

1. Open AI Chat: Cmd/Ctrl + L
2. Type:

Explain in simple terms: what is HTML?

3. Press Enter
4. Watch the AI respond!

The AI should give you a simple answer. You can ask follow-up questions:

And what is CSS?

What's the difference between HTML and JavaScript?

Congratulations! You just had your first conversation with AI in Cursor!

How to Talk to AI Effectively?

AI is smart, but it can't read minds. You need to communicate clearly what you want.

BAD (too vague):

make me a website

AI doesn't know:

• What kind of website?
• What is it about?
• What colors?
• What sections?

GOOD (specific):

Create a simple HTML page with:
- A heading "Ahoy Pirates!"
- Black background
- Red text
- A pirate image
- A "Join the Crew" button

AI knows exactly what to do!

Rules for Good Prompts:

1. Be specific - the more details, the better
2. Describe the goal - why are you doing this?
3. Give examples - "like on website X"
4. Iterate - the first AI response isn't the end, keep refining!

Keyboard Shortcuts - Cheat Sheet ⌨

Memorize these 5 most important ones:

Print this out and stick it next to your monitor!

Summary - What Did You Learn Today?

What Cursor is and why we use it How to install Cursor What the Cursor interface looks like How to talk to AI (Cmd+L) How to write good prompts The most important keyboard shortcuts

Congratulations, young pirate! We've boarded the ship and met our secret weapon - Cursor!

In the next exercise you'll learn to use Ctrl+K - the magic wand for editing code!

Get ready, because an exciting voyage awaits us!

Captain Redbeard out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ahoy Pirates!</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h1 {
            color: #dc2626;
            border: 2px solid #f59e0b;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Ahoy Pirates!</h1>
    <p>Welcome aboard the Black Pearl of Code!</p>
    <p>Experiment with this code - change the text, colors, add something of your own!</p>
</body>
</html>