renamed second section

docs/02-quick-start.md

@@ -0,0 +1,36 @@
+# Quick start
+
+## 1. Getting started
+
+To embark on your [Nassi–Shneiderman diagramming](https://en.wikipedia.org/wiki/Nassi%E2%80%93Shneiderman_diagram) journey, head over to the live editor at [https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/](https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/).
+
+## 2. Interface overview
+
+The editor presents two fundamental components:
+
+- **Code Editor**: This is where the magic happens. A piece of code written here will be interpreted and transformed into a diagram.
+- **Live Preview**: The resulting diagrams are displayed here in real-time.
+
+## 3. Hello World
+
+For those using smaller screens like smartphones or tablets, the code editor might be tucked away initially.
+If you find it hidden, simply tap on the "SHOW CODE" button to reveal it.
+
+Now, let's create a simple diagram.
+
+In the code editor, type Hello World;
+The project should generate the corresponding diagram:
+
+<iframe width="100%" style="aspect-ratio: 16/10; border:none;" loading="lazy" src="https://eurydia.github.io/project-nassi-shneiderman-diagram-builder-online/?preview=true&content=Hello+World%3B"></iframe>
+
+## 4. Export
+
+Once you are satisfied with the diagram, you can use the export feature to save your diagram in three different file formats: PNG, JPEG, and SVG.
+
+Moreover, sharing is made seamless with the ability to generate a unique link for your diagram.
+
+## 5. Advanced syntax
+
+As you grow more comfortable with the basics, delve into advanced features.
+Experiment with different diagram structures; loops, branches, and functions.
+The editor adapts to your coding style, offering a dynamic representation of diverse programming constructs.