Add tutorials/01-hello-fluid-frame.md

Anvil app → run a server function → get greeted in style.

tutorials/01-hello-fluid-frame.md

@@ -0,0 +1,121 @@
+---
+
+**`tutorials/01-hello-fluid-frame.md`**
+
+````markdown
+# 01 — Hello, Fluid Frame
+
+**Goal:** Click a button in your Anvil app → run a server function → get greeted in style.
+
+---
+
+## 1. What You’ll Build
+A web app that:
+- Takes your name
+- Sends it to the server
+- Returns a personalized greeting
+- Shows it in a popup notification
+
+Yes, it’s “Hello, World” — but with a *fluid frame*.
+
+---
+
+## 2. Create the App
+1. Go to [Anvil](https://anvil.works) → **New App** → **Blank App** (Material Design).
+2. On **Form1**:
+   - Drag a **TextBox** (ID: `text_box_1`, placeholder: “Enter your name”).
+   - Drag a **Button** (ID: `button_1`, text: “Say hi”).
+3. Open **Code** view for `Form1`.
+
+---
+
+## 3. Client-Side Code
+```python
+from anvil import *
+import anvil.server
+
+class Form1(Form1Template):
+  def __init__(self, **properties):
+    self.init_components(**properties)
+
+  def button_1_click(self, **event_args):
+    """This method is called when the button is clicked"""
+    self.button_1.enabled = False
+    try:
+      name = self.text_box_1.text or "World"
+      msg = anvil.server.call('hello_server', name)
+      Notification(msg, timeout=2).show()
+    finally:
+      self.button_1.enabled = True
+````
+
+---
+
+## 4. Server-Side Code
+
+1. In your Anvil app, create a **Server Module** called `ServerModule1`.
+2. Paste:
+
+```python
+import anvil.server
+
+@anvil.server.callable
+def hello_server(name):
+  return f"Hello from the server, {name} 👋"
+```
+
+---
+
+## 5. Run It
+
+* Click **Run ▶**.
+* Type a name and click “Say hi”.
+* You should see a friendly greeting in the top-right corner.
+* If not, check:
+
+  * You spelled the server function name exactly the same.
+  * `anvil.server.call` arguments match.
+  * Your internet is not powered by squirrels.
+
+---
+
+## 6. Bonus: Debug Like a Pro
+
+Add print statements in both client and server code to watch the flow:
+
+```python
+print(f"[Client] Sending: {name}")
+```
+
+```python
+print(f"[Server] Received: {name}")
+```
+
+Watch the logs when you run the app.
+
+---
+
+## 7. Assets
+
+* **GIF:** Record a short (10–15s) clip showing:
+
+  * Typing in name
+  * Clicking button
+  * Popup greeting
+* Save it to `/assets/hello-fluid-frame.gif`
+* Reference in this file:
+
+```markdown
+![Hello Fluid Frame Demo](../assets/hello-fluid-frame.gif)
+```
+
+---
+
+## 8. Takeaways
+
+* `anvil.server.call` is your client → server bridge.
+* Keep UI responsive: disable buttons while waiting.
+* Always match callable names exactly.
+* You now have the skeleton for any input/output pattern.
+
+---