Learning to use a smart text editor that helps you build websites faster and easier
What you'll see when installing Cursor on your computer
Simple changes to make Cursor work better for you:
| Setting | Suggestion | Why |
|---|---|---|
| Theme | Dark/Light based on what you like | Easier on your eyes during long sessions |
| Text Size | 14px or 16px | Makes text easier to read |
| Text Style | JetBrains Mono (comes built-in) | Clear and easy to read |
| Word Wrap | On | Prevents text from going off the screen |
| Auto-Format | Enabled | Keeps your code neat automatically |
To find these settings:Cmd/Ctrl + , or click File > Preferences > Settings
How to set up the AI assistant that makes Cursor special:
Settings > AISettings > AISetting up your website project in Cursor:
node_modules/
.env
private-notes.txt
Visual guide to essential Cursor keyboard commands
Visual example of Cursor's command menu
The command menu is like a search box that lets you do anything in Cursor:
> first to search just for commands.
Ask the AI to write website code for you:
What you could ask: "Create a simple contact form with name, email, and message fields. Include a submit button and make it look nice."
What the AI will do: Write all the HTML and CSS for a complete, working contact form that you can add to your website.
Ask the AI to improve or fix your existing website code:
Original: A basic button that says "Submit"
What you could ask: "Make this button more attractive with a color gradient, rounded corners, and a hover effect."
Result: A professionally styled button with all the requested features
Have a conversation with the AI about your website project:
To make your website look good on all devices, you should:
Would you like me to explain any of these in more detail or show you an example?
Access command tools without leaving Cursor:
Terminal > New Terminal or the backtick key (`)The AI can see and understand all your website files:
Visual showing how the AI sees your whole project
Good prompt: "Looking at my index.html and style.css files, create a matching about-us.html page with the same header and footer."
Why it works: Tells the AI exactly which files to look at for reference.
Good prompt: "Based on how my current pages are organized, suggest how I should structure a new blog section for my website."
Why it works: Asks the AI to analyze your existing pages before making suggestions.
Update designs across multiple pages at once:
Good prompt: "Find all the contact forms on my website and update them to match our new blue color scheme."
Good prompt: "I need to replace all our old logo images with the new logo. Can you help me find all the places and create a plan to update them?"
Save time by asking for complete website pieces:
Good prompt: "Create a photo gallery section for my website that shows thumbnail images that enlarge when clicked. Make it match my website's existing style."
Result: A complete, ready-to-use photo gallery that matches your site's design.
Good prompt: "Create a newsletter signup form that matches the style of my other forms but adds a checkbox for topic preferences."
Create more complex elements for your website:
Good prompt: "Create a simple countdown timer for my website that shows days, hours, and minutes until our event on December 15th. Make it match our website colors."
Good prompt: "Look at our website's navigation menu and create a similar-looking footer menu with links to About, Contact, and Privacy Policy pages."
Visual showing how complex website features are built
Use Cursor's AI to fix issues:
Good prompt: "My image isn't showing up on my page. Here's my code - can you help me find what's wrong and fix it?"
Good prompt: "My website is loading slowly. Can you look at my home page and suggest ways to make it load faster?"
Good prompt: "Add simple explanations as comments to my website code so I can understand what each section does."
Visual guide to organizing your website files
Simple Website Structure Example:
Save time by making templates for common website parts:
Make template files for things you use often (headers, footers, etc.)
Keep all your templates in one easy-to-find place
Tell the AI to copy your template styles when making new content
Good template request: "Create a new page called team.html that follows the same layout as my about.html template, but with sections for team member profiles."
Track changes to your website with Git (built into Cursor):
Good Git prompt: "Write a simple description of the changes I made to add the contact form to my website."
Save and reuse your favorite pieces of code:
Good snippet request: "Create a reusable button style that I can use throughout my website with our brand colors and rounded corners."
Installation, configuration, and connecting to AI services to prepare your development environment.
Essential keyboard shortcuts, file navigation, and workspace management to boost productivity.
Using Cursor's chat interface and inline code generation to create and modify code efficiently.
Multi-file operations, refactoring, AI-assisted debugging, and optimizing your workflow.
Now that you've mastered the Cursor IDE, it's time to dive into practical web development: