What Is an IDE?

Explained Simply — watch, don’t read

Step 1

You don’t need an IDE to start — just a text editor

Code is plain text. Notepad on Windows, TextEdit on Mac — they work. You can write a web page or a script without installing anything fancy.

TextEdit — Untitled
1 <h1>Hello world</h1>
2 <p>My first page.</p>
3 (cursor blinking…)
💾 Save as hello.html → open in browser

Plain text + save as .html = a real web page

0 / 4
Step 2 · Example you know

QuickTime trims — CapCut builds the full edit

You can cut a clip in QuickTime Player with zero setup. For titles, transitions, and structure you reach for CapCut. Code works the same way.

✂️ Built-in · no install
▶️
QuickTime Player
  • Trim start & end
  • Color-coded timeline
  • Subtitle tracks
  • Multi-clip project
✓ Fine for a quick cut
🎬 Full editor
🎞️
CapCut
  • Trim start & end
  • Color-coded timeline
  • Subtitle tracks
  • Multi-clip project
✓ Structure, polish, speed
TextEdit / Notepad → IDE (VS Code)

Basic tool gets you started · IDE helps you build for real

0 / 3
Step 3

An IDE is a text editor — plus a workshop around it

IDE = Integrated Development Environment. Same typing, but with colors, folders, a built-in terminal, and plugins that catch mistakes before you run the code.

🎨
Syntax colors

Tags, words, and strings get different colors — easier to scan.

📁
File explorer

See your whole project — HTML, CSS, images — in one sidebar.

⌨️
Built-in terminal

Run commands without leaving the app (same as Step 1 in the VM lesson).

🧩
Extensions

Add spell-check for code, formatters, themes — and AI helpers later.

Four extras that turn “typing text” into “building software”

0 / 4
Step 4

Meet VS Code — where most beginners land first

Visual Studio Code (VS Code) is free, works on Mac, Windows, and Linux, and is the default choice for learning web development and beyond.

Visual Studio Code
EXPLORER
📁 my-portfolio
📄 index.html
🎨 style.css
⚡ app.js
index.html style.css
1 <!doctype html>
2 <html>
3 <body>
4 Hello portfolio!
5 </body>
~/my-portfolio % python3 -m http.server
Click Next to tour each zone
0 / 3
Step 5 · Do this now

Install VS Code in three clicks

Go to code.visualstudio.com, download for your system, drag to Applications (Mac) or run the installer (Windows). That’s it.

1
Download
code.visualstudio.com Download for Mac ▾
2
Install
VS Code.app → Applications
3
Open & pin it
💻 VS Code in your dock / taskbar

Free forever · no account required to start

0 / 3
Step 6 · Try it

Create your first file — right inside VS Code

File → New Text File → paste the lines below → Save As hello.html → double-click to open in your browser.

Menu File → New Text File
Type 
<h1>Hello world</h1>
<p>Built in VS Code.</p>
Save ⌘S or File → Save As → hello.html
Preview Right-click file → Reveal in Finder → open in Chrome / Safari

Hello world

Built in VS Code.

✓ Your page in the browser
0 / 4
🌐 Good to know

VS Code has cousins — same layout, extra powers

Many modern editors are built on VS Code’s foundation. You learn the layout once; switching later is mostly familiar.

💻
VS Code

The standard. Huge extension library. Perfect first IDE for HTML, CSS, JavaScript, Python, and more.

✨
Cursor & others

VS Code look-and-feel with AI chat and agents baked in. Same folders, same shortcuts — helpful when you’re ready for AI pair programming.

🤖
AI extensions

Tools like Claude Code or GitHub Copilot plug into VS Code when you want suggestions without leaving the editor. Optional — not day one.

📂
Open a folder, not just a file

File → Open Folder → pick your project. The sidebar shows every file — how real developers work on a portfolio or app.

Start with VS Code. Add AI helpers when building gets bigger.

🧩 Put it together

From Notepad to portfolio — the path

📝
Step 1 · Text editor
Prove code is just text
→
🎞️
Step 2 · Why upgrade
Structure beats bare minimum
→
💻
Steps 4–6 · VS Code
Install, create, preview

You don’t need the fanciest tool on day one — but the right IDE saves hours once your project has more than one file.