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

includes/_working-with-files-objectives.qmd

@@ -1,4 +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.
 -   Use the GitHub history page to explore and find previous changes made to your files.

sessions/working-with-files.qmd

@@ -183,6 +183,86 @@ repository! :tada:
 
 {{< text_snippet sticky_up >}}
 
+## Rename, edit, and move the soup recipe to a new folder
+
+Now that we have added a couple of recipes to the repository, we'll
+take a look at how to rename, edit, and move files in repositories on
+GitHub.
+
+Let's imagine that we want to add more recipes to the repository in
+the future. To keep things organised, we want our recipes to have
+descriptive names and content. We also want to create some folders to
+group similar recipes together.
+
+Let's start by doing this with the soup recipe we added earlier.
+
+### Rename `soup.md`
+
+Let's start by renaming the `soup.md` file. We'll to the `soup.md` file in
+the repository by clicking on it in the "Code" tab. Then, we'll click the
+pencil icon on the top-right side of the page to edit the file.
+
+On the top-left side of the page, we'll see the name of the file. Let's click
+on the name and rename the file to `tomato-soup.md`. Remember to keep
+the `.md` file extension.
+
+Once we have renamed the file, let's 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, we'll click the `tomato-soup.md` file in the "Code" tab of the
+repository to open it and click the pencil icon on the top-right side of
+the page.
+
+Now, let's change the first line of the file to "Ingredients for tomato soup".
+
+Once we've made the changes, let's commit them.
+
+### 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, we'll click the `tomato-soup.md` file to open it and click the
+pencil icon on the top-right side of the page.
+
+Now, let's change the path of the file to a new folder in the 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 we 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 we can't go back to the folder name
+and correct it if we make a typo or change our mind about the name.
+
+However, we can use the backspace key to remove the `/` which leads
+the cursor back to the folder name. Now, we can change the folder name
+as we like :partying_face:
+:::
+
+Let's click the green "Commit changes" button and commit the changes.
+
+We 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
+
+It is possible to 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, edit, and move the `cookie-recipe.md` file
 
 **Time: \~10 minutes**