diff --git a/_components/Footer.tsx b/_components/Footer.tsx
index 02c483871..d8c087a0f 100644
--- a/_components/Footer.tsx
+++ b/_components/Footer.tsx
@@ -29,7 +29,7 @@ const data = [
       },
       {
         label: "Examples",
-        href: "/examples",
+        href: "/learn/examples",
       },
       {
         label: "Standard Library",
diff --git a/_components/Header.tsx b/_components/Header.tsx
index bfd323477..b178abe60 100644
--- a/_components/Header.tsx
+++ b/_components/Header.tsx
@@ -50,16 +50,16 @@ export default function Header({
           />
           <HeaderItem
             url={url}
-            activeOn="/examples"
-            href="/examples"
-            name="Examples"
+            activeOn="/api"
+            href="/api/deno"
+            name="API reference"
             hideOnMobile
           />
           <HeaderItem
             url={url}
-            activeOn="/api"
-            href="/api/deno"
-            name="API reference"
+            activeOn="/learn"
+            href="/learn"
+            name="Learn"
             hideOnMobile
           />
           <span class="hidden xl:inline-block text-foreground-secondary mx-2">
diff --git a/_config.ts b/_config.ts
index 6ae98cb66..5540ab055 100644
--- a/_config.ts
+++ b/_config.ts
@@ -127,7 +127,7 @@ site.use(
 );
 site.use(
   esbuild({
-    extensions: [".client.ts"],
+    extensions: [".client.ts", ".client.js"],
     options: {
       minify: false,
       splitting: true,
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index f0e403af6..a792fe48f 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -1,18 +1,14 @@
-import ansiRegex from "npm:ansi-regex";
 import Logo from "../_components/Logo.tsx";
-import CLI_REFERENCE from "../runtime/reference/cli/_commands_reference.json" with {
-  type: "json",
-};
 import {
   Sidebar as Sidebar_,
   SidebarItem,
   TableOfContentsItem as TableOfContentsItem_,
 } from "../types.ts";
 import { Breadcrumbs } from "../_components/Breadcrumbs.tsx";
-import { HeaderAnchor } from "../_components/HeaderAnchor.tsx";
 import { NavigationButton } from "../_components/NavigationButton.tsx";
 import { TableOfContentsItem } from "../_components/TableOfContentsItem.tsx";
 import { TableOfContentsItemMobile } from "../_components/TableOfContentsItemMobile.tsx";
+import renderCommand from "./renderCommand.tsx";
 
 export const layout = "layout.tsx";
 
@@ -67,6 +63,8 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
     props.toc = toc.concat(...props.toc);
   }
 
+  let isLearnHub = props.url.includes("learn");
+
   return (
     <>
       <aside
@@ -118,13 +116,16 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
         >
           <div class="flex-grow px-4 sm:px-5 md:px-6 max-w-full">
             <article class="max-w-[66ch] mx-auto">
-              <Breadcrumbs
-                title={props.title!}
-                sidebar={sidebar}
-                url={props.url}
-                sectionTitle={props.sectionTitle!}
-                sectionHref={props.sectionHref!}
-              />
+              {!isLearnHub && (
+                <Breadcrumbs
+                  title={props.title!}
+                  sidebar={sidebar}
+                  url={props.url}
+                  sectionTitle={props.sectionTitle!}
+                  sectionHref={props.sectionHref!}
+                />
+              )}
+
               {props.toc && props.toc.length > 0 && (
                 <details class="block xl:hidden my-4 bg-background-secondary rounded-md group">
                   <summary class="px-4 py-2 group-open:border-b border-foreground-tertiary">
@@ -184,18 +185,22 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
           </div>
         </main>
 
-        <aside class="hidden xl:block pb-8 pr-8 col-span-2">
-          <div
-            class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
-            id="toc"
-          >
-            <ul class="border-l border-foreground-tertiary dark:border-background-tertiary py-2 pl-2 relative">
-              {(props.toc as TableOfContentsItem_[]).map((item) => (
-                <TableOfContentsItem item={item} />
-              ))}
-            </ul>
-          </div>
-        </aside>
+        {(props.toc as TableOfContentsItem_[]).length > 0 &&
+          (
+            <aside class="hidden xl:block pb-8 pr-8 col-span-2">
+              <div
+                class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
+                id="toc"
+              >
+                <ul class="border-l border-foreground-tertiary dark:border-background-tertiary py-2 pl-2 relative">
+                  {(props.toc as TableOfContentsItem_[]).map((item) => (
+                    <TableOfContentsItem item={item} />
+                  ))}
+                </ul>
+              </div>
+            </aside>
+          )}
+
         <div class="xl:col-span-full">
           <props.comp.Footer />
         </div>
@@ -203,195 +208,3 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
     </>
   );
 }
-
-const ANSI_RE = ansiRegex();
-const SUBSEQUENT_ANSI_RE = new RegExp(
-  `(?:${ANSI_RE.source})(?:${ANSI_RE.source})`,
-  "g",
-);
-const ENCAPSULATED_ANSI_RE = new RegExp(
-  `(${ANSI_RE.source})(.+?)(${ANSI_RE.source})`,
-  "g",
-);
-const START_AND_END_ANSI_RE = new RegExp(
-  `^(?:${ANSI_RE.source}).+?(?:${ANSI_RE.source})$`,
-);
-const SUBSEQUENT_ENCAPSULATED_ANSI_RE = new RegExp(
-  `${ENCAPSULATED_ANSI_RE.source}( ?)${ENCAPSULATED_ANSI_RE.source}`,
-  "g",
-);
-
-const FLAGS_RE = /[^`]--\S+/g;
-function flagsToInlineCode(text: string): string {
-  return text.replaceAll(FLAGS_RE, "`$&`");
-}
-
-function renderCommand(
-  commandName: string,
-  helpers: Lume.Helpers,
-): { rendered: any; toc: TableOfContentsItem_[] } {
-  const command = CLI_REFERENCE.subcommands.find((command) =>
-    command.name === commandName
-  )!;
-
-  const toc: TableOfContentsItem_[] = [];
-
-  let about = command.about!.replaceAll(
-    SUBSEQUENT_ENCAPSULATED_ANSI_RE,
-    function (
-      _,
-      _opening1,
-      text1,
-      _closing1,
-      space,
-      opening2,
-      text2,
-      closing2,
-    ) {
-      return `${opening2}${text1}${space}${text2}${closing2}`;
-    },
-  ).replaceAll(SUBSEQUENT_ANSI_RE, "");
-  let aboutLines = about.split("\n");
-  const aboutLinesReadMoreIndex = aboutLines.findLastIndex((line) =>
-    line.toLowerCase().replaceAll(ANSI_RE, "").trim().startsWith("read more:")
-  );
-  if (aboutLinesReadMoreIndex !== -1) {
-    aboutLines = aboutLines.slice(0, aboutLinesReadMoreIndex);
-  }
-
-  about = aboutLines.join("\n").replaceAll(
-    ENCAPSULATED_ANSI_RE,
-    (_, opening, text, _closing, offset, string) => {
-      if (opening === "\u001b[32m") { // green, used as heading
-        return `### ${text}`;
-      } else if (
-        opening === "\u001b[38;5;245m" || opening === "\u001b[36m" ||
-        opening === "\u001b[1m" || opening === "\u001b[22m"
-      ) { // gray and cyan used for code and snippets, and we treat yellow and bold as well as such
-        const lines = string.split("\n");
-        let line = "";
-
-        while (offset > 0) {
-          line = lines.shift();
-          offset -= line.length;
-        }
-
-        if (START_AND_END_ANSI_RE.test(line.trim())) {
-          return "\n```\n" + text + "\n```\n\n";
-        } else {
-          return "`" + text + "`";
-        }
-      } else {
-        return text;
-      }
-    },
-  );
-
-  const args = [];
-  const options: Record<string, any> = {};
-
-  for (const arg of command.args) {
-    if (arg.help_heading === "Unstable options") {
-      continue;
-    }
-
-    if (arg.long) {
-      options[arg.help_heading ?? "Options"] ??= [];
-      options[arg.help_heading ?? "Options"].push(arg);
-    } else {
-      args.push(arg);
-    }
-  }
-
-  const rendered = (
-    <div>
-      <div class="p-4 bg-stone-100 dark:bg-transparent rounded border border-gray-300 dark:border-background-tertiary mt-6 mb-6 relative">
-        <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
-          Command line usage
-        </h3>
-        <div>
-          <pre class="!mb-0 !px-3 !py-2">
-            <code>{command.usage.replaceAll(ANSI_RE, "").slice("usage: ".length)}</code>
-          </pre>
-        </div>
-      </div>
-
-      <div dangerouslySetInnerHTML={{ __html: helpers.md(about) }} />
-      <br />
-
-      {Object.entries(options).map(([heading, flags]) => {
-        const id = heading.toLowerCase().replace(/\s/g, "-");
-
-        const renderedFlags = flags.toSorted((a, b) =>
-          a.name.localeCompare(b.name)
-        ).map((flag) => renderOption(id, flag, helpers));
-
-        toc.push({
-          text: heading,
-          slug: id,
-          children: [],
-        });
-
-        return (
-          <>
-            <h2 id={id}>
-              {heading} <HeaderAnchor id={id} />
-            </h2>
-            {renderedFlags}
-          </>
-        );
-      })}
-    </div>
-  );
-
-  return {
-    rendered,
-    toc,
-  };
-}
-
-function renderOption(group: string, arg, helpers: Lume.Helpers) {
-  const id = `${group}-${arg.name}`;
-
-  let docsLink = null;
-  let help = arg.help.replaceAll(ANSI_RE, "");
-  const helpLines = help.split("\n");
-  const helpLinesDocsIndex = helpLines.findLastIndex((line) =>
-    line.toLowerCase()
-      .trim()
-      .startsWith("docs:")
-  );
-  if (helpLinesDocsIndex !== -1) {
-    help = helpLines.slice(0, helpLinesDocsIndex).join("\n");
-    docsLink = helpLines[helpLinesDocsIndex].trim().slice("docs:".length);
-  }
-
-  return (
-    <>
-      <h3 id={id}>
-        <code>
-          {docsLink
-            ? <a href={docsLink}>{"--" + arg.name}</a>
-            : ("--" + arg.name)}
-        </code>{" "}
-        <HeaderAnchor id={id} />
-      </h3>
-      {arg.short && (
-        <p>
-          Short flag: <code>-{arg.short}</code>
-        </p>
-      )}
-      {arg.help && (
-        <p
-          class="block !whitespace-pre-line"
-          dangerouslySetInnerHTML={{
-            __html: helpers.md(
-              flagsToInlineCode(help) +
-                ((help.endsWith(".") || help.endsWith("]")) ? "" : "."),
-            ),
-          }}
-        />
-      )}
-    </>
-  );
-}
diff --git a/_includes/layout.tsx b/_includes/layout.tsx
index ee4bfe4ee..745d391ea 100644
--- a/_includes/layout.tsx
+++ b/_includes/layout.tsx
@@ -1,3 +1,5 @@
+import Header from "../_components/Header.tsx";
+
 export default function Layout(props: Lume.Data) {
   const reference = props.url.startsWith("/api");
   const description = props.description ||
@@ -70,6 +72,7 @@ export default function Layout(props: Lume.Data) {
         <script type="module" src="/search.client.js"></script>
         <script type="module" src="/tabs.client.js"></script>
         <script type="module" src="/feedback.client.js"></script>
+        <script type="module" src="/learn_filter.client.js"></script>
         <script
           async
           src="https://www.googletagmanager.com/gtm.js?id=GTM-5B5TH8ZJ"
@@ -99,7 +102,7 @@ export default function Layout(props: Lume.Data) {
         >
           Skip to main content <span aria-hidden="true">-&gt;</span>
         </a>
-        <props.comp.Header url={props.url} hasSidebar={!!props.sidebar} />
+        <Header url={props.url} hasSidebar={!!props.sidebar} />
         {props.children}
       </body>
     </html>
diff --git a/_includes/raw_with_sidebar.tsx b/_includes/raw_with_sidebar.tsx
new file mode 100644
index 000000000..7d454d89d
--- /dev/null
+++ b/_includes/raw_with_sidebar.tsx
@@ -0,0 +1,122 @@
+import Logo from "../_components/Logo.tsx";
+import { Sidebar as Sidebar_, SidebarItem } from "../types.ts";
+import { NavigationButton } from "../_components/NavigationButton.tsx";
+import renderCommand from "./renderCommand.tsx";
+
+export const layout = "layout.tsx";
+
+export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
+  const sidebar = props.sidebar as Sidebar_;
+  const file = props.page.sourcePath;
+  if (sidebar === undefined) {
+    throw new Error("Missing sidebar for " + props.url);
+  }
+
+  function walk(
+    sidebarItems: SidebarItem[],
+  ): [SidebarItem[], number] | undefined {
+    for (let i = 0; i < sidebarItems.length; i++) {
+      const sidebarItem = sidebarItems[i];
+      if (typeof sidebarItem === "string") {
+        const data = props.search.data(sidebarItem)!;
+        if (!data) {
+          throw new Error(`No data found for ${sidebarItem}`);
+        }
+
+        if (data.url == props.url) {
+          return [sidebarItems, i];
+        }
+      } else if ("id" in sidebarItem && sidebarItem.id === props.url) {
+        return [sidebarItems, i];
+      } else if ("items" in sidebarItem) {
+        const results = walk(sidebarItem.items);
+        if (results) {
+          return results;
+        }
+      }
+    }
+  }
+
+  let parentNavigation: SidebarItem[] | undefined = undefined;
+  let index: number | undefined = undefined;
+  for (const sidebarElement of sidebar) {
+    const items = walk(sidebarElement.items);
+
+    if (items) {
+      [parentNavigation, index] = items;
+      break;
+    }
+  }
+
+  let renderedCommand = null;
+
+  if (props.command) {
+    const { rendered, toc } = renderCommand(props.command, helpers);
+    renderedCommand = rendered;
+    props.toc = toc.concat(...props.toc);
+  }
+
+  const checkIsHub = /^\/learn\/$/;
+  const isLearnHub = checkIsHub.test(props.url);
+
+  return (
+    <>
+      <aside
+        className={`flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform ${
+          isLearnHub && "xl:hidden"
+        }`}
+        id="sidebar"
+        data-open="false"
+      >
+        <div class="xl:hidden p-4 shadow-sm flex justify-between h-16">
+          <a class="flex items-center gap-3 mr-6" href="/">
+            <Logo />
+          </a>
+          <button
+            type="button"
+            aria-label="Close navigation bar"
+            id="sidebar-close"
+          >
+            <svg
+              viewBox="0 0 15 15"
+              width="16"
+              height="16"
+              class="text-foreground-secondary"
+            >
+              <g stroke="currentColor" stroke-width="1.2">
+                <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path>
+              </g>
+            </svg>
+          </button>
+        </div>
+        <props.comp.Sidebar
+          sidebar={sidebar}
+          search={props.search}
+          url={props.url}
+          headerPath={props.headerPath!}
+        />
+      </aside>
+      <div
+        class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
+        id="sidebar-cover"
+        data-open="false"
+      >
+      </div>
+      <div
+        class="absolute top-0 bottom-0 left-0 right-0 xl:left-74 overflow-y-auto xl:grid xl:grid-cols-7 xl:gap-8 max-w-screen-2xl mx-auto"
+        style={{ scrollbarGutter: "stable" }}
+      >
+        <div
+          class="absolute top-16 bottom-0 left-0 right-0 overflow-y-auto"
+          style={{ scrollbarGutter: "stable" }}
+        >
+          {props.children}
+          {props.comp.Feedback({ file })}
+          <div class="xl:col-span-full mt-4">
+            <props.comp.Footer />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/_includes/renderCommand.tsx b/_includes/renderCommand.tsx
new file mode 100644
index 000000000..81ae54435
--- /dev/null
+++ b/_includes/renderCommand.tsx
@@ -0,0 +1,214 @@
+import { TableOfContentsItem as TableOfContentsItem_ } from "../types.ts";
+import ansiRegex from "npm:ansi-regex";
+import { HeaderAnchor } from "../_components/HeaderAnchor.tsx";
+import CLI_REFERENCE from "../runtime/reference/cli/_commands_reference.json" with {
+  type: "json",
+};
+import { VNode } from "npm:preact";
+
+type ArgType = {
+  name: string;
+  help: string;
+  short:
+    | string
+    | number
+    | bigint
+    | boolean
+    | object
+    | VNode<any>
+    | null
+    | undefined;
+};
+
+const ANSI_RE = ansiRegex();
+const SUBSEQUENT_ANSI_RE = new RegExp(
+  `(?:${ANSI_RE.source})(?:${ANSI_RE.source})`,
+  "g",
+);
+const ENCAPSULATED_ANSI_RE = new RegExp(
+  `(${ANSI_RE.source})(.+?)(${ANSI_RE.source})`,
+  "g",
+);
+const START_AND_END_ANSI_RE = new RegExp(
+  `^(?:${ANSI_RE.source}).+?(?:${ANSI_RE.source})$`,
+);
+const SUBSEQUENT_ENCAPSULATED_ANSI_RE = new RegExp(
+  `${ENCAPSULATED_ANSI_RE.source}( ?)${ENCAPSULATED_ANSI_RE.source}`,
+  "g",
+);
+
+const FLAGS_RE = /[^`]--\S+/g;
+function flagsToInlineCode(text: string): string {
+  return text.replaceAll(FLAGS_RE, "`$&`");
+}
+
+export default function renderCommand(
+  commandName: string,
+  helpers: Lume.Helpers,
+): { rendered: any; toc: TableOfContentsItem_[] } {
+  const command = CLI_REFERENCE.subcommands.find((command) =>
+    command.name === commandName
+  )!;
+
+  const toc: TableOfContentsItem_[] = [];
+
+  let about = command.about!.replaceAll(
+    SUBSEQUENT_ENCAPSULATED_ANSI_RE,
+    function (
+      _,
+      _opening1,
+      text1,
+      _closing1,
+      space,
+      opening2,
+      text2,
+      closing2,
+    ) {
+      return `${opening2}${text1}${space}${text2}${closing2}`;
+    },
+  ).replaceAll(SUBSEQUENT_ANSI_RE, "");
+  let aboutLines = about.split("\n");
+  const aboutLinesReadMoreIndex = aboutLines.findLastIndex((line) =>
+    line.toLowerCase().replaceAll(ANSI_RE, "").trim().startsWith("read more:")
+  );
+  if (aboutLinesReadMoreIndex !== -1) {
+    aboutLines = aboutLines.slice(0, aboutLinesReadMoreIndex);
+  }
+
+  about = aboutLines.join("\n").replaceAll(
+    ENCAPSULATED_ANSI_RE,
+    (_, opening, text, _closing, offset, string) => {
+      if (opening === "\u001b[32m") { // green, used as heading
+        return `### ${text}`;
+      } else if (
+        opening === "\u001b[38;5;245m" || opening === "\u001b[36m" ||
+        opening === "\u001b[1m" || opening === "\u001b[22m"
+      ) { // gray and cyan used for code and snippets, and we treat yellow and bold as well as such
+        const lines = string.split("\n");
+        let line = "";
+
+        while (offset > 0) {
+          line = lines.shift();
+          offset -= line.length;
+        }
+
+        if (START_AND_END_ANSI_RE.test(line.trim())) {
+          return "\n```\n" + text + "\n```\n\n";
+        } else {
+          return "`" + text + "`";
+        }
+      } else {
+        return text;
+      }
+    },
+  );
+
+  const args = [];
+  const options: Record<string, ArgType[]> = {};
+
+  for (const arg of command.args) {
+    if (arg.help_heading === "Unstable options") {
+      continue;
+    }
+
+    if (arg.long) {
+      const key = arg.help_heading ?? "Options";
+      options[key] ??= [];
+      options[key].push(arg);
+    } else {
+      args.push(arg);
+    }
+  }
+
+  const rendered = (
+    <div>
+      <div class="p-4 bg-stone-100 dark:bg-transparent rounded border border-gray-300 dark:border-background-tertiary mt-6 mb-6 relative">
+        <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
+          Command line usage
+        </h3>
+        <div>
+          <pre class="!mb-0 !px-3 !py-2">
+              <code>{command.usage.replaceAll(ANSI_RE, "").slice("usage: ".length)}</code>
+          </pre>
+        </div>
+      </div>
+
+      <div dangerouslySetInnerHTML={{ __html: helpers.md(about) }} />
+      <br />
+
+      {Object.entries(options).map(([heading, flags]) => {
+        const id = heading.toLowerCase().replace(/\s/g, "-");
+
+        const renderedFlags = flags.toSorted((a: ArgType, b: ArgType) =>
+          a.name.localeCompare(b.name)
+        ).map((flag: ArgType) => renderOption(id, flag, helpers));
+
+        toc.push({
+          text: heading,
+          slug: id,
+          children: [],
+        });
+
+        return (
+          <>
+            <h2 id={id}>
+              {heading} <HeaderAnchor id={id} />
+            </h2>
+            {renderedFlags}
+          </>
+        );
+      })}
+    </div>
+  );
+
+  return {
+    rendered,
+    toc,
+  };
+}
+
+function renderOption(group: string, arg: ArgType, helpers: Lume.Helpers) {
+  const id = `${group}-${arg.name}`;
+
+  let docsLink = null;
+  let help = arg.help.replaceAll(ANSI_RE, "");
+  const helpLines = help.split("\n");
+  const helpLinesDocsIndex = helpLines.findLastIndex((line) =>
+    line.toLowerCase()
+      .trim()
+      .startsWith("docs:")
+  );
+  if (helpLinesDocsIndex !== -1) {
+    help = helpLines.slice(0, helpLinesDocsIndex).join("\n");
+    docsLink = helpLines[helpLinesDocsIndex].trim().slice("docs:".length);
+  }
+
+  return (
+    <>
+      <h3 id={id}>
+        <code>
+          {docsLink
+            ? <a href={docsLink}>{"--" + arg.name}</a>
+            : ("--" + arg.name)}
+        </code>{" "}
+        <HeaderAnchor id={id} />
+      </h3>
+      {arg.short && (
+        <p>
+          Short flag: <code>-{arg.short}</code>
+        </p>
+      )}
+      {arg.help && (
+        <p
+          class="block !whitespace-pre-line"
+          dangerouslySetInnerHTML={{
+            __html: helpers.md(
+              flagsToInlineCode(help) +
+                ((help.endsWith(".") || help.endsWith("]")) ? "" : "."),
+            ),
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/deno.lock b/deno.lock
index 314842bfe..b54a1a1f6 100644
--- a/deno.lock
+++ b/deno.lock
@@ -40,6 +40,12 @@
     "jsr:@std/yaml@1.0.5": "1.0.5",
     "jsr:@std/yaml@^1.0.5": "1.0.5",
     "npm:@js-temporal/polyfill@0.4.4": "0.4.4",
+    "npm:@supabase/auth-js@2.65.1": "2.65.1",
+    "npm:@supabase/functions-js@2.4.3": "2.4.3",
+    "npm:@supabase/node-fetch@2.6.15": "2.6.15",
+    "npm:@supabase/postgrest-js@1.16.3": "1.16.3",
+    "npm:@supabase/realtime-js@2.10.7": "2.10.7",
+    "npm:@supabase/storage-js@2.7.1": "2.7.1",
     "npm:@types/estree@1.0.6": "1.0.6",
     "npm:@types/node@*": "22.5.4",
     "npm:ansi-regex@*": "6.1.0",
@@ -254,6 +260,45 @@
     "@pkgjs/parseargs@0.11.0": {
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="
     },
+    "@supabase/auth-js@2.65.1": {
+      "integrity": "sha512-IA7i2Xq2SWNCNMKxwmPlHafBQda0qtnFr8QnyyBr+KaSxoXXqEzFCnQ1dGTy6bsZjVBgXu++o3qrDypTspaAPw==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
+    "@supabase/functions-js@2.4.3": {
+      "integrity": "sha512-sOLXy+mWRyu4LLv1onYydq+10mNRQ4rzqQxNhbrKLTLTcdcmS9hbWif0bGz/NavmiQfPs4ZcmQJp4WqOXlR4AQ==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
+    "@supabase/node-fetch@2.6.15": {
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "dependencies": [
+        "whatwg-url@5.0.0"
+      ]
+    },
+    "@supabase/postgrest-js@1.16.3": {
+      "integrity": "sha512-HI6dsbW68AKlOPofUjDTaosiDBCtW4XAm0D18pPwxoW3zKOE2Ru13Z69Wuys9fd6iTpfDViNco5sgrtnP0666A==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
+    "@supabase/realtime-js@2.10.7": {
+      "integrity": "sha512-OLI0hiSAqQSqRpGMTUwoIWo51eUivSYlaNBgxsXZE7PSoWh12wPRdVt0psUMaUzEonSB85K21wGc7W5jHnT6uA==",
+      "dependencies": [
+        "@supabase/node-fetch",
+        "@types/phoenix",
+        "@types/ws",
+        "ws"
+      ]
+    },
+    "@supabase/storage-js@2.7.1": {
+      "integrity": "sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==",
+      "dependencies": [
+        "@supabase/node-fetch"
+      ]
+    },
     "@types/estree@1.0.6": {
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
@@ -276,6 +321,9 @@
         "undici-types"
       ]
     },
+    "@types/phoenix@1.6.6": {
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A=="
+    },
     "@types/webidl-conversions@7.0.3": {
       "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA=="
     },
@@ -286,6 +334,12 @@
         "@types/webidl-conversions"
       ]
     },
+    "@types/ws@8.5.13": {
+      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+      "dependencies": [
+        "@types/node"
+      ]
+    },
     "accepts@1.3.8": {
       "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "dependencies": [
@@ -1480,6 +1534,9 @@
         "strip-ansi@7.1.0"
       ]
     },
+    "ws@8.18.0": {
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="
+    },
     "yaml@2.6.0": {
       "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ=="
     }
diff --git a/deploy/_data.ts b/deploy/_data.ts
index 1330a0c4b..c747e0d7a 100644
--- a/deploy/_data.ts
+++ b/deploy/_data.ts
@@ -132,7 +132,7 @@ export const sidebar = [
       },
       {
         label: "More on Deno by Example",
-        href: "/examples",
+        href: "/learn/examples",
       },
     ],
   },
diff --git a/examples.page.tsx b/examples.page.tsx
deleted file mode 100644
index a396ff6e2..000000000
--- a/examples.page.tsx
+++ /dev/null
@@ -1,599 +0,0 @@
-import { walkSync } from "@std/fs/walk";
-
-export const layout = "raw.tsx";
-
-export const sidebar = [
-  {
-    items: [
-      {
-        label: "Runtime Manual",
-        id: "/runtime/",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "API reference",
-        id: "/api/deno",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/manual/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/manual/",
-      },
-      {
-        label: "deno.com",
-        id: "https://deno.com",
-      },
-    ],
-  },
-];
-
-export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
-  const files = [
-    ...walkSync("./examples/", {
-      exts: [".ts"],
-    }),
-  ];
-  const examples = files.map((file) => {
-    const content = Deno.readTextFileSync(file.path);
-
-    return {
-      name: file.name,
-      content,
-      label: file.name.replace(".ts", ""),
-      parsed: parseExample(file.name, content),
-    } as ReturnedContent;
-  });
-
-  for (const example of examples) {
-    const contentNoCommentary = example.parsed.files.map((file) =>
-      file.snippets.map((snippet) => snippet.code).join("\n")
-    ).join("\n");
-    const url =
-      `https://github.com/denoland/deno-docs/blob/main/examples/${example.name}${
-        example.parsed.files.length > 1 ? "/main" : ""
-      }`;
-    const rawUrl = `https://docs.deno.com/examples/${example.name}${
-      example.parsed.files.length > 1 ? "/main" : ""
-    }`;
-
-    yield {
-      url: `/examples/${example.label}/index.html`,
-      title: `${example.parsed.title} - Deno by Example`,
-      content: (
-        <div>
-          <main
-            id="content"
-            class="max-w-screen-lg flex flex-col gap-8 px-4 md:mx-auto pt-6 mb-20"
-          >
-            <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center">
-              <div class="flex flex-col gap-2">
-                <h1 class="text-3xl font-bold">
-                  {example.parsed.title}
-                </h1>
-                {example.parsed.description && (
-                  <p
-                    className="max-w-prose"
-                    dangerouslySetInnerHTML={{
-                      __html: example.parsed.description,
-                    }}
-                  />
-                )}
-              </div>
-
-              <a
-                href={url}
-                class="px-4 py-2 rounded bg-background-secondary text-sm whitespace-nowrap border border-foreground-secondary hover:bg-background-primary text-foreground-primary"
-              >
-                Edit on Github
-              </a>
-            </div>
-            <div class="relative block">
-              <CopyButton text={contentNoCommentary} />
-            </div>
-            {example.parsed.files.map((file) => (
-              <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
-                {file.snippets.map((snippet, i) => (
-                  <SnippetComponent
-                    key={i}
-                    firstOfFile={i === 0}
-                    lastOfFile={i === file.snippets.length - 1}
-                    filename={file.name}
-                    snippet={snippet}
-                  />
-                ))}
-              </div>
-            ))}
-            <div>
-              {example.parsed.run && (
-                <>
-                  <p class="mt-4 mb-4">
-                    Run{" "}
-                    <a
-                      href={url}
-                      class="text-primary hover:underline focus:underline"
-                    >
-                      this example
-                    </a>{" "}
-                    locally using the Deno CLI:
-                  </p>
-                  <div
-                    data-color-mode="light"
-                    data-dark-theme="dark"
-                    data-light-theme="light"
-                    class="markdown-body"
-                  >
-                    <pre className="highlight">
-                      <code>
-                        {example.parsed.run.startsWith("deno")
-                          ? example.parsed.run.replace("<url>", url)
-                          : "deno run " +
-                            example.parsed.run.replace("<url>", rawUrl)}
-                      </code>
-                    </pre>
-                  </div>
-                </>
-              )}
-              {example.parsed.playground && (
-                <div class="col-span-3 mt-8">
-                  <p class="text-foreground-secondary">
-                    Try this example in a Deno Deploy playground:
-                  </p>
-                  <p class="mt-3">
-                    <a
-                      class="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
-                      href={example.parsed.playground}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Deploy
-                    </a>
-                  </p>
-                </div>
-              )}
-              {example.parsed.additionalResources.length > 0 && (
-                <div class="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
-                  <h2 class="font-semibold">Additional resources</h2>
-                  <ul class="list-none mt-1">
-                    {example.parsed.additionalResources.map(([link, title]) => (
-                      <li
-                        class="text-gray-700 hover:text-gray-900"
-                        key={link + title}
-                      >
-                        <a
-                          class="text-primary hover:underline focus:underline"
-                          href={link}
-                        >
-                          {title}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
-          </main>
-        </div>
-      ),
-    };
-  }
-
-  const groupMap: [string, string][] = [
-    ["Basics", "IconFlag3"],
-    ["Encoding", "IconTransform"],
-    ["CLI", "IconTerminal2"],
-    ["Network", "IconNetwork"],
-    ["System", "IconDeviceDesktop"],
-    ["File System", "IconFiles"],
-    ["Databases", "IconDatabase"],
-    ["Scheduled Tasks", "IconClock"],
-    ["Cryptography", "IconFileShredder"],
-    ["Advanced", "IconStars"],
-    ["Unstable APIs", "IconPersonDigging"],
-  ];
-
-  const groups = examples.reduce((acc, example) => {
-    const group = example.parsed.group || "Basics";
-    const lowerGroup = group.toLowerCase();
-
-    if (!acc[lowerGroup]) {
-      acc[lowerGroup] = [];
-    }
-
-    if (!groupMap.find(([category]) => category.toLowerCase() === lowerGroup)) {
-      groupMap.push([group.toLowerCase(), "IconFlag3"]);
-    }
-
-    acc[lowerGroup].push(example);
-    return acc;
-  }, {});
-
-  const elements = groupMap.map(([category, icon]) => {
-    const group = groups[category.toLowerCase()];
-
-    if (!group) {
-      return null;
-    }
-
-    group.sort((a, b) => a.parsed.sortOrder - b.parsed.sortOrder);
-
-    return (
-      <section
-        key={category}
-        className="mb-12 [-webkit-column-break-inside:avoid;]"
-      >
-        <h2 className="text-xl mb-2 block border-solid border-t-0 border-x-0 border-b border-b-gray-300 dark:border-b-gray-600 pb-1">
-          {category}
-        </h2>
-        <ul className="list-none pl-0">
-          {group.map((example) => {
-            return (
-              <li key={example.parsed.id} className="leading-loose">
-                <a
-                  href={"/examples/" + example.parsed.id.replace(".ts", "")}
-                  className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
-                >
-                  {example.parsed.title}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </section>
-    );
-  });
-
-  yield {
-    url: `/examples/`,
-    title: `Deno by Example`,
-    content: (
-      <main
-        id="content"
-        className="w-full flex flex-col px-8 pt-6 mt-16 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-20"
-      >
-        <div className="pb-16 align-middle md:pb-0 w-full">
-          <div className="mt-8 mb-16 md:mb-24 text-center">
-            <img
-              className="w-full max-w-32 mx-auto h-auto mb-4"
-              alt="Deno Examples"
-              src="/examples.png"
-            />
-            <h1 className="text-4xl md:text-6xl font-semibold mb-4">
-              Deno by Example
-            </h1>
-            <p className="max-w-prose mx-auto">
-              A collection of annotated Deno examples, to be used as a reference
-              for how to build with Deno, or as a guide to learn about many of
-              Deno's features.
-              <a
-                href="/runtime/contributing/examples/"
-                className="homepage-link runtime-link text-center mt-4"
-              >
-                Commit an example and we'll send you some stickers!
-              </a>
-            </p>
-          </div>
-          <div
-            className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
-            style={{ columnGap: "3rem" }}
-          >
-            {elements}
-          </div>
-          <div className="w-full flex flex-col px-8 pt-6 mt-20 md:items-center md:justify-center md:flex-row gap-0 md:gap-16 max-w-screen-xl mx-auto mb-24">
-            <p className="max-w-prose mx-auto text-center">
-              Need an example that isn't here? Or want to add one of your own?
-              <br /> We welcome contributions! <br />
-              You can request more examples, or add your own at our{" "}
-              <a
-                href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
-                class="text-primary hover:underline focus:underline"
-              >
-                GitHub repository
-              </a>
-            </p>
-          </div>
-        </div>
-      </main>
-    ),
-  };
-}
-
-function SnippetComponent(props: {
-  filename: string;
-  firstOfFile: boolean;
-  lastOfFile: boolean;
-  snippet: ExampleSnippet;
-}) {
-  return (
-    <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
-      <div
-        class={`italic select-none text-sm ${
-          props.snippet.text ? "pb-4 md:pb-0 " : " "
-        } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
-      >
-        {props.snippet.text}
-      </div>
-      <div
-        class={`col-span-7 relative ${
-          props.snippet.code.length === 0 ? "hidden sm:block" : ""
-        }`}
-      >
-        {props.filename && (
-          <span
-            class={`font-mono text-xs absolute -top-3 left-4 z-10 p-1 rounded-sm ${
-              props.firstOfFile ? "block" : "block sm:hidden"
-            }`}
-          >
-            {props.filename}
-          </span>
-        )}
-        <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
-          {props.snippet.code && (
-            <div
-              data-color-mode="light"
-              data-dark-theme="dark"
-              data-light-theme="light"
-              class="nocopy h-full markdown-body"
-            >
-              <pre
-                class="highlight snippet-code language-ts"
-                data-example-position={props.firstOfFile
-                  ? "first"
-                  : props.lastOfFile
-                  ? "last"
-                  : "middle"}
-              >
-                <code
-                  dangerouslySetInnerHTML={{ __html: props.snippet.code }}
-                ></code>
-              </pre>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function CopyButton(props: { text: string }) {
-  return (
-    <button
-      type="button"
-      aria-label="Copy code to clipboard"
-      title="Copy"
-      class="clean-btn copy-all absolute right-2 top-10 hover:bg-gray-200 text-gray-900 p-2 rounded-md z-10"
-      data-copy={props.text}
-    >
-      <svg viewBox="0 0 24 24" width="15" height="15">
-        <path
-          fill="currentColor"
-          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-        >
-        </path>
-      </svg>
-    </button>
-  );
-}
-
-export const TAGS = {
-  cli: {
-    title: "cli",
-    description: "Works in Deno CLI",
-  },
-  deploy: {
-    title: "deploy",
-    description: "Works on Deno Deploy",
-  },
-  web: {
-    title: "web",
-    description: "Works in on the Web",
-  },
-};
-
-export const DIFFICULTIES = {
-  beginner: {
-    title: "Beginner",
-    description: "No significant prior knowledge is required for this example.",
-  },
-  intermediate: {
-    title: "Intermediate",
-    description: "Some prior knowledge is needed for this example.",
-  },
-};
-
-type ReturnedContent = {
-  name: string;
-  content: string;
-  label: string;
-  parsed: Example;
-};
-
-export interface Example {
-  id: string;
-  title: string;
-  description: string;
-  difficulty: keyof typeof DIFFICULTIES;
-  tags: (keyof typeof TAGS)[];
-  additionalResources: [string, string][];
-  run?: string;
-  playground?: string;
-  files: ExampleFile[];
-  group: string;
-  sortOrder: any;
-}
-
-export interface ExampleFile {
-  name: string;
-  snippets: ExampleSnippet[];
-}
-
-export interface ExampleSnippet {
-  text: string;
-  code: string;
-}
-
-export function parseExample(id: string, file: string): Example {
-  // Extract the multi line JS doc comment at the top of the file
-  const [, jsdoc, rest] = file.match(/^\s*\/\*\*(.*?)\*\/\s*(.*)/s) || [];
-
-  // Extract the @key value pairs from the JS doc comment
-  let description = "";
-  const kvs: Record<string, string> = {};
-  const resources = [];
-  for (let line of jsdoc.split("\n")) {
-    line = line.trim().replace(/^\*/, "").trim();
-    const [, key, value] = line.match(/^\s*@(\w+)\s+(.*)/) || [];
-    if (key) {
-      if (key === "resource") {
-        resources.push(value);
-      } else {
-        kvs[key] = value.trim();
-      }
-    } else {
-      description += " " + line;
-    }
-  }
-  description = description.trim();
-
-  // Separate the code into snippets.
-  const files: ExampleFile[] = [
-    {
-      name: "",
-      snippets: [],
-    },
-  ];
-  let parseMode = "code";
-  let currentFile = files[0];
-  let text = "";
-  let code = "";
-
-  for (const line of rest.split("\n")) {
-    const trimmedLine = line.trim();
-    if (parseMode == "code") {
-      if (line.startsWith("// File:")) {
-        if (text || code.trimEnd()) {
-          code = code.trimEnd();
-          currentFile.snippets.push({ text, code });
-          text = "";
-          code = "";
-        }
-        const name = line.slice(8).trim();
-        if (currentFile.snippets.length == 0) {
-          currentFile.name = name;
-        } else {
-          currentFile = {
-            name,
-            snippets: [],
-          };
-          files.push(currentFile);
-        }
-      } else if (line.startsWith("/* File:")) {
-        if (text || code.trimEnd()) {
-          code = code.trimEnd();
-          currentFile.snippets.push({ text, code });
-          text = "";
-          code = "";
-        }
-        const name = line.slice(8).trim();
-        if (currentFile.snippets.length == 0) {
-          currentFile.name = name;
-        } else {
-          currentFile = {
-            name,
-            snippets: [],
-          };
-          files.push(currentFile);
-        }
-        parseMode = "file";
-      } else if (
-        trimmedLine.startsWith("// deno-lint-ignore") ||
-        trimmedLine.startsWith("//deno-lint-ignore") ||
-        trimmedLine.startsWith("// deno-fmt-ignore") ||
-        trimmedLine.startsWith("//deno-fmt-ignore")
-      ) {
-        // skip deno directives
-      } else if (trimmedLine.startsWith("//-")) {
-        code += line.replace("//-", "//") + "\n";
-      } else if (trimmedLine.startsWith("//")) {
-        if (text || code.trimEnd()) {
-          code = code.trimEnd();
-          currentFile.snippets.push({ text, code });
-        }
-        text = trimmedLine.slice(2).trim();
-        code = "";
-        parseMode = "comment";
-      } else {
-        code += line + "\n";
-      }
-    } else if (parseMode == "comment") {
-      if (
-        trimmedLine.startsWith("// deno-lint-ignore") ||
-        trimmedLine.startsWith("//deno-lint-ignore") ||
-        trimmedLine.startsWith("// deno-fmt-ignore") ||
-        trimmedLine.startsWith("//deno-fmt-ignore")
-      ) {
-        // skip deno directives
-      } else if (trimmedLine.startsWith("//")) {
-        text += " " + trimmedLine.slice(2).trim();
-      } else {
-        code += line + "\n";
-        parseMode = "code";
-      }
-    } else if (parseMode == "file") {
-      if (line == "*/") {
-        parseMode = "code";
-      } else {
-        code += line + "\n";
-      }
-    }
-  }
-  if (text || code.trimEnd()) {
-    code = code.trimEnd();
-    currentFile.snippets.push({ text, code });
-  }
-
-  if (!kvs.title) {
-    throw new Error("Missing title in JS doc comment.");
-  }
-
-  const tags = kvs.tags.split(",").map((s) => s.trim() as keyof typeof TAGS);
-  for (const tag of tags) {
-    if (!TAGS[tag]) {
-      throw new Error(`Unknown tag '${tag}'`);
-    }
-  }
-
-  const difficulty = kvs.difficulty as keyof typeof DIFFICULTIES;
-  if (!DIFFICULTIES[difficulty]) {
-    throw new Error(`Unknown difficulty '${difficulty}'`);
-  }
-
-  const additionalResources: [string, string][] = [];
-  for (const resource of resources) {
-    // @resource {https://jsr.io/@std/http/server/~/} std/http/server
-    const [_, url, title] = resource.match(/^\{(.*?)\}\s(.*)/) || [];
-    if (!url || !title) {
-      throw new Error(`Invalid resource: ${resource}`);
-    }
-    additionalResources.push([url, title]);
-  }
-
-  return {
-    id,
-    title: kvs.title,
-    description,
-    difficulty,
-    tags,
-    additionalResources,
-    run: kvs.run,
-    playground: kvs.playground,
-    files,
-    group: kvs.group || "Misc",
-    sortOrder: kvs.sortOrder || 999999,
-  };
-}
diff --git a/examples_test.ts b/examples_test.ts
deleted file mode 100644
index 93eeb44f0..000000000
--- a/examples_test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { join } from "@std/path";
-import { walk } from "@std/fs";
-import { assertEquals, assertNotMatch } from "@std/assert";
-
-const decoder = new TextDecoder();
-
-Deno.test("Check examples", async (t) => {
-  for await (const item of walk("./examples")) {
-    const path = join("examples", item.name);
-
-    if (!path.endsWith(".ts")) continue;
-
-    await t.step("Check graph: " + path, async () => {
-      const result = await new Deno.Command(Deno.execPath(), {
-        args: ["info", path],
-      }).output();
-      assertEquals(result.code, 0);
-      assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
-    });
-  }
-});
diff --git a/index.page.tsx b/index.page.tsx
index 2caa59f5b..9f7444a7b 100644
--- a/index.page.tsx
+++ b/index.page.tsx
@@ -8,14 +8,14 @@ export const sidebar = [
         label: "Runtime Manual",
         id: "/runtime/",
       },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
       {
         label: "API reference",
         id: "/api/deno",
       },
+      {
+        label: "Learn",
+        id: "/learn/",
+      },
       {
         label: "Deploy",
         id: "/deploy/manual/",
@@ -139,7 +139,7 @@ export default function () {
                   reference for how to build with Deno, or as a guide to learn
                   about many of Deno's features. Find more examples in the{" "}
                   <a
-                    href="/examples/"
+                    href="/learn/examples/"
                     class="runtime-link underline underline-offset-4"
                   >
                     Examples
@@ -154,19 +154,19 @@ export default function () {
                   links={[
                     {
                       text: "Importing modules from npm",
-                      href: "/examples/npm",
+                      href: "/learn/examples/npm",
                     },
                     {
                       text: "Hello World",
-                      href: "/examples/hello-world",
+                      href: "/learn/examples/hello-world",
                     },
                     {
                       text: "Using Node.js built-in modules",
-                      href: "/examples/node",
+                      href: "/learn/examples/node",
                     },
                     {
                       text: "Manipulating & Parsing URLs",
-                      href: "/examples/url-parsing",
+                      href: "/learn/examples/url-parsing",
                     },
                   ]}
                 />
@@ -176,19 +176,19 @@ export default function () {
                   links={[
                     {
                       text: "HTTP Server: Hello World",
-                      href: "/examples/http-server",
+                      href: "/learn/examples/http-server",
                     },
                     {
                       text: "HTTP Server: WebSockets",
-                      href: "/examples/http-server-websocket",
+                      href: "/learn/examples/http-server-websocket",
                     },
                     {
                       text: "HTTP Server: Streaming",
-                      href: "/examples/http-server-streaming",
+                      href: "/learn/examples/http-server-streaming",
                     },
                     {
                       text: "TCP Connector: Ping",
-                      href: "/examples/tcp-connector",
+                      href: "/learn/examples/tcp-connector",
                     },
                   ]}
                 />
@@ -198,19 +198,19 @@ export default function () {
                   links={[
                     {
                       text: "Command Line Arguments",
-                      href: "/examples/command-line-arguments",
+                      href: "/learn/examples/command-line-arguments",
                     },
                     {
                       text: "Environment Variables",
-                      href: "/examples/environment-variables",
+                      href: "/learn/examples/environment-variables",
                     },
                     {
                       text: "Reading Files",
-                      href: "/examples/reading-files",
+                      href: "/learn/examples/reading-files",
                     },
                     {
                       text: "Walking directories",
-                      href: "/examples/walking-directories",
+                      href: "/learn/examples/walking-directories",
                     },
                   ]}
                 />
@@ -220,19 +220,19 @@ export default function () {
                   links={[
                     {
                       text: "KV",
-                      href: "/examples/kv",
+                      href: "/learn/examples/kv",
                     },
                     {
                       text: "Queues",
-                      href: "/examples/queues",
+                      href: "/learn/examples/queues",
                     },
                     {
                       text: "Cron",
-                      href: "/examples/cron",
+                      href: "/learn/examples/cron",
                     },
                     {
                       text: "KV Watch",
-                      href: "/examples/kv-watch",
+                      href: "/learn/examples/kv-watch",
                     },
                   ]}
                 />
diff --git a/learn/_components/CopyButton.tsx b/learn/_components/CopyButton.tsx
new file mode 100644
index 000000000..f5d06c6b0
--- /dev/null
+++ b/learn/_components/CopyButton.tsx
@@ -0,0 +1,19 @@
+export function CopyButton(props: { text: string }) {
+  return (
+    <button
+      type="button"
+      aria-label="Copy code to clipboard"
+      title="Copy"
+      class="clean-btn copy-all absolute right-2 top-10 hover:bg-gray-200 text-gray-900 p-2 rounded-md z-10"
+      data-copy={props.text}
+    >
+      <svg viewBox="0 0 24 24" width="15" height="15">
+        <path
+          fill="currentColor"
+          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+        >
+        </path>
+      </svg>
+    </button>
+  );
+}
diff --git a/learn/_components/EmbedVideo.tsx b/learn/_components/EmbedVideo.tsx
new file mode 100644
index 000000000..8a1c5b73f
--- /dev/null
+++ b/learn/_components/EmbedVideo.tsx
@@ -0,0 +1,37 @@
+/**
+ * Embed a YouTube video.
+ * @param props.id - The YouTube ID or URL.
+ * @returns A custom element that embeds the YouTube video with Lite YouTube Embed.
+ */
+export function EmbedVideo(
+  props: { id: string },
+) {
+  const videoid = extractID(props.id);
+  return (
+    <lite-youtube videoid={videoid}>
+    </lite-youtube>
+  );
+}
+
+/**
+ * Extract a YouTube ID from a string.
+ * @param idOrUrl String to test
+ * @returns A YouTube video ID or undefined if none matched
+ */
+function extractID(idOrUrl: string) {
+  const idRegExp = /^[A-Za-z0-9-_]+$/;
+  if (idRegExp.test(idOrUrl)) return idOrUrl;
+  return urlMatcher(idOrUrl);
+}
+
+/**
+ * Extract a YouTube ID from a URL if it matches the pattern.
+ * @param url URL to test
+ * @returns A YouTube video ID or undefined if none matched
+ */
+function urlMatcher(url: string): string | undefined {
+  const urlPattern =
+    /(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/;
+  const match = url.match(urlPattern);
+  return match?.[3];
+}
diff --git a/learn/_components/ExampleIcon.tsx b/learn/_components/ExampleIcon.tsx
new file mode 100644
index 000000000..14cc97a9f
--- /dev/null
+++ b/learn/_components/ExampleIcon.tsx
@@ -0,0 +1,19 @@
+export function ExampleIcon(props: { color: string }) {
+  return (
+    <svg
+      className="inline mr-2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 328 258"
+      width="1rem"
+    >
+      <path
+        d="m86 58-71 70 71 72M186 15l-46 228M242 59l71 71-71 72"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+    </svg>
+  );
+}
diff --git a/learn/_components/LearningList.tsx b/learn/_components/LearningList.tsx
new file mode 100644
index 000000000..19f115aa3
--- /dev/null
+++ b/learn/_components/LearningList.tsx
@@ -0,0 +1,35 @@
+import { TutorialIcon } from "./TutorialIcon.tsx";
+import { ExampleIcon } from "./ExampleIcon.tsx";
+import { VideoIcon } from "./VideoIcon.tsx";
+
+export function LearningList(
+  props: {
+    title: string;
+    items: ({ label: string; id: string; type: string })[];
+  },
+) {
+  return (
+    <section className="break-inside-avoid-column">
+      <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
+      <ul className="mb-8">
+        {props.items.map((item) => (
+          <li
+            className="leading-7 learning-list-item"
+            data-category={item.type}
+          >
+            <a
+              className="homepage-link mb-1 runtime-link"
+              href={item.id}
+            >
+              {item.type === "tutorial" && <TutorialIcon color="#9d9d9d" />}
+              {item.type === "example" && <ExampleIcon color="#9d9d9d" />}
+              {item.type === "video" && <VideoIcon color="#9d9d9d" />}
+
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/learn/_components/SnippetComponent.tsx b/learn/_components/SnippetComponent.tsx
new file mode 100644
index 000000000..c90fa0804
--- /dev/null
+++ b/learn/_components/SnippetComponent.tsx
@@ -0,0 +1,58 @@
+import { ExampleSnippet } from "../types.ts";
+
+export default function SnippetComponent(props: {
+  filename: string;
+  firstOfFile: boolean;
+  lastOfFile: boolean;
+  snippet: ExampleSnippet;
+}) {
+  return (
+    <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
+      <div
+        class={`italic select-none text-sm ${
+          props.snippet.text ? "pb-4 md:pb-0 " : " "
+        } ${props.snippet.code ? "col-span-3" : "mt-4 col-span-full"}`}
+      >
+        {props.snippet.text}
+      </div>
+      <div
+        class={`col-span-7 relative ${
+          props.snippet.code.length === 0 ? "hidden sm:block" : ""
+        }`}
+      >
+        {props.filename && (
+          <span
+            class={`font-mono text-xs absolute -top-3 left-4 z-10 p-1 rounded-sm ${
+              props.firstOfFile ? "block" : "block sm:hidden"
+            }`}
+          >
+            {props.filename}
+          </span>
+        )}
+        <div class="-mx-4 h-full sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
+          {props.snippet.code && (
+            <div
+              data-color-mode="light"
+              data-dark-theme="dark"
+              data-light-theme="light"
+              class="nocopy h-full markdown-body"
+            >
+              <pre
+                class="highlight snippet-code language-ts"
+                data-example-position={props.firstOfFile
+                  ? "first"
+                  : props.lastOfFile
+                  ? "last"
+                  : "middle"}
+              >
+                  <code
+                    dangerouslySetInnerHTML={{ __html: props.snippet.code }}
+                  ></code>
+              </pre>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/learn/_components/TutorialIcon.tsx b/learn/_components/TutorialIcon.tsx
new file mode 100644
index 000000000..bec554f85
--- /dev/null
+++ b/learn/_components/TutorialIcon.tsx
@@ -0,0 +1,27 @@
+export function TutorialIcon(props: { color: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 502 384"
+      className="inline mr-2"
+      width="1rem"
+    >
+      <path
+        d="M59 45H15v304h200s10 20 36 20 36-20 36-20h200V45h-40"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <path
+        d="M215 15H63v281h141c27 0 39 7 47 20h0V46c0-25-15-31-36-31h0Zm36 31c0-25 15-31 36-31h152v281H298c-27 0-39 7-47 20h0"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+    </svg>
+  );
+}
diff --git a/learn/_components/VideoIcon.tsx b/learn/_components/VideoIcon.tsx
new file mode 100644
index 000000000..334ac8bab
--- /dev/null
+++ b/learn/_components/VideoIcon.tsx
@@ -0,0 +1,52 @@
+export function VideoIcon(props: { color: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 416 368"
+      className="inline mr-2"
+      width="1rem"
+    >
+      <rect
+        x="25"
+        y="178"
+        width="274"
+        height="174.7"
+        rx="24.7"
+        ry="24.7"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <circle
+        cx="71.2"
+        cy="122.2"
+        r="56.2"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <circle
+        cx="229.7"
+        cy="96.7"
+        r="81.7"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+      <path
+        d="m306 246 85-53c4-3 10 0 10 5v135c0 5-6 8-10 6l-85-53"
+        fill="none"
+        stroke={props.color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="30"
+      />
+    </svg>
+  );
+}
diff --git a/learn/_pages/ExamplePage.tsx b/learn/_pages/ExamplePage.tsx
new file mode 100644
index 000000000..903aa28af
--- /dev/null
+++ b/learn/_pages/ExamplePage.tsx
@@ -0,0 +1,134 @@
+import { CopyButton } from "../_components/CopyButton.tsx";
+import SnippetComponent from "../_components/SnippetComponent.tsx";
+import { ExampleFromFileSystem } from "../types.ts";
+
+type Props = { example: ExampleFromFileSystem };
+
+export default function ExamplePage({ example }: Props) {
+  const contentNoCommentary = example.parsed.files.map((file) =>
+    file.snippets.map((snippet) => snippet.code).join("\n")
+  ).join("\n");
+  const url =
+    `https://github.com/denoland/deno-docs/blob/main/examples/${example.name}${
+      example.parsed.files.length > 1 ? "/main" : ""
+    }`;
+  const rawUrl = `https://docs.deno.com/learn/examples/${example.name}${
+    example.parsed.files.length > 1 ? "/main" : ""
+  }`;
+
+  return (
+    <div>
+      <main
+        id="content"
+        class="max-w-screen-lg flex flex-col gap-8 px-4 md:mx-auto pt-6 mb-20"
+      >
+        <div class="flex flex-col gap-4 md:flex-row justify-between items-start md:items-center">
+          <div class="flex flex-col gap-2">
+            <h1 class="text-3xl font-bold">
+              {example.parsed.title}
+            </h1>
+            {example.parsed.description && (
+              <p
+                className="max-w-prose"
+                dangerouslySetInnerHTML={{
+                  __html: example.parsed.description,
+                }}
+              />
+            )}
+          </div>
+
+          <a
+            href={url}
+            class="px-4 py-2 rounded bg-background-secondary text-sm whitespace-nowrap border border-foreground-secondary hover:bg-background-primary text-foreground-primary"
+          >
+            Edit on Github
+          </a>
+        </div>
+        <div class="relative block">
+          <CopyButton text={contentNoCommentary} />
+        </div>
+        {example.parsed.files.map((file) => (
+          <div class="flex flex-col gap-4 md:gap-0" key={file.name}>
+            {file.snippets.map((snippet, i) => (
+              <SnippetComponent
+                key={i}
+                firstOfFile={i === 0}
+                lastOfFile={i === file.snippets.length - 1}
+                filename={file.name}
+                snippet={snippet}
+              />
+            ))}
+          </div>
+        ))}
+        <div>
+          {example.parsed.run && (
+            <>
+              <p class="mt-4 mb-4">
+                Run{" "}
+                <a
+                  href={url}
+                  class="text-primary hover:underline focus:underline"
+                >
+                  this example
+                </a>{" "}
+                locally using the Deno CLI:
+              </p>
+              <div
+                data-color-mode="light"
+                data-dark-theme="dark"
+                data-light-theme="light"
+                class="markdown-body"
+              >
+                <pre className="highlight">
+                        <code>
+                        {example.parsed.run.startsWith("deno")
+                            ? example.parsed.run.replace("<url>", url)
+                            : "deno run " +
+                            example.parsed.run.replace("<url>", rawUrl)}
+                        </code>
+                </pre>
+              </div>
+            </>
+          )}
+          {example.parsed.playground && (
+            <div class="col-span-3 mt-8">
+              <p class="text-foreground-secondary">
+                Try this example in a Deno Deploy playground:
+              </p>
+              <p class="mt-3">
+                <a
+                  class="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
+                  href={example.parsed.playground}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Deploy
+                </a>
+              </p>
+            </div>
+          )}
+          {example.parsed.additionalResources.length > 0 && (
+            <div class="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
+              <h2 class="font-semibold">Additional resources</h2>
+              <ul class="list-none mt-1">
+                {example.parsed.additionalResources.map(([link, title]) => (
+                  <li
+                    class="text-gray-700 hover:text-gray-900"
+                    key={link + title}
+                  >
+                    <a
+                      class="text-primary hover:underline focus:underline"
+                      href={link}
+                    >
+                      {title}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/learn/_pages/LandingPage.tsx b/learn/_pages/LandingPage.tsx
new file mode 100644
index 000000000..e6610ed0a
--- /dev/null
+++ b/learn/_pages/LandingPage.tsx
@@ -0,0 +1,105 @@
+import { LearningList } from "../_components/LearningList.tsx";
+import { sidebar } from "../tutorials/_data.ts";
+import { TutorialIcon } from "../_components/TutorialIcon.tsx";
+import { ExampleIcon } from "../_components/ExampleIcon.tsx";
+import { VideoIcon } from "../_components/VideoIcon.tsx";
+
+export default function LandingPage() {
+  const componentsPerSidebarItem = sidebar.map(
+    (item: { title: string; items: any[] }) => {
+      return (
+        <LearningList
+          title={item.title}
+          items={item.items}
+        />
+      );
+    },
+  );
+
+  return (
+    <main
+      id="content"
+      className="flex flex-col px-8 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-48"
+    >
+      <div className="w-full mb-6 max-w-screen-xl mx-auto hub-header">
+        <div className="max-w-prose mb-8">
+          <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
+            Learning hub
+          </h1>
+          <p>
+            A collection of walkthrough tutorials, examples, videos and guides
+            to teach you about the Deno runtime and how to use it with your
+            favorite tools.
+          </p>
+        </div>
+        <div className=" mb-2 flex gap-2 flex-wrap items-center">
+          <h2 className="font-semibold mb-2 mt-2">
+            Filter by type:
+          </h2>
+          <label for="example" className="mr-4 ml-4 flex items-center">
+            <ExampleIcon color="#9d9d9d" />Examples:
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="example"
+                value="Examples"
+                className="mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
+
+          <label for="tutorial" className="mr-4 ml-4 flex items-center">
+            <TutorialIcon color="#9d9d9d" />Tutorials:
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="tutorial"
+                value="Tutorials"
+                className="mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
+
+          <label for="video" className="mr-4 ml-4 flex items-center">
+            <VideoIcon color="#9d9d9d" />Videos:
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="video"
+                value="Videos"
+                className="mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div className="columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
+        {componentsPerSidebarItem}
+      </div>
+      <p class="max-w-prose mx-auto text-center pt-4 mt-3">
+        Need an example that isn't here? Or want to add one of your own?<br />
+        {" "}
+        We welcome contributions!{" "}
+        <br />You can request more examples, or add your own at our{" "}
+        <a
+          href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
+          class="text-primary hover:underline focus:underline"
+        >
+          GitHub repository
+        </a>
+      </p>
+      <a
+        href="/runtime/contributing/examples/"
+        class="homepage-link runtime-link text-center mt-4"
+      >
+        Commit an example and we'll send you some stickers!
+      </a>
+    </main>
+  );
+}
diff --git a/learn/_pages/examples_test.ts b/learn/_pages/examples_test.ts
new file mode 100644
index 000000000..d8cbcd852
--- /dev/null
+++ b/learn/_pages/examples_test.ts
@@ -0,0 +1,21 @@
+// import { join } from "@std/path";
+// import { walk } from "@std/fs";
+// import { assertEquals, assertNotMatch } from "@std/assert";
+
+// const decoder = new TextDecoder();
+
+// Deno.test("Check examples", async (t) => {
+//   for await (const item of walk("./learn/examples/")) {
+//     const path = join("examples", item.name);
+
+//     if (!path.endsWith(".ts")) continue;
+
+//     await t.step("Check graph: " + path, async () => {
+//       const result = await new Deno.Command(Deno.execPath(), {
+//         args: ["info", path],
+//       }).output();
+//       assertEquals(result.code, 0);
+//       assertNotMatch(decoder.decode(result.stdout), /\(resolve error\)/);
+//     });
+//   }
+// });
diff --git a/examples/aes-encryption.ts b/learn/examples/aes-encryption.ts
similarity index 100%
rename from examples/aes-encryption.ts
rename to learn/examples/aes-encryption.ts
diff --git a/examples/benchmarking.ts b/learn/examples/benchmarking.ts
similarity index 94%
rename from examples/benchmarking.ts
rename to learn/examples/benchmarking.ts
index 0e95cf546..4944d9af4 100644
--- a/examples/benchmarking.ts
+++ b/learn/examples/benchmarking.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run deno bench <url>
  * @resource {https://docs.deno.com/runtime/reference/cli/benchmarker} Manual: Benchmarker tool
- * @resource {/examples/http-requests} Example: HTTP Requests
+ * @resource {/learn/examples/http-requests} Example: HTTP Requests
  * @group System
  *
  * When writing libraries, a very common task that needs to be done is
diff --git a/examples/byte-manipulation.ts b/learn/examples/byte-manipulation.ts
similarity index 100%
rename from examples/byte-manipulation.ts
rename to learn/examples/byte-manipulation.ts
diff --git a/examples/checking-file-existence.ts b/learn/examples/checking-file-existence.ts
similarity index 100%
rename from examples/checking-file-existence.ts
rename to learn/examples/checking-file-existence.ts
diff --git a/examples/color-logging.ts b/learn/examples/color-logging.ts
similarity index 100%
rename from examples/color-logging.ts
rename to learn/examples/color-logging.ts
diff --git a/examples/command-line-arguments.ts b/learn/examples/command-line-arguments.ts
similarity index 100%
rename from examples/command-line-arguments.ts
rename to learn/examples/command-line-arguments.ts
diff --git a/examples/create-remove-directories.ts b/learn/examples/create-remove-directories.ts
similarity index 100%
rename from examples/create-remove-directories.ts
rename to learn/examples/create-remove-directories.ts
diff --git a/examples/cron.ts b/learn/examples/cron.ts
similarity index 100%
rename from examples/cron.ts
rename to learn/examples/cron.ts
diff --git a/examples/data-processing.ts b/learn/examples/data-processing.ts
similarity index 100%
rename from examples/data-processing.ts
rename to learn/examples/data-processing.ts
diff --git a/examples/deleting-files.ts b/learn/examples/deleting-files.ts
similarity index 100%
rename from examples/deleting-files.ts
rename to learn/examples/deleting-files.ts
diff --git a/examples/deno-version.ts b/learn/examples/deno-version.ts
similarity index 100%
rename from examples/deno-version.ts
rename to learn/examples/deno-version.ts
diff --git a/examples/dns-queries.ts b/learn/examples/dns-queries.ts
similarity index 100%
rename from examples/dns-queries.ts
rename to learn/examples/dns-queries.ts
diff --git a/examples/environment-variables.ts b/learn/examples/environment-variables.ts
similarity index 100%
rename from examples/environment-variables.ts
rename to learn/examples/environment-variables.ts
diff --git a/examples/exponential-backoff.ts b/learn/examples/exponential-backoff.ts
similarity index 100%
rename from examples/exponential-backoff.ts
rename to learn/examples/exponential-backoff.ts
diff --git a/examples/hashing.ts b/learn/examples/hashing.ts
similarity index 100%
rename from examples/hashing.ts
rename to learn/examples/hashing.ts
diff --git a/examples/hello-world.ts b/learn/examples/hello-world.ts
similarity index 100%
rename from examples/hello-world.ts
rename to learn/examples/hello-world.ts
diff --git a/examples/hex-base64-encoding.ts b/learn/examples/hex-base64-encoding.ts
similarity index 100%
rename from examples/hex-base64-encoding.ts
rename to learn/examples/hex-base64-encoding.ts
diff --git a/examples/hmac-generate-verify.ts b/learn/examples/hmac-generate-verify.ts
similarity index 100%
rename from examples/hmac-generate-verify.ts
rename to learn/examples/hmac-generate-verify.ts
diff --git a/examples/hono.ts b/learn/examples/hono.ts
similarity index 100%
rename from examples/hono.ts
rename to learn/examples/hono.ts
diff --git a/examples/http-requests.ts b/learn/examples/http-requests.ts
similarity index 100%
rename from examples/http-requests.ts
rename to learn/examples/http-requests.ts
diff --git a/examples/http-server-files.ts b/learn/examples/http-server-files.ts
similarity index 94%
rename from examples/http-server-files.ts
rename to learn/examples/http-server-files.ts
index 4af135f61..bdf56caac 100644
--- a/examples/http-server-files.ts
+++ b/learn/examples/http-server-files.ts
@@ -5,7 +5,7 @@
  * @run --allow-net --allow-read <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.serve} Doc: Deno.serve
  * @resource {https://jsr.io/@std/http#file-server} Doc: @std/http/file-server
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @group Network
  *
  * An example of a HTTP server that serves files.
diff --git a/examples/http-server-oak-crud-middleware-with-sqlite3-db.ts b/learn/examples/http-server-oak-crud-middleware-with-sqlite3-db.ts
similarity index 100%
rename from examples/http-server-oak-crud-middleware-with-sqlite3-db.ts
rename to learn/examples/http-server-oak-crud-middleware-with-sqlite3-db.ts
diff --git a/examples/http-server-routing.ts b/learn/examples/http-server-routing.ts
similarity index 93%
rename from examples/http-server-routing.ts
rename to learn/examples/http-server-routing.ts
index ee5ec03c3..f90ef4b34 100644
--- a/examples/http-server-routing.ts
+++ b/learn/examples/http-server-routing.ts
@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @run --allow-net <url>
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API} MDN: URL Pattern API
  * @playground https://dash.deno.com/playground/example-routing
  * @group Network
diff --git a/examples/http-server-streaming.ts b/learn/examples/http-server-streaming.ts
similarity index 94%
rename from examples/http-server-streaming.ts
rename to learn/examples/http-server-streaming.ts
index d12b0cc94..85a0d2ed9 100644
--- a/examples/http-server-streaming.ts
+++ b/learn/examples/http-server-streaming.ts
@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @run --allow-net <url>
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream} MDN: ReadableStream
  * @playground https://dash.deno.com/playground/example-streaming
  * @group Network
diff --git a/examples/http-server-websocket.ts b/learn/examples/http-server-websocket.ts
similarity index 94%
rename from examples/http-server-websocket.ts
rename to learn/examples/http-server-websocket.ts
index ebbd4bbb4..25df34ee7 100644
--- a/examples/http-server-websocket.ts
+++ b/learn/examples/http-server-websocket.ts
@@ -3,7 +3,7 @@
  * @difficulty intermediate
  * @tags cli, deploy
  * @run --allow-net <url>
- * @resource {/examples/http-server} Example: HTTP Server: Hello World
+ * @resource {/learn/examples/http-server} Example: HTTP Server: Hello World
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/WebSocket} MDN: WebSocket
  * @group Network
  *
diff --git a/examples/http-server.ts b/learn/examples/http-server.ts
similarity index 100%
rename from examples/http-server.ts
rename to learn/examples/http-server.ts
diff --git a/examples/import-export.ts b/learn/examples/import-export.ts
similarity index 93%
rename from examples/import-export.ts
rename to learn/examples/import-export.ts
index 3ea92959d..f6a742eed 100644
--- a/examples/import-export.ts
+++ b/learn/examples/import-export.ts
@@ -2,7 +2,7 @@
  * @title Importing & exporting
  * @difficulty beginner
  * @tags cli, deploy
- * @resource {/examples/dependency-management} Example: Dependency Management
+ * @resource {/learn/examples/dependency-management} Example: Dependency Management
  * @resource {https://docs.deno.com/runtime/manual/basics/modules} Manual: Modules
  * @group Basics
  *
diff --git a/examples/importing-json.ts b/learn/examples/importing-json.ts
similarity index 100%
rename from examples/importing-json.ts
rename to learn/examples/importing-json.ts
diff --git a/examples/kv-watch.ts b/learn/examples/kv-watch.ts
similarity index 100%
rename from examples/kv-watch.ts
rename to learn/examples/kv-watch.ts
diff --git a/examples/kv.ts b/learn/examples/kv.ts
similarity index 100%
rename from examples/kv.ts
rename to learn/examples/kv.ts
diff --git a/examples/mongo.ts b/learn/examples/mongo.ts
similarity index 100%
rename from examples/mongo.ts
rename to learn/examples/mongo.ts
diff --git a/examples/moving-renaming-files.ts b/learn/examples/moving-renaming-files.ts
similarity index 100%
rename from examples/moving-renaming-files.ts
rename to learn/examples/moving-renaming-files.ts
diff --git a/examples/node.ts b/learn/examples/node.ts
similarity index 100%
rename from examples/node.ts
rename to learn/examples/node.ts
diff --git a/examples/npm.ts b/learn/examples/npm.ts
similarity index 100%
rename from examples/npm.ts
rename to learn/examples/npm.ts
diff --git a/examples/openai-chat-completion.ts b/learn/examples/openai-chat-completion.ts
similarity index 100%
rename from examples/openai-chat-completion.ts
rename to learn/examples/openai-chat-completion.ts
diff --git a/examples/os-signals.ts b/learn/examples/os-signals.ts
similarity index 100%
rename from examples/os-signals.ts
rename to learn/examples/os-signals.ts
diff --git a/examples/parsing-serializing-csv.ts b/learn/examples/parsing-serializing-csv.ts
similarity index 95%
rename from examples/parsing-serializing-csv.ts
rename to learn/examples/parsing-serializing-csv.ts
index 99bc7f5b8..c145155aa 100644
--- a/examples/parsing-serializing-csv.ts
+++ b/learn/examples/parsing-serializing-csv.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run <url>
- * @resource {/examples/import-export} Example: Importing & Exporting
+ * @resource {/learn/examples/import-export} Example: Importing & Exporting
  * @resource {https://datatracker.ietf.org/doc/html/rfc4180} Spec: CSV
  * @group Encoding
  *
diff --git a/examples/parsing-serializing-json.ts b/learn/examples/parsing-serializing-json.ts
similarity index 100%
rename from examples/parsing-serializing-json.ts
rename to learn/examples/parsing-serializing-json.ts
diff --git a/examples/parsing-serializing-toml.ts b/learn/examples/parsing-serializing-toml.ts
similarity index 93%
rename from examples/parsing-serializing-toml.ts
rename to learn/examples/parsing-serializing-toml.ts
index 79c8630b8..66e1d6f50 100644
--- a/examples/parsing-serializing-toml.ts
+++ b/learn/examples/parsing-serializing-toml.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run <url>
- * @resource {/examples/import-export} Example: Importing & Exporting
+ * @resource {/learn/examples/import-export} Example: Importing & Exporting
  * @resource {https://toml.io} Spec: TOML
  * @group Encoding
  *
diff --git a/examples/parsing-serializing-yaml.ts b/learn/examples/parsing-serializing-yaml.ts
similarity index 92%
rename from examples/parsing-serializing-yaml.ts
rename to learn/examples/parsing-serializing-yaml.ts
index ff47db525..c005af5b4 100644
--- a/examples/parsing-serializing-yaml.ts
+++ b/learn/examples/parsing-serializing-yaml.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run <url>
- * @resource {/examples/import-export} Example: Importing & Exporting
+ * @resource {/learn/examples/import-export} Example: Importing & Exporting
  * @resource {https://yaml.org} Spec: YAML
  * @group Encoding
  *
diff --git a/examples/path-operations.ts b/learn/examples/path-operations.ts
similarity index 100%
rename from examples/path-operations.ts
rename to learn/examples/path-operations.ts
diff --git a/examples/permissions.ts b/learn/examples/permissions.ts
similarity index 100%
rename from examples/permissions.ts
rename to learn/examples/permissions.ts
diff --git a/examples/pid.ts b/learn/examples/pid.ts
similarity index 100%
rename from examples/pid.ts
rename to learn/examples/pid.ts
diff --git a/examples/piping-streams.ts b/learn/examples/piping-streams.ts
similarity index 97%
rename from examples/piping-streams.ts
rename to learn/examples/piping-streams.ts
index 3c23cebb8..acded4372 100644
--- a/examples/piping-streams.ts
+++ b/learn/examples/piping-streams.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --allow-read --allow-write <url>
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream} MDN: ReadableStream
- * @resource {/examples/tcp-listener} Example: TCP Listener
+ * @resource {/learn/examples/tcp-listener} Example: TCP Listener
  * @group Network
  *
  * Deno implements web-standard streams which comes with many advantages. One of the most useful
diff --git a/examples/postgres.ts b/learn/examples/postgres.ts
similarity index 100%
rename from examples/postgres.ts
rename to learn/examples/postgres.ts
diff --git a/examples/prompts.ts b/learn/examples/prompts.ts
similarity index 100%
rename from examples/prompts.ts
rename to learn/examples/prompts.ts
diff --git a/examples/queues.ts b/learn/examples/queues.ts
similarity index 100%
rename from examples/queues.ts
rename to learn/examples/queues.ts
diff --git a/examples/reading-files.ts b/learn/examples/reading-files.ts
similarity index 100%
rename from examples/reading-files.ts
rename to learn/examples/reading-files.ts
diff --git a/examples/reading-system-metrics.ts b/learn/examples/reading-system-metrics.ts
similarity index 100%
rename from examples/reading-system-metrics.ts
rename to learn/examples/reading-system-metrics.ts
diff --git a/examples/redis.ts b/learn/examples/redis.ts
similarity index 100%
rename from examples/redis.ts
rename to learn/examples/redis.ts
diff --git a/examples/rsa-signature.ts b/learn/examples/rsa-signature.ts
similarity index 100%
rename from examples/rsa-signature.ts
rename to learn/examples/rsa-signature.ts
diff --git a/examples/sqlite.ts b/learn/examples/sqlite.ts
similarity index 100%
rename from examples/sqlite.ts
rename to learn/examples/sqlite.ts
diff --git a/examples/streaming-files.ts b/learn/examples/streaming-files.ts
similarity index 100%
rename from examples/streaming-files.ts
rename to learn/examples/streaming-files.ts
diff --git a/examples/subprocess-running-files.ts b/learn/examples/subprocess-running-files.ts
similarity index 100%
rename from examples/subprocess-running-files.ts
rename to learn/examples/subprocess-running-files.ts
diff --git a/examples/subprocesses-output.ts b/learn/examples/subprocesses-output.ts
similarity index 100%
rename from examples/subprocesses-output.ts
rename to learn/examples/subprocesses-output.ts
diff --git a/examples/subprocesses-spawn.ts b/learn/examples/subprocesses-spawn.ts
similarity index 100%
rename from examples/subprocesses-spawn.ts
rename to learn/examples/subprocesses-spawn.ts
diff --git a/examples/supabase.ts b/learn/examples/supabase.ts
similarity index 100%
rename from examples/supabase.ts
rename to learn/examples/supabase.ts
diff --git a/examples/symlinks.ts b/learn/examples/symlinks.ts
similarity index 100%
rename from examples/symlinks.ts
rename to learn/examples/symlinks.ts
diff --git a/examples/tcp-connector.ts b/learn/examples/tcp-connector.ts
similarity index 91%
rename from examples/tcp-connector.ts
rename to learn/examples/tcp-connector.ts
index f3be8bbc0..8c1f666f6 100644
--- a/examples/tcp-connector.ts
+++ b/learn/examples/tcp-connector.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.connect} Doc: Deno.connect
- * @resource {/examples/tcp-listener} Example: TCP Listener
+ * @resource {/learn/examples/tcp-listener} Example: TCP Listener
  * @group Network
  *
  * An example of connecting to a TCP server on localhost and writing a 'ping' message to the server.
diff --git a/examples/tcp-echo-server.ts b/learn/examples/tcp-echo-server.ts
similarity index 100%
rename from examples/tcp-echo-server.ts
rename to learn/examples/tcp-echo-server.ts
diff --git a/examples/tcp-listener.ts b/learn/examples/tcp-listener.ts
similarity index 100%
rename from examples/tcp-listener.ts
rename to learn/examples/tcp-listener.ts
diff --git a/examples/temporary-files.ts b/learn/examples/temporary-files.ts
similarity index 100%
rename from examples/temporary-files.ts
rename to learn/examples/temporary-files.ts
diff --git a/examples/timers.ts b/learn/examples/timers.ts
similarity index 100%
rename from examples/timers.ts
rename to learn/examples/timers.ts
diff --git a/examples/tls-connector.ts b/learn/examples/tls-connector.ts
similarity index 93%
rename from examples/tls-connector.ts
rename to learn/examples/tls-connector.ts
index aef8fc9f0..88619bd3d 100644
--- a/examples/tls-connector.ts
+++ b/learn/examples/tls-connector.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --allow-read <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.connectTls} Doc: Deno.connectTls
- * @resource {/examples/tls-listener} Example: TCP/TLS Listener
+ * @resource {/learn/examples/tls-listener} Example: TCP/TLS Listener
  * @group Network
  *
  * An example of connecting to a TCP server using TLS on localhost and writing a 'ping' message to the server.
diff --git a/examples/tls-listener.ts b/learn/examples/tls-listener.ts
similarity index 100%
rename from examples/tls-listener.ts
rename to learn/examples/tls-listener.ts
diff --git a/examples/typescript.ts b/learn/examples/typescript.ts
similarity index 100%
rename from examples/typescript.ts
rename to learn/examples/typescript.ts
diff --git a/examples/udp-connector.ts b/learn/examples/udp-connector.ts
similarity index 93%
rename from examples/udp-connector.ts
rename to learn/examples/udp-connector.ts
index 4c1ce3d16..5644150d8 100644
--- a/examples/udp-connector.ts
+++ b/learn/examples/udp-connector.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --unstable-net <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.connect} Doc: Deno.connect
- * @resource {/examples/udp-listener} Example: UDP Listener
+ * @resource {/learn/examples/udp-listener} Example: UDP Listener
  * @group Unstable APIs
  *
  * <strong>Warning: This is an unstable API that is subject to change or removal at anytime.</strong><br>An example of writing a 'ping' message to a UDP server on localhost.
diff --git a/examples/udp-listener.ts b/learn/examples/udp-listener.ts
similarity index 94%
rename from examples/udp-listener.ts
rename to learn/examples/udp-listener.ts
index b22ebb11c..3b2e57bdd 100644
--- a/examples/udp-listener.ts
+++ b/learn/examples/udp-listener.ts
@@ -4,7 +4,7 @@
  * @tags cli
  * @run --allow-net --unstable-net <url>
  * @resource {https://docs.deno.com/api/deno/~/Deno.listenDatagram} Doc: Deno.listenDatagram
- * @resource {/examples/udp-connector} Example: UDP Connector
+ * @resource {/learn/examples/udp-connector} Example: UDP Connector
  * @group Unstable APIs
  *
  * <strong>Warning: This is an unstable API that is subject to change or removal at anytime.</strong><br>An example of a UDP listener on localhost that will log the message
diff --git a/examples/ulid.ts b/learn/examples/ulid.ts
similarity index 100%
rename from examples/ulid.ts
rename to learn/examples/ulid.ts
diff --git a/examples/unix-cat.ts b/learn/examples/unix-cat.ts
similarity index 100%
rename from examples/unix-cat.ts
rename to learn/examples/unix-cat.ts
diff --git a/examples/unzip-gzipped-file.ts b/learn/examples/unzip-gzipped-file.ts
similarity index 100%
rename from examples/unzip-gzipped-file.ts
rename to learn/examples/unzip-gzipped-file.ts
diff --git a/examples/url-parsing.ts b/learn/examples/url-parsing.ts
similarity index 100%
rename from examples/url-parsing.ts
rename to learn/examples/url-parsing.ts
diff --git a/examples/uuids.ts b/learn/examples/uuids.ts
similarity index 100%
rename from examples/uuids.ts
rename to learn/examples/uuids.ts
diff --git a/examples/walking-directories.ts b/learn/examples/walking-directories.ts
similarity index 100%
rename from examples/walking-directories.ts
rename to learn/examples/walking-directories.ts
diff --git a/examples/watching-files.ts b/learn/examples/watching-files.ts
similarity index 100%
rename from examples/watching-files.ts
rename to learn/examples/watching-files.ts
diff --git a/examples/web-workers.ts b/learn/examples/web-workers.ts
similarity index 100%
rename from examples/web-workers.ts
rename to learn/examples/web-workers.ts
diff --git a/examples/webassembly.ts b/learn/examples/webassembly.ts
similarity index 100%
rename from examples/webassembly.ts
rename to learn/examples/webassembly.ts
diff --git a/examples/websocket.ts b/learn/examples/websocket.ts
similarity index 94%
rename from examples/websocket.ts
rename to learn/examples/websocket.ts
index 05159e93a..b4c3b1812 100644
--- a/examples/websocket.ts
+++ b/learn/examples/websocket.ts
@@ -3,7 +3,7 @@
  * @difficulty beginner
  * @tags cli, deploy, web
  * @run --allow-net <url>
- * @resource {/examples/http-server-websocket} HTTP Server: WebSockets
+ * @resource {/learn/examples/http-server-websocket} HTTP Server: WebSockets
  * @resource {https://developer.mozilla.org/en-US/docs/Web/API/WebSocket} MDN: WebSocket
  * @group Network
  *
diff --git a/examples/writing-files.ts b/learn/examples/writing-files.ts
similarity index 100%
rename from examples/writing-files.ts
rename to learn/examples/writing-files.ts
diff --git a/examples/writing-tests.ts b/learn/examples/writing-tests.ts
similarity index 100%
rename from examples/writing-tests.ts
rename to learn/examples/writing-tests.ts
diff --git a/learn/index.examples.tsx b/learn/index.examples.tsx
new file mode 100644
index 000000000..05090a3b1
--- /dev/null
+++ b/learn/index.examples.tsx
@@ -0,0 +1,33 @@
+import { walkSync } from "@std/fs/walk";
+import ExamplePage from "./_pages/ExamplePage.tsx";
+import { ExampleFromFileSystem } from "./types.ts";
+import { parseExample } from "./utils/parseExample.ts";
+import { sidebar as sidebar_ } from "./tutorials/_data.ts";
+
+export const layout = "raw_with_sidebar.tsx";
+
+export const sidebar = sidebar_;
+export const toc = [];
+
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
+  const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
+
+  const examples = files.map((file) => {
+    const content = Deno.readTextFileSync(file.path);
+
+    return {
+      name: file.name,
+      content,
+      label: file.name.replace(".ts", ""),
+      parsed: parseExample(file.name, content),
+    } as ExampleFromFileSystem;
+  });
+
+  for (const example of examples) {
+    yield {
+      url: `/learn/examples/${example.label}/index.html`,
+      title: `${example.parsed.title} - Deno by Example`,
+      content: <ExamplePage example={example} />,
+    };
+  }
+}
diff --git a/learn/index.tsx b/learn/index.tsx
new file mode 100644
index 000000000..e43b13cb2
--- /dev/null
+++ b/learn/index.tsx
@@ -0,0 +1,40 @@
+import LandingPage from "./_pages/LandingPage.tsx";
+
+export const layout = "raw.tsx";
+export const sidebar = [
+  {
+    title: "Runtime",
+    href: "/runtime/",
+    items: [],
+  },
+  {
+    title: "API reference",
+    href: "/api/deno/",
+    items: [],
+  },
+  {
+    title: "Learning hub",
+    href: "/learn/",
+    items: [],
+  },
+  {
+    title: "Deploy",
+    href: "/deploy/",
+    items: [],
+  },
+  {
+    title: "Subhosting",
+    href: "/subhosting/",
+    items: [],
+  },
+];
+
+export const toc = [];
+
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
+  yield {
+    url: `/learn/index.html`,
+    title: `Learning Hub`,
+    content: <LandingPage />,
+  };
+}
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
new file mode 100644
index 000000000..0287eb724
--- /dev/null
+++ b/learn/tutorials/_data.ts
@@ -0,0 +1,734 @@
+export const sidebar = [
+  {
+    title: "Basics",
+    items: [
+      {
+        label: "What is Deno?",
+        id:
+          "https://www.youtube.com/watch?v=KPTOo4k8-GE&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe",
+        type: "video",
+      },
+      {
+        label: "Run a script",
+        id: "/learn/tutorials/run_script/",
+        type: "tutorial",
+      },
+      {
+        label: "Hello World",
+        id: "/learn/examples/hello-world/",
+        type: "example",
+      },
+      {
+        label: "Built in TypeScript support",
+        id: "/learn/examples/typescript/",
+        type: "example",
+      },
+      {
+        label: "Your Deno Development Environment",
+        id:
+          "https://www.youtube.com/watch?v=BFfrGrLm2tw&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=3",
+        type: "video",
+      },
+      {
+        label: "Initialize a project",
+        id: "/learn/tutorials/initialize_project/",
+        type: "tutorial",
+      },
+      {
+        label: "Executable scripts",
+        id: "/learn/tutorials/hashbang/",
+        type: "tutorial",
+      },
+      {
+        label: "All-in-one tooling",
+        id:
+          "https://www.youtube.com/watch?v=-4e9DkUrCr4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=5",
+        type: "video",
+      },
+      {
+        label: "Tasks and configuration with deno.json",
+        id:
+          "https://www.youtube.com/watch?v=bTmO5Tfgke4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=10",
+        type: "video",
+      },
+      {
+        label: "Update from CommonJS to ESM",
+        id: "/learn/tutorials/cjs_to_esm/",
+        type: "tutorial",
+      },
+
+      {
+        label: "Import and export functions",
+        id: "/learn/examples/import-export",
+        type: "example",
+      },
+      {
+        label: "Interoperability with Node.js",
+        id:
+          "https://www.youtube.com/watch?v=mgX1ymfqPSQ&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=2",
+        type: "video",
+      },
+      {
+        label: "Introduction to Deno APIs",
+        id:
+          "https://www.youtube.com/watch?v=p28ujFMrdA0&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=7",
+        type: "video",
+      },
+      {
+        label: "Simple file server",
+        id: "/learn/tutorials/file_server/",
+        type: "tutorial",
+      },
+    ],
+  },
+  {
+    title: "Modules and package management",
+    items: [
+      {
+        label: "Use Node.js' built-in modules",
+        id: "/learn/examples/node/",
+        type: "example",
+      },
+      {
+        label: "Import modules from npm",
+        id: "/learn/examples/npm/",
+        type: "example",
+      },
+      {
+        label: "Backward Compatibility with Node.js and npm",
+        id:
+          "https://www.youtube.com/watch?v=QPLchkJ7eas&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=12",
+        type: "video",
+      },
+      {
+        label: "ECMAScript Modules in Deno",
+        id:
+          "https://www.youtube.com/watch?v=cTFBiwYY3vs&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=9",
+        type: "video",
+      },
+      {
+        label: "Publishing Modules with JSR",
+        id:
+          "https://www.youtube.com/watch?v=7uiL4WYvZVs&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=8",
+        type: "video",
+      },
+    ],
+  },
+
+  {
+    title: "Web standard APIs",
+    items: [
+      {
+        label: "Browser APIs in Deno",
+        id:
+          "https://www.youtube.com/watch?v=oxVwTT-rZRo&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=6",
+        type: "video",
+      },
+      {
+        label: "Manipulating & parsing URLs",
+        id: "/learn/examples/url-parsing/",
+        type: "example",
+      },
+      {
+        label: "Fetch and stream data",
+        id: "/learn/tutorials/fetch_data/",
+        type: "tutorial",
+      },
+      {
+        label: "Set timeout and intervals",
+        id: "/learn/examples/timers/",
+        type: "example",
+      },
+      {
+        label: "Logging with colors",
+        id: "/learn/examples/color-logging/",
+        type: "example",
+      },
+      {
+        label: "Web workers",
+        id: "/learn/examples/web-workers/",
+        type: "example",
+      },
+      {
+        label: "Web assembly",
+        id: "/learn/examples/webassembly/",
+        type: "example",
+      },
+    ],
+  },
+
+  {
+    title: "Web frameworks and libraries",
+    items: [
+      {
+        label: "TypeScript and JSX in Deno",
+        id:
+          "https://www.youtube.com/watch?v=KoM8ahe8O74&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=11",
+        type: "video",
+      },
+      {
+        label: "Build a React App",
+        id: "/learn/tutorials/react/",
+        type: "tutorial",
+      },
+      {
+        label: "Build a React app with create-vite",
+        id: "/learn/tutorials/create-react/",
+        type: "tutorial",
+      },
+      {
+        label: "Build a Next.js app",
+        id: "/learn/tutorials/next/",
+        type: "tutorial",
+      },
+      {
+        label: "Build a Fresh app",
+        id: "https://fresh.deno.dev/docs/getting-started/create-a-project",
+        type: "tutorial",
+      },
+      {
+        label: "Build a Vue app",
+        id: "/learn/tutorials/vue/",
+        type: "tutorial",
+      },
+      {
+        label: "Use Express with Deno",
+        id: "/learn/tutorials/express/",
+        type: "tutorial",
+      },
+      {
+        label: "How to use Apollo with Deno",
+        id: "/learn/tutorials/apollo/",
+        type: "tutorial",
+      },
+      {
+        label: "Build an API server with TypeScript",
+        id:
+          "https://www.youtube.com/watch?v=J8kZ-s-5-ms&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=13",
+        type: "video",
+      },
+    ],
+  },
+  {
+    title: "Deploying Deno projects",
+    items: [
+      {
+        label: "AWS Lambda",
+        id: "/learn/tutorials/aws_lambda/",
+        type: "tutorial",
+      },
+      {
+        label: "Deploy Deno to AWS Lambda",
+        id:
+          "https://www.youtube.com/watch?v=_xLOrT3cWK4&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=17",
+        type: "video",
+      },
+      {
+        label: "AWS Lightsail",
+        id: "/learn/tutorials/aws_lightsail/",
+        type: "tutorial",
+      },
+      {
+        label: "Cloudflare workers",
+        id: "/learn/tutorials/cloudflare_workers/",
+        type: "tutorial",
+      },
+      {
+        label: "Digital Ocean",
+        id: "/learn/tutorials/digital_ocean/",
+        type: "tutorial",
+      },
+      {
+        label: "Google Cloud Run",
+        id: "/learn/tutorials/google_cloud_run/",
+        type: "tutorial",
+      },
+      {
+        label: "Kinsta",
+        id: "/learn/tutorials/kinsta/",
+        type: "tutorial",
+      },
+      {
+        label: "Deploying Deno with Docker",
+        id:
+          "https://www.youtube.com/watch?v=VRryNeYm6yw&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=16",
+        type: "video",
+      },
+    ],
+  },
+  {
+    title: "Connecting to Databases",
+    items: [
+      {
+        label: "Connecting to databases",
+        id: "/learn/tutorials/connecting_to_databases/",
+        type: "tutorial",
+      },
+      {
+        label: "Use MySQL2 with Deno",
+        id: "/learn/tutorials/mysql2/",
+        type: "tutorial",
+      },
+      {
+        label: "Use PlanetScale with Deno",
+        id: "/learn/tutorials/planetscale/",
+        type: "tutorial",
+      },
+      {
+        label: "Use Redis with Deno",
+        id: "/learn/tutorials/redis/",
+        type: "tutorial",
+      },
+      {
+        label: "Mongoose and MongoDB",
+        id: "/learn/tutorials/mongoose/",
+        type: "tutorial",
+      },
+      {
+        label: "Use Prisma with Deno",
+        id: "/learn/tutorials/prisma/",
+        type: "tutorial",
+      },
+      {
+        label: "Connect to Redis",
+        id: "/learn/examples/redis",
+        type: "example",
+      },
+      {
+        label: "Connect to Postgres",
+        id: "/learn/examples/postgres",
+        type: "example",
+      },
+      {
+        label: "Connect to Supabase",
+        id: "/learn/examples/supabase",
+        type: "example",
+      },
+      {
+        label: "Connect to MongoDB",
+        id: "/learn/examples/mongo",
+        type: "example",
+      },
+      {
+        label: "Connect to SQLite",
+        id: "/learn/examples/sqlite",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Encoding",
+    items: [
+      {
+        label: "Hex and base64 encoding",
+        id: "/learn/examples/hex-base64-encoding",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing TOML",
+        id: "/learn/examples/parsing-serializing-toml",
+        type: "example",
+      },
+      {
+        label: "Importing JSON",
+        id: "/learn/examples/importing-json",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing CSV",
+        id: "/learn/examples/parsing-serializing-csv",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing JSON",
+        id: "/learn/examples/parsing-serializing-json",
+        type: "example",
+      },
+      {
+        label: "Parsing and serializing YAML",
+        id: "/learn/examples/parsing-serializing-yaml",
+        type: "example",
+      },
+      {
+        label: "Manipulating byte arrays",
+        id: "/learn/examples/byte-manipulation",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "CLI",
+    items: [
+      {
+        label: "Build a Command Line Utility",
+        id:
+          "https://www.youtube.com/watch?v=TUxj2TS5pNo&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=14",
+        type: "video",
+      },
+      {
+        label: "Input prompts",
+        id: "/learn/examples/prompts",
+        type: "example",
+      },
+      {
+        label: "Permission management",
+        id: "/learn/examples/permissions",
+        type: "example",
+      },
+      {
+        label: "Command line arguments",
+        id: "/learn/examples/command-line-arguments",
+        type: "example",
+      },
+      {
+        label: "Writing tests",
+        id: "/learn/examples/writing-tests",
+        type: "example",
+      },
+      {
+        label: "Getting the Deno version",
+        id: "/learn/examples/deno-version",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Network",
+    items: [
+      {
+        label: "HTTP server: Streaming",
+        id: "/learn/examples/http-server-streaming",
+        type: "example",
+      },
+      {
+        label: "TCP connector: Ping",
+        id: "/learn/examples/tcp-connector",
+        type: "example",
+      },
+      {
+        label: "HTTP server: Routing",
+        id: "/learn/examples/http-server-routing",
+        type: "example",
+      },
+      {
+        label: "HTTP Server: Hello world",
+        id: "/learn/examples/http-server",
+        type: "example",
+      },
+      {
+        label: "TCP Echo Server",
+        id: "/learn/examples/tcp-echo-server",
+        type: "example",
+      },
+      {
+        label: "Piping streams",
+        id: "/learn/examples/piping-streams",
+        type: "example",
+      },
+      {
+        label: "HTTP requests",
+        id: "/learn/examples/http-requests",
+        type: "example",
+      },
+      {
+        label: "HTTP server: CRUD with SQLite3",
+        id: "/learn/examples/http-server-oak-crud-middleware-with-sqlite3-db",
+        type: "example",
+      },
+      {
+        label: "Hono HTTP server",
+        id: "/learn/examples/hono",
+        type: "example",
+      },
+      {
+        label: "TCP listener: Ping",
+        id: "/learn/examples/tcp-listener",
+        type: "example",
+      },
+      {
+        label: "TCP/TLS connector: Ping",
+        id: "/learn/examples/tls-connector",
+        type: "example",
+      },
+      {
+        label: "Running DNS queries",
+        id: "/learn/examples/dns-queries",
+        type: "example",
+      },
+      {
+        label: "HTTP server: WebSockets",
+        id: "/learn/examples/http-server-websocket",
+        type: "example",
+      },
+      {
+        label: "Outbound WebSockets",
+        id: "/learn/examples/websocket",
+        type: "example",
+      },
+      {
+        label: "TCP/TLS listener: Ping",
+        id: "/learn/examples/tls-listener",
+        type: "example",
+      },
+      {
+        label: "HTTP server: Serving files",
+        id: "/learn/examples/http-server-files",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "System",
+    items: [
+      {
+        label: "Handling OS signals",
+        id: "/learn/examples/os-signals",
+        type: "example",
+      },
+      {
+        label: "Benchmarking",
+        id: "/learn/examples/benchmarking",
+        type: "example",
+      },
+      {
+        label: "Create a subprocess",
+        id: "/learn/tutorials/subprocess/",
+        type: "tutorial",
+      },
+      {
+        label: "Subprocess Spawning",
+        id: "/learn/examples/subprocess-running-files",
+        type: "example",
+      },
+      {
+        label: "Collecting output from subprocesses",
+        id: "/learn/examples/subprocesses-output",
+        type: "example",
+      },
+      {
+        label: "Reading system metrics",
+        id: "/learn/examples/reading-system-metrics",
+        type: "example",
+      },
+      {
+        label: "Process information",
+        id: "/learn/examples/pid",
+        type: "example",
+      },
+      {
+        label: "Environment variables",
+        id: "/learn/examples/environment-variables",
+        type: "example",
+      },
+      {
+        label: "Subprocesses: Spawning",
+        id: "/learn/examples/subprocesses-spawn",
+        type: "example",
+      },
+      {
+        label: "Handle OS signals",
+        id: "/learn/tutorials/os_signals/",
+        type: "tutorial",
+      },
+    ],
+  },
+  {
+    title: "FileSystem",
+    items: [
+      {
+        label: "Path operations",
+        id: "/learn/examples/path-operations",
+        type: "example",
+      },
+      {
+        label: "Reading files",
+        id: "/learn/examples/reading-files",
+        type: "example",
+      },
+      {
+        label: "Moving/Renaming files",
+        id: "/learn/examples/moving-renaming-files",
+        type: "example",
+      },
+      {
+        label: "Watching the filesystem",
+        id: "/learn/examples/watching-files",
+        type: "example",
+      },
+      {
+        label: "Creating & removing directories",
+        id: "/learn/examples/create-remove-directories",
+        type: "example",
+      },
+      {
+        label: "Unix cat",
+        id: "/learn/examples/unix-cat",
+        type: "example",
+      },
+      {
+        label: "Checking for file existence",
+        id: "/learn/examples/checking-file-existence",
+        type: "example",
+      },
+      {
+        label: "Creating & resolving symlinks",
+        id: "/learn/examples/symlinks",
+        type: "example",
+      },
+      {
+        label: "Temporary files & directories",
+        id: "/learn/examples/temporary-files",
+        type: "example",
+      },
+      {
+        label: "Walking directories",
+        id: "/learn/examples/walking-directories",
+        type: "example",
+      },
+      {
+        label: "Streaming file operations",
+        id: "/learn/examples/streaming-files",
+        type: "example",
+      },
+      {
+        label: "Unzip gzipped file",
+        id: "/learn/examples/unzip-gzipped-file",
+        type: "example",
+      },
+      {
+        label: "Deleting files",
+        id: "/learn/examples/deleting-files",
+        type: "example",
+      },
+      {
+        label: "Writing files",
+        id: "/learn/examples/writing-files",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Crypotography",
+    items: [
+      {
+        label: "Generating & validating UUIDs",
+        id: "/learn/examples/uuids",
+        type: "example",
+      },
+      {
+        label: "ULID",
+        id: "/learn/examples/ulid",
+        type: "example",
+      },
+      {
+        label: "Hashing",
+        id: "/learn/examples/hashing",
+        type: "example",
+      },
+      {
+        label: "RSASSA-PKCS1-v1_5 Signature and Verification",
+        id: "/learn/examples/rsa-signature",
+        type: "example",
+      },
+      {
+        label: "HMAC Generation and Verification",
+        id: "/learn/examples/hmac-generate-verify",
+        type: "example",
+      },
+      {
+        label: "AES Encryption and Decryption",
+        id: "/learn/examples/aes-encryption",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Advanced",
+    items: [
+      {
+        label: "File system events",
+        id: "/learn/tutorials/file_system_events/",
+        type: "tutorial",
+      },
+      {
+        label: "Module Metadata",
+        id: "/learn/tutorials/module_metadata/",
+        type: "tutorial",
+      },
+      {
+        label: "File Based Routing",
+        id: "/learn/tutorials/file_based_routing/",
+        type: "tutorial",
+      },
+      {
+        label: "Build a chat app with WebSockets",
+        id: "/learn/tutorials/chat_app/",
+        type: "tutorial",
+      },
+      {
+        label: "Build a Real-Time WebSocket Application",
+        id:
+          "https://www.youtube.com/watch?v=FC4IrkHEg4A&list=PLvvLnBDNuTEov9EBIp3MMfHlBxaKGRWTe&index=15",
+        type: "video",
+      },
+      {
+        label: "Build a word finder app",
+        id: "/learn/tutorials/word_finder/",
+        type: "tutorial",
+      },
+      {
+        label: "Connect to OpenAI - Chat completion",
+        id: "/learn/examples/openai-chat-completion/",
+        type: "example",
+      },
+      {
+        label: "User Data Processing with Deno Collections",
+        id: "/learn/examples/data-processing",
+        type: "example",
+      },
+      {
+        label: "Exponential backoff",
+        id: "/learn/examples/exponential-backoff/",
+        type: "example",
+      },
+    ],
+  },
+  {
+    title: "Unstable APIs",
+    items: [
+      {
+        label: "Deno KV watch",
+        id: "/learn/examples/kv-watch",
+        type: "example",
+      },
+      {
+        label: "Deno Cron",
+        id: "/learn/examples/cron",
+        type: "example",
+      },
+      {
+        label: "UDP listener: Ping",
+        id: "/learn/examples/udp-listener",
+        type: "example",
+      },
+      {
+        label: "Deno queues",
+        id: "/learn/examples/queues",
+        type: "example",
+      },
+      {
+        label: "UDP connector: Ping",
+        id: "/learn/examples/udp-connector",
+        type: "example",
+      },
+      {
+        label: "Deno KV: Key/Value database",
+        id: "/learn/examples/kv",
+        type: "example",
+      },
+    ],
+  },
+];
+
+export const sectionTitle = "Learning hub";
+export const sectionHref = "/learn/";
diff --git a/runtime/tutorials/how_to_with_npm/apollo.md b/learn/tutorials/apollo.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/apollo.md
rename to learn/tutorials/apollo.md
index dcb114786..decc96989 100644
--- a/runtime/tutorials/how_to_with_npm/apollo.md
+++ b/learn/tutorials/apollo.md
@@ -3,6 +3,7 @@ title: "How to use Apollo with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/apollo/
   - /runtime/manual/node/how_to_with_npm/apollo/
+  - /runtime/tutorials/how_to_with_npm/apollo/
 ---
 
 [Apollo Server](https://www.apollographql.com/) is a GraphQL server that you can
diff --git a/runtime/tutorials/aws_lambda.md b/learn/tutorials/aws_lambda.md
similarity index 99%
rename from runtime/tutorials/aws_lambda.md
rename to learn/tutorials/aws_lambda.md
index 2d3e345fc..1a827898e 100644
--- a/runtime/tutorials/aws_lambda.md
+++ b/learn/tutorials/aws_lambda.md
@@ -1,5 +1,7 @@
 ---
 title: "How to Deploy Deno to AWS Lambda"
+oldUrl:
+- /runtime/tutorials/aws_lambda/
 ---
 
 AWS Lambda is a serverless computing service provided by Amazon Web Services. It
diff --git a/runtime/tutorials/aws_lightsail.md b/learn/tutorials/aws_lightsail.md
similarity index 98%
rename from runtime/tutorials/aws_lightsail.md
rename to learn/tutorials/aws_lightsail.md
index 3d35ac1ee..e23b20d8b 100644
--- a/runtime/tutorials/aws_lightsail.md
+++ b/learn/tutorials/aws_lightsail.md
@@ -1,6 +1,8 @@
 ---
 title: Deploy Deno to Amazon Lightsail
-oldUrl: /runtime/manual/advanced/deploying_deno/aws_lightsail/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/aws_lightsail/
+- /runtime/tutorials/aws_lightsail/
 ---
 
 [Amazon Lightsail](https://aws.amazon.com/lightsail/) is the easiest and
diff --git a/runtime/tutorials/chat_app.md b/learn/tutorials/chat_app.md
similarity index 99%
rename from runtime/tutorials/chat_app.md
rename to learn/tutorials/chat_app.md
index b1f13e8cb..dc647ccf8 100644
--- a/runtime/tutorials/chat_app.md
+++ b/learn/tutorials/chat_app.md
@@ -2,6 +2,7 @@
 title: "Chat application with WebSockets"
 oldUrl:
   - /runtime/manual/examples/chat_app/
+  - /runtime/tutorials/chat_app/
 ---
 
 WebSockets are a powerful tool for building real-time applications. They allow
diff --git a/runtime/tutorials/cjs_to_esm.md b/learn/tutorials/cjs_to_esm.md
similarity index 97%
rename from runtime/tutorials/cjs_to_esm.md
rename to learn/tutorials/cjs_to_esm.md
index 3e57d2fb4..f7ee3f711 100644
--- a/runtime/tutorials/cjs_to_esm.md
+++ b/learn/tutorials/cjs_to_esm.md
@@ -1,6 +1,8 @@
 ---
 title: "Updating from CommonJS to ESM"
-oldUrl: /runtime/manual/node/cjs_to_esm
+oldUrl:
+- /runtime/manual/node/cjs_to_esm
+- /runtime/tutorials/cjs_to_esm/
 ---
 
 If your Node.js project uses CommonJS modules (e.g. it uses `require`), you'll
diff --git a/runtime/tutorials/cloudflare_workers.md b/learn/tutorials/cloudflare_workers.md
similarity index 95%
rename from runtime/tutorials/cloudflare_workers.md
rename to learn/tutorials/cloudflare_workers.md
index 491f5c08d..ee2df1fc4 100644
--- a/runtime/tutorials/cloudflare_workers.md
+++ b/learn/tutorials/cloudflare_workers.md
@@ -1,6 +1,8 @@
 ---
 title: "Deploying Deno to Cloudflare Workers"
-oldUrl: /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+- /runtime/tutorials/cloudflare_workers/
 ---
 
 Cloudflare Workers allows you to run JavaScript on Cloudflare's edge network.
diff --git a/runtime/tutorials/connecting_to_databases.md b/learn/tutorials/connecting_to_databases.md
similarity index 95%
rename from runtime/tutorials/connecting_to_databases.md
rename to learn/tutorials/connecting_to_databases.md
index 11d09e1eb..f6ab4b5c6 100644
--- a/runtime/tutorials/connecting_to_databases.md
+++ b/learn/tutorials/connecting_to_databases.md
@@ -1,5 +1,7 @@
 ---
 title: "Connecting to databases"
+oldUrl:
+- /runtime/tutorials/connecting_to_databases/
 ---
 
 It is common for applications to store and retrieve data from databases. Deno
@@ -114,7 +116,7 @@ There are two primary solutions to connect to SQLite in Deno:
 ### Connect to SQLite with the FFI Module
 
 [@db/sqlite](https://jsr.io/@db/sqlite) provides JavaScript bindings to the
-SQLite3 C API, using [Deno FFI](../reference/deno_namespace_apis.md#ffi).
+SQLite3 C API, using [Deno FFI](/runtime/reference/deno_namespace_apis/#ffi).
 
 ```ts
 import { Database } from "jsr:@db/sqlite@0.12";
@@ -147,7 +149,7 @@ To connect to Firebase with Deno, import the
 [firestore npm module](https://firebase.google.com/docs/firestore/quickstart)
 with the [ESM CDN](https://esm.sh/). To learn more about using npm modules in
 Deno with a CDN, see
-[Using npm packages with CDNs](../fundamentals/modules.md#https-imports).
+[Using npm packages with CDNs](/runtime/fundamentals/modules/#https-imports).
 
 ### Connect to Firebase with the firestore npm module
 
@@ -191,7 +193,7 @@ To connect to Supabase with Deno, import the
 [supabase-js npm module](https://supabase.com/docs/reference/javascript) with
 the [esm.sh CDN](https://esm.sh/). To learn more about using npm modules in Deno
 with a CDN, see
-[Using npm packages with CDNs](../fundamentals/modules.md#https-imports).
+[Using npm packages with CDNs](/runtime/fundamentals/modules/#https-imports).
 
 ### Connect to Supabase with the supabase-js npm module
 
@@ -295,7 +297,7 @@ Deno.serve({ port: 3000 }, async () => {
 To make GraphQL client calls in Deno, import the
 [graphql npm module](https://www.npmjs.com/package/graphql) with the
 [esm CDN](https://esm.sh/). To learn more about using npm modules in Deno via
-CDN read [here](../fundamentals/modules.md#https-imports).
+CDN read [here](/runtime/fundamentals/modules/#https-imports).
 
 #### Make GraphQL client calls with the graphql npm module
 
diff --git a/runtime/tutorials/how_to_with_npm/create-react.md b/learn/tutorials/create-react.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/create-react.md
rename to learn/tutorials/create-react.md
index 385329782..9cbf94ae7 100644
--- a/runtime/tutorials/how_to_with_npm/create-react.md
+++ b/learn/tutorials/create-react.md
@@ -1,5 +1,7 @@
 ---
 title: "Build a React app with create-vite"
+oldUrl:
+- /runtime/tutorials/how_to_with_npm/create-react/
 ---
 
 [React](https://reactjs.org) is the most widely used JavaScript frontend
diff --git a/runtime/tutorials/digital_ocean.md b/learn/tutorials/digital_ocean.md
similarity index 98%
rename from runtime/tutorials/digital_ocean.md
rename to learn/tutorials/digital_ocean.md
index 62d524c32..88e2e31ef 100644
--- a/runtime/tutorials/digital_ocean.md
+++ b/learn/tutorials/digital_ocean.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno to Digital Ocean"
-oldUrl: /runtime/manual/advanced/deploying_deno/digital_ocean/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/digital_ocean/
+- /runtime/tutorials/digital_ocean/
 ---
 
 Digital Ocean is a popular cloud infrastructure provider offering a variety of
diff --git a/runtime/tutorials/how_to_with_npm/express.md b/learn/tutorials/express.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/express.md
rename to learn/tutorials/express.md
index 5f67a4d5f..d88183d11 100644
--- a/runtime/tutorials/how_to_with_npm/express.md
+++ b/learn/tutorials/express.md
@@ -3,6 +3,7 @@ title: "How to use Express with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/express/
   - /runtime/manual/node/how_to_with_npm/express/
+  - /runtime/tutorials/how_to_with_npm/express/
 ---
 
 [Express](https://expressjs.com/) is a popular web framework known for being
diff --git a/runtime/tutorials/fetch_data.md b/learn/tutorials/fetch_data.md
similarity index 99%
rename from runtime/tutorials/fetch_data.md
rename to learn/tutorials/fetch_data.md
index 6d2d6a4b7..9e373ce53 100644
--- a/runtime/tutorials/fetch_data.md
+++ b/learn/tutorials/fetch_data.md
@@ -2,6 +2,7 @@
 title: "Fetch and stream data"
 oldUrl:
   - /runtime/manual/examples/fetch_data/
+  - /runtime/tutorials/fetch_data/
 ---
 
 Deno brings several familiar Web APIs to the server-side environment. If you've
diff --git a/runtime/tutorials/file_based_routing.md b/learn/tutorials/file_based_routing.md
similarity index 97%
rename from runtime/tutorials/file_based_routing.md
rename to learn/tutorials/file_based_routing.md
index f3cccdc68..4357b4a7a 100644
--- a/runtime/tutorials/file_based_routing.md
+++ b/learn/tutorials/file_based_routing.md
@@ -1,6 +1,8 @@
 ---
 title: File-based routing
-oldUrl: /examples/http-server-file-router/
+oldUrl:
+- /examples/http-server-file-router/
+- /runtime/tutorials/file_based_routing/
 ---
 
 If you've used frameworks like [Next.js](https://nextjs.org/), you might be
diff --git a/runtime/tutorials/file_server.md b/learn/tutorials/file_server.md
similarity index 99%
rename from runtime/tutorials/file_server.md
rename to learn/tutorials/file_server.md
index f3b1d2a94..202becb11 100644
--- a/runtime/tutorials/file_server.md
+++ b/learn/tutorials/file_server.md
@@ -2,6 +2,7 @@
 title: "Write a file server"
 oldUrl:
   - /runtime/manual/examples/file_server/
+  - /runtime/tutorials/file_server/
 ---
 
 A file server listens for incoming HTTP requests and serves files from the local
diff --git a/runtime/tutorials/file_system_events.md b/learn/tutorials/file_system_events.md
similarity index 96%
rename from runtime/tutorials/file_system_events.md
rename to learn/tutorials/file_system_events.md
index daa9b3deb..6eb17ed6d 100644
--- a/runtime/tutorials/file_system_events.md
+++ b/learn/tutorials/file_system_events.md
@@ -2,6 +2,7 @@
 title: "File system events"
 oldUrl:
   - /runtime/manual/examples/file_system_events/
+  - /runtime/tutorials/file_system_events/
 ---
 
 ## Concepts
diff --git a/runtime/tutorials/google_cloud_run.md b/learn/tutorials/google_cloud_run.md
similarity index 98%
rename from runtime/tutorials/google_cloud_run.md
rename to learn/tutorials/google_cloud_run.md
index ec4a94163..3ccd00f66 100644
--- a/runtime/tutorials/google_cloud_run.md
+++ b/learn/tutorials/google_cloud_run.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy to Google Cloud Run"
-oldUrl: /runtime/manual/advanced/deploying_deno/google_cloud_run/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/google_cloud_run/
+- /runtime/tutorials/google_cloud_run
 ---
 
 [Google Cloud Run](https://cloud.google.com/run) is a managed compute platform
diff --git a/runtime/tutorials/hashbang.md b/learn/tutorials/hashbang.md
similarity index 96%
rename from runtime/tutorials/hashbang.md
rename to learn/tutorials/hashbang.md
index 10a2e9aa3..c082f5712 100644
--- a/runtime/tutorials/hashbang.md
+++ b/learn/tutorials/hashbang.md
@@ -2,6 +2,7 @@
 title: "Executable scripts"
 oldUrl:
   - /runtime/manual/examples/hashbang/
+  - /runtime/tutorials/hashbang/
 ---
 
 Making Deno scripts executable can come in handy when creating small tools or
@@ -77,4 +78,4 @@ Hello!
 🦕 Now you can directly execute Deno scripts from the command line! Remember to
 set the execute permission (`chmod +x`) for your script file, and you’re all set
 to build anything from simple utilities to complex tools. Check out the
-[Deno examples](/examples/) for inspiration on what you can script.
+[Deno examples](/learn/examples/) for inspiration on what you can script.
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png b/learn/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png
rename to learn/tutorials/images/how-to/aws-lightsail/create-container-service-on-aws.png
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png b/learn/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png
rename to learn/tutorials/images/how-to/aws-lightsail/hello-world-from-deno-and-aws-lightsail.png
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png b/learn/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png
rename to learn/tutorials/images/how-to/aws-lightsail/hello-world-from-localhost.png
diff --git a/runtime/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png b/learn/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png
similarity index 100%
rename from runtime/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png
rename to learn/tutorials/images/how-to/aws-lightsail/new-image-on-docker-hub.png
diff --git a/runtime/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png b/learn/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png
similarity index 100%
rename from runtime/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png
rename to learn/tutorials/images/how-to/cloudflare-workers/main-on-cloudflare.png
diff --git a/runtime/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png b/learn/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png
similarity index 100%
rename from runtime/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png
rename to learn/tutorials/images/how-to/digital-ocean/hello-from-deno-and-digital-ocean.png
diff --git a/runtime/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png b/learn/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png
similarity index 100%
rename from runtime/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png
rename to learn/tutorials/images/how-to/digital-ocean/hello-world-from-localhost.png
diff --git a/runtime/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png b/learn/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png
similarity index 100%
rename from runtime/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png
rename to learn/tutorials/images/how-to/digital-ocean/new-deno-image-on-digital-ocean-container-registry.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png b/learn/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png
rename to learn/tutorials/images/how-to/google-cloud-run/hello-from-google-cloud-run.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png b/learn/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png
rename to learn/tutorials/images/how-to/google-cloud-run/hello-world-from-localhost.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png b/learn/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png
rename to learn/tutorials/images/how-to/google-cloud-run/image-in-google-artifact-registry.png
diff --git a/runtime/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png b/learn/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png
similarity index 100%
rename from runtime/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png
rename to learn/tutorials/images/how-to/google-cloud-run/new-repository-in-google-artifact-repository.png
diff --git a/runtime/tutorials/images/how-to/next/dinoapp.gif b/learn/tutorials/images/how-to/next/dinoapp.gif
similarity index 100%
rename from runtime/tutorials/images/how-to/next/dinoapp.gif
rename to learn/tutorials/images/how-to/next/dinoapp.gif
diff --git a/runtime/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png b/learn/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png
similarity index 100%
rename from runtime/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png
rename to learn/tutorials/images/how-to/prisma/1-dinosaurs-in-prisma.png
diff --git a/runtime/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png b/learn/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png
similarity index 100%
rename from runtime/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png
rename to learn/tutorials/images/how-to/prisma/2-dinosaurs-from-api.png
diff --git a/runtime/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png b/learn/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png
similarity index 100%
rename from runtime/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png
rename to learn/tutorials/images/how-to/prisma/3-new-dinosaur-in-prisma.png
diff --git a/runtime/tutorials/images/how-to/react/react-dinosaur-app-demo.gif b/learn/tutorials/images/how-to/react/react-dinosaur-app-demo.gif
similarity index 100%
rename from runtime/tutorials/images/how-to/react/react-dinosaur-app-demo.gif
rename to learn/tutorials/images/how-to/react/react-dinosaur-app-demo.gif
diff --git a/runtime/tutorials/images/how-to/redis/cached-redis-body.png b/learn/tutorials/images/how-to/redis/cached-redis-body.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/cached-redis-body.png
rename to learn/tutorials/images/how-to/redis/cached-redis-body.png
diff --git a/runtime/tutorials/images/how-to/redis/cached-redis-header.png b/learn/tutorials/images/how-to/redis/cached-redis-header.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/cached-redis-header.png
rename to learn/tutorials/images/how-to/redis/cached-redis-header.png
diff --git a/runtime/tutorials/images/how-to/redis/uncached-redis-body.png b/learn/tutorials/images/how-to/redis/uncached-redis-body.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/uncached-redis-body.png
rename to learn/tutorials/images/how-to/redis/uncached-redis-body.png
diff --git a/runtime/tutorials/images/how-to/redis/uncached-redis-header.png b/learn/tutorials/images/how-to/redis/uncached-redis-header.png
similarity index 100%
rename from runtime/tutorials/images/how-to/redis/uncached-redis-header.png
rename to learn/tutorials/images/how-to/redis/uncached-redis-header.png
diff --git a/runtime/tutorials/images/how-to/vue/vue.gif b/learn/tutorials/images/how-to/vue/vue.gif
similarity index 100%
rename from runtime/tutorials/images/how-to/vue/vue.gif
rename to learn/tutorials/images/how-to/vue/vue.gif
diff --git a/runtime/tutorials/images/quick-fix.png b/learn/tutorials/images/quick-fix.png
similarity index 100%
rename from runtime/tutorials/images/quick-fix.png
rename to learn/tutorials/images/quick-fix.png
diff --git a/runtime/tutorials/images/websockets.gif b/learn/tutorials/images/websockets.gif
similarity index 100%
rename from runtime/tutorials/images/websockets.gif
rename to learn/tutorials/images/websockets.gif
diff --git a/runtime/tutorials/images/word_finder.png b/learn/tutorials/images/word_finder.png
similarity index 100%
rename from runtime/tutorials/images/word_finder.png
rename to learn/tutorials/images/word_finder.png
diff --git a/learn/tutorials/initialize_project.md b/learn/tutorials/initialize_project.md
new file mode 100644
index 000000000..c84b48358
--- /dev/null
+++ b/learn/tutorials/initialize_project.md
@@ -0,0 +1,102 @@
+---
+title: "Initialize a project"
+oldUrl:
+---
+
+## Initialize a project
+
+While it is possible to run scripts directly with `deno run`, for larger
+projects it is recommended to create a project structure. This way you can
+organize your code, manage dependencies, script tasks and run tests more easily.
+
+Initialize a new project by running the following command:
+
+```sh
+deno init my_project
+```
+
+Where `my_project` is the name of your project. You can
+[read more about the project structure](/runtime/getting_started/first_project/).
+
+### Run your project
+
+Navigate to the project directory:
+
+```sh
+cd my_project
+```
+
+Then you can run the project directly using the `deno task` command:
+
+```sh
+deno run dev
+```
+
+Take a look in the `deno.json` file in your new project. You should see a `dev`
+task in the "tasks" field.
+
+```json title="deno.json"
+"tasks": {
+  "dev": "deno run --watch main.ts"
+},
+```
+
+The `dev` task is a common task that runs the project in development mode. As
+you can see, it runs the `main.ts` file with the `--watch` flag, which will
+automatically reload the script when changes are made. You can see this in
+action if you open the `main.ts` file and make a change.
+
+### Run the tests
+
+In the project directory run:
+
+```sh
+deno test
+```
+
+This will execute all the tests in the project. You can read more about
+[testing in Deno](/runtime/fundamentals/testing/) and we'll cover tests in a
+little more depth in a later tutorial. At the moment you have one test file,
+`main_test.ts`, which tests the `add` function in `main.ts`.
+
+### Adding to your project
+
+The `main.ts` file serves as the entry point for your application. It’s where
+you’ll write your main program logic. When developing your project you will
+start by removing the default addition program and replace it with your own
+code. For example, if you’re building a web server, this is where you’d set up
+your routes and handle requests.
+
+Beyond the initial files, you’ll likely create additional modules (files) to
+organize your code. Consider grouping related functionality into separate files.
+Remember that Deno [supports ES modules](/runtime/fundamentals/modules/), so you
+can use import and export statements to structure your code.
+
+Example folder structure for a deno project:
+
+```sh
+my_project/
+├── deno.json
+├── main.ts
+├── main_test.ts
+├── routes/
+│   ├── home.ts
+│   ├── about.ts
+├── services/
+│   ├── user.ts
+│   ├── post.ts
+└──utils/
+    ├── logger.ts
+    ├── logger_test.ts
+    ├── validator_test.ts
+    └── validator.ts
+```
+
+This kind of structure keeps your project clean and makes it easier to find and
+manage files.
+
+🦕 Congratulations! Now you know how to create a brand new project with
+`deno init`. Remember that Deno encourages simplicity and avoids complex build
+tools. Keep your project modular, testable, and organized. As your project
+grows, adapt the structure to fit your needs. And most importantly, have fun
+exploring Deno’s capabilities!
diff --git a/runtime/tutorials/kinsta.md b/learn/tutorials/kinsta.md
similarity index 94%
rename from runtime/tutorials/kinsta.md
rename to learn/tutorials/kinsta.md
index f7704abb7..c2a623d9e 100644
--- a/runtime/tutorials/kinsta.md
+++ b/learn/tutorials/kinsta.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno on Kinsta"
-oldUrl: /runtime/manual/advanced/deploying_deno/kinsta/
+oldUrl:
+- /runtime/manual/advanced/deploying_deno/kinsta/
+- runtime/tutorials/kinsta
 ---
 
 [Kinsta Application Hosting](https://kinsta.com/application-hosting) is a
diff --git a/runtime/tutorials/module_metadata.md b/learn/tutorials/module_metadata.md
similarity index 98%
rename from runtime/tutorials/module_metadata.md
rename to learn/tutorials/module_metadata.md
index ed85fc499..e420bdaeb 100644
--- a/runtime/tutorials/module_metadata.md
+++ b/learn/tutorials/module_metadata.md
@@ -2,6 +2,7 @@
 title: "Module metadata"
 oldUrl:
   - /runtime/manual/examples/module_metadata/
+  - /runtime/tutorials/module_metadata/
 ---
 
 ## Concepts
diff --git a/runtime/tutorials/how_to_with_npm/mongoose.md b/learn/tutorials/mongoose.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/mongoose.md
rename to learn/tutorials/mongoose.md
index 0e5374f55..c2a63ebdd 100644
--- a/runtime/tutorials/how_to_with_npm/mongoose.md
+++ b/learn/tutorials/mongoose.md
@@ -2,6 +2,7 @@
 title: "How to use Mongoose with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/mongoose/
+  - /runtime/tutorials/how_to_with_npm/mongoose/
 ---
 
 [Mongoose](https://mongoosejs.com/) is a popular, schema-based library that
diff --git a/runtime/tutorials/how_to_with_npm/mysql2.md b/learn/tutorials/mysql2.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/mysql2.md
rename to learn/tutorials/mysql2.md
index 4cc2cc232..99d0f760f 100644
--- a/runtime/tutorials/how_to_with_npm/mysql2.md
+++ b/learn/tutorials/mysql2.md
@@ -2,6 +2,7 @@
 title: "How to use MySQL2 with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/mysql2/
+  - /runtime/tutorials/how_to_with_npm/mysql2/
 ---
 
 [MySQL](https://www.mysql.com/) is the most popular database in the
diff --git a/runtime/tutorials/how_to_with_npm/next.md b/learn/tutorials/next.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/next.md
rename to learn/tutorials/next.md
index d47955fc8..2f6c7eb70 100644
--- a/runtime/tutorials/how_to_with_npm/next.md
+++ b/learn/tutorials/next.md
@@ -1,5 +1,7 @@
 ---
 title: "Build a Next.js App"
+oldUrl:
+  - /runtime/tutorials/how_to_with_npm/next/
 ---
 
 [Next.js](https://nextjs.org/) is a popular framework for building
diff --git a/runtime/tutorials/os_signals.md b/learn/tutorials/os_signals.md
similarity index 98%
rename from runtime/tutorials/os_signals.md
rename to learn/tutorials/os_signals.md
index bcf292713..2b353b6a0 100644
--- a/runtime/tutorials/os_signals.md
+++ b/learn/tutorials/os_signals.md
@@ -2,6 +2,7 @@
 title: "Handle OS signals"
 oldUrl:
   - /runtime/manual/examples/os_signals/
+  - /runtime/tutorials/os_signals/
 ---
 
 > ⚠️ Windows only supports listening for SIGINT and SIGBREAK as of Deno v1.23.
diff --git a/runtime/tutorials/how_to_with_npm/planetscale.md b/learn/tutorials/planetscale.md
similarity index 98%
rename from runtime/tutorials/how_to_with_npm/planetscale.md
rename to learn/tutorials/planetscale.md
index ba9f2c196..c5829e962 100644
--- a/runtime/tutorials/how_to_with_npm/planetscale.md
+++ b/learn/tutorials/planetscale.md
@@ -2,6 +2,7 @@
 title: "How to use Planetscale with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/planetscale/
+  - /runtime/tutorials/how_to_with_npm/planetscale/
 ---
 
 Planetscale is a MySQL-compatible serverless database that is designed with a
diff --git a/runtime/tutorials/how_to_with_npm/prisma.md b/learn/tutorials/prisma.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/prisma.md
rename to learn/tutorials/prisma.md
index 25a0716b2..7cd4d0fa8 100644
--- a/runtime/tutorials/how_to_with_npm/prisma.md
+++ b/learn/tutorials/prisma.md
@@ -2,6 +2,7 @@
 title: "How to create a RESTful API with Prisma and Oak"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/prisma/
+  - /runtime/tutorials/how_to_with_npm/prisma/
 ---
 
 [Prisma](https://prisma.io) has been one of our top requested modules to work
diff --git a/runtime/tutorials/how_to_with_npm/react.md b/learn/tutorials/react.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/react.md
rename to learn/tutorials/react.md
index 7d5815674..844f1c7f9 100644
--- a/runtime/tutorials/how_to_with_npm/react.md
+++ b/learn/tutorials/react.md
@@ -3,6 +3,7 @@ title: "Build a React app with a starter template"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/react/
   - /runtime/manual/basics/react/
+  - /runtime/tutorials/how_to_with_npm/react/
 ---
 
 [React](https://reactjs.org) is the most widely used JavaScript frontend
diff --git a/runtime/tutorials/how_to_with_npm/redis.md b/learn/tutorials/redis.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/redis.md
rename to learn/tutorials/redis.md
index cfeaba282..4f03c5645 100644
--- a/runtime/tutorials/how_to_with_npm/redis.md
+++ b/learn/tutorials/redis.md
@@ -2,6 +2,7 @@
 title: "How to use Redis with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/redis/
+  - /runtime/tutorials/how_to_with_npm/redis/
 ---
 
 [Redis](https://redis.io/) is an in-memory data store you can use for caching,
diff --git a/runtime/tutorials/hello_world.md b/learn/tutorials/run_script.md
similarity index 50%
rename from runtime/tutorials/hello_world.md
rename to learn/tutorials/run_script.md
index d994893bd..c7750515b 100644
--- a/runtime/tutorials/hello_world.md
+++ b/learn/tutorials/run_script.md
@@ -1,8 +1,9 @@
 ---
-title: "Hello World"
+title: "Run a script"
 oldUrl:
   - /runtime/manual/examples/hello_world/
   - /runtime/tutorials/init_project/
+  - /runtime/tutorials/hello_world/
 ---
 
 Deno is a secure runtime for JavaScript and TypeScript.
@@ -98,102 +99,6 @@ Hello Sarah
 Hello Kai
 ```
 
-## Initialize a project
-
-As you've just seen, while it is possible to run scripts directly with
-`deno run`, for larger projects it is recommended to create a project structure.
-This way you can organize your code, manage dependencies, script tasks and run
-tests more easily.
-
-Initialize a new project by running the following command:
-
-```sh
-deno init my_project
-```
-
-Where `my_project` is the name of your project. You can
-[read more about the project structure](/runtime/getting_started/first_project/).
-
-### Run your project
-
-Navigate to the project directory:
-
-```sh
-cd my_project
-```
-
-Then you can run the project directly using the `deno task` command:
-
-```sh
-deno task dev
-```
-
-Take a look in the `deno.json` file in your new project. You should see a `dev`
-task in the "tasks" field.
-
-```json title="deno.json"
-"tasks": {
-  "dev": "deno run --watch main.ts"
-},
-```
-
-The `dev` task is a common task that runs the project in development mode. As
-you can see, it runs the `main.ts` file with the `--watch` flag, which will
-automatically reload the script when changes are made. You can see this in
-action if you open the `main.ts` file and make a change.
-
-### Run the tests
-
-In the project directory run:
-
-```sh
-deno test
-```
-
-This will execute all the tests in the project. You can read more about
-[testing in Deno](/runtime/fundamentals/testing/) and we'll cover tests in a
-little more depth in a later tutorial. At the moment you have one test file,
-`main_test.ts`, which tests the `add` function in `main.ts`.
-
-### Adding to your project
-
-The `main.ts` file serves as the entry point for your application. It’s where
-you’ll write your main program logic. When developing your project you will
-start by removing the default addition program and replace it with your own
-code. For example, if you’re building a web server, this is where you’d set up
-your routes and handle requests.
-
-Beyond the initial files, you’ll likely create additional modules (files) to
-organize your code. Consider grouping related functionality into separate files.
-Remember that Deno [supports ES modules](/runtime/fundamentals/modules/), so you
-can use import and export statements to structure your code.
-
-Example folder structure for a deno project:
-
-```sh
-my_project/
-├── deno.json
-├── main.ts
-├── main_test.ts
-├── routes/
-│   ├── home.ts
-│   ├── about.ts
-├── services/
-│   ├── user.ts
-│   ├── post.ts
-└──utils/
-    ├── logger.ts
-    ├── logger_test.ts
-    ├── validator_test.ts
-    └── validator.ts
-```
-
-This kind of structure keeps your project clean and makes it easier to find and
-manage files.
-
 🦕 Congratulations! Now you know how to create a simple script in both JS and TS
-and how to run it in Deno with the `deno run` command and how to create a brand
-new project with `deno init`. Remember that Deno encourages simplicity and
-avoids complex build tools. Keep your project modular, testable, and organized.
-As your project grows, adapt the structure to fit your needs. And most
-importantly, have fun exploring Deno’s capabilities!
+and how to run it in Deno with the `deno run` command. Keep exploring the
+tutorials and examples to learn more about Deno!
diff --git a/runtime/tutorials/subprocess.md b/learn/tutorials/subprocess.md
similarity index 98%
rename from runtime/tutorials/subprocess.md
rename to learn/tutorials/subprocess.md
index 7befa2a5b..66bc01781 100644
--- a/runtime/tutorials/subprocess.md
+++ b/learn/tutorials/subprocess.md
@@ -2,6 +2,7 @@
 title: "Creating a subprocess"
 oldUrl:
   - /runtime/manual/examples/subprocess/
+  - /runtime/tutorials/subprocess/
 ---
 
 ## Concepts
diff --git a/runtime/tutorials/how_to_with_npm/vue.md b/learn/tutorials/vue.md
similarity index 99%
rename from runtime/tutorials/how_to_with_npm/vue.md
rename to learn/tutorials/vue.md
index 71a466bad..a6479cb2e 100644
--- a/runtime/tutorials/how_to_with_npm/vue.md
+++ b/learn/tutorials/vue.md
@@ -2,6 +2,7 @@
 title: "Build a Vue.js App"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/vue/
+  - /runtime/tutorials/how_to_with_npm/vue/
 ---
 
 [Vue.js](https://vuejs.org/) is a progressive front-end JavaScript framework. It
diff --git a/runtime/tutorials/word_finder.md b/learn/tutorials/word_finder.md
similarity index 99%
rename from runtime/tutorials/word_finder.md
rename to learn/tutorials/word_finder.md
index 422ab13f2..9dc096d70 100644
--- a/runtime/tutorials/word_finder.md
+++ b/learn/tutorials/word_finder.md
@@ -2,6 +2,7 @@
 title: "Building a word finder app with Deno"
 oldUrl:
   - /runtime/manual/examples/word_finder/
+  - /runtime/tutorials/word_finder/
 ---
 
 ## Getting Started
diff --git a/learn/types.ts b/learn/types.ts
new file mode 100644
index 000000000..3021ba297
--- /dev/null
+++ b/learn/types.ts
@@ -0,0 +1,56 @@
+export const TAGS = {
+  cli: {
+    title: "cli",
+    description: "Works in Deno CLI",
+  },
+  deploy: {
+    title: "deploy",
+    description: "Works on Deno Deploy",
+  },
+  web: {
+    title: "web",
+    description: "Works in on the Web",
+  },
+};
+
+export const DIFFICULTIES = {
+  beginner: {
+    title: "Beginner",
+    description: "No significant prior knowledge is required for this example.",
+  },
+  intermediate: {
+    title: "Intermediate",
+    description: "Some prior knowledge is needed for this example.",
+  },
+};
+
+export type ExampleFromFileSystem = {
+  name: string;
+  content: string;
+  label: string;
+  parsed: Example;
+};
+
+export interface Example {
+  id: string;
+  title: string;
+  description: string;
+  difficulty: keyof typeof DIFFICULTIES;
+  tags: (keyof typeof TAGS)[];
+  additionalResources: [string, string][];
+  run?: string;
+  playground?: string;
+  files: ExampleFile[];
+  group: string;
+  sortOrder: any;
+}
+
+export interface ExampleFile {
+  name: string;
+  snippets: ExampleSnippet[];
+}
+
+export interface ExampleSnippet {
+  text: string;
+  code: string;
+}
diff --git a/learn/utils/parseExample.ts b/learn/utils/parseExample.ts
new file mode 100644
index 000000000..ec32ccaf4
--- /dev/null
+++ b/learn/utils/parseExample.ts
@@ -0,0 +1,162 @@
+import { DIFFICULTIES, Example, ExampleFile, TAGS } from "../types.ts";
+
+export function parseExample(id: string, file: string): Example {
+  // Extract the multi line JS doc comment at the top of the file
+  const [, jsdoc, rest] = file.match(/^\s*\/\*\*(.*?)\*\/\s*(.*)/s) || [];
+
+  // Extract the @key value pairs from the JS doc comment
+  let description = "";
+  const kvs: Record<string, string> = {};
+  const resources = [];
+  for (let line of jsdoc.split("\n")) {
+    line = line.trim().replace(/^\*/, "").trim();
+    const [, key, value] = line.match(/^\s*@(\w+)\s+(.*)/) || [];
+    if (key) {
+      if (key === "resource") {
+        resources.push(value);
+      } else {
+        kvs[key] = value.trim();
+      }
+    } else {
+      description += " " + line;
+    }
+  }
+  description = description.trim();
+
+  // Separate the code into snippets.
+  const files: ExampleFile[] = [
+    {
+      name: "",
+      snippets: [],
+    },
+  ];
+  let parseMode = "code";
+  let currentFile = files[0];
+  let text = "";
+  let code = "";
+
+  for (const line of rest.split("\n")) {
+    const trimmedLine = line.trim();
+    if (parseMode == "code") {
+      if (line.startsWith("// File:")) {
+        if (text || code.trimEnd()) {
+          code = code.trimEnd();
+          currentFile.snippets.push({ text, code });
+          text = "";
+          code = "";
+        }
+        const name = line.slice(8).trim();
+        if (currentFile.snippets.length == 0) {
+          currentFile.name = name;
+        } else {
+          currentFile = {
+            name,
+            snippets: [],
+          };
+          files.push(currentFile);
+        }
+      } else if (line.startsWith("/* File:")) {
+        if (text || code.trimEnd()) {
+          code = code.trimEnd();
+          currentFile.snippets.push({ text, code });
+          text = "";
+          code = "";
+        }
+        const name = line.slice(8).trim();
+        if (currentFile.snippets.length == 0) {
+          currentFile.name = name;
+        } else {
+          currentFile = {
+            name,
+            snippets: [],
+          };
+          files.push(currentFile);
+        }
+        parseMode = "file";
+      } else if (
+        trimmedLine.startsWith("// deno-lint-ignore") ||
+        trimmedLine.startsWith("//deno-lint-ignore") ||
+        trimmedLine.startsWith("// deno-fmt-ignore") ||
+        trimmedLine.startsWith("//deno-fmt-ignore")
+      ) {
+        // skip deno directives
+      } else if (trimmedLine.startsWith("//-")) {
+        code += line.replace("//-", "//") + "\n";
+      } else if (trimmedLine.startsWith("//")) {
+        if (text || code.trimEnd()) {
+          code = code.trimEnd();
+          currentFile.snippets.push({ text, code });
+        }
+        text = trimmedLine.slice(2).trim();
+        code = "";
+        parseMode = "comment";
+      } else {
+        code += line + "\n";
+      }
+    } else if (parseMode == "comment") {
+      if (
+        trimmedLine.startsWith("// deno-lint-ignore") ||
+        trimmedLine.startsWith("//deno-lint-ignore") ||
+        trimmedLine.startsWith("// deno-fmt-ignore") ||
+        trimmedLine.startsWith("//deno-fmt-ignore")
+      ) {
+        // skip deno directives
+      } else if (trimmedLine.startsWith("//")) {
+        text += " " + trimmedLine.slice(2).trim();
+      } else {
+        code += line + "\n";
+        parseMode = "code";
+      }
+    } else if (parseMode == "file") {
+      if (line == "*/") {
+        parseMode = "code";
+      } else {
+        code += line + "\n";
+      }
+    }
+  }
+  if (text || code.trimEnd()) {
+    code = code.trimEnd();
+    currentFile.snippets.push({ text, code });
+  }
+
+  if (!kvs.title) {
+    throw new Error("Missing title in JS doc comment.");
+  }
+
+  const tags = kvs.tags.split(",").map((s) => s.trim() as keyof typeof TAGS);
+  for (const tag of tags) {
+    if (!TAGS[tag]) {
+      throw new Error(`Unknown tag '${tag}'`);
+    }
+  }
+
+  const difficulty = kvs.difficulty as keyof typeof DIFFICULTIES;
+  if (!DIFFICULTIES[difficulty]) {
+    throw new Error(`Unknown difficulty '${difficulty}'`);
+  }
+
+  const additionalResources: [string, string][] = [];
+  for (const resource of resources) {
+    // @resource {https://jsr.io/@std/http/server/~/} std/http/server
+    const [_, url, title] = resource.match(/^\{(.*?)\}\s(.*)/) || [];
+    if (!url || !title) {
+      throw new Error(`Invalid resource: ${resource}`);
+    }
+    additionalResources.push([url, title]);
+  }
+
+  return {
+    id,
+    title: kvs.title,
+    description,
+    difficulty,
+    tags,
+    additionalResources,
+    run: kvs.run,
+    playground: kvs.playground,
+    files,
+    group: kvs.group || "Misc",
+    sortOrder: kvs.sortOrder || 999999,
+  };
+}
diff --git a/learn_filter.client.ts b/learn_filter.client.ts
new file mode 100644
index 000000000..4998af00c
--- /dev/null
+++ b/learn_filter.client.ts
@@ -0,0 +1,24 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const tutorial = document.getElementById("tutorial")! as HTMLInputElement;
+  const example = document.getElementById("example")! as HTMLInputElement;
+  const video = document.getElementById("video")! as HTMLInputElement;
+  const listItems = document.getElementsByClassName("learning-list-item");
+
+  const filterItems = () => {
+    const shown = [tutorial, example, video].filter((item) => item.checked);
+    const shownType = shown.map((item) => item.id);
+
+    for (const item of listItems) {
+      const htmlItem = item as HTMLElement;
+      const category = htmlItem.getAttribute("data-category");
+      const enabled = shownType.includes(category!);
+      htmlItem.style.display = enabled ? "" : "none";
+    }
+  };
+
+  tutorial.addEventListener("change", () => filterItems());
+  example.addEventListener("change", () => filterItems());
+  video.addEventListener("change", () => filterItems());
+
+  filterItems();
+});
diff --git a/oldurls.json b/oldurls.json
index b0df6e0e4..4c8ab21ce 100644
--- a/oldurls.json
+++ b/oldurls.json
@@ -1,14 +1,19 @@
 {
-  "/runtime/tutorials/read_write_files/": "/examples/",
-  "/runtime/tutorials/unix_cat/": "/examples/unix-cat/",
-  "/examples/dependency-management/": "/runtime/fundamentals/configuration/#dependencies",
-  "/runtime/tutorials/tcp_echo/": "/examples/tcp-echo-server/",
-  "/runtime/tutorials/tcp_server/": "/examples/tcp-echo-server/",
+  "/runtime/tutorials/read_write_files/": "/learn/",
+  "/runtime/tutorials/unix_cat/": "/learn/examples/unix-cat/",
+  "/learn/examples/dependency-management/": "/runtime/fundamentals/configuration/#dependencies",
+  "/runtime/tutorials/tcp_echo/": "/learn/examples/tcp-echo-server/",
+  "/runtime/tutorials/tcp_server/": "/learn/examples/tcp-echo-server/",
   "/runtime/reference/deploying_and_embedding/": "/deploy/manual/",
   "/runtime/manual/advanced/embedding_deno/": "/deploy/manual/",
   "/runtime/manual/advanced/deploying_deno/": "/deploy/manual/",
-  "/runtime/reference/tcp_udp_connections/": "/examples/",
+  "/runtime/reference/tcp_udp_connections/": "/learn/",
   "/runtime/getting_started/": "/runtime/",
   "/api/deno/~/Deno.TlsConn.rid/": "/runtime/reference/migration_guide/#rid",
-  "/manual@main/advanced/typescript/faqs": "/runtime/fundamentals/typescript/"
+  "/manual@main/advanced/typescript/faqs": "/runtime/fundamentals/typescript/",
+  "/runtime/tutorials/": "/learn/",
+  "/runtime/manual/examples/how_to_with_npm/": "/learn/",
+  "/runtime/manual/tutorials/": "/learn/",
+  "/learn/tutorials/": "/learn/",
+  "/learn/examples/": "/learn/"
 }
diff --git a/orama.ts b/orama.ts
index 30c7135ca..48106562c 100644
--- a/orama.ts
+++ b/orama.ts
@@ -1,6 +1,6 @@
 import { Data, Page } from "lume/core/file.ts";
 import { walkSync } from "@std/fs/walk";
-import { parseExample } from "./examples.page.tsx";
+import { parseExample } from "./learn/utils/parseExample.ts";
 
 export interface OramaDocument {
   path: string;
@@ -98,7 +98,7 @@ export async function generateDocumentsForSymbols(): Promise<OramaDocument[]> {
 }
 
 export async function generateDocumentsForExamples(): Promise<OramaDocument[]> {
-  const files = [...walkSync("./examples/", {
+  const files = [...walkSync("./learn/examples/", {
     exts: [".ts"],
   })];
   return await Promise.all(files.map(async (file) => {
@@ -108,7 +108,7 @@ export async function generateDocumentsForExamples(): Promise<OramaDocument[]> {
     const label = file.name.replace(".ts", "");
 
     return {
-      path: `/examples/${label}`,
+      path: `/learn/examples/${label}`,
       title: parsed.title,
       content: parsed.description,
       section: parsed.group,
diff --git a/overrides.css b/overrides.css
index 02980f042..3eab46bff 100644
--- a/overrides.css
+++ b/overrides.css
@@ -114,3 +114,61 @@
 .ddoc .space-y-7 > .section .markdown-body {
   @apply mb-6 !important;
 }
+
+.hub-header {
+  border-bottom: 1px solid var(--borderColor-muted, var(--color-border-muted));
+  padding-bottom: 0.3em;
+}
+
+.switch {
+  position: relative;
+  width: 1.8rem;
+  height: 1rem;
+  display: block;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 1rem;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: calc(1rem - 4px);
+  width: calc(1rem - 4px);
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(calc(0.8rem));
+}
diff --git a/runtime/_data.ts b/runtime/_data.ts
index 9e50f4fb3..2a665e3b1 100644
--- a/runtime/_data.ts
+++ b/runtime/_data.ts
@@ -191,51 +191,6 @@ export const sidebar = [
       },
     ],
   },
-  {
-    title: "Tutorials",
-    href: "/runtime/tutorials/",
-    items: [
-      "/runtime/tutorials/hello_world/",
-      "/runtime/tutorials/fetch_data/",
-      "/runtime/tutorials/hashbang/",
-      "/runtime/tutorials/cjs_to_esm/",
-      {
-        label: "React with deno.json",
-        id: "/runtime/tutorials/how_to_with_npm/react/",
-      },
-      {
-        label: "React with package.json",
-        id: "/runtime/tutorials/how_to_with_npm/create-react/",
-      },
-      "/runtime/tutorials/how_to_with_npm/next/",
-      "/runtime/tutorials/how_to_with_npm/vue/",
-      "/runtime/tutorials/connecting_to_databases/",
-      {
-        label: "More tutorials",
-        items: [
-          "/runtime/tutorials/file_server/",
-          "/runtime/tutorials/subprocess/",
-          "/runtime/tutorials/os_signals/",
-          "/runtime/tutorials/file_system_events/",
-          "/runtime/tutorials/module_metadata/",
-          "/runtime/tutorials/aws_lambda/",
-          "/runtime/tutorials/aws_lightsail/",
-          "/runtime/tutorials/cloudflare_workers/",
-          "/runtime/tutorials/digital_ocean/",
-          "/runtime/tutorials/google_cloud_run/",
-          "/runtime/tutorials/kinsta/",
-          "/runtime/tutorials/how_to_with_npm/apollo/",
-          "/runtime/tutorials/how_to_with_npm/express/",
-          "/runtime/tutorials/how_to_with_npm/mongoose/",
-          "/runtime/tutorials/how_to_with_npm/mysql2/",
-          "/runtime/tutorials/how_to_with_npm/planetscale/",
-          "/runtime/tutorials/how_to_with_npm/prisma/",
-          "/runtime/tutorials/how_to_with_npm/redis/",
-          "/runtime/tutorials/file_based_routing/",
-        ],
-      },
-    ],
-  },
   {
     title: "Contributing and support",
     href: "/runtime/contributing/",
diff --git a/runtime/contributing/examples.md b/runtime/contributing/examples.md
index 1901aa09c..051ace2c8 100644
--- a/runtime/contributing/examples.md
+++ b/runtime/contributing/examples.md
@@ -2,9 +2,9 @@
 title: Contributing an example
 ---
 
-[Deno by Example](/examples/) is a collection of examples that demonstrate how
-to use Deno and its APIs. If you contribute an example, we'll send you a free
-pack of stickers!
+[Deno by Example](/learn/examples/) is a collection of examples that demonstrate
+how to use Deno and its APIs. If you contribute an example, we'll send you a
+free pack of stickers!
 
 ![Deno stickers laid out on a table](./images/stickers.jpg)
 
diff --git a/runtime/fundamentals/standard_library.md b/runtime/fundamentals/standard_library.md
index d133ba36d..8169b87a3 100644
--- a/runtime/fundamentals/standard_library.md
+++ b/runtime/fundamentals/standard_library.md
@@ -34,8 +34,8 @@ packages on JSR, but here are a few examples:
 
 Each package of the standard library is independently versioned. Packages follow
 [semantic versioning rules](https://jsr.io/@std/semver). You can use
-[version pinning or version ranges](./modules#package-versions) to prevent major
-releases from affecting your code.
+[version pinning or version ranges](/runtime/fundamentals/modules/#package-versions)
+to prevent major releases from affecting your code.
 
 ## Importing standard library modules
 
diff --git a/runtime/getting_started/first_project.md b/runtime/getting_started/first_project.md
index 36ef383c6..c2f69801a 100644
--- a/runtime/getting_started/first_project.md
+++ b/runtime/getting_started/first_project.md
@@ -63,8 +63,8 @@ ok | 1 passed | 0 failed (3ms)
 ```
 
 Now that you have a basic project set up you can start building your
-application. Check out our [tutorials](/runtime/tutorials/) and
-[examples](/examples/) for more ideas on what to build with Deno.
+application. Check out our [tutorials](/learn/tutorials/) and
+[examples](/learn/examples/) for more ideas on what to build with Deno.
 
 You can
 [learn more about using TypeScript in Deno here](/runtime/fundamentals/typescript).
diff --git a/runtime/reference/cli/compile.md b/runtime/reference/cli/compile.md
index f04eaa5a8..792ea067c 100644
--- a/runtime/reference/cli/compile.md
+++ b/runtime/reference/cli/compile.md
@@ -112,7 +112,7 @@ files.
 ## Workers
 
 Similarly to non-statically analyzable dynamic imports, code for
-[workers](../web_platform_apis.md#web-workers) is not included in the compiled
+[workers](../web_platform_apis/#web-workers) is not included in the compiled
 executable by default. There are two ways to include workers:
 
 1. Use the `--include <path>` flag to include the worker code.
@@ -170,4 +170,4 @@ $ signtool sign /fd SHA256 main.exe
 
 ## Unavailable in executables
 
-- [Web Storage API](../web_platform_apis.md#web-storage)
+- [Web Storage API](/runtime/reference/web_platform_apis/#web-storage)
diff --git a/runtime/reference/cli/run.md b/runtime/reference/cli/run.md
index 7a19b10f9..49a302649 100644
--- a/runtime/reference/cli/run.md
+++ b/runtime/reference/cli/run.md
@@ -7,11 +7,11 @@ command: run
 ## Usage
 
 To run the file at
-[https://docs.deno.com/examples/hello-world.ts](https://docs.deno.com/examples/hello-world.ts)
+[https://docs.deno.com/learn/examples/hello-world.ts](https://docs.deno.com/examples/hello-world.ts)
 use:
 
 ```console
-deno run https://docs.deno.com/examples/hello-world.ts
+deno run https://docs.deno.com/learn/examples/hello-world.ts
 ```
 
 You can also run files locally. Ensure that you are in the correct directory and
@@ -76,7 +76,7 @@ command.
 You can pipe code from stdin and run it immediately with:
 
 ```console
-curl https://docs.deno.com/examples/hello-world.ts | deno run -
+curl https://docs.deno.com/learn/examples/hello-world.ts | deno run -
 ```
 
 ## Terminate run
diff --git a/runtime/reference/cli/unstable_flags.md b/runtime/reference/cli/unstable_flags.md
index 984389668..f7ee8e5f8 100644
--- a/runtime/reference/cli/unstable_flags.md
+++ b/runtime/reference/cli/unstable_flags.md
@@ -58,7 +58,7 @@ export DENO_UNSTABLE_BARE_NODE_BUILTINS=true
 **Environment variable:** `DENO_UNSTABLE_BARE_NODE_BUILTINS`
 
 This flag enables you to
-[import Node.js built-in modules](../../fundamentals/node.md#node-built-in-modules)
+[import Node.js built-in modules](/runtime/fundamentals/node/#node-built-in-modules)
 without a `node:` specifier, as in the example below. You can also use this flag
 to enable npm packages without an `npm:` specifier if you are manually managing
 your Node.js dependencies ([see `byonm` flag](#--unstable-byonm)).
diff --git a/runtime/reference/deno_namespace_apis.md b/runtime/reference/deno_namespace_apis.md
index 87c500754..024d1d7dd 100644
--- a/runtime/reference/deno_namespace_apis.md
+++ b/runtime/reference/deno_namespace_apis.md
@@ -27,10 +27,10 @@ to the file system.
 Refer to the links below for code examples of how to use the file system
 functions.
 
-- [Reading files in several different ways](/examples/reading-files)
-- [Reading files in streams](/runtime/tutorials/file_server/)
-- [Reading a text file (`Deno.readTextFile`)](/examples/reading-files)
-- [Writing a text file (`Deno.writeTextFile`)](/examples/writing-files)
+- [Reading files in several different ways](/learn/examples/reading-files/)
+- [Reading files in streams](/learn/tutorials/file_server/)
+- [Reading a text file (`Deno.readTextFile`)](/learn/examples/reading-files/)
+- [Writing a text file (`Deno.writeTextFile`)](/learn/examples/writing-files/)
 
 ## Network
 
diff --git a/runtime/reference/vscode.md b/runtime/reference/vscode.md
index 484526452..21f92e73d 100644
--- a/runtime/reference/vscode.md
+++ b/runtime/reference/vscode.md
@@ -217,10 +217,10 @@ _References_ setting mentioned above.
 
 ### Testing code lens
 
-The Deno CLI includes a [built-in testing API](./lsp_integration.md#testing)
-available under `Deno.test`. The extension and language server have a code lens
-enabled by default which provides the ability to run a test from within the
-editor.
+The Deno CLI includes a
+[built-in testing API](/runtime/reference/lsp_integration/#testing) available
+under `Deno.test`. The extension and language server have a code lens enabled by
+default which provides the ability to run a test from within the editor.
 
 When you have a block of code that provides a test:
 
diff --git a/runtime/tutorials/index.md b/runtime/tutorials/index.md
deleted file mode 100644
index e1bab5cfc..000000000
--- a/runtime/tutorials/index.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: "Tutorials"
-oldUrl:
-  - /runtime/manual/examples/
-  - /runtime/manual/examples/how_to_with_npm/
----
-
-Walkthrough tutorials to teach you about the Deno runtime and how to use it with
-your favorite tools.
-
-## Basics
-
-- [Hello World](/runtime/tutorials/hello_world/)
-- [Fetch and stream data](/runtime/tutorials/fetch_data/)
-- [Make executable scripts](/runtime/tutorials/hashbang/)
-- [Convert CJS to ESM](/runtime/tutorials/cjs_to_esm/)
-- [Write a file server](/runtime/tutorials/file_server/)
-
-## Web frameworks and libraries
-
-- [React with package.json](/runtime/tutorials/how_to_with_npm/create-react/)
-- [React with deno.json](/runtime/tutorials/how_to_with_npm/react/)
-- [Next.js](/runtime/tutorials/how_to_with_npm/next/)
-- [Fresh](https://fresh.deno.dev/docs/getting-started/create-a-project)
-- [Vue.js](/runtime/tutorials/how_to_with_npm/vue/)
-- [Express](/runtime/tutorials/how_to_with_npm/express/)
-- [Apollo GraphQL](/runtime/tutorials/how_to_with_npm/apollo/)
-
-## Deploying Deno projects
-
-- [AWS Lambda](/runtime/tutorials/aws_lambda/)
-- [AWS Lightsail](/runtime/tutorials/aws_lightsail/)
-- [Cloudflare Workers](/runtime/tutorials/cloudflare_workers/)
-- [Digital Ocean](/runtime/tutorials/digital_ocean/)
-- [Google Cloud Run](/runtime/tutorials/google_cloud_run/)
-- [Kinsta](/runtime/tutorials/kinsta/)
-
-## Connecting to Databases
-
-- [Connecting to databases](/runtime/tutorials/connecting_to_databases/) (MySQL,
-  PostgreSQL, SQLite, MongoDB, Redis, Firebase, Supabase, GraphQL and more)
-- [MySQL2](/runtime/tutorials/how_to_with_npm/mysql2/)
-- [PlanetScale](/runtime/tutorials/how_to_with_npm/planetscale/)
-- [Redis](/runtime/tutorials/how_to_with_npm/redis/)
-- [Mongoose and MongoDB](/runtime/tutorials/how_to_with_npm/mongoose/)
-- [Prisma](/runtime/tutorials/how_to_with_npm/prisma/)
-
-## Advanced
-
-- [Create a subprocess](/runtime/tutorials/subprocess/)
-- [Handle OS signals](/runtime/tutorials/os_signals/)
-- [File system events](/runtime/tutorials/file_system_events/)
-- [Module Metadata](/runtime/tutorials/module_metadata/)
-
-Additional examples can by found at
-[Deno by Example](https://docs.deno.com/examples/).
diff --git a/styles.css b/styles.css
index 0eef90536..a9327ba0c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,5 @@
+@import "./youtube-lite.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -278,7 +280,7 @@ body {
     hover:!no-underline hover:bg-jsr-yellow-300;
 }
 
-.homepage-link {
+.homepage-link, .learn-link {
   @apply block font-normal underline underline-offset-4;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index d4ac659af..2edab4c99 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@
 /** @type {import('npm:tailwindcss').Config} */
 export default {
   content: [
-    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404}/**/*.{md,ts,tsx}",
+    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404,learn}/**/*.{md,ts,tsx}",
     "*.{ts,tsx}",
   ],
   corePlugins: {
diff --git a/youtube-lite.css b/youtube-lite.css
new file mode 100644
index 000000000..c775576b2
--- /dev/null
+++ b/youtube-lite.css
@@ -0,0 +1,102 @@
+lite-youtube {
+  background-color: #000;
+  position: relative;
+  display: block;
+  contain: content;
+  background-position: center center;
+  background-size: cover;
+  cursor: pointer;
+  max-width: 720px;
+}
+
+/* gradient */
+lite-youtube::before {
+  content: attr(data-title);
+  display: block;
+  position: absolute;
+  top: 0;
+  /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
+  background-image: linear-gradient(
+    180deg,
+    rgb(0 0 0 / 67%) 0%,
+    rgb(0 0 0 / 54%) 14%,
+    rgb(0 0 0 / 15%) 54%,
+    rgb(0 0 0 / 5%) 72%,
+    rgb(0 0 0 / 0%) 94%
+  );
+  height: 99px;
+  width: 100%;
+  font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
+  color: hsl(0deg 0% 93.33%);
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  padding: 25px 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+lite-youtube:hover::before {
+  color: white;
+}
+
+/* responsive iframe with a 16:9 aspect ratio
+  thanks https://css-tricks.com/responsive-iframes/
+*/
+lite-youtube::after {
+  content: "";
+  display: block;
+  padding-bottom: calc(100% / (16 / 9));
+}
+lite-youtube > iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+
+/* play button */
+lite-youtube > .lyt-playbtn {
+  display: block;
+  /* Make the button element cover the whole area for a large hover/click target… */
+  width: 100%;
+  height: 100%;
+  /* …but visually it's still the same size */
+  background: no-repeat center/68px 48px;
+  /* YT's actual play button svg */
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  filter: grayscale(100%);
+  transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
+  border: 0;
+}
+
+lite-youtube:hover > .lyt-playbtn,
+lite-youtube .lyt-playbtn:focus {
+  filter: none;
+}
+
+/* Post-click styles */
+lite-youtube.lyt-activated {
+  cursor: unset;
+}
+lite-youtube.lyt-activated::before,
+lite-youtube.lyt-activated > .lyt-playbtn {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.lyt-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}