docs: 📝 add code along on renaming, editing, and moving files to working-with-files

includes/_working-with-files-objectives.qmd

@@ -1,2 +1,4 @@
--   Interact with and navigate GitHub to create, edit, rename, and
+-   Interact with and navigate GitHub to create, rename, edit, and
     delete files and folders.
+-   Use good naming practices for files and folders.
+-   Practice finding previous changes by using the Git history.

sessions/working-with-files.qmd

@@ -4,28 +4,48 @@
 
 ## Learning objectives
 
-The overall learning outcome for this session is to:
+The learning objectives of this session are:
 
-1.  
+{{< include /includes/_working-with-files-objectives.qmd >}}
 
-Specific learning objectives are:
+During the session, you will:
 
-{{< include /includes/_working-with-files-objectives.qmd >}}
+-   Add a cookie recipe and a soup recipe to your repository.
+-   Rename and move the recipe files to new folders.
+-   Delete the soup recipe and the folder it is in.
+-   Look at the history of your repository to find a specific change.
+
+Right now, your repository file structure looks like this:
+
+```         
+recipe-book/
+TODO: What is in the repo at this point?
+```
+
+By the end of the session, your repository file structure will look like
+this:
 
-## TODO: Section
+```         
+recipe-book/
+├── baked-goods/
+│   └── chocolate-chip-cookies.md
+```
 
 ## :book: Reading task: Naming of files and folders
 
 **Time: \~5 minutes.**
 
+Before we start adding files and folders to our repositories, let's take
+a moment to talk about good naming practices for files and folders.
+
 When working with files and folders in a repository---and in
 general---it's important to think about how you name them. Good naming
 practices can help you and others understand the content of a file or
 folder and make it easier to find what you are looking for.
 
-Avoiding certain characters can also help prevent issues when
-working with files across different operating systems (like Windows,
-Mac, and Linux).
+Avoiding certain characters can also help prevent issues when working
+with files across different operating systems (like Windows, Mac, and
+Linux).
 
 Here are some tips for good naming practices:
 
@@ -48,13 +68,74 @@ Here are some tips for good naming practices:
     file. For example, use `.md` for Markdown files, and `.csv` for CSV
     files.
 
+::: callout-note
+## What is an `.md` file?
+
+`.md` stands for
+[Markdown](https://quarto.org/docs/authoring/markdown-basics.html) and
+is a plain text format that's designed to be easy to write and read.
+
+We won't cover how to write Markdown in this workshop. All you need to
+know is that we use Markdown files here because it is a common format
+for text files.
+:::
+
 {{< text_snippet sticky_up >}}
 
+## Add a soup recipe to your repository
+
+Now, it's time to create your first file on GitHub. Let's add a soup
+recipe :bowl_with_spoon:.
+
+In the "Code" tab of your repository, click the button saying "Add file"
+in the top-right side of the page. In the dropdown menu, click "Create
+new file".
+
+This leads us to a new page with an empty file without any content.
+
+In the "Name your file..." field, in the top-left corner, type the name
+of your file. Let's follow the good naming practices we've read about
+above and call it `soup.md`.
+
+For the content of the file, copy and paste the following recipe:
+
+``` markdown
+Ingredients for soup 
+
+- 4 tbs butter
+- 0.5 large onion, cut into large wedges
+- 1 can of tomatoes
+- 1,5 cups water, vegetable or chicken stock
+- 0.5 tsp salt, or more to taste
+
+Instructions
+
+1. Melt the butter over medium heat in a large saucepan.
+2. Add onion wedges, water, tomatoes with their juices, and salt.
+3. Bring to a simmer and cook for about 40 minutes. Stir occasionally.
+4. Blend the soup, and season to taste.
+```
+
+Once you have added the file name and the recipe itself, click the green
+"Commit changes" button in the top right corner of the page.
+
+Write a descriptive commit message like "Add tomato soup recipe". You
+don't need to write an extended description. Keep the "Commit directly
+to the `main` branch" option selected.
+
+Click "Commit changes".
+
+You have now added the first recipe to your repository! :tada:
+
+Now, you'll practice creating files in your repository by adding another
+recipe.
+
 ## :woman_technologist: Exercise: Add a cookie recipe to your repository
 
 **Time: \~10 minutes**
 
-Let's add the first recipe to your repository: A cookie recipe! :cookie:
+Let's add the second recipe to your repository: A cookie recipe!
+:cookie:
 
 1.  In the "Code" tab of your repository, click the "Add file" button
     and then "Create new file".
@@ -100,11 +181,91 @@ Instructions
 7. Once baked, transfer the baking paper with the cookies onto a wire rack and let them cool for 10 minutes before removing them from the paper.
 ```
 
-You have now added your first recipe and made your first commit to your
+You have now added your second recipe and made another commit to your
 repository! :tada:
 
 {{< text_snippet sticky_up >}}
 
+## Rename, edit, and move the soup recipe to a new folder
+
+Now that you have added a couple of recipes to your repository, we'll
+take a look at how you rename, edit, and move files in repositories on
+GitHub.
+
+Let's imagine that you want to add more recipes to your repository in
+the future. To keep things organised, you want your recipes to have
+descriptive names and content. You also want to create some folders to
+group similar recipes together.
+
+Let's start by doing this with the soup recipe you added earlier.
+
+### Rename `soup.md`
+
+Let's start by renaming the `soup.md` file. Go to the `soup.md` file in
+your repository by clicking on it in the "Code" tab. Then, click the
+pencil icon on the top-right side of the page to edit the file.
+
+On the top-left side of the page, you'll see the name of the file. Click
+on the name and rename the file to `tomato-soup.md`. Remember to keep
+the `.md` file extension.
+
+Once you have renamed the file, click the green "Commit changes" button
+and commit the changes.
+
+### Edit the content of `tomato-soup.md`
+
+When we added the content of the file, you might have noticed that it
+said "Ingredients for soup" on the first line. This is a bit generic, so
+let's change it.
+
+Like before, click the `tomato-soup.md` file in the "Code" tab of your
+repository to open it and click the pencil icon on the top-right side of
+the page.
+
+Now, change the first line of the file to "Ingredients for tomato soup".
+
+Once you have made the changes, commit the changes.
+
+### Move `tomato-soup.md` to a new `soups/` folder
+
+Next, let's move the `tomato-soup.md` file to a new `soups/` folder.
+
+As before, click the `tomato-soup.md` file to open it and click the
+pencil icon on the top-right side of the page.
+
+Now, change the path of the file to a new folder in your repository, by
+adding `soups/` before the file name like so: `soups/tomato-soup.md`.
+Remember to use `/` between the folder name and the file name.
+
+This will both create a new folder called `soups/` and move the
+`tomato-soup.md` file into it.
+
+::: callout-tip
+## Fixing a folder name after typing slash `/`
+
+You might have noticed that once you add the slash `/` after the folder
+name, GitHub moves the cursor to the end of the file path, to the file
+name. This might make it seem like you can't go back to the folder name
+and correct it if you make a typo or change your mind about the name.
+
+However, you can use the backspace key to remove the `/` which leads
+your cursor back to the folder name. Now, you can change the folder name
+as you like :partying_face:
+:::
+
+Click the green "Commit changes" button to commit the changes.
+
+You have now renamed the soup recipe file, edited its content, and moved
+it to a new folder in your repository! :bowl_with_spoon: :tomato:
+
+::: callout-tip
+## Rename, edit, and move files in the same step
+
+You can rename, edit, and move files in the same step if you want to.
+However, for practice and clarity in the history, we've split the steps
+into first renaming the file *then* moving it to a new folder.
+:::
+
 ## :technologist: Exercise: Rename and move the `cookie-recipe.md` file
 
 **Time: \~10 minutes**