Initial commit

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 web-based code editor so that you can make changes to your code and contribute to a project without installing anything on 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 [GitHub](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 [GitHub](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 activity 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 successful, 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 omission to the project, while green signifies an addition.
+
+![View changes](../images/working-tree.png)
+
+If you are satisfied 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 sentence 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/main/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.

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.

8-code-editor/1-using-a-code-editor/translations/README.fr.md

@@ -0,0 +1,161 @@
+# Utilisation d'un éditeur de code
+
+Cette leçon couvre les bases de l'utilisation de [VSCode.dev](https://vscode.dev), un éditeur de code pour le Web qui vous permet d'apporter des modifications à votre code et de contribuer à un projet sans installer quoi que ce soit sur votre ordinateur.
+
+<!----
+TODO : ajouter une image optionnelle
+![Utilisation d'un éditeur de code](../../sketchnotes/webdev101-vscode-dev.png)
+> Sketchnote par [Nom de l'auteur](https://example.com)
+---->
+
+<!---
+## Quiz pré-lecture
+[Quiz pré-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
+---->
+
+## Objectifs d'apprentissage
+
+Dans cette leçon, vous apprendrez à :
+
+- Utiliser un éditeur de code dans un projet de code
+- Suivre les modifications avec le contrôle de version
+- Personnaliser l'éditeur pour le développement
+
+### Prérequis
+
+Avant de commencer, vous devez créer un compte sur [GitHub] (https://github.com). Rendez-vous sur [GtiHub](https://github.com/) et créez un compte si ce n'est pas déjà fait.
+
+### Introduction
+
+Un éditeur de code est un outil essentiel pour écrire des programmes et collaborer à des projets de codage existants. Une fois que vous aurez compris les bases d'un éditeur et que vous saurez comment utiliser ses fonctionnalités, vous serez en mesure de les appliquer lors de l'écriture de code.
+
+## Démarrer avec VSCode.dev
+
+[VSCode.dev] (https://vscode.dev) est un éditeur de code sur le Web. Vous n'avez pas besoin d'installer quoi que ce soit pour l'utiliser, comme pour ouvrir n'importe quel autre site Web. Pour commencer à utiliser l'éditeur, ouvrez le lien suivant : [https://vscode.dev](https://vscode.dev). Si vous n'êtes pas connecté à [GtiHub](https://github.com/), suivez les instructions pour vous connecter ou créez un nouveau compte, puis connectez-vous.
+
+Une fois le site chargé, il devrait ressembler à cette image :
+
+![VSCode.dev par défaut](../images/default-vscode-dev.png)
+
+Il y a trois sections principales, en commençant par l'extrême gauche et en allant vers la droite :
+
+1. La _barre d'activité_ qui comprend quelques icônes, comme la loupe 🔎, l'engrenage ⚙️ et quelques autres.
+1. La barre d'acivité élargie qui s'affiche par défaut dans l'_Explorateur_, appelée _barre latérale_.
+1. Et enfin, la zone de code à droite.
+
+Cliquez sur chacune des icônes pour afficher un menu différent. Une fois que vous avez terminé, cliquez sur l'_Explorateur_ pour revenir à votre point de départ.
+
+Lorsque vous commencez à créer du code ou à modifier du code existant, cela se passe dans la plus grande zone à droite. Vous utiliserez également cette zone pour visualiser le code existant, ce que vous ferez ensuite.
+
+
+## Ouvrir un répertoire GitHub
+
+La première chose dont vous aurez besoin est d'ouvrir un répertoire GitHub. Il existe plusieurs façons d'ouvrir un dépôt. Dans cette section, vous verrez deux façons différentes d'ouvrir un dépôt afin de pouvoir commencer à travailler sur les changements.
+
+### 1. Avec l'éditeur
+
+Utilisez l'éditeur lui-même pour ouvrir un répertoire distant. Si vous allez sur [VSCode.dev](https://vscode.dev), vous verrez un bouton _"Open Remote Repository"_ :
+
+![Ouvrir un répertoire distant](../images/open-remote-repository.png)
+
+Vous pouvez également utiliser la palette de commande. La palette de commande est une boîte de saisie dans laquelle vous pouvez taper n'importe quel mot faisant partie d'une commande ou d'une action pour trouver la bonne commande à exécuter. Utilisez le menu en haut à gauche, puis sélectionnez _Visualisation_, et ensuite choisissez _Palette de commande_, ou en utilisant le raccourci clavier suivant : Ctrl-Shift-P (sur MacOS, ce serait Command-Shift-P).
+
+![Menu Palette](../images/palette-menu.png)
+
+Une fois le menu ouvert, tapez _open remote repository_, puis sélectionnez la première option. Plusieurs dépôts dont vous faites partie ou que vous avez ouverts récemment s'afficheront. Vous pouvez également utiliser une URL GitHub complète pour en sélectionner un. Utilisez l'URL suivante et collez-la dans le champ :
+
+```
+https://github.com/microsoft/Web-Dev-For-Beginners
+```
+
+✅ Si vous réussissez, vous verrez tous les fichiers de ce répertoire chargés dans l'éditeur de texte.
+
+
+### 2. Utilisation de l'URL
+
+Vous pouvez également utiliser une URL directement pour charger un répertoire. Par exemple, l'URL complète du dépôt actuel est [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), mais vous pouvez remplacer le domaine GitHub par `VSCode.dev/github` et charger le répertoire directement. L'URL résultante serait [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
+
+
+## Modifier les fichiers
+Une fois que vous avez ouvert le répertoire sur le navigateur/ vscode.dev, la prochaine étape serait d'effectuer des mises à jour ou des modifications du projet.
+
+### 1. Créer un nouveau fichier
+
+Vous pouvez soit créer un fichier dans un dossier existant, soit le créer dans le répertoire/dossier racine. Pour créer un nouveau fichier, ouvrez un emplacement/répertoire dans lequel vous souhaitez que le fichier soit enregistré et sélectionnez l'icône _'Nouveau fichier ...'_ dans la barre d'activité _(gauche)_, donnez-lui un nom et appuyez sur Entrée.
+
+![Créer un nouveau fichier](../images/create-new-file.png)
+
+### 2. Modifier et enregistrer un fichier sur le répertoire
+
+L'utilisation de vscode.dev est utile lorsque vous souhaitez effectuer des mises à jour rapides de votre projet sans avoir à charger un logiciel localement.
+Pour mettre à jour votre code, cliquez sur l'icône "Explorer", également située dans la barre d'activités, pour afficher les fichiers et les dossiers du répertoire.
+Sélectionnez un fichier pour l'ouvrir dans la zone de code, effectuez vos modifications et enregistrez.
+
+![Modifier un fichier](../images/edit-a-file.png)
+
+Une fois que vous avez terminé la mise à jour de votre projet, sélectionnez l'icône _`source control`_ qui contient toutes les nouvelles modifications que vous avez apportées à votre répertoire.
+
+Pour visualiser les modifications que vous avez apportées à votre projet, sélectionnez le(s) fichier(s) dans le dossier `Changes` dans la barre d'activité étendue. Cela ouvrira un "arbre de travail" pour vous permettre de voir visuellement les modifications que vous avez apportées au fichier. Le rouge indique une ommission dans le projet, tandis que le vert signifie un ajout.
+
+![Voir les modifications](../images/working-tree.png)
+
+Si vous êtes satisfait des changements que vous avez effectués, survolez le dossier `Changes` et cliquez sur le bouton `+` pour mettre en scène les changements. La mise en scène signifie simplement que vous préparez vos modifications pour les livrer sur GitHub.
+
+Si toutefois vous n'êtes pas à l'aise avec certains changements et que vous voulez les abandonner, survolez le dossier "Changes" et sélectionnez l'icône "annuler".
+
+Ensuite, tapez un `message de validation` _(Une description de la modification que vous avez apportée au projet)_, cliquez sur l'icône `check` pour valider et pousser vos modifications.
+
+Une fois que vous avez terminé de travailler sur votre projet, sélectionnez l'icône de menu "hamburger" en haut à gauche pour revenir au répertoire sur github.com.
+
+![Stage & commit changes](../images/edit-vscode.dev.gif)
+
+## Utilisation des extensions
+L'installation d'extensions sur VSCode vous permet d'ajouter de nouvelles fonctionnalités et des options d'environnement de développement personnalisé sur votre éditeur afin d'améliorer votre flux de travail de développement. Ces extensions vous aident également à ajouter le support de plusieurs langages de programmation et sont souvent soit des extensions génériques, soit des extensions basées sur le langage.
+
+Pour parcourir la liste de toutes les extensions disponibles, cliquez sur l'icône _`Extensions`_ de la barre d'activités et commencez à taper le nom de l'extension dans le champ de texte intitulé _'Search Extensions in Marketplace'_.
+Vous verrez une liste d'extensions, chacune contenant **le nom de l'extension, le nom de l'éditeur, une description d'une phrase, le nombre de téléchargements** et **un classement par étoiles**.
+
+![Détails de l'extension](../images/extension-details.png)
+
+Vous pouvez également voir toutes les extensions précédemment installées en développant le dossier _`Installed`_, les extensions populaires utilisées par la plupart des développeurs dans le dossier _`Popular`_ et les extensions recommandées pour vous par les utilisateurs du même espace de travail ou basées sur vos fichiers récemment ouverts dans le dossier _`recommended`_.
+
+![Voir les extensions](../images/extensions.png)
+
+
+### 1. Installer des extensions
+Pour installer une extension, tapez le nom de l'extension dans le champ de recherche et cliquez dessus pour afficher des informations supplémentaires sur l'extension dans la zone de code une fois qu'elle apparaît dans la barre d'activités étendue.
+
+Vous pouvez soit cliquer sur le _bouton d'installation bleu_ de la barre d'activité élargie pour l'installer, soit utiliser le bouton d'installation qui apparaît dans la zone de code une fois que vous avez sélectionné l'extension pour charger des informations supplémentaires.
+
+![Installer les extensions](../images/install-extension.gif)
+
+### 2. Personnaliser les extensions
+Après avoir installé l'extension, vous pouvez avoir besoin de modifier son comportement et de la personnaliser en fonction de vos préférences. Pour ce faire, sélectionnez l'icône Extensions, et cette fois, votre extension apparaîtra dans le dossier _Installed_, cliquez sur l'icône _**Gear**_ et naviguez jusqu'à _Extensions Setting_.
+
+![Modifier les paramètres de l'extension](../images/extension-settings.png)
+
+### 3. Gérer les extensions
+Après avoir installé et utilisé votre extension, vscode.dev offre des options pour gérer votre extension en fonction de différents besoins. Par exemple, vous pouvez choisir de :
+- **Désactiver:** _(Vous désactivez temporairement une extension lorsque vous n'en avez plus besoin mais ne souhaitez pas la désinstaller complètement)_.
+
+    Sélectionnez l'extension installée dans la barre d'activités étendue > cliquez sur l'icône en forme d'engrenage > sélectionnez "Désactiver" ou "Désactiver (espace de travail)". **OU** Ouvrez l'extension dans la zone de code et cliquez sur le bouton bleu Désactiver.
+
+   
+- **Désinstaller:** Sélectionnez l'extension installée dans la barre d'activité étendue > cliquez sur l'icône en forme d'engrenage > sélectionnez "Désinstaller" **OU** Ouvrez l'extension dans la zone de code et cliquez sur le bouton bleu de désinstallation.
+
+
+
+---
+
+## Travail à faire
+[Créer un site web de CV en utilisant vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
+
+
+<!----
+## Quiz post-conférence
+[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
+---->
+
+## Révision et étude personnelle
+
+En savoir plus sur [VSCode.dev] (https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) et sur certaines de ses autres fonctionnalités.