Web-Dev-For-Beginners/8-code-editor/1-using-a-code-editor/README.md

***

# Using a Code Editor: Mastering [VSCode.dev](https://vscode.dev)

**Welcome!**  
This lesson takes you from the basics to advanced use of [VSCode.dev](https://vscode.dev)—the powerful, web-based code editor. You’ll learn how to confidently edit code, manage projects, track changes, install extensions, and collaborate like a pro—all from your browser, with zero installation required.

***

## Learning Objectives

By the end of this lesson, you’ll be able to:

- Efficiently use a code editor on any project, anywhere
- Seamlessly track your work with built-in version control
- Personalize and boost your development workflow with editor customizations and extensions

***

## Prerequisites

To get started, **sign up for a free [GitHub](https://github.com) account**, which lets you manage code repositories and collaborate worldwide. If you don’t have an account yet, [create one here](https://github.com/).

***

## Why Use a Web-based Code Editor?

A **code editor** like VSCode.dev is your command center for writing, editing, and managing code. With an intuitive interface, tons of features, and immediate access via the browser, you can:

- Edit projects on any device
- Avoid the hassle of installations
- Collaborate and contribute instantly

Once you’re comfortable with VSCode.dev, you’ll be prepared to tackle coding tasks from anywhere, anytime.

***

## Getting Started with VSCode.dev

Navigate to **[VSCode.dev](https://vscode.dev)**—no install, no downloads. Signing in with GitHub unlocks full access, including syncing your settings, extensions, and repositories. If prompted, connect your GitHub account.

After loading, your workspace will look like this:

![Default VSCode.dev](../images/default-vscode-dev has three core sections from left to right:
- **Activity bar:** The icons such as 🔎 (Search), ⚙️ (Settings), files, source control, etc.
- **Sidebar:** Changes context based on the activity bar icon selected (defaults to *Explorer* to show files).
- **Editor/code area:** The largest section to the right—where you’ll actually edit and view code.

Click through the icons to explore features, but return to the _Explorer_ to keep your place.

***

## Opening a GitHub Repository

### Method 1: From the Editor

1. Go to [VSCode.dev](https://vscode.dev). Click **"Open Remote Repository."**

   ![Open remote repository](../images/open-remote-repository use the _Command Palette_ (Ctrl-Shift-P, or Cmd-Shift-P on Mac).

   ![Palette Menu](../images/palette-menu.pngopen remote repository.”
   - Select the option.
   - Paste your GitHub repo URL (e.g., `https://github.com/microsoft/Web-Dev-For-Beginners`) and hit Enter.

If successful, you’ll see the entire project loaded and ready to edit!

***

### Method 2: Instantly via URL

Transform any GitHub repo URL to open directly in VSCode.dev by replacing `github.com` with `vscode.dev/github`.  
E.g.:

- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`

This feature supercharges quick access to ANY project.

***

## Editing Files in Your Project

Once your repo is open, you can:

### 1. **Create a New File**
- In the *Explorer* sidebar, navigate to your desired folder or use the root.
- Click the _‘New file ...’_ icon.
- Name your file, press **Enter**, and your file appears instantly.

![Create a new file](../images/create-new-file 2. **Edit and Save Files**

- Click on a file in the *Explorer* to open it in the code area.
- Make your changes as needed.
- VSCode.dev automatically saves your changes, but you can press Ctrl+S to save manually.

![Edit a file](../images/edit-a-file.png. **Track & Commit Changes with Version Control**

VSCode.dev has integrated **Git** version control!

- Click the _'Source Control'_ icon to view all changes made.
- Files in the `Changes` folder show additions (green) and deletions (red).  
  ![View changes](../images/working-tree.png changes by clicking the `+` next to files to prepare for commit.
- **Discard** unwanted changes by clicking the undo icon.
- Type a clear commit message, then click the checkmark to commit and push.

To return to your repository on GitHub, select the hamburger menu at the top left.

![Stage & commit changes](../images/edit-vscode.dev Up with Extensions

Extensions let you add languages, themes, debuggers, and productivity tools to VSCode.dev—making your coding life easier and more fun.

### Browsing and Managing Extensions

- Click the **Extensions icon** on the activity bar.
- Search for an extension in the _'Search Extensions in Marketplace'_ box.

  ![Extension details](../images/extension-details:
  - **Installed**: All extensions you’ve added
  - **Popular**: Industry favorites
  - **Recommended**: Tailored to your workflow

  ![View extensions](

  

***

### 1. **Install Extensions**

- Enter the extension’s name in search, click it, and review details in the editor.
- Hit the **blue Install button** in the sidebar _or_ in the main code area.

  ![Install extensions](../images/install-extension 2. **Customize Extensions**

- Find your installed extension.
- Click the **Gear icon** → select _Extension Settings_ to fine-tune behaviors to your liking.

  ![Modify extension settings](../images/extension-settings 3. **Manage Extensions**
You can:

- **Disable:** Temporarily turn off an extension while keeping it installed
- **Uninstall:** Permanently remove it if no longer needed

  Find the extension, hit the Gear icon, and select ‘Disable’ or ‘Uninstall,’ or use the blue buttons in the code area.

***

## Assignment

Test your skills: [Create a resume website using vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)

***

## Further Exploration and Self-Study

- Dive deeper with [the official VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza).
- Explore advanced workspace features, keyboard shortcuts, and settings.

***

**Now you’re ready to code, create, and collaborate—from anywhere, on any device, using VSCode.dev!**