diff --git a/index.html b/index.html
index 39c6f2a7a..06cc8ec37 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,7 @@ <h1 class="name">nodeschool</h1>
<p class="subtitle" data-i18n="index-header-top">Open source workshops that teach web software skills. Do them on your own or at a workshop nearby.</p>
<nav role="navigation">
<ul class="nav">
+ <li><a href="start.html" data-i18n="menu-start">Getting Started</a></li>
<li><a href="#workshoppers" data-i18n="menu-tutorials">Tutorials</a></li>
<li><a href="events.html" data-i18n="menu-events">Events</a></li>
<li><a href="chapters.html" data-i18n="menu-chapters">Chapters</a></li>
@@ -59,7 +60,7 @@ <h1 class="name">nodeschool</h1>
<li><a href="host.html" data-i18n="menu-host">Host</a></li>
</ul>
</nav>
- <p><span data-i18n="index-header-bottom">Get started by installing one of our</span> <a class="big-link" href="#workshopper-list">core workshops</a> <span data-i18n="index-header-bottomA">or subscribe to our free </span><a data-i18n="index-header-bottomB" class="big-link" href="https://tinyletter.com/nodeschool" target="_blank">email newsletter</a>.</p>
+ <p><span data-i18n="index-header-bottom">Get started by reading our</span> <a class="big-link" href="start.html#main">intro guide</a> <span data-i18n="index-header-bottomA">or subscribe to our free </span><a data-i18n="index-header-bottomB" class="big-link" href="https://tinyletter.com/nodeschool" target="_blank">email newsletter</a>.</p>
</div>
</div>
</header>
@@ -161,11 +162,7 @@ <h2 class="big-heading" data-i18n="index-workshopper-header">Workshoppers</h2>
<div class="third">
<div id="get-going">
<h3 data-i18n="index-get-going-header">Get Going —</h3>
- <p><span data-i18n="index-get-going-info">You’ll need</span> <a href="http://nodejs.org">Node.js</a> <span data-i18n="index-get-going-info2">on your computer to get started
- with each of these. Then use</span> <a href="http://npmjs.org">npm</a> <span data-i18n="index-get-going-info3">(it comes with Node) to install each
- module with the command below it. Once installed,
- simply type the workshopper’s name to launch.</span></p>
- <p><span data-i18n="index-get-going-editor">You will also need a</span> <strong data-i18n="index-get-going-editor2">Text Editor</strong><span data-i18n="index-get-going-editor3">, if you don't have one already, you may want one for editing code. A few options:</span> <a href="http://www.atom.io">Atom</a><span data-i18n="index-get-going-editor4">,</span> <a href="http://www.sublimetext.com/3">Sublime Text</a><span data-i18n="index-get-going-editor5">,</span> <a href="http://macromates.com/download">Textmate</a><span data-i18n="index-get-going-editor6">,</span> <a href="http://brackets.io/">Brackets</a><span data-i18n="index-get-going-editor7">.</span></p>
+ <p>You’ll need a few essensials before you can run your first Workshopper. Check out the <a href="start.html">Getting Started</a> guide to get going.</p>
</div>
</div>
</div>
@@ -177,6 +174,7 @@ <h3 data-i18n="index-get-going-header">Get Going —</h3>
<div class="third">
<h3 data-i18n="index-workshoppers-core-header">Core</h3>
<p data-i18n="index-workshoppers-core-info">These workshoppers focus on essential skills for working with Node.js.</p>
+ <p>If you have never used Node.js before, you probably need to install Node.js first - In that case check out the <a href="start.html">Getting Started</a> guide.</p>
<p><span data-i18n="index-workshoppers-core-link-pre">Stuck? Ask a question in the</span> <a href="https://github.com/nodeschool/discussions/issues/new" target="_blank" data-i18n="index-workshoppers-core-link-text">discussion</a><span data-i18n="index-workshoppers-core-link-post">.</span></p>
</div>
<div class="third">
diff --git a/native-modules.html b/native-modules.html
new file mode 100644
index 000000000..a350b2465
--- /dev/null
+++ b/native-modules.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html class="native">
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="shortcut icon" href="/favicon.ico">
+ <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro" rel="stylesheet" type="text/css">
+ <link rel="stylesheet" href="/mapbox.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>NodeSchool - Installing Native Modules</title>
+ </head>
+ <body class="native">
+ <header>
+ <div class="container">
+ <div class="full">
+ <a href="index.html"><img class="logo" src="/images/schoolhouse.svg" alt="nodeschoolhouse"></a>
+ <ul class="nav">
+ <li><a href="index.html" data-i18n="menu-index">Home</a></li>
+ <li><a href="start.html" data-i18n="menu-start">Getting Started</a></li>
+ <li><a href="events.html" data-i18n="menu-events">Events</a></li>
+ <li><a href="chapters.html" data-i18n="menu-chapters">Chapters</a></li>
+ <li><a href="about.html" data-i18n="menu-about">About</a></li>
+ </ul>
+ </div>
+ </div>
+ </header>
+ <div id="main" name="main" role="main">
+ <div class="container" style="background-color: #fff;">
+ <div class="full">
+ <h1 data-i18n="native-h1">Installing Native Modules</h1>
+ <p data-i18n="native-header">Some npm modules require native dependencies to be compiled when they are being installed (a.k.a. "native modules"). This guide will help you prepare your system for compiling native modules.</p>
+ <nav>
+ <ul class="inner-nav">
+ <li><a href="#windows">Windows</a></li>
+ <li><a href="#osx">OS X</a></li>
+ <li><a href="#linux">Linux</a></li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="container" id="windows">
+ <div class="third">
+ <h3>Windows</h3>
+ </div>
+ <div class="two-thirds">
+ <p>You need to install Microsoft Visual Studio</p>
+ </div>
+ </div>
+
+ <div class="container" id="osx">
+ <div class="third">
+ <h3>OS X</h3>
+ </div>
+ <div class="two-thirds">
+ <p>You will need the Command Line Tool package from Apple to be able to compile and install native modules. As of OS X 10.9 (Mavericks, Yosemite, El Capitan and newer) just run the command below which will guide you through installing the Command Line Tool package:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>xcode-select --install</code>
+ </div>
+ </div>
+ <p>If you have an earlier version of OS X, check out <a href="http://osxdaily.com/2012/07/06/install-gcc-without-xcode-in-mac-os-x/">this guide</a> instead.</p>
+ </div>
+ </div>
+
+ <div class="container" id="linux">
+ <div class="third">
+ <h3>Linux</h3>
+ </div>
+ <div class="two-thirds">
+ <p>You will need the <code>build-essential</code> package to be able to compile native modules. Follow the guide for your Linux distribution below to install it:</p>
+ <h4>Ubuntu</h4>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>sudo apt-get install -y build-essential</code>
+ </div>
+ </div>
+ <h4>Debian</h4>
+ <p>Run the following command as root</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>apt-get install -y build-essential</code>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <div class="container" style="background-color: #fff;">
+ <footer>
+ <div class="third">
+ <p><strong>nodeschool.io</strong></p>
+ <small>Photos by <a href="https://www.flickr.com/photos/matthewbergman" target="_blank">Matthew Bergman</a></small>
+ </div>
+ <div class="two-thirds">
+ <ul>
+ <li><strong data-i18n="footer-contact-header">Contact</strong></li>
+ <li><a href="https://twitter.com/nodeschool" target="_blank">t/@nodeschool</a></li>
+ <li><a href="https://github.com/nodeschool" target="_blank">gh/nodeschool</a></li>
+ </ul>
+ <ul>
+ <li><strong data-i18n="footer-contribute-header">Contribute</strong></li>
+ <li><a href="https://github.com/nodeschool/discussions/issues/new" target="_blank" data-i18n="footer-contribute-question">Open an Issue</a></li>
+ <li><a href="https://github.com/nodeschool/discussions/issues" target="_blank" data-i18n="footer-contribute-answer">Answer a Question</a></li>
+ </ul>
+ <ul>
+ <li><strong data-i18n="footer-about-header">About</strong></li>
+ <li><a href="building-workshops.html" data-i18n="footer-about-build">Build a workshopper</a></li>
+ <li><a href="host.html" data-i18n="footer-about-host">Host a workshop</a></li>
+ </ul>
+ </div>
+ </footer>
+ </div>
+
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+ <script type="text/javascript" src="/js/dependencies.js"></script>
+ <script>
+ !function(s,c,h,O,o,l){s.GoogleAnalyticsObject=h;s[h]||(s[h]=function(){
+ (s[h].q=s[h].q||[]).push(arguments)});s[h].l=+new Date;o=c.createElement(O);
+ l=c.getElementsByTagName(O)[0];o.src='//www.google-analytics.com/analytics.js';
+ l.parentNode.insertBefore(o,l)}(window,document,'ga','script');
+
+ ga('create', 'UA-49267600-1', 'nodeschool.io');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html>
diff --git a/start.html b/start.html
new file mode 100644
index 000000000..570206925
--- /dev/null
+++ b/start.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html class="start">
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="/style.css">
+ <link rel="shortcut icon" href="/favicon.ico">
+ <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro" rel="stylesheet" type="text/css">
+ <link rel="stylesheet" href="/mapbox.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>NodeSchool - Getting Started</title>
+ </head>
+ <body class="start">
+ <header>
+ <div class="container">
+ <div class="full">
+ <a href="index.html"><img class="logo" src="/images/schoolhouse.svg" alt="nodeschoolhouse"></a>
+ <ul class="nav">
+ <li><a href="index.html" data-i18n="menu-index">Home</a></li>
+ <li class="current-page"><a href="start.html" data-i18n="menu-start">Getting Started</a></li>
+ <li><a href="index.html#workshopper-list" data-i18n="menu-tutorials">Tutorials</a></li>
+ <li><a href="events.html" data-i18n="menu-events">Events</a></li>
+ <li><a href="chapters.html" data-i18n="menu-chapters">Chapters</a></li>
+ <li><a href="about.html" data-i18n="menu-about">About</a></li>
+ </ul>
+ </div>
+ </div>
+ </header>
+ <div id="main" name="main" role="main">
+ <div class="container" style="background-color: #fff;">
+ <div class="full">
+ <h1 data-i18n="start-h1">Getting Started</h1>
+ <p data-i18n="start-header">Follow these simple steps to get your computer ready for running the NodeSchool chapters. Choose the instructions matching your operating system below.</p>
+ <nav>
+ <ul class="inner-nav">
+ <li><a href="#windows">Windows</a></li>
+ <li><a href="#osx">OS X</a></li>
+ <li><a href="#linux">Linux</a></li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="container" id="windows">
+ <div class="third">
+ <h3>Windows</h3>
+ </div>
+ <div class="two-thirds">
+ <h4>Node.js</h4>
+ <p>First download and install the latest version of Node.js from <a href="https://nodejs.org">nodejs.org</a>.</p>
+ <p>You will use <a href="https://www.npmjs.com">npm</a> to install each Workshopper. Npm will be installed automatically when you install Node, so you don't need to install it yourself.</p>
+ <p>You will be using the Command Prompt application in Windows to install and run the Workshoppers. To start the Command Prompt, open the Start menu, select "Run", type <code>cmd</code> in the field and hit Enter (Windows 8 users should search for and run <code>cmd.exe</code>).</p>
+ <p>The first command you should run in the Command Prompt after installing Node.js is shown below. It's just to check that everything is working as expected before you continue:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>node --version</code>
+ </div>
+ </div>
+ <p>This should output the version of Node.js that have been installed. It should show version 0.12 or above.</p>
+ <p>Next, let's check that npm is working:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>npm --version</code>
+ </div>
+ </div>
+ <p>Check that it correctly outputs a version number.</p>
+ <h4>Native Modules</h4>
+ <p>Some Workshoppers require your computer to be able to compile native modules. Check out the <a href="native-modules.html">Installing Native Modules</a> page for details if you run into problems.</p>
+ <h4>Code Editor</h4>
+ <p><span data-i18n="index-get-going-editor">You will also need a</span> <strong data-i18n="index-get-going-editor2">Text Editor</strong><span data-i18n="index-get-going-editor3">, if you don't have one already, you may want one for editing code. A few options:</span> <a href="http://www.atom.io">Atom</a><span data-i18n="index-get-going-editor4">,</span> <a href="http://www.sublimetext.com/3">Sublime Text</a><span data-i18n="index-get-going-editor5">,</span> <a href="http://brackets.io/">Brackets</a><span data-i18n="index-get-going-editor7">.</span></p>
+ <h4>Start learning</h4>
+ <p>If you completed the steps above, you are now ready <a href="index.html#workshopper-list">for your first Workshopper.</a>
+ </div>
+ </div>
+
+ <div class="container" id="osx">
+ <div class="third">
+ <h3>OS X</h3>
+ </div>
+ <div class="two-thirds">
+ <h4>Node.js</h4>
+ <p>First download and install the latest version of Node.js from <a href="https://nodejs.org">nodejs.org</a>. Don't use nvm (Node Version Manager) or similar unless you know what you are doing or are ready to use a lot of time getting things to work properly.</p>
+ <p>You will use <a href="https://www.npmjs.com">npm</a> to install each Workshopper. Npm will be installed automatically when you install Node, so you don't need to install it yourself.</p>
+ <p>You will be using the Terminal application in OS X to install and run the Workshoppers. You will find it in the sub-folder "Utilities" inside your "Applications" folder. The first command you should run in the Terminal after installing Node.js is shown below. It's just to check that everything is working as expected before you continue:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>node --version</code>
+ </div>
+ </div>
+ <p>This should output the version of Node.js that have been installed. It should show version 0.12 or above.</p>
+ <p>Next, let's check that npm is working:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>npm --version</code>
+ </div>
+ </div>
+ <p>Check that it correctly outputs a version number.</p>
+ <h4>Native Modules</h4>
+ <p>Some Workshoppers require your computer to be able to compile native modules. Check out the <a href="native-modules.html">Installing Native Modules</a> page for details if you run into problems.</p>
+ <h4>Code Editor</h4>
+ <p><span data-i18n="index-get-going-editor">You will also need a</span> <strong data-i18n="index-get-going-editor2">Text Editor</strong><span data-i18n="index-get-going-editor3">, if you don't have one already, you may want one for editing code. A few options:</span> <a href="http://www.atom.io">Atom</a><span data-i18n="index-get-going-editor4">,</span> <a href="http://www.sublimetext.com/3">Sublime Text</a><span data-i18n="index-get-going-editor5">,</span> <a href="http://macromates.com/download">Textmate</a><span data-i18n="index-get-going-editor6">,</span> <a href="http://brackets.io/">Brackets</a><span data-i18n="index-get-going-editor7">.</span></p>
+ <h4>Start learning</h4>
+ <p>If you completed the steps above, you are now ready <a href="index.html#workshopper-list">for your first Workshopper.</a>
+ </div>
+ </div>
+
+ <div class="container" id="linux">
+ <div class="third">
+ <h3>Linux</h3>
+ </div>
+ <div class="two-thirds">
+ <h4>Node.js</h4>
+ <p>First install the latest version of Node.js. We normally don't recommend using your normal package manager or nvm (Node Version Manager) - instead run the commands related to your Linux distribution below in your terminal.</p>
+ <p>You will use <a href="https://www.npmjs.com">npm</a> to install each Workshopper. Npm will be installed automatically when you install Node, so you don't need to install it yourself.</p>
+ <h5>Ubuntu</h5>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>
+ curl -sL https://deb.nodesource.com/setup_0.12 | sudo -E bash -<br />
+ sudo apt-get install -y nodejs
+ </code>
+ </div>
+ </div>
+ <h5>Debian</h5>
+ <p>Run the following commands as root</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>
+ curl -sL https://deb.nodesource.com/setup_0.12 | bash -<br />
+ apt-get install -y nodejs
+ </code>
+ </div>
+ </div>
+ <p>After you've installed Node.js, let's just verify that it have been installed correctly:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>node --version</code>
+ </div>
+ </div>
+ <p>This should output the version of Node.js that have been installed. It should show version 0.12.x.</p>
+ <p>Next, let's check that npm is working:</p>
+ <div class="term">
+ <div class="chrome">
+ <span class="btn btn-term close"></span>
+ <span class="btn btn-term min"></span>
+ <span class="btn btn-term max"></span>
+ </div>
+ <div class="shell shell-narrow">
+ <code>npm --version</code>
+ </div>
+ </div>
+ <p>Check that it correctly outputs a version number.</p>
+ <h5>Troubleshooting</h5>
+ <p>If you run into issues, you might be able to find a solution in the <a href="https://github.com/nodesource/distributions">NodeSource distributions repo</a>. If you still can't get it to work, you can download and install Node.js directly from <a href="https://nodejs.org">nodejs.org</a>.</p>
+ <h4>Native Modules</h4>
+ <p>Some Workshoppers require your computer to be able to compile native modules. Check out the <a href="native-modules.html">Installing Native Modules</a> page for details if you run into problems.</p>
+ <h4>Code Editor</h4>
+ <p><span data-i18n="index-get-going-editor">You will also need a</span> <strong data-i18n="index-get-going-editor2">Text Editor</strong><span data-i18n="index-get-going-editor3">, if you don't have one already, you may want one for editing code. A few options:</span> <a href="http://www.atom.io">Atom</a><span data-i18n="index-get-going-editor4">,</span> <a href="http://www.sublimetext.com/3">Sublime Text</a><span data-i18n="index-get-going-editor5">,</span> <a href="http://brackets.io/">Brackets</a><span data-i18n="index-get-going-editor7">.</span></p>
+ <h4>Start learning</h4>
+ <p>If you completed the steps above, you are now ready <a href="index.html#workshopper-list">for your first Workshopper.</a>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <div class="container" style="background-color: #fff;">
+ <footer>
+ <div class="third">
+ <p><strong>nodeschool.io</strong></p>
+ <small>Photos by <a href="https://www.flickr.com/photos/matthewbergman" target="_blank">Matthew Bergman</a></small>
+ </div>
+ <div class="two-thirds">
+ <ul>
+ <li><strong data-i18n="footer-contact-header">Contact</strong></li>
+ <li><a href="https://twitter.com/nodeschool" target="_blank">t/@nodeschool</a></li>
+ <li><a href="https://github.com/nodeschool" target="_blank">gh/nodeschool</a></li>
+ </ul>
+ <ul>
+ <li><strong data-i18n="footer-contribute-header">Contribute</strong></li>
+ <li><a href="https://github.com/nodeschool/discussions/issues/new" target="_blank" data-i18n="footer-contribute-question">Open an Issue</a></li>
+ <li><a href="https://github.com/nodeschool/discussions/issues" target="_blank" data-i18n="footer-contribute-answer">Answer a Question</a></li>
+ </ul>
+ <ul>
+ <li><strong data-i18n="footer-about-header">About</strong></li>
+ <li><a href="building-workshops.html" data-i18n="footer-about-build">Build a workshopper</a></li>
+ <li><a href="host.html" data-i18n="footer-about-host">Host a workshop</a></li>
+ </ul>
+ </div>
+ </footer>
+ </div>
+
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+ <script type="text/javascript" src="/js/dependencies.js"></script>
+ <script>
+ !function(s,c,h,O,o,l){s.GoogleAnalyticsObject=h;s[h]||(s[h]=function(){
+ (s[h].q=s[h].q||[]).push(arguments)});s[h].l=+new Date;o=c.createElement(O);
+ l=c.getElementsByTagName(O)[0];o.src='//www.google-analytics.com/analytics.js';
+ l.parentNode.insertBefore(o,l)}(window,document,'ga','script');
+
+ ga('create', 'UA-49267600-1', 'nodeschool.io');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html>
diff --git a/style.css b/style.css
index b0fdf0976..df4a5c5b4 100644
--- a/style.css
+++ b/style.css
@@ -152,6 +152,7 @@ ul.nav-lang li.selected {text-decoration: none; color: #666;}
.term .chrome .btn{ border:solid 2px #777;}
.term{ display: block; border-radius: 4px; margin-bottom:10px; text-align: left; }
.term .shell{ min-height:130px; overflow:hidden; }
+.term .shell-narrow{ min-height:auto; }
.term .chrome{ height:34px; padding-left:4px; border-top:0 none; border-right:0 none; border-left:0 none; }
.term .chrome:before{ content:" "; display:inline-block; height:100%; vertical-align:middle; }
.term .chrome .btn{ display:inline-block; vertical-align:middle; width:8px; height:8px; border-radius:100%; }