From d416fcd9103ee0494c798575c1a2eb973d468e43 Mon Sep 17 00:00:00 2001
From: Daniel Liden <djliden91@gmail.com>
Date: Thu, 12 Sep 2024 09:27:37 -0500
Subject: [PATCH] adds fasthtml section

---
 notebooks/_toc.yml                            |  10 +-
 .../web_dev/fasthtml/1_introduction.ipynb     | 506 ++++++++++++++++++
 notebooks/web_dev/fasthtml/2_styling.ipynb    | 435 +++++++++++++++
 notebooks/web_dev/fasthtml/3_htmx.ipynb       | 187 +++++++
 notebooks/web_dev/fasthtml/4_databases.ipynb  | 338 ++++++++++++
 notebooks/web_dev/fasthtml/5_forms.ipynb      |  81 +++
 notebooks/web_dev/intro.md                    |   8 +
 7 files changed, 1564 insertions(+), 1 deletion(-)
 create mode 100644 notebooks/web_dev/fasthtml/1_introduction.ipynb
 create mode 100644 notebooks/web_dev/fasthtml/2_styling.ipynb
 create mode 100644 notebooks/web_dev/fasthtml/3_htmx.ipynb
 create mode 100644 notebooks/web_dev/fasthtml/4_databases.ipynb
 create mode 100644 notebooks/web_dev/fasthtml/5_forms.ipynb
 create mode 100644 notebooks/web_dev/intro.md

diff --git a/notebooks/_toc.yml b/notebooks/_toc.yml
index e7c570d..13845f7 100644
--- a/notebooks/_toc.yml
+++ b/notebooks/_toc.yml
@@ -15,4 +15,12 @@ parts:
     - file: ai_training/fine_tuning/5_gemma_2b_axolotl/gemma_2b_axolotl
   - file: ai_training/appendix
     sections:
-    - file: ai_training/fine_tuning/3_tinyllama_instruction_tune/data_preprocessing
\ No newline at end of file
+    - file: ai_training/fine_tuning/3_tinyllama_instruction_tune/data_preprocessing
+- caption: FastHTML
+  chapters:
+  - file: web_dev/FastHTML Tutorial
+    sections:
+    - file: web_dev/fasthtml/1_introduction
+    - file: web_dev/fasthtml/2_styling
+    - file: web_dev/fasthtml/3_htmx
+    - file: web_dev/fasthtml/4_databases
diff --git a/notebooks/web_dev/fasthtml/1_introduction.ipynb b/notebooks/web_dev/fasthtml/1_introduction.ipynb
new file mode 100644
index 0000000..631731b
--- /dev/null
+++ b/notebooks/web_dev/fasthtml/1_introduction.ipynb
@@ -0,0 +1,506 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Introduction\n",
+    "\n",
+    "In this guide, we will develop an intuition for the basic principles and concepts of web development. We will do so using the FastHTML library, which enables us to create websites and web applications using Python. Crucially, it still requires considerable understanding of how web pages and web apps are built and how they work. It won't make it easy to build web pages without understanding HTML/CSS or HTTP requests. But it might mean that there is now a \"Pythonic\" way to learn it and to get started quickly.\n",
+    "\n",
+    "FastHTML is a bit different from other web development frameworks insofar as you can write Python functions to handle server logic without having to write a separate HTML template and Javascript for client-side interactivity. This is because FastHTML is designed to be a Pythonic way to generate HTML content, and it uses htmx for client-side interactivity. This approach is somewhat controversial, as exemplified by this Hacker News exchange with the creator of FastHTML:\n",
+    "\n",
+    "![Hacker News exchange with FastHTML creator](./images/jh_soc_hn.png)\n",
+    "\n",
+    "The key thing to remember here is that we return HTML content directly from our Python functions rather than populating a template and then rendering it.\n",
+    "\n",
+    "The goal of this guide is to start as simply as possible and to add more and more complexity to that simple start, explaining what is happening at each step and mapping the FastHTML code to a broader understanding of web development concepts.\n",
+    "\n",
+    "## A Simple Start\n",
+    "As always...let's start with a Hello, World. In this case, we will develop a web page that says \"Hello, World\" that you can serve and see in your browser."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "@rt(\"/\")\n",
+    "def get():\n",
+    "    return Titled(\"FastHTML\", P(\"Hello, World!\"))\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To see the results, save this as a `.py` file and run it with `python <filename>.py`. You can save a cell as a file with the `%%writefile <filename>.py` magic command. There are a few things happening here that are immediately worth pointing out:\n",
+    "1. The `@rt(\"/\")` decorator tells us the *route* with which the decorated function will be associated. `/` is just the index page or main page.\n",
+    "2. `get()` isn't just an arbitrary function name—it is an HTTP verb or [HTTP request method](hhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). HTTP methods specify the type of action to be performed; `get` means that we want to retrieve some data. Note that FastHTML gives a few different ways of specifying routes and methods. We could have decorated a differently-named function with `@app.get(\"/\")`. The following cell does the same thing; replace `app.py` with its contents and run it again to see."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 18,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#%%writefile app_1.py\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return Titled(\"Hello, World!\")\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To recap what happens: when a user goes to the home page (`/`), a `get()` http request is triggered, which, in this case, calls the `hello()` function, which generates the resulting \"Hello, World\" page.\n",
+    "\n",
+    "But what does \"generates the resulting \"Hello, World\" page actually mean? What FastHTML does is generate the HTML structure for the page. This HTML is then sent back to the user's browser, which renders it as a web page displaying \"Hello, World\". We can actually see this raw HTML using the Starlette `TestClient`. (Starlette is an \"Asynchronous Server Gateway Interface\" or ASGI framework and one of the core components of FastHTML. Don't worry about it for now.)\n",
+    "\n",
+    "Here's how you can see the generated HTML (e.g. in a Jupyter notebook)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 19,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "<!doctype html>\n",
+      "\n",
+      "<html>\n",
+      "  <head>\n",
+      "    <title>Hello, World!</title>\n",
+      "    <meta charset=\"utf-8\">\n",
+      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n",
+      "    <script src=\"https://unpkg.com/htmx.org@next/dist/htmx.min.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/fasthtml-js@main/fasthtml.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script>\n",
+      "    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\">\n",
+      "    <style>:root { --pico-font-size: 100%; }</style>\n",
+      "  </head>\n",
+      "  <body><main class=\"container\"><h1>Hello, World!</h1>\n",
+      "</main>\n",
+      "</body>\n",
+      "</html>\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "from starlette.testclient import TestClient\n",
+    "client = TestClient(app)\n",
+    "r = client.get(\"/\")\n",
+    "print(r.text)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "You'll notice a few things:\n",
+    "- We ended up with the `title` Hello, World (`<title>Hello, World</title>`)\n",
+    "- In the page body, `Hello, World` is wrapped in `h1` tags.\n",
+    "\n",
+    "## Modifying our First Webpage\n",
+    "`Titled` is an FT (FastTags) component that combines a Title and H1 HTML tag. What happens if we use something simpler, like [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)? \n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 22,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#%%writefile app_1.py\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return P(\"Hello, World!\")\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 24,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "<!doctype html>\n",
+      "\n",
+      "<html>\n",
+      "  <head>\n",
+      "    <title>FastHTML page</title>\n",
+      "    <meta charset=\"utf-8\">\n",
+      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n",
+      "    <script src=\"https://unpkg.com/htmx.org@next/dist/htmx.min.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/fasthtml-js@main/fasthtml.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script>\n",
+      "    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\">\n",
+      "    <style>:root { --pico-font-size: 100%; }</style>\n",
+      "  </head>\n",
+      "  <body><p>Hello, World!</p>\n",
+      "</body>\n",
+      "</html>\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "client = TestClient(app)\n",
+    "r = client.get(\"/\")\n",
+    "print(r.text)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "When we make this change, the `title` reverts to the default `FastHTML page` and the Hello, World text is no longer formatted as a header. But let's add the title and formatting back in, *without* using `Titled`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 33,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %%writefile app_1.py\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 34,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "<!doctype html>\n",
+      "\n",
+      "<html>\n",
+      "  <head>\n",
+      "    <title>Hello, World!</title>\n",
+      "    <meta charset=\"utf-8\">\n",
+      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n",
+      "    <script src=\"https://unpkg.com/htmx.org@next/dist/htmx.min.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/fasthtml-js@main/fasthtml.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script>\n",
+      "    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\">\n",
+      "    <style>:root { --pico-font-size: 100%; }</style>\n",
+      "  </head>\n",
+      "  <body><main class=\"container\"><h1>Hello, World!</h1>\n",
+      "</main>\n",
+      "</body>\n",
+      "</html>\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "client = TestClient(app)\n",
+    "r = client.get(\"/\")\n",
+    "print(r.text)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Our `hello` function can return multiple components, some of which might be nested. In this case, we returned a `Title` and the \"Hello, World\" text nested in `main` and `h1` tags. Furthermore, we specified the `container` class for our `main` element. By default, FastHTML uses PicoCSS for styling; the default [PicoCSS container](https://picocss.com/docs/container) format is centered and fixed width. If you omit the `container` specification, you'll see the \"Hello, World\" text pushed to the left margin.\n",
+    "\n",
+    "Let's add one more element: some simple text under the Hello, World header."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 43,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#%%writefile app_1.py\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), cls=\"container\"))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 44,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "<!doctype html>\n",
+      "\n",
+      "<html>\n",
+      "  <head>\n",
+      "    <title>Hello, World!</title>\n",
+      "    <meta charset=\"utf-8\">\n",
+      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n",
+      "    <script src=\"https://unpkg.com/htmx.org@next/dist/htmx.min.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/fasthtml-js@main/fasthtml.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js\"></script>\n",
+      "    <script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script>\n",
+      "    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\">\n",
+      "    <style>:root { --pico-font-size: 100%; }</style>\n",
+      "  </head>\n",
+      "  <body>\n",
+      "    <main class=\"container\"><h1>Hello, World!</h1>\n",
+      "</main>\n",
+      "    <div class=\"container\"><p>Goodbye, World!</p>\n",
+      "</div>\n",
+      "  </body>\n",
+      "</html>\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "client = TestClient(app)\n",
+    "r = client.get(\"/\")\n",
+    "print(r.text)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Adding Another Page\n",
+    "\n",
+    "Right now, our web page is just one page. Let's add another page, and links for navigating back and forth between them.\n",
+    "\n",
+    "***Note**: At this point, I'm going to stop showing the html after each change. But do check it yourself, either with the Starlette TestClient or by viewing the source in your browser!*"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_0.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_1.py\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), cls=\"container\"))\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return(Titled(\"About this Site\",\n",
+    "                  P(\"This is an example site built with FastHTML!\"),\n",
+    "                  A(\"Return Home\", href=\"/\")))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is missing something—but let's take a look before we finish it anyway. Save and run the script again. It will take you to the home page, but there's no way to get to the new \"about\" page. But you can still get there manually: just add \"about\" to the end of the url (e.g. `http://0.0.0.0:5001/about`). By navigating to that URL, you are manually invoking the `get` request we defined on that route.\n",
+    "\n",
+    "Of course, we'd rather have a link on the home page. Let's add it. Just like in the \"about\" route, we use the `A` FT component."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_0.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_1.py\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), A(\"About\", href=\"/about\"), cls=\"container\"))\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return(Titled(\"About this Site\",\n",
+    "                  P(\"This is an example site built with FastHTML!\"),\n",
+    "                  A(\"Return Home\", href=\"/\")))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "One last thing in this part of the tutorial—you might want to inspect the html of *specific components* as you're developing the site. You don't need the TestClient or your browser's developer tools to do this. If you're working in a Jupyter notebook, simply running the cell with a component will print out the HTML. And calling `show()` on that component will actually display the rendered HTML."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 12,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<a href=\"/\">Return Home</a>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "a(('Return Home',),{'href': '/'})"
+      ]
+     },
+     "execution_count": 12,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "A(\"Return Home\", href=\"/\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<a href=\"/\">Return Home</a>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "execution_count": 13,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "show(A(\"Return Home\", href=\"/\"))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Review\n",
+    "This concludes the first part of our FastHTML tutorial. At this point, you should have a very basic understanding of:\n",
+    "1. How to locally serve a simple FastHTML website\n",
+    "2. How to use the Starlette TestCLient to view the HTML generated by http `get` requests on specific routes\n",
+    "3. How FT components map Python to HTML\n",
+    "4. How to add multiple pages and links between them to a site\n",
+    "5. How to preview components in a Jupyter notebook\n",
+    "\n",
+    "There's already a lot you can do at this point. I recommend stopping here and taking some time to experiment. Add more pages, try out different layouts. Pick a few HTML elements from [this list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and figure out how the FT version works (hint: FT components start with capital letters). You might, for example, try adding a `Blockquote` or an `Hr` component.\n",
+    "\n",
+    "In the next section, we will focus on customizing our website. After that, we will start exploring how to add more interesting and sophisticated capabilities using Python code and http methods other than `get`."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/notebooks/web_dev/fasthtml/2_styling.ipynb b/notebooks/web_dev/fasthtml/2_styling.ipynb
new file mode 100644
index 0000000..36fc148
--- /dev/null
+++ b/notebooks/web_dev/fasthtml/2_styling.ipynb
@@ -0,0 +1,435 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Changing the Appearance of FastHTML Applications and Components\n",
+    "\n",
+    "How do you change the appearance of your FastHTML application? There are a few different ways. Be aware: they require you to know at least some CSS. We'll cover the following:\n",
+    "1. PicoCSS: the default CSS framework used by FastHTML\n",
+    "2. Using a different CSS framework\n",
+    "3. Applying inline styles\n",
+    "4. Using your own custom CSS stylesheet\n",
+    "\n",
+    "Understanding there approaches—and where to find more details on CSS—will give you a great deal of control ovet the appearance of your site.\n",
+    "\n",
+    "## CSS Basics\n",
+    "Let's start by answering a few basic questions about CSS and how it affects a webpage. We're not going to provide any examples of CSS outside the context of FastHTML; for a more comprehensive overview, see the [CSS Basics MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)\n",
+    "1. What is CSS? *CSS (Cascading Style Sheets) is a style sheet language that lets you selectively apply style options to HTML elements. With CSS, you specify the types of HTML components you want to be affected, and how you want them displayed on the page.*\n",
+    "2. What is a CSS framework? *A [CSS framework](https://en.wikipedia.org/wiki/CSS_framework) like PicoCSS is an opinionated library of styles/templates that provides pre-defined classes and components to help you quickly build and style web pages.*\n",
+    "3. How is CSS applied? *CSS can be applied in three ways: inline styles (directly in the HTML element), internal styles (within a `<style>` tag in the HTML document), and external styles (linking to an external CSS file).*\n",
+    "\n",
+    "## PicoCSS\n",
+    "PicoCSS is the default CSS framework used by FastHTML. It's the reason the pages we put together in [part 1](./tutorial_1.ipynb) looked like they did and were not just black text on white backgrounds. Let's see what happens when we disable Pico in the app configuration.\n",
+    "\n",
+    "We will write the below file to `app_2.py` and run it with `python app_2.py`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Writing app_2.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_2.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app(pico=False)\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), A(\"About\", href=\"/about\"), cls=\"container\"))\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return(Titled(\"About this Site\",\n",
+    "                  P(\"This is an example site built with FastHTML!\"),\n",
+    "                  A(\"Return Home\", href=\"/\")))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Previously, the site content was more centered on the page, the background was dark, and the text was light in a sans-serif font. Now we see a serif font, white background, black text, without padding on the sides (unless your browser applies any default styling). This shows the extent to which CSS is responsible for the appearance and layout of the site.\n",
+    "\n",
+    "## Applying a Different Framework\n",
+    "\n",
+    "Let's apply a different framework. To do so, we leave `pico=False` and point to another stylesheet in the `hdrs` argument to `fast_app`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_2.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_2.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app(\n",
+    "    pico=False,\n",
+    "    # list not tuple, tuple specified in docs\n",
+    "    hdrs = [\n",
+    "        Link(rel=\"stylesheet\", href=\"https://unpkg.com/sakura.css/css/sakura.css\", type='text/css')\n",
+    "    ]\n",
+    ")\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), A(\"About\", href=\"/about\"), cls=\"container\"))\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return(Titled(\"About this Site\",\n",
+    "                  P(\"This is an example site built with FastHTML!\"),\n",
+    "                  A(\"Return Home\", href=\"/\")))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "And now we end up with a different theme, with centered text and a sans-serif font.\n",
+    "\n",
+    "## Applying a Custom Global Style\n",
+    "\n",
+    "Next, let's remove Sakura and apply a custom global style to the site. We'll do this with a `Style` tag in the `hdrs` argument to `fast_app`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_2.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_2.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app(\n",
+    "    pico=False,\n",
+    "    # list not tuple, tuple specified in docs\n",
+    "    hdrs = [\n",
+    "        Style(\"\"\"\n",
+    "            body {\n",
+    "                font-family: Arial, sans-serif;\n",
+    "                max-width: 800px;\n",
+    "                margin: 0 auto;\n",
+    "                padding: 0 20px;\n",
+    "                background-color: #f0f0f0;\n",
+    "            }\n",
+    "            a {\n",
+    "                color: red;\n",
+    "                text-decoration: none;\n",
+    "            }\n",
+    "            a:hover {\n",
+    "                text-decoration: underline;\n",
+    "            }\n",
+    "        \"\"\")\n",
+    "    ]\n",
+    ")\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), A(\"About\", href=\"/about\"), cls=\"container\"))\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return(Titled(\"About this Site\",\n",
+    "                  P(\"This is an example site built with FastHTML!\"),\n",
+    "                  A(\"Return Home\", href=\"/\")))\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `Style` tag is a global style tag that applies to the entire site. In FastHTML, it takes a string of CSS. We applied a number of style options to the site:\n",
+    "- `body { font-family: Arial, sans-serif; }` sets the font family for the entire site to Arial, sans-serif.\n",
+    "- `max-width: 800px;` sets the maximum width of the site to 800px.\n",
+    "- `margin: 0 auto;` centers the site horizontally.\n",
+    "- `padding: 0 20px;` adds 20px of padding to the left and right of the site.\n",
+    "- `background-color: #f0f0f0;` sets the background color of the site to light gray.\n",
+    "- `a { color: red; }` sets the color of all links to red.\n",
+    "- `a:hover { text-decoration: underline; }` sets the text decoration of all links to underline when hovered over."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Styling Individual Components\n",
+    "\n",
+    "We can style individual components in much the same way we styled the site globally: components can take a `style` argument. Let's go back to the basic application with picoCSS disabled and apply few component-specific styles."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_2.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_2.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app(pico=False)\n",
+    "\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (\n",
+    "        Title(\"Hello, World!\"),\n",
+    "        Main(\n",
+    "            H1(\"Hello, World!\", style=\"color: blue; font-size: 24px;\"),\n",
+    "            cls=\"container\"\n",
+    "        ),\n",
+    "        Div(\n",
+    "            P(\"Goodbye, World!\", style=\"color: green; font-style: italic;\"),\n",
+    "            A(\"About\", href=\"/about\", style=\"color: red;\"),\n",
+    "            cls=\"container\"\n",
+    "        )\n",
+    "    )\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return Titled(\n",
+    "        \"About this Site\",\n",
+    "        P(\"This is an example site built with FastHTML!\", style=\"color: purple; text-decoration: underline;\"),\n",
+    "        A(\"Return Home\", href=\"/\", style=\"color: red;\"),\n",
+    "        style=\"max-width: 800px; margin: 0 auto; padding: 0 20px; background-color: #f0f0f0;\"\n",
+    "    )\n",
+    "\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We applied a handful of different (mismatched, but that's the point) styles to individual components with CSS strings passed to the `style` argument.\n",
+    "\n",
+    "## Using a Custom CSS Stylesheet\n",
+    "Lastly, we can apply a custom CSS stylesheet to the site. To do so, we will:\n",
+    "1. Write a CSS file that contains the styles we want to apply.\n",
+    "2. Link to the CSS file in the `hdrs` argument to `fast_app`.\n",
+    "\n",
+    "Let's write a CSS file that implements the global style we applied earlier:\n",
+    "\n",
+    "```python\n",
+    "Style(\"\"\"\n",
+    "    body {\n",
+    "        font-family: Arial, sans-serif;\n",
+    "        max-width: 800px;\n",
+    "        margin: 0 auto;\n",
+    "        padding: 0 20px;\n",
+    "        background-color: #f0f0f0;\n",
+    "    }\n",
+    "    a {\n",
+    "        color: red;\n",
+    "        text-decoration: none;\n",
+    "    }\n",
+    "    a:hover {\n",
+    "        text-decoration: underline;\n",
+    "    }\n",
+    "\"\"\")\n",
+    "```\n",
+    "\n",
+    "The CSS file, which we will call `style.css`, should look like this:\n",
+    "\n",
+    "```css\n",
+    "body {\n",
+    "    font-family: Arial, sans-serif;\n",
+    "    max-width: 800px;\n",
+    "    margin: 0 auto;\n",
+    "    padding: 0 20px;\n",
+    "    background-color: #f0f0f0;\n",
+    "}\n",
+    "a {\n",
+    "    color: red;\n",
+    "    text-decoration: none;\n",
+    "}\n",
+    "a:hover {\n",
+    "    text-decoration: underline;\n",
+    "}\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {
+    "vscode": {
+     "languageId": "html"
+    }
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Writing style.css\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile style.css\n",
+    "\n",
+    "body {\n",
+    "    font-family: Arial, sans-serif;\n",
+    "    max-width: 800px;\n",
+    "    margin: 0 auto;\n",
+    "    padding: 0 20px;\n",
+    "    background-color: #f0f0f0;\n",
+    "}\n",
+    "a {\n",
+    "    color: red;\n",
+    "    text-decoration: none;\n",
+    "}\n",
+    "a:hover {\n",
+    "    text-decoration: underline;\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Now, we can link to the CSS file in the `hdrs` argument to `fast_app`, just like we did with Sakura—except this time we're pointing to our own custom stylesheet."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_2.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_2.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app(\n",
+    "    pico=False,\n",
+    "    hdrs=[\n",
+    "        Link(rel=\"stylesheet\", href=\"style.css\", type=\"text/css\")\n",
+    "    ]\n",
+    ")\n",
+    "\n",
+    "@app.get(\"/\")\n",
+    "def hello():\n",
+    "    return (Title(\"Hello, World!\"), Main(H1(\"Hello, World!\"), cls=\"container\"),\n",
+    "            Div(P(\"Goodbye, World!\"), A(\"About\", href=\"/about\"), cls=\"container\"))\n",
+    "\n",
+    "@rt(\"/about\")\n",
+    "def get():\n",
+    "    return(Titled(\"About this Site\",\n",
+    "                  P(\"This is an example site built with FastHTML!\"),\n",
+    "                  A(\"Return Home\", href=\"/\")))\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Summary\n",
+    "Now you know a few different ways to change the appearance of your FastHTML application. You can apply a different CSS framework, apply a custom global style, style individual components, or apply a custom CSS stylesheet.\n",
+    "\n",
+    "Spend some time playing with the different options and see how they affect the appearance of your site. [This](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) is a good resource for learning more about CSS and the different properties you can use.\n",
+    "\n",
+    "I recommend the following exercises to build your familiarity with styling FastHTML applications:\n",
+    "1. Search for and apply a different CSS framework to the site.\n",
+    "2. Try combinations of different approaches, such as a custom stylesheet with some inidividual component styles.\n",
+    "3. Pick a site you like and try to roughly approximate its style.\n",
+    "4. Pick a few CSS properties from the MDN CSS Reference and try them out in your own FastHTML application."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/notebooks/web_dev/fasthtml/3_htmx.ipynb b/notebooks/web_dev/fasthtml/3_htmx.ipynb
new file mode 100644
index 0000000..970e42e
--- /dev/null
+++ b/notebooks/web_dev/fasthtml/3_htmx.ipynb
@@ -0,0 +1,187 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# HTMX: Server-Driven Interactivity\n",
+    "\n",
+    "One of the core technologies FastHTML builds on is [htmx](https://htmx.org/). HTMX extends the capabilities of HTML to allow for server-driven interactivity. This is in contrast to client-side interactivity, which is handled by Javascript.\n",
+    "\n",
+    "HTMX gives two main capabilities that we do not get from HTML alone:\n",
+    "1. The ability to trigger any kind of HTTP request from any element on a page\n",
+    "2. The ability to update any element on a page with the response from any request, without having to reload the page\n",
+    "\n",
+    "Traditionally, these capabilities have required web developers to write Javascript to handle page updates. HTMX, especially in the context of FastHTML, allows us to use Python to handle page updates.\n",
+    "\n",
+    "## Add a form to our hello, world app"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_3.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_3.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "def create_greeting_form():\n",
+    "    return Form(\n",
+    "        Input(type=\"text\", name=\"name\", placeholder=\"Enter your name\"),\n",
+    "        Button(\"Submit\", type=\"submit\"),\n",
+    "        hx_post=\"/greet\",\n",
+    "        hx_target=\"#greeting\",\n",
+    "        hx_swap=\"innerHTML\"\n",
+    "    )\n",
+    "\n",
+    "@rt(\"/\")\n",
+    "def get():\n",
+    "    return Titled(\"FastHTML\",\n",
+    "        Div(\n",
+    "            P(\"Hello, World!\"),\n",
+    "            create_greeting_form(),\n",
+    "            Div(id=\"greeting-message\"),\n",
+    "            id=\"greeting\"\n",
+    "        )\n",
+    "    )\n",
+    "\n",
+    "@rt(\"/greet\", methods=[\"POST\"])\n",
+    "def greet(name: str):\n",
+    "    return Div(\n",
+    "        P(f\"Hello, {name}!\"),\n",
+    "        create_greeting_form(),\n",
+    "        Div(id=\"greeting-message\"),\n",
+    "        id=\"greeting\"\n",
+    "    )\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We have updated our simple \"hello, world\" app to include a form that allows the user to enter their name and submit it to the server. The server then replaces \"Hello, World!\" with a Hello to whatever name was submitted. And it does this *without* reloading the entire page.\n",
+    "\n",
+    "There are a few new things here:\n",
+    "1. This is our first use of an example that takes user input, via the [`Form`](https://docs.fastht.ml/api/xtend.html#form) component. If you look at the documentation, you will see that `Form` can take a number of different `hx_*` attributes. These are various HTMX attributes that control the behavior of the form submission.\n",
+    "2. On that note—we used several `hx_*` attributes in our form. In particular:\n",
+    "  - `hx_post` tells HTMX to send an asynchronous POST request when the form is submitted, allowing for partial page updates without a full page reload.\n",
+    "  - `hx_target` tells HTMX to update the element with the id `greeting` with the response from the server.\n",
+    "  - `hx_swap` tells HTMX to replace the contents of the element with the id `greeting` with the response from the server. Specifically, `innerHTML` means that the response from the server will be inserted into the element, replacing whatever was there before.\n",
+    "3. This is the first time we have used a `POST` request. In this case, the request is sent to the server with the form data. The server then returns a response, which is used to update the page. `GET` requests, which we have seen in previous examples, are typically used to retrieve data from the server. `POST` requests are typically used to send data to the server and get back a response."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Add HTMX to arbitrary elements\n",
+    "\n",
+    "One of the benefits of HTMX is that it allows us to add interactivity to arbitrary elements on a page. This is in contrast to HTML alone, which is limited to interactivity that is triggered by form submissions and link clicks and must reload the entire page to update the content of the page.\n",
+    "\n",
+    "Let's demonstrate this by changging the color of \"Hello, World\" to red whenever the user mouses over it."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 15,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_3.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_3.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "@rt(\"/\")\n",
+    "def get():\n",
+    "    return Titled(\"FastHTML\", \n",
+    "        P(\"Hello, World!\", \n",
+    "          hx_get=\"/change-color\", \n",
+    "          hx_trigger=\"mouseenter\",\n",
+    "          hx_swap=\"outerHTML\"\n",
+    "        )\n",
+    "    )\n",
+    "\n",
+    "@rt(\"/change-color\")\n",
+    "def get():\n",
+    "    return P(\"Hello, World!\", \n",
+    "             style=\"color: red;\",\n",
+    "             hx_get=\"/revert-color\",\n",
+    "             hx_trigger=\"mouseleave\",\n",
+    "             hx_swap=\"outerHTML\"\n",
+    "            )\n",
+    "\n",
+    "@rt(\"/revert-color\")\n",
+    "def get():\n",
+    "    return P(\"Hello, World!\", \n",
+    "             hx_get=\"/change-color\", \n",
+    "             hx_trigger=\"mouseenter\",\n",
+    "             hx_swap=\"outerHTML\"\n",
+    "            )\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "What is happening here?\n",
+    "1. When the user mouses over \"Hello, World!\", the server sends a request to `/change-color`.\n",
+    "2. The server returns a response with the updated content, which includes the `hx_get` attribute. This tells HTMX to send a request to `/revert-color` when the user mouses out of the element.\n",
+    "3. The server returns a response with the updated content, which includes the `hx_get` attribute. This tells HTMX to send a request to `/change-color` when the user mouses over the element again.\n",
+    "4. This cycle repeats indefinitely, causing the color of the element to change whenever the user mouses over it and revert to the original color whenever the user mouses out of it.\n",
+    "\n",
+    "You'll notice that much of the behavior of HTMX attributes is determined by the `hx_trigger` and `hx_swap` attributes. Knowing where to look for the available options is important! [Here](https://html.spec.whatwg.org/multipage/indices.html#events-2) is one source of events that can be used as triggers, and [here](https://htmx.org/docs/#swapping) are the available options for swapping.\n",
+    "\n",
+    "## Summary\n",
+    "\n",
+    "This has been a *brief* introduction to HTMX in FastHTML. We have only scratched the surface of what is possible with HTMX. For more information, please see the [HTMX documentation](https://htmx.org/docs/)."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/notebooks/web_dev/fasthtml/4_databases.ipynb b/notebooks/web_dev/fasthtml/4_databases.ipynb
new file mode 100644
index 0000000..310e167
--- /dev/null
+++ b/notebooks/web_dev/fasthtml/4_databases.ipynb
@@ -0,0 +1,338 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Using a Database\n",
+    "\n",
+    "App development often involves the use of a database. FastHTML supports whatever database you want to use, but is currently configured to use SQLite by default. This tutorial will briefly cover how to use a SQLite database with FastHTML.\n",
+    "\n",
+    "Note that, at the time of writing, database support and opinionated workflows are largely undocumented, so the material here is drawn from a variety of examples and personal experience.\n",
+    "\n",
+    "## What do we use a database for?\n",
+    "Databases in web applications can serve a variety of purposes. They can be used to store user data, application data, or any other data that needs to be persisted between requests."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "You can create a database by passing a `db_file` argument to the `fast_app` function: if you do so, `fast_app` will return database tables and dataclasses. Thus functionality is marked as \"experimental\" so we will stick to setting up databases separately for now. See [this example](https://github.com/AnswerDotAI/fasthtml/blob/main/examples/first_app.py#L4) for more details.\n",
+    "\n",
+    "By default, FastHTML uses SQLite and examples use the [`fastlite`](https://answerdotai.github.io/fastlite/) library to create and manage the database. FastLite supports the [MiniDataAPI spec](https://github.com/AnswerDotAI/fasthtml/blob/736f014589aa0549bd371e1f833e74754cdf4779/nbs/explains/minidataapi.ipynb).\n",
+    "\n",
+    "FastLite only supports SQLite. [FastSQL](https://github.com/AnswerDotAI/fastsql), also by answer.ai, supports a wider range of databases. You can also just use e.g. SQLAlchemy or any other database library; there does not appear to be an inherent requirement to use FastLite.\n",
+    "\n",
+    "## FastLite Syntax\n",
+    "Let's briefly go over the FastLite syntax. For more, again, see the [MiniDataAPI spec](https://github.com/AnswerDotAI/fasthtml/blob/736f014589aa0549bd371e1f833e74754cdf4779/nbs/explains/minidataapi.ipynb) and the [FastLite documentation](https://answerdotai.github.io/fastlite/).\n",
+    "\n",
+    "### Create a database and table"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "In the next cell, we will:\n",
+    "1. Create a SQLite database\n",
+    "2. Create a table called \"users\"\n",
+    "3. Create a dataclass for type hinting\n",
+    "\n",
+    "See the comments for more details."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from fasthtml.common import *\n",
+    "\n",
+    "# creates the SQLite database in the data/example.db file\n",
+    "db = database('data/example.db')\n",
+    "\n",
+    "# make a table called \"users\"\n",
+    "users = db.t.users\n",
+    "\n",
+    "# create the table if it doesn't exist\n",
+    "if users not in db.t:\n",
+    "    # create the table with the following columns:\n",
+    "    # - id: int\n",
+    "    # - name: str\n",
+    "    # - email: str\n",
+    "    # - pk: 'id' (primary key)\n",
+    "    users.create(id=int, name=str, email=str, pk='id')\n",
+    "\n",
+    "# create a dataclass for type hinting\n",
+    "User = users.dataclass()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Add data to the table\n",
+    "\n",
+    "Next, we will create a few example users and add them to the database\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 16,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "Users(id=3, name='Dan L', email='dan@doe.com')"
+      ]
+     },
+     "execution_count": 16,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "users.insert(User(name=\"John Doe\", email=\"john@doe.com\"))\n",
+    "users.insert(User(name=\"Jane Doe\", email=\"jane@doe.com\"))\n",
+    "users.insert(User(name=\"Dan L\", email=\"dan@doe.com\"))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Retrieve data from the table\n",
+    "\n",
+    "We can see the contents of the table by calling the table object:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 17,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[Users(id=1, name='John Doe', email='john@doe.com'),\n",
+       " Users(id=2, name='Jane Doe', email='jane@doe.com'),\n",
+       " Users(id=3, name='Dan L', email='dan@doe.com')]"
+      ]
+     },
+     "execution_count": 17,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "users()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "And we can retrieve a specific entry using the primary key in brackets:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "Users(id=2, name='Jane Doe', email='jane@doe.com')"
+      ]
+     },
+     "execution_count": 19,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "users[2]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Deleting and Updating Data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 24,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[Users(id=1, name='John Doe', email='john@doe.com'),\n",
+       " Users(id=3, name='David L.', email='dan@doe.com')]"
+      ]
+     },
+     "execution_count": 24,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Delete a user\n",
+    "users.delete(2)\n",
+    "\n",
+    "# Update a user\n",
+    "users.update({'id': 3, 'name': 'David L.'})\n",
+    "\n",
+    "# View the updated table\n",
+    "users()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This covers the basics of using a database with FastHTML. See the [FastLite documentation](https://answerdotai.github.io/fastlite/) for more details. You should familiarize yourself with at least the following methods:\n",
+    "- create\n",
+    "- transform\n",
+    "- transform_sql\n",
+    "- update\n",
+    "- insert\n",
+    "- upsert\n",
+    "- lookup"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Run arbitrary SQL queries\n",
+    "\n",
+    "You can run arbitrary SQL queries and get back the results using the `db.q` method:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 23,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[{'id': 1, 'name': 'John Doe', 'email': 'john@doe.com'},\n",
+       " {'id': 2, 'name': 'Jane Doe', 'email': 'jane@doe.com'},\n",
+       " {'id': 3, 'name': 'Dan L', 'email': 'dan@doe.com'}]"
+      ]
+     },
+     "execution_count": 23,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "db.q(\"SELECT * FROM users;\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Rendering Tables with Custom Components\n",
+    "\n",
+    "https://docs.fastht.ml/tutorials/e2e.html#drawing-rooms\n",
+    "\n",
+    "It can be useful to specify how we want tables/their corresponding dataclasses to be rendered. We can do this by patching the dataclass to add an `__ft__` method.\n",
+    "\n",
+    "This is one of the clearest benefits of using a FastLite/MiniDataAPI-based approach to database management. It may not be as straightforward to control the rendering of data in a more custom database management system."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 25,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@patch\n",
+    "def __ft__(self:User):\n",
+    "    return Div(f\"Name: {self.name}, Email: {self.email}\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Now, when we refer to a user in the context of a FastHTML component, it will be rendered using our custom component:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 36,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<html>\n",
+       "  <div>Name: John Doe, Email: john@doe.com</div>\n",
+       "</html>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "html((Users(id=1, name='John Doe', email='john@doe.com'),),{})"
+      ]
+     },
+     "execution_count": 36,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Html(users[1])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We could also define a render function and pass it to `fast_app` as shown [here](https://docs.fastht.ml/tutorials/e2e.html#drawing-rooms). The approach in that example would allow us to initialize a database with a \"default\" table, dataclass, and render function. For now, I prefer the separate approach as it enables greater clarity and flexibility."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Summary\n",
+    "\n",
+    "This quick introduction to using databases with FastHTML has equipped you with the basics of using SQLlite databases via FastLite in your FastHTML app."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/notebooks/web_dev/fasthtml/5_forms.ipynb b/notebooks/web_dev/fasthtml/5_forms.ipynb
new file mode 100644
index 0000000..d5c93ac
--- /dev/null
+++ b/notebooks/web_dev/fasthtml/5_forms.ipynb
@@ -0,0 +1,81 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Forms\n",
+    "\n",
+    "Forms are a way to collect user input and send it to the server to be processed. Let's start with an example of collecting user input *without* a form, and then we'll show what changes, and what benefits we get, when we use a form."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Overwriting app_5.py\n"
+     ]
+    }
+   ],
+   "source": [
+    "%%writefile app_5.py\n",
+    "\n",
+    "from fasthtml.common import *\n",
+    "\n",
+    "app, rt = fast_app()\n",
+    "\n",
+    "@rt(\"/\")\n",
+    "def get():\n",
+    "    return Titled(\"FastHTML\",\n",
+    "        Div(\n",
+    "            P(\"Please enter your name:\"),\n",
+    "            Input(type=\"text\", name=\"name\", placeholder=\"Your name\"),\n",
+    "            Button(\"Submit\", \n",
+    "                   hx_post=\"/greet\", \n",
+    "                   hx_target=\"#greeting\",\n",
+    "                   hx_swap=\"innerHTML\",\n",
+    "                   hx_include=\"[name='name']\"),\n",
+    "            Div(id=\"greeting\")\n",
+    "        )\n",
+    "    )\n",
+    "\n",
+    "@rt(\"/greet\")\n",
+    "def post(name: str):\n",
+    "    return P(f\"Hello, {name}\")\n",
+    "\n",
+    "serve()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/notebooks/web_dev/intro.md b/notebooks/web_dev/intro.md
new file mode 100644
index 0000000..954911f
--- /dev/null
+++ b/notebooks/web_dev/intro.md
@@ -0,0 +1,8 @@
+# Web Development
+
+I am not a web developer by any stretch of the imagination. However, I have found that having some basic ability to build working sites and web applications, even if rough around the edges, is extremely useful. It makes it much easier to share my work and to prototype applications using LLMs. The latter point is especially important, as I have found that the *interface* to an LLM applications is often at least as important as the model itself.
+
+Lately, I have mostly focused on FastHTML and have written a series of short guides on how to use it.
+
+```{tableofcontents}
+```
\ No newline at end of file