Your First VS Code Workspace

Explained Simply — open a folder, search like a pro, supercharge with extensions

Already installed VS Code from Episode 11? Skip to Step 3.

Step 1

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

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 2 · 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.

Download

code.visualstudio.com Download for Mac ▾

Install

VS Code.app → Applications

Open & pin it

💻 VS Code in your dock / taskbar

Free forever · no account required to start

0 / 3

Step 3

Open a folder — your project binder

Real developers work inside a folder, not loose files in Downloads.
- File → Open Folder → pick or create
- ⌘O (Mac) or CtrlO (Windows)
- folder name: my-portfolio.

❌ Loose files

index.html style.css logo.png

Scattered · hard to find things

✓ Project binder

📁 my-portfolio

📄 index.html

🎨 style.css

📁 images

Everything visible in Explorer

File → Open Folder → my-portfolio

One folder = one project · trust the folder if VS Code asks

0 / 3

Step 4 · Try it

Create files and folders in Explorer

Hover the top of the file tree for New File and New Folder icons — or right-click. The file extension (.css, .html) tells VS Code how to color your code.

Folder Right-click Explorer → New Folder → images

Files New File → index.html, style.css, app.js

Save ⌘S / CtrlS — white dot on tab = unsaved

Tree Your project should look like this ↓

📁 my-portfolio

📄 index.html

🎨 style.css

⚡ app.js

📁 images

0 / 4

Step 5

Two search tools — two different jobs

Quick Open finds a file by name. Search in files finds text inside every file. Most beginners mix them up — you won’t after this.

> |

📄 index.html

🎨 style.css

⚡ app.js ← match

Type part of a filename — fuzzy match

0 / 3

Step 6

Command Palette — do anything by typing

⌘⇧P (Mac) or CtrlShiftP (Windows) opens a magic search bar for actions — format, themes, extensions, and more.

> |

Format Document

Preferences: Color Theme

Extensions: Install Extensions

Can’t find a menu item? Palette it.

0 / 3

Step 7 · Do this now

Extensions — the App Store for your editor

Click the puzzle icon or press ⌘⇧X. Search → Install → use. Start with these three.

Marketplace Search Live Server → Install

Use it Right-click index.html → Open with Live Server

Starter pack Also try Prettier + Material Icon Theme

🌐

Live Server

Preview HTML with auto-refresh

✨

Prettier

Tidy messy code on save

🎨

Material Icon Theme

Clear file icons in Explorer

Stick to high download counts · same puzzle icon in Cursor

0 / 3

Step 8 · Try it

Build a mini workspace today

Work through this checklist on your machine. Each step uses something from this lesson.

Create folder practice-vscode on Desktop
File → Open Folder → select it
Add index.html, style.css, folder images/
⌘P / CtrlP → jump to style.css
⌘⇧F → search for <h1>
Install Live Server → preview index.html
⌘⇧P → “Color Theme” → try Dark+

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Practice</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello from VS Code</h1>
  </body>
</html>

📋 Cheat sheet

Five shortcuts to screenshot

⌘P

Quick Open — find a file

⌘⇧F

Search text in all files

⌘⇧P

Command Palette — any action

⌘S

Save file

⌘⇧X

Extensions Marketplace

Windows: use Ctrl instead of ⌘

🌐 Good to know

Tips that save headaches later

✨

Using Cursor?

Same layout, same shortcuts, same puzzle icon. Everything here applies.

🛡️

Extension safety

Pick extensions with millions of downloads and known publishers. Skip vague “free coins” add-ons.

⌨️

Terminal still works

Live Server is convenience.

📂

Episode 11 recap

Missed the IDE intro? What Is an IDE? covers text editors vs IDEs in depth.

🧩 Put it together

From install to daily workflow

💻

Steps 1–2 · Setup

Tour + install (skip if ready)

→

📁

Steps 3–4 · Project

Open folder, build the tree

→

🧩

Steps 5–7 · Power tools

Search, palette, extensions

Open a folder, learn two search shortcuts, install Live Server — that is the daily VS Code workflow in a nutshell.

Quick quiz

1. Starting a multi-file project — what do you open first?

2. You remember a file named something like “navbar”. Best shortcut?

3. Find every occurrence of “TODO” across all project files?

4. Extensions are best described as…