What is Cursor? How to Build Your First HTML Project with AI (2026 Guide)

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.

What Cursor actually does

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:

• Describe what you want and have it write the code
• Ask questions about existing code to understand it
• Edit specific parts by describing the change in plain English
• Generate entire files from a brief description

You still see and control the code — the AI just writes the first draft (and the second, and the third).

Step 1: Download and install Cursor

1. Go to cursor.com
2. Click Download for free
3. Choose your platform — macOS (Apple Silicon or Intel) or Windows
4. Open the downloaded file and install it

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.

Step 2: Choose your AI model

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.

Step 3: Open the interface

Cursor looks like VS Code. The main areas:

Step 4: Create your first project folder

Open the terminal inside Cursor:

• Mac: Ctrl + `` `` (backtick)
• Windows: Ctrl + `` `` (backtick)

Create a folder for your project:

mkdir my-first-html-project
cd my-first-html-project

Then open this folder in Cursor:

• Go to File → Open Folder
• Navigate to my-first-html-project
• Click Open

The Explorer sidebar on the left now shows your empty project folder.

Step 5: Use Composer to build your first page

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.

Step 6: Open it in your browser

In your terminal:

open index.html

Windows:

start index.html

Your browser will open and you'll see your landing page.

Step 7: Make your first edit with AI

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.

Step 8: Ask questions with Chat

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.

Step 9: Add a feature with Composer

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.

How the three AI modes differ

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.

Prompting tips for Cursor

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.

What to build next

Now that your landing page is working, try these in Composer:

1. Add a dark/light mode toggle button
2. Add a contact form with name, email, and message fields
3. Add a footer with links to GitHub and LinkedIn
4. Make the section headings animate in when you scroll to them

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.

Connecting Cursor to Git

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.