Text Editors & Setup

📚 Lesson 2 of 25  •  ⏱ 6 min read  •  Beginner

What is a Text Editor?

A text editor is the tool you use to write HTML, CSS and JavaScript. Unlike Microsoft Word, a code editor shows plain text — no hidden formatting — which is exactly what browsers need to read your files.

Recommended Editor: VS Code

Visual Studio Code (VS Code) is the most popular code editor in the world. It is free, fast, and works on Windows, Mac and Linux. We strongly recommend it for this course.

Download it free from: code.visualstudio.com

Essential VS Code Extensions

After installing VS Code, add these extensions (click the Extensions icon on the left sidebar):

Extensions to install 
1. Prettier - Code formatter       (auto-formats your code)
2. Live Server                      (preview your page in real time)
3. Auto Rename Tag                  (renames closing tag automatically)
4. HTML CSS Support                 (autocomplete for HTML/CSS)
5. IntelliSense for CSS             (CSS property suggestions)

Setting Up Live Server

Live Server lets you see changes in your browser instantly as you type — no need to refresh manually:

  1. Install the Live Server extension in VS Code
  2. Open your project folder in VS Code (File → Open Folder)
  3. Right-click your index.html file
  4. Click "Open with Live Server"
  5. Your browser opens at http://127.0.0.1:5500 — it auto-refreshes on every save!

Other Editors (Alternatives)

Options 
Notepad++     — Lightweight, Windows only. Good for quick edits.
Sublime Text  — Fast, minimalist. Free to try, paid license optional.
Atom          — Was popular, now discontinued. Avoid.
Notepad       — Works for basics, but no syntax highlighting. Not ideal.

Online Editors (No Installation Needed)

If you can't install software, use these browser-based editors:

← Introduction to HTML Next: Your First Web Page →