docs: restructure documentation

This rewrite follows the principles of https://diataxis.fr/

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>

docs/content/tutorials/first-note.md

@@ -0,0 +1,52 @@
+# Create your first note
+
+We'll assume the domain you use for the instance is <https://md.example.com>, so please
+substitute your actual domain anywhere you encounter <https://md.example.com>
+
+1. Go to <https://md.example.com>.
+
+2. Click on the "New Note" button in the top right. HedgeDoc will now create a new
+   note for you and redirect you to the editor of this note.
+
+   ![New Note button on the HedgeDoc start page][new-note]{ width="400" }
+
+3. Start typing your note. On the left (1) you find the editor to do so and
+   on the right (2) you see the rendering of what you wrote. 
+
+   ![The HedgeDoc Editor][editor]
+
+4. Copy the following text into your editor
+
+```markdown
+# My first note
+
+You can format text **bold** or *italic*.
+
+There are lists both
+
+1. ordered
+
+and
+
+- unordered
+
+Also you can use
+
+- [ ] ToDo Lists
+```
+
+![The HedgeDoc Editor with the example text][editor-filled]
+
+## Further reading
+
+- [Checkout HedgeDoc's markdown syntax reference][hfm]
+- [Creating your first presentation][tutorials/first-presentation]
+- [Advanced configuration options][config]
+
+[new-note]: ../images/tutorial/top-right.png
+[editor]: ../images/tutorial/note/editor.png
+[editor-filled]: ../images/tutorial/note/editor-filled.png
+
+[hfm]: /references/hfm/
+[tutorials/first-presentation]: /tutorials/first-presentation/
+[config]: /references/config/