VS Code for the Web
Lesson 7 of 11
7💻 VS Code for the Web: Your Cloud Workbench
After the shell and text editors comes a full development environment: editor, file explorer and terminal in one browser window, running on a temporary Ubuntu sandbox in the cloud. You will learn its parts, shortcuts, and limits.
What the picture shows: The activity bar, then the explorer, then the editor, then the terminal that runs the file and prints its output.
Map of this part
The concepts in order, click any one to jump to it:
Two ways into the same idea
After learning to write in the terminal alone comes a full desk: your file cabinet on the left, the page you write on in the middle, and the terminal itself at the bottom. All of it runs in the browser on a rented computer in the cloud, so you install nothing on your own machine.
VS Code for the Web is the VS Code interface in the browser on top of a temporary Linux container such as GitHub Codespaces. It has the explorer, the editor, an integrated terminal and the command palette Ctrl+Shift+P, and extensions add support for languages and tools. The container is deleted after a while, so keep your work in Git.
Before You Start
🐚Shell commands
The integrated terminal is the very shell you learned.
✍️The editor idea
You now know buffers and saving; VS Code follows the same logic but with the mouse and modern shortcuts.
🌐A modern browser and steady connection
Everything runs through the browser, so a dropped connection interrupts the session.
The Core Idea
1Interface parts
The activity bar (left) switches between Explorer, Search and Extensions. The side bar shows files. The editor area sits in the middle. The bottom panel holds the terminal, problems and output.
2A temporary cloud sandbox
In a service such as GitHub Codespaces your environment runs Ubuntu in the cloud, not on your computer. It is temporary and cleaned up after a limited period, so anything not saved outside it (for example in Git) may vanish. Treat it as a workshop, not a vault.
3The integrated terminal
Open it with Ctrl+`; it starts in your project folder. Every shell command you learned works as is, without switching between two windows.
4Extensions
They add language support, tools, formatting and linting. Install a few, carefully: each runs with permissions inside your environment, so choose trusted ones from known publishers.
Figure 1, VS Code layout: four main parts working together in one window.
How It Works: Shortcuts and the Sandbox Workflow
| Action | Shortcut | Note |
|---|---|---|
| Open file by name | Ctrl+P | Faster than browsing folders |
| Command palette | Ctrl+Shift+P | Every editor command by name, like M-x in Emacs |
| Toggle terminal | Ctrl+` | |
| Toggle side bar | Ctrl+B | |
| Find in file / across files | Ctrl+F / Ctrl+Shift+F | |
| Comment line | Ctrl+/ | |
| Move line | Alt+↑ / Alt+↓ | |
| Save | Ctrl+S | Save after every meaningful edit |
pwd in the terminal.Ctrl+S.Worked Example: Common Situations
| Situation | What you do | Why |
|---|---|---|
| A file you cannot place | Ctrl+P and type part of the name | Instant fuzzy search |
| An editor command with unknown shortcut | Ctrl+Shift+P | Everything is listed by name |
| A red squiggle appears under code | Hover or open the Problems panel | Explains the problem and where it is |
| A shortcut that does not work in the browser | Use the command palette | The browser may reserve keys such as Ctrl+W |
Myth vs. Reality
| The myth | The reality |
|---|---|
| VS Code for the Web is the same as the one on my computer. | The interface is similar, but files and execution live on a remote server, and some shortcuts and extensions differ or are affected by the browser. |
| A graphical editor removes the need for the shell. | The terminal is a core part of it; running, testing and Git all happen through commands. |
| Every extension makes me faster. | Many slow the editor or conflict with others. Install only what you really need. |
Where Is This Idea Actually Used?
🏫A uniform environment for everyone
Everyone works on the same Ubuntu build, reducing "works on my machine" problems.
📱Work from any device
A browser is enough; no installation or setup.
🔍Catching errors early
Syntax highlighting and the Problems panel show errors before running.
🌿Working with Git
A built-in view for changes and a terminal for Git commands.
Try it yourself
The web VS Code runs on a temporary cloud sandbox. What does that mean for your files?
The sandbox is a workshop, not a vault: it is cleaned after a while, so push your work to a repository regularly.
You forget a command's shortcut in the editor. What is the fastest fix?
The command palette lists every command by name; it is the counterpart of M-x in Emacs.
Which shortcut opens a file by name without browsing folders?
Ctrl+P is an instant fuzzy file search. Ctrl+B toggles the sidebar, Ctrl+S saves, and Ctrl+/ comments a line.
Quick Review Flashcards
Ctrl+Shift+PCtrl+`Ctrl+P then part of the name.Check Your Understanding
Why push your work to Git before ending the session?
Because the sandbox is temporary and may be cleaned; the repository is the permanent copy.
What do you do if you forget a shortcut?
Open the command palette and search for the command name.
What is the practical difference between the integrated terminal and a separate one?
The integrated one starts in your project folder and stays beside your files, saving window switching.
Resources for this part
Sorted by kind: start with the official docs when you want the precise reference, or with an article or video when you want the explanation first.
Resources for this lesson
Grouped by type. Start with the official docs for precision, or an article or video for the explanation.
Official docs2
Articles1
Done with this lesson?
Sign in to save your progress.