Chapter 2
Beginner
6 min read
Getting Started
Setting Up VS Code
Visual Studio Code is the world's most popular code editor. Setting it up correctly makes writing HTML faster with colour highlighting, auto-complete, and live preview.
🎯 What you'll learn
✓Download and install VS Code
✓Install the Live Server extension
✓Create and open an HTML file
✓Use Emmet shortcuts to write faster
Install VS Code
Visit code.visualstudio.com and download the installer for your OS. Run it with default options.
✅ Free & Open Source
VS Code is completely free, built by Microsoft, and
updated monthly with new features.
code.visualstudio.com
Official download page. Always download from here.
Windows / macOS / Linux
VS Code runs on all major operating systems.
Useful Extensions
Install these from the Extensions panel (Ctrl+Shift+X):
Live Server
Opens your HTML in the browser and auto-refreshes on save. Must-have.
Prettier
Automatically formats your HTML code on save.
Auto Rename Tag
Renames both opening and closing tags simultaneously.
HTML CSS Support
Provides class name completion for CSS defined in your project.
Create Your First File
Press Ctrl+N, save as index.html, then type ! + Tab for the full boilerplate.
Live Editor
✎ Editor
👁 Preview
❓ Quick Check — Chapter 2
Which VS Code extension auto-refreshes your browser when you save an HTML file?
📄 Chapter Summary
- Download VS Code from
code.visualstudio.com. - Install Live Server for auto browser reload on save.
- Type
!+ Tab to generate full HTML boilerplate (Emmet). - Save files as
.htmlto get HTML syntax highlighting.