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 should you inspect before accepting the first page?

Read the page as both a visitor and a project owner. Does the headline say what you intended? Do the navigation links point to sections that exist? Are the contact details placeholders? The AI can produce a polished layout while leaving those practical details wrong, and appearance alone will not expose the problem.

Ask Cursor to explain the document structure without changing it. You should be able to identify the head, the main page content, the navigation, and the style rules. The goal is not to memorize HTML syntax; it is to know where a visible change comes from so you can describe the next edit precisely.

Keep the first version small. A single local HTML file is easier to inspect than a generated framework project with dependencies you have never installed. If the agent proposes a package manager or a server for this exercise, ask what requirement makes it necessary. Add complexity when a feature needs it, not because a template routinely includes it.

The Cursor documentation is the reference for the current interface and agent behavior. Model menus and plan allowances change, so select a model your account exposes rather than assuming an older screenshot or quota applies to your installation.

Practice changing one requirement at a time

Try a concrete revision: the page should show three project cards in one row on a wide screen and stack them on a narrow screen. After accepting the change, resize the browser and inspect both states. If the cards overflow, describe the viewport and the visible problem rather than asking the agent to "make it responsive" again.

Next, change only the biography text. Review whether the agent also changed colors, spacing, or navigation. Unrequested edits may be harmless, but learning to notice them is part of using an AI editor well. Ask for a smaller diff when a wording change unexpectedly rewrites the layout.

Save a known good version before the next experiment. You can copy the file for this beginner exercise or use a local Git commit once you understand the workflow. Recovery should not depend on remembering which of several accepted suggestions introduced the problem.

Test the page beyond its best-looking state

Tab through the navigation using the keyboard. A visitor should be able to see which link has focus and activate it without a mouse. Check the page with longer project titles and a biography that spans several lines. Real text often exposes a fragile layout that looked fine with short placeholders.

Open the page at a narrow browser width and look for sideways scrolling. Check whether the headline wraps sensibly, buttons remain readable, and text stays inside the cards. You do not need a laboratory of devices for a first lesson, but you should inspect more than one window size.

A contact form deserves a separate check. Drawing fields and a submit button does not create a delivery service. For this HTML-only project, label a form as a demonstration or use an ordinary email link. Do not tell visitors their message was sent unless a real service received it and the application handled its response.

If the browser does not show your change

First save the file and refresh the correct browser tab. Confirm that the file you edited is the file you opened; duplicate project folders can make this surprisingly confusing. Ask the editor to show the full path before making another change.

If a picture is missing, inspect its filename and relative path. If a section link goes nowhere, compare the link target with the section identifier. If the style disappears, inspect whether the agent moved it to a separate file while your instructions still expected a single document.

Finish the exercise by explaining one layout rule and one interaction in your own words. That small explanation is evidence you understand the page you built. The useful result is a working artifact you can inspect and revise, plus a clearer sense of when the agent needs a more specific instruction.

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.

Ready to turn the page into a product prototype?

Once the first HTML project works, the next step is not piling on features. Use the Cursor prototype workflow for product managers and founders to define one decision, plan the smallest interaction, review Cursor's diff, and test the result before adding production infrastructure.