Working in the Editor
Goal — Open your project in the editor, learn the panels, create your first files, and find the built-in terminal.
By the end — my-first-site open in the editor with index.html and css/styles.css created by hand.
1Open your project folder
Go to File, then Open Folder, and choose the my-first-site folder you made yesterday. The left panel now shows your project — the css and js folders are there.
Open Folder shortcut: Cmd + O.
2Learn the four regions
The file explorer on the left lists your files and folders. The editor in the center is where you read and change code. The status bar along the bottom shows the current file's details. The activity bar on the far left switches between files, search, and extensions.
3Create your first file
Right-click in the file explorer and choose New File. Name it index.html — this will be your site's home page. Leave it empty for now; Claude Code fills it in during Phase 5.
4Create a file inside a folder
Right-click the css folder, choose New File, and name it styles.css. Notice the file appears nested under css, matching the structure you built in the terminal.
5Open files fast
Start typing index in the quick-open box and the editor filters to matching files; press Enter to open. This is much faster than clicking.
Quick open: Cmd + P.
6Search across the project
Search inside the open file, or search across every file at once.
In-file: Cmd + F. Across all files: Cmd + Shift + F.
7Find the built-in terminal
Press Ctrl + ` (the backtick key, below Escape) to open a terminal inside the editor. It already sits in your project folder — run ls to confirm. This is where you will run Claude Code from Phase 3 on, so your editor becomes your whole workbench.
lsWindows: inside the editor you can pick which terminal opens. Choose Git Bash if prompted, so the commands you run match the Mac examples in this course. Set it in the terminal panel's dropdown, or in settings under "default profile."
Recap — You opened your project in the editor, learned its four regions, created index.html and styles.css by hand, and found the built-in terminal where Claude Code will live.