add more examples of compilation errors typo: paddign > padding #145

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,14 +31,25 @@ 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!
 `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:
+
+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`

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!")