Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>

static/lessons/01_basics/lesson.html

@@ -0,0 +1,618 @@
+<!-- A step with just a popup -->
+<div data-template="popup">
+    <video src="lesson-01_01-intro.mp4"></video>
+    <h2>Fancy seeing you here!</h2>
+
+    <p>In this first lesson series you will learn the basic concepts of Noodl.</p>
+    <p>Every lesson will build on the previous one, and in the end you will have a fully functioning task manager app.</p>
+    <p>Once you learn these fundamentals and how to combine them you will be able to build powerful web applications.</p>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>The node graph</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_02-nodegraph.mp4"></video>
+        <h2>The node canvas</h2>
+        <p>The building blocks of Noodl are called <strong>nodes</strong>. They are all arranged as graphs in the <strong>Node Canvas</strong>.</p>
+        <p>A node represents an element of your app. It can be a visual element, like a <strong>button</strong>, or a block of logic, like performing a <strong>navigation</strong> between the pages of your app.</p>
+        <p>We will take a closer look at the nodes in a minute, but first let's look at the other essential parts of the Noodl editor.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Zooming and panning</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_03-zoompan.mp4"></video>
+        <h2>Zooming and panning</h2>
+        <p>You can navigate around the Node Canvas by panning around with <strong>space + left mouse drag</strong>, or <strong>scrolling</strong> on a trackpad.</p>
+        <p>The Node Canvas can also be zoomed with </strong>Ctrl/Cmd + scroll</strong>, or <strong>pinch</strong> on a trackpad. </p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Component Panel</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_04-componentpanel.mp4"></video>
+        <h2>Component Panel</h2>
+        <p>Every node graph lives inside a component. When you select a component, its node graph is shown.</p>
+        <p>You can see all of your components in the <strong>Component Panel</strong>.</p>
+        <p>Try to select the page component called <i>Start Page</i> in the <strong>Component Panel</strong>.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Lesson tasks</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <image src="../01_task.png"></image>
+        <h2>Time to get your hands dirty!</h2>
+        <p>During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the <i>Task</i> label.</p>
+        <p>If you get stuck you can get a hint by clicking the card in the timeline.</p>
+        <p>Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "activecomponentnameeq":"/Start Page"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 310px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Select the page component called <i>Start Page</i> in the <strong>Component Panel</strong> list</h3>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_06-select-start-page.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Preview Canvas</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_07-previewcanvas.mp4"></video>
+        <h2>Preview Canvas</h2>
+        <p>The <strong>Preview Canvas</strong> is showing your app in real time. All changes done to the node graph will be shown instantly. This canvas has two modes:</p>
+        <p>The default is the <strong>preview mode</strong>, letting you interact with the app.</p>
+        <p>Switching to <strong>design mode</strong> lets you inspect the elements of the UI and quickly jump to the underlying node.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Visual nodes</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_08-visual.mp4"></video>
+        <h2>Visual nodes</h2>
+        <p>Every app needs a visual user interface.</p>
+        <p>For that we use visual nodes, like the <strong>Group</strong> or <strong>Text</strong> nodes. Visual nodes are blue and are arranged in a hierarchy called the <strong>DOM tree</strong>. The top node acts as the <strong>root</strong>, and all visual nodes nested within it will be a part of the interface of your app.</p>
+        <p>You can move nodes with a <strong>left mouse drag</strong>. Visual nodes can be dragged in and out of the visual hierarchy. Visual nodes outside the hierarchy won't be a part of your interface.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Start Page:%Page:%Group:1:1",
+            "exists":false
+        }
+    ]'
+>
+    <div data-template="item" style="width: 300px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Drag the <strong>Text</strong> node called <i>Description</i> away from the DOM tree</h3>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_09-drag-description-away.mp4"></video>
+        <p>Dragging the last text node away from the hierarchy using the <strong>left mouse button</strong>. This will make the text disappear from the preview.</p>
+    </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Start Page:%Page:%Group:1:1",
+            "exists":true
+        }
+    ]'
+>
+    <div data-template="item">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Drag the <strong>Text</strong> node back to make it visible again</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_10-drag-description-back.mp4"></video>
+        <p>You can add a node as a child to another node by dragging it onto that node. This will place it as the last child. Drag the text node onto the root group using the <strong>left mouse button</strong>. The text will reappear in the preview.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>The Node Picker</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_11-nodepicker.mp4"></video>
+        <h2>The Node Picker</h2>
+        <p>The <strong>Node Picker</strong> is where you can browse all the nodes in Noodl. They are arranged in categories. Hovering a node will show you a quick summary of how to use it.</p>
+        <p>Clicking a node in the Node Picker will add it to the graph that is currently open in the Node Canvas.</p>
+        <p>Open the Node Picker by <strong>clicking the "plus" icon</strong> in the top bar, or <strong>right click</strong> an empty space in the Node Canvas.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+            "exists":true
+        }
+    ]'
+>
+    <div data-template="item" style="width: 360px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Open the Node Picker, find the <strong>Button</strong> node and insert it below the <i>Description</i> <strong>Text</strong> node</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_12-addbutton.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>The Property Panel</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_13-propertpanel.mp4"></video>
+        <h2>The Property Panel</h2>
+        <p>All nodes have properties that you can edit to make them behave the way you want. For instance, visual nodes have parameters that affect their appearance like size, color and position.</p>
+        <p><strong>Clicking</strong> a node will show you its properties in the sidebar.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Visual alignment</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_13-propertpanel.mp4"></video>
+        <h2>Visual Alignment</h2>
+        <p>With the <strong>visual alignment</strong> property we can control how a visual element should be aligned inside of its parent.</p>
+        <p>This is easier shown than explained, so see the video above how the button can be aligned.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+        "paramseq":{
+            "alignY":"bottom"
+        }
+    }
+    ]'
+>
+    <div data-template="item">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Align the <strong>Button</strong> to the <strong><i>bottom</i></strong> of the page</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_18-alignbutton.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Dimension modes</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_14-dimensionmodes.mp4"></video>
+        <h2>Dimension modes</h2>
+        <p>With <strong>dimension modes</strong>, we can set rules for how visual elements should take up space.</p>
+        <p>If we want our button to have a fixed height (in pixels), but take up 100% of the available width, we can set the dimension mode of the Button node to <strong><i>Explicit width & height</i></strong> in the Property Panel.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+        "paramseq":{
+            "sizeMode":"explicit"
+        }
+    }
+    ]'
+>
+    <div data-template="item" style="width: 260px;">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Set the Button's <strong>dimension mode</strong> to <strong><i>Explicit width & height</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_15-set-dimension-mode.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+        "paramseq":{
+            "sizeMode":"explicit",
+            "height": {"value": 56, "unit": "px"}
+        }
+    }
+    ]'
+>
+    <div data-template="item" style="width: 260px;">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Set the Button's <strong>height</strong> to <strong><i>56px</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_16-set-button-height.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+            "paramseq": {
+                "label": "Get Started"
+            }
+        }
+    ]'
+>
+    <div data-template="item">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Change the Button's <strong>label</strong> to <strong><i>Get Started</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_19-buttonlabel.mp4"></video>
+    </div>
+</div>
+
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Naming nodes</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_20-getstartedbutton.mp4"></video>
+        <h2>Naming nodes</h2>
+        <p>As you build your app it's a good practice to give the nodes descriptive names. This makes it easier for you (and any potential collaborators) to understand what the different nodes are doing.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+        "haslabel": "Get started button"
+    }
+    ]'
+>
+    <div data-template="item">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Rename the Button node to <strong><i>Get started button</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_20-getstartedbutton.mp4"></video>
+        <p>Select the Button node and change its name by pressing the <strong>enter</strong> key. You can also <strong>double click</strong> the node title in the <strong>Property Panel</strong>, or <strong>click</strong> the edit icon as shown in the video.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.textinput",
+        "exists":true
+    }
+    ]'
+>
+    <div data-template="item" style="width: 340px;">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Open the Node Picker and place a <strong>Text Input</strong> node above the <strong>Button</strong> node</i></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_21-inserttextinput.mp4"></video>
+        <p><strong>Right click</strong> an empty space in the Node Canvas. Find the <strong>Text Input</strong> node, click to create it and then drag it <strong>above the Button</strong> node in the DOM tree.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.textinput",
+        "paramseq": {
+            "marginTop": { "value": 16, "unit": "px" }
+        }
+    }
+    ]'
+>
+    <div data-template="item" style="width: 240px;">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Change the Text Input's <strong>Top Margin</strong> to <strong><i>16px</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_22-inputmargin.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+    {
+        "path":"/Start Page:%Page:%Group:1:%net.noodl.controls.textinput",
+        "paramseq": {
+            "label": "Username"
+        }
+    }
+    ]'
+>
+    <div data-template="item" style="width: 240px;">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Change the Text Input's <strong>Label</strong> to <strong><i>Username</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_23-inputlabel.mp4"></video>
+        <p><strong>Click</strong> the Text Input node that you created to open its Property Panel. Find the <strong>Label</strong> property and change it to read <strong><i>Username</i></strong>. Remember that property values are case sensitive.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Creating connections</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_24-connections.mp4"></video>
+        <h2>Creating connections</h2>
+        <p>A UI is nice, but it also needs to be interactive. In Noodl you do this by creating <strong>connections</strong> between nodes.</p>
+        <p>When you hover over a node in the Node Canvas a small dot appears in its top right corner. <strong>Click and drag</strong> from the dot to start creating a connection.</p>
+        <p><strong>Drag</strong> the connection on top of another node and <strong>release</strong> to bring up the Connection Panels. Pick an <strong>output</strong> from the source node, then select an <strong>input</strong> on the target node. This will create a connection between them.</p>
+        <p>Let's see this in action by finishing up the navigation flow. In this lesson we've set all the nodes up for you, so you can focus on the connections. You will learn more about how the navigation nodes work in a later lesson.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "from": "/Start Page:%Page:%Group:1:%net.noodl.controls.button",
+            "to": "/Start Page:%RouterNavigate",
+            "hasconnection": "onClick, navigate"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 400px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Connect the <strong>Button</strong> node to the <strong>Navigate</strong> node and send the <strong><i>click</i></strong> output to the <strong><i>navigate</i></strong> input</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_24-connections.mp4"></video>
+        <p>Hover the Button node, <strong>Click and hold</strong> the dot, <strong>Drag</strong> the connection to the Navigate node and release. Choose the <strong><i>Click</i></strong> property in the first panel and then the <strong><i>Navigate</i></strong> property in the second panel.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "from": "/Start Page:%Page:%Group:1:%net.noodl.controls.textinput",
+            "to": "/Start Page:%RouterNavigate",
+            "hasconnection": "onTextChanged, pm-User Name"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 400px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Connect the <strong>Text Input</strong> node to the <strong>Navigate</strong> node and send the <strong><i>text</i></strong> output to the <strong><i>user name</i></strong> input</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="IT_16_connect_button-to-counter.mp4"></video>
+        <p>Hover the Text Input node,  <strong>Click and hold</strong> the dot, <strong>Drag</strong> the connection to the Navigate node and <strong>release</strong>. Choose the <strong><i>Text</i></strong> property in the first panel and then the <strong><i>User Name</i></strong> property in the second panel.</p>
+    </div>
+</div>
+<!-- # -->
+
+<video src="lesson-01_25-connection2.mp4"></video>
+
+
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Connection types</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_26-inspecting.mp4"></video>
+        <h2>Connection types</h2>
+        <p>There are two types of connections in Noodl. <strong>Data</strong> connections and <strong>signal</strong> connections.</p>
+        <p>Data connections are used to pass data between nodes, like strings, numbers or objects. These connections are colored orange in the node graph.</p>
+        <p>Signal connections are used to trigger events. They can be triggered by the user (like clicking a button), or by the app itself (when a visual component mounts, when a data request is successful, etc). These connections are colored green in the node graph.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Inspecting connections</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_26-inspecting.mp4"></video>
+        <h2>Inspecting connections</h2>
+        <p>A powerful feature of Noodl is how data and signals are visualized.</p>
+        <p><strong>Hover</strong> over a connection to see the current value. <strong>Clicking</strong> the tooltip pins it in place, so it stays visible even when you stop hovering. This makes it easy to debug your app.</p>
+        <p>When data or a signal is passed through a connection it lights up, letting you see the data flow in real time.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "viewerpatheq":"/task-page"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 420px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Type a name in the <strong>Text Input</strong> and click the <strong>Get Started</strong> button to navigate and see the connections come to life</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-01_26-inspecting.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>Outro</header>
+        <h2>Congratulations!</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <!--<img src="tutorial_card.png" style="cursor: pointer;" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')"> -->
+        <h2>Congratulations!</h2>
+        <p>You've completed this lesson, we hope you liked it!</p>
+        <p>In the next lesson we will dive deeper into building layouts in Noodl. We hope to see you there.</p>
+        <p>Happy Noodling!</p>
+        <!--<button style="width: 150px" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')">WATCH TUTORIAL</button>-->
+        <button style="width: 150px" data-click="exitEditor">EXIT LESSON</button>
+    </div>
+</div>
+<!-- # -->
+
+

static/lessons/02_layout/lesson.html

@@ -0,0 +1,855 @@
+<!-- A step with just a popup -->
+<div data-template="popup">
+  <image src="lesson-02_00_introimg.png"></image>
+  <h2>Welcome back!</h2>
+  <p>In this second lesson we will look closer at building layouts using the visual nodes.
+  </p>
+  <p>You already have a simple page but not much content. At the end of this lesson you will have built a card to display items in your task manager app.
+  </p>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Lesson tasks</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <image src="../01_task.png"></image>
+        <h2>Time to get your hands dirty!</h2>
+        <p>During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the <i>Task</i> label.</p>
+        <p>If you get stuck you can get a hint by clicking the card in the timeline.</p>
+        <p>Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item" style="width: 260px">
+    <header>&nbsp;</header>
+    <h2>Select page to preview</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_01_pageselector.mp4"></video>
+    <h2>Select page to preview</h2>
+    <p>At the top of the editor you have the <strong>Path Dropdown</strong>. It's similar to the URL-bar in a browser and is used to jump directly to a specific page of your app while you develop.</p>
+    <p>In this lesson we will be working on the page called <i>Task Page</i>. Let's jump to it.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "viewerpatheq":"/task-page"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Select the <i><strong>/task-page</strong></i> path in the <strong>Path Dropdown</strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_01_pageselector.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item" style="width: 260px">
+    <header>&nbsp;</header>
+    <h2>Select page to preview</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_01_pageselector.mp4"></video>
+    <h2>Select page to preview</h2>
+    <p>At the top of the editor you have the <strong>Path Dropdown</strong>. It's similar to the URL-bar in a browser and is used to jump directly to a specific page of your app while you develop.</p>
+    <p>In this lesson we will be working on the page called <i>Task Page</i>. Let's jump to it.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "activecomponentnameeq":"/Task Page"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Select the <strong><i>Task Page</i></strong> component in the <strong>Component Panel</strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_02_selecttaskpage.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>The Group node</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_03_group.mp4"></video>
+    <h2>The Group node</h2>
+    <p>The <strong>Group</strong> node is the most basic visual element and is used to structure layouts, group content, and create visual shapes.</p>
+    <p>If you are familiar with HTML code, a Group is similar to a &lt;div&gt;-tag in HTML.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Nested visual nodes</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_04_nestedvisual.mp4"></video>
+    <h2>Nested visual nodes</h2>
+    <p>You can nest visual elements as children of a Group node to start creating more advanced layouts.</p>
+    <p>This is a pattern you will see over and over again, so let's use it to build the card.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:%Group",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Place a <strong>Group</strong> node as a child to the <strong>Content Container</strong> Group</h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_05_placegroup.mp4"></video>
+    <p>Open the Node Picker by <strong>clicking</strong> the <i>plus</i> icon in the Topbar, or <strong>right click</strong> on an empty space in the Node Canvas.</p>
+    <p>You can find the Group node in the UI Elements category.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+    {
+        "path":"/Task Page:%Page:%Group:#Content Container:%Group",
+        "haslabel": "Card Item"
+    }
+    ]'
+>
+  <div data-template="item" style="width: 260px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Rename the Group to <strong><i>Card Item</i></strong></h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_06_carditem.mp4"></video>
+    <p>Select the Group node and change its name by pressing the <strong>enter</strong> key. You can also <strong>double click</strong> the node title in the Property Panel, or <strong>click</strong> the edit icon as shown in the video.</p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:%Group",
+            "paramseq":{
+                "backgroundColor": "Primary Subtle"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 320px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Set the <strong>background color</strong> of the new Group to the color style <strong><i>Primary Subtle</i></strong></h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_07_change-bgcolor.mp4"></video>
+    <p>You open the Color Style list by clicking the text in the <strong>background color</strong> input.</p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item" style="width: 320px">
+    <header>&nbsp;</header>
+    <h2>
+      Dimension mode:
+      <br />
+      Explicit width & content height
+    </h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_08_explicit-width-height.mp4"></video>
+    <h2>Dimension Mode: Explicit width & content height</h2>
+    <p>
+      By default Group nodes are set to a <strong>dimension mode</strong> with an explicit width
+      and height of 100%. This means that they will take up all available space
+      in both directions.
+    </p>
+    <p>
+      Often we want a Group's height to resize to the height of the children
+      inside of it. We can achieve that with the dimension mode
+      <strong><i>Explicit width & content height</i></strong>.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:%Group",
+            "paramseq": {
+                "sizeMode":"contentHeight",
+                "paddingTop": { "value": 24, "unit": "px" },
+                "paddingBottom": { "value": 24, "unit": "px" },
+                "paddingLeft": { "value": 24, "unit": "px" },
+                "paddingRight": { "value": 24, "unit": "px" }
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 450px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      On the <strong>Card Item</strong> Group, set the <strong>dimension mode</strong> to
+      <strong><i>Explicit width & content height</i></strong>, and set all <strong>paddings</strong>
+      to <strong><i>24px</i></strong>
+    </h3>
+  </div>
+  <div data-template="popup">
+    <video src="lesson-02_09_paddings.mp4"></video>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:%Group",
+            "paramseq": {
+                "borderRadius": {"value": 4, "unit": "px"}
+            }
+        }
+    ]'
+>
+  <div data-template="item">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>On the <strong>Card Item</strong> Group, set the <strong>corner radius</strong> to <strong><i>4px</i></strong></h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_10_cornerradius.mp4"></video>
+    <p>Select the Group to bring up the Property Panel. Find the <strong>Corner Radius</strong>
+      property and set it to <strong><i>4px</i></strong>.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Images and media</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_11_images.mp4"></video>
+    <h2>Images and media</h2>
+    <p>
+      Noodl comes with different nodes for displaying images and video. They
+      have a <strong>source</strong> property where you set the path to the file you want to show.
+    </p>
+    <p>
+      Clicking the <strong>Source</strong> input will show all available images and videos that are uploaded to the
+      project. You can also input an external URL to a media file.
+    </p>
+    <p>
+      You can add images and videos to the project by simply <strong>dragging and dropping</strong> them into
+      the editor. In this lesson we already added some images for you to use.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:%Image",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 320px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Open the Node Picker and place an <strong>Image</strong> node as a child to the <strong>Card Item</strong> Group.
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_12_addimages.mp4"></video>
+    <p>
+      Open the Node Picker by <strong>clicking </strong> the <i>plus</i> icon in the Topbar, or <strong>right click</strong> on an empty space in the Node Canvas.
+    </p>
+    <p>
+      You can search for the <strong>Image</strong> node in the Node Picker's search field, or find it in the UI Elements category.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:%Image",
+            "paramseq": {
+                "src": "work.png"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Set the <strong>image source</strong> to <strong><i>work.png</i></strong></h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_13_setimagesrc.mp4"></video>
+    <p>
+      Click the <strong>source</strong> property to see a list of available images in the project.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:%Image",
+            "paramseq": {
+                "sizeMode": "explicit"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Set the <strong>Image</strong> node's <strong>dimension</strong> mode to
+      <strong><i>Explicit width and height</i></strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_14_setimagesize.mp4"></video>
+    <p>
+      Click the <strong>Image</strong> node to open its Property Panel and scroll down to the <strong>dimension mode</strong>
+      property. <strong>Hover</strong> over the different options to see what they are called.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:%Image",
+            "paramseq": {
+                "width": {"value": 80, "unit": "px"},
+                "height": {"value": 80, "unit": "px"}
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Set the <strong>image size</strong> to <strong><i>80px</i></strong> width and <strong><i>80px</i></strong> height</h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_14_setimagesize.mp4"></video>
+    <p>
+      Click the <strong>Image</strong> node to open its Property Panel and scroll to the <strong>size</strong> property. Set the
+      width and height to <strong><i>80px</i></strong>.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 250px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Place a new <strong>Group</strong> node as a sibling below the <strong>Image</strong> node</h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_15_addgroup.mp4"></video>
+    <p>
+      Open the Node Picker by <strong>clicking</strong> the <i>plus</i> icon in the Topbar, or <strong>right click</strong> on an empty space in the Node Canvas.
+    </p>
+    <p>
+      You can search for the <strong>Group</strong> node in the Node Picker's search field, or find it in the UI Elements category.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1:%Text",
+            "exists":true
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1:1",
+            "exists":true
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1:2",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Place three <strong>Text</strong> nodes as a children to the new <strong>Group</strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_16_text.mp4"></video>
+    <p>
+      Open the Node Picker by <strong>clicking</strong> the <i>plus</i> icon in the Topbar, or <strong>right click</strong> on an empty space in the Node Canvas.
+    </p>
+    <p>
+      You can search for the <strong>Text</strong> node in the Node Picker's search field, or find it in the UI Elements category.
+    </p>
+    <p>Use <strong>Ctrl/Cmd + C</strong> to copy a selected node, and <strong>Ctrl/Cmd + V</strong> to paste it.</p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1:%Text",
+            "haslabel": "Card Title"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Rename the first <strong>Text</strong> node to <strong><i>Card Title</i></strong></h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_17_card title.mp4"></video>
+    <p>Select the first <strong>Text</strong> node and change its name by pressing the <strong>enter</strong> key. You can also <strong>double click</strong> the node title in the Property Panel, or <strong>click</strong> the edit icon.</p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1:1",
+            "haslabel": "Category"
+        },
+        {
+          "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:1:2",
+          "haslabel": "Date"
+      }
+    ]'
+>
+  <div data-template="item" style="width: 350px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Rename the second <strong>Text</strong> node to <strong><i>Category</i></strong>, and the third Text node to <strong><i>Date</i></strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_17_card title.mp4"></video>
+    <p>Select the second or third <strong>Text</strong> node and change its name by pressing the <strong>enter</strong> key. You can also <strong>double click</strong> the node title in the Property Panel, or <strong>click</strong> the edit icon.</p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Horizontal layouts</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_18_horizontal.mp4"></video>
+    <h2>Horizontal layouts</h2>
+    <p>By default all visual nodes are stacked vertically inside of their parent node.</p>
+    <p>We can change this by changing the parent's <strong>layout direction</strong> property to <strong><i>Horizontal</i></strong> instead of <strong><i>Vertical</i></strong></p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item",
+            "paramseq": {
+                "flexDirection": "row"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 300px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>On the <strong>Card Item</strong> Group node, set the <strong>layout direction</strong> to <strong><i>Horizontal</i></strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_18_horizontal.mp4"></video>
+    <p>
+      Click the <strong>Group</strong> node named <i>Card Item</i> to open its Property Panel. Find the <strong>layout direction</strong> property and set it to <strong><i>Horizontal</i></strong>.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:%Image",
+            "paramseq": {
+                "marginRight": { "value": 24, "unit": "px" }
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 220px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Give the <strong>Image</strong> node a right margin of <strong><i>24px</i></strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_19_imagemargin.mp4"></video>
+    <p>
+      Click the <strong>Image</strong> node to open its Property Panel. At the top you will find the <strong>margin
+      settings</strong>. Set the right margin to <strong><i>24px</i></strong>.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Text and color styles</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_20_textstyles.mp4"></video>
+    <h2>Text and color Styles</h2>
+    <p>
+      We can create styles for text and colors to quickly reference them and
+      reuse them throughout our app. This can be done in every input property
+      that deals with text or color.
+    </p>
+    <p>
+      Every Noodl project comes with a set of predefined styles, all of them can
+      be modified.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item:%Group:#Card Title",
+            "paramseq": {
+                "textStyle": "Title Medium"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 340px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      On the <strong>Card Title</strong> Text node, set the <strong>text style</strong> property to <strong><i>Title Medium</i></strong>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-02_20_textstyles.mp4"></video>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>Outro</header>
+    <h2>Congratulations!</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <!--<img src="tutorial_card.png" style="cursor: pointer;" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')"> -->
+    <h2>Congratulations!</h2>
+    <p>You've completed this lesson, we hope you liked it!</p>
+    <p>
+      To take your Noodl skills to the next level we recommend our next lesson
+      on how to create lists from data.
+    </p>
+    <p>Keep on Noodling!</p>
+    <!--<button style="width: 150px" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')">WATCH TUTORIAL</button>-->
+    <button style="width: 150px" data-click="exitEditor">EXIT LESSON</button>
+  </div>
+</div>
+<!-- # -->

static/lessons/03_components/lesson.html

@@ -0,0 +1,768 @@
+<!-- A step with just a popup -->
+<div data-template="popup">
+  <video src="lesson-03_08-insertingcards.mp4"></video>
+  <h2>Welcome back!</h2>
+  <p>
+    This third lesson will be all about components, and why they might be the most powerful tool in you Noodl toolbox.
+  </p>
+  <p>
+    In the last lesson you created a nice card item, let's see how we can make it into a reusable Component.
+  </p>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Components</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_01-components.mp4"></video>
+    <h2>Components</h2>
+    <p>
+      Components are used to break your project into smaller building blocks.
+      This pattern has two main benefits:
+    </p>
+    <p>
+      1) They can be reused across your app, so you don't have to rebuild the
+      same UI or logic in multiple places. This is important when we want
+      to make our app data driven.
+    </p>
+    <p>
+      2) It's a good way to keep your project organized, so you don't end up
+      with huge, complex node graphs.
+    </p>
+    <p>
+      In the Component Panel in the Sidebar you get an overview of all the components in the project,
+      and from here you can also create new ones.
+    </p>
+    <p>
+      Noodl has four types: <strong>visual</strong>, <strong>logic</strong>, <strong>page</strong> and <strong>cloud function</strong>
+      components. You will be using visual components in this lesson.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Lesson tasks</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <image src="../01_task.png"></image>
+        <h2>Time to get your hands dirty!</h2>
+        <p>During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the <i>Task</i> label.</p>
+        <p>If you get stuck you can get a hint by clicking the card in the timeline.</p>
+        <p>Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Visual components</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_02-visual components.mp4"></video>
+    <h2>Visual components</h2>
+    <p>
+      You can turn a set of visual nodes (like our <i>Card Item</i>) into a visual
+      component to make it reusable. Your task app will include multiple tasks
+      with a <i>Card Item</i> each, so it's a perfect case to turn into a component.
+    </p>
+    <p>
+      Creating a new visual component is done by <strong>clicking</strong> the <i>plus</i> icon in the
+      <i>Component</i> section of the Component Panel.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "viewerpatheq":"/task-page"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 280px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Select the <strong><i>/task-page</i></strong> path in the <strong>Path Dropdown</strong></h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_04-select taskpage.mp4"></video>
+    <p>
+      In this lesson we will be working on the page called <i>Task Page</i> so select
+      that in the Path Dropdown.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Card Item",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 250px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Create a new visual component called <strong><i>Card Item</i></strong>
+    </h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_05-createvisualcomponent.mp4"></video>
+    <p>
+      Create a new visual component by <strong>clicking</strong> the <i>plus</i> icon in the component panel and name it <i>Card Item</i>.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>New components</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_05-v2 createvisualcomponent.mp4"></video>
+    <h2>New Components</h2>
+    <p>
+      When creating a new visual component it contains a single <strong>Group</strong> node by
+      default.
+    </p>
+    <p>
+      Components can only have one visual hierarchy, so you need to delete the
+      default <strong>Group</strong> before pasting in the card related nodes from the <i>Task Page</i>.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Card Item:%Group",
+            "exists":false
+        }
+    ]'
+>
+  <div data-template="item" style="width: 250px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Delete the default <strong>Group</strong> node in the new component</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_06-delete.mp4"></video>
+    <p>
+      A component can only have one visual hierarchy, so you will need to delete
+      the default Group node if you want to copy and paste from another node
+      graph.
+    </p>
+  </div>
+</div>
+
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Card Item:#Card Item",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 540px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Open the <i>Task Page</i> node graph and <strong>cut</strong> the <strong>Card Item</strong> Group node. Then <strong>paste</strong> it into your newly created <strong>Card Item</strong> component
+    </h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_07-inserttocomponent.mp4"></video>
+    <p>Select the <i>Card Item</i> Group node. Cut with <strong>Ctrl/Cmd + X</strong>. Paste with <strong>Ctrl/Cmd + V</strong>.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Using components</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_08-insertingcards.mp4"></video>
+    <h2>Using Components</h2>
+    <p>
+      Placing an instance of a component into the node graph is as easy as
+      dragging the component from the <strong>Component Panel</strong> into the node graph of the
+      component or page we want it to be in.
+    </p>
+
+    <p>You can also find all your components in the <strong>Node Picker</strong>.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:#Card Item",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 450px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Go to the <i>Task Page</i> node graph and insert the new <strong>Card Item</strong> component as a child to
+      the <strong>Content Container</strong> Group
+    </h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_08-insertingcards.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:0",
+            "exists":true
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:1",
+            "exists":true
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:2",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 300px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Repeat the previous task, so you have 3 <strong>Card Item</strong> components in total
+    </h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_08-insertingcards.mp4"></video>
+      <p>Copy with <strong>Cmd/Ctrl + C</strong> and paste with <strong>Cmd/Ctrl + V</strong></p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "path":"/Card Item:%Group",
+            "paramseq": {
+                "marginBottom": { "value": 16, "unit": "px" }
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 360px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      In the <strong>Card Item</strong> component, set the <strong>bottom margin</strong> of the <strong>Card Item</strong> Group to <i><strong>16px</strong></i>
+    </h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_09-cardmargin.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Component Inputs</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_10-componentinput.mp4"></video>
+    <h2>Component Inputs</h2>
+    <p>
+      When you changed the bottom margin on the <i>Card Item</i> component that change
+      applied to all instances of <i>Card Item</i> across your app. This is great for reusability
+      purposes. However, sometimes we want certain properties to be unique for each specific
+      instance, like the displayed text, the image and the background color in our case.
+    </p>
+    <p>
+      You can achieve this by using the <strong>Component Input</strong> node. This node allows
+      you to create <strong>ports</strong> on the component. The <strong>ports</strong> can be connected to the input
+      properties that you want to overwrite.
+    </p>
+    <p>
+      This allows you to create your own Property Panels for your components: When a <strong>Component Input</strong> port is connected it will show up as an <strong>input property</strong> on the <i>Card Item</i> component node. It will allow you to overwrite the components default values.
+    </p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "path":"/Card Item:%Component Inputs",
+            "exists":true
+        }
+    ]'
+>
+  <div data-template="item" style="width: 300px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Create a <strong>Component Inputs</strong> node inside the <strong>Card Item</strong> node graph</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_11-creating inputs.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "path":"/Card Item:%Component Inputs",
+            "hasport": "Image",
+            "hasport": "Background Color",
+            "hasport": "Title",
+            "hasport": "Category",
+            "hasport": "Date"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 400px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Add the following five ports to the Component Inputs:
+      <strong><i>Image</i></strong>,
+      <strong><i>Background Color</i></strong>,
+      <strong><i>Title</i></strong>,
+      <strong><i>Category</i></strong>,
+      <strong><i>Date</i></strong>
+    </h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_11-creating inputs.mp4"></video>
+    <p>Remember that port names are case sensitive</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "from": "/Card Item:%Component Inputs",
+            "to": "/Card Item:#Card Item",
+            "hasconnection": "Background Color,backgroundColor"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 500px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+
+    <h3>Connect the <strong>Component Inputs</strong> node to the <strong>Card Item</strong> Group node and send the <strong><i>background color</i></strong> output to the <strong><i>background color</i></strong> input</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_12-bgcolor.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "from": "/Card Item:%Component Inputs",
+            "to": "/Card Item:#Card Item:%Image",
+            "hasconnection": "Image,src"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 400px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+
+    <h3>Connect the <strong>Component Inputs</strong> node to the <strong>Image</strong> node and send the <strong><i>image</i></strong> output to the <strong><i>source</i></strong> input</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_12-image.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "from": "/Card Item:%Component Inputs",
+            "to": "/Card Item:%Group:%Group:0",
+            "hasconnection": "Title,text"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 400px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+
+    <h3>Connect the <strong>Component Inputs</strong> node to the <strong>Card Title</strong> Text node and send the <strong><i>title</i></strong> output to the <strong><i>text</i></strong> input</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_12-title.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "from": "/Card Item:%Component Inputs",
+            "to": "/Card Item:%Group:%Group:1",
+            "hasconnection": "Category,text"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 460px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+
+    <h3>Connect the <strong>Component Inputs</strong> node to the <strong>Category</strong> Text node and send the <strong><i>category</i></strong> output to the <strong><i>text</i></strong> input</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_12-category.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div
+  data-conditions='[
+        {
+            "from": "/Card Item:%Component Inputs",
+            "to": "/Card Item:%Group:%Group:2",
+            "hasconnection": "Date,text"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 400px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+
+    <h3>Connect the <strong>Component Inputs</strong> node to the <strong>Date</strong> Text node and send the <strong><i>date</i></strong> output to the <strong><i>text</i></strong> input</h3>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_13-date.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>&nbsp;</header>
+    <h2>Overwriting component inputs</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_14-overwrite.mp4"></video>
+    <h2>Overwriting Component inputs</h2>
+    <p>
+      All the ports created in the <strong>Component Inputs</strong> node are now exposed on the
+      component wherever it is used.
+    </p>
+    <p>
+      This means that you can style each instance of the component individually
+      without those changes being applied across the whole app.
+    </p>
+    <p>You can add more ports at any time to control more properties.</p>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:1",
+            "paramseq": {
+                "Image": "study.png"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 420px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      Go to the <i>Task Page</i> node graph and change the <strong>image</strong> on the second <strong>Card Item </strong>component
+      to <i><strong>study.png</strong></i>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_15-study.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:2",
+            "paramseq": {
+                "Image": "shopping.png"
+            }
+        }
+    ]'
+>
+  <div data-template="item" style="width: 340px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>
+      On the third <i>Card Item</i> component, change the <strong>image</strong> to <i><strong>shopping.png</strong></i>
+    </h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_16-shopping.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+  data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:1",
+            "hasparams": "Background Color"
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:2",
+            "hasparams": "Background Color"
+        }
+    ]'
+>
+  <div data-template="item" style="width: 300px">
+    <header>
+      Task
+      <span class="lesson-checkmark"></span>
+    </header>
+    <h3>Change the <strong>background color</strong> of the cards to any colors of your liking</h3>
+  </div>
+
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <video src="lesson-03_17-changebgcolor.mp4"></video>
+  </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+  <div data-template="item">
+    <header>Outro</header>
+    <h2>Congratulations!</h2>
+  </div>
+  <div data-template="popup">
+    <style>
+      .lesson-item-popup {
+        width: 600px !important;
+      }
+    </style>
+    <!--<img src="tutorial_card.png" style="cursor: pointer;" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')"> -->
+    <h2>Congratulations!</h2>
+    <p>You've completed this tutorial, we hope you got the gist of it!</p>
+    <p>
+      Feel free to continue change the different input properties to customize
+      the cards even more. e.g with new paddings or borders.
+    </p>
+    <p>
+      In the next tutorial you will learn how to generate this list of cards with
+      a data driven approach.
+    </p>
+    <p>Happy Noodling!</p>
+    <!--<button style="width: 150px" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')">WATCH TUTORIAL</button>-->
+    <button style="width: 150px" data-click="exitEditor">EXIT LESSON</button>
+  </div>
+</div>
+<!-- # -->

static/lessons/04_data-driven-components/lesson.html

@@ -0,0 +1,492 @@
+<!-- A step with just a popup -->
+<div data-template="popup">
+    <video src="lesson-04_19_inspect.mp4"></video>
+    <h2>Data driven components</h2>
+    <p>Welcome back! In this fourth lesson we will learn how to use a data source to render a list of UI components. </p>
+    <p>In the last lesson we created a card component that we copied multiple times to create a list of cards. We will now learn how to generate the list of cards from data instead.</p>
+</div>
+<!-- # -->
+
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Static data</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_04-staticarray.mp4"></video>
+        <h2>Static data</h2>
+        <p>There are many ways that we can get datasets into our project. An easy way is to use the <strong>Static Array</strong> node.</p>
+        <p>This node acts as a text file and supports two standard data formats: JSON and CSV. The node in this lesson comes with a small dataset following the <strong>JSON format</strong>.
+        <p>The dataset holds all the data for the <i>Card Item</i>s we want to render. It contains a list of titles, categories and dates for each card.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Data types</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <h2>Data types</h2>
+        <p>Noodl is built on top of JavaScript, a language with five primary data types: <strong>number</strong>, <strong>string</strong>, <strong>boolean</strong>, <strong>array</strong> and <strong>object</strong>.</p>
+        <p>The editor has nodes designed to store all the different data types, but the most common way of handling data in Noodl is by using objects in arrays.</p>
+        <p>Let's have a closer look at this pattern.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Data in Noodl</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_04-staticarray.mp4"></video>
+        <h2>Objects in arrays</h2>
+        <p>There are multiple ways of storing data in Noodl, but for our usecase the <strong>Static Array</strong> node is perfect, since it's the simplest one.</p>
+        <p>If you look at the structure in the Static Array node you can see that it defines an <strong>array</strong> that contains multiple <strong>objects</strong>. Each object has a set of <strong>properties</strong>.</p>
+        <p>In Noodl, every object automatically gets a unique id attached to it. This means that we can look up a specific object (using its id) and get its data.</b>
+        <p>This is one of the more tricky concepts in Noodl, but let's go forward so we can experience how it works in practice.</b>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Repeater node</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_08-repeater.mp4"></video>
+        <h2>Repeater node</h2>
+        <p>The <strong>Repeater</strong> node is used to generate visual components based on an array of objects. It takes a <strong>visual component</strong> as a template and renders it in place of the Repeater node in the Dom tree.</p>
+        <p>One component instance is generated and rendered for every object in the array.</p>
+        <p>Let's first remove the existing <i>Card Item</i> components from the DOM tree, add a Repeater node, and connect it up with our Static Array.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Lesson tasks</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <image src="../01_task.png"></image>
+        <h2>Time to get your hands dirty!</h2>
+        <p>During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the <i>Task</i> label.</p>
+        <p>If you get stuck you can get a hint by clicking the card in the timeline.</p>
+        <p>Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "viewerpatheq":"/task-page"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 280px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Select the <strong><i>/task-page</i></strong> path in the <strong>Path Dropdown</strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_02-selecttaskpage.mp4"></video>
+        <p>In this lesson you will be working on the page called <i>Task Page</i>. Navigate to it using the Path Dropdown in the Topbar.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:0",
+            "exists":false
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:1",
+            "exists":false
+        },
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:2",
+            "exists":false
+        }
+    ]'
+>
+    <div data-template="item" style="width: 280px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>In the <strong>Task Page</strong> node graph, delete the three <strong>Card Item</strong> components</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_07-delete components.mp4"></video>
+        <p>Select the <i>Card Item</i> components and <strong>press the backspace key</strong> to delete them.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:%For Each",
+            "exists":true
+        }
+    ]'
+>
+    <div data-template="item" style="width: 280px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Add a <strong>Repeater</strong> node as a child to the <strong>Content Container</strong> Group</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_08-addrepeater.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Task Page:%Page:%Group:#Content Container:%For Each",
+            "paramseq": {
+                "template":"/Card Item"
+            }
+        }
+    ]'
+>
+    <div data-template="item" style="width: 320px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>On the <strong>Repeater</strong> node, set the <strong>template</strong> property to use the <strong><i>Card Item</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_09-cartitemtemplate.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "from":"/Task Page:%Static Data",
+            "to":"/Task Page:%Page:%Group:#Content Container:%For Each",
+            "hasconnection":"items,items"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 390px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Connect the <strong>Static Array</strong> node to the <strong>Repeater</strong> node and send the <strong><i>items</i></strong> output to the <strong><i>items</i></strong> input</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_09-connectarray.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Mapping data</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_10_mappingdata.mp4"></video>
+        <h2>Mapping data</h2>
+        <p>You now have 4 cards in your UI, each with unique data. Let's walk through what happened here.</p>
+        <p>You already created the <i>Card Item</i> component in the last lesson. There you also created ports on the <i>Card Item</i> using a <strong>Component Inputs</strong> node. Those ports where hooked up to the properties we wanted to overwrite.</p>
+        <p>If the port names on the Component Inputs node matches the object keys in the Repeaters array, that data will automatically be passed to the rendered component.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item" style="width: 260px">
+        <header>&nbsp;</header>
+        <h2>Making clickable cards</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_13_connectclicked.mp4"></video>
+        <h2>Making clickable cards</h2>
+        <p>You have now built the basic system for showing cards (or any other type of list) from data. But to take this a step further you can also implement a way to make each card clickable and get its associated object so we can use that data somewhere else.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Component Outputs node</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_12_componentoutput.mp4"></video>
+        <h2>Component Outputs node</h2>
+        <p>Just as the Component Inputs node can be used to get data and signals into a component, you can use a <strong>Component Outputs</strong> node to send data and signals out from a component.</p>
+        <p>In this case we want to make the <i>Card Item</i> clickable, so that we can receive a signal from the card when it's clicked.</p>
+        <p>Let's start by creating a <strong>Component Outputs</strong> node in our <i>Card Item</i> component</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Card Item:%Component Outputs",
+            "exists":true
+        }
+    ]'
+>
+    <div data-template="item" style="width: 340px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>In the <strong>Card Item</strong> node graph, create a <strong>Component Outputs</strong> node</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_12_componentoutput.mp4"></video>
+        <p>Open the <i>Card Item</i>component, open the Node Picker and place a Component Outputs node anywhere in the node graph.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Card Item:%Component Outputs",
+            "hasport": "Clicked"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 270px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Create a port called <strong><i>Clicked</i></strong></h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_13_clicked.mp4"></video>
+        <p>Remember that the port names are case sensitive</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "from": "/Card Item:%Group",
+            "to": "/Card Item:%Component Outputs",
+            "hasconnection": "onClick, Clicked"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 450px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Connect the <strong>Card</strong> Group node to the <strong>Component Outputs</strong> node and send the <strong><i>click</i></strong> output to the <strong><i>clicked</i></strong> input</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_13_connectclicked.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Repeaters and Component Outputs</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_14_outputs.mp4"></video>
+        <h2>Repeaters and Component Outputs</h2>
+        <p>If you just had a single Card component you would now be able to get the click event in the node graph where the <i>Card Item</i> component is placed.</p>
+        <p>Since the <i>Card Item</i>s are generated by the Repeater node, we can't access that port directly, so you need a way to know which of the four cards you click.</p>
+        <p>Earlier in this lesson we talked about how each object in the array has a unique id. This is really handy, as you can make the Repeater node give us the object id of the card instance we click.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Object node</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_15_objects.mp4"></video>
+        <h2>Object node</h2>
+        <p>The <strong>Object</strong> node gives you a way to access an object and its data anywhere in a project. You only need to provide it with an object id.</p>
+        <p>Objects are generally a good way to share data between different node graphs.</p>
+        <p>Let's look at how the Object and Repeater nodes can be used together to get the object data from a clicked <i>Card Item</i>.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "path":"/Task Page:%Model2",
+            "exists":true
+        }
+    ]'
+>
+    <div data-template="item" style="width: 350px">
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>In the <strong>Task Page</strong> node graph, place an <strong>Object</strong> node adjacent to the <strong>Repeater</strong> node</h3>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_15_objects.mp4"></video>
+        <p>Navigate to the <i>Task Page</i> component using the Component Panel in the Sidebar. Then open the Node Picker and create a new Object node.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "from": "/Task Page:%Page:%Group:#Content Container:%For Each",
+            "to": "/Task Page:%Model2",
+            "hasconnection": "itemActionItemId, modelId"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 400px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Connect the <strong>Repeater</strong> node to the <strong>Object</strong> node and send the <strong><i>item id</i></strong> output to the <strong><i>id</i></strong> input</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_17_connectid.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+
+<!-- A step with an item in the bottom bar. It has tasks, so popup will only be shown when user clicks the item -->
+<div
+    data-conditions='[
+        {
+            "from": "/Task Page:%Page:%Group:#Content Container:%For Each",
+            "to": "/Task Page:%Model2",
+            "hasconnection": "itemOutputSignal-Clicked, fetch"
+        }
+    ]'
+>
+    <div data-template="item" style="width: 400px">
+
+        <header>Task<span class="lesson-checkmark"></span></header>
+        <h3>Connect the <strong>Repeater</strong> node to the <strong>Object</strong> node and send the <strong><i>clicked</i></strong> output to the <strong><i>fetch</i></strong> input</h3>
+    </div>
+
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_18_clickfetch.mp4"></video>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Click the cards</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <video src="lesson-04_19_inspect.mp4"></video>
+        <h2>Click the cards</h2>
+        <p>Try <strong>hovering</strong> over the Object and pin the Data Popup so you can inspect the change when the <i>Card Item</i>.</p>
+        <p>As you can see you now get the object id, and all the associated data from the specific card that is clicked. This is a very powerful pattern that is used in almost every app.</p>
+    </div>
+</div>
+<!-- # -->
+
+
+<!-- A step with an item in the bottom bar. No tasks, so popup will be shown automatically -->
+<div>
+    <div data-template="item">
+        <header>Outro</header>
+        <h2>Congratulations!</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <!--<img src="tutorial_card.png" style="cursor: pointer;" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')"> -->
+        <h2>Congratulations!</h2>
+        <p>You've completed the fourth tutorial! Great job!</p>
+        <p>If you are new to programming, you might be interested in reading a little more about the different data types in JavaScript.</p>
+        <p>In the next tutorial we will learn how to use the click event on our cards to navigate to a detailed page with dynamic data from each card.</p>
+        <p>Happy Noodling!</p>
+        <!--<button style="width: 150px" onclick="window.open('https://www.youtube.com/watch?v=TNnn0Gzj-H4&list=PL2eC2vS4uVoMbujQ5CiNtNuP7s7-UwNn-')">WATCH TUTORIAL</button>-->
+        <button style="width: 150px" data-click="exitEditor">EXIT LESSON</button>
+    </div>
+</div>
+<!-- # -->
+
+

static/lessons/04_data-driven-components/omitted steps

@@ -0,0 +1,70 @@
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Numbers</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <h2>Numbers</h2>
+        <p>A number is (unsurprisingly) a number. It can only contain numbers, and is used anytime you want to store values that can be increased/decreased or be used in a calculation.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Strings</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <h2>Strings</h2>
+        <p>A string is a piece of text. It starts and ends with a single <strong><i>"</i></strong>. Anything in between will be treated as written text, so it can not be used for calculations (even if it contains numbers).</p>
+        <p>In fact, adding one string to another just results in one longer string. Examples include <strong>"Hello" + "world" = "Helloworld"</strong> or (the slightly dumber) <stong>"13" + "37" = "1337"</stong>.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Booleans</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <h2>Booleans</h2>
+        <p>A boolean is simply a value that is either <strong><i>true</i></strong> or <strong><i>false</i></strong>. It is very useful when building logic.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Arrays</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <h2>Arrays</h2>
+        <p>An array is a list of <strong>items</strong> (that can be of any data type, even another array). It starts with a <strong><i>[</i></strong> and ends with a <strong><i>]</i></strong>. The array can be of any length, an the items are separated with a <strong><i>,</i></strong> between them.</p>
+    </div>
+</div>
+<!-- # -->
+
+<!-- Ask user to look at the static data -->
+<div>
+    <div data-template="item">
+        <header>&nbsp;</header>
+        <h2>Objects</h2>
+    </div>
+    <div data-template="popup">
+        <style>.lesson-item-popup {width: 600px !important;}</style>
+        <h2>Objects</h2>
+        <p>An object is a list of <strong>properties</strong>. It starts with a <strong><i>{</i></strong> and ends with a <strong><i>}</i></strong>. Every property has a <strong>key</strong> and a <strong>value</strong>, with a <strong><i>:</i></strong> between them. The key is the "name" of the property and the value is the data that the property holds. We use the keys to be able to get specific data from the object. The value can be of any type (even another object).</p>
+    </div>
+</div>
+<!-- # -->