diff --git a/html-preview.html b/html-preview.html
new file mode 100644
index 0000000..30e8f96
--- /dev/null
+++ b/html-preview.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset=utf-8>
+    <link rel=stylesheet href=tutorial.css>
+
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html, body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+      }
+      #html-preview-left {
+        width: 50%;
+        margin: 8px;
+      }
+      #html-preview-right {
+        width: 50%;
+        margin: 8px 8px 8px 0;
+        padding: 8px;
+        background: white;
+        background: #f4f6f2;
+        overflow: auto;
+      }
+    </style>
+  </head>
+
+  <body>
+    <textarea id=html-preview-left><h1>HTML Preview</h1>
+
+<p>&amp;#x2190; Any HTML from this box on the left is previewed here.</p>
+
+<p>This includes all the <b>bold statements</b> that you might want to make, as
+well as some <i>nuance</i> and also images.</p>
+
+<figure>
+  <center>
+    <img src="images/CPC26-banner.png">
+    <figcaption>Just a random image, really.</figcaption>
+  </center>
+</figure>
+
+<p>If this file is at the root of the tutorial repository, then the
+<code>tutorial.css</code> file is automatically included, for fancy boxes and
+custom styling; and you can use images like</p>
+
+<center>
+  <code>&amp;lt;img src="images/chapter1/stuff.png"&amp;gt;</code>.
+</center>
+
+<div class=correct>Bonne réponse !</div>
+
+<p>Have fun with this tool! &amp;#x1f604;</p></textarea>
+
+    <div id=html-preview-right>
+      <i>Write some HTML in the text area to preview it here!</i>
+    </div>
+  </body>
+
+  <script>
+    const textarea = document.getElementById("html-preview-left");
+    const preview  = document.getElementById("html-preview-right");
+
+    textarea.addEventListener("input", update_preview);
+
+    function update_preview(e) {
+      preview.innerHTML = e.target.value;
+      /* Scroll to bottom of preview div */
+      preview.scrollTop = preview.scrollHeight;
+    }
+
+    /* Initialization */
+    preview.innerHTML = textarea.value;
+  </script>
+</html>
diff --git a/images/CPC26-banner.png b/images/CPC26-banner.png
new file mode 100644
index 0000000..57ece59
Binary files /dev/null and b/images/CPC26-banner.png differ
diff --git a/tutorial.css b/tutorial.css
new file mode 100644
index 0000000..7494465
--- /dev/null
+++ b/tutorial.css
@@ -0,0 +1,5 @@
+div.correct {
+  background: #a9dfa2;
+  padding: 8px;
+  margin-top: 8px;
+}
