I Had Zero Coding Skills. I Gave Cursor AI One Sentence. Here's What Happened Next.
Cursor AI Course — Part 1: Getting Started
You don't need to know how to code. You don't need any technical background. You just need to know how to describe what you want. That's it. That's the whole skill. This first module gets you installed, oriented, and building your very first page — in under 20 minutes.
Most Cursor tutorials drop you in the deep end. This one doesn't. Part 1 is about getting comfortable — what it is, how it works, how to talk to it, and how to get your first real result out of it today.
By the end of this part you'll have Cursor installed, you'll understand what each part of the interface does, and you'll have built something — a real webpage — with a single prompt. No prior experience. No coding. Just you and the AI.
What Is Cursor, Actually
Cursor is a code editor. Think of it like a really smart version of Notepad. It has Claude and GPT-4o built right inside it. You type what you want in plain English and it writes the code for you.
You don't have to read the code. You don't have to understand it. You just have to know what you want built — and be specific enough to describe it. That's the whole job.
The analogy that sticks: you're the architect. Cursor is the builder. You describe the room. It puts up the walls.
Cursor is built on VS Code — the most popular code editor in the world. If you've used it before, the layout will feel familiar. If you haven't, don't worry. Everything gets explained here.
Install Cursor — Step by Step
- Go to cursor.com and click "Download for Free"
- Run the installer for your OS — Mac, Windows, or Linux
- Open Cursor — it'll ask you to sign in with Google or GitHub
- Pick the free plan — more than enough to learn everything in this course
- The editor opens — you'll see a dark interface with a sidebar on the left
If you can see the editor, you're good to go. Don't touch any settings yet. We'll set those up as we need them — not before.
The Interface — What Each Part Does
There are four things you need to know about. Everything else is optional.
Shows every file in your project. Click a file to open it in the editor. Think of it like your project's folder — all your HTML, CSS, and JavaScript files live here.
Where your code lives and shows up. You can type here directly, but most of the time Cursor AI will be writing in here for you. Your job is to read it, review it, and press Accept.
This is where you talk to the AI. Type what you need in plain English. Cursor reads your open files, understands context, and gives you working code — not generic suggestions. This is where most of your work happens.
The fastest way to change something. Highlight any chunk of code, press Cmd+K (or Ctrl+K on Windows), type what you want changed. Cursor rewrites just that part instantly. No chat panel needed.
Most of what's in the menus you won't need for months. Focus on the Chat panel (Cmd+L) and Cmd+K. That's 90% of how you'll actually use Cursor.
Your First Prompt — Build Something Right Now
Don't sit around exploring. Build something. Do this now:
- Go to File → New File and save it as index.html
- Press Cmd+L (Mac) or Ctrl+L (Windows) to open the Chat panel
- Paste the prompt below and hit Enter
Create a simple HTML webpage for me. It should have: - A clean white background - A centered headline that says "My First AI-Built Page" - A short paragraph underneath explaining what Cursor AI is in 2 sentences - A green button that says "Learn More" — rounded corners, no sharp edges - Basic modern CSS styling baked into the same file — no external stylesheets needed Keep everything in one HTML file. No JavaScript needed. No frameworks.
Cursor writes the full HTML and CSS. You'll see it appear in the chat window. Click Apply and it drops straight into your index.html file. Then click Accept to keep it.
Open your file in a browser — File → Open, or just drag the file into Chrome — and you'll see your page live.
You built a webpage without writing a single line of code. That's exactly what Cursor is for. The rest of this course is just doing that at scale.
How to Write Prompts That Actually Work
Most beginners use Cursor wrong. They write vague prompts and get vague code back. Here's what separates prompts that work from prompts that waste your time.
Don't say "make it look nice." Say "add a 2px border, round the corners to 10px, use #10B981 for the button color, and add a subtle box-shadow." The AI needs dimensions, colors, and behaviors — not vibes.
Cursor sees every file you have open. Reference them directly: "update the button inside the hero section" instead of "update the button." The more specific the target, the better the output.
Round 1: get the structure. Round 2: fix the styling. Round 3: add the content. Trying to describe an entire page in one giant prompt almost always produces something half-right. Build it in layers.
"No Bootstrap. No JavaScript. No external fonts. Keep it under 60 lines." Constraints narrow down what Cursor generates and make the output cleaner. Every good prompt has at least one.
If the output isn't right, say so directly: "The button is too small and the color is off. Make it 48px tall and change the color to #047857." Don't start over — just correct it in the same conversation.
Cursor is only as good as your instructions. Vague prompts get vague code. You're the architect — act like it.
Practice Prompts — Try These Right Now
Here are three more prompts to build on what you just made. Run them one at a time in the Chat panel.
Add a navigation bar to the top of my index.html. Requirements: - Sticky — stays at the top when scrolling - Left side: site name "My AI Blog" in bold dark text - Right side: three links — Home, About, Contact - White background, subtle bottom border, no JavaScript - Responsive — on mobile the links should stack or hide
Below the hero section in my index.html, add a "Why Cursor" features section. Show 3 feature cards in a row — on mobile they should stack to one column. Each card has: an emoji icon, a bold title, and 2 short sentences of description. Use these 3 features: 1. 🤖 AI-Powered — "Claude and GPT-4o built right inside. No tab-switching." 2. ⚡ Fast Iteration — "Go from idea to working code in minutes, not hours." 3. 🧠 Context-Aware — "Cursor reads your whole project. It knows what it's working with." Clean card design — white background, light border, rounded corners. No frameworks.
Move all the CSS from my index.html into a separate file called style.css. Update index.html to link to style.css in the <head> instead. Do not change any of the actual styles — just move them. Make sure the page still looks exactly the same after the move.
That last prompt — moving CSS to a separate file — is exactly how real projects work. You described the outcome, Cursor handled the restructure. That's the workflow for everything you'll build in Part 2.
Part 1 Complete — What You've Got
- Cursor installed and running on your machine
- First HTML page built with a single AI prompt
- Navigation bar and features section added through follow-up prompts
- CSS moved to its own file — project structured correctly
- Know how to write prompts that get real, specific results
- Understand when to use Chat (Cmd+L) vs inline edit (Cmd+K)
Build a Real Website with Cursor
Multi-page blog. Fully responsive. Deployed live. Built entirely with prompts.
→