diff --git a/episodes/03-create.md b/episodes/03-create.md
index c13ea4b2bf..0f426e3649 100644
--- a/episodes/03-create.md
+++ b/episodes/03-create.md
@@ -22,45 +22,47 @@ we can start using it.
We will help Alfredo with his new project, create a repository with all his recipes.
-First, let's create a new directory in the `Desktop` folder for our work and then change the current working directory to the newly created one:
+First, let's create a new directory in the `Desktop` folder for our work:
-```bash
-$ cd ~/Desktop
-$ mkdir recipes
-$ cd recipes
-```
+
+
+We then open this newly created folder in VS Code by clicking `Open Folder`:
+
+
+
+and then selecting the `recipes` folder:
+
+
Then we tell Git to make `recipes` a [repository](../learners/reference.md#repository)
-\-- a place where Git can store versions of our files:
+\-- a place where Git can store versions of our files. Click menu `View` and then `Source Control`:
+
+
-```bash
-$ git init
-```
+Click `Initialize Repository`:
-It is important to note that `git init` will create a repository that
+
+
+and you will see `Source Control` which means the repository is created.
+
+
+
+
+It is important to note that `Initialize Repository` will create a repository that
can include subdirectories and their files---there is no need to create
separate repositories nested within the `recipes` repository, whether
subdirectories are present from the beginning or added later. Also, note
that the creation of the `recipes` directory and its initialization as a
repository are completely separate processes.
-If we use `ls` to show the directory's contents,
-it appears that nothing has changed:
+If we view the repository in its folder, it appears that nothing has changed since there is no visible content. To see what changed, click `View` in the folder:
-```bash
-$ ls
-```
+
-But if we add the `-a` flag to show everything,
-we can see that Git has created a hidden directory within `recipes` called `.git`:
+and choose `Show` and `hidden items`. We can see that Git has created a hidden directory within `recipes` called `.git`:
-```bash
-$ ls -a
-```
+
-```output
-. .. .git
-```
Git uses this special subdirectory to store all the information about the project,
including the tracked files and sub-directories located within the project's directory.
@@ -69,33 +71,24 @@ we will lose the project's history.
Next, we will change the default branch to be called `main`.
This might be the default branch depending on your settings and version
-of git.
+of git.
See the [setup episode](02-setup.md#default-git-branch-naming) for more information on this change.
-```bash
-$ git checkout -b main
-```
+To see branch name, ensure that `Source Control Repositories` is selected. As shown below, the branch is called "project".
-```output
-Switched to a new branch 'main'
-```
+
-We can now start using one of the most important git commands, which is particularly helpful to beginners. `git status` tells us the status of our project, and better, a list of changes in the project and options on what to do with those changes. We can use it as often as we want, whenever we want to understand what is going on.
+Under `Source Control Repositories`, click on the three dots of our repository `recipes`, and select `Rename Branch`:
-```bash
-$ git status
-```
+
-```output
-On branch main
+
-No commits yet
+Enter "main" and press Return to save. The branch is renamed to `main`:
-nothing to commit (create/copy files and use "git add" to track)
-```
+
-If you are using a different version of `git`, the exact
-wording of the output might be slightly different.
+We can now start using one of the most important git commands, which is particularly helpful to beginners. In the screenshot above, in the `Source Control` window, is a blue button. It will show a different command depending on the status of our repository. Under this button we will find what changes have been made in the repository and the status of this change. The information here is updated as we make changes to our repository. We will see more examples of this later. For now, remember that this `Source Control` window tells us the status of our project, and better, a list of changes in the project and options on what to do with those changes. We can refer to it as often as we want, whenever we want to understand what is going on.
::::::::::::::::::::::::::::::::::::::: challenge
@@ -104,20 +97,23 @@ wording of the output might be slightly different.
Along with tracking information about recipes (the project we have already created),
Alfredo would also like to track information about desserts specifically.
Alfredo creates a `desserts` project inside his `recipes`
-project with the following sequence of commands:
+project. Is it a good idea to have a repository for tracking files stored in the `desserts` subdirectory?
+
+To create the repository for `dessert`, Alfredo selects this folder in VSCode, as shown below:
-```bash
-$ cd ~/Desktop # return to Desktop directory
-$ cd recipes # go into recipes directory, which is already a Git repository
-$ ls -a # ensure the .git subdirectory is still present in the recipes directory
-$ mkdir desserts # make a sub-directory recipes/desserts
-$ cd desserts # go into desserts subdirectory
-$ git init # make the desserts subdirectory a Git repository
-$ ls -a # ensure the .git subdirectory is present indicating we have created a new Git repository
-```
+
-Is the `git init` command, run inside the `desserts` subdirectory, required for
-tracking files stored in the `desserts` subdirectory?
+However, VS Code tells Alfredo there is an error in one or two messages:
+
+
+
+
+
+Alredo explores further using the `Open Repository` button and it looks like Alfredo cannot create this repository:
+
+
+
+What should Alfredo do?
::::::::::::::: solution
@@ -133,25 +129,15 @@ Additionally, Git repositories can interfere with each other if they are "nested
the outer repository will try to version-control
the inner repository. Therefore, it's best to create each new Git
repository in a separate directory. To be sure that there is no conflicting
-repository in the directory, check the output of `git status`. If it looks
-like the following, you are good to go to create a new repository as shown
-above:
-
-```bash
-$ git status
-```
-
-```output
-fatal: Not a git repository (or any of the parent directories): .git
-```
+repository in the directory, check the output of `git status`.
:::::::::::::::::::::::::
-## Correcting `git init` Mistakes
+## Correcting Initialize Repository Mistakes
-Jimmy explains to Alfredo how a nested repository is redundant and may cause confusion
+Alfredo has managed to create the `dessert` repository inside `recipes`. Jimmy explains to Alfredo how such a nested repository is redundant and may cause confusion
down the road. Alfredo would like to go back to a single git repository. How can Alfredo undo
-his last `git init` in the `desserts` subdirectory?
+his last Initialize Repository in the `desserts` subdirectory?
::::::::::::::: solution
@@ -161,13 +147,9 @@ his last `git init` in the `desserts` subdirectory?
Removing files from a Git repository needs to be done with caution. But we have not learned
yet how to tell Git to track a particular file; we will learn this in the next episode. Files
-that are not tracked by Git can easily be removed like any other "ordinary" files with
+that are not tracked by Git can easily be removed like any other "ordinary" files by deleting them in VSCode Explorer.
-```bash
-$ rm filename
-```
-
-Similarly a directory can be removed using `rm -r dirname`.
+Similarly a directory can be removed in the same way in Explorer.
If the files or folder being removed in this fashion are tracked by Git, then their removal
becomes another change that we will need to track, as we will see in the next episode.
@@ -175,16 +157,12 @@ becomes another change that we will need to track, as we will see in the next ep
Git keeps all of its files in the `.git` directory.
To recover from this little mistake, Alfredo can remove the `.git`
-folder in the desserts subdirectory by running the following command from inside the `recipes` directory:
-
-```bash
-$ rm -rf desserts/.git
-```
+folder in the desserts subdirectory by deleting the `.git` directory.
But be careful! Running this command in the wrong directory will remove
the entire Git history of a project you might want to keep.
-In general, deleting files and directories using `rm` from the command line cannot be reversed.
-Therefore, always check your current directory using the command `pwd`.
+Further, although the deleted files and directories might be in the Recycle bin which can be recovered, we should not rely on this. Also the "Undo" command in VSCode does not always work to revert a delete command.
+Therefore, always check your current directory.
@@ -194,7 +172,7 @@ Therefore, always check your current directory using the command `pwd`.
:::::::::::::::::::::::::::::::::::::::: keypoints
-- `git init` initializes a repository.
+- `Initialize Repository` sets up a new repository.
- Git stores all of its repository data in the `.git` directory.
::::::::::::::::::::::::::::::::::::::::::::::::::
diff --git a/episodes/04-changes.md b/episodes/04-changes.md
index 9920166bb2..31cb1197fd 100644
--- a/episodes/04-changes.md
+++ b/episodes/04-changes.md
@@ -20,187 +20,199 @@ exercises: 0
::::::::::::::::::::::::::::::::::::::::::::::::::
+# Create text file
First let's make sure we're still in the right directory.
You should be in the `recipes` directory.
-```bash
-$ cd ~/Desktop/recipes
-```
+
Let's create a file called `guacamole.md` that contains the basic structure to
-have a recipe.
-We'll use `nano` to edit the file;
-you can use whatever editor you like.
-In particular, this does not have to be the `core.editor` you set globally earlier. But remember, the bash command to create or edit a new file will depend on the editor you choose (it might not be `nano`). For a refresher on text editors, check out ["Which Editor?"](https://swcarpentry.github.io/shell-novice/03-create.html#which-editor) in [The Unix Shell](https://swcarpentry.github.io/shell-novice/) lesson.
+have a recipe. This can be created using Windows Explorer, or in VS Code, explained below.
-```bash
-$ nano guacamole.md
-```
+
-Type the text below into the `guacamole.md` file:
+**Option 1 Windows Explorer**. Menu `New` and then `Text Document`:
-```output
-# Guacamole
-## Ingredients
-## Instructions
-```
+
-Let's first verify that the file was properly created by running the list command (`ls`):
+Alternatively, context menu is available by right-clicking in the explorer for the pop-up menu and choose `New` - `Text Document`:
-```bash
-$ ls
-```
+
-```output
-guacamole.md
-```
+Name the text document `guacamole.md`. Check that the file extension is `md`.
-`guacamole.md` contains a single line, which we can see by running:
+
-```bash
-$ cat guacamole.md
-```
+**Option 2 Visual Studio Code File menu** VS Code also has file management options. First, ensure that you are in Explorer view. If not, please click top menu `View` and then `Explorer`:
-```output
+
+
+Then, click top menu `File` followed by `New File`, and you are asked for the file name:
+
+
+
+Name the text document `guacamole.md` - check that the file extension is `md` - and press return.
+
+
+
+**Option 3 VS Code Explorer New File** Another option to create files is to use the new file icon in Exlorer:
+
+
+
+
+
+
+The new file is listed in the Primary Side Bar (left). Whether you first created the file in VS Code or Windows Explorer, you can use either to edit the file in the future. If VS Code is used to create the file, the file is then opened for editing.
+
+
+
+**Text editor in MS WIndows.**
+If you prefer to edit the file in Windows Explorer, you will use your text editor of choice. Please ensure the editor saves in text format only: Windows `Notepad` is a good choice, but not `Write`. Other options include `Notepad++` and `Sublime Text`. To check an editor works as required, save the file, then open it in VS Code.
+
+VS Code keeps track of changes in your repository, it tells us that it's noticed the new file.
+Here, the new file has a "**U**" on its right: both in the Primary Side Bar, and in the file tab. "**U**" indicates that VS Code is not keeping track of this file ("Untracked"). We want to have VS Code to track this file for changes: we will do that later.
+
+
+
+# Edit text file
+Type the text below into the `guacamole.md` file. Please take note that the text begins on the first line, with no space on the left, and each line begins with one or two "**#**" exactly as shown:
+
+```
# Guacamole
## Ingredients
## Instructions
```
-If we check the status of our project again,
-Git tells us that it's noticed the new file:
+
-```bash
-$ git status
-```
+With the file opened in VS Code, take note of the file tab: when a file has changes that have not been saved, the right side icon is a dark circle (●). When the file is saved, the icon becomes an `X` (**✕**). Whether a dark circle or an `X`, clicking on it closes that window, and you are asked if you want to save it if it has changes.
-```output
-On branch main
+The file status is also shown in the Primary Side Bar, when hovering over it, or having it selected:
-No commits yet
+
+
-Untracked files:
- (use "git add ..." to include in what will be committed)
+We will now save the file (menu `File` - `Save`). The file tab indicator changes from the dark circle to `X`.
- guacamole.md
+# Creating first version of the file
+To manage file versions, we switch over to source control view. As a reminder, here is how to go to source control view:
-nothing added to commit but untracked files present (use "git add" to track)
-```
+If VS Code top menu is visible, use `View` and `Source Control`. If the top menu is not available (because VS Code window is narrow), the menu is available from the menu shortcut on the left.
-The "untracked files" message means that there's a file in the directory
-that Git isn't keeping track of.
-We can tell Git to track a file using `git add`:
+
+
-```bash
-$ git add guacamole.md
-```
+For clarity, please display all available `Source Control` functions from the Source Control sub-menu (4 items ticked):
-and then check that the right thing happened:
+
-```bash
-$ git status
-```
+The `Source Control` view should look similar to this:
-```output
-On branch main
+
-No commits yet
+In the above `Source Control` view, VS Code tells us that it's noticed one new file indicated with `**1**` and the `**U**`. Further, it tells us this is in repository branch "main".
-Changes to be committed:
- (use "git rm --cached ..." to unstage)
+We can tell Git to track this file by clicking the '**+**' icon, for **staging** the file. Note that in this case we have only one file to track, we can either click the '**+**' of the file, or the '**+**' of `Changes` (second screenshot) which is for the whole set of file (where only one file is available and to add to tracking). This process is called "staging" because it is the holding area before fully commiting this version.
- new file: guacamole.md
+
-```
+VS Code will carry out some steps to add the file. After a few seconds, it will show completion of the staging stage:
+
+
+
+Here, take note that there are '**0**' changes between the staging area and the working directory. Secondly, the file is added ('**A**') to staging. Staged Changes shows '**1**' to tell us that VS Code knows there is one file being different between content of Staging and commit history.
Git now knows that it's supposed to keep track of `guacamole.md`,
-but it hasn't recorded these changes as a commit yet.
-To get it to do that,
-we need to run one more command:
+but it hasn't recorded these changes as a commit yet. Before we run commit, there are a few helpful things VS Code shows us. In Explorer view, the file is also shown as added to staging ('**A**'):
-```bash
-$ git commit -m "Create a template for recipe"
-```
+
-```output
-[main (root-commit) f22b25e] Create a template for recipe
- 1 file changed, 1 insertion(+)
- create mode 100644 guacamole.md
-```
+Back in VS Code's Source Control view, under `Staged Changes`, we can click the file to show `Changes`. Here the `View Changes` icon 
(with a "+" and "-" symbol) compares the version of the file in the repository and that in the Staging area. Clicking on that icon will show a pop-up message at the bottom of the screen.
+
+
+
+The pop-up message might be similar to this:
+
+
+
+Clicking the second left icon (the round arrow going to the left) will discard the changes, i.e. remove the Staging.
+
+The next icon, '**+**', is for staging changes. Since there is no change (shown with the '**0**'), clicking on '**+**' does not do anything. See below for the icons.
+
+
+
+We see in the above image that on the right of `Staged Changes` is shown a "**1**". This means Git knows there is one item changed between the file version in the Staging area, and in Commit. Click in the first icon (), VS Code will show the differences in file content between the two versions:
+
+
+
+To commit what is in the Staging area, we click the button "**Commit**".
-When we run `git commit`,
-Git takes everything we have told it to save by using `git add`
+
+
+
+VS Code then opens a new tab (named "COMMIT_EDITMSG") and waits for us to enter the corresponding commit message. Enter in line 1:
+
+`Create a template for recipe`
+
+As shown in the following image, there is an undo icon (the one with the round arrow pointing to the left) and a check icon. The lines below, each beginning with "**#**", have further instructions, and can be left as they are. To commit with this message, click on the tick icon, and a confirmation dialog appears. Here, click `Save`.
+
+
+
+
+
+The `Source Control` might show a progress bar for a few seconds. And then the blue button, which showed "Commit" before, now shows "Publish Branch". Further, under `Source Control Graph` is the first listing of our commit. It also indicates this is for the branch `main`.
+
+
+
+Clicking on the `main` link in `Source Control Graph` will show a summary of this `commit`. When we click `Commit`,
+Git takes everything we have told it to save
and stores a copy permanently inside the special `.git` directory.
This permanent copy is called a [commit](../learners/reference.md#commit)
-(or [revision](../learners/reference.md#revision)) and its short identifier is `f22b25e`. Your commit may have another identifier.
+(or [revision](../learners/reference.md#revision)) and its short identifier is `eb8fac66`. Your commit may have another identifier.
-We use the `-m` flag (for "message")
-to record a short, descriptive, and specific comment that will help us remember later on what we did and why.
-If we just run `git commit` without the `-m` option,
-Git will launch `nano` (or whatever other editor we configured as `core.editor`)
-so that we can write a longer message.
+
[Good commit messages][commit-messages] start with a brief (\<50 characters) statement about the
changes made in the commit. Generally, the message should complete the sentence "If applied, this commit will" .
If you want to go into more detail, add a blank line between the summary line and your additional notes. Use this additional space to explain why you made changes and/or what their impact will be.
-If we run `git status` now:
-
-```bash
-$ git status
-```
+Another useful feature in VS Code is that it tells us everything is up to date: the tick icon next to `Source Control Repositories` and `Source Control`.
-```output
-On branch main
-nothing to commit, working tree clean
-```
+
-it tells us everything is up to date.
If we want to know what we've done recently,
-we can ask Git to show us the project's history using `git log`:
+we can ask Git to show us the project's history using the `Git Graph` icon (
): either the one under `Source Control Repositories` or `Source Control`:
-```bash
-$ git log
-```
-
-```output
-commit f22b25e3233b4645dabd0d81e651fe074bd8e73b
-Author: Alfredo Linguini
-Date: Thu Aug 22 09:51:46 2013 -0400
+
- Create a template for recipe
-```
-
-`git log` lists all commits made to a repository in reverse chronological order.
+We can view details of this commit by clicking on the commit item. `Git Graph` lists all commits made to a repository in reverse chronological order.
The listing for each commit includes
-the commit's full identifier
+the commit's full ID
(which starts with the same characters as
-the short identifier printed by the `git commit` command earlier),
+the short ID),
the commit's author,
when it was created,
-and the log message Git was given when the commit was created.
+and the commit message Git was given when the commit was created.
+
+
+
+
::::::::::::::::::::::::::::::::::::::::: callout
## Where Are My Changes?
-If we run `ls` at this point, we will still see just one file called `guacamole.md`.
+If we look at the contents of our `recipes` folder, we will still see just one file called `guacamole.md`.
That's because Git saves information about files' history
in the special `.git` directory mentioned earlier
-so that our filesystem doesn't become cluttered
+so that our file system doesn't become cluttered
(and so that we can't accidentally edit or delete an old version).
+
::::::::::::::::::::::::::::::::::::::::::::::::::
-Now suppose Alfredo adds more information to the file.
-(Again, we'll edit with `nano` and then `cat` the file to show its contents;
-you may use a different editor, and don't need to `cat`.)
-
-```bash
-$ nano guacamole.md
-$ cat guacamole.md
-```
+Now suppose Alfredo adds more information to the file as shown below. You can copy and paste either all the five lines, or the three lines of ingredients, into your VS Code editor (or in Windows explorer, using another text editor of your choice).
```output
# Guacamole
@@ -211,100 +223,50 @@ $ cat guacamole.md
## Instructions
```
-When we run `git status` now,
-it tells us that a file it already knows about has been modified:
+In VS Code editor, the added lines are indicated with a solid green line on their left.
-```bash
-$ git status
-```
+
-```output
-On branch main
-Changes not staged for commit:
- (use "git add ..." to update what will be committed)
- (use "git checkout -- ..." to discard changes in working directory)
+**Important**. Save the file (`File` - `Save`). The file tab shows the file is modified ('M'). In the Explorer file list, this file is indicated with an '**M**'.
- modified: guacamole.md
+
-no changes added to commit (use "git add" and/or "git commit -a")
-```
+Go to `Source Control`, Git tells us that a file it already knows about has been modified, indicated by the '**M**' in the `Source Control` - `Changes` list (bottom of the image). Clicking on this '**M**' opens a `Working Tree` tab that shows what the changes are, in this case, the new lines are highlighted with a green background.
-The last line is the key phrase:
-"no changes added to commit".
-We have changed this file,
-but we haven't told Git we will want to save those changes
-(which we do with `git add`)
-nor have we saved them (which we do with `git commit`).
-So let's do that now. It is good practice to always review
-our changes before saving them. We do this using `git diff`.
-This shows us the differences between the current state
-of the file and the most recently saved version:
-
-```bash
-$ git diff
-```
+
-```output
-diff --git a/guacamole.md b/guacamole.md
-index df0654a..315bf3a 100644
---- a/guacamole.md
-+++ b/guacamole.md
-@@ -1,3 +1,6 @@
- # Guacamole
- ## Ingredients
-+* avocado
-+* lemon
-+* salt
- ## Instructions
-```
+Also, clicking on the view changes icon will show `Git Changes`. There is no difference between this (`Git Changes`) and the `Working Tree` above.
-The output is cryptic because
-it is actually a series of commands for tools like editors and `patch`
-telling them how to reconstruct one file given the other.
-If we break it down into pieces:
-
-1. The first line tells us that Git is producing output similar to the Unix `diff` command
- comparing the old and new versions of the file.
-2. The second line tells exactly which versions of the file
- Git is comparing;
- `df0654a` and `315bf3a` are unique computer-generated labels for those versions.
-3. The third and fourth lines once again show the name of the file being changed.
-4. The remaining lines are the most interesting, they show us the actual differences
- and the lines on which they occur.
- In particular,
- the `+` marker in the first column shows where we added a line.
-
-After reviewing our change, it's time to commit it:
-
-```bash
-$ git commit -m "Add basic guacamole's ingredients"
-$ git status
-```
+
-```output
-On branch main
-Changes not staged for commit:
- (use "git add ..." to update what will be committed)
- (use "git checkout -- ..." to discard changes in working directory)
+Of the lines in green background, note that there is also a `**+**` on the left of each line. Each shows where we added a line.
- modified: guacamole.md
+`Git Graph` tells us there are uncommitted changes (one) between our repository and the staging area, when the changes were made, and the number of added lines (shown by '**+3**') and deleted ones (in this case '**-0**').
-no changes added to commit (use "git add" and/or "git commit -a")
-```
+
-Whoops:
-Git won't commit because we didn't use `git add` first.
-Let's fix that:
+After reviewing our change, it's time to commit it. Click the commit button. Whoops:
+Git won't commit because we didn't add files to the staging area.
-```bash
-$ git add guacamole.md
-$ git commit -m "Add basic guacamole's ingredients"
-```
+
-```output
-[main 34961b1] Add basic guacamole's ingredient
- 1 file changed, 3 insertions(+)
-```
+Let's fix that. Click `Cancel` on the dialog box, and click "**+**" next to file `guacamole.md` to add this file to the staging area. (As above, another option is to use the "**+**" icon next to `Changes`, a line above the file: this icon will appear along with the digit "**1**".)
+
+
+
+Having done that, `Source Control` now shows `Staged Changes` and with a digit "**1**", which indicates the number of changes (files), as shown in the image below. Further, the `Changes` menu that was shown before the staging is repeated after the staging, the differences being that, now, the digit "**0**" says there is no change between the version in staging, and the working directory; secondly, there is no file listed under `Changes` (file `guacamole.md` is now listed in `Staged Changes`.)
+
+
+
+Enter commit message "Add basic guacamole's ingredients" and click the tick icon as shown.
+
+
+
+A confirmation dialog box appears, click `Save`.
+
+In `Source Control Graph` / `Git Graph`, click on the commit message to show its description. The file `guacamelo.md` is the changed file in this commit, and there were 3 insertions (3 lines), indicated by the digit "**+3**", and no deletions ("**-0**"). For reference the commit ID is shown, also the person who made the commit and the date and time this was made.
+
+
Git insists that we add files to the set we want to commit
before actually committing anything. This allows us to commit our
@@ -318,7 +280,7 @@ but *not* commit some of our work drafting the conclusion
(which we haven't finished yet).
To allow for this,
-Git has a special *staging area*
+Git has a special **staging area**
where it keeps track of things that have been added to
the current [changeset](../learners/reference.md#changeset)
but not yet committed.
@@ -328,12 +290,12 @@ but not yet committed.
## Staging Area
If you think of Git as taking snapshots of changes over the life of a project,
-`git add` specifies *what* will go in a snapshot
+using `Changes` "+" specifies ***what*** will go in a snapshot
(putting things in the staging area),
-and `git commit` then *actually takes* the snapshot, and
+and the `Commit` button then ***actually takes*** the snapshot, and
makes a permanent record of it (as a commit).
-If you don't have anything staged when you type `git commit`,
-Git will prompt you to use `git commit -a` or `git commit --all`,
+If you don't have anything staged when you want to commit,
+Git will prompt you to add files
which is kind of like gathering *everyone* to take a group photo!
However, it's almost always better to
explicitly add things to the staging area, because you might
@@ -341,13 +303,12 @@ commit changes you forgot you made. (Going back to the group photo simile,
you might get an extra with incomplete makeup walking on
the stage for the picture because you used `-a`!)
Try to stage things manually,
-or you might find yourself searching for "git undo commit" more
+or you might find yourself searching for "undo commit" more
than you would like!
-
::::::::::::::::::::::::::::::::::::::::::::::::::
-{alt='A diagram showing how "git add" registers changes in the staging area, while "git commit" moves changes from the staging area to the repository'}
+
Let's watch as our changes to a file move from our editor
to the staging area
@@ -355,263 +316,107 @@ and into long-term storage.
First,
we'll improve our recipe by changing 'lemon' to 'lime':
-```bash
-$ nano guacamole.md
-$ cat guacamole.md
-```
+
-```output
-# Guacamole
-## Ingredients
-* avocado
-* lime
-* salt
-## Instructions
-```
+Note that the icon on the file tab shows a dark dark circle (●) indicating the file is changed and not saved, and the blue vertical line indicates where the change line is ("* lime"). When the file is saved, the icon becomes an `X` (**✕**).
-```bash
-$ git diff
-```
+
-```output
-diff --git a/guacamole.md b/guacamole.md
-index 315bf3a..b36abfd 100644
---- a/guacamole.md
-+++ b/guacamole.md
-@@ -1,6 +1,6 @@
- # Guacamole
- ## Ingredients
- * avocado
--* lemon
-+* lime
- * salt
- ## Instructions
-```
+In `Source Control`, we see there is "**1**" change, and one file is indicated with an "**M**" for modified. This change compares content of the working directory and of commits.
+
+With the file saved, we can use `Changes` view changes icon to show the changed lines.
+
+
So far, so good:
-we've replaced one line (shown with a `-` in the first column) with a new line
-(shown with a `+` in the first column).
+we've replaced one line (shown with a `**-**` in the first column) with a new line
+(shown with a `**+**` in the first column).
Now let's put that change in the staging area
-and see what `git diff` reports:
+and see what changes VS Code reports.
-```bash
-$ git add guacamole.md
-$ git diff
-```
+To add this file to the staging area, click the "**+**" icon next to the file. Remember that clicking the "**+**" icon next to `Changes` will do the same thing in this instance.
-There is no output:
-as far as Git can tell,
-there's no difference between what it's been asked to save permanently
-and what's currently in the directory.
-However,
-if we do this:
+
-```bash
-$ git diff --staged
-```
+Git now proceeds to the next step that shows `Staged Changes`, with "**1**" change, and that change is for the file `guacamole.md` (also indicated with the "**M**"). In menu `Changes`, number of changes is "**0**". After saving the file, VS Code will show the "Git: Changes" window, which tells us "No Changed Files". This is correct, as far as Git can tell, there's no difference between what it's been asked to save permanently and what's currently in the directory.
-```output
-diff --git a/guacamole.md b/guacamole.md
-index 315bf3a..b36abfd 100644
---- a/guacamole.md
-+++ b/guacamole.md
-@@ -1,6 +1,6 @@
- # Guacamole
- ## Ingredients
- * avocado
--* lemon
-+* lime
- * salt
- ## Instructions
-```
+
-it shows us the difference between
+To compare content of the staging area and commit, we click on the "**+**" next to `Staged Changes`. It shows us the difference between
the last committed change
and what's in the staging area.
-Let's save our changes:
-```bash
-$ git commit -m "Modify guacamole to the traditional recipe"
-```
+
-```output
-[main 005937f] Modify guacamole to the traditional recipe
- 1 file changed, 1 insertion(+)
-```
-
-check our status:
+Let's save our changes. Click **Commit**, enter commit message "Modify guacamole to the traditional recipe", and using the tick icon to finish this commit, and click "Save" in the confirmation dialog box.
-```bash
-$ git status
-```
+
-```output
-On branch main
-nothing to commit, working tree clean
-```
+VS Code then shows there is no changed file.
-and look at the history of what we've done so far:
+
-```bash
-$ git log
-```
+View in Git Graph (icon )
-```output
-commit 005937fbe2a98fb83f0ade869025dc2636b4dad5 (HEAD -> main)
-Author: Alfredo Linguini
-Date: Thu Aug 22 10:14:07 2013 -0400
+
- Modify guacamole to the traditional recipe
+Click on the latest log to show details:
-commit 34961b159c27df3b475cfe4415d94a6d1fcd064d
-Author: Alfredo Linguini
-Date: Thu Aug 22 10:07:21 2013 -0400
+
- Add basic guacamole's ingredients
-commit f22b25e3233b4645dabd0d81e651fe074bd8e73b
-Author: Alfredo Linguini
-Date: Thu Aug 22 09:51:46 2013 -0400
- Create a template for recipe
-```
::::::::::::::::::::::::::::::::::::::::: callout
-## Word-based diffing
+## Directories
-Sometimes, e.g. in the case of the text documents a line-wise
-diff is too coarse. That is where the `--color-words` option of
-`git diff` comes in very useful as it highlights the changed
-words using colors.
+Two important facts you should know about directories in Git.
+1. Git does not track directories on their own, only files within them.
+ Try it for yourself:
-::::::::::::::::::::::::::::::::::::::::::::::::::
+If you are not in `Explorer View`, switch to it using `View` - `Explorer`. Create a directory 'cakes' in the same directory as the file `guacamole.md`.
-::::::::::::::::::::::::::::::::::::::::: callout
+
-## Paging the Log
+Then, switch to `Source Control` view (menu `View`). VS Code will run status check on the repository and will not report any changed items, that also means it has not made it possible to add the change (i.e. the new directory). If we click on the tick box under `Source Control Repositories`, we get a "no changes to commit" message. If we use the Stage All Changes option, nothing is done - VS Code carries out no action. Our newly created empty directory `cakes` does not appear in
+ the list of untracked files even if we explicitly add it to our
+ repository.
-When the output of `git log` is too long to fit in your screen,
-`git` uses a program to split it into pages of the size of your screen.
-When this "pager" is called, you will notice that the last line in your
-screen is a `:`, instead of your usual prompt.
+
-- To get out of the pager, press Q.
-- To move to the next page, press Spacebar.
-- To search for `some_word` in all pages,
- press /
- and type `some_word`.
- Navigate through matches pressing N.
+
-::::::::::::::::::::::::::::::::::::::::::::::::::
-
-::::::::::::::::::::::::::::::::::::::::: callout
-
-## Limit Log Size
-
-To avoid having `git log` cover your entire terminal screen, you can limit the
-number of commits that Git lists by using `-N`, where `N` is the number of
-commits that you want to view. For example, if you only want information from
-the last commit you can use:
-
-```bash
-$ git log -1
-```
-
-```output
-commit 005937fbe2a98fb83f0ade869025dc2636b4dad5 (HEAD -> main)
-Author: Alfredo Linguini
-Date: Thu Aug 22 10:14:07 2013 -0400
-
- Modify guacamole to the traditional recipe
-```
-
-You can also reduce the quantity of information using the
-`--oneline` option:
-
-```bash
-$ git log --oneline
-```
-
-```output
-005937f (HEAD -> main) Modify guacamole to the traditional recipe
-34961b1 Add basic guacamole's ingredients
-f22b25e Create a template for recipe
-```
-
-You can also combine the `--oneline` option with others. One useful
-combination adds `--graph` to display the commit history as a text-based
-graph and to indicate which commits are associated with the
-current `HEAD`, the current branch `main`, or
-[other Git references][git-references]:
+2. If you create a directory in your Git repository and populate it with files,
+ you can add all files in the directory at once using `Stage all changes`.
+
+Try it for yourself:
-```bash
-$ git log --oneline --graph
-```
+In directory `cakes`, create two empty files `brownie` and `lemmon_drizzle`.
-```output
-* 005937f (HEAD -> main) Modify guacamole to the traditional recipe
-* 34961b1 Add basic guacamole's ingredients
-* f22b25e Create a template for recipe
-```
+
-::::::::::::::::::::::::::::::::::::::::::::::::::
+In `Source Control` view, note that it knows about 2 untracked files. To add all changed / untracked files to the staging area, locate the `**+**` icon next to `Changes` (not the `+` next to the individual files). Click on that to stage all changes.
-::::::::::::::::::::::::::::::::::::::::: callout
+
-## Directories
+To commit, click on the commit button and use commit message "Add some initial cakes". This new commit is shown in the Source Control Graph.
-Two important facts you should know about directories in Git.
+
-1. Git does not track directories on their own, only files within them.
- Try it for yourself:
-
- ```bash
- $ mkdir cakes
- $ git status
- $ git add cakes
- $ git status
- ```
-
- Note, our newly created empty directory `cakes` does not appear in
- the list of untracked files even if we explicitly add it (*via* `git add`) to our
- repository. This is the reason why you will sometimes see `.gitkeep` files
- in otherwise empty directories. Unlike `.gitignore`, these files are not special
- and their sole purpose is to populate a directory so that Git adds it to
- the repository. In fact, you can name such files anything you like.
+
-2. If you create a directory in your Git repository and populate it with files,
- you can add all files in the directory at once by:
-
- ```bash
- git add
- ```
-
- Try it for yourself:
-
- ```bash
- $ touch cakes/brownie cakes/lemon_drizzle
- $ git status
- $ git add cakes
- $ git status
- ```
-
- Before moving on, we will commit these changes.
-
- ```bash
- $ git commit -m "Add some initial cakes"
- ```
::::::::::::::::::::::::::::::::::::::::::::::::::
To recap, when we want to add changes to our repository,
we first need to add the changed files to the staging area
-(`git add`) and then commit the staged changes to the
-repository (`git commit`):
+and then commit the staged changes to the
+repository:
-{alt='A diagram showing two documents being separately staged using git add, before being combined into one commit using git commit'}
+{}
::::::::::::::::::::::::::::::::::::::: challenge
@@ -638,44 +443,7 @@ but answer 3 is good: short, descriptive, and imperative.
::::::::::::::::::::::::::::::::::::::::::::::::::
-::::::::::::::::::::::::::::::::::::::: challenge
-
-## Committing Changes to Git
-
-Which command(s) below would save the changes of `myfile.txt`
-to my local Git repository?
-
-1. ```bash
- $ git commit -m "my recent changes"
- ```
-2. ```bash
- $ git init myfile.txt
- $ git commit -m "my recent changes"
- ```
-3. ```bash
- $ git add myfile.txt
- $ git commit -m "my recent changes"
- ```
-4. ```bash
- $ git commit -m myfile.txt "my recent changes"
- ```
-
-::::::::::::::: solution
-
-## Solution
-
-1. Would only create a commit if files have already been staged.
-2. Would try to create a new repository.
-3. Is correct: first add the file to the staging area, then commit.
-4. Would try to commit a file "my recent changes" with the message myfile.txt.
-
-
-
-:::::::::::::::::::::::::
-
-::::::::::::::::::::::::::::::::::::::::::::::::::
-::::::::::::::::::::::::::::::::::::::: challenge
## Committing Multiple Files
@@ -693,12 +461,9 @@ that you want to commit as a single snapshot.
## Solution
-First we make our changes to the `guacamole.md` and `groceries.md` files:
+First we make our changes to the `guacamole.md` and `groceries.md` files. Add the prices in `guacamole.md` (you can copy from the text after the next image):
-```bash
-$ nano guacamole.md
-$ cat guacamole.md
-```
+
```output
# Guacamole
@@ -708,10 +473,9 @@ $ cat guacamole.md
* salt (2)
```
-```bash
-$ nano groceries.md
-$ cat groceries.md
-```
+Create a new file `groceries.md` with the following content:
+
+
```output
# Market A
@@ -720,31 +484,26 @@ $ cat groceries.md
* salt: 2 per kg
```
-Now you can add both files to the staging area. We can do that in one line:
+Note that `guacamole.md` has an indicator `**M**` for modified, and the new file is `**U**` for untracked.
-```bash
-$ git add guacamole.md groceries.md
-```
+
-Or with multiple commands:
+Now you can add both files to the staging area. We can do that using the `**+**"`next to `Changes` to add all changed and untracked files to the staging area. Alternatively, we can add the file individually, clicking the `**+**` next to each of the file.
-```bash
-$ git add guacamole.md
-$ git add groceries.md
-```
+
-Now the files are ready to commit. You can check that using `git status`. If you are ready to commit use:
+In `Source Control` View, `Staged Changes` shows 2 items are in the staging area, and lists the two items, one being `**A**` for add (new untracked file), and the other being `**M**` (modified file). Using the View Changes icon , Git shows us the changes between the versions in the staging area, and most recent commit.
-```bash
-$ git commit -m "Write prices for ingredients and their source"
-```
+
+
+Now the files are ready to commit, we do so using the message "Write prices for ingredients and their source".
+
+
+
+When it is committed, we can view the details of this commit using `Git Graph`:
+
+
-```output
-[main cc127c2]
- Write prices for ingredients and their source
- 2 files changed, 7 insertions(+)
- create mode 100644 groceries.md
-```
:::::::::::::::::::::::::
@@ -765,40 +524,18 @@ $ git commit -m "Write prices for ingredients and their source"
## Solution
-If needed, move out of the `recipes` folder:
-
-```bash
-$ cd ..
-```
-
-Create a new folder called `bio` and 'move' into it:
+If needed, remove the `recipes` folder from VS Code explorer: in `Explorer` view, right-click on `recipes` and choose "Remove folder from Workspace".
-```bash
-$ mkdir bio
-$ cd bio
-```
-
-Initialise git:
-
-```bash
-$ git init
-```
+Then create a directory `bio` (either in VS Code). In VS Code, use "Add folder to Workspace" and select this directory. VS Code will prompt to initialise the repository - if not, switch to `Source Control` view to initialise this repository.
-Create your biography file `me.txt` using `nano` or another text editor.
-Once in place, add and commit it to the repository:
+
-```bash
-$ git add me.txt
-$ git commit -m "Add biography file"
-```
+Create your biography file `me.txt` and add 3 lines of text.
+Once in place, add and commit it to the repository using message "Add biography file".
-Modify the file as described (modify one line, add a fourth line).
-To display the differences
-between its updated state and its original state, use `git diff`:
+Modify the file as described (modify one line, add a fourth line). Then use View Changes to display their differences. The following shows differences after the changed file was added to staging and then committed.
-```bash
-$ git diff me.txt
-```
+
:::::::::::::::::::::::::
@@ -812,10 +549,10 @@ $ git diff me.txt
:::::::::::::::::::::::::::::::::::::::: keypoints
-- `git status` shows the status of a repository.
+- `View Changes` shows the status of a repository.
- Files can be stored in a project's working directory (which users see), the staging area (where the next commit is being built up) and the local repository (where commits are permanently recorded).
-- `git add` puts files in the staging area.
-- `git commit` saves the staged content as a new commit in the local repository.
+- `Stage All Changes` puts all changed files in the staging area.
+- `Commit` saves the staged content as a new commit in the local repository.
- Write a commit message that accurately describes your changes.
::::::::::::::::::::::::::::::::::::::::::::::::::
diff --git a/episodes/fig/03-a-create-directory.JPG b/episodes/fig/03-a-create-directory.JPG
new file mode 100644
index 0000000000..a483cd2c36
Binary files /dev/null and b/episodes/fig/03-a-create-directory.JPG differ
diff --git a/episodes/fig/03-a-directory-opened.JPG b/episodes/fig/03-a-directory-opened.JPG
new file mode 100644
index 0000000000..a5f5c857d2
Binary files /dev/null and b/episodes/fig/03-a-directory-opened.JPG differ
diff --git a/episodes/fig/03-a-select-directory.JPG b/episodes/fig/03-a-select-directory.JPG
new file mode 100644
index 0000000000..5b62bae6ad
Binary files /dev/null and b/episodes/fig/03-a-select-directory.JPG differ
diff --git a/episodes/fig/03-b-initialize-repository.JPG b/episodes/fig/03-b-initialize-repository.JPG
new file mode 100644
index 0000000000..8c2f1f62c8
Binary files /dev/null and b/episodes/fig/03-b-initialize-repository.JPG differ
diff --git a/episodes/fig/03-b-source-control-menu.JPG b/episodes/fig/03-b-source-control-menu.JPG
new file mode 100644
index 0000000000..501d571866
Binary files /dev/null and b/episodes/fig/03-b-source-control-menu.JPG differ
diff --git a/episodes/fig/03-b-source-control.JPG b/episodes/fig/03-b-source-control.JPG
new file mode 100644
index 0000000000..d45937830e
Binary files /dev/null and b/episodes/fig/03-b-source-control.JPG differ
diff --git a/episodes/fig/03-c-directory-empty-view-menu.JPG b/episodes/fig/03-c-directory-empty-view-menu.JPG
new file mode 100644
index 0000000000..6880125683
Binary files /dev/null and b/episodes/fig/03-c-directory-empty-view-menu.JPG differ
diff --git a/episodes/fig/03-c-directory-show-hidden-items.JPG b/episodes/fig/03-c-directory-show-hidden-items.JPG
new file mode 100644
index 0000000000..be629fbc55
Binary files /dev/null and b/episodes/fig/03-c-directory-show-hidden-items.JPG differ
diff --git a/episodes/fig/03-d-main.JPG b/episodes/fig/03-d-main.JPG
new file mode 100644
index 0000000000..e765cc2ca0
Binary files /dev/null and b/episodes/fig/03-d-main.JPG differ
diff --git a/episodes/fig/03-d-rename-branch.JPG b/episodes/fig/03-d-rename-branch.JPG
new file mode 100644
index 0000000000..00aff6aa72
Binary files /dev/null and b/episodes/fig/03-d-rename-branch.JPG differ
diff --git a/episodes/fig/03-d-source-control-repositories.JPG b/episodes/fig/03-d-source-control-repositories.JPG
new file mode 100644
index 0000000000..eac0d6e7fa
Binary files /dev/null and b/episodes/fig/03-d-source-control-repositories.JPG differ
diff --git a/episodes/fig/03-d-source-control-sub-menu.JPG b/episodes/fig/03-d-source-control-sub-menu.JPG
new file mode 100644
index 0000000000..82b5b1b464
Binary files /dev/null and b/episodes/fig/03-d-source-control-sub-menu.JPG differ
diff --git a/episodes/fig/03-e-parent-repository-button.JPG b/episodes/fig/03-e-parent-repository-button.JPG
new file mode 100644
index 0000000000..69557522c1
Binary files /dev/null and b/episodes/fig/03-e-parent-repository-button.JPG differ
diff --git a/episodes/fig/03-e-parent-repository-open.JPG b/episodes/fig/03-e-parent-repository-open.JPG
new file mode 100644
index 0000000000..f6e79c2916
Binary files /dev/null and b/episodes/fig/03-e-parent-repository-open.JPG differ
diff --git a/episodes/fig/03-e-select-dessert-folder.JPG b/episodes/fig/03-e-select-dessert-folder.JPG
new file mode 100644
index 0000000000..4d7f2284ca
Binary files /dev/null and b/episodes/fig/03-e-select-dessert-folder.JPG differ
diff --git a/episodes/fig/03-e-warning-parent-repository-exists.JPG b/episodes/fig/03-e-warning-parent-repository-exists.JPG
new file mode 100644
index 0000000000..67884fd5b1
Binary files /dev/null and b/episodes/fig/03-e-warning-parent-repository-exists.JPG differ
diff --git a/episodes/fig/04-a1-repo.JPG b/episodes/fig/04-a1-repo.JPG
new file mode 100644
index 0000000000..df5d7a1980
Binary files /dev/null and b/episodes/fig/04-a1-repo.JPG differ
diff --git a/episodes/fig/04-a2-new-file.JPG b/episodes/fig/04-a2-new-file.JPG
new file mode 100644
index 0000000000..1162ef0c9d
Binary files /dev/null and b/episodes/fig/04-a2-new-file.JPG differ
diff --git a/episodes/fig/04-a3-new-file.JPG b/episodes/fig/04-a3-new-file.JPG
new file mode 100644
index 0000000000..47ea3ac687
Binary files /dev/null and b/episodes/fig/04-a3-new-file.JPG differ
diff --git a/episodes/fig/04-a4-explorer-menu.JPG b/episodes/fig/04-a4-explorer-menu.JPG
new file mode 100644
index 0000000000..e797b132a9
Binary files /dev/null and b/episodes/fig/04-a4-explorer-menu.JPG differ
diff --git a/episodes/fig/04-a4-new-file.JPG b/episodes/fig/04-a4-new-file.JPG
new file mode 100644
index 0000000000..a827194357
Binary files /dev/null and b/episodes/fig/04-a4-new-file.JPG differ
diff --git a/episodes/fig/04-a5-new-file.JPG b/episodes/fig/04-a5-new-file.JPG
new file mode 100644
index 0000000000..a827194357
Binary files /dev/null and b/episodes/fig/04-a5-new-file.JPG differ
diff --git a/episodes/fig/04-a6-file-untracked.JPG b/episodes/fig/04-a6-file-untracked.JPG
new file mode 100644
index 0000000000..267a18e14a
Binary files /dev/null and b/episodes/fig/04-a6-file-untracked.JPG differ
diff --git a/episodes/fig/04-a6-new-file.JPG b/episodes/fig/04-a6-new-file.JPG
new file mode 100644
index 0000000000..a704377d46
Binary files /dev/null and b/episodes/fig/04-a6-new-file.JPG differ
diff --git a/episodes/fig/04-a7-file-modified.JPG b/episodes/fig/04-a7-file-modified.JPG
new file mode 100644
index 0000000000..8c943e7097
Binary files /dev/null and b/episodes/fig/04-a7-file-modified.JPG differ
diff --git a/episodes/fig/04-a7-new-file-created.JPG b/episodes/fig/04-a7-new-file-created.JPG
new file mode 100644
index 0000000000..3932e4a9ec
Binary files /dev/null and b/episodes/fig/04-a7-new-file-created.JPG differ
diff --git a/episodes/fig/04-a7-new-file.JPG b/episodes/fig/04-a7-new-file.JPG
new file mode 100644
index 0000000000..a704377d46
Binary files /dev/null and b/episodes/fig/04-a7-new-file.JPG differ
diff --git a/episodes/fig/04-b1-git-status.JPG b/episodes/fig/04-b1-git-status.JPG
new file mode 100644
index 0000000000..267a18e14a
Binary files /dev/null and b/episodes/fig/04-b1-git-status.JPG differ
diff --git a/episodes/fig/04-b1-git-status1.JPG b/episodes/fig/04-b1-git-status1.JPG
new file mode 100644
index 0000000000..4bb5589ac3
Binary files /dev/null and b/episodes/fig/04-b1-git-status1.JPG differ
diff --git a/episodes/fig/04-b2-git-status.JPG b/episodes/fig/04-b2-git-status.JPG
new file mode 100644
index 0000000000..620862c116
Binary files /dev/null and b/episodes/fig/04-b2-git-status.JPG differ
diff --git a/episodes/fig/04-b2-git-status2.JPG b/episodes/fig/04-b2-git-status2.JPG
new file mode 100644
index 0000000000..620862c116
Binary files /dev/null and b/episodes/fig/04-b2-git-status2.JPG differ
diff --git a/episodes/fig/04-b3-git-status.JPG b/episodes/fig/04-b3-git-status.JPG
new file mode 100644
index 0000000000..d85260d3b9
Binary files /dev/null and b/episodes/fig/04-b3-git-status.JPG differ
diff --git a/episodes/fig/04-b3-git-status3.JPG b/episodes/fig/04-b3-git-status3.JPG
new file mode 100644
index 0000000000..d85260d3b9
Binary files /dev/null and b/episodes/fig/04-b3-git-status3.JPG differ
diff --git a/episodes/fig/04-c1-source-control-view.JPG b/episodes/fig/04-c1-source-control-view.JPG
new file mode 100644
index 0000000000..995539ed27
Binary files /dev/null and b/episodes/fig/04-c1-source-control-view.JPG differ
diff --git a/episodes/fig/04-c2-source-control-menu.JPG b/episodes/fig/04-c2-source-control-menu.JPG
new file mode 100644
index 0000000000..059f98d908
Binary files /dev/null and b/episodes/fig/04-c2-source-control-menu.JPG differ
diff --git a/episodes/fig/04-c3-source-control-menu.JPG b/episodes/fig/04-c3-source-control-menu.JPG
new file mode 100644
index 0000000000..d139a5abbc
Binary files /dev/null and b/episodes/fig/04-c3-source-control-menu.JPG differ
diff --git a/episodes/fig/04-c4-source-control-sub-menu.JPG b/episodes/fig/04-c4-source-control-sub-menu.JPG
new file mode 100644
index 0000000000..21eb717ff0
Binary files /dev/null and b/episodes/fig/04-c4-source-control-sub-menu.JPG differ
diff --git a/episodes/fig/04-d1-git-diff-file.JPG b/episodes/fig/04-d1-git-diff-file.JPG
new file mode 100644
index 0000000000..90ca651605
Binary files /dev/null and b/episodes/fig/04-d1-git-diff-file.JPG differ
diff --git a/episodes/fig/04-e1-staging-file.JPG b/episodes/fig/04-e1-staging-file.JPG
new file mode 100644
index 0000000000..4e874e1f27
Binary files /dev/null and b/episodes/fig/04-e1-staging-file.JPG differ
diff --git a/episodes/fig/04-e2-staging-all.JPG b/episodes/fig/04-e2-staging-all.JPG
new file mode 100644
index 0000000000..90502aa384
Binary files /dev/null and b/episodes/fig/04-e2-staging-all.JPG differ
diff --git a/episodes/fig/04-f1-staging-done.JPG b/episodes/fig/04-f1-staging-done.JPG
new file mode 100644
index 0000000000..5f2158512b
Binary files /dev/null and b/episodes/fig/04-f1-staging-done.JPG differ
diff --git a/episodes/fig/04-f2-file-added.JPG b/episodes/fig/04-f2-file-added.JPG
new file mode 100644
index 0000000000..9a6209ccd4
Binary files /dev/null and b/episodes/fig/04-f2-file-added.JPG differ
diff --git a/episodes/fig/04-f2-staging-show-no-changes1.JPG b/episodes/fig/04-f2-staging-show-no-changes1.JPG
new file mode 100644
index 0000000000..50abf271fd
Binary files /dev/null and b/episodes/fig/04-f2-staging-show-no-changes1.JPG differ
diff --git a/episodes/fig/04-f3-staging-show-no-changes2.JPG b/episodes/fig/04-f3-staging-show-no-changes2.JPG
new file mode 100644
index 0000000000..bab8f2150d
Binary files /dev/null and b/episodes/fig/04-f3-staging-show-no-changes2.JPG differ
diff --git a/episodes/fig/04-f4-staging-no-changes-no-action.JPG b/episodes/fig/04-f4-staging-no-changes-no-action.JPG
new file mode 100644
index 0000000000..6ee37a8396
Binary files /dev/null and b/episodes/fig/04-f4-staging-no-changes-no-action.JPG differ
diff --git a/episodes/fig/04-f5-staging-no-changes-no-action.JPG b/episodes/fig/04-f5-staging-no-changes-no-action.JPG
new file mode 100644
index 0000000000..6ee37a8396
Binary files /dev/null and b/episodes/fig/04-f5-staging-no-changes-no-action.JPG differ
diff --git a/episodes/fig/04-g1-git-diff-file-changes.JPG b/episodes/fig/04-g1-git-diff-file-changes.JPG
new file mode 100644
index 0000000000..944edf753d
Binary files /dev/null and b/episodes/fig/04-g1-git-diff-file-changes.JPG differ
diff --git a/episodes/fig/04-h1-commit-button.JPG b/episodes/fig/04-h1-commit-button.JPG
new file mode 100644
index 0000000000..0022c285f3
Binary files /dev/null and b/episodes/fig/04-h1-commit-button.JPG differ
diff --git a/episodes/fig/04-h2-commit-message.JPG b/episodes/fig/04-h2-commit-message.JPG
new file mode 100644
index 0000000000..81625197d1
Binary files /dev/null and b/episodes/fig/04-h2-commit-message.JPG differ
diff --git a/episodes/fig/04-h3-commit-confirmation-dialog.JPG b/episodes/fig/04-h3-commit-confirmation-dialog.JPG
new file mode 100644
index 0000000000..7f01f5c53e
Binary files /dev/null and b/episodes/fig/04-h3-commit-confirmation-dialog.JPG differ
diff --git a/episodes/fig/04-h4-commit-done.JPG b/episodes/fig/04-h4-commit-done.JPG
new file mode 100644
index 0000000000..015aa8f7a9
Binary files /dev/null and b/episodes/fig/04-h4-commit-done.JPG differ
diff --git a/episodes/fig/04-h5-commit-summary.JPG b/episodes/fig/04-h5-commit-summary.JPG
new file mode 100644
index 0000000000..e604f19868
Binary files /dev/null and b/episodes/fig/04-h5-commit-summary.JPG differ
diff --git a/episodes/fig/04-h6-all-up-to-date.JPG b/episodes/fig/04-h6-all-up-to-date.JPG
new file mode 100644
index 0000000000..4df5d7fff8
Binary files /dev/null and b/episodes/fig/04-h6-all-up-to-date.JPG differ
diff --git a/episodes/fig/04-h7-git-log.JPG b/episodes/fig/04-h7-git-log.JPG
new file mode 100644
index 0000000000..9ced1b8dda
Binary files /dev/null and b/episodes/fig/04-h7-git-log.JPG differ
diff --git a/episodes/fig/04-h8-commit-details.JPG b/episodes/fig/04-h8-commit-details.JPG
new file mode 100644
index 0000000000..db3b995531
Binary files /dev/null and b/episodes/fig/04-h8-commit-details.JPG differ
diff --git a/episodes/fig/04-i1-recipes-file-explorer.JPG b/episodes/fig/04-i1-recipes-file-explorer.JPG
new file mode 100644
index 0000000000..bb713adbd9
Binary files /dev/null and b/episodes/fig/04-i1-recipes-file-explorer.JPG differ
diff --git a/episodes/fig/04-j1-add-content1.JPG b/episodes/fig/04-j1-add-content1.JPG
new file mode 100644
index 0000000000..b503d2e600
Binary files /dev/null and b/episodes/fig/04-j1-add-content1.JPG differ
diff --git a/episodes/fig/04-j10-commit-details.JPG b/episodes/fig/04-j10-commit-details.JPG
new file mode 100644
index 0000000000..75ba5d9b33
Binary files /dev/null and b/episodes/fig/04-j10-commit-details.JPG differ
diff --git a/episodes/fig/04-j2-add-content2.JPG b/episodes/fig/04-j2-add-content2.JPG
new file mode 100644
index 0000000000..a62c4f6580
Binary files /dev/null and b/episodes/fig/04-j2-add-content2.JPG differ
diff --git a/episodes/fig/04-j3-source-control1.JPG b/episodes/fig/04-j3-source-control1.JPG
new file mode 100644
index 0000000000..2c51901264
Binary files /dev/null and b/episodes/fig/04-j3-source-control1.JPG differ
diff --git a/episodes/fig/04-j4-source-control2.JPG b/episodes/fig/04-j4-source-control2.JPG
new file mode 100644
index 0000000000..2d7607a641
Binary files /dev/null and b/episodes/fig/04-j4-source-control2.JPG differ
diff --git a/episodes/fig/04-j5-git-graph.JPG b/episodes/fig/04-j5-git-graph.JPG
new file mode 100644
index 0000000000..65c41c5d8c
Binary files /dev/null and b/episodes/fig/04-j5-git-graph.JPG differ
diff --git a/episodes/fig/04-j6-git-commit-not-staged.JPG b/episodes/fig/04-j6-git-commit-not-staged.JPG
new file mode 100644
index 0000000000..e4d11d4b7c
Binary files /dev/null and b/episodes/fig/04-j6-git-commit-not-staged.JPG differ
diff --git a/episodes/fig/04-j7-add-file to-staging-area.JPG b/episodes/fig/04-j7-add-file to-staging-area.JPG
new file mode 100644
index 0000000000..afddff47b0
Binary files /dev/null and b/episodes/fig/04-j7-add-file to-staging-area.JPG differ
diff --git a/episodes/fig/04-j8-file-added-to-staging-area.JPG b/episodes/fig/04-j8-file-added-to-staging-area.JPG
new file mode 100644
index 0000000000..4771e3bbc1
Binary files /dev/null and b/episodes/fig/04-j8-file-added-to-staging-area.JPG differ
diff --git a/episodes/fig/04-j9-commit.JPG b/episodes/fig/04-j9-commit.JPG
new file mode 100644
index 0000000000..241fb27c46
Binary files /dev/null and b/episodes/fig/04-j9-commit.JPG differ
diff --git a/episodes/fig/04-k1-change-file-content1.JPG b/episodes/fig/04-k1-change-file-content1.JPG
new file mode 100644
index 0000000000..8357651082
Binary files /dev/null and b/episodes/fig/04-k1-change-file-content1.JPG differ
diff --git a/episodes/fig/04-k10-git-log2.JPG b/episodes/fig/04-k10-git-log2.JPG
new file mode 100644
index 0000000000..57b5a9858d
Binary files /dev/null and b/episodes/fig/04-k10-git-log2.JPG differ
diff --git a/episodes/fig/04-k2-file-saved.JPG b/episodes/fig/04-k2-file-saved.JPG
new file mode 100644
index 0000000000..70471bbaea
Binary files /dev/null and b/episodes/fig/04-k2-file-saved.JPG differ
diff --git a/episodes/fig/04-k3-diff.JPG b/episodes/fig/04-k3-diff.JPG
new file mode 100644
index 0000000000..31b9bff501
Binary files /dev/null and b/episodes/fig/04-k3-diff.JPG differ
diff --git a/episodes/fig/04-k4-add-to-staging-area.JPG b/episodes/fig/04-k4-add-to-staging-area.JPG
new file mode 100644
index 0000000000..38ac494000
Binary files /dev/null and b/episodes/fig/04-k4-add-to-staging-area.JPG differ
diff --git a/episodes/fig/04-k5-diff-no-change.JPG b/episodes/fig/04-k5-diff-no-change.JPG
new file mode 100644
index 0000000000..fb01738a35
Binary files /dev/null and b/episodes/fig/04-k5-diff-no-change.JPG differ
diff --git a/episodes/fig/04-k6-diff-staged-show-change.JPG b/episodes/fig/04-k6-diff-staged-show-change.JPG
new file mode 100644
index 0000000000..e8595772c1
Binary files /dev/null and b/episodes/fig/04-k6-diff-staged-show-change.JPG differ
diff --git a/episodes/fig/04-k7-commit.JPG b/episodes/fig/04-k7-commit.JPG
new file mode 100644
index 0000000000..7f5b7b5a09
Binary files /dev/null and b/episodes/fig/04-k7-commit.JPG differ
diff --git a/episodes/fig/04-k8-commit-completed.JPG b/episodes/fig/04-k8-commit-completed.JPG
new file mode 100644
index 0000000000..2d84f3ebfc
Binary files /dev/null and b/episodes/fig/04-k8-commit-completed.JPG differ
diff --git a/episodes/fig/04-k9-git-log1.JPG b/episodes/fig/04-k9-git-log1.JPG
new file mode 100644
index 0000000000..ae8f0b8c77
Binary files /dev/null and b/episodes/fig/04-k9-git-log1.JPG differ
diff --git a/episodes/fig/04-m1-add-directory-not-tracked.JPG b/episodes/fig/04-m1-add-directory-not-tracked.JPG
new file mode 100644
index 0000000000..cbf8fc6826
Binary files /dev/null and b/episodes/fig/04-m1-add-directory-not-tracked.JPG differ
diff --git a/episodes/fig/04-m2-no-changes-to-commit.JPG b/episodes/fig/04-m2-no-changes-to-commit.JPG
new file mode 100644
index 0000000000..b03bc3e535
Binary files /dev/null and b/episodes/fig/04-m2-no-changes-to-commit.JPG differ
diff --git a/episodes/fig/04-m3-stage-all-changes.JPG b/episodes/fig/04-m3-stage-all-changes.JPG
new file mode 100644
index 0000000000..26953e3aa6
Binary files /dev/null and b/episodes/fig/04-m3-stage-all-changes.JPG differ
diff --git a/episodes/fig/04-m4-add-files-in-sub-directory.JPG b/episodes/fig/04-m4-add-files-in-sub-directory.JPG
new file mode 100644
index 0000000000..280e5f3646
Binary files /dev/null and b/episodes/fig/04-m4-add-files-in-sub-directory.JPG differ
diff --git a/episodes/fig/04-m5-source-control-stage-all-changes.JPG b/episodes/fig/04-m5-source-control-stage-all-changes.JPG
new file mode 100644
index 0000000000..7f063c7eb4
Binary files /dev/null and b/episodes/fig/04-m5-source-control-stage-all-changes.JPG differ
diff --git a/episodes/fig/04-m6-commit-with-message.JPG b/episodes/fig/04-m6-commit-with-message.JPG
new file mode 100644
index 0000000000..3eb1b7f8c2
Binary files /dev/null and b/episodes/fig/04-m6-commit-with-message.JPG differ
diff --git a/episodes/fig/04-m7-commits.JPG b/episodes/fig/04-m7-commits.JPG
new file mode 100644
index 0000000000..15f413bdfc
Binary files /dev/null and b/episodes/fig/04-m7-commits.JPG differ
diff --git a/episodes/fig/04-n1-update-file.JPG b/episodes/fig/04-n1-update-file.JPG
new file mode 100644
index 0000000000..9d3522f685
Binary files /dev/null and b/episodes/fig/04-n1-update-file.JPG differ
diff --git a/episodes/fig/04-n2-add-file.JPG b/episodes/fig/04-n2-add-file.JPG
new file mode 100644
index 0000000000..ad45421a43
Binary files /dev/null and b/episodes/fig/04-n2-add-file.JPG differ
diff --git a/episodes/fig/04-n3-file-status.JPG b/episodes/fig/04-n3-file-status.JPG
new file mode 100644
index 0000000000..971e2f4ecc
Binary files /dev/null and b/episodes/fig/04-n3-file-status.JPG differ
diff --git a/episodes/fig/04-n4-stage-all-changes.JPG b/episodes/fig/04-n4-stage-all-changes.JPG
new file mode 100644
index 0000000000..cc21c7154a
Binary files /dev/null and b/episodes/fig/04-n4-stage-all-changes.JPG differ
diff --git a/episodes/fig/04-n5-view-staged-changes.JPG b/episodes/fig/04-n5-view-staged-changes.JPG
new file mode 100644
index 0000000000..fa4e98e92f
Binary files /dev/null and b/episodes/fig/04-n5-view-staged-changes.JPG differ
diff --git a/episodes/fig/04-n6-commit-with-message.JPG b/episodes/fig/04-n6-commit-with-message.JPG
new file mode 100644
index 0000000000..61208ca5cb
Binary files /dev/null and b/episodes/fig/04-n6-commit-with-message.JPG differ
diff --git a/episodes/fig/Git-Graph.jpg b/episodes/fig/Git-Graph.jpg
new file mode 100644
index 0000000000..89a13cae5f
Binary files /dev/null and b/episodes/fig/Git-Graph.jpg differ
diff --git a/episodes/fig/View-changes-icon.jpg b/episodes/fig/View-changes-icon.jpg
new file mode 100644
index 0000000000..c778d82f45
Binary files /dev/null and b/episodes/fig/View-changes-icon.jpg differ
diff --git a/episodes/fig/n4-n7-git-graph.JPG b/episodes/fig/n4-n7-git-graph.JPG
new file mode 100644
index 0000000000..6484eed093
Binary files /dev/null and b/episodes/fig/n4-n7-git-graph.JPG differ
diff --git a/episodes/fig/n4-p1-add-folder-to-workspace.JPG b/episodes/fig/n4-p1-add-folder-to-workspace.JPG
new file mode 100644
index 0000000000..f7345d82fe
Binary files /dev/null and b/episodes/fig/n4-p1-add-folder-to-workspace.JPG differ
diff --git a/episodes/fig/n4-p2-commit-view-changes.JPG b/episodes/fig/n4-p2-commit-view-changes.JPG
new file mode 100644
index 0000000000..1190ac8c39
Binary files /dev/null and b/episodes/fig/n4-p2-commit-view-changes.JPG differ