diff --git a/.gitignore b/.gitignore
index 62c8935..5164872 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
-.idea/
\ No newline at end of file
+.idea/
+_site
+Gemfile.lock
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..d97e41f
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,20 @@
+source "https://rubygems.org"
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+# bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+
+
+group :jekyll_plugins do
+ gem 'jekyll-livereload'
+ gem "github-pages"
+end
+
+gem "json"
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
diff --git a/LICENSE b/LICENSE
index 00ae54f..0599133 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2017 Node Girls Australia
+Copyright (c) 2017 Muses Code JS - Australia
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 30f30dd..5dbb8b5 100644
--- a/README.md
+++ b/README.md
@@ -1,55 +1,13 @@
-# js-intro-workshop
-
An introductory JavaScript workshop for beginners.
-## Slides
-
-Check on slides, click [here](https://slides.com/tanyabutenko/ngs-intro/)
-
-
-## Feedback
-
-To leave feedback click [here](https://docs.google.com/forms/d/e/1FAIpQLSdoOaviRIqsDPi1ZPTvTDVEzeQrSiEoDhsS0tmAIQZmkLkvxw/viewform?c=0&w=1)
-
-
-## How to use
-
-If you are familiar with git, you can clone this repository to your machine and simply start working
-through files starting from README.md file, after that jump to js/level1.js file.
-
-
-If you don't know what git is, relax. You can download the folder on your machine - go to
-'releases' tab over the yellow line on the page and download folder 'Source code (zip)'.
-Unzip it and start from README.md file, after jumping to js/level1.js file.
-
-
-To open the web-page in your browser go to _index.html_ file and double click on it, you will see
-an option 'open in browser'. Preferably use Chrome, but Firefox and Safari will work as well.
-
-Follow the instructions in _level1.js_ file and type code in your Text Editor (it is where your code lives and you can write, edit and delete code). In order to see anything that you console.log(), you need refresh the web page and the result will be in web console on the page (you can directly write javaScript code here as well and see the result straight away, but as soon as you refresh the page all the code will be gone, that is why we use Text Editor).
-
-
-
-## Structure
-
-- CSS folder - contains css files that are responsible for styles and how our project looks on the web.
-
-- img folder - a place where we can store images that we will use on our web-page.
-
-- Js folder contains javaScript files that makes our project work, it defines content and makes a static page functional.
- It contains 2 files:
- - _level1.js_ - basics with explanations(comments, variables, functions, if/else statements)
- - _level2.js_ - more complex javaScript with explanations(arrays, loops)
- - _level3.js_ - html, css and how manipulate them with javaScript (selectors)
-
-- _index.html_ - a file responsible for the structure of our project
-
-- _Readme.md_ - a file with explanations and any information about the project, how to run it, what it is for etc
+This workshop is a [Jekyll](https://jekyllrb.com/) site.
-- _cheat-sheet.md_ - a file with a quick overlook for key namings and their explanations
+It is hosted using Github Pages, so the content is in the `gh-pages` branch, not `master`.
+To build the workshop locally:
-## Author
-Tanya Butenko
-github: [https://github.com/ButenkoT](https://github.com/ButenkoT)
-twitter: [@ButenkoMe](https://twitter.com/ButenkoMe)
+1. Install ruby (v2) if you don’t already have it
+2. Install bundler: `gem install bundler`
+3. make sure you are in the `gh-pages` branch
+4. Install dependencies: `bundle install`
+5. Run Jekyll: `jekyll serve -L`
\ No newline at end of file
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..43aa7e5
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,51 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: "Muses Code JS"
+workshopname: "Intro to Javascript"
+email: your-email@domain.com
+description: > # this means to ignore newlines until "baseurl:"
+ This is an introductory workshop for Javascript.
+baseurl: "/js-intro-workshop" # the subpath of your site, e.g. /blog
+url: "" # the base hostname & protocol for your site, e.g. http://example.com
+
+# Build settings
+markdown: kramdown
+# theme: muses-code-js
+
+collections:
+ steps:
+ output: true
+ challenges:
+ output: true
+
+challenge_separator: "<!--BREAK-->"
+challenge_difficulties:
+ - NONE
+ - Minor tweak of existing feature
+ - Adding new code derived from existing features
+ - Expands on existing concepts
+ - Introduces multiple new concepts
+ - Multiple new concepts. Might need to some research.
+
+plugins:
+ - jekyll-feed
+ - jemoji
+
+exclude:
+ - Gemfile
+ - Gemfile.lock
+
+theme: jekyll-theme-cayman
diff --git a/_includes/disqus_comments.html b/_includes/disqus_comments.html
new file mode 100644
index 0000000..87fa309
--- /dev/null
+++ b/_includes/disqus_comments.html
@@ -0,0 +1,20 @@
+{% if page.comments != false and jekyll.environment == "production" %}
+
+ <div id="disqus_thread"></div>
+ <script>
+ var disqus_config = function () {
+ this.page.url = '{{ page.url | absolute_url }}';
+ this.page.identifier = '{{ page.url | absolute_url }}';
+ };
+
+ (function() {
+ var d = document, s = d.createElement('script');
+
+ s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+ })();
+ </script>
+ <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{% endif %}
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..4ef08f6
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,17 @@
+<footer class="site-footer">
+
+ <div class="wrapper">
+
+ <div class="social-media centered">
+ <ul>
+ <li><i class="fa fa-home" aria-hidden="true"></i> <a href="http://nodegirls.com.au/" target="_blank">musescodejs.org</a></li>
+ <li><i class="fa fa-paper-plane-o" aria-hidden="true"></i> <a href="mailto:info@nodegirls.com.au">info@musescodejs.org</a></li>
+ </ul>
+ <ul class="main-social-media">
+ <li><i class="fa fa-facebook" aria-hidden="true"></i> <a href="https://www.facebook.com/MusesCodeJS/" target="_blank">www.facebook.com/MusesCodeJS</a></li>
+ <li><i class="fa fa-github-alt" aria-hidden="true"></i> <a href="https://github.com/node-girls-australia" target="_blank">github.com/node-girls-australia</a></li>
+ <li><i class="fa fa-twitter" aria-hidden="true"></i> <a href="https://twitter.com/NodeGirlsBri" target="_blank">twitter.com/NodeGirlsBri</a></li>
+ </ul>
+ </div>
+
+</footer>
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
new file mode 100644
index 0000000..eb2a692
--- /dev/null
+++ b/_includes/google-analytics.html
@@ -0,0 +1,11 @@
+<script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', '{{ site.google_analytics }}', 'auto');
+ ga('send', 'pageview');
+
+</script>
+
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..b15074a
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,34 @@
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <title>{{ site.workshopname | escape }}: {% if page.title %}{{ page.title | escape }}{% endif %}</title>
+ <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+ <link rel="icon" type="image/x-icon" href="/express-workshop-2/favicon.ico" />
+ <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+ <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+ <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
+
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+ <script>
+ $(document).ready(function(){
+ $('div.solution').each( function(){
+ $(this).prepend('<h5 class="toggle hiding"><i class="fa fa-chevron-up" aria-hidden="true"></i> Click to <span class="action"></span> solution</h5>');
+ });
+ $('div.solution .highlight').first().addClass('hidden');
+ $('h5.toggle').click(function(e){
+ $(this).parent().children('.highlight').first().slideToggle('show');
+ $(this).toggleClass('showing');
+ $(this).toggleClass('hiding');
+ $(this).children('i.fa').toggleClass('fa-chevron-up');
+ $(this).children('i.fa').toggleClass('fa-chevron-down');
+
+ });
+ });
+ </script>
+ {% if jekyll.environment == 'production' and site.google_analytics %}
+ {% include google-analytics.html %}
+ {% endif %}
+</head>
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..99002e8
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,28 @@
+<header class="site-header" role="banner">
+
+ <div class="wrapper">
+ {% assign default_paths = site.pages | map: "path" %}
+ {% assign page_paths = site.header_pages | default: default_paths %}
+ <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }} <small>{{ site.workshopname | escape }}</small></a>
+
+ {% if page_paths %}
+ <nav class="site-nav">
+ <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+ <label for="nav-trigger">
+ <span class="menu-icon">
+ <svg viewBox="0 0 18 15" width="18px" height="15px">
+ <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+ <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+ <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+ </svg>
+ </span>
+ </label>
+
+ <div class="trigger">
+ <a class="page-link" href="{{ '/' | relative_url }}">Home</a>
+ <a class="page-link go-link" href="{{ 'step0/' | relative_url }}"><i class="fa fa-rocket" aria-hidden="true"></i> Start</a>
+ </div>
+ </nav>
+ {% endif %}
+ </div>
+</header>
diff --git a/_includes/icon-github.html b/_includes/icon-github.html
new file mode 100644
index 0000000..e501a16
--- /dev/null
+++ b/_includes/icon-github.html
@@ -0,0 +1 @@
+<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>
diff --git a/_includes/icon-github.svg b/_includes/icon-github.svg
new file mode 100644
index 0000000..e6c5f6d
--- /dev/null
+++ b/_includes/icon-github.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
diff --git a/_includes/icon-twitter.html b/_includes/icon-twitter.html
new file mode 100644
index 0000000..e623dbd
--- /dev/null
+++ b/_includes/icon-twitter.html
@@ -0,0 +1 @@
+<a href="https://twitter.com/{{ include.username }}"><span class="icon icon--twitter">{% include icon-twitter.svg %}</span><span class="username">{{ include.username }}</span></a>
diff --git a/_includes/icon-twitter.svg b/_includes/icon-twitter.svg
new file mode 100644
index 0000000..efc0ecf
--- /dev/null
+++ b/_includes/icon-twitter.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>
diff --git a/_includes/keywords-table.html b/_includes/keywords-table.html
new file mode 100644
index 0000000..295bb69
--- /dev/null
+++ b/_includes/keywords-table.html
@@ -0,0 +1,21 @@
+{% if page.keywords %}
+{% assign sorted_keywords = page.keywords | sort: 'term' %}
+<table class="reference">
+ <thead>
+ <tr>
+ <th>Keyword</th>
+ <th>Explanation</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for keyword in sorted_keywords %}
+ <tr>
+ <td>{{keyword.term}}</td>
+ <td>{{ keyword.define | markdownify }}</td>
+ </tr>
+
+{% endfor %}
+
+ </tbody>
+</table>
+{% endif %}
diff --git a/_includes/page-nav.html b/_includes/page-nav.html
new file mode 100644
index 0000000..6a30c1b
--- /dev/null
+++ b/_includes/page-nav.html
@@ -0,0 +1,7 @@
+{% assign next = page.number | plus: 1 %}
+
+{% unless page.end %}
+<div class="page-nav">
+ <a class='go-link' href='../step{{next}}'>Go to Step {{next}}</a>
+</div>
+{% endunless %}
diff --git a/_includes/step-nav.html b/_includes/step-nav.html
new file mode 100644
index 0000000..a3aaa54
--- /dev/null
+++ b/_includes/step-nav.html
@@ -0,0 +1,72 @@
+{% assign steps = site.steps | sort: "number" %}
+
+<div class="step-nav">
+ <ul class="main">
+ <li class="{% if page.url == '/' }} %}active{% endif %}"><a href="{{ '/' | relative_url }}">Home</a></li>
+ </ul>
+
+ <h3>Part 0 - Getting Started</h3>
+ <ul>
+ {% for step in steps %}
+ {% if step.part == 0 %}
+ <li class='{% if page.number == step.number %}active{% endif %}'>
+ <a href="{{ step.url | relative_url }}">
+ {% if step.number != "start" %}{{step.number}} - {% endif %}{{ step.title | escape }}
+ </a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+
+
+ <h3>Part 1 - Basics</h3>
+ <ul>
+ {% for step in steps %}
+ {% if step.part == 1 %}
+ <li class='{% if page.number == step.number %}active{% endif %}'>
+ <a href="{{ step.url | relative_url }}">
+ {% if step.number != "start" %}{{step.number}} - {% endif %}{{ step.title | escape }}
+ </a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+
+ <h3>Part 2 - The Browser</h3>
+ <ul>
+ {% for step in steps %}
+ {% if step.part == 2 %}
+ <li class='{% if page.number == step.number %}active{% endif %}'>
+ <a href="{{ step.url | relative_url }}">
+ {% if step.number != "start" %}{{step.number}} - {% endif %}{{ step.title | escape }}
+ </a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+
+ <!-- <h3>Challenges</h3>
+ <ul>
+ {% for challenge in site.challenges %}
+ <li class='{% if page.cnumber == challenge.cnumber %}active{% endif %}'>
+ <a href="{{ challenge.url | relative_url }}">
+ {% if challenge.cnumber != "start" %}{{challenge.cnumber}} - {% endif %}{{ challenge.title | escape }}
+ </a>
+ </li>
+ {% endfor %}
+ </ul> -->
+
+ <ul class="main">
+ <!-- <li class="{% if page.url == '/troubleshooting/' }} %}active{% endif %}"><a href="{{ '/troubleshooting/' | relative_url }}">Troubleshooting</a></li> -->
+ <li class="{% if page.url == '/journey-continues/' }} %}active{% endif %}"><a href="{{ '/journey-continues/' | relative_url }}">The Journey Continues</a></li>
+ </ul>
+
+
+ <h3>Useful Links</h3>
+ <ul>
+ <li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">MDN Javascript Reference</a></li>
+
+</ul>
+
+
+</div>
diff --git a/_layouts/challenge.html b/_layouts/challenge.html
new file mode 100644
index 0000000..fbcb409
--- /dev/null
+++ b/_layouts/challenge.html
@@ -0,0 +1,36 @@
+---
+layout: default
+---
+{% assign contentArray = page.content | markdownify | split: site.challenge_separator %}
+
+<article class="post">
+
+ <header class="post-header">
+ <h2 class="post-title"> Challenge {{page.cnumber}} - {{ page.title | escape }}</h1>
+ </header>
+
+ <div class="post-content">
+ <div><b>Difficulty: </b>
+ {% for i in (1..page.difficulty) %}<span class="fa fa-star"></span>{% endfor %}{% for i in (page.difficulty..4) %}<span class="fa fa-star-o"></span>{% endfor %}
+ {{site.challenge_difficulties[page.difficulty]}}
+ </div>
+
+ {{ contentArray.first }}
+ <div class="challenge">
+ <p>Here's how a challenge works:</p>
+ <ol>
+ <li>We tell you how to change the front-end for the new feature.</li>
+ <li>We describe the expectations for the backend changes.</li>
+ <li>We'll discuss the steps & things you need to understand to do this and give some hints.</li>
+ <li>Then you have to implement the backend changes yourself. </li>
+ </ol>
+ <p>
+ There will be a solution at the end. But remember there is always more than one way of doing things. :smile:
+ </p>
+ </div>
+ {{ contentArray.last }}
+ {% include keywords-table.html %}
+
+ </div>
+
+</article>
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..16f6a02
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+ {% include head.html %}
+
+ <body>
+
+ {% include header.html %}
+
+ <main class="page-content" aria-label="Content">
+ <div class="wrapper">
+ {% include step-nav.html %}
+ {{ content }}
+ </div>
+
+ </main>
+
+ {% include footer.html %}
+
+ </body>
+
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..5f45732
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<article class="post">
+
+ <div class="post-content home">
+ {{ content }}
+ <div class="page-nav">
+ <h3 style="border:none"><a class="go-link" href="step0">Now click here to get started!</a></h3>
+ </div>
+
+ </div>
+
+</article>
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..01e4b2a
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<article class="post">
+
+ <header class="post-header">
+ <h1 class="post-title">{{ page.title | escape }}</h1>
+ </header>
+
+ <div class="post-content">
+ {{ content }}
+ </div>
+
+</article>
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 0000000..55ec11b
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,25 @@
+---
+layout: default
+---
+<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+
+ <header class="post-header">
+ <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
+ <p class="post-meta">
+ <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+ {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
+ {{ page.date | date: date_format }}
+ </time>
+ {% if page.author %}
+ • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
+ {% endif %}</p>
+ </header>
+
+ <div class="post-content" itemprop="articleBody">
+ {{ content }}
+ </div>
+
+ {% if site.disqus.shortname %}
+ {% include disqus_comments.html %}
+ {% endif %}
+</article>
diff --git a/_layouts/step.html b/_layouts/step.html
new file mode 100644
index 0000000..ff3c07f
--- /dev/null
+++ b/_layouts/step.html
@@ -0,0 +1,17 @@
+---
+layout: default
+---
+<article class="post">
+
+ <header class="post-header">
+ <h2 class="post-title"> Step {{page.number}} - {{ page.title | escape }}</h1>
+ </header>
+
+ <div class="post-content">
+ {{ content }}
+ {% include page-nav.html %}
+ {% include keywords-table.html %}
+
+ </div>
+
+</article>
diff --git a/_sass/minima.scss b/_sass/minima.scss
new file mode 100644
index 0000000..3568806
--- /dev/null
+++ b/_sass/minima.scss
@@ -0,0 +1,62 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$base-font-size: 16px !default;
+$base-font-weight: 400 !default;
+$small-font-size: $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit: 30px !default;
+
+$text-color: #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color: #2a7ae2 !default;
+
+$grey-color: #828282 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark: darken($grey-color, 25%) !default;
+
+// Width of the content area
+$content-width: 1024px !default;
+
+$on-palm: 600px !default;
+$on-laptop: 1000px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+// .wrapper {
+// padding-right: $spacing-unit / 2;
+// padding-left: $spacing-unit / 2;
+// }
+// }
+@mixin media-query($device) {
+ @media screen and (max-width: $device) {
+ @content;
+ }
+}
+
+@mixin relative-font-size($ratio) {
+ font-size: $base-font-size * $ratio;
+}
+
+// Import partials.
+@import
+ "minima/base",
+ "minima/layout",
+ "minima/syntax-highlighting"
+;
+
+
+
+@include media-query($on-palm) {
+ // body {
+ // background-color: blue;
+ // }
+ // .wrapper {
+ // padding-right: $spacing-unit / 2;
+ // padding-left: $spacing-unit / 2;
+ // }
+}
+
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
new file mode 100644
index 0000000..6ab1133
--- /dev/null
+++ b/_sass/minima/_base.scss
@@ -0,0 +1,218 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+/**
+ * Basic styling
+ */
+body {
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+ color: $text-color;
+ background-color: $background-color;
+ -webkit-text-size-adjust: 100%;
+ -webkit-font-feature-settings: "kern" 1;
+ -moz-font-feature-settings: "kern" 1;
+ -o-font-feature-settings: "kern" 1;
+ font-feature-settings: "kern" 1;
+ font-kerning: normal;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+ margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+ max-width: 100%;
+ vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+ display: block;
+}
+
+figcaption {
+ font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+ margin-left: $spacing-unit;
+}
+
+li {
+ > ul,
+ > ol {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: $base-font-weight;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+ color: $brand-color;
+ text-decoration: none;
+
+ &:visited {
+ color: darken($brand-color, 15%);
+ }
+
+ &:hover {
+ color: $text-color;
+ text-decoration: underline;
+ }
+
+ .social-media-list &:hover {
+ text-decoration: none;
+
+ .username {
+ text-decoration: underline;
+ }
+ }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+ color: $grey-color;
+ border-left: 4px solid $grey-color-light;
+ padding-left: $spacing-unit / 2;
+ @include relative-font-size(1.125);
+ letter-spacing: -1px;
+ font-style: italic;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+ @include relative-font-size(0.9375);
+ border: 1px solid $grey-color-light;
+ border-radius: 3px;
+ background-color: #eef;
+}
+
+code {
+ padding: 1px 5px;
+}
+
+pre {
+ padding: 8px 12px;
+ overflow-x: auto;
+
+ > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: $spacing-unit;
+ padding-left: $spacing-unit;
+ @extend %clearfix;
+
+ @include media-query($on-laptop) {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
+ padding-right: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+ }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+
+
+/**
+ * Icons
+ */
+.icon > svg {
+ display: inline-block;
+ vertical-align: middle;
+
+ path {
+ fill: $grey-color;
+ }
+}
+
+.social-media-list {
+ .icon {
+ padding-right: 5px;
+ }
+
+ li + li {
+ padding-top: 5px;
+ }
+}
diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
new file mode 100644
index 0000000..26b2950
--- /dev/null
+++ b/_sass/minima/_layout.scss
@@ -0,0 +1,266 @@
+/**
+ * Site header
+ */
+.site-header {
+ border-top: 5px solid $grey-color-dark;
+ border-bottom: 1px solid $grey-color-light;
+ min-height: $spacing-unit * 1.865;
+
+ // Positioning context for the mobile navigation icon
+ position: relative;
+}
+
+.site-title {
+ @include relative-font-size(1.625);
+ font-weight: 300;
+ line-height: $base-line-height * $base-font-size * 2.25;
+ letter-spacing: -1px;
+ margin-bottom: 0;
+ float: left;
+
+ &,
+ &:visited {
+ color: $grey-color-dark;
+ }
+}
+
+.site-nav {
+ float: right;
+ line-height: $base-line-height * $base-font-size * 2.25;
+
+ .nav-trigger {
+ display: none;
+ }
+
+ .menu-icon {
+ display: none;
+ }
+
+ .page-link {
+ color: $text-color;
+ line-height: $base-line-height;
+
+ // Gaps between nav items, but not on the last one
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+
+ @include media-query($on-palm) {
+ position: absolute;
+ top: 9px;
+ right: $spacing-unit / 2;
+ background-color: $background-color;
+ border: 1px solid $grey-color-light;
+ border-radius: 5px;
+ text-align: right;
+
+ label[for="nav-trigger"] {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 36px;
+ z-index: 2;
+ cursor: pointer;
+ }
+
+ .menu-icon {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 26px;
+ line-height: 0;
+ padding-top: 10px;
+ text-align: center;
+
+ > svg path {
+ fill: $grey-color-dark;
+ }
+ }
+
+ input ~ .trigger {
+ clear: both;
+ display: none;
+ }
+
+ input:checked ~ .trigger {
+ display: block;
+ padding-bottom: 5px;
+ }
+
+ .page-link {
+ display: block;
+ padding: 5px 10px;
+
+ &:not(:last-child) {
+ margin-right: 0;
+ }
+ margin-left: 20px;
+ }
+ }
+}
+
+
+
+/**
+ * Site footer
+ */
+ footer {
+ background: #333;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ padding-top: 25px;
+ padding-bottom: 15px;
+
+ div.social-media {
+ color: #fff;
+ margin-bottom: 10px;
+
+ a {
+ color: #a7a7a7;
+ font-size: 16px;
+ font-weight: bold;
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ color: $nodegreen;
+ }
+ }
+
+ ul {
+ list-style-type: none;
+ display: inline-block;
+ vertical-align: top;
+ margin-bottom: 0px;
+ li {
+ font-size: 16px;
+ margin-bottom: 9px;
+ }
+ }
+
+ }
+
+
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+ padding: $spacing-unit 0;
+ min-height: 1080px;
+}
+
+.page-heading {
+ @include relative-font-size(1.25);
+}
+
+.post-list {
+ margin-left: 0;
+ list-style: none;
+
+ > li {
+ margin-bottom: $spacing-unit;
+ }
+}
+
+.post-meta {
+ font-size: $small-font-size;
+ color: $grey-color;
+}
+
+.post-link {
+ display: block;
+ @include relative-font-size(1.5);
+}
+
+
+
+/**
+ * Posts
+ */
+ article.post {
+ vertical-align: top;
+ display: inline-block;
+ padding-left: 30px;
+ padding-top:30px;
+ }
+
+.post-header {
+ margin-bottom: $spacing-unit;
+}
+
+.post-title {
+ @include relative-font-size(2.625);
+ letter-spacing: -1px;
+ line-height: 1;
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(2.25);
+ }
+}
+
+.post-content {
+ margin-bottom: $spacing-unit;
+ padding-bottom: 150px;
+
+ h2 {
+ margin-top: $spacing-unit * 2;
+ }
+
+ h3, h4, h5, h6 {
+ margin-top: $spacing-unit * 1.25;
+ font-weight: bold;
+ border-bottom: 2px solid #eee;
+
+ }
+
+ h2 {
+ @include relative-font-size(2);
+ border-bottom: 3px solid $nodegreen;
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.75);
+ }
+ }
+
+ h3 {
+ @include relative-font-size(1.5);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.375);
+ }
+ }
+
+ h4 {
+ @include relative-font-size(1.2);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.125);
+ }
+ }
+
+ h5 {
+ font-size: $base-font-size;
+ @include media-query($on-laptop) {
+ font-size: $base-font-size;
+ }
+ }
+
+}
+
+@include media-query($on-palm) {
+ .post-content {
+ padding-bottom: 200px;
+ }
+}
+@include media-query($on-laptop) {
+ .post-content {
+ padding-bottom: 200px;
+ }
+}
+
diff --git a/_sass/minima/_syntax-highlighting.scss b/_sass/minima/_syntax-highlighting.scss
new file mode 100644
index 0000000..b65cda2
--- /dev/null
+++ b/_sass/minima/_syntax-highlighting.scss
@@ -0,0 +1,71 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+ background: #fff;
+ @extend %vertical-rhythm;
+
+ .highlighter-rouge & {
+ background: #eef;
+ }
+
+ .c { color: #6E6E5F; font-style: italic } // Comment
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
+ .k { font-weight: bold } // Keyword
+ .o { font-weight: bold } // Operator
+ .cm { color: #6E6E5F; font-style: italic } // Comment.Multiline
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
+ .c1 { color: #6E6E5F; font-style: italic } // Comment.Single
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+ .ge { font-style: italic } // Generic.Emph
+ .gr { color: #a00 } // Generic.Error
+ .gh { color: #999 } // Generic.Heading
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+ .go { color: #888 } // Generic.Output
+ .gp { color: #555 } // Generic.Prompt
+ .gs { font-weight: bold } // Generic.Strong
+ .gu { color: #aaa } // Generic.Subheading
+ .gt { color: #a00 } // Generic.Traceback
+ .kc { font-weight: bold } // Keyword.Constant
+ .kd { font-weight: bold } // Keyword.Declaration
+ .kp { font-weight: bold } // Keyword.Pseudo
+ .kr { font-weight: bold } // Keyword.Reserved
+ .kt { color: #458; font-weight: bold } // Keyword.Type
+ .m { color: #099 } // Literal.Number
+ .s { color: #d14 } // Literal.String
+ .na { color: #007A7A } // Name.Attribute
+ .nb { color: #0086B3 } // Name.Builtin
+ .nc { color: #458; font-weight: bold } // Name.Class
+ .no { color: #007A7A } // Name.Constant
+ .ni { color: #800080 } // Name.Entity
+ .ne { color: #900; font-weight: bold } // Name.Exception
+ .nf { color: #900; font-weight: bold } // Name.Function
+ .nn { color: #555 } // Name.Namespace
+ .nt { color: #000080 } // Name.Tag
+ .nv { color: #007A7A } // Name.Variable
+ .ow { font-weight: bold } // Operator.Word
+ .w { color: #bbb } // Text.Whitespace
+ .mf { color: #099 } // Literal.Number.Float
+ .mh { color: #099 } // Literal.Number.Hex
+ .mi { color: #099 } // Literal.Number.Integer
+ .mo { color: #099 } // Literal.Number.Oct
+ .sb { color: #d14 } // Literal.String.Backtick
+ .sc { color: #d14 } // Literal.String.Char
+ .sd { color: #d14 } // Literal.String.Doc
+ .s2 { color: #d14 } // Literal.String.Double
+ .se { color: #d14 } // Literal.String.Escape
+ .sh { color: #d14 } // Literal.String.Heredoc
+ .si { color: #d14 } // Literal.String.Interpol
+ .sx { color: #d14 } // Literal.String.Other
+ .sr { color: #009926 } // Literal.String.Regex
+ .s1 { color: #d14 } // Literal.String.Single
+ .ss { color: #990073 } // Literal.String.Symbol
+ .bp { color: #999 } // Name.Builtin.Pseudo
+ .vc { color: #007A7A } // Name.Variable.Class
+ .vg { color: #007A7A } // Name.Variable.Global
+ .vi { color: #007A7A } // Name.Variable.Instance
+ .il { color: #099 } // Literal.Number.Integer.Long
+}
diff --git a/_sass/reference-table.scss b/_sass/reference-table.scss
new file mode 100644
index 0000000..b3fa2c9
--- /dev/null
+++ b/_sass/reference-table.scss
@@ -0,0 +1,35 @@
+table.reference {
+ // border: 1px solid #e7e7e7;
+ background-color: #efefef;
+ width: 100%;
+ border-collapse: collapse;
+
+ thead {
+ tr {
+ th {
+ font-size: 16px;
+ background: grey;
+ padding: 8px 5px 5px 8px;
+ text-align: left;
+ color: white;
+ }
+ th:first-child {
+
+ }
+ }
+
+ }
+ tbody {
+ tr {
+ td {
+ border-bottom: 1px solid #e7e7e7;
+ padding: 8px;
+ vertical-align: top;
+ }
+ td:first-child {
+ padding: 8px 5px 5px 12px;
+ font-weight: bold;
+ }
+ }
+ }
+}
diff --git a/_sass/solution.scss b/_sass/solution.scss
new file mode 100644
index 0000000..6b84750
--- /dev/null
+++ b/_sass/solution.scss
@@ -0,0 +1,31 @@
+.hidden {
+ display: none;
+}
+
+h5.toggle {
+ font-size: 20px;
+ background-color: $nodegreen;
+ border: 2px solid darken($nodegreen, 10%);
+ border-radius: 4px;
+ padding: 7px 10px 5px 10px;
+ cursor: pointer;
+ margin: 0px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+h5.showing {
+ border-radius: 4px 4px 0px 0px !important;
+}
+
+h5.hiding span.action:before {
+ content: 'show'
+}
+
+h5.showing span.action:before {
+ content: 'hide'
+}
diff --git a/_sass/step-nav.scss b/_sass/step-nav.scss
new file mode 100644
index 0000000..78653f2
--- /dev/null
+++ b/_sass/step-nav.scss
@@ -0,0 +1,121 @@
+div.step-nav {
+ // border: 1px solid #e7e7e7;
+ // background-color: #efefef;
+ border-right: 3px solid $nodegreen;
+ // float: right;
+ max-width: 250px;
+ font-size: 16px;
+ display: inline-block;
+ margin-right: 0px;
+ padding-top: 30px;
+ h3 {
+ font-size: 18px;
+ font-weight: bold;
+ margin: 8px 0px 5px 10px;
+ }
+
+ul.main {
+ font-size: 18px;
+ font-weight: bold;
+ margin: 0px;
+ padding-left: 0px;
+ li {
+ padding-left: 9px;
+ }
+}
+
+ ul {
+ list-style: none;
+ margin: 0px 0px 15px 0px;
+ padding: 0px;
+ li {
+ margin-bottom: 0px;
+ padding: 6px 15px 5px 15px;
+ a.main {
+ font-size: 20px;
+ }
+ }
+ li.active {
+ background-color: $nodegreen;
+ a {
+ color: white;
+ }
+ }
+ }
+}
+
+@include media-query($on-laptop) {
+
+ article.post {
+ vertical-align: top;
+ display: block;
+ padding: 30px 30px 5px 30px;
+
+ div.post-content {
+ display: inline-block;
+ max-width: 100%;
+ vertical-align: top;
+ }
+ }
+
+ div.step-nav {
+ position: absolute;
+ left: -230px;
+ border-right: 3px solid $nodegreen; //#e7e7e7;
+ border-top: 3px solid $nodegreen;
+ border-bottom: 3px solid $nodegreen;
+ background-color: #efefef;
+ border-radius: 0px 5px 5px 0px;
+ box-shadow: 2px 2px 2px 1px grey;
+ // font-size: 16px;
+ display: block;
+ // margin-right: 0px;
+ padding-top: 7px;
+ -webkit-transition: all 0.5s, -webkit-transform 0.5s;
+ transition: all 0.5s, transform 0.5s;
+ // h3 {
+ // font-size: 18px;
+ // font-weight: bold;
+ // margin: 8px 0px 5px 10px;
+ // }
+ &:hover {
+ -webkit-transition: all 0.5s, -webkit-transform 0.5s;
+ transition: all 0.5s, transform 0.5s;
+ left: 0px;
+ }
+
+ //
+ // ul.main {
+ // font-size: 18px;
+ // font-weight: bold;
+ // margin: 0px;
+ // padding-left: 0px;
+ // li {
+ // padding-left: 9px;
+ // }
+ // }
+
+ ul {
+ list-style: none;
+ margin: 0px 0px 15px 0px;
+ padding: 0px;
+
+ li {
+ margin-bottom: 0px;
+ padding: 6px 25px 5px 25px;
+ a.main {
+ font-size: 20px;
+ }
+ }
+ li.active {
+ display: block;
+ background-color: $nodegreen;
+ a {
+ color: white;
+ }
+
+ }
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/_steps/part0/step0-tools.markdown b/_steps/part0/step0-tools.markdown
new file mode 100644
index 0000000..dab4846
--- /dev/null
+++ b/_steps/part0/step0-tools.markdown
@@ -0,0 +1,104 @@
+---
+layout: step
+number: 0
+part: 0
+title: Tools of the Trade
+permalink: step0/
+
+keywords:
+# - term: package.json
+# define: A `package.json` is the file used to store information about a Node.js project, such as its name and its dependencies. Read more [here](https://docs.npmjs.com/files/package.json).
+
+---
+
+<script>
+console.log('oh hey there!')
+</script>
+
+One of the really nice things about Javascript (and web design in general really) is how little you need to get started.
+
+There are many, many tools that you *can* learn, which can make things easier when you start to build bigger more complex applications - but you don't actually need them.
+
+The only two things you really need are:
+
+1. an editor
+2. a web browser and its developer tools.
+
+## Your Editor
+
+The first thing you need is an *editor* to write your Javascript source code in.
+
+Any program that can edit plain text files will work. Most operating systems have one installed by default, like NotePad on Windows or TextEdit on macOS. You cannot use a word processor like Microsoft Word, Apple's Pages, or OpenOffice to write source code, because these programs include all sorts of information instead of just plain text.
+
+While NotePad or TextEdit will do the job, you can download free and open-source editors which provide some additional features to make writing program source code a little more pleasant.
+
+If you are just getting started we recommend [Brackets](http://brackets.io/).
+
+Brackets is free, open-source, and available for Windows, macOS, and Linux.
+
+For convenience, we will assume that you are using Brackets for the rest of this workshop. The same principles apply to most editors although the specifics of menus will probably vary a little.
+
+## WebBrowser Developer Tools
+
+Since you're viewing this webpage, we are going to assume you already have a web browser. :smile:
+
+All of the modern mainstream web browsers (Chrome, Firefox, Safari, Internet Explorer, Edge) include their own set of Developer Tools AKA Dev Tools.
+
+Dev Tools provide you a way to see what is going on behind the scenes in whatever web page you currently have open in the browser.
+
+Browser Dev Tools are useful for:
+
+1. Trying to figure out why your page isn't doing the thing you expect it to do (AKA debugging)
+2. Checking out the code that makes up other people's web pages to learn how they did a particular thing.
+
+Different browsers generally cover the same basic functionality with their Dev Tools, but they each do it in their own way with slightly different interfaces and with some features unique to themselves.
+
+#### Opening Dev Tools
+
+Depending on your browser of choice, the way to open the Dev Tools will be a little different. But there will generally be a menu item somewhere in addition to keyboard shortcuts.
+
+The Dev Tools open in a new panel that is attached ("docked") to your current browser tab. This panel will usually have a set of tabs for different features and a couple of controls for closing it, switching between being docked horizontally or vertically, and detaching into a completely separate window.
+
+##### Chrome
+
+Click on the Menu icon, select More Tools, and then Developer Tools. Or press `ctrl-shift-i`.
+
+##### Firefox
+
+Click on the Menu icon, select Web Developer, and then Toggle Tools. Or press `ctrl-shift-i`.
+
+##### Safari
+
+Safari's Dev Tools are disabled by default. To enable them go to Safari's Preferences and enable it on the Advanced tab.
+
+Then you will be able to access the Dev Tools using the Develop menu.
+
+##### Internet Explorer & Microsoft Edge
+
+Press the `F12` button on your keyboard while you are in Internet Explorer or Microsoft Edge. This might not work if your F keys are bound to other functions like volume or media control - in this case, you need to press `fn-F12`.
+
+#### Checkout the console
+
+If you are feeling a little overwhelmed by the Dev Tools, don't worry. We are only really going to use one Dev Tools feature today: the console.
+
+The console is used to display messages, including errors. When debugging you will frequently make use of the console to display information to help you.
+
+Open your Dev Tools on this page, and go to the Console tab.
+
+You should see the message `oh hey there!` which is from a little bit of JavaScript in this page.
+
+You can also run JavaScript commands by typing them directly into the console.
+
+Type the following into the console and press enter to see a lovely(or not) shade of green.
+
+```JavaScript
+document.body.style["background-color"] = '#86ff4a'
+```
+
+Neat.
+
+Now refresh the page and you will see the original page again.
+
+What you did with that command was modify the copy of the webpage that your browser had. Refreshing the page causes the browser to get a fresh new copy of it.
+
+Important to note that any changes made to a page in the Dev Tools exist in that tab in the browser. They will not be saved back to the original.
diff --git a/_steps/part0/step1-make-a-webpage.markdown b/_steps/part0/step1-make-a-webpage.markdown
new file mode 100644
index 0000000..538f211
--- /dev/null
+++ b/_steps/part0/step1-make-a-webpage.markdown
@@ -0,0 +1,88 @@
+---
+layout: step
+number: 1
+part: 0
+title: Making a webpage
+permalink: step1/
+
+keywords:
+# - term: package.json
+# define: A `package.json` is the file used to store information about a Node.js project, such as its name and its dependencies. Read more [here](https://docs.npmjs.com/files/package.json).
+
+---
+
+<!-- https://developer.mozilla.org/en-US/docs/Web/HTML -->
+
+We are going to be learning about JavaScript by using it in web pages. This is the most common use of JavaScript.
+
+To do that we will create a very simple webpage and use it to load up our Javascript in the browser.
+
+So what actually is a web page?
+
+It's just a text file with two different types of content in it.
+
+1. text content, ie the actual words that will be displayed
+2. HTML tags, which tell the browser how the content is supposed to be displayed.
+
+It's easier to demonstrate than explain, so lets create one.
+
+1. **Create a folder for this workshop.**
+
+ Make a folder somewhere on your computer and name it `js-intro-workshop` or whatever makes sense for you. This folder can be on your desktop, or in My Documents, or where ever you want. Just so long as you know where it is and it is somewhere that makes sense for you. This folder is going to hold all the files that we create today.
+
+2. **Open that folder in Brackets.**
+
+ Open Brackets. Go to `File` `->` `Open Folder`, browse to the folder that you created and click open. You'll see the name of your folder on the left.
+
+3. **Create a new file called `index.html`**
+
+ Right click on the dark grey area just under the name of your folder and select `New File`. When prompted for the path, type `index.html` and press enter. You'll see this new file `index.html` appear both in the tree-view and also opened in a new editor tab.
+
+4. **Add some HTML**
+
+ Type or paste the following content into `index.html` and save it.
+
+ ```html
+ <html>
+ <head>
+ <title>My first webpage</title>
+ </head>
+ <body>
+ <h1>Muses Code JS</h1>
+ <p>Hi there!</p>
+ </body>
+ </html>
+ ```
+
+Ok so now we have a very simple webpage. How do we see that in our web browser? Just simply click the `Live Preview` icon (Like Harry Potter scar) on the right side and a browser window will open immediately.
+
+
+{:class="img-responsive"}
+
+---
+## So what's HTML?
+
+**HTML** stands for HyperText Markup Language, and it is the language that webpages are written in. It's the stuff in a webpage that you don't see displayed which the browser uses to know how it is supposed to show everything else.
+
+Unlike a programming language, a markup language isn't a series of instructions but instead it is a way of describing something. In the case of HTML it describes how content should be displayed in a web browser.
+
+HTML is made up of what we call **tags**. Tags are how we tell the browser what type of content something is in a page.
+
+Lets look at the example above, specically the line:
+
+```html
+<h1>Muses Code JS</h1>
+```
+
+The content here is the text `Muses Code JS` and it is *"marked-up"* with the `h1` tag. By *marked-up* we mean that this piece of text is preceeded by an opening tag `<h1>` and following by the corresponding closing tag `</h1>`is a `Header` tag.
+
+There are around 120 tags defined in the current version of HTML (version 5) but many of those are for very specific cases.
+
+Lets look at the tags we used in the example above:
+
+* `<html>` - The root element that contains any other tags
+* `<head>` - Tells the browser additional information about the webpage
+* `<title>` - Sets the description on the tabs in the browser window to help you navigate between different pages
+* `<body>` - All of your content has to be contained within this tag.
+* `<h1>` - Level 1 heading. There are six levels of headings, `<h1>` through to `<h6>`.
+* `<p>` - a paragraph
diff --git a/_steps/part0/step2-add-some-javascript.markdown b/_steps/part0/step2-add-some-javascript.markdown
new file mode 100644
index 0000000..885b2f5
--- /dev/null
+++ b/_steps/part0/step2-add-some-javascript.markdown
@@ -0,0 +1,126 @@
+---
+layout: step
+number: 2
+part: 0
+title: Adding some JavaScript
+permalink: step2/
+
+keywords:
+# - term: package.json
+# define: A `package.json` file is used to store information about a Node.js project, such as its name and its dependencies. Read more [here](https://docs.npmjs.com/files/package.json).
+
+---
+
+Ok now that we understand a little about how to create a simple webpage, let's add some JavaScript to it.
+
+There are two different ways to add Javascript to a page. The first way is to put your Javascript inside a `<script>` tag.
+
+Edit `index.html` and update the `<head>` element like this:
+
+```html
+<head>
+ <title>My awesome webpage</title>
+ <script>
+ console.log("OMG this is JavaScript");
+ </script>
+</head>
+```
+
+Save this, refresh your page and nothing should look different.
+
+But if you open your Dev Tools and look at the Console, you will see the message `OMG this is JavaScript`.
+
+{:class="img-responsive"}
+
+When your browser loads a page, it starts at the first tag and works through the whole document displaying it as it goes. When your browser encounters a `<script>` tag, it stops and runs that code before continuing to displaying the rest of the page.
+
+So what does `console.log()` do exactly?
+
+#### console.log()
+
+`console.log()` tells the browser to display messages and other information in the Dev Tools console. We call these 'console' or 'log' messages, and they only appear in the Dev Tools Console. Anyone interacting with your webpage isn't going to see them unless they open the Dev Tools Console.
+
+`console.log()` is for you (the developer) to use when **debugging**. That is when you trying to figure out why something isn't working as you expected it to. It's also common to use it when you are learning a new thing. You can use `console.log()` to display error & status messages or anything else which you think might help you.
+
+#### alert()
+
+Enough with the Console for a bit, what about something a user could actually see.
+
+Edit the page again and replace the `console.log` line with:
+
+```javascript
+alert('Hello there!');
+```
+Save and refresh the page, and a small window will popup in your browser with the text 'Hello there!' in it.
+
+{:class="img-responsive"}
+
+#### External Javascript files.
+
+We said earlier that there are two ways to bring JavaScript in using a `<script>` tag.
+
+The other way is to use `<script>` to load JavaScript from another file into this page.
+
+You do this by putting the Javascript in a different file, and then using the `src` attribute to specify that file as the script source.
+
+Let's update what we already have:
+
+1. Create a new file in the same folder, call it `myscript.js`.
+2. Copy the Javascript from inside your `<script>` tags to that file and save it. Don't copy the `<script>` tags themselves, just the code inside them.
+3. Replace the previous `<script>` tag with:
+ ```html
+ <script src="myscript.js"></script>
+ ```
+4. Make sure both files are saved and refresh the page in your browser.
+
+It will work exactly the same.
+
+Separating JavaScript out into its own files like this is generally considered a good practice. It's a bit nicer to work with, especially when the same piece of code is being included in a number of different pages.
+
+#### COMMENTS
+
+One more thing before we move on, comments.
+
+Comments are a way to mark bits of your code or other text so that a browser will ignore them.
+
+Why would we want to do this? Why have part of what we write get ignored by the computer?
+
+As a developer you will quickly discover that you spend a lot of time reading other people's code, either because you want to fix a bug or because you want to learn how they did something. Sometimes code is clear and simple, but a lot of the time it's not obvious how it works unless you're familiar with it.
+
+Comments give developers a way to put explanations, advice, and reminders into their code so that other developers can understand it more easily. Sometimes files will have a big comment block at the top which outlines the purpose of the file, who wrote it, and a list of when and why changes were made.
+
+Think of comments as being able to stick post-it notes in your code.
+
+In JavaScript there are two sorts of comments: single-line & multi-line.
+
+Single line comments start with `//` and continue to the end of the line.
+
+```javascript
+// This is a single-line comment.
+```
+
+You can also put single-line comments on the end of lines too.
+
+```javascript
+alert('Welcome to NodeGirls'); // this is a comment on the end of a line.
+```
+
+Multi-line comments start with `/*`, end with `*/` and can go across multiple lines.
+
+```javascript
+/*
+ Multi-line comments look like this.
+
+ They make it easier to write larger blocks of prose for
+ detailed explanations or other notes without marking each
+ line with a comment.
+
+ You only need to mark the beginning and the end.
+*/
+```
+
+In case you are wondering, HTML also has comments, but it uses the same symbols regardless of comment length. HTML comments start with `<!--` and end with `-->`.
+
+Feel free to try those out too if you're curious.
+
+Then head onto the next step.
diff --git a/_steps/part0/step3-end-part0.markdown b/_steps/part0/step3-end-part0.markdown
new file mode 100644
index 0000000..825ab93
--- /dev/null
+++ b/_steps/part0/step3-end-part0.markdown
@@ -0,0 +1,17 @@
+---
+layout: step
+number: 3
+part: 0
+title: Congratulations
+permalink: step3/
+---
+
+Wow! You now know the basic foundations of HTML & JavaScript.
+
+{:class="img-responsive"}
+
+You just absorbed a lot of information, so you might want to take a break.
+
+Get up and stretch your legs. Hydrate.
+
+Then we can continue onto digging further into JavaScript.
\ No newline at end of file
diff --git a/_steps/part1/step10-fizzbuzz.markdown b/_steps/part1/step10-fizzbuzz.markdown
new file mode 100644
index 0000000..375ce2e
--- /dev/null
+++ b/_steps/part1/step10-fizzbuzz.markdown
@@ -0,0 +1,36 @@
+---
+layout: step
+number: 10
+part: 1
+title: "Exercise: FizzBuzz"
+permalink: step10/
+
+---
+Time has come for a classic exercise. Yaay! :tada:
+
+Count from 1 to 50 and print the numbers out:
+
+* If a number is a multiple of three, print 'Fizz'.
+* If it's a multiple of 5, print 'Buzz'.
+* If it's a multiple of 3 and 5, print 'FizzBuzz'.
+* For everything else, print the number itself.
+
+Note: You may wish to use arithmetic [operator remainder (%)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()):
+
+```javascript
+for( var i = 0; i < 50; i ++){
+ if(i % 15 == 0){
+ console.log("FizzBuzz");
+ }
+ else if(i % 3 == 0){
+ console.log("Fizz");
+ }
+ else if(i % 5 == 0){
+ console.log("Buzz");
+ }
+ else {
+ console.log(i);
+ }
+}
+```
+{: .solution }
\ No newline at end of file
diff --git a/_steps/part1/step11-end-part1.markdown b/_steps/part1/step11-end-part1.markdown
new file mode 100644
index 0000000..cf97173
--- /dev/null
+++ b/_steps/part1/step11-end-part1.markdown
@@ -0,0 +1,12 @@
+---
+layout: step
+number: 11
+part: 1
+title: Congratulations
+permalink: step11/
+---
+
+Wow! You now know a whole bunch of JavaScript.
+
+{:class="img-responsive"}
+
diff --git a/_steps/part1/step4-variables.markdown b/_steps/part1/step4-variables.markdown
new file mode 100644
index 0000000..fe0f538
--- /dev/null
+++ b/_steps/part1/step4-variables.markdown
@@ -0,0 +1,99 @@
+---
+layout: step
+number: 4
+part: 1
+title: Variables
+permalink: step4/
+
+#keywords:
+# - term: variable
+# define:
+
+---
+
+Most of the code you write will be manipulating or examining data of some sort. That data might come from a file, or from a 3rd party service, or from the user selecting something on a page or typing into a text box. Regardless of where it comes from we need a place to put it so we can refer to it.
+
+**Variables** are the place where we keep information in our program.
+
+Think of variables are being little boxes. Each variable has a unique name that you specify and it holds one distinct piece of information (AKA the variable's **value**).
+
+## Creating Variables
+
+To create a variable you use the keyword `var`:
+
+```javascript
+var greeting;
+```
+
+So, we created a variable named `greeting`, but it has no value inside. It is empty. To give our variable a value
+using `=` sign:
+
+```javascript
+greeting = 'Hello everyone!';
+```
+
+This is called **assigning a value** to the variable. The `=` is called the **assignment** operator. We'll learn more about operators in the next part.
+
+We also can create and give value to a variable in one step, as follows:
+
+```javascript
+var whatTheFoxSays = 'yow-wow-wow-wow';
+```
+
+## Using Variables
+
+So now we can create variables and can assign values to them. So what can we do with them?
+
+We can use a variable in anyplace where we could use a value, like in `alert()` & `console.log()` for example.
+
+```javascript
+var greeting = 'Hello everyone!';
+alert(greeting);
+```
+
+And since you can use a variable anyplace you can use a value, you can of course use variables to assign values too:
+
+```javascript
+var whatTheFoxSays = 'yow-wow-wow-wow';
+var mysterySound = whatTheFoxSays;
+```
+
+What do you think the value of `mysterySound` is here? Try it out and display it with `console.log()` or `alert()`.
+
+### Tasks
+1. Create two empty variables named `animalName` and `animalNoise`
+2. Assign them appropriate values.
+3. Display them each using `alert()`
+
+
+## Data Types and Strings
+
+You might notice that all the values we are used so far have quote characters (`'`) around them. Why is that?
+
+Values have a quality what we refer to as **type**. Type indicates what kind of value it is. Different types have slightly different behaviour and can be used in different ways.
+
+Putting single or double quotes around a value indicates that has the type of **string**, or "a string of characters". We use strings for literal representations of words.
+
+So what will happen if you don't put the quotes in? Like this example?
+
+```javascript
+var message = Hello;
+console.log(message);
+```
+
+You'll get a error something like `ReferenceError: Hello is not defined` because JavaScript assumes that `Hello` is a variable and tries to assigns it's value to `message`. And `Hello` doesn't exist, so `not defined`.
+
+**Should I use single or double quotes?** It mostly doesn't matter so long as you use the same ones at the beginning and the end. It's mostly personal preference but it does matter when the string itself contains quote characters.
+
+```javascript
+var message = 'Say "Hello" to my little friend.';
+var warning = "Don't swim here. There are sharks!";
+```
+
+What do you think happens if the first string was wrapped in double-quotes, or if the second was in single quotes?
+
+Try it out and see.
+
+In the next step when we talk about operators we will also talk about another data type: Numbers.
+
+
diff --git a/_steps/part1/step5-operators.markdown b/_steps/part1/step5-operators.markdown
new file mode 100644
index 0000000..730b73d
--- /dev/null
+++ b/_steps/part1/step5-operators.markdown
@@ -0,0 +1,40 @@
+---
+layout: step
+number: 5
+part: 1
+title: Operators
+permalink: step5/
+
+#keywords:
+# - term:
+# define:
+
+---
+
+All programming languages have constructs called *operators*. An operator is a character that represents an action, or sometimes a relationship.
+
+You're already familiar with operators from when you learned maths: `+` is an operator that represents the action of *addition*. Operators in programming work the same way.
+
+There are lots of different kinds of operator. For example, you've already used the assignment operator, `=`, to assign a value to your variable in the last step. For this step, we're going to start with *arithmetical* operators, since you already understand how most of them work in the real world.
+
+## Arithmetical Operators
+
+JavaScript includes several standard arithmetical operators (`+`, `-`, `/`, `*`) that you can use to do maths with your numbers.
+
+```javascript
+var sumOfNumbers = 1 + 3;
+alert(sumOfNumbers);
+```
+
+This will pop-up an alert box with the number 4.
+
+TIP: Because we're working with numbers here, we don't need quotes around our values, 1 and 3.
+
+----
+
+### Tasks
+1. Create 3 variables:
+ * 1st variable named ten with value 10 inside
+ * 2nd variable named three with value 3
+ * 3rd variable named multipleOfNumbers that will be equal to 1st variable multiplied by the 2nd variable.
+2. As a result, display the value of multipleOfNumbers.
diff --git a/_steps/part1/step6-functions.markdown b/_steps/part1/step6-functions.markdown
new file mode 100644
index 0000000..7ccec2d
--- /dev/null
+++ b/_steps/part1/step6-functions.markdown
@@ -0,0 +1,55 @@
+---
+layout: step
+number: 6
+part: 1
+title: Functions
+permalink: step6/
+
+#keywords:
+# - term:
+# define:
+
+---
+
+A function is a type of procedure or routine. While some of the functions only perform some operations, some of them return a value after the operations as well.
+Functions can take input variables called `arguments` to perform the action that is defined inside of the function.
+To create a function use the following format:
+
+```javascript
+function functionName(argument) {
+ // Performing an operation
+ var double = argument * 2;
+ // Returning a value
+ return double;
+};
+```
+
+This function will take one argument and return the argument multiplied by 2.
+Our function won't actually run unless we 'call' it.
+To 'call' the function we write:
+```javascript
+functionName(10);
+```
+
+Now we will call our function with argument that is 10. And our function
+will return us 20. To see what our function returns us we can console.log
+it, for example:
+```javascript
+console.log(functionName(10));
+```
+
+----
+
+### Tasks
+1. Create a function to add multiple numbers.
+ * Name it `add` and pass in two arguments (num1 and num2). To pass multiple arguments into function we separate them with a comma.
+ * This function should return us a sum of num1 and num2.
+ * Call the function passing 2 numbers that you prefer as arguments.
+ * Log the result to see it. (`console.log()`)
+2. Create a function to subtract numbers from each other.
+ * Name it `subtract` and pass in two arguments (num1 and num2)
+ * This function should return us a subtraction of num1 and num2.
+ * Call the function passing 2 numbers that you prefer as arguments.
+ * Log the result to see it. (`console.log()`)
+3. Instead of numbers to pass as arguments, create variables that store
+those numbers and pass them as an arguments to your function. Call your function and log your result.
diff --git a/_steps/part1/step7-conditions.markdown b/_steps/part1/step7-conditions.markdown
new file mode 100644
index 0000000..2e8596b
--- /dev/null
+++ b/_steps/part1/step7-conditions.markdown
@@ -0,0 +1,107 @@
+---
+layout: step
+number: 7
+part: 1
+title: Conditional Statements
+permalink: step7/
+
+#keywords:
+# - term:
+# define:
+
+---
+
+## Conditional Statements
+
+As we mentioned in the last step, there are lots of different kinds of operator. In this step, we show you how to use operators to help your program make decisions.
+
+For example, let's say you have a program that lets your user input numbers. How can you make the program print a different message depending on the number that user enter? For example, we want to say "High!" if the number is above 7, and "Low!" if the number is below 7.
+
+Let's think about what the program needs to do to make that happen.
+
+1. It needs to compare the user's number with the number 7, to see if it's higher or lower.
+2. It needs to print "High!" when the number is bigger than 7.
+3. It needs to print "Low!" when the number is smaller than 7.
+
+We can do the first part of this job with a new type of operator called a comparison operator.
+
+### Comparison Operators
+
+Comparison operators are used to compare values. Javascript's comparison operators are:
+
+* `>` greater than
+* `<` less than
+* `>=` greater than or equal to
+* `<=` less than or equal to
+* `==` equal to
+* `!=` not equal to
+
+NOTE: Remember that the assignment operator `=` is different from the equal to operator `==`. They look similar, but they do different things.
+
+Comparison operators work a little bit differently from arithmetical operators. When you use a comparison operator, the program tests whether the statement made by the first value, the operator, and the second value, is *true* or *false*.
+
+For example, if you wrote `5 < 6` in a program, the result of the test would be *true*, because five *is* less than six. If you wrote `5 == 6`, the result would be *false*, because five and six are not equal.
+
+For our High/Low program, we need to use a variable to check whether our user has input a number that is higher or lower than seven.
+
+What variable would you use?
+
+What would your statements look like?
+
+### If - Else Statements
+
+Once you have your tests, you need to tell your program what to do after it evaluates your statements. To do this, we use *conditions* - in this case, an `if` statement.
+
+An `if` statement lets a computer reason out what to do when you can't tell it exactly what is going to happen. The same way you might check the weather to determine whether you'll go to the beach or a movie, your program can check whether something is true or false in order to work out what to do next.
+
+The basic structure of an `if` statement is:
+
+```javascript
+if (condition) {
+ do this
+} else {
+ do something else
+}
+```
+An example that might work for our High/Low program is:
+
+```javascript
+var number = 7;
+if (number > 7) {
+ console.log('High!');
+} else {
+ console.log('Low!');
+}
+```
+
+Hmm, but we've left out one possibility - what if our user enters exactly 7? To make this work, we need to check something else.
+
+If you want to check a bunch of different things, you can put `if` statements together by including a whole new `if` statement after `else`, like this:
+
+```javascript
+ var number = 7;
+ if (number > 7) {
+ console.log('High!');
+ } else if (number < 7) {
+ console.log('Low!');
+ } else {
+ console.log('You guessed our number.');
+ }
+```
+
+----
+
+### Tasks
+
+1. We have 2 functions from the previous task - `add` and `subtract`.
+Let's tell the machine to decide what action to run depending on the arithmetical
+operator(+,-,/, * etc). If the operator is '+', we should use the add function, else we should use the subtract function.
+ * Create a variable called operator and let it be equal to '-'.
+ * Create an if/else statement based on what operator we have. If we have an operator equal to '+', we call add function with any two numbers,
+else the subtract function with any 2 numbers.
+ * Log your result. (`console.log()`)
+
+ 2. Create 2 more functions and name them divide and multiply. After
+that let's extend our 'if else' check that we already created by checking if
+it is equal to '/', call 'divide' function. If it is '*', call multiply
+function, else log this message: "Sorry, we don't know this operator" on the console.
diff --git a/_steps/part1/step8-arrays.markdown b/_steps/part1/step8-arrays.markdown
new file mode 100644
index 0000000..91ed65a
--- /dev/null
+++ b/_steps/part1/step8-arrays.markdown
@@ -0,0 +1,69 @@
+---
+layout: step
+number: 8
+part: 1
+title: Arrays
+permalink: step8/
+
+---
+## What is an Array?
+
+Arrays are another way to store data, like variables. Unlike variables, they store a list of values. It can keep any type of data
+inside such as numbers, strings, objects.
+
+```javascript
+var animals = ['cat', 'dog', 'horse'];
+var randomThings = [2, 'book', 'today is Saturday', 10];
+var numbers = [1, 2, 8, 19];
+```
+### Length Of An Array
+We can easily check how many items we have in our array with the `length` property:
+
+```javascript
+var randomThings = [2, 'book', 'today is Saturday', 10];
+console.log(randomThings.length); // We will get 4.
+```
+
+### Accessing and Modifying Array Items
+
+It's useful to keep all of these values in one place. But what if we want
+to use only 1 item from the array?
+
+We can get them out using `bracket notation`. Array indices start counting from 0. The usage looks like this.
+
+```javascript
+var randomThings = [2, 'book', 'today is Saturday', 10];
+var firstItem = randomThings[0];
+console.log(firstItem);
+var secondItem = randomThings[1];
+console.log(secondItem);
+```
+
+We also can replace values inside of the arrays by assigning a new value to
+a specific index.
+
+```javascript
+var animals = ['cat', 'dog', 'horse'];
+// let's replace 'dog' with 'fish'
+animals[1] = 'fish';
+console.log(animals); // Now our animals array will be ['cat', 'fish', 'horse']
+```
+
+### Adding Items To An Array
+
+If you want to add new values to an existing array you can use the method
+'.push()'. Push will add a new value to the end of the array.
+
+```javascript
+var animals = ['cat', 'dog', 'horse'];
+animals.push('rabbit');
+console.log(animals); // animals will be ['cat', 'dog', 'horse', 'rabbit']
+```
+
+### Tasks
+
+1. Create your own array, named `favouriteFood`, and write in a couple of things you like.
+2. Check how many values you have in your array `favouriteFood`. Log the result (console.log())
+3. Get third element from your array favouriteFood and print on the console.
+4. Take your array favouriteFood and replace the first value with anything else. Log the whole array to check.(Don't forget, index positions start from 0!)
+5. Let's extend your list of favouriteFood and add one more value to it. console.log list your favouriteFood and check it.
diff --git a/_steps/part1/step9-loops.markdown b/_steps/part1/step9-loops.markdown
new file mode 100644
index 0000000..982e665
--- /dev/null
+++ b/_steps/part1/step9-loops.markdown
@@ -0,0 +1,92 @@
+---
+layout: step
+number: 9
+part: 1
+title: Loops
+permalink: step9/
+
+---
+People have always been lazy, but sometimes it moves progress forward! We
+don't like to repeat the same boring actions again and again, so we look
+for ways to avoid it. Programming is the same.
+
+For example, if I want to print 'JavaScript is
+awesome!' 10 times, what are my options? Of course, I can type ten lines of
+console.log('JavaScript is awesome!'), but I can also tell the computer to
+repeat it instead of me writing it 10 times!
+For this we have loops.
+Each loop should have three main things:
+- a starting point
+- a condition (finishing point)
+- a counter (a step)
+If you miss one of these, you can get into an infinite loop!
+Let's look into different looping structures.
+
+
+## While Loops
+
+'While' loop will do an action forever until some condition is met.
+
+```javascript
+// starting point
+var number = 0;
+while (number < 10) {
+ // 'less than 10'' is a condition (finishing point)
+ console.log('JavaScript is awesome!');
+ number = number + 1;
+ // + 1 is a counter/size of the step
+}
+```
+
+## For Loops
+
+'For loops are very similar to the 'while loop'. In a for loop, you
+declare a counter in the statement.
+
+```javascript
+var i;
+for (i = 0; i <= 5; i = i + 1) { // (starting point; condition; step)
+ console.log('Purr');
+}
+```
+
+
+## Iterating Through Arrays
+
+Now we know about loops, I want to use each value from my animal list
+and express my love for each. How shall I do it?
+We can use a 'for loop' to iterate through our array and get each value
+from it.
+Note: i++ is another way of writing i = i+1.
+
+
+```javascript
+var animals = ['cats', 'dogs', 'horses'];
+for(var i = 0; i < animals.length; i++){
+ console.log('I love ' + animals[i]);
+}
+```
+
+## Loops and Logic
+
+Let's bring loops together with the if/else statements we learned in
+learlier, and make something interesting.
+Let's count from 10 to 0 and log all the numbers. But, when we get to the
+middle (5) print 'Woohoo, we are in the middle!'.
+
+```javascript
+for (var i = 10; i >= 0; i = i - 1) {
+ if (i === 5) {
+ console.log('WooHoo, we are in the middle!');
+ } else {
+ console.log(i);
+ }
+}
+```
+
+### Tasks
+
+1. Using a 'while loop', tell your computer to log the numbers from ten to one.
+2. Log every 3rd number from 3 to 22 using a 'for loop'.
+3. Try to log your favourite food on the console. (use your `favouriteFood` array in the previous step.)
+
diff --git a/_steps/part2/step12-css.markdown b/_steps/part2/step12-css.markdown
new file mode 100644
index 0000000..e33ad36
--- /dev/null
+++ b/_steps/part2/step12-css.markdown
@@ -0,0 +1,101 @@
+---
+layout: step
+number: 12
+part: 2
+title: CSS
+permalink: step12/
+
+---
+Now it's time to work on HTML and do really fun stuff!
+
+We've covered some basic concepts about HTML earlier. If you still feel confused about it,
+feel free to grab a mentor and ask your questions.
+
+For building a website, we basically use 3 main technologies: HTML, CSS and JAVASCRIPT.
+
+Briefly, HTML is what content and what HTML tags your website includes, CSS is how your website looks like, JavaScript is how the interactions work in your website.
+
+HTML should reinforce the semantics of the information in webpages while CSS should be used to define its presentation or look.
+
+Here is an example of how a piece of a webpage looks like with CSS and without CSS.
+
+#### HTML with CSS
+
+{:class="img-responsive"}
+
+#### HTML without CSS
+{:class="img-responsive"}
+
+---
+
+
+They exactly have the same HTML but they look different. Because the first one has CSS to be styled while the second one hasn't.
+
+The source of this piece is [here](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float). Feel free to play with it and see how all these bits work together.
+
+## So what's CSS then?
+
+CSS describes how HTML elements look. CSS files are comprised of `declaration blocks`. Each declaration block is
+composed of a selector and a set of visual style rules. A declaration looks
+like this:
+
+```css
+[selector] {
+ style-name: value;
+ style-name: value;
+ style-name: value;
+}
+```
+
+Let's have a look at our HTML file (index.html) that we created in Part 0.
+
+```html
+<html>
+ <head>
+ <title class="website-title">My first webpage</title>
+ </head>
+ <body>
+ <h1 id="muses-codejs-title">Muses Code JS</h1>
+ <p>Hi there!</p>
+ </body>
+</html>
+```
+
+Selectors specify which elements the visual styles are applied to.
+The most basic selectors refer to elements by their tag-name. They look
+like this:
+
+```html
+body{
+ background-color: white;
+}
+```
+
+This CSS code block sets the background color of the body to white.
+
+As you might have realised, we have some different keywords in our HTML: `class` and `id`.
+
+Selectors can also refer to elements by their class attribute like this:
+
+```css
+.website-title {
+ font-size: 25px;
+}
+```
+
+or IDs, like this:
+
+```css
+#muses-codejs-title {
+ text-align: center;
+}
+```
+
+NOTE: To select an element by its class, we use `.`, to select by its id we use `#`.
+
+The list of css properties is huge, you can read more [here](https://www.w3.org/TR/CSS21/propidx.html), if you're interested.
+
+Don't worry, you don't need to remember all of this immediately!
+
+Phew, lots of new things. Let's come back to javaScript and see how we can
+interact with HTML.
diff --git a/_steps/part2/step13-accessing-elements.markdown b/_steps/part2/step13-accessing-elements.markdown
new file mode 100644
index 0000000..069e7a7
--- /dev/null
+++ b/_steps/part2/step13-accessing-elements.markdown
@@ -0,0 +1,102 @@
+---
+layout: step
+number: 13
+part: 2
+title: Accessing Elements
+permalink: step13/
+
+---
+
+### Document Object Model (DOM)
+
+The DOM is the javascript representation of the active HTML file. The DOM
+is available under a special global variable called `document`. We can get
+specific nodes (page elements) with the DOM method: `querySelector`.
+
+Let's get our twitter link from the page (at the bottom). You can try by opening your development console and simple copy and the paste the code below.
+
+```javascript
+var ourTwitter = document.querySelector('.fa-twitter');
+console.log(ourTwitter);
+// We can store page elements in variables, just like any other value!
+// The result on the console is : <i class="fa fa-twitter" aria-hidden="true"></i>
+```
+
+`'fa-twitter'` is the class of our Twitter icon. We need to know what the class name of the Twitter icon so that we can in the querySelector method as an argument. To get the class name, open your development console and click the arrow icon at the top-right and
+click the Twitter icon(the bird) at the very bottom. You will see the `<i class="fa fa-twitter" aria-hidden="true"></i>`. `'i'` tag represents an icon.
+
+Another example would be getting the title of our website.
+
+```javascript
+var siteTitle = document.querySelector('.site-title');
+console.log(siteTitle);
+```
+
+### Getting Similar Elements
+
+We also can get all elements with the same tag. For example, if you want to see all the icons that we have in our website, you can see the list of them by `querySelectorAll` method:
+
+```javascript
+// Will get all <i> from the page
+var mediaLinks = document.querySelectorAll('i');
+console.log(mediaLinks);
+```
+
+Okay, so far so good. But what if we want only the text of our title rather than an HTML element?
+Page elements have another property for this: '.textContent'.
+
+```javascript
+var siteTitle = document.querySelector('.site-title');
+console.log(siteTitle.textContent);
+// We will get text : Muses Code JS - Intro to Javascript'
+```
+
+### Editing Page Content
+
+We can change the content of the tags using the same .textContent property.
+
+```javascript
+siteTitle.textContent = 'JavaScript is awesome!';
+console.log(siteTitle.textContent);
+// guess what we will see on the page and in the console?
+```
+
+### Creating New Nodes (Elements)
+
+The DOM also provides ways to create new elements from scratch.
+
+document.createElement(tagName); --> create the element
+document.createTextNode(text); --> what text it should contain
+document.appendChild(node); --> append it to the document
+
+```javascript
+var titleElement = document.querySelector('.site-title'); // Selecting our title element
+var newIcon = document.createElement('i'); // Creating a new icon
+newIcon.className = 'fa fa-heart'; // Assigning the class name to our new icon. (Don't worry about what 'fa fa-heart' means but it's just a class from an external library.)
+titleElement.appendChild(newIcon); // And append this new icon to our title.
+```
+
+Did you see the heart on the page? :smiley:
+
+You've done such an amazing job so far! Let's do one more practise and then you're done!
+
+----
+### Tasks
+
+1. Get the h2 tag from the page and store it into a variable named postTitle. console.log it and see what you get!
+2. Make up a new title! Change the content of our 'h2' to anything you like.
+3. Select the 'Home' element in the navigation bar ans store it into a variable named homeNav. (Tip: Even though we urge you to find the class of the 'Home' element, If you can't find it, it is 'page-link')
+4. Create a new icon using creating a new node method and use the class name 'fa fa-home'.
+5. Append the new icon to your homeNav element.
+
+```javascript
+// Title
+var postTitle = document.querySelector('h2');
+postTitle.textContent = 'I became a developer in a day!';
+// Icon
+var homeNav = document.querySelector('.page-link');
+var newIcon = document.createElement('i');
+newIcon.className = 'fa fa-home';
+homeNav.appendChild(newIcon);
+```
+{: .solution }
diff --git a/_steps/part2/step14-end-part2.markdown b/_steps/part2/step14-end-part2.markdown
new file mode 100644
index 0000000..c02a063
--- /dev/null
+++ b/_steps/part2/step14-end-part2.markdown
@@ -0,0 +1,23 @@
+---
+layout: step
+number: 14
+part: 2
+title: Congratulations
+permalink: step14/
+end: true
+---
+
+{:class="img-responsive"}
+
+Congratulations
+You made it! You’re awesome!
+
+You might want to go strut about the room a bit at this point and get some high fives.
+
+You’ve earned them.
+
+So what’s next?
+
+The Journey Continues gives you some ideas about what you could go research next on your own. There is so much to learn and this is only the tip of the iceberg.
+
+[Continue your Journey]({{'/journey-continues/' | relative_url }}){: class="go-link" }
diff --git a/assets/html-with-css.png b/assets/html-with-css.png
new file mode 100644
index 0000000..5eacb67
Binary files /dev/null and b/assets/html-with-css.png differ
diff --git a/assets/html-without-css.png b/assets/html-without-css.png
new file mode 100644
index 0000000..7280ef7
Binary files /dev/null and b/assets/html-without-css.png differ
diff --git a/assets/intro-alert.png b/assets/intro-alert.png
new file mode 100644
index 0000000..797969d
Binary files /dev/null and b/assets/intro-alert.png differ
diff --git a/assets/intro-html.png b/assets/intro-html.png
new file mode 100644
index 0000000..dea61bc
Binary files /dev/null and b/assets/intro-html.png differ
diff --git a/assets/intro-js.png b/assets/intro-js.png
new file mode 100644
index 0000000..8b814bf
Binary files /dev/null and b/assets/intro-js.png differ
diff --git a/assets/leo-congrats.gif b/assets/leo-congrats.gif
new file mode 100644
index 0000000..61ab66c
Binary files /dev/null and b/assets/leo-congrats.gif differ
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..d844672
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/main.scss b/assets/main.scss
new file mode 100644
index 0000000..947baed
--- /dev/null
+++ b/assets/main.scss
@@ -0,0 +1,61 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+$nodegreen: #4CAF50;
+
+@import "minima";
+@import "step-nav";
+@import "reference-table";
+@import "solution";
+
+div.nav {
+ display: inline-block;
+ width: 250px;
+ vertical-align: top;
+ float: right;
+}
+
+div.post-content {
+ display: inline-block;
+ max-width: $content-width - 350;
+ vertical-align: top;
+}
+
+
+div.home {
+ display: block;
+
+}
+
+div.page-nav {
+ padding: 30px 0px 50px 0px;
+
+}
+
+a.go-link {
+ background: $nodegreen;
+ padding: 9px 14px 8px 14px;
+ border-radius: 6px;
+ border: 2px solid $nodegreen;
+ color: white !important;
+ text-decoration: none;
+ &:hover {
+ border: 2px solid darken($nodegreen, 10%) !important;
+ }
+}
+
+code {
+ font-size: inherit;
+}
+
+pre {
+ code {
+ font-size: 14px;
+ }
+}
+
+.imgbox {
+ box-shadow: black 0px 0px 10px;
+ border-radius: 5px;
+}
diff --git a/assets/minions-congrats.gif b/assets/minions-congrats.gif
new file mode 100644
index 0000000..65f1154
Binary files /dev/null and b/assets/minions-congrats.gif differ
diff --git a/assets/neo-kungfu.gif b/assets/neo-kungfu.gif
new file mode 100644
index 0000000..15f5ff4
Binary files /dev/null and b/assets/neo-kungfu.gif differ
diff --git a/css/main.css b/css/main.css
deleted file mode 100644
index cb1489b..0000000
--- a/css/main.css
+++ /dev/null
@@ -1,131 +0,0 @@
-html, body {
- margin: 0;
- padding: 0;
-}
-
-html {
- font-size: 62.5%;
-}
-
-body {
- align-items: center;
- background: #fee13d;
- display: flex;
- flex-direction: column;
- font-family: 'Source Sans Pro', sans-serif;
- font-size: 100%;
- justify-content: center;
- min-height: 57.5rem;
-}
-
-body * {
- box-sizing: border-box;
-}
-
-header {
- box-sizing: border-box;
- flex: 0 1 auto;
- text-align: center;
-}
-
-h1 {
- font-size: 3.5rem;
- margin: 0 3.5rem;
-}
-
-h2 {
- font-size: 3rem;
- margin: 0 3rem;
-}
-
-img {
- width: 100%;
- max-width: 64rem;
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-abbr {
- text-decoration: none;
-}
-
-main {
- flex: 2 auto;
- width: calc(100% - 4rem);
-}
-
-main > div {
- margin: 0 auto;
- max-width: 64rem;
-}
-
-main p {
- font-size: 2.6rem;
-}
-
-main a {
- font-weight: 800;
-}
-
-footer {
- background-color: black;
- padding: 1rem 1rem 2rem;
- width: 100%;
-}
-
-footer > div {
- background-color: black;
- color: white;
- display: flex;
- flex-direction: row;
- font-family: Georgia, serif;
- font-size: 1.4rem;
- justify-content: space-between;
- margin: 0 auto;
- padding: 0 2rem;
- max-width: 64rem;
-}
-
-footer ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-footer li {
- padding: .25rem;
-}
-
-footer span {
- display: block;
-}
-
-footer a {
- color: #9E9E9E;
- font-style: italic;
- text-decoration: none;
-}
-
-footer a:hover {
- color: white;
-}
-
-#surprise {
- color: red;
- font-size: 2.25rem;
-}
-
-@media only screen and (min-width: 640px) {
- footer span {
- display: inline;
- }
-}
-
-@media only screen and (min-width: 1024px) {
- body {
- background: #fee13d url(../img/woman.jpg) no-repeat bottom right;
- }
-}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..1ae7963
Binary files /dev/null and b/favicon.ico differ
diff --git a/img/kittens.jpeg b/img/kittens.jpeg
deleted file mode 100644
index 73ae835..0000000
Binary files a/img/kittens.jpeg and /dev/null differ
diff --git a/img/logo.png b/img/logo.png
deleted file mode 100644
index 1bb4015..0000000
Binary files a/img/logo.png and /dev/null differ
diff --git a/img/woman.jpg b/img/woman.jpg
deleted file mode 100644
index 2eda86a..0000000
Binary files a/img/woman.jpg and /dev/null differ
diff --git a/index.html b/index.html
deleted file mode 100644
index 1702770..0000000
--- a/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>NodeGirls JavaScript Workshop</title>
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200">
- <link rel="stylesheet" href="css/main.css">
- </head>
- <body>
- <header>
- <div id="logo">
- <img src="img/logo.png" alt="Welcome to Node Girls">
- </div>
- <h1>Hello everyone.</h1>
- <h2>Let's do some interactive coding today!</h2>
- </header>
-
- <main>
- <div>
- <p>On <a href="https://www.google.com/chrome/browser/desktop/index.html">Chrome</a> and <a href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a>, to open the Browser Console, invoke the context/right click menu and select <i>'Inspect'</i>. The console will appear at the bottom or on the right side of the screen.</p>
- <p>If you're ready for a shortcut, press <i>'<abbr title="Command">CMD</abbr>+<abbr title="Option">OPT</abbr>+J'</i> on Mac, or <i>'F12'</i> on Windows</p>
- <p>On <a href="https://support.apple.com/en-au/HT204416">Safari</a>, go to <i>'Safari > Preferences > Advanced >'</i> and tick the box Show Develop Menu in menu bar, restart Safari, and now you can double click on the page and select <i>'Inspect Element'</i> to see the console.</p>
- </div>
- </main>
- <footer>
- <div>
- <ul>
- <li class="twitter">
- <span>Twitter:</span>
- <a href="https://twitter.com/NodeGirlsSydney" target="_blank" rel="noopener noreferrer">@NodeGirlsSydney</a>
- <a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a>
- </li>
- <li class="facebook">
- <span>Facebook:</span>
- <a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank" rel="noopener noreferrer">NodeGirlsAustralia</a>
- </li>
- </ul>
- <ul>
- <li class="website">
- <span>Website:</span>
- <a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a>
- </li>
- <li class="email">
- <span>e-mail:</span>
- <a href="mailto:info@nodegirls.com.au" target="_blank" rel="noopener noreferrer">info@nodegirls.com.au</a>
- </li>
- </ul>
- </div>
- </footer>
- <script src="js/level1.js"></script>
- </body>
-</html>
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..f480800
--- /dev/null
+++ b/index.md
@@ -0,0 +1,53 @@
+---
+layout: home
+number: start
+---
+
+<img src="assets/logo.png">
+
+## What is this?
+
+This is an introductory level workshop of the language of the web, JavaScript.
+
+## What is JavaScript?
+
+Javascript is a programming language which was designed originally for adding interactivity to web pages.
+
+Nowadays JavaScript runs in more places than just web browsers such as on web servers, phones and robots. However, today, we are going to focus on JavaScript on browsers.
+
+## Why learn JavaScript?
+
+Learning Javascript is a good idea for so many reasons.
+
+Firstly, it's a core part of the modern web. Almost all highly interactive web sites make heavy use of JavaScript to drive their UI in someway. If you are interested in building frontend user experiences, JavaScript is a requirement.
+
+Second, with the advent of Node.js it is possible to also use JavaScript to create both server-side and desktop applications.
+
+And third, tools like Cordova and React Native make it possible to also build mobile applications with JavaScript.
+
+It's increasingly the case that if you ask "Can I do that with Javascript?", the answer is yes.
+
+Javascript isn't going anywhere, and the demand for developers with Javascript skills will only continue to grow.
+
+
+## Prerequisites
+
+For beginners, it's great because it's easy to get started. You don't need to learn any specialised, complicated tools. All you need is the browser you already have.
+
+We have `Part 0` to get you started with web basics and some information about the tools (browser and an editor) that you will be using during the workshop. Make sure that you have a good grasp on `Part 0` before going further. Otherwise, you will have some weird question marks in your mind during `Part 1` and `Part 2`.
+
+If you feel that you are struggling, don't spend much time trying to figure it out on your own, just grab a mentor and ask for help. They will be more than happy to help you.
+
+There will also be lightning talks during the day to elaborate on several topics to make you more familiar with the concepts.
+
+
+## Workshop Structure
+
+This workshop is divided into a number of steps. At the end of each step, you will
+find a link to continue onto the next step.
+
+In most of the steps, we have some `Tasks To Do` to get you to practise.
+
+Then we have some links to resources to continue your studies.
+
+
diff --git a/journey-continues.md b/journey-continues.md
new file mode 100644
index 0000000..4192e41
--- /dev/null
+++ b/journey-continues.md
@@ -0,0 +1,46 @@
+---
+layout: page
+title: The Journey Continues ...
+permalink: journey-continues/
+---
+
+So hopefully you have completed the workshop and tried the tasks.
+
+But this is just the tip of the iceberg for JavaScript and web development. There is a whole bunch of technologies and tutorials at your fingertips. Here are some starting points about where you could go next.
+
+## JavaScript Sources
+
+### Beginner
+* [W3 School JavaScript](https://www.w3schools.com/js/)
+* [scotch.io](https://scotch.io/search?q=javascript)
+* [javascript.info](https://javascript.info/)
+
+### Intermediate
+* [The Good Parts of JavaScript](https://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742)
+* [JavaScript:Understanding the weird Parts](https://www.udemy.com/understand-javascript/)
+* [You Don't Know JavaScript](https://github.com/getify/You-Dont-Know-JS)
+
+### Advanced
+
+ * [Wes Bos 30 Day Challenge](https://javascript30.com/)
+
+
+## Javascript & Technology Podcasts
+
+[The Women in Tech Show](https://thewomenintechshow.com/) weekly technical interviews with prominent women in tech.
+
+[Javascript Jabber](https://devchat.tv/js-jabber) is a weekly discussion about JavaScript, front-end development, community, careers, and frameworks.
+
+[FreeCodeAcademy Youtube Channel](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
+
+[Code Newby](https://www.codenewbie.org/podcast/) weekly podcasts that poeple tell their stories about their coding journeys.
+
+[WesBos](https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA) is a YouTube channel with a variety of short videos mostly on web development and Javascript.
+
+[Fun Fun Function](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q/videos) is a Youtube channel with short videos on a wide variety of programming topics. It has a quirky sense of humour that isn’t for everyone. His approach is very much a “this seems dumb, let me figure out for you why it isn’t”.
+
+[Greater than Code](http://www.greaterthancode.com/) is a podcast that discusses people issues related to software development.
+
+[Toolsday](http://toolsday.io/) is a short weekly podcast about different software development tools. Mostly related to web development.
+
+
diff --git a/js/level1.js b/js/level1.js
deleted file mode 100644
index ff87e17..0000000
--- a/js/level1.js
+++ /dev/null
@@ -1,310 +0,0 @@
-// Level 1
-
-/*
- Comments
- ========
-
- Let's start with comments. This is a comment. Comments are notes that people
- can read and computers will ignore.
-
- They will help us to guide you through the JavaScript introduction
- journey.
-*/
-
-// Single line comments look like this.
-
-/*
- Multi-line comments look like this.
- When you are writing actual code, put it outside these comment blocks,
- so the computer doesn't ignore them.
-*/
-
-/*
- Let's start with getting your code on the screen.
-
- There are a few ways you can do it and we will look into a few of them:
-
- alert('Hello girls!');
- ** This line of code will pop-up a small window in your browser with the text
- 'Hello girls!' in it, but you need to refresh the opened page first.
-
- console.log('Hello World!');
- ** This line of code will print 'Hello World!' to the browser's console.
-
- P.S: To see the browser's console you can right click on the window of your
- browser (Chrome, Firefox etc) and select 'Inspect' or 'Inspect element'.
- After that a console will appear on the bottom right side of the page.
-*/
-
-
-// TODO: Now try to create an alert with any phrase you like.
-
-
-
-
-
-// TODO: After the alert works for you, comment it out (put '//' on the line where
-// your code is and save the changes). After you refresh the page, it should not pop-up
-// anymore.
-
-// TODO: Shall we try to console.log the message to the browser?
-// Send any message you like.
-
-
-
-
-
-/*
- Variables
- =========
-
- A variable is a place to store information. To create (also called declare) a
- variable use the keyword 'var', as follows:
-
- var variableName;
-
- So, we created a variable named variableName, but it has no information or
- value inside. It is empty. To give our variable a value (initialize it)
- use the '=' sign:
-
- variableName = 'Hello world!';
-
- We also can create and give value to a variable in one step, as follows:
-
- var newVariable = 1;
-
- As you can notice, we can give different types of values to our variables -
- strings, numbers, booleans etc.
-
-
- Strings - set of characters, word(s), or phrases that we wrap in quotes, like
- 'hello world!'
- Numbers - either integers or floats(decimals). Not wrapped in quotes
- Boolean - it represents logical values - True or False
-*/
-
-// TODO: Now create two empty variables named numberOne and numberTwo.
-
-
-
-
-/*
- You also can use your variables to represent information that they have inside.
-
- Example:
-
- var hello = 'Hello World';
- alert(hello);
-
- This will pop-up an alert box with the string 'Hello World!'
-*/
-
-// TODO: Create 2 variables, 1 with your name and the 2nd with your age and display
-// them with an alert pop-up box.
-
-
-
-
-
-// TODO: Don't forget to comment out alerts if you don't want them to pop-up
-// every time.
-
-
-/*
- Arithmetic Operators
- ====================
-
- There are a bunch of different operators in programming. We will look
- through arithmetical operators now. JavaScript includes several standard
- arithmetical operators (+, -, /, *) that you can use to do maths with your
- numbers.
-
- Example:
-
- var sumOfNumbers = 1 + 3;
- alert(sumOfNumbers);
-
- This will pop-up an alert box with the number 4.
- TIP: Note how we didn't put 1 and 3 in quotes, because they are numbers.
-*/
-
-// TODO: Create 3 variables:
-//
-// * 1st variable named ten with value 10 inside
-// * 2nd variable named three with value 3
-// * And finally 3rd variable named multipleOfNumbers that will be equal to
-// 1st variable multiplied by the 2nd variable. And in the end display the
-// value of multipleOfNumbers.
-
-
-
-
-
-/*
- Functions
- =========
-
- A function is like a blueprint, an action that you want to do.
- It takes some input variables called arguments, does some manipulation on
- it and returns the output. Use the keyword 'return' to define the return value.
-
- To create a function use the following format:
-
- function functionName(argument) {
- return argument * 2;
- };
-
- This function will take one argument and return the argument multiplied by
- 2. Our function won't actually run unless we 'call' it.
-
- To 'call' the function we write:
-
- functionName(10);
-
- Now we will call our function with argument that is 10. And our function
- will return us 20. To see what our function returns us we can console.log
- it, for example:
-
- console.log(functionName(10));
-*/
-
-// TODO: It's your turn to create a function.
-// Step 1 - Name it 'add' and pass in two arguments (num1 and num2)
-// - To pass multiple arguments into function we separate them with a comma.
-// Step 2 - This function should return us a sum of num1 and num2.
-// Step 3 - Call the function passing numbers 2 and 3 as arguments.
-// - To see the result you can console.log it.
-
-
-
-
-
-
-// TODO: Great, you made it! Now let's do another function named 'subtract' and
-// pass 2 arguments num1 and num2.
-// Call it with the numbers 5 and 1 and console.log the result.
-
-// PS: Do you know that instead of numbers you can create variables that store
-// those numbers and pass them as an arguments to your function? Try it out!
-
-
-
-
-
-
-
-
-/*
- If-Else Statements
- ==================
-
- What if we want our program to make a decision about which function it
- should run? In this case we can use conditions.
- If you have a TV you can watch it in the evening. If not, you might do
- something else. It's the same with code. You can give an 'if' condition to a machine to
- make a decision about what part of the code to run.
-
- Structure:
-
- if (condition) {
- do this
- } else {
- do something else
- }
- Example:
- var number = 7;
- if (number > 7) {
- console.log('Our number is bigger than 7');
- } else {
- console.log('Our number is smaller than 7');
- }
-*/
-
-/*
- Comparison Operators
- ====================
-
- Earlier we introduced JavaScript's arithmetic operators. Now comes time to
- introduce you to the next set. JavaScript's Comparison operators' are used
- to compare values(>, <, <=, =>, ==, !=). Most of them you know from math
- classes in school, some of them can be new for you, so '==' is checking
- equality, if two values are equal.
-
- '!=' - Checks if they are not equal.
-
- PS: Don't mix up '=' and '==' as they have different meanings.
-*/
-
-// TODO: So now we have 2 functions from the previous task - add and subtract.
-// Let's tell the machine to decide what action to run depending on the arithmetical
-// operator(+,-,/, * etc). If the operator is '+', we should use the add function, else we should use the
-// - subtract function.
-//
-// Step 1 - Create a variable called operator and let it be equal to '-'.
-// Step 2 - Create an if/else statement based on what operator we have.
-//
-// If we have an operator equal to '+', we call add function with any two numbers,
-// else the subtract function with any 2 numbers.
-//
-// Don't forget to console.log it to see the result.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*
- if - else if - else
- ===================
-
- Hmm, but what if we have 4 arithmetical operations in our calculator? Well,
- we can use an if - else if - else structure.
-
- Example:
-
- var number = 7;
- if (number > 7) {
- console.log('Our number is bigger then 7');
- } else if (number < 7) {
- console.log('Our number is smaller then 7');
- } else {
- console.log('Our number is equal to 7');
- }
-*/
-
-
-// TODO: Let's create 2 more functions and name them divide and multiply. After
-// that let's extend our 'if else' check that we already created by checking if
-// it is equal to '/' - call 'divide' function, if it is '*' call multiply
-// function, else console.log - "Sorry, we don't know this operator".
-
-
-
-
-
-
-
-
-
-
-
-///////////////////////////////////////////////////////////////////////////
-// Congratulations! You have finished Part 1 of JavaScript Basics! //
-// Stand up, stretch your legs, and celebrate your achievement. //
-// The next step will be following the instructions in the level2.js file//
-///////////////////////////////////////////////////////////////////////////
diff --git a/js/level2.js b/js/level2.js
deleted file mode 100644
index cd98739..0000000
--- a/js/level2.js
+++ /dev/null
@@ -1,316 +0,0 @@
-// Level2
-
-/*
- Introduction
- ============
-
- Welcome to level 2! It is time to interact with HTML.
-
- Hyper Text Markup Language (HTML) files are the backbone of the internet.
- Every website you visit is loaded first as an HTML file.
-
- We won't talk too much about HTML today. What you need to know is that HTML
- files function as a sort of skeleton for your page. Our index.html file
- combines all the files from this project together so that you can open them
- in your web browser.
-
- This project has a file called index.html. At the bottom of index.html you
- will see the following tag:
-
- <script src="js/level1.js"></script>
-
- That is how you have been running the level1.js file. Now change level1.js
- to this file — level2.js.
-
- Now you are ready to start!
-*/
-
-/*
- Arrays
- ======
-
- An array is an ordered list of values. It can keep any number of values
- inside. And also any type of values — numbers, strings, objects.
-
- Example:
-
- var animals = ['cat', 'dog', 'horse'];
- var randomThings = [2, 'book', 'today is Saturday', 10];
- var numbers = [1, 2, 8, 19];
-*/
-
-// TODO: Create your own array, named favouriteFood, and write in a couple of
-// things you like.
-
-
-
-
-
-/*
- Array Length
- ============
-
- We can easily check how many items we have in our array with a property:
- '.length'
-
- Example:
- var randomThings = [2, 'book', 'today is Saturday', 10];
- console.log(randomThings.length); // We will get 4.
-*/
-
-// TODO: Check how many values you have in your array favouriteFood.
-// console.log the result.
-
-
-
-
-
-
-/*
- Array Usage
- ===========
-
- It's useful to keep all of these values in one place. But what if we want
- to use only 1 item from the array?
-
- We can get them out using 'bracket notation'. Thanks to a guy named Edsger
- Dijkstra*, array indices start counting from 0. The usage looks like this.
-
- Example:
-
- var randomThings = [2, 'book', 'today is Saturday', 10];
- var firstItem = randomThings[0];
- var secondItem = randomThings[1]; and so on
-
- * https://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EWD831.html
-*/
-
-// TODO: Get third element from your array favouriteFood and console.log it.
-
-
-
-
-
-
-
-/*
- Changing Values in Arrays
- =========================
-
- We also can replace values inside of the arrays by assigning a new value to
- a specific index.
-
- Example:
-
- var animals = ['cat', 'dog', 'horse'];
-
- // let's replace 'dog' with 'fish'
- animals[1] = 'fish';
-
- // now our animals array will be ['cat', 'fish', 'horse']
-*/
-
-// TODO: Take your array favouriteFood and replace the first value with anything
-// else.
-// console.log the whole array to check.
-// Don't forget, index positions start from 0!
-
-
-
-
-
-
-
-/*
- Array.push()
- ============
-
- If you want to add new values to an existing array you can use the method
- '.push()'. Push will add a new value to the end of the array.
-
- Example:
-
- var animals = ['cat', 'dog', 'horse'];
- animals.push('rabbit');
-
- // animals will be ['cat', 'dog', 'horse','rabbit']
-*/
-
-// TODO: Let's extend your list of favouriteFood and add one more value to it.
-// console.log list your favouriteFood and check it.
-
-
-
-
-
-
-
-
-/*
- Loops
- =====
-
- People have always been lazy, but sometimes it moves progress forward! We
- don't like to repeat the same boring actions again and again, so we look
- for ways to avoid it.
-
- Programming is the same. For example, if I want to print 'JavaScript is
- awesome!' 10 times, what are my options? Of course, I can type ten lines of
- code repeating the same instruction, but I can also tell the computer to
- repeat it instead of me writing it 10 times!
-
- For this we have loops.
-
- Each loop should have three main things:
- - a starting point
- - a condition (finishing point)
- - a counter (a step)
-
- If you miss one of these, you can get into an infinite loop!
-
- Let's look into different looping structures.
-*/
-
-
-/*
- While Loops
- ===========
-
- 'While' loop will do an action forever until some condition is met.
-
- Example:
-
- // starting point
- var number = 0;
-
- while (number < 10) {
- // 'less than 10'' is a condition (finishing point)
-
- console.log('JavaScript is awesome!');
-
- number = number + 1;
- // + 1 is a counter/size of the step
- }
-*/
-
-// TODO: Using a 'while loop', tell your computer to log the numbers from
-// ten to one.
-
-
-
-
-
-
-
-
-/*
- For Loops
- =========
-
- 'For loops are very similar to the 'while loop'. In a for loop, you
- declare a counter in the statement.
-
- Example:
-
- var i;
- for (i = 0; i <= 5; i = i + 1) { // (starting point; condition; step)
- console.log('Purr');
- }
-*/
-
-// TODO: Log every 3rd number from three to 22 using a 'for loop'.
-
-
-
-
-
-
-
-/*
- Iterating Through Arrays
- ========================
-
- Now we know about loops, I want to use each value from my animal list
- and express my love for each. How shall I do it?
-
- We can use a 'for loop' to iterate through our array and get each value
- from it.
-
- Note: i++ is another way of writing i = i+1.
-
- Example:
-
- var animals = ['cats', 'dogs', 'horses'];
- for(var i = 0; i < animals.length; i++){
- console.log('I love ' + animals[i]);
- }
-*/
-
-// TODO: Try it out with your favouriteFood array.
-
-
-
-
-
-
-
-
-
-
-
-/*
- Loops and Logic
- ===============
-
- Let's bring loops together with the if/else statements we learned in
- level 1, and make something interesting.
-
- Let's count from 10 to 0 and log all the numbers. But, when we get to the
- middle (5) print 'Woohoo, we are in the middle!'.
-
- Example:
-
- for (var i = 10; i >= 0; i = i - 1) {
- if (i === 5) {
- console.log('WooHoo, we are in the middle!');
- } else {
- console.log(i);
- }
- }
-*/
-
-// TODO: Time has come for a classic exercise — 'FizzBuzz'.
-
-// Count from 1 to 50 and print the numbers out:
-//
-// * If a number is a multiple of three, print 'Fizz'.
-// * If it's a multiple of 5, print 'Buzz'.
-// * If it's a multiple of 3 and 5, print 'FizzBuzz'.
-// * For everything else, print the number itself.
-
-// P.S. You may wish to use arithmetic operator remainder (%):
-// It calculates the remainder when dividing.
-//
-// 10 % 3 = 1 — in 10 we have 3*3 + 1
-// 16 % 4 = 0 — in 16 we have 4*4
-// 19 % 4 = 3 — in 19 we have 4*4 + 3 etc
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-////////////////////////////////////////////////////////////////////////////
-// Congratulations! You have finished Part 2 of JavaScript Basics! //
-// Stand up, stretch your legs, and celebrate your achievement. //
-// The next step will be following up the instructions in level3.js file. //
-////////////////////////////////////////////////////////////////////////////
diff --git a/js/level3.js b/js/level3.js
deleted file mode 100644
index 68f85cd..0000000
--- a/js/level3.js
+++ /dev/null
@@ -1,299 +0,0 @@
-// Level 3
-
-/*
- Introduction
- ============
-
- WooHoo, you got so far on your first day! Great!
-
- But we still have more things for you. First of all, open index.html, and
- replace our script from level2.js to our current file — level3.js.
-
- P.S. If you want to use multiple js files simultaneously, simply add more
- script tags.
-*/
-
-/*
- Lets talk a little more about HTML, CSS, and how we can interact with them
- in JavaScript.
-
-
- Hypertext Markup Language (HTML)
- --------------------------------
- As you noticed, HTML is divided into elements that look like this:
-
- <header></header>
- <p></p>
- etc
-
- We call these "tags". Each element on the page has an opening and closing
- tag. (NOTE: Some tags are self-closing like <img>.)
-
- The outermost tag in every HTML file is <html>.
-
- Inside the <html> tag you will find a <head> and <body> tag.
-
- In <head> we keep meta information, the page title and links to css files.
- <body> contains our actual content.
-
- For a full list of HTML tags, you can refer to this listing:
- http://htmldog.com/references/html/tags/
-
- HTML tags may contain attributes:
- <div class="settings"></div>
-
- This div has an attribute named class that has a value: 'settings'.
-
-
- Cascading Style Sheets (CSS)
- ----------------------------
- CSS describes how HTML elements look.
-
- CSS files are comprised of 'declaration blocks'. Each declaration block is
- composed of a selector and a set of visual style rules. A declaration looks
- like this:
-
- [selector] {
- style-name: value;
- style-name: value;
- style-name: value;
- }
-
- Selectors specify which elements the visual styles are applied to.
-
- The most basic selectors refer to elements by their tag-name. They look
- like this:
-
- body {
- background-color: white;
- }
-
- Selectors can also refer to elements by their class attribute like this:
-
- .settings {
- margin: 0;
- }
-
- or IDs, like this:
-
- #logo {
- text-align: center;
- }
-
- The list of css properties is huge, you can read more here, if you're
- interested:
- https://www.w3.org/TR/CSS21/propidx.html
-
- Don't worry, you don't need to remember all of this immediately!
-*/
-
-/*
- Phew, lots of new things. Let's come back to javaScript and see how we can
- interact with HTML.
-*/
-
-
-/*
- Accessing Elements
- ==================
-
- Document Object Model (DOM)
- ---------------------------
- The DOM is the javascript representation of the active HTML file. The DOM
- is available under a special global variable called 'document'. We can get
- specific nodes (page elements) with the DOM method: 'querySelector'.
-
- Let's get our twitter link from the page.
-
- Example:
-
- var ourTwitter = document.querySelector('.twitter');
- // We can store page elements in variables, just like any other value!
-*/
-
-// TODO: Now it's your turn — get the h1 tag from the page and store it into a
-// variable named ourTitle.
-// console.log it and see what you get!
-
-
-
-
-
-
-
-
-
-
-/*
- Getting Similar Elements
- ========================
-
- We also can get all elements with the same tag. In our footer, we have an
- unordered list (<ul>), with three list items (<li>) inside. Let's get all
- of them.
-
- Example:
-
- // Will get all <li> from the page
- var mediaLinks = document.querySelectorAll('li');
-*/
-
-
-// TODO: Get all <li> elements from the page in a variable named mediaLinks.
-
-
-
-
-// TODO: Now console.log mediaLinks.length
-
-
-
-
-// TODO: Do you remember loops from level 2? Using this knowledge, iterate
-// through each mediaLinks item and console.log it.
-
-
-
-
-
-
-
-
-
-/*
- Ok, so far so good. But what if we want only the text from our 'h1' tag?
- Page elements have another property for this: '.textContent'
-
- Example:
-
- ourTwitter.textContent;
- // We will get text 'Twitter: @NodeGirlsSydney @NodeGirlsMelb'
-*/
-
-
-// TODO: Get the content of 'h1' element and console.log it.
-
-
-
-
-
-
-
-
-
-
-/*
- Editing Page Content
- ====================
-
- We can change the content of the tags using the same .textContent property.
-
- Example:
-
- ourTwitter.textContent = '@ButenkoMe';
- console.log(ourTwitter.textContent);
- // guess what we will see on the page and in the console?
-*/
-
-
-// TODO: Make up a new title! Change the content of our 'h1' to anything you
-// like.
-
-
-
-
-
-/*
- Editing Attributes
- ==================
-
- We can also change and set attributes on our elements.
-
- Example:
-
- var ourTwitter = document.querySelector('.twitter');
- ourTwitter.id = "surprise";
-*/
-
-
-// TODO: Update the value of the 'src' attribute of our img tag to
-// "img/kittens.jpeg"
-
-
-
-
-
-/*
- Editing Styles
- ==============
-
- Let's change some styles. Page elements have a '.style' property. We can
- assign styles to the style property using the same names as in CSS files.
-
- (If a CSS property name has '-' in the name — like font-size — then the
- hyphen will be deleted and the next word starts with a capital instead —
- fontSize. This pattern of naming is called CamelCase.)
-
- Example:
-
- var ourTwitter = document.querySelector('.twitter');
- ourTwitter.style.backgroundColor = 'white';
-*/
-
-
-// TODO: Get any element on the page and change some styles for it.
-
-
-
-
-
-
-
-/*
- Creating New Nodes (Elements)
- =============================
-
- The document object also provides ways to create nodes from scratch:
-
- document.createElement(tagName); --> create the element
- document.createTextNode(text); --> what text it should contain
- document.appendChild(node); --> append it to the document
-
- Example:
-
- var pageNode = document.querySelector('body');
- var newParagraph = document.createElement('p');
- var paragraphText = document.createTextNode('Squee!');
- newParagraph.appendChild(paragraphText);
- pageNode.appendChild(newParagraph);
-*/
-
-
-// TODO: Well, do you still have kittens on your screen? I like both logo and
-// kittens. Let's create a new image that sources our original logo file, and
-// put it into a header.
-//
-// P.S. You also can give styles to the new node that you create.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-////////////////////////////////////////////////////////////////////////
-// Congratulations! You have finished Part 3 of JavaScript Basics! //
-// Stand up, stretch your legs, and celebrate your achievement. //
-// I believe you deserve some sweets today! //
-////////////////////////////////////////////////////////////////////////