Installing VS Code for HTML
Visual Studio Code (VS Code) is a free, lightweight code editor built by Microsoft. It's the most widely used editor for HTML, CSS and JavaScript because it's fast, cross-platform, and endlessly extendable. In this lesson you'll install it, create your first HTML file, and get comfortable with the features you'll use every day.
- Why VS Code is a good fit for HTML beginners
- How to download and install it on your OS
- How to create a project folder and open it in VS Code
- How to create and save your first
index.html - Which extensions actually matter when starting out
- Useful keyboard shortcuts to speed up your workflow
- The key parts of the VS Code interface, by name
- How to avoid the mistakes most beginners run into
💡 Why use VS Code for HTML?
You can technically write HTML in Notepad or TextEdit — the browser doesn't care what you used. But a proper code editor saves you a lot of frustration as your pages get bigger.
None of these are "wrong" — plenty of developers still reach for a quick online playground when testing a one-off snippet. But for anything you plan to keep, save, or grow into a real site, a proper editor pays off almost immediately.
Bottom line: VS Code gives beginners the guardrails (autocomplete, error hints) without hiding what's actually happening in your files.
⬇️ Download and install VS Code
my-html-project, to hold your webpage files.Don't open a single file by itself. Opening the whole project folder gives you the Explorer sidebar, so you can add images, CSS and more files as your site grows.
📄 Create your first HTML file
In the Explorer panel on the left, click the "New File" icon and name it
index.html. Browsers automatically load a file named
index.html when you open a folder, which is why it's the
standard name for a homepage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, HTML!</h1>
<p>I created my first webpage.</p>
</body>
</html>🔎 Understand the important parts
| Code | Purpose |
|---|---|
<!DOCTYPE html> | Declares the document as an HTML document. |
<html> | The root element containing the complete page. |
<head> | Contains page information and resources. |
<title> | Sets the title associated with the browser tab. |
<body> | Contains the content displayed on the webpage. |
<h1> | Creates the main heading. |
<p> | Creates a paragraph. |
▶️ Try it yourself
Edit the HTML on the left, then click Run to see it rendered on the right — just like Live Server does in VS Code.
⚡ Useful VS Code extensions
Live Server
Launches a local development server and refreshes your browser automatically every time you save.
Prettier
Formats HTML, CSS and JavaScript automatically so your code stays clean and consistent.
HTML IntelliSense
VS Code provides HTML tag suggestions and autocomplete out of the box, no install needed.
Auto Rename Tag
Automatically renames the matching closing tag when you edit an opening tag.
indent-rainbow
Colors nested indentation levels, making deeply nested HTML easier to read at a glance.
Path Intellisense
Autocompletes filenames when linking images, CSS, or scripts by relative path.
HTML CSS Support
Suggests existing class and ID names from your linked CSS files while you type in HTML.
Highlight Matching Tag
Visually highlights the matching opening or closing tag as you move your cursor through the code.
⌨️ Handy keyboard shortcuts
Ctrl / Cmd + NCtrl / Cmd + SCtrl / Cmd + `Shift + Alt + FCtrl / Cmd + PCtrl / Cmd + /Shift + Alt + DownCtrl / Cmd + Shift + P🧭 A quick tour of the VS Code interface
Before you go further, it helps to know what each part of the window is called — you'll see these names throughout every VS Code tutorial you read.
Activity BarExplorerEditorIntegrated TerminalStatus BarExtensions ViewTip: Go to File → Preferences → Theme → Color Theme to pick a look that's comfortable to read for long stretches. This is purely cosmetic and won't affect your code.
🌐 Open your HTML page in a browser
After saving index.html, you can open it directly by
double-clicking the file, or — better — right-click it in VS Code and choose
Open with Live Server if you installed that extension, so the
page auto-refreshes every time you save.
- VS Code is installed.
- Your project folder is open in VS Code.
- Your file is named
index.html, notindex.html.txt. - Your HTML structure is complete (doctype, html, head, body).
- The page opens successfully in your browser.
🧪 Practice task
Create a simple personal webpage with your name, a short introduction, your
skills, and one link. Save it as index.html, then start
organizing your project like this:
⚠️ Common beginner mistakes
Some systems hide file extensions by default, so "index.html" typed into a plain text editor can silently become "index.html.txt". VS Code shows extensions clearly, but it's worth double-checking.
Changes only appear once the file is saved. Live Server helps here by auto-refreshing on every save.
Always open the project folder itself, not a parent folder or a single loose file — otherwise relative paths to images and CSS will break.
A cluttered editor slows you down. Start with Live Server and Prettier, and add more only once you know you need them.
Mixing editors on the same file can cause save conflicts. Pick VS Code as your single source of truth for the project while you're learning.
📝 More practice
Set up your workspace
Install VS Code, create a project folder, and save a working index.html that opens correctly in your browser.
Add Live Server
Install the Live Server extension and confirm your page auto-refreshes when you edit and save the file.
Organize a small project
Create an images/ and css/ folder, link a stylesheet from your HTML, and reference an image using a relative path.
🎯 Interview & FAQ
Is VS Code free?
Yes. VS Code is free and open-source, maintained by Microsoft, and available for Windows, macOS, and Linux.
Do I need to know JavaScript to use VS Code?
No. VS Code itself is written using web technologies, but you don't need any programming knowledge to use it as an editor for HTML and CSS.
What's the difference between VS Code and a browser's built-in editor?
Browser dev tools are great for inspecting a live page, but changes there aren't saved to your files. VS Code edits the actual files on disk that make up your project.
Why does Live Server matter so much?
Without it, you'd have to manually refresh the browser after every change. Live Server watches your files and refreshes automatically, which speeds up the edit-save-check loop significantly.
Can I use VS Code without an internet connection?
Yes, once installed and your extensions are downloaded, VS Code works fully offline. You'll only need a connection to install or update extensions.
Do I need to install Node.js to write HTML in VS Code?
No. Plain HTML and CSS need nothing beyond a browser and a text editor. Node.js only becomes relevant later, if you start using build tools or JavaScript frameworks.
⚡ Quick Summary
- VS Code is a free, lightweight editor well suited to HTML, CSS and JavaScript.
- Always open your whole project folder, not a single loose file.
- Create
index.htmlusing the standard document structure. - Live Server auto-refreshes your browser every time you save.
- Start with a small set of extensions and add more as you need them.
- Learn a few keyboard shortcuts early — they pay off quickly.
Where to go next: now that your editor is set up, the next lesson digs into the structure of a web page itself — the <head> and <body> — so you can start building real content instead of just the boilerplate.