13 files changed, 93 insertions, 19 deletions

diff --git a/lessons/src/lesson000_hello_world/text.html b/lessons/src/lesson000_hello_world/text.html
index 46e3fc2..cb41be9 100644
--- a/lessons/src/lesson000_hello_world/text.html
+++ b/lessons/src/lesson000_hello_world/text.html
@@ -10,8 +10,8 @@
 <p>
   The tour is interactive! The code shown is editable and will be compiled and
   evaluated as you type. Anything you print using <code>io.println</code> or
-  <code>io.debug</code> will be shown in the lower right, along with any compile
-  errors and warnings. To evaluate Gleam code the tour compiles Gleam to
+  <code>io.debug</code> will be shown in the bottom section, along with any
+  compile errors and warnings. To evaluate Gleam code the tour compiles Gleam to
   JavaScript and runs it, all entirely within your browser window.
 </p>
 <p>
diff --git a/lessons/src/lesson001_basics/code.gleam b/lessons/src/lesson001_basics/code.gleam
index 440dc98..67cc6b4 100644
--- a/lessons/src/lesson001_basics/code.gleam
+++ b/lessons/src/lesson001_basics/code.gleam
@@ -1,5 +1,7 @@
+// Import a Gleam module from the standard library
 import gleam/io
 
 pub fn main() {
-  io.println("Hello, Mike!")
+  // Print to the console
+  io.println("Hello, Joe!")
 }
diff --git a/lessons/src/lesson001_basics/text.html b/lessons/src/lesson001_basics/text.html
index 53bd3d3..8e2033a 100644
--- a/lessons/src/lesson001_basics/text.html
+++ b/lessons/src/lesson001_basics/text.html
@@ -1,3 +1,17 @@
 <p>
-  Hey look, cool stuff!
+  Here is a program that prints out the text "Hello, Joe!".
+</p>
+<p>
+  It does this by using the `println` function which has been imported from the
+  <a href="https://hexdocs.pm/gleam_stdlib/gleam/io.html"><code>gleam/io</code></a>
+  module, which is part of the Gleam standard library.
+</p>
+<p>
+  In a normal Gleam program this program would be run use the command
+  <code>gleam run</code> on the command line, but here in this tutorial the
+  program is automatically compiled and run as the code is edited.
+</p>
+<p>
+  Try changing the text being printed to <code>Hello, Mike!</code> and see what
+  happens.
 </p>
diff --git a/lessons/src/lesson002_another/code.gleam b/lessons/src/lesson002_another/code.gleam
deleted file mode 100644
index 440dc98..0000000
--- a/lessons/src/lesson002_another/code.gleam
+++ /dev/null
@@ -1,5 +0,0 @@
-import gleam/io
-
-pub fn main() {
-  io.println("Hello, Mike!")
-}
diff --git a/lessons/src/lesson002_another/text.html b/lessons/src/lesson002_another/text.html
deleted file mode 100644
index 850d151..0000000
--- a/lessons/src/lesson002_another/text.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>
-  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam ab fuga,
-  placeat hic possimus harum tempore voluptatem, id nulla nihil laboriosam
-  suscipit quis obcaecati beatae blanditiis sint. Suscipit, voluptas officia.
-</p>
-<p>
-  Very exciting.
-</p>
diff --git a/lessons/src/lesson002_unqualified_imports/code.gleam b/lessons/src/lesson002_unqualified_imports/code.gleam
new file mode 100644
index 0000000..2708f25
--- /dev/null
+++ b/lessons/src/lesson002_unqualified_imports/code.gleam
@@ -0,0 +1,10 @@
+// Import the module and one of its functions
+import gleam/io.{println}
+
+pub fn main() {
+  // Use the function in a qualified fashion
+  io.println("This is qualified")
+
+  // Or an unqualified fashion
+  println("This is unqualified")
+}
diff --git a/lessons/src/lesson002_unqualified_imports/text.html b/lessons/src/lesson002_unqualified_imports/text.html
new file mode 100644
index 0000000..8fda45e
--- /dev/null
+++ b/lessons/src/lesson002_unqualified_imports/text.html
@@ -0,0 +1,15 @@
+<p>
+  Normally functions from other modules are used in a qualified fashion, with
+  the module qualifier before function name. For example,
+  <code>io.println("Hello!")</code>.
+</p>
+<p>
+  It is also possible to specify a list of functions to import from a module in
+  an unqualified fashion, such as the <code>println</code> function in the code
+  editor. Because it has been imported like this it can be referred to as just
+  <code>println</code>.
+</p>
+<p>
+  Generally it is best to use qualified imports, as this makes it clear where
+  the function is defined, making the code easier to read.
+</p>
diff --git a/lessons/src/lesson003_type_checking/code.gleam b/lessons/src/lesson003_type_checking/code.gleam
new file mode 100644
index 0000000..e068f31
--- /dev/null
+++ b/lessons/src/lesson003_type_checking/code.gleam
@@ -0,0 +1,7 @@
+import gleam/io
+
+pub fn main() {
+  io.println("My lucky number is:")
+  // io.println(4)
+  // 👆️ Uncomment this line
+}
diff --git a/lessons/src/lesson003_type_checking/text.html b/lessons/src/lesson003_type_checking/text.html
new file mode 100644
index 0000000..fadfe64
--- /dev/null
+++ b/lessons/src/lesson003_type_checking/text.html
@@ -0,0 +1,19 @@
+<p>
+  Gleam has a robust static type system that is help you as you write and edit
+  code, catching mistakes and showing you where to make changes.
+</p>
+<p>
+  Uncomment the line <code>io.println(4)</code> and see how a compile time error
+  is reported as the <code>io.println</code> function only works with strings,
+  not ints.
+</p>
+<p>
+  To fix the code change the code to call the <code>io.debug</code>
+  function instead, as it will print a value of any type.
+</p>
+<p>
+  Gleam has no <code>null</code>, no implicit conversions, no exceptions, and
+  always performs full type checking. If the code compiles you can be reasonably
+  confident it does not have any inconsistencies that may cause bugs or
+  crashes.
+</p>
diff --git a/lessons/src/lesson004_ints/code.gleam b/lessons/src/lesson004_ints/code.gleam
new file mode 100644
index 0000000..fbead50
--- /dev/null
+++ b/lessons/src/lesson004_ints/code.gleam
@@ -0,0 +1,16 @@
+import gleam/io
+
+pub fn main() {
+  // Int arithmetic
+  io.debug(1 + 1)
+  io.debug(5 - 1)
+  io.debug(5 / 2)
+  io.debug(3 * 3)
+  io.debug(5 % 2)
+
+  // Int comparisons
+  io.debug(2 > 1)
+  io.debug(2 < 1)
+  io.debug(2 >= 1)
+  io.debug(2 <= 1)
+}
diff --git a/lessons/src/lesson004_ints/text.html b/lessons/src/lesson004_ints/text.html
new file mode 100644
index 0000000..f5222ee
--- /dev/null
+++ b/lessons/src/lesson004_ints/text.html
@@ -0,0 +1,2 @@
+<p>
+</p>
diff --git a/src/try_gleam.gleam b/src/try_gleam.gleam
index f441722..0be0ace 100644
--- a/src/try_gleam.gleam
+++ b/src/try_gleam.gleam
@@ -386,7 +386,9 @@ fn page_html(page: Page) -> String {
         ]),
         h("aside", [#("id", "output")], []),
       ]),
-      h("script", [#("type", "gleam"), #("id", "code")], [text(page.code)]),
+      h("script", [#("type", "gleam"), #("id", "code")], [
+        htmb.dangerous_unescaped_fragment(string_builder.from_string(page.code)),
+      ]),
       h("script", [#("type", "module"), #("src", "/index.js")], []),
     ]),
   ])
diff --git a/static/index.js b/static/index.js
index cff7805..4ba2b19 100644
--- a/static/index.js
+++ b/static/index.js
@@ -3,7 +3,7 @@ import initGleamCompiler from "./compiler.js";
 import stdlib from "./stdlib.js";
 
 const output = document.querySelector("#output");
-const initialCode = document.querySelector("#code").textContent;
+const initialCode = document.querySelector("#code").innerHTML;
 
 const prismGrammar = {
   comment: {