Improve introduction of modules and imports

Thanks @RyanBrewer317!

src/content/chapter0_basics/lesson01_hello_world/code.gleam

@@ -1,7 +1,5 @@
-// Import a Gleam module from the standard library
 import gleam/io
 
 pub fn main() {
-  // Print to the console
   io.println("Hello, Joe!")
 }

src/content/chapter0_basics/lesson01_hello_world/en.html

@@ -1,16 +1,12 @@
-<p>Here is a program that prints out the text "Hello, Joe!".</p>
 <p>
-  It does this by using the <code>println</code> 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.
+  Here is a tiny program that prints out the text "Hello, Joe!". We'll explain
+  how it works shortly.
 </p>
 <p>
-  In a normal Gleam program this program would be run using the command
+  In a normal Gleam project this program would be run using the command
   <code>gleam run</code> on the command line, but here in this tour the program
-  is automatically compiled and run as the code is edited.
+  is compiled and run inside your web browser, allowing you to try Gleam without
+  installing anything on your computer.
 </p>
 <p>
   Try changing the text being printed to <code>Hello, Mike!</code> and see what

src/content/chapter0_basics/lesson02_modules/code.gleam

@@ -0,0 +1,10 @@
+import gleam/io
+import gleam/string as text
+
+pub fn main() {
+  // Use a function from the `gleam/io` module
+  io.println("Hello, Mike!")
+
+  // Use a function from the `gleam/string` module
+  io.println(text.reverse("Hello, Joe!"))
+}

src/content/chapter0_basics/lesson02_modules/en.html

@@ -0,0 +1,26 @@
+<p>
+  Gleam code is organized into units called <em>modules</em>. A module is a
+  bunch of definitions (of types, functions, etc.) that seem to belong together.
+  For example, the
+  <a href="https://hexdocs.pm/gleam_stdlib/gleam/io.html">
+    <code>gleam/io</code>
+  </a>
+  module contains a variety of functions for printing, like
+  <code>println</code>.
+</p>
+<p>
+  All gleam code is in <i>some</i> module or other, whose name comes from the
+  name of the file it's in. For example, <code>gleam/io</code> is in a file
+  called <code>io.gleam</code> in a directory called <code>gleam</code>.
+</p>
+<p>
+  For code in one module to access code in another module, we import it using
+  the <code>import</code> keyword, and the name used to refer to it is the last
+  part of the module name. For example, to import the
+  <code>gleam/io</code> module is referred to as <code>io</code> once imported.
+</p>
+<p>
+  The <code>as</code> keyword can be used to refer to a module by a different
+  name. See how the <code>gleam/string</code> module is be referred to as
+  <code>text</code> here.
+</p>

src/content/chapter0_basics/lesson03_unqualified_imports/en.html

@@ -0,0 +1,15 @@
+<p>
+  Normally functions from other modules are used in a
+  <em>qualified</em> fashion, meaning the name used to refer the module goes
+  before function name with a dot between them. 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 <em>unqualified</em> fashion, meaning the function name can be used without
+  the module <em>qualifier</em> (the name and the dot) before it.
+</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>

src/tour.gleam

@@ -764,7 +764,6 @@ fn everything_page_html(chapters: List(Chapter)) -> Html {
 
 /// Renders the /everything page to a string
 pub fn everything_page_render(chapters: List(Chapter)) -> String {
-  // TODO: use proper values for location and such
   render_page(PageConfig(
     path: path_everything,
     title: "Everything!",

static/css/code/syntax-highlight.css

@@ -7,10 +7,10 @@ defaults to light theme.
 */
 
 :root {
-  --code-background: var(--code-background-light); 
+  --code-background: var(--code-background-light);
   --code-token-base: var(--code-token-base-light);
   --code-token-punctuation: var(--code-token-punctuation-light);
-  --code-token-operator: var(--code-token-operator-light); 
+  --code-token-operator: var(--code-token-operator-light);
   --code-token-keyword: var(--code-token-keyword-light);
   --code-token-boolean: var(--code-token-boolean-light);
   --code-token-number: var(--code-token-number-light);
@@ -20,14 +20,14 @@ defaults to light theme.
   --code-token-attribute: var(--code-token-attribute-light);
   --code-token-string: var(--code-token-string-light);
   --code-token-function: var(--code-token-function-light);
-  --code-token-comment: var(--code-token-comment-light);  
+  --code-token-comment: var(--code-token-comment-light);
 }
 
 html.theme-light {
-  --code-background: var(--code-background-light); 
+  --code-background: var(--code-background-light);
   --code-token-base: var(--code-token-base-light);
   --code-token-punctuation: var(--code-token-punctuation-light);
-  --code-token-operator: var(--code-token-operator-light); 
+  --code-token-operator: var(--code-token-operator-light);
   --code-token-keyword: var(--code-token-keyword-light);
   --code-token-boolean: var(--code-token-boolean-light);
   --code-token-number: var(--code-token-number-light);
@@ -37,14 +37,14 @@ html.theme-light {
   --code-token-attribute: var(--code-token-attribute-light);
   --code-token-string: var(--code-token-string-light);
   --code-token-function: var(--code-token-function-light);
-  --code-token-comment: var(--code-token-comment-light);  
+  --code-token-comment: var(--code-token-comment-light);
 }
 
 html.theme-dark {
-  --code-background: var(--code-background-dark); 
+  --code-background: var(--code-background-dark);
   --code-token-base: var(--code-token-base-dark);
   --code-token-punctuation: var(--code-token-punctuation-dark);
-  --code-token-operator: var(--code-token-operator-dark); 
+  --code-token-operator: var(--code-token-operator-dark);
   --code-token-keyword: var(--code-token-keyword-dark);
   --code-token-boolean: var(--code-token-boolean-dark);
   --code-token-number: var(--code-token-number-dark);
@@ -54,7 +54,7 @@ html.theme-dark {
   --code-token-attribute: var(--code-token-attribute-dark);
   --code-token-string: var(--code-token-string-dark);
   --code-token-function: var(--code-token-function-dark);
-  --code-token-comment: var(--code-token-comment-dark);  
+  --code-token-comment: var(--code-token-comment-dark);
 }
 
 /*
@@ -69,7 +69,8 @@ pre.hljs {
 .hljs {
   color: var(--color-token-base);
 }
-.hljs-punctuation { /* and operators */
+.hljs-punctuation {
+  /* and operators */
   color: var(--code-token-punctuation);
 }
 .hljs-variable,
@@ -114,10 +115,7 @@ pre.hljs {
 }
 .hljs-comment {
   color: var(--code-token-comment);
-  font-style: italic
-}
-.hljs-module {
-  font-weight: bold;
+  font-style: italic;
 }
 /* 
 .hljs-symbol,
@@ -134,13 +132,13 @@ pre.hljs {
   color: var(--code-token-function);
 } */
 .hljs-emphasis {
-  font-style: italic
+  font-style: italic;
 }
 .hljs-strong {
-  font-weight: bold
+  font-weight: bold;
 }
 .hljs-link {
-  text-decoration: underline
+  text-decoration: underline;
 }
 
 /*
@@ -151,7 +149,9 @@ CodeFlask mappings
 
 .codeflask .codeflask__textarea {
   color: var(--code-background); /* Prevents rendering artifacts in dark mode */
-  caret-color: var(--code-token-base); /* Makes the text input cursor visible in dark mode */
+  caret-color: var(
+    --code-token-base
+  ); /* Makes the text input cursor visible in dark mode */
 }
 
 .codeflask {
@@ -199,12 +199,14 @@ CodeFlask mappings
 
 .hljs,
 .codeflask .codeflask__textarea {
-  transition: background 150ms linear 0s, color 150ms linear 0s;
+  transition:
+    background 150ms linear 0s,
+    color 150ms linear 0s;
 }
 
 .hljs,
 .hljs *,
-.codeflask .codeflask__textarea
-.codeflask .codeflask__textarea * {
+.codeflask .codeflask__textarea .codeflask .codeflask__textarea * {
   transition: color 150ms linear 0s;
-}
+}
+