Cursor AI for Complete Beginners: Install It, Talk to It, Build Your First Real Page
Cursor AI — Module 1: Complete Beginner's Guide to Getting Started
You don't need to know how to code to use Cursor. You just need to know how to describe what you want. This first module takes you from a completely empty editor to a real, working website — every click shown, every prompt explained, nothing assumed.
Cursor is an AI-powered code editor — think of it as a smarter version of a text editor, built on top of VS Code, with Claude and GPT models wired directly in. You type what you want in plain English, and Cursor writes, edits, and fixes the code for you. This guide covers everything from installing it to building your first real page.
By the end of this module you'll have Cursor installed, you'll understand the interface, and you'll have built a working webpage using only AI prompts. Module 2 gets into full multi-page projects, and Module 3 covers advanced features like Composer and Cursor Rules — but everything starts here.
What Exactly Is Cursor?
Cursor looks like a normal code editor — files on the left, a workspace in the center, a chat panel on the right. The difference is that the AI isn't a separate tool you copy code into. It's built directly into the editor and can see, read, and edit your actual project files.
| A Regular Text Editor | Cursor |
|---|---|
| You write every line yourself | You describe what you want, Cursor writes it |
| No understanding of your project | Reads your whole project for context |
| Copy-paste from a chatbot | Changes apply directly to your files |
| You debug manually | Paste an error, Cursor fixes it |
Think of it like having a builder standing next to you. You describe the room. They put up the walls. You don't need to know how to lay bricks — you need to know what the room should look like.
What You Need Before You Start
Cursor works on Mac, Windows, and Linux. The requirements are simple.
A Computer With Internet Access
Cursor downloads as a normal desktop app — no terminal setup required for installation (unlike Claude Code). This makes it one of the easiest AI tools to get started with.
A Free Cursor Account
You'll sign in with Google or GitHub when you open the app for the first time. The free plan is more than enough to complete this entire course.
Installing Cursor — Step by Step
Download Cursor
Go to cursor.com and click "Download for Free." It automatically detects your operating system.
Run the Installer
Open the downloaded file and follow the install prompts — this works exactly like installing any other app on your computer.
Sign In
When Cursor opens for the first time, it asks you to sign in with Google or GitHub. Choose either — it takes ten seconds.
Pick the Free Plan
Select the free tier when prompted. It gives you enough usage to complete this entire 3-module course comfortably.
Cursor opens to a blank editor with a sidebar on the left. That's it — you're installed and ready.
Understanding the Interface
The File Explorer (Left Sidebar)
Shows every file in your project. Click any file to open it. This is your project folder, visualized.
The Editor (Center Panel)
Where your code lives. You can type directly, or let Cursor write it for you. Most of the time you'll be reading what Cursor writes and clicking Accept.
The Chat Panel (Cmd+L / Ctrl+L)
This is where you talk to the AI. Type what you need in plain English. Cursor reads your open files, understands the context, and responds with real, working code.
Inline Edit (Cmd+K / Ctrl+K)
The fastest way to make a small change. Highlight any code, press Cmd+K, type what you want changed. Cursor rewrites just that section instantly.
Your First Project — Build a Webpage in 10 Minutes
Create a New File
In Cursor: File → New File. Save it as index.html in a new folder on your Desktop called my-first-page.
Open the Chat Panel and Send Your First Prompt
Press Cmd+L (Mac) or Ctrl+L (Windows) to open the chat panel, then paste this:
# Paste this into the Cursor Chat panel (Cmd+L)
Create a simple HTML webpage. It should have:
- A clean white background
- A centered headline that says "My First AI-Built Page"
- A short paragraph underneath explaining what Cursor is
- A green button labeled "Learn More"
- Basic modern CSS styling — no frameworks needed
Apply and Accept
Cursor shows you the code it wants to add. Click Apply, then Accept — the code drops directly into your file. Double-click index.html in your file manager to open it in a browser and see your page live.
How to Talk to Cursor — Prompt Basics for Beginners
Be specific, not vague
Don't say "make it look nice." Say "add a drop shadow, round the corners to 12px, and use a dark green button." Specifics beat adjectives every time.
Give context about your file
Cursor reads your open files automatically. Reference things directly: "change the button in the hero section" works better than "change the button."
Build in rounds, don't try to describe everything at once
First pass: structure. Second pass: styling. Third pass: content. One focused prompt per round beats one giant prompt trying to cover everything.
Tell Cursor what you don't want
"No external libraries. No JavaScript. Keep it under 80 lines." Constraints make the output sharper every time.
Cursor is only as good as your instructions. Vague prompts get vague code. Be the architect, not just the dreamer.
Essential Keyboard Shortcuts
- Cmd+L / Ctrl+L — Open the chat panel to talk to the AI
- Cmd+K / Ctrl+K — Inline edit on selected code
- Cmd+S / Ctrl+S — Save your file
- Tab — Accept an autocomplete suggestion as you type
- Ctrl+` — Open a terminal inside Cursor
Module 1 Practice — Set Up a Blog or Website From Scratch
Your hands-on assignment for Module 1: use Cursor to build a complete, simple personal blog homepage — then get it live on the internet for free.
Create Your Project Folder
In Cursor: File → Open Folder → create a new folder called my-blog and open it. This lets Cursor see your whole project, not just one file.
Build the Homepage
Create index.html, open the chat panel, and use this prompt:
Build me a complete homepage for a personal blog called "My AI Journal" using HTML and CSS. Requirements: - Link to a separate style.css file (no inline styles) - Navigation bar with links to: Home, About, Contact - Hero section with a big headline and short tagline - "Latest Posts" section with 3 placeholder post cards (title, excerpt, date, Read More link) - Simple footer with my name and copyright year - Clean modern design — white background, dark text, one green accent color - Fully responsive on mobile Pure HTML and CSS only — no frameworks.
Put It Online for Free
- Go to netlify.com and create a free account — no credit card needed
- Click "Sites" then drag your entire my-blog folder onto the deploy zone
- Netlify gives you a live URL in under 30 seconds (yoursite.netlify.app)
- Share that link with anyone — your site is live
Refine With Cursor
Look at your live site and note anything you'd change. Go back to Cursor and describe it:
# Change a color Change the accent color to a deep teal (#0d9488) and update all buttons, links, and borders to match. # Fix mobile layout The navigation links are too close together on mobile. Add more spacing and stack the menu vertically below 600px.
Module 1 — What You've Learned
- What Cursor is: An AI-powered code editor that reads and edits your real project files
- Installation: Download from cursor.com → sign in → free plan → ready in minutes
- The interface: File explorer, editor, chat panel (Cmd+L), inline edit (Cmd+K)
- Better prompts: Specific, contextual, built in rounds, with clear constraints
- Practice project: A complete personal blog homepage, built and deployed live for free
That's Module 1. You now have Cursor installed, you understand how it works, and you've built and published a real website. Module 2 takes this further with multi-page projects, deployment workflows, and debugging techniques.