explainx / blog
Cursor is an AI-powered code editor. Learn how to download it, navigate the interface, and build your first HTML project using AI — step by step, no prior coding experience needed.
Jun 30, 2026
pocketdev provisions a Tailscale-only Hetzner dev box for Claude Code, Codex, and Cursor CLI. Cursor shipped native iOS. OpenClaw went mobile too. Here is how each path works and what it costs.
Jun 27, 2026
HTML is just labelled text. This guide explains it in plain English and walks you through building two real pages — a photo gallery and a Grumpy Cat tribute — with the exact Cursor prompts to create them yourself.
Jun 27, 2026
Vibe coding explained: what it actually means, how to do it with Claude Code and Cursor, what you can realistically build, and where the limits are in 2026.
Cursor is a code editor with AI built directly into it. Instead of switching between your editor and a chat window, you describe what you want inside the editor and the AI writes, edits, or explains the code for you.
This guide takes you from downloading Cursor to having a working HTML project running in your browser — using plain English, no prior coding experience required.
Standard code editors (like Notepad or VS Code) are tools that let you type code. You have to know what to type.
Cursor adds an AI layer that lets you:
You still see and control the code — the AI just writes the first draft (and the second, and the third).
macOS: Open the .dmg, drag Cursor to Applications.
Windows: Run the .exe installer, follow the prompts.
Open Cursor after installation. You'll be asked to sign in — create a free account with your email.
When you first open Cursor, it will ask which AI model you want to use.
For this guide, choose claude-sonnet-4-5 or the latest Claude Sonnet available. Claude is best for writing code and following precise instructions.
You can change the model later in Settings → Models.
Cursor looks like VS Code. The main areas:
| Area | What it is |
|---|---|
| Explorer (left sidebar) | Your project files and folders |
| Editor (centre) | Where code files open for editing |
AI Chat (right sidebar or Cmd/Ctrl + L) | Ask questions, get explanations |
Composer (Cmd/Ctrl + I) | Agentic mode — AI edits multiple files at once |
Terminal (Ctrl + backtick) | Run commands without leaving the editor |
Open the terminal inside Cursor:
Ctrl + `` `` (backtick)Ctrl + `` `` (backtick)Create a folder for your project:
mkdir my-first-html-project
cd my-first-html-project
Then open this folder in Cursor:
my-first-html-projectThe Explorer sidebar on the left now shows your empty project folder.
Press Cmd + I (Mac) or Ctrl + I (Windows) to open Composer — Cursor's agentic mode where the AI can create and edit files.
Type this prompt exactly:
Create a single index.html file — a personal landing page for me.
It should have:
- A large headline with my name (use "Your Name" as placeholder)
- A one-paragraph bio below it
- Three sections: About, Projects, Contact
- Each section has a heading and 2-3 sentences of placeholder text
- A navigation bar at the top with links to each section
- A clean, modern dark theme — dark background, white text, a blue accent colour
- All styles should be inline in a <style> tag in the head, no external CSS
- Mobile responsive using media queries
No JavaScript needed. HTML and CSS only.
Press Enter. Watch Cursor's AI write the entire file.
When it finishes, you'll see index.html appear in your Explorer. Click Accept to save the file.
In your terminal:
open index.html
Windows:
start index.html
Your browser will open and you'll see your landing page.
Click somewhere in the index.html file to open it in the editor.
Select any text you want to change — for example, the paragraph text in the About section.
Press Cmd + K (Mac) or Ctrl + K (Windows) — this opens inline editing. A small input appears. Type:
Make this sound more professional and confident, and keep it under 3 sentences
Press Enter. The AI rewrites only the selected text. Press Accept to keep it, or Reject to go back.
Press Cmd + L (Mac) or Ctrl + L (Windows) to open the AI Chat sidebar.
Ask any question about your code:
What does the @media query in my CSS do?
Or:
How do I add a background image to the hero section?
The chat has context about your open files — it can see your code and answer specifically about it.
Open Composer again (Cmd/Ctrl + I) and type:
Add a "Skills" section between the Projects and Contact sections.
It should show 6 skills as pill badges — use these: HTML, CSS, JavaScript, Git, Cursor, Python.
Style the badges with a dark border, rounded corners, and the same blue accent colour already in the design.
The AI will edit the existing index.html to add the section. Review the changes — Cursor shows a diff so you can see exactly what changed before accepting.
| Mode | Shortcut | Best for |
|---|---|---|
| Chat | Cmd/Ctrl + L | Questions, explanations, advice |
| Inline edit | Cmd/Ctrl + K | Changing a specific selected piece of code |
| Composer | Cmd/Ctrl + I | Creating files, making multi-part changes |
For most beginner tasks, Composer is what you'll use most. Chat when you want to understand something. Inline when you want to tweak one specific thing.
Be specific about what already exists. Cursor can see your files, but clear references help:
In the nav bar I already have, add a "Blog" link after "Contact"
Describe the result, not the code. Tell it what you want the page to look like or do, not how to implement it:
When I hover over a nav link, underline it and change the text to the accent colour
Iterate, don't restart. Make one change at a time rather than requesting everything at once. Each Composer run is undoable.
Now that your landing page is working, try these in Composer:
Each of these is a plain-English prompt. You don't need to know how to write the code — describe what you want and review what the AI produces.
Once you're happy with your project, push it to GitHub so it's saved and shareable.
In the Cursor terminal:
git init
git add .
git commit -m "Initial landing page"
Then follow the GitHub push guide to connect it to a remote repository.