From d7d0f8e0e4c956e801b5da73f87d2765c41fbcc4 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 17:46:00 +0000
Subject: [PATCH 01/50] examples/README.md to add context for the examples

---
 examples/README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 examples/README.md

diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 0000000..1c53abb
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,11 @@
+# _Examples_
+
+This is a collection of _basic_ examples
+collated from various sources including
+https://elm-lang.org/examples
+to give you a feel for Elm code.
+
+If you get stuck, please open an issue with a question:
+https://github.com/dwyl/learn-elm/issues
+
+We are happy to help _anyone_ learning Elm to make progress! 😊

From 8ef6ce3ebc0ac375e990464af8784f284a59cb6b Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 17:47:31 +0000
Subject: [PATCH 02/50] =?UTF-8?q?rename=20tutorials/lazy-loading/TUTORIAL.?=
 =?UTF-8?q?md=20to=20tutorials/lazy-loading/README.md=20so=20it=20is=20ins?=
 =?UTF-8?q?tantly=20viewable=20on=20GitHub=20instead=20of=20forcing=20peop?=
 =?UTF-8?q?le=20to=20have=20to=20*find*=20it=20and=20click=20another=20lin?=
 =?UTF-8?q?k=20=F0=9F=98=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tutorials/lazy-loading/{TUTORIAL.md => README.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename tutorials/lazy-loading/{TUTORIAL.md => README.md} (100%)

diff --git a/tutorials/lazy-loading/TUTORIAL.md b/tutorials/lazy-loading/README.md
similarity index 100%
rename from tutorials/lazy-loading/TUTORIAL.md
rename to tutorials/lazy-loading/README.md

From 7774620a53a992bfe3182aa7e056edd8bf6ccfd6 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 18:58:41 +0000
Subject: [PATCH 03/50] add elm.json after running elm init

---
 tutorials/elm-ui/elm.json | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 tutorials/elm-ui/elm.json

diff --git a/tutorials/elm-ui/elm.json b/tutorials/elm-ui/elm.json
new file mode 100644
index 0000000..a8e90d9
--- /dev/null
+++ b/tutorials/elm-ui/elm.json
@@ -0,0 +1,24 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.4",
+            "elm/html": "1.0.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.3",
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

From 2d1cb7ba9c81aa3bb247917dd3eb3ed3e86ebb6b Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 21:06:02 +0000
Subject: [PATCH 04/50] add "Why?" section to explain why having a *system* is
 important! for #145

---
 tutorials/elm-ui/README.md | 116 +++++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 tutorials/elm-ui/README.md

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
new file mode 100644
index 0000000..5d0619e
--- /dev/null
+++ b/tutorials/elm-ui/README.md
@@ -0,0 +1,116 @@
+# `elm-ui` a Language for Layout and Interface
+
+
+## _Why?_ 😢 `|>` 😍
+
+People who are learning `CSS`
+(_or those who are too impatient to learn and just want it to "work now"!_),
+often end up feeling like `CSS` is a wild beast that cannot be tamed.
+
+<div align="center">
+  <a href="https://twitter.com/nicksherman/status/1091065393500704768">
+      <img src="https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif"
+        width="500" alt="Peter Griffen - Family Guy - CSS Trouble">
+  </a>
+</div>
+
+
+In reality, CSS _can_ be learned/mastered reasonably quickly
+and _amazing_ things can be made e.g:
+http://www.csszengarden.com and https://www.cssdesignawards.com
+
+Sadly, it doesn't matter how well
+_you_ - the conscientious developer/designer - learn CSS.
+Unless you can ensure that _everyone_ in your team/company
+has the same level of skill and care in their work,
+it's _inevitable_ that over-time
+duplicate and _conflicting_ styles will be added.
+
+<div align="center">
+  <a href="https://twitter.com/100soft">
+      <img src="https://media.giphy.com/media/Jrl4FlTaymFFbNiwU5/giphy.gif"
+        width="500" alt="dumpster fire">
+  </a>
+</div>
+
+Take any popular website and run it through CSS Stats https://cssstats.com
+to see how many styles are being used.
+A good example is [Twitter.com](https://twitter.com)
+Their CSS is **632kb**
+
+![twitter-css-stats](https://user-images.githubusercontent.com/194400/70567485-f56b2580-1b8d-11ea-94c4-4e2ca8b5cd10.png)
+
+That might not sound like a lot,
+but scroll down to the part that says **1024 total color declarations**:
+
+![twitter-css-stats-colors](https://user-images.githubusercontent.com/194400/70567583-1df31f80-1b8e-11ea-99d2-0c78a6f88a5d.png)
+
+Can you tell the difference between those shades of grey, blue and _white_??
+The point is that the developers/designers at Twitter - a tech company
+with **billions** in revenue and some of the most talented people -
+do not have _control_ over their CSS.
+
+> Twitter are the creators of Bootstrap
+"_the most popular front-end framework in the world_".
+**Bootstrap	`v4`** is **123kb** (_uncompressed_)
+and **23kb** (_compressed+gzipped_).
+The _whole_ library including grid layout,
+typography, colors, all compontents, forms and utilities.
+Bootstrap is meant to be a _complete_ responsive grid-based design system
+that _anyone_ can use to build their App/website.
+And yet twitter, which has a _great_ in-house design team
+with their own _system_ and component library,
+have managed to build a
+
+
+
+The problem isn't you, the problem is the (_lack of a_) _system_.
+
+
+@dwyl we _love_ the idea of having semantic and functional UIs
+with no side-effects. Functional CSS allows you to change one style
+without affecting any others. For the past few years
+https://github.com/dwyl/learn-tachyons
+
+
+
+Design System for Building Semantic Compiled UI
+
++ GitHub:
+https://github.com/mdgriffith/elm-ui
++ Elm Package:
+https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
+
+## _What?_
+
+`elm-ui` is to `HTML` and `CSS`
+what `elm` is to `JavaScript`.
+`elm-ui` offers compile-time guarantees that your layout and styles.
+
+
+## _How?_
+
+In a new directory, initialise your `elm` workflow with the following command:
+```sh
+elm init
+```
+
+That will create an `elm.json` file similar to this one:
+[`elm.json`]()
+
+Next we will add the dependency for `mdgriffith/elm-ui`:
+```sh
+elm install mdgriffith/elm-ui
+```
+> **Note**: that command will only add an entry
+in the `elm.json` `"dependencies"` section.
+`elm install` does not actually _install_ anything.
+
+
+### Debugging Layout with `Element.explain Debug.todo`
+
+
+## References and Recommended Reading
+
++ `elm-ui` _examples_: https://github.com/bburdette/elm-ui-examples
++

From 9be5d14c1258f46ba604218a4bb4f2800c8df330 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 21:06:25 +0000
Subject: [PATCH 05/50] add initial elm-ui example code for #145

---
 tutorials/elm-ui/src/Main.elm | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 tutorials/elm-ui/src/Main.elm

diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
new file mode 100644
index 0000000..58db2c7
--- /dev/null
+++ b/tutorials/elm-ui/src/Main.elm
@@ -0,0 +1,31 @@
+module Main exposing (main)
+
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+
+
+main =
+    Element.layout []
+        myRowOfStuff
+
+
+myRowOfStuff : Element msg
+myRowOfStuff =
+    row [ width fill, centerY, spacing 30 ]
+        [ myElement
+        , el [ centerX ] myElement
+        , el [ alignRight, padding ] myElement -- align the element to the right
+        ]
+
+
+myElement : Element msg
+myElement =
+    el
+        [ Background.color (rgb255 240 0 245)
+        , Font.color (rgb255 255 255 255)
+        , Border.rounded 3
+        , padding 30
+        ]
+        (text "stylish!")

From 1558527a270ca2fae2af44909641f4f0700f61e2 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 21:07:33 +0000
Subject: [PATCH 06/50] create .gitignore file to avoid adding (generated)
 index.html file to GH

---
 tutorials/elm-ui/.gitignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 tutorials/elm-ui/.gitignore

diff --git a/tutorials/elm-ui/.gitignore b/tutorials/elm-ui/.gitignore
new file mode 100644
index 0000000..dcaf716
--- /dev/null
+++ b/tutorials/elm-ui/.gitignore
@@ -0,0 +1 @@
+index.html

From 186af6b9dcf3a3bc858cd4482e9c89e7ef65eb3f Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 21:08:05 +0000
Subject: [PATCH 07/50] add mdgriffith/elm-ui to elm.json for #145

---
 tutorials/elm-ui/elm.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/elm.json b/tutorials/elm-ui/elm.json
index a8e90d9..d8dd590 100644
--- a/tutorials/elm-ui/elm.json
+++ b/tutorials/elm-ui/elm.json
@@ -8,7 +8,8 @@
         "direct": {
             "elm/browser": "1.0.2",
             "elm/core": "1.0.4",
-            "elm/html": "1.0.0"
+            "elm/html": "1.0.0",
+            "mdgriffith/elm-ui": "1.1.5"
         },
         "indirect": {
             "elm/json": "1.1.3",

From fd932d6ceeba02d99ce6407f3063e3b2e0b7caf1 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 10 Dec 2019 21:51:42 +0000
Subject: [PATCH 08/50] add link to "Building a Toolkit for Design" by Matthew
 Griffith video https://youtu.be/Ie-gqwSHQr0 #145

---
 tutorials/elm-ui/README.md | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 5d0619e..9a7e089 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -3,6 +3,7 @@
 
 ## _Why?_ 😢 `|>` 😍
 
+
 People who are learning `CSS`
 (_or those who are too impatient to learn and just want it to "work now"!_),
 often end up feeling like `CSS` is a wild beast that cannot be tamed.
@@ -35,18 +36,18 @@ duplicate and _conflicting_ styles will be added.
 
 Take any popular website and run it through CSS Stats https://cssstats.com
 to see how many styles are being used.
-A good example is [Twitter.com](https://twitter.com)
-Their CSS is **632kb**
+A good example is [Twitter.com](https://twitter.com).
+Their CSS is **632KB** (_or **113KB** when compressed+gzipped_).
 
 ![twitter-css-stats](https://user-images.githubusercontent.com/194400/70567485-f56b2580-1b8d-11ea-94c4-4e2ca8b5cd10.png)
 
 That might not sound like a lot,
-but scroll down to the part that says **1024 total color declarations**:
+but scroll down to the section that says **1024 total color declarations**:
 
 ![twitter-css-stats-colors](https://user-images.githubusercontent.com/194400/70567583-1df31f80-1b8e-11ea-99d2-0c78a6f88a5d.png)
 
 Can you tell the difference between those shades of grey, blue and _white_??
-The point is that the developers/designers at Twitter - a tech company
+The point is: developers/designers at Twitter - a tech company
 with **billions** in revenue and some of the most talented people -
 do not have _control_ over their CSS.
 
@@ -62,15 +63,15 @@ And yet twitter, which has a _great_ in-house design team
 with their own _system_ and component library,
 have managed to build a
 
-
-
 The problem isn't you, the problem is the (_lack of a_) _system_.
 
-
 @dwyl we _love_ the idea of having semantic and functional UIs
 with no side-effects. Functional CSS allows you to change one style
-without affecting any others. For the past few years
-https://github.com/dwyl/learn-tachyons
+without affecting any others.
+For the past few years we have been using Tachyons
+see: https://github.com/dwyl/learn-tachyons
+It's been _good_ in small-ish teams (_max 8 people_),
+
 
 
 
@@ -87,6 +88,13 @@ https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
 what `elm` is to `JavaScript`.
 `elm-ui` offers compile-time guarantees that your layout and styles.
 
+> "_It's all right there.
+There's no other place you have to go to modify this thing_."
+> 
+
+[![elm-ui-tookit-for-design](https://user-images.githubusercontent.com/194400/70571846-7c240080-1b96-11ea-9dd2-cacae7110b54.png)](https://youtu.be/Ie-gqwSHQr0)
+https://youtu.be/Ie-gqwSHQr0
+
 
 ## _How?_
 
@@ -109,6 +117,9 @@ in the `elm.json` `"dependencies"` section.
 
 ### Debugging Layout with `Element.explain Debug.todo`
 
+[Debug]
+https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug
+
 
 ## References and Recommended Reading
 

From e76afbb777beacb015101c10ccf432156edbc138 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 14:22:35 +0000
Subject: [PATCH 09/50] re-org "Why Not" to end of page

---
 tutorials/elm-ui/README.md | 155 +++++++++++++++++++++----------------
 1 file changed, 87 insertions(+), 68 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 9a7e089..14481ee 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -3,72 +3,11 @@
 
 ## _Why?_ 😢 `|>` 😍
 
-
-People who are learning `CSS`
-(_or those who are too impatient to learn and just want it to "work now"!_),
-often end up feeling like `CSS` is a wild beast that cannot be tamed.
-
-<div align="center">
-  <a href="https://twitter.com/nicksherman/status/1091065393500704768">
-      <img src="https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif"
-        width="500" alt="Peter Griffen - Family Guy - CSS Trouble">
-  </a>
-</div>
-
-
-In reality, CSS _can_ be learned/mastered reasonably quickly
-and _amazing_ things can be made e.g:
-http://www.csszengarden.com and https://www.cssdesignawards.com
-
-Sadly, it doesn't matter how well
-_you_ - the conscientious developer/designer - learn CSS.
-Unless you can ensure that _everyone_ in your team/company
-has the same level of skill and care in their work,
-it's _inevitable_ that over-time
-duplicate and _conflicting_ styles will be added.
-
-<div align="center">
-  <a href="https://twitter.com/100soft">
-      <img src="https://media.giphy.com/media/Jrl4FlTaymFFbNiwU5/giphy.gif"
-        width="500" alt="dumpster fire">
-  </a>
-</div>
-
-Take any popular website and run it through CSS Stats https://cssstats.com
-to see how many styles are being used.
-A good example is [Twitter.com](https://twitter.com).
-Their CSS is **632KB** (_or **113KB** when compressed+gzipped_).
-
-![twitter-css-stats](https://user-images.githubusercontent.com/194400/70567485-f56b2580-1b8d-11ea-94c4-4e2ca8b5cd10.png)
-
-That might not sound like a lot,
-but scroll down to the section that says **1024 total color declarations**:
-
-![twitter-css-stats-colors](https://user-images.githubusercontent.com/194400/70567583-1df31f80-1b8e-11ea-99d2-0c78a6f88a5d.png)
-
-Can you tell the difference between those shades of grey, blue and _white_??
-The point is: developers/designers at Twitter - a tech company
-with **billions** in revenue and some of the most talented people -
-do not have _control_ over their CSS.
-
-> Twitter are the creators of Bootstrap
-"_the most popular front-end framework in the world_".
-**Bootstrap	`v4`** is **123kb** (_uncompressed_)
-and **23kb** (_compressed+gzipped_).
-The _whole_ library including grid layout,
-typography, colors, all compontents, forms and utilities.
-Bootstrap is meant to be a _complete_ responsive grid-based design system
-that _anyone_ can use to build their App/website.
-And yet twitter, which has a _great_ in-house design team
-with their own _system_ and component library,
-have managed to build a
-
-The problem isn't you, the problem is the (_lack of a_) _system_.
-
 @dwyl we _love_ the idea of having semantic and functional UIs
-with no side-effects. Functional CSS allows you to change one style
+with no side-effects. Functional CSS allows anyone
+to change _one_ style on a single element
 without affecting any others.
-For the past few years we have been using Tachyons
+For the past few years we have been using the Tachyons library
 see: https://github.com/dwyl/learn-tachyons
 It's been _good_ in small-ish teams (_max 8 people_),
 
@@ -86,15 +25,18 @@ https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
 
 `elm-ui` is to `HTML` and `CSS`
 what `elm` is to `JavaScript`.
-`elm-ui` offers compile-time guarantees that your layout and styles.
+`elm-ui` offers compile-time guarantees
+that your layout and styles work as expected.
 
-> "_It's all right there.
-There's no other place you have to go to modify this thing_."
-> 
+Matthew Griffith described it eloquently in his Elm Conf talk
+"Building a Toolkit for Design":
 
 [![elm-ui-tookit-for-design](https://user-images.githubusercontent.com/194400/70571846-7c240080-1b96-11ea-9dd2-cacae7110b54.png)](https://youtu.be/Ie-gqwSHQr0)
 https://youtu.be/Ie-gqwSHQr0
 
+> "_It's all right there.
+There's no other place you have to go to modify this thing_."
+
 
 ## _How?_
 
@@ -125,3 +67,80 @@ https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug
 
 + `elm-ui` _examples_: https://github.com/bburdette/elm-ui-examples
 +
+
+
+<br />
+
+## _Why NOT Just Use CSS_?
+
+
+People who are learning `CSS`
+(_or those who are too impatient to learn and just want it to "work now"!_),
+often end up feeling like `CSS` is a wild beast that cannot be tamed.
+There's a _reason_ why searching for
+["CSS gif"](https://www.google.com/search?q=css+gif&tbm=isch)
+returns this mess as the top result:
+
+<div align="center">
+  <a href="https://twitter.com/nicksherman/status/1091065393500704768">
+      <img src="https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif"
+        width="500" alt="Peter Griffen - Family Guy - CSS Trouble">
+  </a>
+</div>
+
+In reality, CSS _can_ be learned/mastered reasonably quickly
+and _amazing_ things can be crafted. <br />
+e.g:
+http://www.csszengarden.com and https://www.cssdesignawards.com <br />
+
+Sadly, it doesn't matter how well
+_you_ - the conscientious developer/designer - learn CSS.
+Unless you can ensure that _everyone_ in your team/company
+has the same level of skill and care in their work,
+it's _inevitable_ that over-time
+duplicate and _conflicting_ styles will be added.
+
+<div align="center">
+  <a href="https://twitter.com/100soft">
+      <img src="https://media.giphy.com/media/Jrl4FlTaymFFbNiwU5/giphy.gif"
+        width="500" alt="dumpster fire">
+  </a>
+</div>
+
+Take any popular website and run it through CSS Stats https://cssstats.com
+to see how many styles are being used.
+A good example is
+[Twitter.com](https://cssstats.com/stats?url=https%3A%2F%2Ftwitter.com).
+Their CSS is **632KB** (_or **113KB** when compressed+gzipped_).
+https://cssstats.com/stats?url=https%3A%2F%2Ftwitter.com
+
+![twitter-css-stats](https://user-images.githubusercontent.com/194400/70567485-f56b2580-1b8d-11ea-94c4-4e2ca8b5cd10.png)
+
+That might not sound like a lot,
+but for context **632KB** is enough to write a 100k+ word novel.
+The point is: the developers/designers at Twitter - a tech company
+with **billions** in revenue and some of the most talented people -
+have _lost control_ over their CSS.
+
+> **Twitter** created **Bootstrap**
+"_the most popular front-end framework in the world_".
+**Bootstrap	`v4`** is **123kb** (_uncompressed_)
+and **23kb** (_compressed+gzipped_);
+the _whole_ library including grid layout,
+typography, colors, all components, forms and utilities.
+Bootstrap is meant to be a _complete_ responsive grid-based design system
+that _anyone_ can use to build their App/website.
+And yet twitter, which has a _great_ in-house design team
+with their own _system_ and component library,
+have managed to create a **CSS monster**
+that is **5 times** the size of all of **Bootstrap**.
+Even if they had **20kb** of colors,
+that's enough for 256 colors, it would still be less than **150kb**.
+
+
+The problem isn't you,
+or "other people",
+the problem is the (_lack of a_) _system_.
+If the _system_ you are using to create your layout/styles
+does not give you any consistency guarantees at compilation time,
+then you don't _have_ a good enough system and chaos is _guaranteed_.

From 1ed0390ee2874cbd3e643c35fe38591853bff174 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 21:42:15 +0000
Subject: [PATCH 10/50] add examples of errors for elm-ui "What?" section #145

---
 tutorials/elm-ui/README.md    | 56 ++++++++++++++++++++++++++---------
 tutorials/elm-ui/src/Main.elm |  4 +--
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 14481ee..ebd6e84 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -1,7 +1,7 @@
 # `elm-ui` a Language for Layout and Interface
 
 
-## _Why?_ 😢 `|>` 😍
+## _Why?_ 🤷 ... 😢 🌧  `|>` 😍🌈
 
 @dwyl we _love_ the idea of having semantic and functional UIs
 with no side-effects. Functional CSS allows anyone
@@ -9,24 +9,39 @@ to change _one_ style on a single element
 without affecting any others.
 For the past few years we have been using the Tachyons library
 see: https://github.com/dwyl/learn-tachyons
-It's been _good_ in small-ish teams (_max 8 people_),
+Using Tachyons in dosens of projects
+has been _good_ in small teams (_max 8 people_).
+However we have found that even with a functional CSS library
+(_that greatly reduces the possibility of cascading side effects_),
+we still see redundant and unnecessary styles
+and occasionally visual bugs are introduced that go undetected.
+No CSS library we know of offers compile-time guarantees
+that the layout/styles applied to a given element are _correct_.
+That's where `elm-ui` comes in and changes the game!
 
 
+## _What?_ 💭
 
-
-Design System for Building Semantic Compiled UI
-
-+ GitHub:
-https://github.com/mdgriffith/elm-ui
-+ Elm Package:
-https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
-
-## _What?_
+`elm-ui` is a design system
+for building semantic UI
+with compile-time guarantees.
 
 `elm-ui` is to `HTML` and `CSS`
-what `elm` is to `JavaScript`.
+what `elm` is to `JavaScript`,
+a way of making designing web applications fun again!
 `elm-ui` offers compile-time guarantees
 that your layout and styles work as expected.
+You will see _helpful_ compiler errors/warnings
+if you attempt to make a _breaking_ change to UI!
+e.g:
+
+In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded` (`border-radius`) property:
+![image](https://user-images.githubusercontent.com/194400/70662062-69283380-1c5d-11ea-8d90-1d4f72d67ec6.png)
+
+The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2px"`
+![image](https://user-images.githubusercontent.com/194400/70662334-ec498980-1c5d-11ea-9336-56f30db80270.png)
+I get a type mismatch.
+
 
 Matthew Griffith described it eloquently in his Elm Conf talk
 "Building a Toolkit for Design":
@@ -38,6 +53,11 @@ https://youtu.be/Ie-gqwSHQr0
 There's no other place you have to go to modify this thing_."
 
 
++ GitHub:
+https://github.com/mdgriffith/elm-ui
++ Elm Package:
+https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
+
 ## _How?_
 
 In a new directory, initialise your `elm` workflow with the following command:
@@ -57,6 +77,13 @@ in the `elm.json` `"dependencies"` section.
 `elm install` does not actually _install_ anything.
 
 
+
+### Drawbacks
+
+
+`Colors` have to be specified
+
+
 ### Debugging Layout with `Element.explain Debug.todo`
 
 [Debug]
@@ -66,10 +93,11 @@ https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug
 ## References and Recommended Reading
 
 + `elm-ui` _examples_: https://github.com/bburdette/elm-ui-examples
-+
++ Style framework (_built on `elm-ui`_):
+https://github.com/lucamug/style-framework
 
 
-<br />
+<br /><br />
 
 ## _Why NOT Just Use CSS_?
 
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index 58db2c7..1c19711 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -16,7 +16,7 @@ myRowOfStuff =
     row [ width fill, centerY, spacing 30 ]
         [ myElement
         , el [ centerX ] myElement
-        , el [ alignRight, padding ] myElement -- align the element to the right
+        , el [ alignRight ] myElement -- align the element to the right
         ]
 
 
@@ -25,7 +25,7 @@ myElement =
     el
         [ Background.color (rgb255 240 0 245)
         , Font.color (rgb255 255 255 255)
-        , Border.rounded 3
+        , Border.rounded 10
         , padding 30
         ]
         (text "stylish!")

From aef3a97aaeb2c3992eeb5decc2c29b465563b402 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 22:16:03 +0000
Subject: [PATCH 11/50] add sample code for elm-ui #145

---
 tutorials/elm-ui/README.md    | 79 +++++++++++++++++++++++++++++++----
 tutorials/elm-ui/src/Main.elm | 10 ++---
 2 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index ebd6e84..b1d9b43 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -26,6 +26,11 @@ That's where `elm-ui` comes in and changes the game!
 for building semantic UI
 with compile-time guarantees.
 
++ GitHub:
+https://github.com/mdgriffith/elm-ui
++ Elm Package:
+https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
+
 `elm-ui` is to `HTML` and `CSS`
 what `elm` is to `JavaScript`,
 a way of making designing web applications fun again!
@@ -40,7 +45,8 @@ In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded`
 
 The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2px"`
 ![image](https://user-images.githubusercontent.com/194400/70662334-ec498980-1c5d-11ea-9336-56f30db80270.png)
-I get a type mismatch.
+We get a type mismatch and know _exactly_ what needs to be fixed
+in order for our view to compile.
 
 
 Matthew Griffith described it eloquently in his Elm Conf talk
@@ -53,11 +59,6 @@ https://youtu.be/Ie-gqwSHQr0
 There's no other place you have to go to modify this thing_."
 
 
-+ GitHub:
-https://github.com/mdgriffith/elm-ui
-+ Elm Package:
-https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
-
 ## _How?_
 
 In a new directory, initialise your `elm` workflow with the following command:
@@ -77,11 +78,75 @@ in the `elm.json` `"dependencies"` section.
 `elm install` does not actually _install_ anything.
 
 
+Now create a directory called `src`
+and a new file in the directory `src/Main.elm`.
+Next _type_ (_or copy-paste_) the following code into the `src/Main.elm` file:
+
+```elm
+module Main exposing (main)
+
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, rgb255, row, spacing, text, width)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+
+
+main =
+    Element.layout []
+        rowOfStuff
+
+
+rowOfStuff : Element msg
+rowOfStuff =
+    row [ width fill, centerY, spacing 30 ]
+        [ myElement
+        , el [ centerX ] myElement
+        , el [ alignRight ] myElement -- align the element to the right
+        ]
+
+
+myElement : Element msg
+myElement =
+    el
+        [ Background.color (rgb255 75 192 169)
+        , Font.color (rgb255 255 255 255)
+        , Border.rounded 10
+        , padding 30
+        ]
+        (text "stylish!")
+
+```
+
+In your terminal run:
+```
+elm reactor
+```
+Open the following page in your web browser:
+http://localhost:8000/src/Main.elm
+
+You should expect to see:
+
+![elm-ui-basic-layout](https://user-images.githubusercontent.com/194400/70663573-90cccb00-1c60-11ea-8a1c-71d15d2b83ad.png)
+
+
+
+
+<br />
 
 ### Drawbacks
 
+`Colors` have to be specified in terms of **rgb** values.
+i.e. you need to supply the individual values for `Red` `Blue` `Green` as `Int`.
+
+If I attempt to invoke `rgb255 75, 192, 169` I will see the following error:
+
+![elm-ui-rgb-error](https://user-images.githubusercontent.com/194400/70663222-cfae5100-1c5f-11ea-8fa6-6d4437e3af14.png)
+
+This is a _small_ price to pay given that it allows us to _easily_
+implement a color picker allowing people to easily select _any_ color
+when they are [_categorising_](https://github.com/dwyl/app/issues/235)
 
-`Colors` have to be specified
+![color-picker-dwyl-teal](https://user-images.githubusercontent.com/194400/70664979-72b49a00-1c63-11ea-80f4-fc533948f60f.png)
 
 
 ### Debugging Layout with `Element.explain Debug.todo`
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index 1c19711..77398e7 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -1,6 +1,6 @@
 module Main exposing (main)
 
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, rgb255, row, spacing, text, width)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
@@ -8,11 +8,11 @@ import Element.Font as Font
 
 main =
     Element.layout []
-        myRowOfStuff
+        rowOfStuff
 
 
-myRowOfStuff : Element msg
-myRowOfStuff =
+rowOfStuff : Element msg
+rowOfStuff =
     row [ width fill, centerY, spacing 30 ]
         [ myElement
         , el [ centerX ] myElement
@@ -23,7 +23,7 @@ myRowOfStuff =
 myElement : Element msg
 myElement =
     el
-        [ Background.color (rgb255 240 0 245)
+        [ Background.color (rgb255 75 192 169)
         , Font.color (rgb255 255 255 255)
         , Border.rounded 10
         , padding 30

From fd978f4bc4a8849ef3bbc33134cd8c8a4f146696 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 22:26:14 +0000
Subject: [PATCH 12/50] add instructions for converting hex to rgb (required
 for elm-ui) #145

---
 tutorials/elm-ui/README.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index b1d9b43..a313773 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -118,9 +118,11 @@ myElement =
 ```
 
 In your terminal run:
+
 ```
 elm reactor
 ```
+
 Open the following page in your web browser:
 http://localhost:8000/src/Main.elm
 
@@ -148,6 +150,14 @@ when they are [_categorising_](https://github.com/dwyl/app/issues/235)
 
 ![color-picker-dwyl-teal](https://user-images.githubusercontent.com/194400/70664979-72b49a00-1c63-11ea-80f4-fc533948f60f.png)
 
+In the short-term if we have a _hex_ value e.g: `#4bc0a9`
+that we need to convert to RGB,
+~~simply use a free online tool:
+https://www.rapidtables.com/convert/color/hex-to-rgb.html~~
+pasting the _hex_ into google returns the RGB conversion.
+e.g: https://www.google.com/search?q=%234bc0a9
+
+
 
 ### Debugging Layout with `Element.explain Debug.todo`
 

From 03023b2d39010fa7540bc2f894959af9463c8667 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 22:46:50 +0000
Subject: [PATCH 13/50] add more examples of compilation errors typo: paddign >
 padding #145

---
 tutorials/elm-ui/README.md    | 36 ++++++++++++++++++++++-------------
 tutorials/elm-ui/src/Main.elm |  4 ++--
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index a313773..0c2141d 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -1,4 +1,4 @@
-# `elm-ui` a Language for Layout and Interface
+# `elm-ui` a Language for _Reliable_ Layout and Interface
 
 
 ## _Why?_ 🤷 ... 😢 🌧  `|>` 😍🌈
@@ -31,6 +31,16 @@ https://github.com/mdgriffith/elm-ui
 + Elm Package:
 https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
 
+Matthew Griffith described it eloquently in his Elm Conf talk
+"Building a Toolkit for Design":
+
+[![elm-ui-tookit-for-design](https://user-images.githubusercontent.com/194400/70571846-7c240080-1b96-11ea-9dd2-cacae7110b54.png)](https://youtu.be/Ie-gqwSHQr0)
+https://youtu.be/Ie-gqwSHQr0
+
+> "_It's all right there.
+There's no other place you have to go to modify this thing_."
+
+
 `elm-ui` is to `HTML` and `CSS`
 what `elm` is to `JavaScript`,
 a way of making designing web applications fun again!
@@ -38,7 +48,8 @@ a way of making designing web applications fun again!
 that your layout and styles work as expected.
 You will see _helpful_ compiler errors/warnings
 if you attempt to make a _breaking_ change to UI!
-e.g:
+
+Consider the following examples:
 
 In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded` (`border-radius`) property:
 ![image](https://user-images.githubusercontent.com/194400/70662062-69283380-1c5d-11ea-8d90-1d4f72d67ec6.png)
@@ -48,18 +59,13 @@ The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2
 We get a type mismatch and know _exactly_ what needs to be fixed
 in order for our view to compile.
 
+If you make a typo in your layout/style it's won't compile:
 
-Matthew Griffith described it eloquently in his Elm Conf talk
-"Building a Toolkit for Design":
+![elm-ui-paddign-error](https://user-images.githubusercontent.com/194400/70667023-caed9b00-1c67-11ea-8396-0bf47d87a7d0.png)
 
-[![elm-ui-tookit-for-design](https://user-images.githubusercontent.com/194400/70571846-7c240080-1b96-11ea-9dd2-cacae7110b54.png)](https://youtu.be/Ie-gqwSHQr0)
-https://youtu.be/Ie-gqwSHQr0
-
-> "_It's all right there.
-There's no other place you have to go to modify this thing_."
 
 
-## _How?_
+## _How?_ 📝
 
 In a new directory, initialise your `elm` workflow with the following command:
 ```sh
@@ -85,7 +91,7 @@ Next _type_ (_or copy-paste_) the following code into the `src/Main.elm` file:
 ```elm
 module Main exposing (main)
 
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, rgb255, row, spacing, text, width)
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
@@ -114,9 +120,13 @@ myElement =
         , padding 30
         ]
         (text "stylish!")
-
 ```
 
+> This is the canonical example in the docs:
+https://github.com/mdgriffith/elm-ui
+If you are unable to run the code on your `localhost`
+try the Ellie version: https://ellie-app.com/3f2n4J5RnT3a1
+
 In your terminal run:
 
 ```
@@ -174,7 +184,7 @@ https://github.com/lucamug/style-framework
 
 <br /><br />
 
-## _Why NOT Just Use CSS_?
+## _Why NOT Just Use CSS_? 🤷
 
 
 People who are learning `CSS`
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index 77398e7..f096357 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -1,6 +1,6 @@
 module Main exposing (main)
 
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, rgb255, row, spacing, text, width)
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
@@ -26,6 +26,6 @@ myElement =
         [ Background.color (rgb255 75 192 169)
         , Font.color (rgb255 255 255 255)
         , Border.rounded 10
-        , padding 30
+        , paddign 30
         ]
         (text "stylish!")

From d754300961c7a8f8020eca1029a56d292286240f Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 23:43:59 +0000
Subject: [PATCH 14/50] suggest an alternative scoped import to reduce line
 length for elm-ui #145

---
 tutorials/elm-ui/README.md    | 109 +++++++++++++++++++++++++++++++++-
 tutorials/elm-ui/src/Main.elm |  18 +++---
 2 files changed, 116 insertions(+), 11 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 0c2141d..552e5af 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -107,7 +107,7 @@ rowOfStuff =
     row [ width fill, centerY, spacing 30 ]
         [ myElement
         , el [ centerX ] myElement
-        , el [ alignRight ] myElement -- align the element to the right
+        , el [ alignRight ] myElement
         ]
 
 
@@ -140,15 +140,120 @@ You should expect to see:
 
 ![elm-ui-basic-layout](https://user-images.githubusercontent.com/194400/70663573-90cccb00-1c60-11ea-8a1c-71d15d2b83ad.png)
 
+Let's break down this code section by section:
+
+The first line is the standard `Elm` module (export) directive.
+```elm
+module Main exposing (main)
+```
+
+The next section are the imports:
+```elm
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+```
+These are fairly standard scoped `elm` import statements.
+
+We are covering 4 out of 9 of the available `elm-ui` modules.
+The one with the most features/functions is
+[`Elemenent`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element)
+which contains everything you need for creating standard HTML elements
+including their layout and positioning.
+[`Background`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Background),
+[`Border`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Border)
+and
+[`Font`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Font)
+are _exactly_ what you would expect them to be.
+
+
+
+
+A note on long import lines:
+if you attempt to split the `import Element` declaration into two lines:
+```elm
+import Element exposing (Element, alignRight, centerX, centerY, el, fill)
+import Element exposing (padding, rgb255, row, spacing, text, width)
+```
+`elm-format` will re-format the two lines into one again ... we tried ... 🙄
+
+The way to get around this is to follow the
+[`elm` guide modules](https://guide.elm-lang.org/webapps/modules.html)
+advice and avoid using `exposing` unless it's absolutely necessary.
+So we can convert the super-long import  
+(_which will only get longer as your view expands to include more style_):
+
+From:
+
+```elm
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+```
+
+To:
+
+```elm
+import Element as E exposing (Element, el, row)
+```
+This only makes the top level elements `el` and `row` available
+for use in our view functions. The rest of the `elm-ui` functions
+need to be prefixed with `E` e.g: `E.functionName`
+
+
+The _full_ revised code would be:
+
+```elm
+module Main exposing (main)
+
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+
+
+main =
+    Element.layout []
+        rowOfStuff
+
+
+rowOfStuff : Element msg
+rowOfStuff =
+    row [ width fill, centerY, spacing 30 ]
+        [ myElement
+        , el [ centerX ] myElement
+        , el [ alignRight ] myElement -- align the element to the right
+        ]
+
+
+myElement : Element msg
+myElement =
+    el
+        [ Background.color (rgb255 75 192 169)
+        , Font.color (rgb255 255 255 255)
+        , Border.rounded 10
+        , paddign 30
+        ]
+        (E.text "stylish!")
+```
+
+Some people might feel that this is more to type.
+However it's _immediately_ clear where a given function "comes from"
+and there is a much lower risk of naming conflicts.
+E.g. you might have a _dynamic_ (_or "responsive"_) view function
+that changes depending on the `width` of the viewport (_screen_).
 
 
 
-<br />
+<br /><br />
 
 ### Drawbacks
 
 `Colors` have to be specified in terms of **rgb** values.
 i.e. you need to supply the individual values for `Red` `Blue` `Green` as `Int`.
+e.g:
+```elm
+Background.color (rgb255 75 192 169)
+```
 
 If I attempt to invoke `rgb255 75, 192, 169` I will see the following error:
 
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index f096357..f104197 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -1,31 +1,31 @@
 module Main exposing (main)
 
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element as E exposing (Element, el, row)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 
 
 main =
-    Element.layout []
+    E.layout []
         rowOfStuff
 
 
 rowOfStuff : Element msg
 rowOfStuff =
-    row [ width fill, centerY, spacing 30 ]
+    row [ E.width E.fill, E.centerY, E.spacing 30 ]
         [ myElement
-        , el [ centerX ] myElement
-        , el [ alignRight ] myElement -- align the element to the right
+        , el [ E.centerX ] myElement
+        , el [ E.alignRight ] myElement
         ]
 
 
 myElement : Element msg
 myElement =
     el
-        [ Background.color (rgb255 75 192 169)
-        , Font.color (rgb255 255 255 255)
+        [ Background.color (E.rgb255 75 192 169)
+        , Font.color (E.rgb255 255 255 255)
         , Border.rounded 10
-        , paddign 30
+        , E.padding 30
         ]
-        (text "stylish!")
+        (E.text "stylish!")

From 31065a1e58124fddc8c38cf51312b26a9a04d53c Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 23:55:04 +0000
Subject: [PATCH 15/50] update example of scoped import for elm-ui
 example/tutorial #145

---
 tutorials/elm-ui/README.md | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 552e5af..7a67b41 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -198,6 +198,10 @@ import Element as E exposing (Element, el, row)
 This only makes the top level elements `el` and `row` available
 for use in our view functions. The rest of the `elm-ui` functions
 need to be prefixed with `E` e.g: `E.functionName`
+Avoid using uncontrolled import statements
+e.g: `import Element exposing (..)` at all cost.
+They might be tempting in the short-run,
+but they rapidly become an unmaintainable headache.
 
 
 The _full_ revised code would be:
@@ -205,42 +209,56 @@ The _full_ revised code would be:
 ```elm
 module Main exposing (main)
 
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element as E exposing (Element, el, row)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 
 
 main =
-    Element.layout []
+    E.layout []
         rowOfStuff
 
 
 rowOfStuff : Element msg
 rowOfStuff =
-    row [ width fill, centerY, spacing 30 ]
+    row [ E.width E.fill, E.centerY, E.spacing 30 ]
         [ myElement
-        , el [ centerX ] myElement
-        , el [ alignRight ] myElement -- align the element to the right
+        , el [ E.centerX ] myElement
+        , el [ E.alignRight ] myElement
         ]
 
 
 myElement : Element msg
 myElement =
     el
-        [ Background.color (rgb255 75 192 169)
-        , Font.color (rgb255 255 255 255)
+        [ Background.color (E.rgb255 75 192 169)
+        , Font.color (E.rgb255 255 255 255)
         , Border.rounded 10
-        , paddign 30
+        , E.padding 30
         ]
         (E.text "stylish!")
 ```
 
-Some people might feel that this is more to type.
+Some people might feel that this tedious because it's more to type.
 However it's _immediately_ clear where a given function "comes from"
 and there is a much lower risk of naming conflicts.
-E.g. you might have a _dynamic_ (_or "responsive"_) view function
+
+Consider the following scenario:
+Your App has a _dynamic_ (_or "responsive"_) navigation view function
 that changes depending on the `width` of the viewport (_screen_).
+The signature of the function might be something like this:
+
+```elm
+nav : Int -> Html Msg
+nav width =
+  if width > 600 then
+    E.row [ E.]
+  else
+
+
+
+```
 
 
 

From c372a1ef404058b86cea0cf1836ef009392ad798 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Wed, 11 Dec 2019 23:59:40 +0000
Subject: [PATCH 16/50] must return to view width example after constructing
 sample App layout

---
 tutorials/elm-ui/README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 7a67b41..ac0a17b 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -253,11 +253,9 @@ The signature of the function might be something like this:
 nav : Int -> Html Msg
 nav width =
   if width > 600 then
-    E.row [ E.]
+    E.row [ E.width E.fill]
   else
-
-
-
+    -- something else
 ```
 
 

From 856c68c99494b409efdd0ea8de18c002e31fddfe Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Thu, 12 Dec 2019 19:50:27 +0000
Subject: [PATCH 17/50] add padding and background to row element in elm-ui
 tutorial #145

---
 tutorials/elm-ui/src/Main.elm | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index f104197..abd61ba 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -13,7 +13,12 @@ main =
 
 rowOfStuff : Element msg
 rowOfStuff =
-    row [ E.width E.fill, E.centerY, E.spacing 30 ]
+    row
+        [ E.width E.fill
+        , E.centerY
+        , E.paddingXY 42 10
+        , Background.color (E.rgb255 215 219 218)
+        ]
         [ myElement
         , el [ E.centerX ] myElement
         , el [ E.alignRight ] myElement

From 8440a1f2dc695c809c5fa3775f062abbe2556bb6 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Thu, 12 Dec 2019 19:50:50 +0000
Subject: [PATCH 18/50] comment out nav example in elm-ui #145

---
 tutorials/elm-ui/README.md | 51 +++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index ac0a17b..32c504d 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -38,7 +38,7 @@ Matthew Griffith described it eloquently in his Elm Conf talk
 https://youtu.be/Ie-gqwSHQr0
 
 > "_It's all right there.
-There's no other place you have to go to modify this thing_."
+There's no other place you have to go to modify this_."
 
 
 `elm-ui` is to `HTML` and `CSS`
@@ -49,7 +49,7 @@ that your layout and styles work as expected.
 You will see _helpful_ compiler errors/warnings
 if you attempt to make a _breaking_ change to UI!
 
-Consider the following examples:
+### Example Compile Time Warnings
 
 In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded` (`border-radius`) property:
 ![image](https://user-images.githubusercontent.com/194400/70662062-69283380-1c5d-11ea-8d90-1d4f72d67ec6.png)
@@ -63,6 +63,10 @@ If you make a typo in your layout/style it's won't compile:
 
 ![elm-ui-paddign-error](https://user-images.githubusercontent.com/194400/70667023-caed9b00-1c67-11ea-8396-0bf47d87a7d0.png)
 
+Hopefully that gives you a _taste_
+for the compiler warnings provided by `elm-ui`.
+The best way to experience this further
+is to start
 
 
 ## _How?_ 📝
@@ -80,13 +84,15 @@ Next we will add the dependency for `mdgriffith/elm-ui`:
 elm install mdgriffith/elm-ui
 ```
 > **Note**: that command will only add an entry
-in the `elm.json` `"dependencies"` section.
-`elm install` does not actually _install_ anything.
+in the `elm.json` `"dependencies"` section. <br />
+`elm install` does not actually _install_ anything
+until you attempt to compile the app.
 
 
 Now create a directory called `src`
 and a new file in the directory `src/Main.elm`.
-Next _type_ (_or copy-paste_) the following code into the `src/Main.elm` file:
+Next _type_ (_or copy-paste_) the following code
+into the `src/Main.elm` file:
 
 ```elm
 module Main exposing (main)
@@ -197,10 +203,12 @@ import Element as E exposing (Element, el, row)
 ```
 This only makes the top level elements `el` and `row` available
 for use in our view functions. The rest of the `elm-ui` functions
-need to be prefixed with `E` e.g: `E.functionName`
-Avoid using uncontrolled import statements
-e.g: `import Element exposing (..)` at all cost.
-They might be tempting in the short-run,
+need to be prefixed with `E` e.g: `E.functionName`.
+The advice from the creator of Elm
+and other experienced Elm devs is:
+avoid using uncontrolled import statements
+e.g: `import Element exposing (..)`.
+It might be tempting in the short-run to just "import everything",
 but they rapidly become an unmaintainable headache.
 
 
@@ -244,6 +252,7 @@ Some people might feel that this tedious because it's more to type.
 However it's _immediately_ clear where a given function "comes from"
 and there is a much lower risk of naming conflicts.
 
+<!--
 Consider the following scenario:
 Your App has a _dynamic_ (_or "responsive"_) navigation view function
 that changes depending on the `width` of the viewport (_screen_).
@@ -256,7 +265,18 @@ nav width =
     E.row [ E.width E.fill]
   else
     -- something else
+    -- TODO: paste example of responsive Nav once we've created it!
 ```
+-->
+
+
+
+
+
+
+
+
+
 
 
 
@@ -286,21 +306,24 @@ that we need to convert to RGB,
 ~~simply use a free online tool:
 https://www.rapidtables.com/convert/color/hex-to-rgb.html~~
 pasting the _hex_ into google returns the RGB conversion.
-e.g: https://www.google.com/search?q=%234bc0a9
-
+e.g: https://www.google.com/search?q=%234bc0a9 <br />
+A color explorer site like Color Hexa has even more detail.
+e.g: https://color-hex.org/color/4bc0a9
 
 
 ### Debugging Layout with `Element.explain Debug.todo`
 
-[Debug]
-https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug
+[Debug](https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug)
 
+<br /><br />
 
 ## References and Recommended Reading
 
 + `elm-ui` _examples_: https://github.com/bburdette/elm-ui-examples
 + Style framework (_built on `elm-ui`_):
 https://github.com/lucamug/style-framework
++ Elm UI Explorer (Style Guide):
+https://package.elm-lang.org/packages/kalutheo/elm-ui-explorer/4.0.0/
 
 
 <br /><br />
@@ -309,7 +332,7 @@ https://github.com/lucamug/style-framework
 
 
 People who are learning `CSS`
-(_or those who are too impatient to learn and just want it to "work now"!_),
+(_or those who are too impatient to learn and just want it to "work now!"_),
 often end up feeling like `CSS` is a wild beast that cannot be tamed.
 There's a _reason_ why searching for
 ["CSS gif"](https://www.google.com/search?q=css+gif&tbm=isch)

From c836e28ea46532510068ad27ea7cac571199dd12 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Thu, 12 Dec 2019 23:16:53 +0000
Subject: [PATCH 19/50] add explanation of main function requirement in elm
 programs with screenshots

---
 tutorials/elm-ui/README.md    | 143 +++++++++++++++++++++++++++++++---
 tutorials/elm-ui/src/Main.elm |  23 +++---
 2 files changed, 140 insertions(+), 26 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 32c504d..eccc00b 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -146,6 +146,27 @@ You should expect to see:
 
 ![elm-ui-basic-layout](https://user-images.githubusercontent.com/194400/70663573-90cccb00-1c60-11ea-8a1c-71d15d2b83ad.png)
 
+If you open the elements tab of Dev Tools in your browser
+you will see the resulting HTML code:
+
+![generated-html](https://user-images.githubusercontent.com/194400/70760326-30fa2100-1d41-11ea-913d-d42fff663637.png)
+
+As far as generated HTML goes this is not too bad.
+
+
+<!--
+If you are curious what those `<s>` and `<u>` HTML elements are,
+
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
+<s> element renders text with a strikethrough, or a line through it.
+
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
+The HTML Unarticulated Annotation Element (<u>)
+represents a span of inline text which should be rendered
+in a way that indicates that it has a non-textual annotation.
+
+-->
+
 Let's break down this code section by section:
 
 The first line is the standard `Elm` module (export) directive.
@@ -160,9 +181,10 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 ```
-These are fairly standard scoped `elm` import statements.
+These are fairly standard scoped `elm` `import` statements.
 
-We are covering 4 out of 9 of the available `elm-ui` modules.
+In this simple example we are using
+4 out of 9 of the available `elm-ui` modules.
 The one with the most features/functions is
 [`Elemenent`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element)
 which contains everything you need for creating standard HTML elements
@@ -171,12 +193,86 @@ including their layout and positioning.
 [`Border`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Border)
 and
 [`Font`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Font)
-are _exactly_ what you would expect them to be.
+are _exactly_ what you would expect them to be,
+a collection functions related to styling those properties.
+We will cover each of these in more detail later on as needed,
+however I encourage you to click the links
+and scroll through available functions
+to get an idea for what they can do.
+
+#### The `main` function
+
+Let's continue looking at the 3 sections of code.
+`main` assembles the rest of the code so it can be exposed
+to the `elm` compiler.
+
+
+```elm
+main =
+    Element.layout []
+        rowOfStuff
+```
+This function creates an `Element.layout`
+
 
 
+#### Side Note on Naming Conventions
+
+Naming the entry point function `main` is not just a _convention_,
+it's a compiler requirement.
+If you try renaming `main` to something else in both places it appears,
+your code won't compile.
+You will see the following error message
+in your browser (_running `elm reactor`_):
+
+![main-not-defined](https://user-images.githubusercontent.com/194400/70759502-8123b400-1d3e-11ea-8ee9-2c1751455a6d.png)
+
+And the following compiler warning if you attempt to compile it:
+
+![compiler-warning-no-main](https://user-images.githubusercontent.com/194400/70759831-8df4d780-1d3f-11ea-8369-b12108062f16.png)
+
+This is a _good_ thing, because it means all `elm` programs are consistent.
+You won't see the `main` function of a program being named `app` or `myfunc`
+which means there are fewer changes of confusion for beginners.
+
+
+
+####
+
+
+```elm
+rowOfStuff : Element msg
+rowOfStuff =
+    row [ width fill, centerY, spacing 30 ]
+        [ myElement
+        , el [ centerX ] myElement
+        , el [ alignRight ] myElement
+        ]
+```
+
 
 
-A note on long import lines:
+```elm
+myElement : Element msg
+myElement =
+    el
+        [ Background.color (rgb255 75 192 169)
+        , Font.color (rgb255 255 255 255)
+        , Border.rounded 10
+        , padding 30
+        ]
+        (text "stylish!")
+```
+
+
+
+
+
+
+<br /><br /><br /><br />
+
+
+A quick note on long import lines:
 if you attempt to split the `import Element` declaration into two lines:
 ```elm
 import Element exposing (Element, alignRight, centerX, centerY, el, fill)
@@ -201,12 +297,12 @@ To:
 ```elm
 import Element as E exposing (Element, el, row)
 ```
-This only makes the top level elements `el` and `row` available
+This only makes the top level elements `el`, `layout` and `row` available
 for use in our view functions. The rest of the `elm-ui` functions
 need to be prefixed with `E` e.g: `E.functionName`.
 The advice from the creator of Elm
 and other experienced Elm devs is:
-avoid using uncontrolled import statements
+avoid using unqualified import statements
 e.g: `import Element exposing (..)`.
 It might be tempting in the short-run to just "import everything",
 but they rapidly become an unmaintainable headache.
@@ -217,14 +313,14 @@ The _full_ revised code would be:
 ```elm
 module Main exposing (main)
 
-import Element as E exposing (Element, el, row)
+import Element as E exposing (Element, el, layout, row)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 
 
 main =
-    E.layout []
+    layout []
         rowOfStuff
 
 
@@ -252,6 +348,13 @@ Some people might feel that this tedious because it's more to type.
 However it's _immediately_ clear where a given function "comes from"
 and there is a much lower risk of naming conflicts.
 
+We will be adopting this `E.` prefix approach
+for the remainder of this tutorial
+because it's the method recommended/used by Evan.
+
+> See "Using Modules" section at the end of:
+https://guide.elm-lang.org/webapps/modules.html
+
 <!--
 Consider the following scenario:
 Your App has a _dynamic_ (_or "responsive"_) navigation view function
@@ -269,6 +372,22 @@ nav width =
 ```
 -->
 
+```elm
+rowOfStuff : Element msg
+rowOfStuff =
+    row
+        [ E.width E.fill
+        , E.centerY
+        , E.paddingXY 42 10
+        , Background.color (E.rgb255 215 219 218)
+        ]
+        [ myElement
+        , el [ E.centerX ] myElement
+        , el [ E.alignRight ] myElement
+        ]
+```
+
+
 
 
 
@@ -277,6 +396,10 @@ nav width =
 
 
 
+### Debugging Layout with `Element.explain Debug.todo`
+
+[Debug](https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug)
+
 
 
 
@@ -311,10 +434,6 @@ A color explorer site like Color Hexa has even more detail.
 e.g: https://color-hex.org/color/4bc0a9
 
 
-### Debugging Layout with `Element.explain Debug.todo`
-
-[Debug](https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug)
-
 <br /><br />
 
 ## References and Recommended Reading
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index abd61ba..bc7320b 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -1,36 +1,31 @@
 module Main exposing (main)
 
-import Element as E exposing (Element, el, row)
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 
 
 main =
-    E.layout []
+    Element.layout []
         rowOfStuff
 
 
 rowOfStuff : Element msg
 rowOfStuff =
-    row
-        [ E.width E.fill
-        , E.centerY
-        , E.paddingXY 42 10
-        , Background.color (E.rgb255 215 219 218)
-        ]
+    row [ width fill, centerY, spacing 30 ]
         [ myElement
-        , el [ E.centerX ] myElement
-        , el [ E.alignRight ] myElement
+        , el [ centerX ] myElement
+        , el [ alignRight ] myElement
         ]
 
 
 myElement : Element msg
 myElement =
     el
-        [ Background.color (E.rgb255 75 192 169)
-        , Font.color (E.rgb255 255 255 255)
+        [ Background.color (rgb255 75 192 169)
+        , Font.color (rgb255 255 255 255)
         , Border.rounded 10
-        , E.padding 30
+        , padding 30
         ]
-        (E.text "stylish!")
+        (text "stylish!")

From 01ede3b4b5749c5ddc05280809bc6f38b5d77cc8 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Fri, 13 Dec 2019 10:33:56 +0000
Subject: [PATCH 20/50] add explanation of row for #145

---
 tutorials/elm-ui/README.md | 107 +++++++++++++++++++++++++++++++++----
 1 file changed, 97 insertions(+), 10 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index eccc00b..fd4bc4f 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -30,6 +30,8 @@ with compile-time guarantees.
 https://github.com/mdgriffith/elm-ui
 + Elm Package:
 https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
++ Examples:
+https://github.com/mdgriffith/elm-ui/tree/master/examples
 
 Matthew Griffith described it eloquently in his Elm Conf talk
 "Building a Toolkit for Design":
@@ -149,9 +151,18 @@ You should expect to see:
 If you open the elements tab of Dev Tools in your browser
 you will see the resulting HTML code:
 
-![generated-html](https://user-images.githubusercontent.com/194400/70760326-30fa2100-1d41-11ea-913d-d42fff663637.png)
+![generated-html](https://user-images.githubusercontent.com/194400/70762204-b08aee80-1d47-11ea-9d5f-bd8e121a42d8.png)
 
-As far as generated HTML goes this is not too bad.
+As far as generated HTML goes this is not _too_ bad.
+The in-line CSS classes are generated at compile time
+and included in `<style>` blocks.
+Semantic class names are inserted into the `<div>` elements.
+For a list of these class names, see:
+[`Style.elm#L131`](https://github.com/mdgriffith/elm-ui/blob/53a2732d9533c242c7690e16506b673af982032a/src/Internal/Style.elm#L131).
+Under the hood `elm-ui` is just using
+[`elm/html`](https://github.com/mdgriffith/elm-ui/blob/53a2732d9533c242c7690e16506b673af982032a/src/Element.elm#L215)
+(_the core html package_) so the resulting rendered html
+should be pretty similar to standard a `elm` view.
 
 
 <!--
@@ -164,24 +175,30 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
 The HTML Unarticulated Annotation Element (<u>)
 represents a span of inline text which should be rendered
 in a way that indicates that it has a non-textual annotation.
-
 -->
 
-Let's break down this code section by section:
+Let's break down the `elm` code section by section:
+
+The first line is the standard `elm` module (export) directive.
 
-The first line is the standard `Elm` module (export) directive.
 ```elm
 module Main exposing (main)
 ```
 
+This needs to be here for the `elm` compiler to know the entry point.
+
 The next section are the imports:
+
 ```elm
 import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 ```
-These are fairly standard scoped `elm` `import` statements.
+
+These are fairly standard scoped `elm` `import` statements
+they should be familiar to anyone who has read the
+[elm guide](https://guide.elm-lang.org/).
 
 In this simple example we are using
 4 out of 9 of the available `elm-ui` modules.
@@ -200,7 +217,7 @@ however I encourage you to click the links
 and scroll through available functions
 to get an idea for what they can do.
 
-#### The `main` function
+### The `main` function
 
 Let's continue looking at the 3 sections of code.
 `main` assembles the rest of the code so it can be exposed
@@ -213,7 +230,20 @@ main =
         rowOfStuff
 ```
 This function creates an `Element.layout`
-
+which is the root node for your app/view.
+It has the class of `ui` which has the following definition:
+```css
+.ui {
+    width: 100%;
+    height: auto;
+    min-height: 100%;
+    z-index: 0;
+}
+```
+In this case it takes up the full width and height of the view port.
+But it could also be used for just a portion of the screen
+if you are just getting started using `elm` at
+[work](https://elm-lang.org/news/how-to-use-elm-at-work)
 
 
 #### Side Note on Naming Conventions
@@ -237,8 +267,9 @@ which means there are fewer changes of confusion for beginners.
 
 
 
-####
+### Row Of Elements
 
+`row` is a layout wrapper function for holding other elements in a row.
 
 ```elm
 rowOfStuff : Element msg
@@ -250,7 +281,62 @@ rowOfStuff =
         ]
 ```
 
+the `row` function creates a `<div>` with the CSS class `r`.
+Which is defined as:
+```css
+.r {
+    display: flex;
+    flex-direction: row;
+}
+```
+`display:flex` has full support on all modern/recent web browsers.
+see: https://caniuse.com/#feat=mdn-css_properties_display_flex <br />
+More detail:
+https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
+
+```elm
+row [ width fill, centerY, spacing 30 ]
+```
+The first argument to `row` is a `list` of attributes.
+In this case `width fill` means the
+row should occupy the full width of the viewpor.
+`centerY` means the row should be vertically aligned to the center of the page.
+`spacing 30` is the spacing between the row elements,
+in this case a _minimum_ of `30px`.
+
+![spacing-vs-padding](https://user-images.githubusercontent.com/194400/70792908-287e0680-1d92-11ea-9971-77e440d99c4d.png)
 
+If you constrain the window you will see the `spacing 30` in action:
+
+![minimum-spacing](https://user-images.githubusercontent.com/194400/70793014-52372d80-1d92-11ea-8090-fb7b6316b8eb.png)
+
+It preserves the spacing between elements so it always looks good.
+We will see a more real-world example of this later.
+
+
+The _second_ argument to the `row` function is a `list` child nodes.
+
+```elm
+[ myElement
+, el [ centerX ] myElement
+, el [ alignRight ] myElement
+]
+```
+The first `myElement` has no style/position applied to it
+so it will just appear on the left of the row.
+the next `myElelement` is wrapped in a container `el` (`<div>`)
+and given an attribute of `centerX` to ensure that it is
+centered _horizontally_ in the middle of the page.
+The third `myElement` is also wrapped in an `el`
+and given the
+
+
+
+#### Individual Element
+
+The `myElement` function uses the `el` function
+to create a `<div>` element with specific attributes
+and a child `text` node with the text "stylish!" in it.
 
 ```elm
 myElement : Element msg
@@ -443,7 +529,8 @@ e.g: https://color-hex.org/color/4bc0a9
 https://github.com/lucamug/style-framework
 + Elm UI Explorer (Style Guide):
 https://package.elm-lang.org/packages/kalutheo/elm-ui-explorer/4.0.0/
-
++ Brief intro to `elm-ui`
+https://orasund.gitbook.io/elm-cookbook/frameworks-1/elm-ui-1
 
 <br /><br />
 

From 79717bd5365be1b077b815f0af08c0163a9a0b6e Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Sat, 14 Dec 2019 11:43:14 +0000
Subject: [PATCH 21/50] finished explaining the basic elm-ui example
 line-by-line for #145

---
 tutorials/elm-ui/README.md | 70 ++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 40 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index fd4bc4f..6adb2be 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -59,9 +59,9 @@ In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded`
 The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2px"`
 ![image](https://user-images.githubusercontent.com/194400/70662334-ec498980-1c5d-11ea-9336-56f30db80270.png)
 We get a type mismatch and know _exactly_ what needs to be fixed
-in order for our view to compile.
+for our view to compile.
 
-If you make a typo in your layout/style it's won't compile:
+If you make a typo in your layout/style it won't compile:
 
 ![elm-ui-paddign-error](https://user-images.githubusercontent.com/194400/70667023-caed9b00-1c67-11ea-8396-0bf47d87a7d0.png)
 
@@ -328,7 +328,9 @@ the next `myElelement` is wrapped in a container `el` (`<div>`)
 and given an attribute of `centerX` to ensure that it is
 centered _horizontally_ in the middle of the page.
 The third `myElement` is also wrapped in an `el`
-and given the
+which has the `alignRight` attribute,
+which as it's name suggests,
+aligns the element to right of the parent element.
 
 
 
@@ -350,16 +352,38 @@ myElement =
         (text "stylish!")
 ```
 
+**`el`** is a general purpose "container" element
+that is used to apply styles/properties
+to the child elements it contains.
+In this case the **`el`**
+has a list with the following attributes:
 
+```elm
+[ Background.color (rgb255 75 192 169)
+, Font.color (rgb255 255 255 255)
+, Border.rounded 10
+, padding 30
+]
+```
++ `Background.color (rgb255 75 192 169)` - Apply a **`teal`** background color
+to the `el`.
++ `Font.color (rgb255 255 255 255)` - use a **`white`** font color.
++ `Border.rounded 10` - round the borders of all four corners of the `el`.
++ `padding 30` - apply a padding between the outside of the `el` and the `text`.
 
 
+> If _anything_ is unclear about this initial example of using `elm-ui`,
+please
+[_ask_ questions](https://github.com/dwyl/learn-elm/issues)
+so that we can clarify for _everyone_ reading.
 
 
-<br /><br /><br /><br />
 
+#### A Note on Long `import` lines
 
-A quick note on long import lines:
-if you attempt to split the `import Element` declaration into two lines:
+You may have noticed that the import line for the `Element` module
+is rather long, and the more `elm-ui` features you use the longer it will get!
+If you attempt to split the `import Element` declaration into two lines:
 ```elm
 import Element exposing (Element, alignRight, centerX, centerY, el, fill)
 import Element exposing (padding, rgb255, row, spacing, text, width)
@@ -441,40 +465,6 @@ because it's the method recommended/used by Evan.
 > See "Using Modules" section at the end of:
 https://guide.elm-lang.org/webapps/modules.html
 
-<!--
-Consider the following scenario:
-Your App has a _dynamic_ (_or "responsive"_) navigation view function
-that changes depending on the `width` of the viewport (_screen_).
-The signature of the function might be something like this:
-
-```elm
-nav : Int -> Html Msg
-nav width =
-  if width > 600 then
-    E.row [ E.width E.fill]
-  else
-    -- something else
-    -- TODO: paste example of responsive Nav once we've created it!
-```
--->
-
-```elm
-rowOfStuff : Element msg
-rowOfStuff =
-    row
-        [ E.width E.fill
-        , E.centerY
-        , E.paddingXY 42 10
-        , Background.color (E.rgb255 215 219 218)
-        ]
-        [ myElement
-        , el [ E.centerX ] myElement
-        , el [ E.alignRight ] myElement
-        ]
-```
-
-
-
 
 
 

From a47ebcb95ca77769f2a9bfa23d028b942124ec48 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Sat, 14 Dec 2019 11:44:55 +0000
Subject: [PATCH 22/50] clarify explanation of el function in elm-ui #145

---
 tutorials/elm-ui/README.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 6adb2be..e433571 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -314,7 +314,8 @@ It preserves the spacing between elements so it always looks good.
 We will see a more real-world example of this later.
 
 
-The _second_ argument to the `row` function is a `list` child nodes.
+The _second_ argument to the `row` function
+is a `list` child of nodes:
 
 ```elm
 [ myElement
@@ -336,6 +337,12 @@ aligns the element to right of the parent element.
 
 #### Individual Element
 
+in `elm-ui` the **`el`** is a general purpose "container" element
+similar to `<div>` in HTML.
+`el` is used to apply styles/properties
+to the child elements it contains.
+The _first_ argument to the `el` function
+is a list of the style attributes to be applied.
 The `myElement` function uses the `el` function
 to create a `<div>` element with specific attributes
 and a child `text` node with the text "stylish!" in it.
@@ -352,11 +359,8 @@ myElement =
         (text "stylish!")
 ```
 
-**`el`** is a general purpose "container" element
-that is used to apply styles/properties
-to the child elements it contains.
 In this case the **`el`**
-has a list with the following attributes:
+a list with the following attributes:
 
 ```elm
 [ Background.color (rgb255 75 192 169)

From 7dbaf6687d330789ffcad1a65facccda31a50f1c Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Sun, 15 Dec 2019 09:06:00 +0000
Subject: [PATCH 23/50] update link to Ellie example for people who cant
 install #145

---
 tutorials/elm-ui/README.md    | 75 ++++++++++++++++++++++++-----------
 tutorials/elm-ui/src/Main.elm |  2 +-
 2 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index e433571..f14cb49 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -9,13 +9,15 @@ to change _one_ style on a single element
 without affecting any others.
 For the past few years we have been using the Tachyons library
 see: https://github.com/dwyl/learn-tachyons
-Using Tachyons in dosens of projects
-has been _good_ in small teams (_max 8 people_).
-However we have found that even with a functional CSS library
+and it's been a breath of fresh air.
+Using Tachyons in dozens of projects
+has been _good_ in small teams (_max 8 people_)
+and we have had far fewer UI bugs than before adopting Tachyons.
+_However_ we have found that even with a functional CSS library
 (_that greatly reduces the possibility of cascading side effects_),
 we still see redundant and unnecessary styles
-and occasionally visual bugs are introduced that go undetected.
-No CSS library we know of offers compile-time guarantees
+and _occasionally_ visual bugs are introduced that go undetected.
+No CSS library or pre-processor we know of offers compile-time guarantees
 that the layout/styles applied to a given element are _correct_.
 That's where `elm-ui` comes in and changes the game!
 
@@ -26,12 +28,9 @@ That's where `elm-ui` comes in and changes the game!
 for building semantic UI
 with compile-time guarantees.
 
-+ GitHub:
-https://github.com/mdgriffith/elm-ui
-+ Elm Package:
-https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
-+ Examples:
-https://github.com/mdgriffith/elm-ui/tree/master/examples
+_This_ tutorial aims to take a complete beginner
+who has never seen any `elm-ui` to a basic understanding.
+
 
 Matthew Griffith described it eloquently in his Elm Conf talk
 "Building a Toolkit for Design":
@@ -51,13 +50,16 @@ that your layout and styles work as expected.
 You will see _helpful_ compiler errors/warnings
 if you attempt to make a _breaking_ change to UI!
 
+
 ### Example Compile Time Warnings
 
-In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded` (`border-radius`) property:
-![image](https://user-images.githubusercontent.com/194400/70662062-69283380-1c5d-11ea-8d90-1d4f72d67ec6.png)
+In this case I have attempted to apply a `Float`
+of `2.5` to the `Border.rounded` (`border-radius`) property:
+![elm-ui-compilation-error-float](https://user-images.githubusercontent.com/194400/70662062-69283380-1c5d-11ea-8d90-1d4f72d67ec6.png)
 
-The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2px"`
-![image](https://user-images.githubusercontent.com/194400/70662334-ec498980-1c5d-11ea-9336-56f30db80270.png)
+The same thing goes if we attempt to pass a `String`
+to `Border.rounded` e.g: `"2px"`
+![elm-ui-compiler-error-string](https://user-images.githubusercontent.com/194400/70662334-ec498980-1c5d-11ea-9336-56f30db80270.png)
 We get a type mismatch and know _exactly_ what needs to be fixed
 for our view to compile.
 
@@ -66,9 +68,9 @@ If you make a typo in your layout/style it won't compile:
 ![elm-ui-paddign-error](https://user-images.githubusercontent.com/194400/70667023-caed9b00-1c67-11ea-8396-0bf47d87a7d0.png)
 
 Hopefully that gives you a _taste_
-for the compiler warnings provided by `elm-ui`.
+for the compiler warnings provided by `elm-ui`. <br />
 The best way to experience this further
-is to start
+is to fire up your text editor and start coding!
 
 
 ## _How?_ 📝
@@ -79,7 +81,7 @@ elm init
 ```
 
 That will create an `elm.json` file similar to this one:
-[`elm.json`]()
+[`elm.json`](https://github.com/dwyl/learn-elm/blob/master/tutorials/elm-ui/elm.json)
 
 Next we will add the dependency for `mdgriffith/elm-ui`:
 ```sh
@@ -92,7 +94,7 @@ until you attempt to compile the app.
 
 
 Now create a directory called `src`
-and a new file in the directory `src/Main.elm`.
+and a new file in the directory `src/Main.elm`. <br />
 Next _type_ (_or copy-paste_) the following code
 into the `src/Main.elm` file:
 
@@ -131,9 +133,9 @@ myElement =
 ```
 
 > This is the canonical example in the docs:
-https://github.com/mdgriffith/elm-ui
+https://github.com/mdgriffith/elm-ui <br />
 If you are unable to run the code on your `localhost`
-try the Ellie version: https://ellie-app.com/3f2n4J5RnT3a1
+try the Ellie version: https://ellie-app.com/7vDrXpCckNWa1
 
 In your terminal run:
 
@@ -337,7 +339,8 @@ aligns the element to right of the parent element.
 
 #### Individual Element
 
-in `elm-ui` the **`el`** is a general purpose "container" element
+In `elm-ui` the **`el`** function
+is a general purpose "container" element
 similar to `<div>` in HTML.
 `el` is used to apply styles/properties
 to the child elements it contains.
@@ -478,7 +481,25 @@ https://guide.elm-lang.org/webapps/modules.html
 
 ### Debugging Layout with `Element.explain Debug.todo`
 
+Using elm's built in
 [Debug](https://package.elm-lang.org/packages/elm-lang/core/3.0.0/Debug)
+functionality,
+`elm-ui` allows you to _visually_ debug your UI
+simply by adding the following function call
+as an element in the attributes list of any `el` call.
+
+Take the example above and add `Element.explain Debug.todo`
+in the list:
+
+```elm
+main =
+    layout [Element.explain Debug.todo]
+        rowOfStuff
+```
+
+
+
+
 
 
 
@@ -518,6 +539,13 @@ e.g: https://color-hex.org/color/4bc0a9
 
 ## References and Recommended Reading
 
+
++ GitHub Project:
+https://github.com/mdgriffith/elm-ui
++ Elm Package:
+https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
++ Examples:
+https://github.com/mdgriffith/elm-ui/tree/master/examples
 + `elm-ui` _examples_: https://github.com/bburdette/elm-ui-examples
 + Style framework (_built on `elm-ui`_):
 https://github.com/lucamug/style-framework
@@ -532,7 +560,8 @@ https://orasund.gitbook.io/elm-cookbook/frameworks-1/elm-ui-1
 
 
 People who are learning `CSS`
-(_or those who are too impatient to learn and just want it to "work now!"_),
+(_or those who are too busy/impatient to learn
+  and just want it to "work now!"_),
 often end up feeling like `CSS` is a wild beast that cannot be tamed.
 There's a _reason_ why searching for
 ["CSS gif"](https://www.google.com/search?q=css+gif&tbm=isch)
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index bc7320b..213db79 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -7,7 +7,7 @@ import Element.Font as Font
 
 
 main =
-    Element.layout []
+    Element.layout [ Element.explain Debug.todo ]
         rowOfStuff
 
 

From 89a21e7d6a0c6a7d98b7fa3a7b5814c11e124ca7 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 11:17:34 +0000
Subject: [PATCH 24/50] update intro copy in "Why?" section of elm-ui #145

---
 tutorials/elm-ui/README.md | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index f14cb49..8ef96ef 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -1,18 +1,35 @@
 # `elm-ui` a Language for _Reliable_ Layout and Interface
 
+_This_ tutorial aims to take a complete beginner -
+who has never seen any `elm-ui` -
+to a basic understanding in 10 minutes.
+
 
 ## _Why?_ 🤷 ... 😢 🌧  `|>` 😍🌈
 
-@dwyl we _love_ the idea of having semantic and functional UIs
-with no side-effects. Functional CSS allows anyone
+Few people _love_ writing CSS.
+Most people just want to build their App's layout
+_without_ the headache of knowing how to position things.
+`elm-ui` lets you build beautiful, fast and responsive UIs in `elm`,
+without writing _any_ CSS.
+But `elm-ui` goes _way_ beyond offering a design system,
+because it's built using pure `elm` functions,
+it gives you compile-time guarantees that your layout/styles
+are valid. So not only is it easier/faster to build the UI,
+it makes extending and _maintaining_ your App _effortless_!
+
+> @dwyl we _love_ the idea of having semantic, functional and responsive UIs
+with no side-effects. <br />
+**Functional CSS** libraries allow anyone on a team
 to change _one_ style on a single element
-without affecting any others.
+without affecting any others. <br />
 For the past few years we have been using the Tachyons library
-see: https://github.com/dwyl/learn-tachyons
+see:
+[github.com/dwyl/**learn-tachyons**](https://github.com/dwyl/learn-tachyons)
 and it's been a breath of fresh air.
 Using Tachyons in dozens of projects
-has been _good_ in small teams (_max 8 people_)
-and we have had far fewer UI bugs than before adopting Tachyons.
+has been _good_ in small teams (_0-12 people_)
+and we have had _far_ fewer UI bugs than before adopting Tachyons.
 _However_ we have found that even with a functional CSS library
 (_that greatly reduces the possibility of cascading side effects_),
 we still see redundant and unnecessary styles
@@ -28,9 +45,6 @@ That's where `elm-ui` comes in and changes the game!
 for building semantic UI
 with compile-time guarantees.
 
-_This_ tutorial aims to take a complete beginner
-who has never seen any `elm-ui` to a basic understanding.
-
 
 Matthew Griffith described it eloquently in his Elm Conf talk
 "Building a Toolkit for Design":

From 5a058f0cf33e05d230df8412cff99ff6145c0ada Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 17:17:27 +0000
Subject: [PATCH 25/50] re-org elm-ui/README.md intro

---
 tutorials/elm-ui/README.md | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 8ef96ef..e55ac1d 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -4,16 +4,17 @@ _This_ tutorial aims to take a complete beginner -
 who has never seen any `elm-ui` -
 to a basic understanding in 10 minutes.
 
+<br />
 
 ## _Why?_ 🤷 ... 😢 🌧  `|>` 😍🌈
 
 Few people _love_ writing CSS.
-Most people just want to build their App's layout
+Most people just want to build their App
 _without_ the headache of knowing how to position things.
-`elm-ui` lets you build beautiful, fast and responsive UIs in `elm`,
-without writing _any_ CSS.
-But `elm-ui` goes _way_ beyond offering a design system,
-because it's built using pure `elm` functions,
+**`elm-ui`** lets you build beautiful, fast and responsive UIs in `elm`,
+without writing _any_ CSS!
+But `elm-ui` goes _way_ beyond offering a design system.
+Since it's built using pure `elm` functions,
 it gives you compile-time guarantees that your layout/styles
 are valid. So not only is it easier/faster to build the UI,
 it makes extending and _maintaining_ your App _effortless_!
@@ -38,6 +39,7 @@ No CSS library or pre-processor we know of offers compile-time guarantees
 that the layout/styles applied to a given element are _correct_.
 That's where `elm-ui` comes in and changes the game!
 
+<br />
 
 ## _What?_ 💭
 
@@ -305,18 +307,21 @@ Which is defined as:
     flex-direction: row;
 }
 ```
-`display:flex` has full support on all modern/recent web browsers.
+`display:flex` has full support on all modern/recent web browsers. <br />
 see: https://caniuse.com/#feat=mdn-css_properties_display_flex <br />
 More detail:
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
 
+The first argument to `row` is a `list` of attributes.
+
 ```elm
 row [ width fill, centerY, spacing 30 ]
 ```
-The first argument to `row` is a `list` of attributes.
+
 In this case `width fill` means the
-row should occupy the full width of the viewpor.
-`centerY` means the row should be vertically aligned to the center of the page.
+row should occupy the full width of the viewport.
+`centerY` means the row should be _vertically_ aligned
+to the center of the page.
 `spacing 30` is the spacing between the row elements,
 in this case a _minimum_ of `30px`.
 

From 32d83bb2259c3f38082b2022bcc17d98cc4e497c Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 19:41:37 +0000
Subject: [PATCH 26/50] add section using Element.explain Debug.todo to debug
 layout #145

---
 tutorials/elm-ui/README.md    | 53 +++++++++++++++++++++++++++++++----
 tutorials/elm-ui/src/Main.elm |  4 +--
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index e55ac1d..718c04e 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -312,18 +312,18 @@ see: https://caniuse.com/#feat=mdn-css_properties_display_flex <br />
 More detail:
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
 
-The first argument to `row` is a `list` of attributes.
+The first argument to `row` is a `list` of attributes:
 
 ```elm
 row [ width fill, centerY, spacing 30 ]
 ```
 
 In this case `width fill` means the
-row should occupy the full width of the viewport.
+row should occupy the full width of the viewport. <br />
 `centerY` means the row should be _vertically_ aligned
-to the center of the page.
+to the center of the page. <br />
 `spacing 30` is the spacing between the row elements,
-in this case a _minimum_ of `30px`.
+in this case a _minimum_ of `30 pixels`.
 
 ![spacing-vs-padding](https://user-images.githubusercontent.com/194400/70792908-287e0680-1d92-11ea-9971-77e440d99c4d.png)
 
@@ -508,7 +508,7 @@ simply by adding the following function call
 as an element in the attributes list of any `el` call.
 
 Take the example above and add `Element.explain Debug.todo`
-in the list:
+in the list of attributes for the `layout` function::
 
 ```elm
 main =
@@ -516,11 +516,51 @@ main =
         rowOfStuff
 ```
 
+The result is a gold border around the whole of the `layout` container element:
 
+![element.explain-Debug.todo](https://user-images.githubusercontent.com/194400/70936533-62713600-203a-11ea-8101-5df5a9c07709.png)
 
+This also added a dashed border around the `row` element.
 
+If we instead move the `Element.explain Debug.todo`
+to the List of attributes for the `row`:
 
+```elm
+rowOfStuff : Element msg
+rowOfStuff =
+    row [ width fill, centerY, spacing 30, Element.explain Debug.todo ]
+        [ myElement
+        , el [ centerX ] myElement
+        , el [ alignRight ] myElement
+        ]
+```
+
+The result is:
+
+![debug-row](https://user-images.githubusercontent.com/194400/70936813-0d81ef80-203b-11ea-9c86-078e5dfb2164.png)
+
+This has applied the **gold** border to the **`row`**
+and dashed border to the individual row items.
+You will notice that because two the _children_ of the `row`
+are in fact `el` (_container/wrapper_) elements
+which then contain the `myElement` (`el`),
+when the `Element.explain` is applied to the `row`,
+it adds a _double_ dashed border to the elements that are nested.
+
+Our final debug option is to apply `Element.explain` debugging
+to just a _single_ `el` in the `row`:
+
+```elm
+rowOfStuff : Element msg
+rowOfStuff =
+    row [ width fill, centerY, spacing 30 ]
+        [ myElement
+        , el [ centerX, Element.explain Debug.todo ] myElement
+        , el [ alignRight ] myElement
+        ]
+```
 
+This allows us to pinpoint the _single_ `el` in the `row` if we need to.
 
 
 <br /><br />
@@ -534,7 +574,8 @@ e.g:
 Background.color (rgb255 75 192 169)
 ```
 
-If I attempt to invoke `rgb255 75, 192, 169` I will see the following error:
+If we attempt to invoke `rgb255 75, 192, 169`
+we will see the following error:
 
 ![elm-ui-rgb-error](https://user-images.githubusercontent.com/194400/70663222-cfae5100-1c5f-11ea-8fa6-6d4437e3af14.png)
 
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index 213db79..9376828 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -7,7 +7,7 @@ import Element.Font as Font
 
 
 main =
-    Element.layout [ Element.explain Debug.todo ]
+    Element.layout []
         rowOfStuff
 
 
@@ -15,7 +15,7 @@ rowOfStuff : Element msg
 rowOfStuff =
     row [ width fill, centerY, spacing 30 ]
         [ myElement
-        , el [ centerX ] myElement
+        , el [ centerX, Element.explain Debug.todo ] myElement
         , el [ alignRight ] myElement
         ]
 

From 45cfc393dc9dd629193368eb40d2dfea0e5b50a7 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 19:51:30 +0000
Subject: [PATCH 27/50] add additional sub-heading for easier navigation

---
 tutorials/elm-ui/README.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 718c04e..1909de1 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -172,6 +172,9 @@ you will see the resulting HTML code:
 ![generated-html](https://user-images.githubusercontent.com/194400/70762204-b08aee80-1d47-11ea-9d5f-bd8e121a42d8.png)
 
 As far as generated HTML goes this is not _too_ bad.
+It's common for `elm` apps to get a 100 score for accessibility,
+speed, SEO and progressiveness on Google's
+[Lighthouse Score](https://developers.google.com/web/tools/lighthouse).
 The in-line CSS classes are generated at compile time
 and included in `<style>` blocks.
 Semantic class names are inserted into the `<div>` elements.
@@ -195,6 +198,9 @@ represents a span of inline text which should be rendered
 in a way that indicates that it has a non-textual annotation.
 -->
 
+### Code _Explanation_
+
+
 Let's break down the `elm` code section by section:
 
 The first line is the standard `elm` module (export) directive.
@@ -204,6 +210,9 @@ module Main exposing (main)
 ```
 
 This needs to be here for the `elm` compiler to know the entry point.
+You will have seen this line all throughout the
+[elm guide](https://guide.elm-lang.org).
+More detail is given below on the `main` function.
 
 The next section are the imports:
 

From f323c8b3dd2473bec67e1c146f9d08531d6800fb Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 19:53:42 +0000
Subject: [PATCH 28/50] deep link to modules section of elm guide
 https://guide.elm-lang.org/webapps/modules.html

---
 tutorials/elm-ui/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 1909de1..b9ab367 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -198,7 +198,7 @@ represents a span of inline text which should be rendered
 in a way that indicates that it has a non-textual annotation.
 -->
 
-### Code _Explanation_
+### Code _Explanation_
 
 
 Let's break down the `elm` code section by section:
@@ -224,8 +224,8 @@ import Element.Font as Font
 ```
 
 These are fairly standard scoped `elm` `import` statements
-they should be familiar to anyone who has read the
-[elm guide](https://guide.elm-lang.org/).
+they should be familiar to anyone who has read the **Modules** section of the
+[elm guide](https://guide.elm-lang.org/webapps/modules.html).
 
 In this simple example we are using
 4 out of 9 of the available `elm-ui` modules.

From b5ef5440fbc1b2271c39475928bfb8eeec485bac Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 20:19:23 +0000
Subject: [PATCH 29/50] add link to "Want More?" issue
 https://github.com/dwyl/learn-elm/issues/152

---
 tutorials/elm-ui/README.md | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index b9ab367..158340b 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -11,13 +11,14 @@ to a basic understanding in 10 minutes.
 Few people _love_ writing CSS.
 Most people just want to build their App
 _without_ the headache of knowing how to position things.
-**`elm-ui`** lets you build beautiful, fast and responsive UIs in `elm`,
+**`elm-ui`** lets you build beautiful,
+fast and responsive UIs in `elm`,
 without writing _any_ CSS!
-But `elm-ui` goes _way_ beyond offering a design system.
+But `elm-ui` goes _way_ beyond _just a design system.
 Since it's built using pure `elm` functions,
-it gives you compile-time guarantees that your layout/styles
+it gives you ***compile-time guarantees*** that your layout/styles
 are valid. So not only is it easier/faster to build the UI,
-it makes extending and _maintaining_ your App _effortless_!
+it makes **extending and _maintaining_** your App ***effortless***!
 
 > @dwyl we _love_ the idea of having semantic, functional and responsive UIs
 with no side-effects. <br />
@@ -440,14 +441,14 @@ import Element exposing (Element, alignRight, centerX, centerY, el, fill, paddin
 To:
 
 ```elm
-import Element as E exposing (Element, el, row)
+import Element as E exposing (Element, el, layout, row)
 ```
 This only makes the top level elements `el`, `layout` and `row` available
 for use in our view functions. The rest of the `elm-ui` functions
 need to be prefixed with `E` e.g: `E.functionName`.
 The advice from the creator of Elm
 and other experienced Elm devs is:
-avoid using unqualified import statements
+"_avoid using unqualified import statements_"
 e.g: `import Element exposing (..)`.
 It might be tempting in the short-run to just "import everything",
 but they rapidly become an unmaintainable headache.
@@ -493,8 +494,7 @@ Some people might feel that this tedious because it's more to type.
 However it's _immediately_ clear where a given function "comes from"
 and there is a much lower risk of naming conflicts.
 
-We will be adopting this `E.` prefix approach
-for the remainder of this tutorial
+We recommend adopting this `E.` prefix approach
 because it's the method recommended/used by Evan.
 
 > See "Using Modules" section at the end of:
@@ -517,7 +517,7 @@ simply by adding the following function call
 as an element in the attributes list of any `el` call.
 
 Take the example above and add `Element.explain Debug.todo`
-in the list of attributes for the `layout` function::
+in the list of attributes for the `layout` function:
 
 ```elm
 main =
@@ -571,6 +571,22 @@ rowOfStuff =
 
 This allows us to pinpoint the _single_ `el` in the `row` if we need to.
 
+<br />
+
+<hr />
+
+# Want _More_?
+
+If you enjoyed learning the basics of `elm-ui`
+and want to learn a _lot_ more,
+please drop a comment/like
+on the following issue:
+https://github.com/dwyl/learn-elm/issues/152
+
+
+<hr />
+
+
 
 <br /><br />
 

From fecaf1f8938949fde0db1c5cabab06d73fa1b879 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 20:22:26 +0000
Subject: [PATCH 30/50] move drawbacks? section to end of elm-ui/README.md #145

---
 tutorials/elm-ui/README.md | 68 ++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 158340b..26a7e5e 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -588,38 +588,6 @@ https://github.com/dwyl/learn-elm/issues/152
 
 
 
-<br /><br />
-
-### Drawbacks
-
-`Colors` have to be specified in terms of **rgb** values.
-i.e. you need to supply the individual values for `Red` `Blue` `Green` as `Int`.
-e.g:
-```elm
-Background.color (rgb255 75 192 169)
-```
-
-If we attempt to invoke `rgb255 75, 192, 169`
-we will see the following error:
-
-![elm-ui-rgb-error](https://user-images.githubusercontent.com/194400/70663222-cfae5100-1c5f-11ea-8fa6-6d4437e3af14.png)
-
-This is a _small_ price to pay given that it allows us to _easily_
-implement a color picker allowing people to easily select _any_ color
-when they are [_categorising_](https://github.com/dwyl/app/issues/235)
-
-![color-picker-dwyl-teal](https://user-images.githubusercontent.com/194400/70664979-72b49a00-1c63-11ea-80f4-fc533948f60f.png)
-
-In the short-term if we have a _hex_ value e.g: `#4bc0a9`
-that we need to convert to RGB,
-~~simply use a free online tool:
-https://www.rapidtables.com/convert/color/hex-to-rgb.html~~
-pasting the _hex_ into google returns the RGB conversion.
-e.g: https://www.google.com/search?q=%234bc0a9 <br />
-A color explorer site like Color Hexa has even more detail.
-e.g: https://color-hex.org/color/4bc0a9
-
-
 <br /><br />
 
 ## References and Recommended Reading
@@ -715,3 +683,39 @@ the problem is the (_lack of a_) _system_.
 If the _system_ you are using to create your layout/styles
 does not give you any consistency guarantees at compilation time,
 then you don't _have_ a good enough system and chaos is _guaranteed_.
+
+
+<br /><br />
+
+### Drawbacks?
+
+So far in using `elm-ui` we have only spotted one potential drawback.
+All `Colors` (_for text, borders or backgrounds_)
+have to be specified in terms of **rgb** values.
+i.e. you need to supply the individual values for `Red` `Blue` `Green` as `Int`.
+e.g:
+```elm
+Background.color (rgb255 75 192 169)
+```
+
+If we attempt to invoke `rgb255 75, 192, 169`
+we will see the following error:
+
+![elm-ui-rgb-error](https://user-images.githubusercontent.com/194400/70663222-cfae5100-1c5f-11ea-8fa6-6d4437e3af14.png)
+
+We feel this is a _comparatively small_ price to pay
+given that it means colors can be checked at compile time.
+It allows us to _easily_
+implement a color picker allowing people to easily select _any_ color
+when they are [_categorising_](https://github.com/dwyl/app/issues/235)
+
+![color-picker-dwyl-teal](https://user-images.githubusercontent.com/194400/70664979-72b49a00-1c63-11ea-80f4-fc533948f60f.png)
+
+In the short-term if we have a _hex_ value e.g: `#4bc0a9`
+that we need to convert to RGB,
+~~simply use a free online tool:
+https://www.rapidtables.com/convert/color/hex-to-rgb.html~~
+pasting the _hex_ into google returns the RGB conversion.
+e.g: https://www.google.com/search?q=%234bc0a9 <br />
+A color explorer site like Color Hexa has even more detail.
+e.g: https://color-hex.org/color/4bc0a9

From a12d873a72bf482b1cb05496f8b730e54d6ccdc0 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 20:27:42 +0000
Subject: [PATCH 31/50] add link to drawing in CSS video:
 https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2

---
 tutorials/elm-ui/README.md | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 26a7e5e..26794ee 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -572,23 +572,19 @@ rowOfStuff =
 This allows us to pinpoint the _single_ `el` in the `row` if we need to.
 
 <br />
-
 <hr />
 
 # Want _More_?
 
 If you enjoyed learning the basics of `elm-ui`
-and want to learn a _lot_ more,
+and want to learn a _lot_ more by building a complete app, <br />
 please drop a comment/like
 on the following issue:
 https://github.com/dwyl/learn-elm/issues/152
 
 
 <hr />
-
-
-
-<br /><br />
+<br />
 
 ## References and Recommended Reading
 
@@ -630,7 +626,9 @@ returns this mess as the top result:
 In reality, CSS _can_ be learned/mastered reasonably quickly
 and _amazing_ things can be crafted. <br />
 e.g:
-http://www.csszengarden.com and https://www.cssdesignawards.com <br />
+http://www.csszengarden.com and https://www.cssdesignawards.com <br /> or
+CSS Super Powers: https://youtu.be/mNKz3devFAw and _drawing_ in CSS:
+https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2
 
 Sadly, it doesn't matter how well
 _you_ - the conscientious developer/designer - learn CSS.
@@ -684,8 +682,7 @@ If the _system_ you are using to create your layout/styles
 does not give you any consistency guarantees at compilation time,
 then you don't _have_ a good enough system and chaos is _guaranteed_.
 
-
-<br /><br />
+<br />
 
 ### Drawbacks?
 

From ebcb6a908e0d2c6b5f5c6d8229ecf5fdf120a058 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 20:32:54 +0000
Subject: [PATCH 32/50] reformat links to "CSS Super Powers"

---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 26794ee..1d6a08c 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -626,7 +626,7 @@ returns this mess as the top result:
 In reality, CSS _can_ be learned/mastered reasonably quickly
 and _amazing_ things can be crafted. <br />
 e.g:
-http://www.csszengarden.com and https://www.cssdesignawards.com <br /> or
+http://www.csszengarden.com and https://www.cssdesignawards.com or
 CSS Super Powers: https://youtu.be/mNKz3devFAw and _drawing_ in CSS:
 https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2
 

From 1c44030f99256003fdf74ec755d1e0cc1fe970d1 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Mon, 16 Dec 2019 20:41:23 +0000
Subject: [PATCH 33/50] reformat after proof-reading my own writing ...

---
 tutorials/elm-ui/README.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 1d6a08c..f095726 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -149,7 +149,7 @@ myElement =
         (text "stylish!")
 ```
 
-> This is the canonical example in the docs:
+> This is the example in the official `elm-ui` docs:
 https://github.com/mdgriffith/elm-ui <br />
 If you are unable to run the code on your `localhost`
 try the Ellie version: https://ellie-app.com/7vDrXpCckNWa1
@@ -168,19 +168,19 @@ You should expect to see:
 ![elm-ui-basic-layout](https://user-images.githubusercontent.com/194400/70663573-90cccb00-1c60-11ea-8a1c-71d15d2b83ad.png)
 
 If you open the elements tab of Dev Tools in your browser
-you will see the resulting HTML code:
+you will see the HTML code (_generated by the `elm` compiler_):
 
 ![generated-html](https://user-images.githubusercontent.com/194400/70762204-b08aee80-1d47-11ea-9d5f-bd8e121a42d8.png)
 
-As far as generated HTML goes this is not _too_ bad.
-It's common for `elm` apps to get a 100 score for accessibility,
-speed, SEO and progressiveness on Google's
-[Lighthouse Score](https://developers.google.com/web/tools/lighthouse).
 The in-line CSS classes are generated at compile time
 and included in `<style>` blocks.
 Semantic class names are inserted into the `<div>` elements.
 For a list of these class names, see:
-[`Style.elm#L131`](https://github.com/mdgriffith/elm-ui/blob/53a2732d9533c242c7690e16506b673af982032a/src/Internal/Style.elm#L131).
+[`Style.elm#L131`](https://github.com/mdgriffith/elm-ui/blob/53a2732d9533c242c7690e16506b673af982032a/src/Internal/Style.elm#L131). <br />
+As far as generated HTML goes this is not _too_ bad.
+It's common for `elm` apps to get a 100 score for accessibility,
+speed, SEO and progressiveness on Google's
+[Lighthouse Score](https://developers.google.com/web/tools/lighthouse).
 Under the hood `elm-ui` is just using
 [`elm/html`](https://github.com/mdgriffith/elm-ui/blob/53a2732d9533c242c7690e16506b673af982032a/src/Element.elm#L215)
 (_the core html package_) so the resulting rendered html
@@ -645,16 +645,16 @@ duplicate and _conflicting_ styles will be added.
 </div>
 
 Take any popular website and run it through CSS Stats https://cssstats.com
-to see how many styles are being used.
+to see how many styles are being used. <br />
 A good example is
 [Twitter.com](https://cssstats.com/stats?url=https%3A%2F%2Ftwitter.com).
-Their CSS is **632KB** (_or **113KB** when compressed+gzipped_).
+Their CSS is **632KB** (_or **113KB** when compressed+gzipped_). <br />
 https://cssstats.com/stats?url=https%3A%2F%2Ftwitter.com
 
 ![twitter-css-stats](https://user-images.githubusercontent.com/194400/70567485-f56b2580-1b8d-11ea-94c4-4e2ca8b5cd10.png)
 
 That might not sound like a lot,
-but for context **632KB** is enough to write a 100k+ word novel.
+but for context **632KB** is enough to write a 100k+ word novel! <br />
 The point is: the developers/designers at Twitter - a tech company
 with **billions** in revenue and some of the most talented people -
 have _lost control_ over their CSS.

From 3bae165ddc16fff09aaf05974176ac95c129417f Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.io>
Date: Tue, 17 Dec 2019 08:19:54 +0000
Subject: [PATCH 34/50] remove Element.explain Debug.todo from example #145

---
 tutorials/elm-ui/src/Main.elm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index 9376828..bc7320b 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -15,7 +15,7 @@ rowOfStuff : Element msg
 rowOfStuff =
     row [ width fill, centerY, spacing 30 ]
         [ myElement
-        , el [ centerX, Element.explain Debug.todo ] myElement
+        , el [ centerX ] myElement
         , el [ alignRight ] myElement
         ]
 

From 0eb529c5c7a64e0cbfd210a4c063df5d47a42e60 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Tue, 17 Dec 2019 08:58:50 +0000
Subject: [PATCH 35/50] Fix italic style issue _just > _just_

Co-Authored-By: Simon <simon.labondance@gmail.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index f095726..e9f8922 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -14,7 +14,7 @@ _without_ the headache of knowing how to position things.
 **`elm-ui`** lets you build beautiful,
 fast and responsive UIs in `elm`,
 without writing _any_ CSS!
-But `elm-ui` goes _way_ beyond _just a design system.
+But `elm-ui` goes _way_ beyond _just_ a design system.
 Since it's built using pure `elm` functions,
 it gives you ***compile-time guarantees*** that your layout/styles
 are valid. So not only is it easier/faster to build the UI,

From 8883b62c42c05720517f87c6048ea61709e0b688 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 09:33:32 +0000
Subject: [PATCH 36/50] =?UTF-8?q?Fix=20typo=20"Elemenent"=20>=20"Element"?=
 =?UTF-8?q?=20=F0=9F=98=9C=20thanks=20@SimonLab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Simon <simon.labondance@gmail.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index e9f8922..1a91671 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -231,7 +231,7 @@ they should be familiar to anyone who has read the **Modules** section of the
 In this simple example we are using
 4 out of 9 of the available `elm-ui` modules.
 The one with the most features/functions is
-[`Elemenent`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element)
+[`Element`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element)
 which contains everything you need for creating standard HTML elements
 including their layout and positioning.
 [`Background`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Background),

From 2a7a5393e247309a9a1d8a159702f924e608e219 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 09:34:01 +0000
Subject: [PATCH 37/50] fix grammar "collection functions" > "collection of
 functions"

Co-Authored-By: Simon <simon.labondance@gmail.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 1a91671..de68377 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -239,7 +239,7 @@ including their layout and positioning.
 and
 [`Font`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Font)
 are _exactly_ what you would expect them to be,
-a collection functions related to styling those properties.
+a collection of functions related to styling those properties.
 We will cover each of these in more detail later on as needed,
 however I encourage you to click the links
 and scroll through available functions

From 4a2db2b897a5774caf6a0013c37236bb363bfb9b Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:00:39 +0000
Subject: [PATCH 38/50] remove hyphen from spelling of "side effects" even
 though the spelling is valid.
 https://english.stackexchange.com/questions/364613/side-effects

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index de68377..2e8900d 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -21,7 +21,7 @@ are valid. So not only is it easier/faster to build the UI,
 it makes **extending and _maintaining_** your App ***effortless***!
 
 > @dwyl we _love_ the idea of having semantic, functional and responsive UIs
-with no side-effects. <br />
+with no side effects. <br />
 **Functional CSS** libraries allow anyone on a team
 to change _one_ style on a single element
 without affecting any others. <br />

From e26de8912ad1df03685fec531b4a907fdf91847a Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:02:43 +0000
Subject: [PATCH 39/50] fix typo "over-time" > "over time"

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 2e8900d..60a3db5 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -634,7 +634,7 @@ Sadly, it doesn't matter how well
 _you_ - the conscientious developer/designer - learn CSS.
 Unless you can ensure that _everyone_ in your team/company
 has the same level of skill and care in their work,
-it's _inevitable_ that over-time
+it's _inevitable_ that over time
 duplicate and _conflicting_ styles will be added.
 
 <div align="center">

From 6465a1d0f08c6af3d195816ba0b36617f6ea5093 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:08:18 +0000
Subject: [PATCH 40/50] add clarifying words to "categorising" sentence.

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 60a3db5..befe5da 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -704,7 +704,7 @@ We feel this is a _comparatively small_ price to pay
 given that it means colors can be checked at compile time.
 It allows us to _easily_
 implement a color picker allowing people to easily select _any_ color
-when they are [_categorising_](https://github.com/dwyl/app/issues/235)
+when they are [_categorising_](https://github.com/dwyl/app/issues/235) their thoughts.
 
 ![color-picker-dwyl-teal](https://user-images.githubusercontent.com/194400/70664979-72b49a00-1c63-11ea-80f4-fc533948f60f.png)
 

From 90f0c2e029a4da6bb3fef3d3ee03040aa3922312 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:10:24 +0000
Subject: [PATCH 41/50] fix grammar in sentence "this tedious" > "this is
 tedious"

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index befe5da..9d748e6 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -490,7 +490,7 @@ myElement =
         (E.text "stylish!")
 ```
 
-Some people might feel that this tedious because it's more to type.
+Some people might feel that this is tedious because it's more to type.
 However it's _immediately_ clear where a given function "comes from"
 and there is a much lower risk of naming conflicts.
 

From ad9b84a6df83a0cc4492c97d6d578595225fea7b Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:21:50 +0000
Subject: [PATCH 42/50] re-word sentence for clarity

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 9d748e6..edd7f89 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -64,7 +64,7 @@ what `elm` is to `JavaScript`,
 a way of making designing web applications fun again!
 `elm-ui` offers compile-time guarantees
 that your layout and styles work as expected.
-You will see _helpful_ compiler errors/warnings
+`elm-ui` will provide you with _helpful_ compiler errors/warnings
 if you attempt to make a _breaking_ change to UI!
 
 

From 399632787c1c18bbbe27663477a5d67dc34476d9 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:25:40 +0000
Subject: [PATCH 43/50] elm init will *prompt* the user for permission to
 create an elm.json file.

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index edd7f89..ae0efb4 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -97,7 +97,7 @@ In a new directory, initialise your `elm` workflow with the following command:
 elm init
 ```
 
-That will create an `elm.json` file similar to this one:
+That will prompt you to create an `elm.json` file similar to this one:
 [`elm.json`](https://github.com/dwyl/learn-elm/blob/master/tutorials/elm-ui/elm.json)
 
 Next we will add the dependency for `mdgriffith/elm-ui`:

From aa1bc3e57dd4905f128826d114ddd262f25de898 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:28:20 +0000
Subject: [PATCH 44/50] remove line of copy

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index ae0efb4..d40c59f 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -151,7 +151,6 @@ myElement =
 
 > This is the example in the official `elm-ui` docs:
 https://github.com/mdgriffith/elm-ui <br />
-If you are unable to run the code on your `localhost`
 try the Ellie version: https://ellie-app.com/7vDrXpCckNWa1
 
 In your terminal run:

From fe1b35f959f39a3b78a67c5d02f8a4a788be9d94 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:31:25 +0000
Subject: [PATCH 45/50] fix typo "changes" > "chances" :+!:

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index d40c59f..9c309cf 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -290,7 +290,7 @@ And the following compiler warning if you attempt to compile it:
 
 This is a _good_ thing, because it means all `elm` programs are consistent.
 You won't see the `main` function of a program being named `app` or `myfunc`
-which means there are fewer changes of confusion for beginners.
+which means there are fewer chances of confusion for beginners.
 
 
 

From 55defd2900569fc234b6924021356433d2f5e00a Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:32:17 +0000
Subject: [PATCH 46/50] fix markdown error (closing italic)

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 9c309cf..2339ac0 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -429,7 +429,7 @@ The way to get around this is to follow the
 [`elm` guide modules](https://guide.elm-lang.org/webapps/modules.html)
 advice and avoid using `exposing` unless it's absolutely necessary.
 So we can convert the super-long import  
-(_which will only get longer as your view expands to include more style_):
+(_which will only get longer as your view expands to include more styles_),
 
 From:
 

From 8634dc113fe91268779265d34e5671619ff9e30b Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:33:52 +0000
Subject: [PATCH 47/50] fix typo myElelement > myElement

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 2339ac0..f1a4c10 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -355,7 +355,7 @@ is a `list` child of nodes:
 ```
 The first `myElement` has no style/position applied to it
 so it will just appear on the left of the row.
-the next `myElelement` is wrapped in a container `el` (`<div>`)
+the next `myElement` is wrapped in a container `el` (`<div>`)
 and given an attribute of `centerX` to ensure that it is
 centered _horizontally_ in the middle of the page.
 The third `myElement` is also wrapped in an `el`

From e2836ec0eb26e678c326d43dc97a50b02271b902 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:36:28 +0000
Subject: [PATCH 48/50] add full stop to end of sentence.

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index f1a4c10..78d844d 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -270,7 +270,7 @@ It has the class of `ui` which has the following definition:
 In this case it takes up the full width and height of the view port.
 But it could also be used for just a portion of the screen
 if you are just getting started using `elm` at
-[work](https://elm-lang.org/news/how-to-use-elm-at-work)
+[work](https://elm-lang.org/news/how-to-use-elm-at-work).
 
 
 #### Side Note on Naming Conventions

From 7fdcef78b0181e32f05587bec4a5479cf63354b1 Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:37:57 +0000
Subject: [PATCH 49/50] fix grammar

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 78d844d..697ae37 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -390,7 +390,7 @@ myElement =
         (text "stylish!")
 ```
 
-In this case the **`el`**
+In this case the **`el`** is
 a list with the following attributes:
 
 ```elm

From 5f2331d63dc096af85dcee88f692081b4befb21e Mon Sep 17 00:00:00 2001
From: Nelson <nelson+github@dwyl.io>
Date: Wed, 18 Dec 2019 16:38:43 +0000
Subject: [PATCH 50/50] add "and" to sentence to fix grammar

Co-Authored-By: Ines Teles Correia <iteles@users.noreply.github.com>
---
 tutorials/elm-ui/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index 697ae37..12a9cb0 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -223,7 +223,7 @@ import Element.Border as Border
 import Element.Font as Font
 ```
 
-These are fairly standard scoped `elm` `import` statements
+These are fairly standard scoped `elm` `import` statements and
 they should be familiar to anyone who has read the **Modules** section of the
 [elm guide](https://guide.elm-lang.org/webapps/modules.html).