diff --git a/8-code-editor/1-using-a-code-editor/README.md b/8-code-editor/1-using-a-code-editor/README.md
new file mode 100644
index 00000000..955fedb7
--- /dev/null
+++ b/8-code-editor/1-using-a-code-editor/README.md
@@ -0,0 +1,161 @@
+# Using a code editor
+
+This lesson covers the basics of using [VSCode.dev](https://vscode.dev) a code editor for the web so that you can make changes to your code and contribute to a project without installing anything in your computer.
+
+<!----
+TODO: add an optional image
+![Using a code editor](../../sketchnotes/webdev101-vscode-dev.png)
+> Sketchnote by [Author name](https://example.com)
+---->
+
+<!---
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+---->
+
+## Learning objectives
+
+In this lesson, you'll learn how to:
+
+- Use a code editor in a code project
+- Keep track of changes with version control
+- Customize the editor for development
+
+### Prerequisites
+
+Before you begin, you'll need to create an account with [GitHub](https://github.com). Navigate to [GtiHub](https://github.com/) and create an account if you haven't already.
+
+### Introduction
+
+A code editor is an essential tool for writing programs and collaborating with existing coding projects. Once you understand the basics of an editor and how to make use of its features, you'll be able to apply them when writing code.
+
+## Getting started with VSCode.dev
+
+[VSCode.dev](https://vscode.dev) is a code editor on the web. You don't need to install anything in order to use it, just like opening any other website. To get started with the editor, open the following link: [https://vscode.dev](https://vscode.dev). If you aren't signed in into [GtiHub](https://github.com/), follow the prompts to sign in or create a new account and then sign in.
+
+Once it loads, it should look similar to this image:
+
+![Default VSCode.dev](../images/default-vscode-dev.png)
+
+There are three main sections, starting from the far left and moving to the right:
+
+1. The _activity bar_ which includes some icons, like the magnifying glass 🔎, the gear ⚙️  and a few others
+1. The expanded acivity bar which defaults to the _Explorer_, called the _side bar_.
+1. And finally, the code area to the right.
+
+Click on each of the icons to display a different menu. Once done, click on the _Explorer_ so you are back where you started.
+
+When you start creating code or modifying existing code, it will happen in the biggest area to the right. You'll use this area to visualize existing code as well, which you'll do next.
+
+
+## Open a GitHub repository
+
+The first thing you'll need is to open a GitHub repository. There are multiple ways of opening a repository. In this section you'll see two different ways you can open a repository so that you can start working on changes.
+
+### 1. With the editor
+
+Use the editor itself to open a remote repository. If you go to [VSCode.dev](https://vscode.dev) you will see an _"Open Remote Repository"_ button:
+
+![Open remote repository](../images/open-remote-repository.png)
+
+You can also use the command palette. The command palette is an input box where you can type any word that is part of a command or an action to find the right command to execute. Use the menu to the top-left, then select _View_, and then pick _Command Palette_, or using the following keyboard shortcut: Ctrl-Shift-P (on MacOS it would be Command-Shift-P).
+
+![Palette Menu](../images/palette-menu.png)
+
+Once the menu opens, type _open remote repository_, and then select the first option. Multiple repositories that you are part of or that you've opened recently will show up. You can also use a full GitHub URL to select one. Use the following URL and paste into the box:
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ If succesful, you'll see all files for this repository loaded in the text editor.
+
+
+### 2. Using the URL
+
+You can also use a url directly to load a repository. For example, the full URL for the current repo is [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), but you can swap the GitHub domain with `VSCode.dev/github` and load the repository directly. The resulting URL would be [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+
+## Edit files
+Once you have opened the repository on the browser/ vscode.dev, the next step would be to make updates or changes to the project.
+
+### 1. Create a new file
+
+You can either create a file inside an existing folder, or create it in the root directory/folder. To create a new file, open a location/directory to which you want the file to be saved and select the _'New file ...'_ icon on the activity bar _(left)_, give it a name and hit enter.
+
+![Create a new file](../images/create-new-file.png)
+
+### 2. Edit and save a file on the repository
+
+Using vscode.dev is helpful whenever you want to make quick updates to your project without having to load any software locally.
+To update your code, click the 'Explorer' icon, also located on the activity bar to view files & folders in the repository.
+Select a file to open it on the code area, make your changes and save.
+
+![Edit a file](../images/edit-a-file.png)
+
+Once you are done updating your project, select the _`source control`_ icon which contains all the new changes you have made to your repository.
+
+To view the changes you made to your project, select the file(s) in the `Changes` folder in the expanded activity bar. This will open a 'Working Tree' for you to visually see the changes you made to the file. Red shows an ommission to the project, while green signifies an addition.
+
+![View changes](../images/working-tree.png)
+
+If you are safisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
+
+If however you are not comfortable with some changes and you want to discard them, hover on the `Changes` folder and select the `undo` icon.
+
+Then, type in a `commit message` _(A description of the change you have made to the project)_, click the `check icon` to commit and push your changes.
+
+Once done working on your project, select the `hamburger menu icon` at the top left to return to the repository on github.com.
+
+![Stage & commit changes](../images/edit-vscode.dev.gif)
+
+## Using extensions
+Installing extensions on VSCode allows you to add new features and customized development environment options on your editor to improve your development workflow. These extensions also help you add support for multiple programming languages and are often either generic extensions or language-based extensions.
+
+To browse through the list of all available extensions, click the _`Extensions icon`_ on the activity bar and start typing the name of the extension on the text field labelled _'Search Extensions in Marketplace'_.
+You will see a list of extensions, each one containing **the extension name, publisher's name, a 1 sentense description, number of downloads** and **a star rating**.
+
+![Extension details](../images/extension-details.png)
+
+You can also view all previously installed extensions by expanding the _`Installed folder`_ , popular extensions used by most developers in the _`Popular folder`_ and recommended extensions for you either by users in the same workspace or based on your recently opened files in the _`recommended folder`_ .
+
+![View extensions](../images/extensions.png)
+
+
+### 1. Install Extensions
+To install an extension, type the extension's name in the search field and click on it to view additional information about the extension on the code area once it appears on the expanded activity bar.
+
+You can either click the _blue install button_ on the expanded activity bar to install or use the install button that appears on the code area once you select the extension to load additional information.
+
+![Install extensions](../images/install-extension.gif)
+
+### 2. Customize Extensions
+After installing the extension, you may need to modify its behaviour and customize it based on your preferences. To do this, select the Extensions icon, and this time, your extension will appear in the _Installed folder_, click on the _**Gear icon**_ and navigate to _Extensions Setting_
+
+![Modify extension settings](../images/extension-settings.png)
+
+### 3. Manage Extensions
+After installing and using your extension, vscode.dev offers options to manage your extension based on different needs. For example, you may choose to:
+- **Disable:**  _(You temporarily disable an extension when you no longer need it but don't want to uninstall it completely)_
+
+    Select the installed extension on the expanded activity bar > click the Gear icon > select 'Disable' or 'Disable (Workspace)' **OR** Open the extension on the code area and click the blue Disable button.
+
+   
+- **Uninstall:** Select installed extension on the expanded activity bar > click the Gear icon > select 'Uninstall' **OR** Open the extension on the code area and click the blue Uninstall button.
+
+
+
+---
+
+## Assignment
+[Create a resume website using vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/vscode-dev/8-code-editor/1-using-a-code-editor/assignment.md)
+
+
+<!----
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+---->
+
+## Review & Self Study
+
+Read more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and some of its other features.
diff --git a/8-code-editor/1-using-a-code-editor/assignment.md b/8-code-editor/1-using-a-code-editor/assignment.md
new file mode 100644
index 00000000..1b83eed5
--- /dev/null
+++ b/8-code-editor/1-using-a-code-editor/assignment.md
@@ -0,0 +1,252 @@
+# Create a resume-website using vscode.dev
+
+_How cool would it be to have a recruiter ask for your resume and you send them a url?_ 😎
+
+<!----
+TODO: add an optional image
+![Using a code editor](../../sketchnotes/webdev101-vscode-dev.png)
+> Sketchnote by [Author name](https://example.com)
+---->
+
+<!---
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+---->
+
+## Objectives
+
+After this assignment, you'll learn how to:
+
+- Create a website to showcase your resume
+
+### Prerequisites
+
+1. A GitHub account. Navigate to [GitHub](https://github.com/) and create an account if you haven't already.
+
+## Steps
+
+**Step 1:** Create a new GitHub Repository and give it a name `my-resume`
+
+
+**Step 2** Create an `index.html` file in your repository. We will add at least one file while still on github.com because you cannot open an empty repository on vscode.dev
+
+Click the `creating a new file` link, type in the name `index.html` and select the `Commit new file` button
+
+![Create a new file on github.com](../images/new-file-github.com.png)
+
+
+**Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button
+
+Copy the url to the repository you just created for your resume site and paste it in the input box:
+
+_Replace `your-username` with your github username_
+
+```
+https://github.com/your-username/my-resume
+```
+
+✅ If successful, you'll see your project and the index.html file open up on the text editor on the browser.
+
+![Create a new file](../images/project-on-vscode.dev.png)
+
+
+**Step 4:** Open the `index.html` file, paste in the code below on your code area and save
+
+<details>
+    <summary><b>HTML code responsible for the content on your resume website.</b></summary>
+    
+        <html>
+
+            <head>
+                <link href="style.css" rel="stylesheet">
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+                <title>Your Name Goes Here!</title>
+            </head>
+            <body>
+                <header id="header">
+                    <!-- resume header with your name and title -->
+                    <h1>Your Name Goes Here!</h1>
+                    <hr>
+                    Your Role!
+                    <hr>
+                </header>
+                <main>
+                    <article id="mainLeft">
+                        <section>
+                            <h2>CONTACT</h2>
+                            <!-- contact info including social media -->
+                            <p>
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
+                                <a href="mailto:username@domain.top-level domain">Write your email here</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-github" aria-hidden="true"></i>
+                                <a href="github.com/yourGitHubUsername">Write your username here!</a>
+                            </p>
+                            <p>
+                                <i class="fab fa-linkedin" aria-hidden="true"></i>
+                                <a href="linkedin.com/yourLinkedInUsername">Write your username here!</a>
+                            </p>
+                        </section>
+                        <section>
+                            <h2>SKILLS</h2>
+                            <!-- your skills -->
+                            <ul>
+                                <li>Skill 1!</li>
+                                <li>Skill 2!</li>
+                                <li>Skill 3!</li>
+                                <li>Skill 4!</li>
+                            </ul>
+                        </section>
+                        <section>
+                            <h2>EDUCATION</h2>
+                            <!-- your education -->
+                            <h3>Write your course here!</h3>
+                            <p>
+                                Write your institution here!
+                            </p>
+                            <p>
+                                Start - End Date
+                            </p>
+                        </section>            
+                    </article>
+                    <article id="mainRight">
+                        <section>
+                            <h2>ABOUT</h2>
+                            <!-- about you -->
+                            <p>Write a blurb about yourself!</p>
+                        </section>
+                        <section>
+                            <h2>WORK EXPERIENCE</h2>
+                            <!-- your work experience -->
+                            <h3>Job Title</h3>
+                            <p>
+                                Organization Name Goes Here | Start Month – End Month
+                            </p>
+                            <ul>
+                                    <li>Task 1 - Write what you did!</li>
+                                    <li>Task 2 - Write what you did!</li>
+                                    <li>Write the outcomes/impact of your contribution</li>
+                                    
+                            </ul>
+                            <h3>Job Title 2</h3>
+                            <p>
+                                Organization Name Goes Here | Start Month – End Month
+                            </p>
+                            <ul>
+                                    <li>Task 1 - Write what you did!</li>
+                                    <li>Task 2 - Write what you did!</li>
+                                    <li>Write the outcomes/impact of your contribution</li>
+                                    
+                            </ul>
+                        </section>
+                    </article>
+                </main>
+            </body>
+        </html>
+</details>
+
+Add your resume details to replace the _placeholder text_ on the html code
+
+**Step 5:** Hover on the My-Resume folder, click the `New File ...` icon and create 2 new files in your project: `style.css` and `codeswing.json` files 
+
+**Step 6:** Open the `style.css` file, paste in the code below and save
+
+ <details>
+        <summary><b>CSS code to format the layout of the site.</b></summary>
+            
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                font-size: 16px;
+                max-width: 960px;
+                margin: auto;
+            }
+            h1 {
+                font-size: 3em;
+                letter-spacing: .6em;
+                padding-top: 1em;
+                padding-bottom: 1em;
+            }
+
+            h2 {
+                font-size: 1.5em;
+                padding-bottom: 1em;
+            }
+
+            h3 {
+                font-size: 1em;
+                padding-bottom: 1em;
+            }
+            main { 
+                display: grid;
+                grid-template-columns: 40% 60%;
+                margin-top: 3em;
+            }
+            header {
+                text-align: center;
+                margin: auto 2em;
+            }
+
+            section {
+                margin: auto 1em 4em 2em;
+            }
+
+            i {
+                margin-right: .5em;
+            }
+
+            p {
+                margin: .2em auto
+            }
+
+            hr {
+                border: none;
+                background-color: lightgray;
+                height: 1px;
+            }
+
+            h1, h2, h3 {
+                font-weight: 100;
+                margin-bottom: 0;
+            }
+            #mainLeft {
+                border-right: 1px solid lightgray;
+            }
+            
+</details>
+
+**Step 6:** Open the `codeswing.json` file, paste in the code below and save
+
+    {
+    "scripts": [],
+    "styles": []
+    }
+
+
+**Step 7:** Install the `Codeswing extension` to visualize the resume website on the code area. 
+
+Click the _`Extensions`_ icon on the activity bar and type in Codeswing. Either click the _blue install button_ on the expanded activity bar to install or use the install button that appears on the code area once you select the extension to load additional information. Immediately after installing the extension, observe your code area to see the changes to your project 😃
+
+![Install extensions](../images/install-extension.gif)
+
+This is what you will see on your on your screen after you install the extension.
+
+![Codeswing extension in action](../images/after-codeswing-extension-pb.png)
+
+If you are satisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes.
+
+Type in a commit message _(A description of the change you have made to the project)_ and commit your changes by clicking the `check`.Once done working on your project, select the hamburger menu icon at the top left to return to the repository on GitHub.
+
+Congratulations 🎉 You have just created your resume website using vscode.dev in few steps.
+## 🚀 Challenge
+
+Open a remote repository you have permissions to make changes and update some files. Next, try creating a new branch with your changes and make a Pull Request.
+
+<!----
+## Post-Lecture Quiz
+[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+---->
+
+## Review & Self Study
+
+Read more about [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) and some of its other features.
diff --git a/8-code-editor/images/after-codeswing-extension-pb.png b/8-code-editor/images/after-codeswing-extension-pb.png
new file mode 100644
index 00000000..563a9ca7
Binary files /dev/null and b/8-code-editor/images/after-codeswing-extension-pb.png differ
diff --git a/8-code-editor/images/create-a-fork.png b/8-code-editor/images/create-a-fork.png
new file mode 100644
index 00000000..46efce37
Binary files /dev/null and b/8-code-editor/images/create-a-fork.png differ
diff --git a/8-code-editor/images/create-new-file-pb.png b/8-code-editor/images/create-new-file-pb.png
new file mode 100644
index 00000000..06842e31
Binary files /dev/null and b/8-code-editor/images/create-new-file-pb.png differ
diff --git a/8-code-editor/images/create-new-file.png b/8-code-editor/images/create-new-file.png
new file mode 100644
index 00000000..fd14901c
Binary files /dev/null and b/8-code-editor/images/create-new-file.png differ
diff --git a/8-code-editor/images/default-vscode-dev.png b/8-code-editor/images/default-vscode-dev.png
new file mode 100644
index 00000000..fe0cbc13
Binary files /dev/null and b/8-code-editor/images/default-vscode-dev.png differ
diff --git a/8-code-editor/images/edit-a-file-pb.png b/8-code-editor/images/edit-a-file-pb.png
new file mode 100644
index 00000000..014b9975
Binary files /dev/null and b/8-code-editor/images/edit-a-file-pb.png differ
diff --git a/8-code-editor/images/edit-a-file.png b/8-code-editor/images/edit-a-file.png
new file mode 100644
index 00000000..9dabf7f9
Binary files /dev/null and b/8-code-editor/images/edit-a-file.png differ
diff --git a/8-code-editor/images/edit-vscode.dev.gif b/8-code-editor/images/edit-vscode.dev.gif
new file mode 100644
index 00000000..53264b1e
Binary files /dev/null and b/8-code-editor/images/edit-vscode.dev.gif differ
diff --git a/8-code-editor/images/extension-details.png b/8-code-editor/images/extension-details.png
new file mode 100644
index 00000000..1ebecb9e
Binary files /dev/null and b/8-code-editor/images/extension-details.png differ
diff --git a/8-code-editor/images/extension-settings.png b/8-code-editor/images/extension-settings.png
new file mode 100644
index 00000000..dfbebb33
Binary files /dev/null and b/8-code-editor/images/extension-settings.png differ
diff --git a/8-code-editor/images/extensions.png b/8-code-editor/images/extensions.png
new file mode 100644
index 00000000..43771bcf
Binary files /dev/null and b/8-code-editor/images/extensions.png differ
diff --git a/8-code-editor/images/install-extension.gif b/8-code-editor/images/install-extension.gif
new file mode 100644
index 00000000..539f2147
Binary files /dev/null and b/8-code-editor/images/install-extension.gif differ
diff --git a/8-code-editor/images/new-file-github.com.png b/8-code-editor/images/new-file-github.com.png
new file mode 100644
index 00000000..b54d1847
Binary files /dev/null and b/8-code-editor/images/new-file-github.com.png differ
diff --git a/8-code-editor/images/open-palette-menu.png b/8-code-editor/images/open-palette-menu.png
new file mode 100644
index 00000000..864c47fc
Binary files /dev/null and b/8-code-editor/images/open-palette-menu.png differ
diff --git a/8-code-editor/images/open-remote-repository.png b/8-code-editor/images/open-remote-repository.png
new file mode 100644
index 00000000..c8ed44d6
Binary files /dev/null and b/8-code-editor/images/open-remote-repository.png differ
diff --git a/8-code-editor/images/palette-menu.png b/8-code-editor/images/palette-menu.png
new file mode 100644
index 00000000..64708d33
Binary files /dev/null and b/8-code-editor/images/palette-menu.png differ
diff --git a/8-code-editor/images/project-on-vscode.dev.png b/8-code-editor/images/project-on-vscode.dev.png
new file mode 100644
index 00000000..ee09e0cc
Binary files /dev/null and b/8-code-editor/images/project-on-vscode.dev.png differ
diff --git a/8-code-editor/images/working-tree-pb.png b/8-code-editor/images/working-tree-pb.png
new file mode 100644
index 00000000..bbc2618d
Binary files /dev/null and b/8-code-editor/images/working-tree-pb.png differ
diff --git a/8-code-editor/images/working-tree.png b/8-code-editor/images/working-tree.png
new file mode 100644
index 00000000..a40374ee
Binary files /dev/null and b/8-code-editor/images/working-tree.png differ