add intro

packages/projects-docs/pages/learn/editors/web/_meta.json

@@ -2,5 +2,6 @@
   "overview": "Overview",
   "commandpalette": "Command Palette",
   "shortcuts": "Keyboard Shortcuts",
-  "themes": "Themes"
+  "themes": "Themes",
+  "vscode-web": "VS Code Web"
 }

packages/projects-docs/pages/learn/editors/web/vscode-web.mdx

@@ -0,0 +1,22 @@
+---
+
+title: VS Code Web
+description: Introduction to a customized version of[VS Code for the web
+
+import { Callout } from 'nextra-theme-docs
+
+# VS Code for the web
+
+Productivity is key when working in an editor. For this reason, we have embedded our CodeSandbox features within the powerful and well loved VS Code.
+
+The web editor looks and functions as VS Code for the web, with a few built in CodeSandbox tools.
+
+![vs code web layout](../../images/vscode-web-overview.png)
+
+The activity bar holds all the tools for managing your developer experience. The web editor will always contain the standard VS Code tools, namely the File explorer, Search, Source Control, Run and Debug and the Extension marketplace.
+
+The web editor also comes with a CodeSandbox Devtool extension which provides access to all the unique Code Sandbox features (more on that later).
+
+In the terminal panel, you can see all the running tasks, any private terminals as well as shared terminals (managed by CodeSandbox).
+
+While the layout is entirely customizable, the standard layout opens previews, and support tools like documentation and setup tools in the right editor panel.