improves branch merge chapter

basics.html

@@ -771,11 +771,31 @@
             # branch and merge
 
             notes:
-            - what was this **master** again?
+            - this is a demo chapter, you'll all do this in collaboration
+              chapter (next one)
+            - what was this **master** again? we haven't explained yet
           </section>
 
-          <section id="branches" data-markdown>
-            ## branches
+          <section id="branch-visual" data-markdown>
+            ## branches visualized
+
+            ![playground](img/motivation-throwaway-playground.svg)
+
+            notes:
+            - we can take a lot away from this small example
+              - create a branch to have a separate history
+              - branch is a name attached to a commit
+              - the name advances when a new commit is made
+            - **master** is a naming convention for the default branch
+            - switch back and forth
+            - always imagine git history as a directed graph
+              - graph is drawn with new top and old bottom
+              - commit points to its parent
+              - git commands modify the graph
+          </section>
+
+          <section id="branch-commands" data-markdown>
+            ## branch commands
 
             ```bash
             # show your local branches
@@ -792,36 +812,40 @@
             ```
 
             notes:
-            - use wip/feature as branch name, see motivation playground
-            - use git lol frequently to showcase its importance
-            - make changes in playground
-            - git push
-            - make changes in master
-            - git lol
-            - make changes in playground
+            ```
+            # branch, branch --all
+            git lol # show branches
+            # branch wip/feature, lol
+            # checkout wip/feature, lol
+            # edit, commit, lol
+            # push, lol
+            ```
+            - always `lol` because visual representation helps understanding
           </section>
 
           <section id="branch-names" data-markdown>
             ## branch naming
             ### conventions
 
-            - dashes in names
-            - slashes for categories
-
-            ```markdown
-            topic/ui/input-form
-            wip/test-different-fonts
+            ```bash
+            # slashes for categories
             hotfix/42
             release/1.6.0
+
+            # dashes in names
+            wip/font-changes
+
+            # nesting is allowed
+            topic/ui/input-form
             ```
 
             notes:
             - `git branch --list 'topic/*'`
             - decide with your team
-            - write CONTRIBUTING.md
+            - write `CONTRIBUTING.md`
           </section>
 
-          <section id="merging" data-markdown>
+          <section id="branch-merging" data-markdown>
             ## resolving branches
 
             ```bash
@@ -834,7 +858,11 @@
             ```
 
             notes:
-            - use git lol to show final layout
+            ```
+            # checkout master, lol
+            # merge wip/feature, lol
+            # branch -d wip/feature, lol
+            ```
           </section>
         </section>