diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 678effc..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,6 +0,0 @@
-*~
-*.pyc
-*.swp
-*.csv
-.DS_Store
-node_modules/*
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/OPcx1E5O.png b/fundamentals/codelabs/your-first-multi-screen-site/OPcx1E5O.png
deleted file mode 100644
index 33c3ff4..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/OPcx1E5O.png and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addcontent.html b/fundamentals/codelabs/your-first-multi-screen-site/addcontent.html
deleted file mode 100644
index b72bac3..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addcontent.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-     <title>CS256: Mobile Web Development - adding content</title>
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not 
-          sure how to transform your traditional desktop-focused web apps 
-          into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what 
-          they need to know to create great cross-device web
-          experiences.</p>
-          <p>This course will focus on building mobile-first web apps, 
-          which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addform.html b/fundamentals/codelabs/your-first-multi-screen-site/addform.html
deleted file mode 100644
index 85f9164..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addform.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-     <title>CS256: Mobile Web Development - adding content</title>
-  </head>
-  <body>   
-    
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not 
-          sure how to transform your traditional desktop-focused web apps 
-          into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what 
-          they need to know to create great cross-device web
-          experiences.</p>
-          <p>This course will focus on building mobile-first web apps, 
-          which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <!-- // [START form] -->
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <!-- // [END form] -->
-        <br>
-      </div>
-    </div>
-    
-
-    <!-- // [START section1] -->
-    <div id="section1">
-
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-     
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addheadline.html b/fundamentals/codelabs/your-first-multi-screen-site/addheadline.html
deleted file mode 100644
index def39b4..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addheadline.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-     <title>CS256: Mobile Web Development - adding content</title>
-  </head>
-  <body>
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not
-          sure how to transform your traditional desktop-focused web apps
-          into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what
-          they need to know to create great cross-device web
-          experiences.</p>
-          <p>This course will focus on building mobile-first web apps,
-          which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android,</li>
-            <li>iOS,</li>
-            <li>and others.</li>
-          </ul>
-        </div>
-        <form method="post" id="register">
-        </form>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-
-    </div>
-    <!-- // [END section3] -->
-
-    <!-- // [START footer] -->
-    <footer>
-
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addimages.html b/fundamentals/codelabs/your-first-multi-screen-site/addimages.html
deleted file mode 100644
index 2bd6086..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addimages.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - adding images</title>
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <header>
-        <h1>Mobile Web Development</h1>
-        <p>Building Mobile Web Experiences</p>
-      </header>
-      <div id="blurb">
-        <p>So you’ve heard mobile is kind of a big deal, and you’re not sure how to transform your traditional desktop-focused web apps into fast, effective mobile experiences. This course is designed to teach web developers what they need to know to create great cross-device mobile web experiences. This course will focus on building mobile web apps, which will work across multiple platforms including Android, iOS, and others.</p>
-      </div>
-      <form method="post" id="register">
-         <h2>Register for details of the launch</h2>
-         <label for="name">Name</label>
-         <input type="text" name="name" id="name" 
-            placeholder="Thomas A Anderson" required>
-         <label for="email">Email address</label>
-         <input type="email" name="email" id="email" 
-            placeholder="neo@example.com" required>
-         <label for="tel">Telephone</label>
-         <input type="tel" name="tel" id="tel" 
-            placeholder="(555) 555 5555" required>
-         <label for="time">Best time to contact</label>
-         <input type="time" name="time" id="time" 
-            placeholder="4pm" required>
-         <input type="submit" value="Sign up">
-      </form>
-      <br>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <h2>What will I learn?</h2>
-      <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-      <p>You'll understand what it takes to:</p>
-      <ul>
-        <li>build great web experiences on mobile devices</li>
-        <li>use the tools you need to test performance</li>
-        <li>apply your knowledge to your own projects in the future</li>
-      </ul>
-      <video controls poster="udacity.png">
-        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-        <p>Sorry your browser doesn't support video. 
-           <a href="udacity.mov">Download the video</a>.
-        </p>
-      </video>
-      <br>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START images] -->
-    <div id="section2">
-      <h2>Who will teach me?</h2>
-      <p>The world's leading mobile web developers.</p>
-     
-      <div id="images">
-        <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
-        <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
-        <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
-      </div>
-     
-      <br>
-    </div>
-    <!-- // [END images] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addstructure.html b/fundamentals/codelabs/your-first-multi-screen-site/addstructure.html
deleted file mode 100644
index 7867e0c..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addstructure.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!-- // [START structure] -->
-<!doctype html>
-<html>
-  <head>
-     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <title>CS256: Mobile Web development - structure</title>
-  </head>
-  <body>   
-    <div id="headline">
-      <header>
-        <h1></h1>
-        <p></p>
-      </header>
-      <div id="blurb">
-        <p></p>
-        <ul>
-          <li>
-        </ul>
-      </div>
-      <form method="post" id="register"> 
-      </form>
-    </div>
-    <div id="section1">
-      <h2></h2>
-      <p></p>
-      <ul>
-        <li>
-      </ul>
-      <video></video>
-    </div>
-    <div id="section2">
-      <h2></h2>
-      <p></p>
-      <div id="images">
-        <img>
-      </div>
-    </div>
-    <div id="section3">
-      <h2></h2>
-      <p></p>
-    </div>
-    <footer>
-      <p></p>
-    </footer>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-<!-- // [END structure] -->
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addtable.html b/fundamentals/codelabs/your-first-multi-screen-site/addtable.html
deleted file mode 100644
index c05629c..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addtable.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-     <title>CS256: Mobile Web Development - adding content</title>
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not 
-          sure how to transform your traditional desktop-focused web apps 
-          into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what 
-          they need to know to create great cross-device web
-          experiences.</p>
-          <p>This course will focus on building mobile-first web apps, 
-          which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <footer>
-      <p></p>
-    </footer>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/addvideo.html b/fundamentals/codelabs/your-first-multi-screen-site/addvideo.html
deleted file mode 100644
index 3c30bf4..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/addvideo.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - Adding a video</title>
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <header>
-        <h1>Mobile Web Development</h1>
-        <p>Building Mobile Web Experiences</p>
-      </header>
-      <div id="blurb">
-        <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-        <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-        <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-        <ul>
-          <li>Android, 
-          <li>iOS,
-          <li>and others.
-        </ul>
-      </div>
-      <form method="post" id="register">
-         <h2>Register for the launch</h2>
-         <label for="name">Name</label>
-         <input type="text" name="name" id="name" 
-            placeholder="Thomas A Anderson" required>
-         <label for="email">Email address</label>
-         <input type="email" name="email" id="email" 
-            placeholder="neo@example.com" required>
-         <label for="tel">Telephone</label>
-         <input type="tel" name="tel" id="tel" 
-            placeholder="(555) 555 5555" required>
-         <input type="submit" value="Sign up">
-      </form>
-      <br>
-    </div>
-    
-    <!-- // [START section1] -->    
-    <div id="section1">
-      <h2>What will I learn?</h2>
-      <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-      <p>You'll understand what it takes to:</p>
-      <ul>
-        <li>build great web experiences on mobile devices</li>
-        <li>use the tools you need to test performance</li>
-        <li>apply your knowledge to your own projects in the future</li>
-      </ul>
-<!-- // [START video] -->
-      <video controls poster="udacity.png">
-        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-        <source src="udacity.mov" type="video/mov"></source>
-        <p>Sorry your browser doesn't support video. 
-           <a href="udacity.mov">Download the video</a>.
-        </p>
-      </video>
-<!-- // [END video] -->
-      <br>
-    </div>
-    <!-- // [END section1] -->
-   
-    <div id="section2">
-      
-    </div>
-    
-
-   
-    <div id="section3">
-      
-    </div>
-
-    <footer>
-    </footer>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/alterpadding.html b/fundamentals/codelabs/your-first-multi-screen-site/alterpadding.html
deleted file mode 100644
index 87ecc8d..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/alterpadding.html
+++ /dev/null
@@ -1,351 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-          /* // [START padding] */
-          #headline {
-            padding: 20px 5%;
-          }
-          /* // [END padding] */
-      }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/chriswilson.png b/fundamentals/codelabs/your-first-multi-screen-site/chriswilson.png
deleted file mode 100644
index d86f5c9..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/chriswilson.png and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/constrainwidth.html b/fundamentals/codelabs/your-first-multi-screen-site/constrainwidth.html
deleted file mode 100644
index e35ef32..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/constrainwidth.html
+++ /dev/null
@@ -1,346 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-      }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/content-with-styles.html b/fundamentals/codelabs/your-first-multi-screen-site/content-with-styles.html
deleted file mode 100644
index 68de68d..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/content-with-styles.html
+++ /dev/null
@@ -1,454 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - full content with styles</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 300;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-        text-align: center;
-      }
-
-      #section2 div {
-        text-align: center;
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      #section3 figure {
-        text-align: center;
-      }
-
-      #section3 figure figcaption {
-        text-align: center;
-        font-weight: 400;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      table {
-        margin-top: 26px;
-        width: 100%;
-      }
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      /* // [START table-css] */
-      @media screen and (max-width: 600px) {
-        table thead {
-          display: none;
-        }
-
-        table td {
-          display: block;
-          position: relative;
-          padding-left: 50%;
-          padding-top: 13px;
-          padding-bottom: 13px;
-          text-align: left;
-          background: #e9e9e9;
-        }
-
-        table td:before {
-          content: attr(data-th) " :";
-          display: inline-block;
-          color: #000000;
-          background: #e9e9e9;
-          border-right: 2px solid transparent;
-          position: absolute;
-          top: 0;
-          left: 0;
-          bottom: 0;
-          width: 33%;
-          max-height: 100%;
-
-          font-size: 16px;
-          font-weight: 300;
-          padding-left: 13px;
-          padding-top: 13px;
-        }
-      }
-      /* // [END table-css] */
-
-      @media screen and (min-width: 600px) {
-          #headline {
-            padding: 20px 5%;
-          }
-          
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-
-          #headline #blurb {
-            float: left; 
-            font-weight: 200;
-            width: 50%;
-            font-size: 18px;
-            box-sizing: border-box;
-            padding-right: 10px;
-          }
-
-          #headline br {
-            clear: both;
-          }
-
-          #headline #register {
-            float:right;
-            padding: 20px;
-            width: 50%;
-            box-sizing: border-box;
-            font-weight: 300;
-          }
-          
-          #section1 #section2, #section3 {
-            box-sizing: border-box;
-            padding: 10px 20% 80px 20%;
-          }
-          
-          #section1 h2, #section2 h2, #section3 h2  {
-            margin-top: 0;
-            font-size: 60px
-          }
-          
-          #section1 ul {
-            box-sizing: border-box;
-            float: left;
-            width: 50%;
-            padding-right: 1em;
-          }
-          
-          #section1 video {
-            box-sizing: border-box;
-            width: 50%;
-            float: right;
-          }
-
-          #section1 br {
-            clear: both;
-          }
-          
-          #section2 div img {
-            width: 30%;
-            margin: 1%;
-            box-sizing: border-box;
-            border-radius: 50% 50%;
-            box-shadow: black 0px 0px 5px;
-          }
-        }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>Some of the world's leading web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <div class="container">
-        <h2>Mobile. Why should I care?</h2>
-        <p>It is huge.  Everywhere.</p>
-        <table>
-          <caption>
-            <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-          </caption>
-          <thead>
-             <tr>
-               <th>Country</th>
-               <th>Desktop share</th>
-               <th>Tablet share</th>
-               <th>Mobile share</th>
-             </tr>
-          </thead>
-          <colgroup>
-             <col span="1">
-             <col span="1">
-             <col span="1">
-             <col span="1">
-          </colgroup>
-          <tbody>
-           <tr>
-              <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-              <td data-th="Desktop share">32%</td>
-              <td data-th="Table share">1%</td>
-              <td data-th="Mobile share">67%</td>
-            </tr>
-            <tr>
-              <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-              <td data-th="Desktop share">69%</td>
-              <td data-th="Table share">13%</td>
-              <td data-th="Mobile share">18%</td>
-            </tr>
-            <tr>
-              <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-              <td data-th="Desktop share">69%</td>
-              <td data-th="Table share">9%</td>
-              <td data-th="Mobile share">22%</td>
-            </tr>
-            <tr>
-              <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-              <td data-th="Desktop share">86%</td>
-              <td data-th="Table share">4%</td>
-              <td data-th="Mobile share">10%</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(max-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-ContentWithStyles");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/content-without-styles.html b/fundamentals/codelabs/your-first-multi-screen-site/content-without-styles.html
deleted file mode 100644
index 42e2602..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/content-without-styles.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - full content no styles</title>
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <header>
-        <h1>Mobile Web Development</h1>
-        <p>Building Mobile Web Experiences</p>
-      </header>
-      <div id="blurb">
-        <p>So you’ve heard mobile is kind of a big deal, and you’re not sure how to transform your traditional desktop-focused web apps into fast, effective mobile experiences. This course is designed to teach web developers what they need to know to create great cross-device mobile web experiences. This course will focus on building mobile web apps, which will work across multiple platforms including Android, iOS, and others.</p>
-      </div>
-      <form method="post" id="register">
-         <h2>Register for details of the launch</h2>
-         <label for="name">Name</label>
-         <input type="text" name="name" id="name" 
-            placeholder="Thomas A Anderson" required>
-         <label for="email">Email address</label>
-         <input type="email" name="email" id="email" 
-            placeholder="neo@example.com" required>
-         <label for="tel">Telephone</label>
-         <input type="tel" name="tel" id="tel" 
-            placeholder="(555) 555 5555" required>
-         <label for="time">Best time to contact</label>
-         <input type="time" name="time" id="time" 
-            placeholder="4pm" required>
-         <input type="submit" value="Sign up">
-      </form>
-      <br>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <h2>What will I learn?</h2>
-      <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-      <p>You'll understand what it takes to:</p>
-      <ul>
-        <li>build great web experiences on mobile devices</li>
-        <li>use the tools you need to test performance</li>
-        <li>apply your knowledge to your own projects in the future</li>
-      </ul>
-      <video controls poster="udacity.png">
-        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-        <p>Sorry your browser doesn't support video. 
-           <a href="udacity.mov">Download the video</a>.
-        </p>
-      </video>
-      <br>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <h2>Who will teach me?</h2>
-      <p>The world's leading mobile web developers.</p>
-      <div id="images">
-        <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-        <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-        <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-      </div>
-      <br>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <p>We always need a footer.</p>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/firstbreakpoint.html b/fundamentals/codelabs/your-first-multi-screen-site/firstbreakpoint.html
deleted file mode 100644
index 53ada16..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/firstbreakpoint.html
+++ /dev/null
@@ -1,338 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline header h1 {
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline header p {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      #section3 {
-        text-align: center;
-        margin: auto;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      /* // [START first] */
-      @media (min-width: 600px) {
-      
-      }
-      /* // [END first] */
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/fixingfirstbreakpoint.html b/fundamentals/codelabs/your-first-multi-screen-site/fixingfirstbreakpoint.html
deleted file mode 100644
index 8ecd271..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/fixingfirstbreakpoint.html
+++ /dev/null
@@ -1,420 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-           /* // [START padding] */
-          #headline {
-            padding: 20px 5%;
-          }
-          /* // [END padding] */
-
-          /* // [START formfloat] */
-          #headline #blurb {
-            float: left; 
-            font-weight: 200;
-            width: 50%;
-            font-size: 18px;
-            box-sizing: border-box;
-            padding-right: 10px;
-          }
-
-          #headline #register {
-            float:right;
-            padding: 20px;
-            width: 50%;
-            box-sizing: border-box;
-            font-weight: 300;
-          }
-
-          #headline br {
-            clear: both;
-          }
-          /* // [END formfloat] */
-
-          
-          #section1 #section2, #section3 {
-            box-sizing: border-box;
-            padding: 10px 20% 80px 20%;
-          }
-          
-          #section1 h2, #section2 h2, #section3 h2  {
-            margin-top: 0;
-            font-size: 60px
-          }
-          
-          /* // [START floatvideo] */
-          #section1 ul {
-            box-sizing: border-box;
-            float: left;
-            width: 50%;
-            padding-right: 1em;
-          }
-          
-          #section1 video {
-            width: 50%;
-            float: right;
-          }
-          /* // [END floatvideo] */
-         
-          
-          #section1 video {
-            box-sizing: border-box;
-            width: 50%;
-            float: right;
-          }
-
-          #section1 br {
-            clear: both;
-          }
-          
-          /* // [START tileimages] */
-         #section2 div img {
-            width: 30%;
-            margin: 1%;
-            box-sizing: border-box;
-            border-radius: 50% 50%;
-            box-shadow: black 0px 0px 5px;
-          }
-          /* // [END tileimages] */
-        }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/floattheform.html b/fundamentals/codelabs/your-first-multi-screen-site/floattheform.html
deleted file mode 100644
index ec5f196..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/floattheform.html
+++ /dev/null
@@ -1,374 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-          /* // [START padding] */
-          #headline {
-            padding: 20px 5%;
-          }
-          /* // [END padding] */
-
-          /* // [START formfloat] */
-          #headline #blurb {
-            float: left; 
-            font-weight: 200;
-            width: 50%;
-            font-size: 18px;
-            box-sizing: border-box;
-            padding-right: 10px;
-          }
-
-          #headline #register {
-            float:right;
-            padding: 20px;
-            width: 50%;
-            box-sizing: border-box;
-            font-weight: 300;
-          }
-
-          #headline br {
-            clear: both;
-          }
-          /* // [END formfloat] */
-      }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/floatthevideo.html b/fundamentals/codelabs/your-first-multi-screen-site/floatthevideo.html
deleted file mode 100644
index 4a6895c..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/floatthevideo.html
+++ /dev/null
@@ -1,388 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-          /* // [START padding] */
-          #headline {
-            padding: 20px 5%;
-          }
-          /* // [END padding] */
-
-          /* // [START formfloat] */
-          #headline #blurb {
-            float: left; 
-            font-weight: 200;
-            width: 50%;
-            font-size: 18px;
-            box-sizing: border-box;
-            padding-right: 10px;
-          }
-
-          #headline #register {
-            float:right;
-            padding: 20px;
-            width: 50%;
-            box-sizing: border-box;
-            font-weight: 300;
-          }
-
-          #headline br {
-            clear: both;
-          }
-          /* // [END formfloat] */
-
-          /* // [START floatvideo] */
-          #section1 ul {
-            box-sizing: border-box;
-            float: left;
-            width: 50%;
-            padding-right: 1em;
-          }
-          
-          #section1 video {
-            width: 50%;
-            float: right;
-          }
-          /* // [END floatvideo] */
-      }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/helloworld.html b/fundamentals/codelabs/your-first-multi-screen-site/helloworld.html
deleted file mode 100644
index 3c49d27..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/helloworld.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- // [START helloworld] -->
-<!doctype html>
-<html>
-  <head>
-     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <title>My first page - perfect viewport</title>
-  </head>
-  <body>
-    <h1>My first page</h1>
-    <p>This is easy</p>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-<!-- // [END helloworld] -->
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/hero.jpg b/fundamentals/codelabs/your-first-multi-screen-site/hero.jpg
deleted file mode 100644
index 1746c7d..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/hero.jpg and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/instructors.png b/fundamentals/codelabs/your-first-multi-screen-site/instructors.png
deleted file mode 100644
index 9bbbaa1..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/instructors.png and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/mattgaunt.jpg b/fundamentals/codelabs/your-first-multi-screen-site/mattgaunt.jpg
deleted file mode 100755
index 53f6218..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/mattgaunt.jpg and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/peterlubbers.png b/fundamentals/codelabs/your-first-multi-screen-site/peterlubbers.png
deleted file mode 100644
index fbc674c..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/peterlubbers.png and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/seanbennett.png b/fundamentals/codelabs/your-first-multi-screen-site/seanbennett.png
deleted file mode 100644
index 31ce86e..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/seanbennett.png and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/tiletheimages.html b/fundamentals/codelabs/your-first-multi-screen-site/tiletheimages.html
deleted file mode 100644
index 44c2cd7..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/tiletheimages.html
+++ /dev/null
@@ -1,398 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-          /* // [START padding] */
-          #headline {
-            padding: 20px 5%;
-          }
-          /* // [END padding] */
-
-          /* // [START formfloat] */
-          #headline #blurb {
-            float: left; 
-            font-weight: 200;
-            width: 50%;
-            font-size: 18px;
-            box-sizing: border-box;
-            padding-right: 10px;
-          }
-
-          #headline #register {
-            float:right;
-            padding: 20px;
-            width: 50%;
-            box-sizing: border-box;
-            font-weight: 300;
-          }
-
-          #headline br {
-            clear: both;
-          }
-          /* // [END formfloat] */
-
-          /* // [START floatvideo] */
-          #section1 ul {
-            box-sizing: border-box;
-            float: left;
-            width: 50%;
-            padding-right: 1em;
-          }
-          
-          #section1 video {
-            width: 50%;
-            float: right;
-          }
-          /* // [END floatvideo] */
-
-          /* // [START tileimages] */
-          #section2 div img {
-            width: 30%;
-            margin: 1%;
-            box-sizing: border-box;
-            border-radius: 50% 50%;
-            box-shadow: black 0px 0px 5px;
-          }
-          /* // [END tileimages] */
-      }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-      <br>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/udacity.png b/fundamentals/codelabs/your-first-multi-screen-site/udacity.png
deleted file mode 100644
index 657eb24..0000000
Binary files a/fundamentals/codelabs/your-first-multi-screen-site/udacity.png and /dev/null differ
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/updatingtablehtml.html b/fundamentals/codelabs/your-first-multi-screen-site/updatingtablehtml.html
deleted file mode 100644
index edaed3e..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/updatingtablehtml.html
+++ /dev/null
@@ -1,420 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - fixing first breakpoint</title>
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet">
-    <!-- // [start style] -->
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-
-      #headline {
-        padding: 0.8em;
-        color: white;
-        font-family: Roboto, helvetica, arial, sans-serif;
-        background-color: black;
-        background-image: url(hero.jpg);
-        background-size: cover;
-      }
-
-      #headline h1 {
-        font-weight: 200;
-        font-size: 60px;
-        line-height: 1em;
-        margin-bottom: 0;
-      }
-        
-      #headline h2 {
-        font-weight: 200;
-        font-size: 30px;
-        margin-top: 5px;
-      }
-
-      #headline #blurb {
-        font-weight: 200;
-        font-size: 18px;
-      }
-
-      #headline #register {
-        background-color: #39b1a4;
-        background-color: rgba(57,177, 164, 0.7);
-        padding: 1em;
-      }
-
-      #headline #register h2 {
-        font-weight: 100;
-        padding: 0;
-        margin: 0;
-      }
-
-      #headline #register label {
-        font-size: 1.2em;
-        font-weight: 200;
-        padding-top: 12px;
-        display: block;
-      }
-
-      #headline #register input {
-        width: 100%;
-        font-size: 18px;
-        font-weight: 200;
-        padding: 10px;
-        box-sizing: border-box;
-      }
-
-      #headline #register input[type=submit] {
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        margin-top: 20px;
-        padding: 10px;
-        border: none;
-        box-sizing: border-box;
-        font-size: 18px;
-      }
-
-      #section1, #section2, #section3 {
-        box-sizing: border-box;
-        padding: 20px;
-      }
-
-      #section1 h2, #section2 h2, #section3 h2  {
-        margin-top: 0;
-        font-size: 24px
-      }
-
-      #section1 {
-        background-color: white;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section1 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section1 h2 + p {
-      }
-
-      #section1 video {
-        width: 100%;
-      }
-
-      #section2 {
-        background-color: #e9e9e9;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        font-size: 18px;
-      }
-
-      #section2 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section2 h2 + p {
-      }
-
-      #section2 div {
-      }
-
-      #section2 div img {
-        width: 100%
-      }
-
-      #section3 {
-        background-color: #f5f5f5;
-        font-family: Roboto, sans-serif;
-        font-weight: 100;
-        text-align: center;
-        margin: auto;
-      }
-
-      #section3 h2 {
-        font-weight: 300;
-        text-align: center;
-        margin-bottom: 0px;
-        margin-top: 20px;
-      }
-
-      #section3 h2 + p {
-        text-align: center;
-      }
-
-      footer {
-        font-family: Roboto, sans-serif;
-        font-weight: 300;
-        text-align: center;
-        background-color: hsl(8, 70%, 54%);
-        color: white;
-        padding-bottom: 20px;
-        padding-top: 20px;
-      }
-
-      thead {
-        font-weight: bold;
-      }
-
-      tbody {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 600px) {
-
-          /* // [START container] */
-          .container {
-            margin: auto;
-            max-width: 800px;
-          }
-          /* // [END container] */
-
-           /* // [START padding] */
-          #headline {
-            padding: 20px 5%;
-          }
-          /* // [END padding] */
-
-          /* // [START formfloat] */
-          #headline #blurb {
-            float: left; 
-            font-weight: 200;
-            width: 50%;
-            font-size: 18px;
-            box-sizing: border-box;
-            padding-right: 10px;
-          }
-
-          #headline #register {
-            float:right;
-            padding: 20px;
-            width: 50%;
-            box-sizing: border-box;
-            font-weight: 300;
-          }
-
-          #headline br {
-            clear: both;
-          }
-          /* // [END formfloat] */
-
-          
-          #section1 #section2, #section3 {
-            box-sizing: border-box;
-            padding: 10px 20% 80px 20%;
-          }
-          
-          #section1 h2, #section2 h2, #section3 h2  {
-            margin-top: 0;
-            font-size: 60px
-          }
-          
-          /* // [START floatvideo] */
-          #section1 ul {
-            box-sizing: border-box;
-            float: left;
-            width: 50%;
-            padding-right: 1em;
-          }
-          
-          #section1 video {
-            width: 50%;
-            float: right;
-          }
-          /* // [END floatvideo] */
-         
-          
-          #section1 video {
-            box-sizing: border-box;
-            width: 50%;
-            float: right;
-          }
-
-          #section1 br {
-            clear: both;
-          }
-          
-          /* // [START tileimages] */
-         #section2 div img {
-            width: 30%;
-            margin: 1%;
-            box-sizing: border-box;
-            border-radius: 50% 50%;
-            box-shadow: black 0px 0px 5px;
-          }
-          /* // [END tileimages] */
-        }
-    </style>
-    <!-- // [END style] -->
-  </head>
-  <body>   
-    <!-- // [START headline] -->
-    <div id="headline">
-      <div class="container">
-        <header>
-          <h1>Mobile Web Development</h1>
-          <p>Building Mobile Web Experiences</p>
-        </header>
-        <div id="blurb">
-          <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-          <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-          <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-          <ul>
-            <li>Android, 
-            <li>iOS,
-            <li>and others.
-          </ul>
-        </div>
-        <form method="post" id="register">
-           <h2>Register for the launch</h2>
-           <label for="name">Name</label>
-           <input type="text" name="name" id="name" 
-              placeholder="Thomas A Anderson" required>
-           <label for="email">Email address</label>
-           <input type="email" name="email" id="email" 
-              placeholder="neo@example.com" required>
-           <label for="tel">Telephone</label>
-           <input type="tel" name="tel" id="tel" 
-              placeholder="(555) 555 5555" required>
-           <input type="submit" value="Sign up">
-        </form>
-        <br>
-      </div>
-    </div>
-    <!-- // [END headline] -->
-
-  
-   <!-- // [START containerhtml] -->
-    <div id="section1">
-      <div class="container">
-        <h2>What will I learn?</h2>
-    <!-- // [END containerhtml] -->
-        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-        <p>You'll understand what it takes to:</p>
-        <ul>
-          <li>build great web experiences on mobile devices</li>
-          <li>use the tools you need to test performance</li>
-          <li>apply your knowledge to your own projects in the future</li>
-        </ul>
-        <video controls poster="udacity.png">
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
-          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
-          <p>Sorry your browser doesn't support video. 
-             <a href="udacity.mov">Download the video</a>.
-          </p>
-        </video>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <div class="container">
-        <h2>Who will teach me?</h2>
-        <p>The world's leading mobile web developers.</p>
-        <div id="images">
-          <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
-          <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
-          <img src="seanbennett.png" alt="Sean Bennet Course Developer">
-        </div>
-        <br>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <!-- // [START table-tbody] -->
-        <tbody>
-         <tr>
-            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td data-th="Desktop share">32%</td>
-            <td data-th="Table share">1%</td>
-            <td data-th="Mobile share">67%</td>
-          </tr>
-          <tr>
-            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td data-th="Desktop share">69%</td>
-            <td data-th="Table share">13%</td>
-            <td data-th="Mobile share">18%</td>
-          </tr>
-          <tr>
-            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td data-th="Desktop share">69%</td>
-            <td data-th="Table share">9%</td>
-            <td data-th="Mobile share">22%</td>
-          </tr>
-          <tr>
-            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td data-th="Desktop share">86%</td>
-            <td data-th="Table share">4%</td>
-            <td data-th="Mobile share">10%</td>
-          </tr>
-        </tbody>
-        <!-- // [END table-tbody] -->
-      </table>
-      <br>
-    </div>
- 
-    <!-- // [START footer] -->
-    <footer>
-      <div class="container">
-        <p>We always need a footer.</p>
-      </div>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("GettingStarted-FixingFirstBreakpoint");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/viewport.html b/fundamentals/codelabs/your-first-multi-screen-site/viewport.html
deleted file mode 100644
index 0e608fe..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/viewport.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-<!doctype html>
-<html>
-  <head>
-     <!-- // [START viewport] -->
-     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <!-- // [END viewport] -->
-     <title>My first page</title>
-  </head>
-  <body>
-    <h1>My first page</h1>
-    <p>This is easy</p>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/codelabs/your-first-multi-screen-site/withform.html b/fundamentals/codelabs/your-first-multi-screen-site/withform.html
deleted file mode 100644
index b0b7d7f..0000000
--- a/fundamentals/codelabs/your-first-multi-screen-site/withform.html
+++ /dev/null
@@ -1,321 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>CS256: Mobile Web Development - adding form</title>
-      <!-- // [start style] -->
-      <style>
-        body {
-          margin: 0;
-          padding: 0;
-        }
-
-        #headline {
-          padding: 0.8em;
-          color: white;
-          font-family: Roboto, sans-serif;
-          background-image: url(hero.jpg);
-          background-size: cover;
-        }
-
-        #headline header h1 {
-          font-family: Roboto, sans-serif;
-          font-weight: 100;
-          font-size: 60px;
-          line-height: 1em;
-          margin-bottom: 0;
-        }
-          
-        #headline header p {
-          font-weight: 200;
-          font-size: 30px;
-          margin-top: 5px;
-        }
-
-        #headline #blurb {
-          font-weight: 200;
-          font-size: 18px;
-        }
-
-        #headline #register {
-          background-color: #39b1a4;
-          padding: 1em;
-        }
-
-        #headline #register h2 {
-          padding: 0;
-          margin: 0;
-        }
-
-        #headline #register label {
-          font-size: 1.2em;
-          padding-top: 12px;
-          display: block;
-        }
-
-        #headline #register input {
-          width: 100%;
-          font-size: 18px;
-          padding: 10px;
-          box-sizing: border-box;
-        }
-
-        #headline #register input[type=submit] {
-          background-color: hsl(8, 70%, 54%);
-          color: white;
-          margin-top: 20px;
-          padding: 10px;
-          border: none;
-          box-sizing: border-box;
-          font-size: 18px;
-        }
-
-        #section1, #section2, #section3 {
-          padding: 20px;
-        }
-
-        #section1 h2, #section2 h2, #section3 h2  {
-          margin-top: 0;
-          font-size: 24px
-        }
-
-        #section1 {
-          background-color: white;
-          font-family: Roboto, sans-serif;
-          font-weight: 100;
-          font-size: 18px;
-        }
-
-        #section1 h2 {
-          font-weight: 300;
-          text-align: center;
-          margin-bottom: 0px;
-          margin-top: 20px;
-        }
-
-        #section1 h2 + p {
-          text-align: center;
-        }
-
-        #section1 video {
-          width: 100%;
-        }
-
-        #section2 {
-          background-color: #e9e9e9;
-          font-family: Roboto, sans-serif;
-          font-weight: 100;
-          font-size: 18px;
-        }
-
-        #section2 h2 {
-          font-weight: 300;
-          text-align: center;
-          margin-bottom: 0px;
-          margin-top: 20px;
-        }
-
-        #section2 h2 + p {
-          text-align: center;
-        }
-
-        #section2 div {
-          text-align: center;
-        }
-
-        #section2 div img{
-          width: 100%
-        }
-
-        #section3 {
-          background-color: #f5f5f5;
-          font-family: Roboto, sans-serif;
-          font-weight: 100;
-        }
-
-        #section3 h2 {
-          font-weight: 300;
-          text-align: center;
-          margin-bottom: 0px;
-          margin-top: 20px;
-        }
-
-        #section3 h2 + p {
-          text-align: center;
-        }
-
-        footer {
-          font-family: Roboto, sans-serif;
-          font-weight: 300;
-          text-align: center;
-          background-color: hsl(8, 70%, 54%);
-          color: white;
-          padding-bottom: 20px;
-          padding-top: 20px;
-        }
-
-        thead {
-          font-weight: bold;
-        }
-
-        tbody {
-          text-align: center;
-        }
-      </style>
-      <!-- // [END style] -->
-  </head>
-  <body>   
-    <div id="headline">
-      <header>
-        <h1>Mobile Web Development</h1>
-        <p>Building Mobile Web Experiences</p>
-      </header>
-      <div id="blurb">
-        <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.</p>
-        <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>
-        <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p>
-        <ul>
-          <li>Android, 
-          <li>iOS,
-          <li>and others.
-        </ul>
-      </div>
-      <!-- // [START form] -->
-      <form method="post" id="register">
-        <h2>Register for the launch</h2>
-        <label for="name">Name</label>
-        <input type="text" name="name" id="name" 
-          placeholder="Thomas A Anderson" required>
-        <label for="email">Email address</label>
-        <input type="email" name="email" id="email" 
-          placeholder="neo@example.com" required>
-        <label for="tel">Telephone</label>
-        <input type="tel" name="tel" id="tel" 
-          placeholder="(555) 555 5555" required>
-        <input type="submit" value="Sign up">
-      </form>
-      <!-- // [END form] -->
-      </div>
-    </div>
-
-    <!-- // [START section1] -->
-    <div id="section1">
-      <h2>What will I learn?</h2>
-      <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
-      <p>You'll understand what it takes to:</p>
-      <ul>
-        <li>build great web experiences on mobile devices</li>
-        <li>use the tools you need to test performance</li>
-        <li>apply your knowledge to your own projects in the future</li>
-      </ul>
-      <video></video>
-    </div>
-    <!-- // [END section1] -->
-
-    <!-- // [START section2] -->
-    <div id="section2">
-      <h2>Who will teach me?</h2>
-      <p>Some of the world's leading web developers.</p>
-      <div id="images">
-        <img>
-        <img>
-        <img>
-        <img>
-      </div>
-    </div>
-    <!-- // [END section2] -->
-
-    <!-- // [START section3] -->
-    <div id="section3">
-      <h2>Mobile. Why should I care?</h2>
-      <p>It is huge.  Everywhere.</p>
-      <table>
-        <caption>
-          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
-        </caption>
-        <thead>
-           <tr>
-             <th>Country</th>
-             <th>Desktop share</th>
-             <th>Tablet share</th>
-             <th>Mobile share</th>
-           </tr>
-        </thead>
-        <colgroup>
-           <col span="1">
-           <col span="1">
-           <col span="1">
-           <col span="1">
-        </colgroup>
-        <tbody>
-         <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
-            <td>32%</td>
-            <td>1%</td>
-            <td>67%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
-            <td>69%</td>
-            <td>13%</td>
-            <td>18%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
-            <td>69%</td>
-            <td>9%</td>
-            <td>22%</td>
-          </tr>
-          <tr>
-            <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
-            <td>86%</td>
-            <td>4%</td>
-            <td>10%</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <!-- // [END section3] -->
- 
-    <!-- // [START footer] -->
-    <footer>
-      <p>We always need a footer.</p>
-    </footer>
-    <!-- // [END footer] -->
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        var inputs = document.querySelectorAll("input");
-        for (var i = 0; i < inputs.length; i++) {
-          var input = inputs[i];
-          input.addEventListener("input", formChanged);
-        }
-        var form = document.querySelector("form");
-        form.addEventListener("submit", function(evt) {
-          sampleCompleted("GettingStarted-WithFormsSubmit");
-          evt.preventDefault();
-        });
-      }
-
-      function formChanged(evt) {
-        sampleCompleted("GettingStarted-WithFormsInput");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-custom-curve.html b/fundamentals/design-and-ux/animations/box-move-custom-curve.html
deleted file mode 100644
index 2e4d703..0000000
--- a/fundamentals/design-and-ux/animations/box-move-custom-curve.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>html {
-        background: #f2f2f2;
-      }
-
-      p {
-        font-family: 'Helvetica', Arial, sans-serif;
-        text-align: center;
-      }
-
-      .box {
-        width: 100px;
-        height: 100px;
-
-        background: #FFF;
-        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-        -webkit-transform: translate(0, 0);
-        -webkit-transition: -webkit-transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
-
-        transform: translate(0, 0);
-        transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
-
-        will-change: transform;
-      }
-
-      .box.move {
-        transform: translate(100px, 100px);
-      }
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>var box = document.querySelector('.box');
-      box.addEventListener('click', function() {
-        box.classList.toggle('move');
-      });
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-ease-in-out.html b/fundamentals/design-and-ux/animations/box-move-ease-in-out.html
deleted file mode 100644
index 0884e55..0000000
--- a/fundamentals/design-and-ux/animations/box-move-ease-in-out.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	p {
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  		text-align: center;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  -webkit-transform: translate(0, 0);
-			  -webkit-transition: -webkit-transform 500ms ease-in-out;
-
-			  transform: translate(0, 0);
-			  transition: transform 500ms ease-in-out;
-
-			  will-change: transform;
-			}
-
-			.box.move {
-			  transform: translate(100px, 100px);
-			}
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-    <script>
-      var box = document.querySelector('.box');
-			box.addEventListener('click', function() {
-				box.classList.toggle('move');
-			});
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-ease-in.html b/fundamentals/design-and-ux/animations/box-move-ease-in.html
deleted file mode 100644
index 50db54e..0000000
--- a/fundamentals/design-and-ux/animations/box-move-ease-in.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	p {
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  		text-align: center;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  -webkit-transform: translate(0, 0);
-			  -webkit-transition: -webkit-transform 500ms ease-in;
-
-			  transform: translate(0, 0);
-			  transition: transform 500ms ease-in;
-
-			  will-change: transform;
-			}
-
-			.box.move {
-			  transform: translate(100px, 100px);
-			}
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>
-      var box = document.querySelector('.box');
-			box.addEventListener('click', function() {
-				box.classList.toggle('move');
-			});
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-ease-out.html b/fundamentals/design-and-ux/animations/box-move-ease-out.html
deleted file mode 100644
index 0842c74..0000000
--- a/fundamentals/design-and-ux/animations/box-move-ease-out.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	p {
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  		text-align: center;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  -webkit-transform: translate(0, 0);
-			  -webkit-transition: -webkit-transform 500ms ease-out;
-
-			  transform: translate(0, 0);
-			  transition: transform 500ms ease-out;
-
-			  will-change: transform;
-			}
-
-			.box.move {
-			  transform: translate(100px, 100px);
-			}
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>
-      var box = document.querySelector('.box');
-			box.addEventListener('click', function() {
-				box.classList.toggle('move');
-			});
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-elastic.html b/fundamentals/design-and-ux/animations/box-move-elastic.html
deleted file mode 100644
index 233680a..0000000
--- a/fundamentals/design-and-ux/animations/box-move-elastic.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  		width: 100%;
-	  		height: 100%;
-	  	}
-
-			.button-container {
-			  text-align: center;
-			}
-
-			.box-mover {
-			  background: #4285f4;
-			  border: none;
-			  padding: 10px 12px;
-			  border-radius: 3px;
-			  color: #FFF;
-			}
-
-			.box {
-			  position: absolute;
-			  width: 162px;
-			  height: 100px;
-			  left: 50%;
-			  top: 50%;
-			  margin: -50px 0 0 -81px;
-			  border-radius: 2px;
-			  border: 1px solid #EEE;
-			  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
-			  background: #FFF;
-			}
-    </style>
-  </head>
-  <body>
-    <div class="button-container">
-      <button class="box-mover">Move the box</button>
-    </div>
-    <div class="box"></div>
-
-    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
-    <script>
-      var boxMover = document.querySelector('.box-mover');
-  		var box = document.querySelector('.box');
-  		var x = 100;
-
-  		boxMover.addEventListener('click', function() {
-  		  TweenLite.to(box, 1.5, {
-  		    x: x + '%',
-  		    ease: 'Elastic.easeOut'
-  		  });
-
-  		  x = (x === 100 ? -100 : 100);
-
-  		}, false);
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-js.html b/fundamentals/design-and-ux/animations/box-move-js.html
deleted file mode 100644
index 30e8744..0000000
--- a/fundamentals/design-and-ux/animations/box-move-js.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  will-change: transform;
-			}
-    </style>
-  </head>
-  <body>
-    <div class="box"></div>
-
-    <script>
-      function Box () {
-
-  		  var animationStartTime = 0;
-  		  var animationDuration = 500;
-  		  var target = document.querySelector('.box');
-
-  		  this.startAnimation = function() {
-  		    animationStartTime = Date.now();
-  		    requestAnimationFrame(update);
-  		  };
-
-  		  function update() {
-  		    var currentTime = Date.now();
-  		    var positionInAnimation = (currentTime - animationStartTime) / animationDuration;
-
-  		    var xPosition = positionInAnimation * 100;
-  		    var yPosition = positionInAnimation * 100;
-
-
-  		    target.style.WebKitTransform = 'translate(' + xPosition + 'px, ' + yPosition + 'px)';
-  		    target.style.transform = 'translate(' + xPosition + 'px, ' + yPosition + 'px)';
-
-  		    if (positionInAnimation <= 1)
-  		      requestAnimationFrame(update);
-  		  }
-  		}
-
-		  var box = new Box();
-		  box.startAnimation();
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-keyframes.html b/fundamentals/design-and-ux/animations/box-move-keyframes.html
deleted file mode 100644
index e57a806..0000000
--- a/fundamentals/design-and-ux/animations/box-move-keyframes.html
+++ /dev/null
@@ -1,167 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-
-			.box {
-				-webkit-animation-name: movingBox;
-				-webkit-animation-duration: 2300ms;
-				-webkit-animation-iteration-count: infinite;
-				-webkit-animation-direction: alternate;
-
-				-moz-animation-name: movingBox;
-				-moz-animation-duration: 2300ms;
-				-moz-animation-iteration-count: infinite;
-				-moz-animation-direction: alternate;
-
-				-ms-animation-name: movingBox;
-				-ms-animation-duration: 2300ms;
-				-ms-animation-iteration-count: infinite;
-				-ms-animation-direction: alternate;
-
-				-o-animation-name: movingBox;
-				-o-animation-duration: 2300ms;
-				-o-animation-iteration-count: infinite;
-				-o-animation-direction: alternate;
-
-				animation-name: movingBox;
-				animation-duration: 2300ms;
-				animation-iteration-count: infinite;
-				animation-direction: alternate;
-
-				width: 100px;
-				height: 100px;
-				background: #FFF;
-				box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-			}
-
-			@-webkit-keyframes movingBox {
-			  0% {
-			    -webkit-transform: -webkit-translate(0, 0);
-			    transform: translate(0, 0);
-			    opacity: 0.3;
-			  }
-
-			  25% {
-			    opacity: 0.9;
-			  }
-
-			  50% {
-			    -webkit-transform: -webkit-translate(100px, 100px);
-			    transform: translate(100px, 100px);
-			    opacity: 0.2;
-			  }
-
-			  100% {
-			    -webkit-transform: -webkit-translate(30px, 30px);
-			    transform: translate(30px, 30px);
-			    opacity: 0.8;
-			  }
-			}
-
-			@-moz-keyframes movingBox {
-			  0% {
-			    -moz-transform: -moz-translate(0, 0);
-			    opacity: 0.3;
-			  }
-
-			  25% {
-			    opacity: 0.9;
-			  }
-
-			  50% {
-			    -moz-transform: -moz-translate(100px, 100px);
-			    opacity: 0.2;
-			  }
-
-			  100% {
-			    -moz-transform: -moz-translate(30px, 30px);
-			    opacity: 0.8;
-			  }
-			}
-
-			@-ms-keyframes movingBox {
-			  0% {
-			    -ms-transform: -ms-translate(0, 0);
-			    opacity: 0.3;
-			  }
-
-			  25% {
-			    opacity: 0.9;
-			  }
-
-			  50% {
-			    -ms-transform: -ms-translate(100px, 100px);
-			    opacity: 0.2;
-			  }
-
-			  100% {
-			    -ms-transform: -ms-translate(30px, 30px);
-			    opacity: 0.8;
-			  }
-			}
-
-			@-o-keyframes movingBox {
-			  0% {
-			    -o-transform: -o-translate(0, 0);
-			    opacity: 0.3;
-			  }
-
-			  25% {
-			    opacity: 0.9;
-			  }
-
-			  50% {
-			    -o-transform: -o-translate(100px, 100px);
-			    opacity: 0.2;
-			  }
-
-			  100% {
-			    -o-transform: -o-translate(30px, 30px);
-			    opacity: 0.8;
-			  }
-			}
-
-			@keyframes movingBox {
-			  0% {
-			    transform: translate(0, 0);
-			    opacity: 0.3;
-			  }
-
-			  25% {
-			    opacity: 0.9;
-			  }
-
-			  50% {
-			    transform: translate(100px, 100px);
-			    opacity: 0.2;
-			  }
-
-			  100% {
-			    transform: translate(30px, 30px);
-			    opacity: 0.8;
-			  }
-			}
-    </style>
-  </head>
-  <body>
-    <div class="box"></div>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-linear.html b/fundamentals/design-and-ux/animations/box-move-linear.html
deleted file mode 100644
index 072f709..0000000
--- a/fundamentals/design-and-ux/animations/box-move-linear.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	p {
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  		text-align: center;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  -webkit-transform: translate(0, 0);
-			  -webkit-transition: -webkit-transform 500ms linear;
-
-			  transform: translate(0, 0);
-			  transition: transform 500ms linear;
-
-			  will-change: transform;
-			}
-
-			.box.move {
-			  transform: translate(100px, 100px);
-			}
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>
-      var box = document.querySelector('.box');
-			box.addEventListener('click', function() {
-				box.classList.toggle('move');
-			});
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-quintic-ease-out.html b/fundamentals/design-and-ux/animations/box-move-quintic-ease-out.html
deleted file mode 100644
index b0a42f4..0000000
--- a/fundamentals/design-and-ux/animations/box-move-quintic-ease-out.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	p {
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  		text-align: center;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  -webkit-transform: translate(0, 0);
-			  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
-
-			  transform: translate(0, 0);
-			  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
-
-			  will-change: transform;
-			}
-
-			.box.move {
-			  transform: translate(100px, 100px);
-			}
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>
-      var box = document.querySelector('.box');
-			box.addEventListener('click', function() {
-				box.classList.toggle('move');
-			});
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-simple.html b/fundamentals/design-and-ux/animations/box-move-simple.html
deleted file mode 100644
index 7ebee7d..0000000
--- a/fundamentals/design-and-ux/animations/box-move-simple.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html {
-	  		background: #f2f2f2;
-	  	}
-
-	  	p {
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  		text-align: center;
-	  	}
-
-	  	.box {
-			  width: 100px;
-			  height: 100px;
-
-			  background: #FFF;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-
-			  -webkit-transform: translate(0, 0);
-			  -webkit-transition: -webkit-transform 500ms;
-
-			  transform: translate(0, 0);
-			  transition: transform 500ms;
-
-			  will-change: transform;
-			}
-
-			.box.move {
-				-webkit-transform: translate(100px, 100px);
-			  transform: translate(100px, 100px);
-			}
-    </style>
-  </head>
-  <body>
-    <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>
-      var box = document.querySelector('.box');
-			box.addEventListener('click', function() {
-				box.classList.toggle('move');
-			});
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/box-move-wa.html b/fundamentals/design-and-ux/animations/box-move-wa.html
deleted file mode 100644
index 8c3b0d5..0000000
--- a/fundamentals/design-and-ux/animations/box-move-wa.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width">
-    <title>Box Move with Web Animations API</title>
-    <style>
-      html {
-        background: #f2f2f2;
-      }
-
-      .box {
-        width: 100px;
-        height: 100px;
-        background: #FFF;
-        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
-      }
-    </style>
-
-  </head>
-
-  <body>
-
-  <p>Click on the box to animate it</p>
-    <div class="box"></div>
-
-    <script>
-      function animateBox() {
-        var target = document.querySelector('.box');
-        var player = target.animate([
-          {transform: 'translate(0)'},
-          {transform: 'translate(100px, 100px)'}
-        ], 500);
-        player.addEventListener('finish', function() {
-          target.style.transform = 'translate(100px, 100px)';
-        });
-      }
-
-      var box = document.querySelector('.box');
-      box.addEventListener('click', function() {
-        animateBox()
-      });
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/curve-playground.html b/fundamentals/design-and-ux/animations/curve-playground.html
deleted file mode 100644
index 437fc7c..0000000
--- a/fundamentals/design-and-ux/animations/curve-playground.html
+++ /dev/null
@@ -1,486 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="author" content="">
-    <meta name="viewport" content="width=device-width">
-    <title></title>
-    <style>
-      html, body {
-	  		padding: 0;
-	  		margin: 0;
-	  		width: 100%;
-	  		height: 100%;
-	  		font-family: 'Helvetica', Arial, sans-serif;
-	  	}
-
-	  	canvas {
-	  		width: 100%;
-	  		height: 100%;
-	  		max-width: 280px;
-	  		max-height: 280px;
-	  		position: absolute;
-	  		left: 50%;
-	  		top: 50%;
-	  		-webkit-transform: translateX(-50%) translateY(-80%);
-	  		transform: translateX(-50%) translateY(-80%);
-	  	}
-
-	  	.test-curve {
-	  		line-height: 30px;
-	  		width: 100px;
-	  		height: 30px;
-	  		position: absolute;
-	  		left: 50%;
-	  		top: 50%;
-	  		margin-left: -50px;
-	  		margin-top: 120px;
-	  		background: #4285F4;
-	  		border-radius: 3px;
-	  		border: none;
-	  		padding: 0;
-	  		color: #FFF;
-	  	}
-
-	  	.box {
-	  		border-radius: 3px;
-	  		text-align: center;
-	  		color: #DDD;
-	  		line-height: 40px;
-	  		width: 81px;
-	  		height: 40px;
-	  		box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-	  		background: #333;
-	  		position: absolute;
-	  		top: 50%;
-	  		left: 50%;
-	  		margin-top: 170px;
-
-	  		transition: all 650ms linear;
-
-	  		-webkit-transform: translateX(-170%);
-	  		-moz-transform: translateX(-170%);
-	  		transform: translateX(-170%);
-	  	}
-
-	  	.box.move {
-	  		-webkit-transform: translateX(70%);
-	  		-moz-transform: translateX(70%);
-	  		transform: translateX(70%);
-	  	}
-
-	  	.css-output {
-	  		background: #FFF;
-	  		position: absolute;
-	  		left: 50%;
-	  		margin-left: -148px;
-	  		width: 296px;
-	  		height: 55px;
-	  		resize: none;
-	  		border: none;
-	  		top: 50%;
-	  		padding-top: 10px;
-	  		margin-top: 46px;
-	  		font-size: 15px;
-	  		font-family: 'Source Code Pro', 'courier new', monospace;
-	  	}
-    </style>
-  </head>
-  <body>
-    <div class="box"></div>
-    <canvas class="curve-target"></canvas>
-    <button class="test-curve">Test curve</button>
-    <textarea class="css-output"></textarea>
-
-    <script src="scripts/curve-control.js"></script>
-    <script>
-      var CURVECONTROL = {};
-
-			CURVECONTROL.Widget = function(opts) {
-
-				"use strict";
-
-				var GRID_SIZE = 10;
-				var PADDING = 40;
-				var TAU = Math.PI * 2;
-				var MAX_WIDTH = 280;
-				var MAX_HEIGHT = 280;
-				var MARKER_RADIUS = 6;
-				var MARKER_INTERACTION_RADIUS = MARKER_RADIUS * 4;
-				var ENDPOINT_RADIUS = 7;
-
-				var canvas = document.querySelector('.curve-target');
-				var ctx = canvas.getContext('2d');
-				var width = 0;
-				var height = 0;
-				var drawWidth = 0;
-				var drawHeight = 0;
-				var dPR = window.devicePixelRatio;
-
-				var canvasPosition = null;
-				var controlPoint1 = {x: 0.465, y: 0.183};
-				var controlPoint2 = {x: 0.153, y: 0.946};
-				var movingControlPoints = false;
-				var currentInteractionPosition = {x: 0, y: 0};
-				var currentInteractionTarget = null;
-
-				var onCurveChange = opts.onCurveChange || null;
-
-				function onWindowResize() {
-
-					width = Math.min(MAX_WIDTH, window.innerWidth);
-					height = Math.min(MAX_HEIGHT, window.innerHeight);
-
-					drawWidth = width - PADDING * 2;
-					drawHeight = height - PADDING * 2;
-
-					canvas.width = width * dPR;
-					canvas.height = height * dPR;
-
-					canvas.style.width = width + 'px';
-					canvas.style.height = height + 'px';
-
-					ctx.scale(dPR, dPR);
-
-					canvasPosition = canvas.getBoundingClientRect();
-
-					draw();
-				}
-
-				function setInteractionPositionFromEvent(evt) {
-
-					var target = evt;
-
-					if (evt.touches) {
-						target = evt.touches[0];
-					}
-
-					currentInteractionPosition.x = target.clientX - canvasPosition.left;
-					currentInteractionPosition.y = target.clientY - canvasPosition.top;
-
-				}
-
-				function onStart(evt) {
-
-					setInteractionPositionFromEvent(evt);
-
-					var distanceToControlPoint1X = currentInteractionPosition.x -
-							(PADDING + controlPoint1.x * drawWidth);
-					var distanceToControlPoint1Y = currentInteractionPosition.y -
-							(PADDING + (1 - controlPoint1.y) * drawHeight);
-
-					var distanceToControlPoint2X = currentInteractionPosition.x -
-							(PADDING + controlPoint2.x * drawWidth);
-					var distanceToControlPoint2Y = currentInteractionPosition.y -
-							(PADDING + (1 - controlPoint2.y) * drawHeight);
-
-					var interactionDistanceToControlPoint1 = Math.sqrt(
-						distanceToControlPoint1X * distanceToControlPoint1X +
-						distanceToControlPoint1Y * distanceToControlPoint1Y
-					);
-
-					var interactionDistanceToControlPoint2 = Math.sqrt(
-						distanceToControlPoint2X * distanceToControlPoint2X +
-						distanceToControlPoint2Y * distanceToControlPoint2Y
-					);
-
-					if (interactionDistanceToControlPoint1 < MARKER_INTERACTION_RADIUS)
-						currentInteractionTarget = controlPoint1;
-					else if (interactionDistanceToControlPoint2 < MARKER_INTERACTION_RADIUS)
-						currentInteractionTarget = controlPoint2;
-
-					if (currentInteractionTarget !== null)
-						evt.preventDefault();
-				}
-
-				function onMove(evt) {
-
-					if (currentInteractionTarget === null)
-						return;
-
-					evt.preventDefault();
-					setInteractionPositionFromEvent(evt);
-
-					var x = limit(currentInteractionPosition.x, PADDING, PADDING + drawWidth);
-					var y = limit(currentInteractionPosition.y, 0,
-							PADDING + (PADDING * 0.5) + drawHeight);
-
-					currentInteractionTarget.x = (x - PADDING) / drawWidth;
-					currentInteractionTarget.y = 1 - ((y - PADDING) / drawHeight);
-
-					if (onCurveChange)
-						onCurveChange();
-
-					draw();
-				}
-
-				function onEnd(evt) {
-					currentInteractionTarget = null;
-				}
-
-				function limit(value, min, max) {
-					return Math.min(max, Math.max(min, value));
-				}
-
-				function getTimingFunctionCSS() {
-					return 'cubic-bezier(' +
-						controlPoint1.x.toPrecision(3) + ', ' +
-						controlPoint1.y.toPrecision(3) + ', ' +
-						controlPoint2.x.toPrecision(3) + ', ' +
-						controlPoint2.y.toPrecision(3) + ')';
-				}
-
-				/* Drawing functions */
-
-				function clear() {
-					ctx.clearRect(0, 0, width, height);
-				}
-
-				function draw() {
-					clear();
-					drawGrid();
-					drawCurve();
-					drawAxes();
-					drawMarkerLines();
-					drawMarkers();
-					drawEndpoints();
-				}
-
-				function drawAxes() {
-					ctx.save();
-					ctx.translate(PADDING, PADDING);
-
-					ctx.fillStyle = '#1F1F1F';
-					ctx.strokeStyle = '#1F1F1F';
-					ctx.lineWidth = 2;
-
-					// Left axis
-					ctx.beginPath();
-					ctx.moveTo(0, drawHeight + 1);
-					ctx.lineTo(0, 0);
-					ctx.stroke();
-					ctx.closePath();
-
-					// Left axis arrow
-					ctx.beginPath();
-					ctx.moveTo(0, 0);
-					ctx.lineTo(3, 12);
-					ctx.lineTo(-3, 12);
-					ctx.lineTo(0, 0);
-					ctx.closePath();
-					ctx.fill();
-					ctx.stroke();
-
-					// Bottom axis
-					ctx.beginPath();
-					ctx.moveTo(0, drawHeight);
-					ctx.lineTo(drawWidth, drawHeight);
-					ctx.stroke();
-					ctx.closePath();
-
-					// Bottom axis arrow
-					ctx.beginPath();
-					ctx.moveTo(drawWidth, drawHeight);
-					ctx.lineTo(drawWidth - 12, drawHeight + 3);
-					ctx.lineTo(drawWidth - 12, drawHeight - 3);
-					ctx.lineTo(drawWidth, drawHeight);
-					ctx.closePath();
-					ctx.fill();
-					ctx.stroke();
-
-					ctx.restore();
-				}
-
-				function drawCurve() {
-					ctx.save();
-					ctx.translate(PADDING + 0.5, PADDING + 0.5);
-
-					ctx.strokeStyle = '#979797';
-					ctx.lineWidth = 5;
-
-					ctx.beginPath();
-					ctx.moveTo(0, drawHeight);
-					ctx.bezierCurveTo(
-						controlPoint1.x * drawWidth,
-						(1 - controlPoint1.y) * drawHeight,
-						controlPoint2.x * drawWidth,
-						(1 - controlPoint2.y) * drawHeight,
-						drawWidth, 0);
-					ctx.stroke();
-					ctx.closePath();
-
-					ctx.restore();
-				}
-
-				function drawGrid() {
-
-					ctx.save();
-					ctx.translate(0.5, 0.5);
-
-					for (var x = GRID_SIZE; x < width; x += GRID_SIZE) {
-						ctx.beginPath();
-						ctx.moveTo(x, 0);
-						ctx.lineTo(x, x + height);
-
-						ctx.globalAlpha = x % 40 === 0 ? 0.1 : 0.05;
-
-						ctx.stroke();
-						ctx.closePath();
-					}
-
-					for (var y = GRID_SIZE; y < height; y += GRID_SIZE) {
-
-						ctx.beginPath();
-						ctx.moveTo(0, y);
-						ctx.lineTo(width, y);
-
-						ctx.globalAlpha = y % 40 === 0 ? 0.1 : 0.05;
-
-						ctx.stroke();
-						ctx.closePath();
-					}
-
-					ctx.restore();
-				}
-
-				function drawMarkerLines() {
-					ctx.save();
-					ctx.translate(PADDING + 0.5, PADDING + 0.5);
-
-					ctx.strokeStyle = '#979797';
-
-					ctx.beginPath();
-					ctx.moveTo(0, drawHeight);
-					ctx.lineTo(controlPoint1.x * drawWidth, (1 - controlPoint1.y) * drawHeight);
-					ctx.stroke();
-
-					ctx.moveTo(drawWidth, 0);
-					ctx.lineTo(controlPoint2.x * drawWidth, (1 - controlPoint2.y) * drawHeight);
-					ctx.stroke();
-					ctx.closePath();
-
-					ctx.restore();
-				}
-
-				function drawMarkers() {
-
-					ctx.save();
-					ctx.translate(PADDING, PADDING);
-
-					ctx.fillStyle = '#FFF';
-					ctx.strokeStyle = '#4285F4';
-					ctx.lineWidth = 2;
-
-					ctx.beginPath();
-					ctx.arc(controlPoint1.x * drawWidth, (1 - controlPoint1.y) * drawHeight,
-						MARKER_RADIUS, 0, TAU);
-					ctx.closePath();
-					ctx.fill();
-					ctx.stroke();
-
-					ctx.beginPath();
-					ctx.arc(controlPoint2.x * drawWidth, (1 - controlPoint2.y) * drawHeight,
-						MARKER_RADIUS, 0, TAU);
-					ctx.closePath();
-					ctx.fill();
-					ctx.stroke();
-
-					ctx.restore();
-				}
-
-				function drawEndpoints() {
-
-					ctx.save();
-					ctx.translate(PADDING, PADDING);
-
-					ctx.fillStyle = '#FFF';
-					ctx.strokeStyle = '#4285F4';
-					ctx.lineWidth = 5;
-
-					ctx.beginPath();
-					ctx.arc(0, drawHeight, ENDPOINT_RADIUS, 0, TAU);
-					ctx.closePath();
-					ctx.fill();
-					ctx.stroke();
-
-					ctx.beginPath();
-					ctx.arc(drawWidth, 0, ENDPOINT_RADIUS, 0, TAU);
-					ctx.closePath();
-					ctx.fill();
-					ctx.stroke();
-
-					ctx.restore();
-				}
-
-				function init() {
-					document.addEventListener('touchstart', onStart);
-					document.addEventListener('touchmove', onMove);
-					document.addEventListener('touchend', onEnd);
-
-					document.addEventListener('mousedown', onStart);
-					document.addEventListener('mousemove', onMove);
-					document.addEventListener('mouseup', onEnd);
-
-					window.addEventListener('resize', onWindowResize);
-					onWindowResize();
-				}
-
-				init();
-
-				return {
-					getTimingFunctionCSS: getTimingFunctionCSS
-				};
-			};
-
-			/** Bootstrap **/
-
-			var curveControl = new CURVECONTROL.Widget({
-				onCurveChange: onCurveChange
-			});
-			var testCurve = document.querySelector('.test-curve');
-			var box = document.querySelector('.box');
-			var cssOutput = document.querySelector('.css-output');
-			var fourSpace = '    ';
-			var sixteenSpace = fourSpace + fourSpace + fourSpace + fourSpace;
-
-			function onCurveChange() {
-
-				var curveValue = curveControl
-				    .getTimingFunctionCSS()
-				    .split(',');
-
-				cssOutput.textContent = 'transition: transform 650ms\n' +
-				    fourSpace + curveValue[0] + ',' + curveValue[1] + '\n' +
-				    sixteenSpace + curveValue[2] + ',' + curveValue[3] + ';';
-			}
-
-			function onCurveTest(evt) {
-				box.style.WebkitTransition =
-				    '-webkit-transform 650ms ' + curveControl.getTimingFunctionCSS();
-
-				box.style.MozTransition =
-				    '-moz-transform 650ms ' + curveControl.getTimingFunctionCSS();
-
-				box.style.transition =
-				    'transform 650ms ' + curveControl.getTimingFunctionCSS();
-
-				box.classList.toggle('move');
-				evt.preventDefault();
-			}
-
-			testCurve.addEventListener('touchstart', onCurveTest);
-			testCurve.addEventListener('click', onCurveTest);
-			onCurveChange();
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/inter-view-animation.html b/fundamentals/design-and-ux/animations/inter-view-animation.html
deleted file mode 100644
index d074d40..0000000
--- a/fundamentals/design-and-ux/animations/inter-view-animation.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html, body {
-			  width: 100%;
-			  height: 100%;
-			  margin: 0;
-			  padding: 0;
-			  font-family: 'Helvetica', 'Arial', sans-serif;
-			}
-
-			.container {
-			  width: 100%;
-			  height: 100%;
-			  max-width: 400px;
-			  max-height: 600px;
-			  overflow: hidden;
-			  position: relative;
-			}
-
-			.view {
-			  will-change: transform;
-			  width: 100%;
-			  position: absolute;
-			  left: 0;
-			  top: 0;
-			  transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			}
-
-			.list-view {
-			  height: 100%;
-			  width: 100%;
-			  position: relative;
-			  overflow: scroll;
-			  -webkit-overflow-scrolling: touch;
-			}
-
-			.details-view {
-			  -webkit-transform: translateX(100%);
-			  transform: translateX(100%);
-
-			  box-sizing: border-box;
-			  padding: 30px;
-			}
-
-			.view-change .list-view {
-			  -webkit-transform: translateX(-100%);
-			  transform: translateX(-100%);
-			}
-
-			.view-change .details-view {
-			  -webkit-transform: translateX(0);
-			  transform: translateX(0);
-			}
-
-			.list {
-			  list-style: none;
-			  padding: 0;
-			  margin: 0;
-			}
-
-			.list li {
-			  box-sizing: border-box;
-			  line-height: 50px;
-			  padding: 0 30px;
-			  border-bottom: 1px solid #CCC;
-			  background: linear-gradient(to bottom, #FFF, #FAFAFA);
-			}
-    </style>
-  </head>
-  <body>
-    <div class="container">
-      <div class="view list-view">
-        <ul class="list">
-          <li class="list-item">Item 1</li>
-          <li class="list-item">Item 2</li>
-          <li class="list-item">Item 3</li>
-          <li class="list-item">Item 4</li>
-          <li class="list-item">Item 5</li>
-          <li class="list-item">Item 6</li>
-          <li class="list-item">Item 7</li>
-          <li class="list-item">Item 8</li>
-          <li class="list-item">Item 9</li>
-          <li class="list-item">Item 10</li>
-          <li class="list-item">Item 11</li>
-          <li class="list-item">Item 12</li>
-          <li class="list-item">Item 13</li>
-          <li class="list-item">Item 14</li>
-          <li class="list-item">Item 15</li>
-          <li class="list-item">Item 16</li>
-          <li class="list-item">Item 17</li>
-          <li class="list-item">Item 18</li>
-          <li class="list-item">Item 19</li>
-          <li class="list-item">Item 20</li>
-          <li class="list-item">Item 21</li>
-          <li class="list-item">Item 22</li>
-          <li class="list-item">Item 23</li>
-          <li class="list-item">Item 24</li>
-          <li class="list-item">Item 25</li>
-          <li class="list-item">Item 26</li>
-          <li class="list-item">Item 27</li>
-          <li class="list-item">Item 28</li>
-          <li class="list-item">Item 29</li>
-          <li class="list-item">Item 30</li>
-          <li class="list-item">Item 31</li>
-          <li class="list-item">Item 32</li>
-        </ul>
-      </div>
-      <div class="view details-view">
-        <h1>Details view for <span class="item-name"></span></h1>
-        <button class="back-button">Back</button>
-      </div>
-    </div>
-
-    <script>
-      function onViewChange(evt) {
-			  container.classList.toggle('view-change');
-
-			  if (evt.currentTarget.classList.contains('list-item'))
-			    itemName.textContent = evt.currentTarget.textContent;
-			}
-
-			var container = document.querySelector('.container');
-			var itemName = document.querySelector('.item-name');
-			var backButton = document.querySelector('.back-button');
-			var listItems = document.querySelectorAll('.list li');
-			for (var i = 0; i < listItems.length; i++) {
-			  listItems[i].addEventListener('click', onViewChange, false);
-			}
-
-			backButton.addEventListener('click', onViewChange);
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/animations/modal-view-animation.html b/fundamentals/design-and-ux/animations/modal-view-animation.html
deleted file mode 100644
index 539dc8f..0000000
--- a/fundamentals/design-and-ux/animations/modal-view-animation.html
+++ /dev/null
@@ -1,300 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
-    <title>Simple Box Move</title>
-    <style>
-      html, body {
-			  width: 100%;
-			  height: 100%;
-			  margin: 0;
-			  padding: 0;
-			  font-family: 'Helvetica', 'Arial';
-			}
-
-			header {
-			  height: 50px;
-			  background: #3C78D8;
-			  z-index: 1;
-			  top: 0;
-			  left: 0;
-			  width: 100%;
-			  max-width: 400px;
-			  line-height: 50px;
-			  text-align: right;
-
-			  position: fixed;
-			  will-change: transform;
-			}
-
-			.dont-press-me-button {
-			  background: #FFF;
-			  border: none;
-			  color: #333;
-			  font-size: 13px;
-			  padding: 6px 10px;
-			  border-radius: 2px;
-			  margin-right: 10px;
-			}
-
-			.container,
-			.modal-view-container {
-			  width: 100%;
-			  height: 100%;
-			  max-width: 400px;
-			  max-height: 600px;
-			  overflow: hidden;
-			  position: relative;
-			  padding-top: 50px;
-			  box-sizing: border-box;
-			  z-index: 10;
-			  pointer-events: none;
-			}
-
-			.modal-view-container {
-			  position: fixed;
-			  top: 0;
-			  left: 0;
-			}
-
-			.view.modal {
-			  position: fixed;
-			  top: 0;
-			  left: 0;
-			  width: 100%;
-			  height: 100%;
-			  z-index: 2;
-			  max-width: 400px;
-			  max-height: 600px;
-
-			  -webkit-transform: scale(1.15);
-			  transform: scale(1.15);
-
-			  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
-			    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
-			    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-
-			  pointer-events: none;
-			  opacity: 0;
-			  will-change: transform, opacity;
-
-			}
-
-			.view.modal.visible {
-			  pointer-events: auto;
-			  opacity: 1;
-			  -webkit-transform: scale(1);
-			  transform: scale(1);
-
-			  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
-			    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
-			    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			}
-
-			.modal-view-details {
-			  background: #FFF;
-			  z-index: 2;
-			  position: fixed;
-			  left: 50%;
-			  top: 50%;
-			  padding: 25px 25px 50px 25px;
-			  width: 65%;
-			  -webkit-transform: translate(-50%, -50%);
-			  transform: translate(-50%, -50%);
-			  border-radius: 2px;
-			  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
-			}
-
-			.modal-view-details h1 {
-			  margin: 0.2em 0 0.4em 0;
-			  padding: 0;
-			  line-height: 1;
-			  font-size: 24px;
-			  color: #111;
-			}
-
-			.modal-view-details p {
-			  font-size: 14px;
-			  line-height: 1.6;
-			  margin: 0 0 1em 0;
-			  color: #666;
-			}
-
-			.modal-view-details button {
-			  position: absolute;
-			  bottom: 10px;
-			  right: 10px;
-			  background: none;
-			  color: #3C78D8;;
-			  border-radius: 2px;
-			  border: none;
-			  font-size: 16px;
-			  padding: 6px 10px;
-			  text-transform: uppercase;
-			}
-
-			.modal:after {
-			  position: fixed;
-			  background: rgba(0,0,0,0.4);
-			  width: 100%;
-			  height: 100%;
-			  left: 0;
-			  top: 0;
-			  display: block;
-			  content: '';
-			}
-
-			.view {
-			  will-change: transform;
-			  width: 100%;
-			  position: absolute;
-			  left: 0;
-			  top: 0;
-			  transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-			}
-
-			.list-view {
-			  height: 100%;
-			  width: 100%;
-			  position: relative;
-			  overflow: scroll;
-			  -webkit-overflow-scrolling: touch;
-			}
-
-			.details-view {
-			  -webkit-transform: translateX(100%);
-			  transform: translateX(100%);
-
-			  box-sizing: border-box;
-			  padding: 30px;
-			}
-
-			.view-change .list-view {
-			  -webkit-transform: translateX(-100%);
-			  transform: translateX(-100%);
-			}
-
-			.view-change .details-view {
-			  -webkit-transform: translateX(0);
-			  transform: translateX(0);
-			}
-
-			.list {
-			  list-style: none;
-			  padding: 0;
-			  margin: 0;
-			}
-
-			.list li {
-			  box-sizing: border-box;
-			  line-height: 50px;
-			  padding: 0 30px;
-			  border-bottom: 1px solid #CCC;
-			  background: linear-gradient(to bottom, #FFF, #FAFAFA);
-			}
-    </style>
-  </head>
-  <body>
-    <header>
-      <button class="dont-press-me-button">Don't press me.</button>
-    </header>
-    <div class="container">
-      <div class="view list-view">
-        <ul class="list">
-          <li class="list-item">Item 1</li>
-          <li class="list-item">Item 2</li>
-          <li class="list-item">Item 3</li>
-          <li class="list-item">Item 4</li>
-          <li class="list-item">Item 5</li>
-          <li class="list-item">Item 6</li>
-          <li class="list-item">Item 7</li>
-          <li class="list-item">Item 8</li>
-          <li class="list-item">Item 9</li>
-          <li class="list-item">Item 10</li>
-          <li class="list-item">Item 11</li>
-          <li class="list-item">Item 12</li>
-          <li class="list-item">Item 13</li>
-          <li class="list-item">Item 14</li>
-          <li class="list-item">Item 15</li>
-          <li class="list-item">Item 16</li>
-          <li class="list-item">Item 17</li>
-          <li class="list-item">Item 18</li>
-          <li class="list-item">Item 19</li>
-          <li class="list-item">Item 20</li>
-          <li class="list-item">Item 21</li>
-          <li class="list-item">Item 22</li>
-          <li class="list-item">Item 23</li>
-          <li class="list-item">Item 24</li>
-          <li class="list-item">Item 25</li>
-          <li class="list-item">Item 26</li>
-          <li class="list-item">Item 27</li>
-          <li class="list-item">Item 28</li>
-          <li class="list-item">Item 29</li>
-          <li class="list-item">Item 30</li>
-          <li class="list-item">Item 31</li>
-          <li class="list-item">Item 32</li>
-        </ul>
-      </div>
-      <div class="view details-view">
-        <h1>Details view for <span class="item-name"></span></h1>
-        <button class="back-button">Back</button>
-      </div>
-    </div>
-    <div class="modal-view-container">
-      <div class="modal view">
-        <div class="modal-view-details">
-          <h1>Oh no!</h1>
-          <p>You pressed the button! Well that's gone and torn it, hasn't it?</p>
-          <button>Sorry</button>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      function onViewChange(evt) {
-			  container.classList.toggle('view-change');
-
-			  if (evt.currentTarget.classList.contains('list-item'))
-			    itemName.textContent = evt.currentTarget.textContent;
-			}
-
-			function onDontPressPress(evt) {
-			  modal.classList.add('visible');
-			}
-
-			function onModalDismissPress(evt) {
-			  modal.classList.remove('visible');
-			}
-
-			var modal = document.querySelector('.modal');
-			var modalDismissButton = modal.querySelector('button');
-
-			var container = document.querySelector('.container');
-			var itemName = document.querySelector('.item-name');
-			var backButton = document.querySelector('.back-button');
-			var dontPressMeButton = document.querySelector('.dont-press-me-button');
-			var listItems = document.querySelectorAll('.list li');
-			for (var i = 0; i < listItems.length; i++) {
-			  listItems[i].addEventListener('click', onViewChange, false);
-			}
-
-			backButton.addEventListener('click', onViewChange);
-			dontPressMeButton.addEventListener('click', onDontPressPress);
-			modalDismissButton.addEventListener('click', onModalDismissPress);
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/input/forms/order.html b/fundamentals/design-and-ux/input/forms/order.html
deleted file mode 100644
index 39c9e72..0000000
--- a/fundamentals/design-and-ux/input/forms/order.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-
-      /* // [START invalidstyle] */
-      input.dirty:not(:focus):invalid {
-        background-color: #FFD9D9;
-      }
-      input.dirty:not(:focus):valid {
-        background-color: #D9FFD9;
-      }
-      /* // [END invalidstyle] */
-
-    </style>
-    <title>Creating Amazing Forms: Sample order form</title>
-  </head>
-  <body>
-    <div role="main">
-      <form method="post" id="usrForm">
-        <fieldset>
-          <legend>Contact Info</legend>
-          <!-- // [START autocomplete] -->
-          <label for="frmNameA">Name</label>
-          <input type="text" name="name" id="frmNameA"
-            placeholder="Full name" required autocomplete="name">
-
-          <label for="frmEmailA">Email</label>
-          <input type="email" name="email" id="frmEmailA"
-            placeholder="name@example.com" required autocomplete="email">
-
-          <label for="frmEmailC">Confirm Email</label>
-          <input type="email" name="emailC" id="frmEmailC"
-            placeholder="name@example.com" required autocomplete="email">
-
-          <label for="frmPhoneNumA">Phone</label>
-          <input type="tel" name="phone" id="frmPhoneNumA"
-            placeholder="+1-555-555-1212" required autocomplete="tel">
-          <!-- // [END autocomplete] -->
-
-          <label for="frmShoeSize">Shoe Size</label>
-          <input type="number" name="shoe-size" id="frmShoeSize"
-            min="1" max="18" step="0.5">
-
-          <!-- // [START datalist] -->
-          <label for="frmFavChocolate">Favorite Type of Chocolate</label>
-          <input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
-          <datalist id="chocType">
-            <option value="white">
-            <option value="milk">
-            <option value="dark">
-          </datalist>
-          <!-- // [END datalist] -->
-        </fieldset>
-
-
-        <fieldset>
-          <legend>Shipping</legend>
-          <!-- // [START labels] -->
-          <label for="frmAddressS">Address</label>
-          <input type="text" name="ship-address" required id="frmAddressS"
-            placeholder="123 Any Street" autocomplete="shipping street-address">
-          <!-- // [END labels] -->
-
-          <label for="frmCityS">City</label>
-          <input type="text" name="ship-city" required id="frmCityS"
-            placeholder="New York" autocomplete="shipping locality">
-
-          <label for="frmStateS">State</label>
-          <input type="text" name="ship-state" required id="frmStateS"
-            placeholder="NY" autocomplete="shipping region">
-
-          <label for="frmZipS">Zip</label>
-          <input type="text" name="ship-zip" required id="frmZipS"
-            placeholder="10011" autocomplete="shipping postal-code">
-
-          <label for="frmCountryS">Country</label>
-          <input type="text" name="ship-country" required id="frmCountryS"
-            placeholder="USA" autocomplete="shipping country">
-
-          <label>
-            <input type="checkbox" name="billAndShip" id="cbBillAndShip">
-            Bill to this address.
-          </label>
-        </fieldset>
-
-        <fieldset>
-          <legend>Billing</legend>
-
-          <label for="frmAddressB">Address</label>
-          <input type="text" name="bill-address" id="frmAddressB" required
-            placeholder="123 Any Street" autocomplete="billing street-address">
-
-          <label for="frmCityB">City</label>
-          <input type="text" name="bill-city" id="frmCityB" required
-            placeholder="New York" autocomplete="billing locality">
-
-          <label for="frmStateB">State</label>
-          <input type="text" name="bill-state" id="frmStateB" required
-            placeholder="NY" autocomplete="billing region">
-
-          <label for="frmZipB">Zip</label>
-          <input type="text" name="bill-zip" id="frmZipB" required
-            placeholder="10011" autocomplete="billing postal-code">
-
-          <label for="frmCountryB">Country</label>
-          <input type="text" name="bill-country" id="frmCountryB"
-            required placeholder="USA" autocomplete="billing country">
-        </fieldset>
-
-        <fieldset>
-          <legend>Payment</legend>
-          <p>Do <b>NOT</b> provide real credit card information in this field.</p>
-          <label for="frmNameCC">Name on card</label>
-          <input type="text" name="ccname" id="frmNameCC"
-            required placeholder="Full Name" autocomplete="cc-name">
-
-          <label for="frmCCNum">Card Number</label>
-          <input type="text" name="cardnumber" id="frmCCNum"
-            required autocomplete="cc-number">
-
-          <label for="frmCCCVC">CVC</label>
-          <input type="text" name="cvc" id="frmCCCVC" required
-            autocomplete="cc-csc">
-
-          <label for="frmCCExp">Expiry</label>
-          <!-- // [START placeholder] -->
-          <input type="text" name="cc-exp" id="frmCCExp" required
-            placeholder="MM-YYYY" autocomplete="cc-exp">
-          <!-- // [END placeholder] -->
-        </fieldset>
-        <div>
-          <button class="btn" id="butCheckout">Check Out</button>
-        </div>
-      </form>
-    </div>
-
-    <script type="text/javascript">
-      var form;
-
-      function initForm() {
-        form = document.getElementById("usrForm")
-        /* // [START preventsubmission] */
-        form.addEventListener("submit", function(evt) {
-          if (form.checkValidity() === false) {
-            evt.preventDefault();
-            alert("Form is invalid - submission prevented!");
-            return false;
-          } else {
-            // To prevent data from being sent, we've prevented submission
-            // here, but normally this code block would not exist.
-            evt.preventDefault();
-            alert("Form is valid - submission prevented to protect privacy.");
-            return false;
-          }
-        });
-        /* // [END preventsubmission] */
-      }
-
-      function initConfirmEmail() {
-        var elem = document.getElementById("frmEmailC");
-        elem.addEventListener("blur", verifyEmail);
-        function verifyEmail(input) {
-          input = input.srcElement;
-          sampleCompleted("Forms-orderConfirm");
-          var primaryEmail = document.getElementById('frmEmailA').value
-          /* // [START customvalidation] */
-          if (input.value != primaryEmail) {
-            // the provided value doesn't match the primary email address
-            input.setCustomValidity('The two email addresses must match.');
-            console.log("E-mail addresses do not match", primaryEmail, input.value);
-          } else {
-            // input is valid -- reset the error message
-            input.setCustomValidity('');
-          }
-          /* // [END customvalidation] */
-        }
-      }
-
-      function initInputs() {
-        /* // [START initinputs] */
-        var inputs = document.getElementsByTagName("input");
-        var inputs_len = inputs.length;
-        var addDirtyClass = function(evt) {
-          sampleCompleted("Forms-order-dirty");
-          evt.srcElement.classList.toggle("dirty", true);
-        };
-        for (var i = 0; i < inputs_len; i++) {
-          var input = inputs[i];
-          input.addEventListener("blur", addDirtyClass);
-          input.addEventListener("invalid", addDirtyClass);
-          input.addEventListener("valid", addDirtyClass);
-        }
-        /* // [END initinputs] */
-      }
-
-      function initNoSubmit() {
-        form.addEventListener("submit", function(evt) {
-          evt.preventDefault();
-          alert("Submission of this form is prevented.");
-        });
-      }
-
-      initForm();
-      initInputs();
-      initConfirmEmail();
-
-
-    </script>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/input/forms/rac.html b/fundamentals/design-and-ux/input/forms/rac.html
deleted file mode 100644
index af1d553..0000000
--- a/fundamentals/design-and-ux/input/forms/rac.html
+++ /dev/null
@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-      .hidden {
-        display: none;
-      }
-
-      /* // [START invalidstyle] */
-      input.dirty:not(:focus):invalid {
-        background-color: pink;
-      }
-      /* // [END invalidstyle] */
-
-    </style>
-    <title>Creating Amazing Forms: Sample order form with requestAutocomplete</title>
-  </head>
-  <body>
-    <div role="main">
-      <p>Do not provide real credit card data on this form.</p>
-      <div id="racStatus">
-        <p id="racSubject"></p>
-        <p id="racMessage"></p>
-        <button id="doRAC" type="button">Check Out with requestAutocomplete</button>
-      </div>
-      <form method="post" id="usrForm" class="hidden">
-        <fieldset>
-          <legend>Contact Info</legend>
-          <label for="frmNameA">Name</label>
-          <input type="text" name="name" id="frmName"
-          placeholder="Full name" required autocomplete="name">
-
-          <label for="frmEmailA">E-mail</label>
-          <input type="email" name="e-mail" id="frmEmailA"
-            placeholder="name@example.com" required autocomplete="email">
-
-          <label for="frmEmailC">Confirm E-mail</label>
-          <input type="email" name="e-mailC" id="frmEmailC"
-            placeholder="name@example.com" autocomplete="email">
-
-          <label for="frmPhoneNumA">Phone</label>
-          <input type="tel" name="phone" id="frmPhoneNumA"
-            placeholder="+1-555-555-1212" required autocomplete="tel">
-        </fieldset>
-
-        <fieldset>
-          <legend>Shipping</legend>
-
-          <label for="frmAddressS">Address</label>
-          <input type="text" name="ship-address" required id="frmAddressS"
-            placeholder="123 Any Street" autocomplete="shipping street-address">
-
-          <label for="frmCityS">City</label>
-          <input type="text" name="ship-city" required id="frmCityS"
-            placeholder="New York" autocomplete="shipping locality">
-
-          <label for="frmStateS">State</label>
-          <input type="text" name="ship-state" required id="frmStateS"
-            placeholder="NY" autocomplete="shipping region">
-
-          <label for="frmZipS">Zip</label>
-          <input type="text" name="ship-zip" required id="frmZipS"
-            placeholder="10011" autocomplete="shipping postal-code">
-
-          <label for="frmCountryS">Country</label>
-          <input type="text" name="ship-country" required id="frmCountryS"
-            placeholder="USA" autocomplete="shipping country">
-
-          <label>
-            <input type="checkbox" name="billAndShip" id="cbBillAndShip">
-            Bill to this address.
-          </label>
-        </fieldset>
-
-        <fieldset>
-          <legend>Billing</legend>
-
-          <label for="frmAddressB">Address</label>
-          <input type="text" name="bill-address" id="frmAddressB" required
-            placeholder="123 Any Street" autocomplete="billing street-address">
-
-          <label for="frmCityB">City</label>
-          <input type="text" name="bill-city" id="frmCityB" required
-            placeholder="New York" autocomplete="billing locality">
-
-          <label for="frmStateB">State</label>
-          <input type="text" name="bill-state" id="frmStateB" required
-            placeholder="NY" autocomplete="billing region">
-
-          <label for="frmZipB">Zip</label>
-          <input type="text" name="bill-zip" id="frmZipB" required
-            placeholder="10011" autocomplete="billing postal-code">
-
-          <label for="frmCountryB">Country</label>
-          <input type="text" name="bill-country" id="frmCountryB"
-            required placeholder="USA" autocomplete="billing country">
-        </fieldset>
-
-        <fieldset>
-          <legend>Payment</legend>
-          <p>Do <b>NOT</b> provide real credit card information in this field.</p>
-          <label for="frmNameCC">Name on card</label>
-          <input type="text" name="ccname" id="frmNameCC"
-            required placeholder="Full Name" autocomplete="cc-name">
-
-          <label for="frmCCNum">Card Number</label>
-          <input type="text" name="cardnumber" id="frmCCNum"
-            required autocomplete="cc-number">
-
-          <label for="frmCCCVC">CVC</label>
-          <input type="text" name="cvc" id="frmCCCVC" required
-            autocomplete="cc-csc">
-
-          <label for="frmCCExp">Expiry</label>
-          <input type="text" name="cc-exp" id="frmCCExp" required
-            placeholder="MM-YYYY" autocomplete="cc-exp">
-        </fieldset>
-
-        <button class="btn" id="butCheckout">Check Out</button>
-
-      </form>
-    </div>
-
-
-    <script type="text/javascript">
-      var form, racSubject, racMessage;
-
-      function initForm() {
-        racSubject = document.getElementById("racSubject");
-        racMessage = document.getElementById("racMessage");
-
-        /* // [START rac] */
-        var doRAC = document.getElementById("doRAC");
-        doRAC.addEventListener("click", doRequestAutocomplete);
-
-        form = document.getElementById("usrForm");
-        form.addEventListener("autocompleteerror", requestAutocompleteError);
-        form.addEventListener("autocomplete", requestAutocompleteCompleted);
-
-        if (form.requestAutocomplete) {
-          isRACSupported(true, "");
-        } else {
-          isRACSupported(false, "Please complete the form manually.");
-        }
-        /* // [END rac] */
-
-        // To prevent data from being sent, we've prevented submission
-        // here, but normally this code block would not exist.
-        form.addEventListener("submit", function(evt) {
-          evt.preventDefault();
-          alert("Submission prevented to protect privacy.");
-          return false;
-        });
-      }
-
-      function isRACSupported(supported, message) {
-        if (supported === true) {
-          racSubject.textContent = "requestAutocomplete is supported!";
-          form.classList.toggle("hidden", true);
-          doRAC.classList.toggle("hidden", false);
-        } else {
-          racSubject.textContent = "Sorry, requestAutocomplete isn't supported.";
-          form.classList.toggle("hidden", false);
-          doRAC.classList.toggle("hidden", true);
-          sampleCompleted("Forms-rAc-unsupported");
-        }
-        racMessage.textContent = message;
-      }
-
-      function doRequestAutocomplete(evt) {
-        console.log("doRequestAutocomplete", evt);
-        sampleCompleted("Forms-rAc");
-        form.requestAutocomplete();
-      }
-
-      /* // [START handlerac] */
-      function requestAutocompleteCompleted(evt) {
-        console.log("requestAutocomplete Completed", evt);
-        form.classList.toggle("hidden", false);
-      }
-
-      function requestAutocompleteError(evt) {
-        console.log("requestAutocomplete Error", evt);
-        isRACSupported(false, "An error occurred attempting to autocomplete the form.");
-      }
-      /* // [END handlerac] */
-
-      initForm();
-
-    </script>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/input/touch/forced-states-example.html b/fundamentals/design-and-ux/input/touch/forced-states-example.html
deleted file mode 100644
index 3070207..0000000
--- a/fundamentals/design-and-ux/input/touch/forced-states-example.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Forced Button States</title>
-
-  <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
-
-  <style>
-  	body {
-	  background-color: #d3e2fc;
-
-	  margin: 32px;
-
-	  font-family: 'Roboto', sans-serif;
-	  color: #ecf0f1;
-	}
-
-	a {
-	  color: #ecf0f1;
-	}
-
-	button {
-	  display: block;
-
-	  width: 100%;
-	  max-width: 400px;
-
-	  padding: 16px;
-	  margin: 0 auto 16px auto;
-
-	  box-sizing: border-box;
-
-	  border-style: none;
-	  border-radius: 6px;
-
-	  color: inherit;
-	  font-family: inherit;
-	  font-size: inherit;
-	  text-align:center;
-	  text-decoration: none;
-
-	  background-color: #4285f4;
-
-	  /* background-image: none; used to suppress changes in style on FF OS */
-	  background-image: none;
-	}
-
-	button::-moz-focus-inner {
-	  border: 0;
-	}
-
-	button.hover {
-	  background-color: #296CDB;
-	}
-
-	button.focus {
-	  background-color: #0F52C1;
-
-	  /* The outline parameter suppresses the border color / outline when focused */
-	  outline: 0;
-	}
-
-	button.active {
-	  background-color: #0039A8;
-	}
-  </style>
-</head>
-<body>
-  <button class="btn" tabindex="1">Default State</button>
-
-  <button class="hover" tabindex="2">Hover State</button>
-
-  <button class="focus" tabindex="4">Focus State</button>
-
-  <button class="active" tabindex="3">Active State</button>
-
-  <script>
-    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-    e.src='//www.google-analytics.com/analytics.js';
-    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-    ga('create','UA-52746336-1');ga('send','pageview');
-    var isCompleted = {};
-    function sampleCompleted(sampleName){
-      if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-        ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-        isCompleted[sampleName] = true;
-      }
-    }
-  </script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/input/touch/states-example.html b/fundamentals/design-and-ux/input/touch/states-example.html
deleted file mode 100644
index 5b1bca7..0000000
--- a/fundamentals/design-and-ux/input/touch/states-example.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>States Example</title>
-
-    <!-- // [START ms-specific] -->
-    <!-- IE Specific to remove tap highlight -->
-    <meta name="msapplication-tap-highlight" content="no">
-    <!-- // [END ms-specific] -->
-
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
-
-    <style>
-      body {
-        background-color: #d3e2fc;
-
-        margin: 32px;
-
-        font-family: 'Roboto', sans-serif;
-        color: #ecf0f1;
-      }
-
-      a {
-        color: #ecf0f1;
-      }
-
-      button {
-        display: block;
-
-        width: 100%;
-        max-width: 400px;
-
-        padding: 16px;
-        margin: 0 auto 16px auto;
-
-        box-sizing: border-box;
-
-        border-style: none;
-        border-radius: 6px;
-
-        color: inherit;
-        font-family: inherit;
-        font-size: inherit;
-        text-align:center;
-        text-decoration: none;
-
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-      /* // [START btnstates] */
-      .btn {
-        background-color: #4285f4;
-      }
-
-      .btn:hover {
-        background-color: #296CDB;
-      }
-
-      .btn:focus {
-        background-color: #0F52C1;
-
-        /* The outline parameter suppresses the border
-        color / outline when focused */
-        outline: 0;
-      }
-
-      .btn:active {
-        background-color: #0039A8;
-      }
-      /* // [END btnstates] */
-
-      /* // [START webkit-specific] */
-      /* Webkit / Chrome Specific CSS to remove tap
-      highlight color */
-      .btn {
-        -webkit-tap-highlight-color: transparent;
-      }
-      /* // [END webkit-specific] */
-
-      /* // [START ff-specific] */
-      /* Firefox Specific CSS to remove button
-      differences and focus ring */
-      .btn {
-        background-image: none;
-      }
-
-      .btn::-moz-focus-inner {
-        border: 0;
-      }
-      /* // [END ff-specific] */
-    </style>
-  </head>
-
-  <body>
-    <button class="btn" tabindex="1">Button 1</button>
-
-    <button class="btn hover" tabindex="2">Button 2</button>
-
-    <button class="btn active" tabindex="3">Button 3</button>
-
-    <button class="btn focus" tabindex="4">Button 4</button>
-
-    <script>
-      window.onload = function() {
-        if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
-          document.body.addEventListener('touchstart', function() {}, false);
-        }
-      };
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-      var isCompleted = {};
-      function sampleCompleted(sampleName){
-        if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-          ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-          isCompleted[sampleName] = true;
-        }
-      }
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/input/touch/touch-demo-1.html b/fundamentals/design-and-ux/input/touch/touch-demo-1.html
deleted file mode 100644
index 5180300..0000000
--- a/fundamentals/design-and-ux/input/touch/touch-demo-1.html
+++ /dev/null
@@ -1,453 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Touch Example 1</title>
-
-    <!-- IE Specific to remove tap highlight -->
-    <meta name="msapplication-tap-highlight" content="no">
-
-    <style>
-      html, body {
-        width: 100%;
-        height: 100%;
-
-        margin: 0;
-        padding: 0;
-      }
-
-      body {
-        width: 100%;
-        height: 100%;
-
-        background-color: #d3e2fc;
-
-        font-family: 'Roboto', sans-serif;
-        color: #ecf0f1;
-      }
-
-      .content {
-        padding: 32px;
-        box-sizing: border-box;
-
-        overflow: hidden;
-      }
-
-      .swipe-element {
-        position: relative;
-
-        width: 100%;
-        height: 60px;
-      }
-
-      .swipe-front {
-        position: absolute;
-
-        width: 100%;
-        height: 60px;
-
-        left: 0;
-        top: 0;
-
-        margin: 0;
-        padding: 8px;
-        box-sizing: border-box;
-
-        text-align: center;
-
-        color: #ecf0f1;
-        line-height: 44px;
-        vertical-align: center;
-
-        background-color: #4285f4;
-
-        z-index: 2;
-
-        -ms-touch-action: none;
-        /* // [START touch-action-example] */
-        /* Pass all touches to javascript */
-        touch-action: none;
-        /* // [END touch-action-example] */
-      }
-
-      .swipe-back {
-        position: absolute;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-
-        width: 100%;
-        height: 60px;
-
-        left: 0;
-        top: 0;
-
-        -ms-flex-direction: row;
-        -webkit-flex-direction: row;
-        flex-direction: row;
-
-        -ms-flex-pack: justify;
-        -webkit-justify-content: space-around;
-        justify-content: space-around;
-
-        -ms-flex-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-
-        padding: 0 10px;
-        box-sizing: border-box;
-      }
-
-      .swipe-back button {
-        display: inline-block;
-
-        width: 40px;
-        height: 40px;
-
-        background-color: #4285f4;
-
-        border-radius: 100%;
-        border-style: none;
-      }
-
-      .swipe-back button:nth-child(2) {
-        background-color: #0f9d58;
-      }
-
-      .swipe-back button:nth-child(3) {
-        background-color: #cb4437;
-      }
-
-      .swipe-back button:nth-child(4) {
-        background-color: #f4b400;
-      }
-
-      .promote-layer {
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-      }
-    </style>
-  </head>
-
-  <body>
-
-    <section class="content">
-      <div class="swipe-element">
-        <div class="swipe-back">
-          <button></button>
-          <button></button>
-          <button></button>
-          <button></button>
-        </div>
-        <p class="swipe-front promote-layer">Swipe Me</p>
-      </div>
-    </section>
-
-    <section class="content">
-      <div class="swipe-element">
-        <div class="swipe-back">
-          <button></button>
-          <button></button>
-          <button></button>
-          <button></button>
-        </div>
-        <p class="swipe-front promote-layer">Swipe Me Too</p>
-      </div>
-    </section>
-
-    <script>
-      // Shim for requestAnimationFrame from Paul Irishpaul ir
-      // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
-      window.requestAnimFrame = (function(){
-        'use strict';
-
-        return  window.requestAnimationFrame       ||
-                window.webkitRequestAnimationFrame ||
-                window.mozRequestAnimationFrame    ||
-                function( callback ){
-                  window.setTimeout(callback, 1000 / 60);
-                };
-      })();
-
-      /* // [START pointereventsupport] */
-      var pointerDownName = 'pointerdown';
-      var pointerUpName = 'pointerup';
-      var pointerMoveName = 'pointermove';
-
-      if(window.navigator.msPointerEnabled) {
-        pointerDownName = 'MSPointerDown';
-        pointerUpName = 'MSPointerUp';
-        pointerMoveName = 'MSPointerMove';
-      }
-
-      // Simple way to check if some form of pointerevents is enabled or not
-      window.PointerEventsSupport = false;
-      if(window.PointerEvent || window.navigator.msPointerEnabled) {
-        window.PointerEventsSupport = true;
-      }
-      /* // [END pointereventsupport] */
-
-      function SwipeRevealItem(element) {
-        'use strict';
-
-        // Gloabl state variables
-        var STATE_DEFAULT = 1;
-        var STATE_LEFT_SIDE = 2;
-        var STATE_RIGHT_SIDE = 3;
-
-        var swipeFrontElement = element.querySelector('.swipe-front');
-        var rafPending = false;
-        var initialTouchPos = null;
-        var lastTouchPos = null;
-        var currentXPosition = 0;
-        var currentState = STATE_DEFAULT;
-        var handleSize = 10;
-
-        // Perform client width here as this can be expensive and doens't
-        // change until window.onresize
-        var itemWidth = swipeFrontElement.clientWidth;
-        var slopValue = itemWidth * (1/4);
-
-        // On resize, change the slop value
-        this.resize = function() {
-          itemWidth = swipeFrontElement.clientWidth;
-          slopValue = itemWidth * (1/4);
-        };
-
-        /* // [START handle-start-gesture] */
-        // Handle the start of gestures
-        this.handleGestureStart = function(evt) {
-          evt.preventDefault();
-
-          if(evt.touches && evt.touches.length > 1) {
-            return;
-          }
-
-          // Add the move and end listeners
-          if (window.PointerEvent) {
-            evt.target.setPointerCapture(evt.pointerId);
-          } else {
-            // Add Mouse Listeners
-            document.addEventListener('mousemove', this.handleGestureMove, true);
-            document.addEventListener('mouseup', this.handleGestureEnd, true);
-          }
-
-          initialTouchPos = getGesturePointFromEvent(evt);
-
-          swipeFrontElement.style.transition = 'initial';
-        }.bind(this);
-        /* // [END handle-start-gesture] */
-
-        // Handle move gestures
-        //
-        /* // [START handle-move] */
-        this.handleGestureMove = function (evt) {
-          evt.preventDefault();
-
-          if(!initialTouchPos) {
-            return;
-          }
-
-          lastTouchPos = getGesturePointFromEvent(evt);
-
-          if(rafPending) {
-            return;
-          }
-
-          rafPending = true;
-
-          window.requestAnimFrame(onAnimFrame);
-        }.bind(this);
-        /* // [END handle-move] */
-
-        /* // [START handle-end-gesture] */
-        // Handle end gestures
-        this.handleGestureEnd = function(evt) {
-          evt.preventDefault();
-
-          if(evt.touches && evt.touches.length > 0) {
-            return;
-          }
-
-          rafPending = false;
-
-          // Remove Event Listeners
-          if (window.PointerEvent) {
-            evt.target.releasePointerCapture(evt.pointerId);
-          } else {
-            // Remove Mouse Listeners
-            document.removeEventListener('mousemove', this.handleGestureMove, true);
-            document.removeEventListener('mouseup', this.handleGestureEnd, true);
-          }
-
-          updateSwipeRestPosition();
-
-          initialTouchPos = null;
-        }.bind(this);
-        /* // [END handle-end-gesture] */
-
-        function updateSwipeRestPosition() {
-          var differenceInX = initialTouchPos.x - lastTouchPos.x;
-          currentXPosition = currentXPosition - differenceInX;
-
-          // Go to the default state and change
-          var newState = STATE_DEFAULT;
-
-          // Check if we need to change state to left or right based on slop value
-          if(Math.abs(differenceInX) > slopValue) {
-            if(currentState === STATE_DEFAULT) {
-              if(differenceInX > 0) {
-                newState = STATE_LEFT_SIDE;
-              } else {
-                newState = STATE_RIGHT_SIDE;
-              }
-            } else {
-              if(currentState === STATE_LEFT_SIDE && differenceInX > 0) {
-                newState = STATE_DEFAULT;
-              } else if(currentState === STATE_RIGHT_SIDE && differenceInX < 0) {
-                newState = STATE_DEFAULT;
-              }
-            }
-          } else {
-            newState = currentState;
-          }
-
-          changeState(newState);
-
-          swipeFrontElement.style.transition = 'all 150ms ease-out';
-        }
-
-        function changeState(newState) {
-          var transformStyle;
-          switch(newState) {
-            case STATE_DEFAULT:
-              currentXPosition = 0;
-              break;
-            case STATE_LEFT_SIDE:
-              currentXPosition = -(itemWidth - handleSize);
-              break;
-            case STATE_RIGHT_SIDE:
-              currentXPosition = itemWidth - handleSize;
-              break;
-          }
-
-          transformStyle = 'translateX('+currentXPosition+'px)';
-
-          swipeFrontElement.style.msTransform = transformStyle;
-          swipeFrontElement.style.MozTransform = transformStyle;
-          swipeFrontElement.style.webkitTransform = transformStyle;
-          swipeFrontElement.style.transform = transformStyle;
-
-          currentState = newState;
-        }
-
-        function getGesturePointFromEvent(evt) {
-          var point = {};
-
-          if(evt.targetTouches) {
-            point.x = evt.targetTouches[0].clientX;
-            point.y = evt.targetTouches[0].clientY;
-          } else {
-            // Either Mouse event or Pointer Event
-            point.x = evt.clientX;
-            point.y = evt.clientY;
-          }
-
-          return point;
-        }
-
-        /* // [START on-anim-frame] */
-        function onAnimFrame() {
-          if(!rafPending) {
-            return;
-          }
-
-          var differenceInX = initialTouchPos.x - lastTouchPos.x;
-
-          var newXTransform = (currentXPosition - differenceInX)+'px';
-          var transformStyle = 'translateX('+newXTransform+')';
-          swipeFrontElement.style.webkitTransform = transformStyle;
-          swipeFrontElement.style.MozTransform = transformStyle;
-          swipeFrontElement.style.msTransform = transformStyle;
-          swipeFrontElement.style.transform = transformStyle;
-
-          rafPending = false;
-        }
-        /* // [END on-anim-frame] */
-
-        /* // [START addlisteners] */
-        // Check if pointer events are supported.
-        if (window.PointerEvent) {
-          // Add Pointer Event Listener
-          swipeFrontElement.addEventListener('pointerdown', this.handleGestureStart, true);
-          swipeFrontElement.addEventListener('pointermove', this.handleGestureMove, true);
-          swipeFrontElement.addEventListener('pointerup', this.handleGestureEnd, true);
-          swipeFrontElement.addEventListener('pointercancel', this.handleGestureEnd, true);
-        } else {
-          // Add Touch Listener
-          swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
-          swipeFrontElement.addEventListener('touchmove', this.handleGestureMove, true);
-          swipeFrontElement.addEventListener('touchend', this.handleGestureEnd, true);
-          swipeFrontElement.addEventListener('touchcancel', this.handleGestureEnd, true);
-
-          // Add Mouse Listener
-          swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
-        }
-        /* // [END addlisteners] */
-      }
-
-      var swipeRevealItems = [];
-
-      window.onload = function () {
-        'use strict';
-        var swipeRevealItemElements = document.querySelectorAll('.swipe-element');
-        for(var i = 0; i < swipeRevealItemElements.length; i++) {
-          swipeRevealItems.push(new SwipeRevealItem(swipeRevealItemElements[i]));
-        }
-
-        // We do this so :active pseudo classes are applied.
-        window.onload = function() {
-          if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
-            document.body.addEventListener('touchstart', function() {}, false);
-          }
-        };
-      };
-
-      window.onresize = function () {
-        'use strict';
-        for(var i = 0; i < swipeRevealItems.length; i++) {
-          swipeRevealItems[i].resize();
-        }
-      };
-    </script>
-
-    <script>
-      var registerInteraction = function () {
-        'use strict';
-        window.sampleCompleted('touch-demo-1.html-SwipeFrontTouch');
-      };
-
-      var swipeFronts = document.querySelectorAll('.swipe-front');
-      for(var i = 0; i < swipeFronts.length; i++) {
-        swipeFronts[i].addEventListener('touchstart', registerInteraction);
-      }
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-      var isCompleted = {};
-      function sampleCompleted(sampleName){
-        if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-          ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-          isCompleted[sampleName] = true;
-        }
-      }
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/input/touch/touch-demo-2.html b/fundamentals/design-and-ux/input/touch/touch-demo-2.html
deleted file mode 100644
index 59c76da..0000000
--- a/fundamentals/design-and-ux/input/touch/touch-demo-2.html
+++ /dev/null
@@ -1,322 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Touch Example 2</title>
-
-    <!-- IE Specific to remove tap highlight -->
-    <meta name="msapplication-tap-highlight" content="no">
-
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
-
-    <style>
-      body {
-        width: 100%;
-        height: 100%;
-
-        background-color: #d3e2fc;
-
-        font-family: 'Roboto', sans-serif;
-        color: #ecf0f1;
-
-        padding: 16px;
-      }
-
-      .container {
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-
-        width: 100%;
-
-        -ms-flex-direction: row;
-        -webkit-flex-direction: row;
-        flex-direction: row;
-
-        -ms-flex-pack: justify;
-        -webkit-justify-content: space-around;
-        justify-content: space-around;
-
-        -ms-flex-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-      }
-
-      .v-slider {
-        position: relative;
-
-        width: 46px;
-        height: 200px;
-
-        margin: 23px 0;
-
-        /* Pass all touches to javascript */
-        -ms-touch-action: none;
-        touch-action: none;
-      }
-
-      .v-slider > .track {
-        position: absolute;
-
-        width: 6px;
-        height: 200px;
-
-        left: 50%;
-
-        margin-left: -3px;
-
-        border-radius: 6px;
-
-        background-color: rgba(0,0,0,0.2);
-      }
-
-      .v-slider > .hold {
-        position: absolute;
-
-        width: 46px;
-        height: 46px;
-
-        border-radius: 100%;
-
-        top: 0;
-        left: 50%;
-
-        margin-top: -23px;
-        margin-left: -23px;
-
-        background-color: #4285f4;
-      }
-
-      .promote-layer {
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-      }
-    </style>
-  </head>
-
-  <body>
-
-    <div class="container">
-      <div class="v-slider">
-        <div class="track"></div>
-        <div class="hold promote-layer"></div>
-      </div>
-
-      <div class="v-slider">
-        <div class="track"></div>
-        <div class="hold promote-layer"></div>
-      </div>
-    </div>
-
-    <script>
-      // Shim for requestAnimationFrame from Paul Irishpaul ir
-      // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
-      window.requestAnimFrame = (function(){
-        return  window.requestAnimationFrame       ||
-                window.webkitRequestAnimationFrame ||
-                window.mozRequestAnimationFrame    ||
-                function( callback ){
-                  window.setTimeout(callback, 1000 / 60);
-                };
-      })();
-
-      var pointerDownName = 'pointerdown';
-      var pointerUpName = 'pointerup';
-      var pointerMoveName = 'pointermove';
-
-      if(window.navigator.msPointerEnabled) {
-        pointerDownName = 'MSPointerDown';
-        pointerUpName = 'MSPointerUp';
-        pointerMoveName = 'MSPointerMove';
-
-      }
-
-      // Simple way to check if some form of pointerevents is enabled or not
-      window.PointerEventsSupport = false;
-      if(window.PointerEvent || window.navigator.msPointerEnabled) {
-        window.PointerEventsSupport = true;
-      }
-
-      function Slider(element) {
-        var isAnimating = false;
-        var lastYPos = 0;
-        var initialYPos = 0;
-        var lastHolderPos = 0;
-        var elementHold = element.querySelector('.hold');
-
-      /* // [START handle-gestures] */
-      // Handle the start of gestures
-      this.handleGestureStart = function(evt) {
-        evt.preventDefault();
-
-        /* // [START stash-start] */
-        var point = getGesturePointFromEvent(evt);
-        initialYPos = point.y;
-        /* // [END stash-start] */
-
-        // Add the move and end listeners
-        if (window.PointerEvent) {
-          evt.target.setPointerCapture(evt.pointerId);
-        } else {
-          // Add Mouse Listeners
-          document.addEventListener('mousemove', this.handleGestureMove, true);
-          document.addEventListener('mouseup', this.handleGestureEnd, true);
-        }
-      }.bind(this);
-
-      this.handleGestureEnd = function(evt) {
-        evt.preventDefault();
-
-        if(evt.targetTouches && evt.targetTouches.length > 0) {
-          return;
-        }
-
-        // Remove Event Listeners
-        if (window.PointerEvent) {
-          evt.target.releasePointerCapture(evt.pointerId);
-        } else {
-          // Remove Mouse Listeners
-          document.removeEventListener('mousemove', this.handleGestureMove, true);
-          document.removeEventListener('mouseup', this.handleGestureEnd, true);
-        }
-
-        isAnimating = false;
-        lastHolderPos = lastHolderPos + -(initialYPos - lastYPos);
-        initialYPos = null;
-      }.bind(this);
-      /* // [END handle-gestures] */
-
-      this.handleGestureMove = function(evt) {
-        evt.preventDefault();
-
-        if(evt.targetTouches && evt.targetTouches.length > 1) {
-          return;
-        }
-
-        if (!initialYPos) {
-          return;
-        }
-
-        /* // [START handle-move] */
-        var point = getGesturePointFromEvent(evt);
-        lastYPos = point.y;
-
-          if(isAnimating) {
-            return;
-          }
-
-          isAnimating = true;
-          window.requestAnimFrame(onAnimFrame);
-          /* // [END handle-move] */
-      }.bind(this);
-
-      /* // [START extract-xy] */
-      function getGesturePointFromEvent(evt) {
-          var point = {};
-
-          if(evt.targetTouches) {
-            // Prefer Touch Events
-            point.x = evt.targetTouches[0].clientX;
-            point.y = evt.targetTouches[0].clientY;
-          } else {
-            // Either Mouse event or Pointer Event
-            point.x = evt.clientX;
-            point.y = evt.clientY;
-          }
-
-          return point;
-        }
-      /* // [END extract-xy] */
-
-      /* // [START on-anim-frame] */
-      function onAnimFrame() {
-          if(!isAnimating) {
-            return;
-          }
-
-          var newYTransform = lastHolderPos + -(initialYPos - lastYPos);
-
-          newYTransform = limitValueToSlider(newYTransform);
-
-          var transformStyle = 'translateY('+newYTransform+'px)';
-          elementHold.style.msTransform = transformStyle;
-          elementHold.style.MozTransform = transformStyle;
-          elementHold.style.webkitTransform = transformStyle;
-          elementHold.style.transform = transformStyle;
-
-          isAnimating = false;
-        }
-        /* // [END on-anim-frame] */
-
-        function limitValueToSlider(value) {
-          if(Math.abs(value) > element.clientHeight) {
-            value = element.clientHeight;
-          } else if(value < 0) {
-            value = 0;
-          }
-          return value;
-        }
-
-        /* // [START addlisteners] */
-        // Check if pointer events are supported.
-        if (window.PointerEvent) {
-          // Add Pointer Event Listener
-          elementHold.addEventListener('pointerdown', this.handleGestureStart, true);
-          elementHold.addEventListener('pointermove', this.handleGestureMove, true);
-          elementHold.addEventListener('pointerup', this.handleGestureEnd, true);
-          elementHold.addEventListener('pointercancel', this.handleGestureEnd, true);
-        } else {
-          // Add Touch Listeners
-          elementHold.addEventListener('touchstart', this.handleGestureStart, true);
-          elementHold.addEventListener('touchmove', this.handleGestureMove, true);
-          elementHold.addEventListener('touchend', this.handleGestureEnd, true);
-          elementHold.addEventListener('touchcancel', this.handleGestureEnd, true);
-
-          // Add Mouse Listeners
-          elementHold.addEventListener('mousedown', this.handleGestureStart, true);
-        }
-        /* // [END addlisteners] */
-      }
-
-      window.onload = function () {
-        var sliderElements = document.querySelectorAll('.v-slider');
-        for(var i = 0; i < sliderElements.length; i++) {
-          new Slider(sliderElements[i]);
-        }
-
-        // We do this so :active pseudo classes are applied.
-        window.onload = function() {
-          if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
-            document.body.addEventListener('touchstart', function() {}, false);
-          }
-        };
-      };
-    </script>
-
-    <script>
-      var holds = document.querySelectorAll('.hold');
-      for(var i = 0; i < holds.length; i++) {
-        holds[i].addEventListener('touchstart', function(){
-          sampleCompleted('touch-demo-2.html-HoldTouch');
-        });
-      }
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-      var isCompleted = {};
-      function sampleCompleted(sampleName){
-        if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-          ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-          isCompleted[sampleName] = true;
-        }
-      }
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/input/touch/user-select-example.html b/fundamentals/design-and-ux/input/touch/user-select-example.html
deleted file mode 100644
index 32c7ad3..0000000
--- a/fundamentals/design-and-ux/input/touch/user-select-example.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>user-select Example</title>
-
-    <!-- IE Specific to remove tap highlight -->
-    <meta name="msapplication-tap-highlight" content="no">
-
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
-
-    <style>
-      body {
-        background-color: #e74c3c;
-
-        margin: 32px;
-
-        font-family: 'Roboto', sans-serif;
-        color: #ecf0f1;
-      }
-
-      button, a {
-        display: block;
-
-        width: 100%;
-        max-width: 400px;
-
-        padding: 16px;
-        margin: 0 auto 16px auto;
-
-        box-sizing: border-box;
-
-        border-style: none;
-        border-radius: 6px;
-
-        color: inherit;
-        font-family: inherit;
-        font-size: inherit;
-        text-align:center;
-        text-decoration: none;
-      }
-
-      button {
-        background-color: #c0392b;
-
-        /* // [START user-select] */
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        /* // [END user-select] */
-
-        /* Webkit / Chrome Specific CSS to remove tap highlight color */
-        -webkit-tap-highlight-color: transparent;
-
-        /* Firefox Specific CSS to remove button differences  */
-        background-image: none;
-      }
-
-      button.user-selectable {
-        -moz-user-select: auto;
-        -webkit-user-select: auto;
-        -ms-user-select: auto;
-        user-select: auto;
-      }
-
-      button:hover {
-        background-color: #B32C1E;
-      }
-
-      button:focus {
-        background-color: #8D0600;
-        /* The outline parameter suppresses the border color / outline when focused */
-        outline: 0;
-      }
-
-      button:active {
-        background-color: #9A1305;
-      }
-
-      /* Firefox Specific CSS to remove focus ring */
-      button::-moz-focus-inner {
-        border: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <button class="btn" tabindex="1">Non-Selectable Text</button>
-
-    <button class="btn user-selectable" tabindex="2">+44 (0) 123456789</button>
-
-    <script>
-      window.onload = function() {
-        if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
-          document.body.addEventListener('touchstart', function() {}, false);
-        }
-      };
-    </script>
-
-    <script>
-      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-      e.src='//www.google-analytics.com/analytics.js';
-      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-      ga('create','UA-52746336-1');ga('send','pageview');
-      var isCompleted = {};
-      function sampleCompleted(sampleName){
-        if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-          ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-          isCompleted[sampleName] = true;
-        }
-      }
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/100.png b/fundamentals/design-and-ux/responsive/100.png
deleted file mode 100644
index 3caeb7d..0000000
Binary files a/fundamentals/design-and-ux/responsive/100.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/1000.png b/fundamentals/design-and-ux/responsive/1000.png
deleted file mode 100644
index 69543a0..0000000
Binary files a/fundamentals/design-and-ux/responsive/1000.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/1100.png b/fundamentals/design-and-ux/responsive/1100.png
deleted file mode 100644
index 1a50ab4..0000000
Binary files a/fundamentals/design-and-ux/responsive/1100.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/1200.png b/fundamentals/design-and-ux/responsive/1200.png
deleted file mode 100644
index 65b59e7..0000000
Binary files a/fundamentals/design-and-ux/responsive/1200.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/1400.png b/fundamentals/design-and-ux/responsive/1400.png
deleted file mode 100644
index 5d119ad..0000000
Binary files a/fundamentals/design-and-ux/responsive/1400.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/1600.png b/fundamentals/design-and-ux/responsive/1600.png
deleted file mode 100644
index c1afdce..0000000
Binary files a/fundamentals/design-and-ux/responsive/1600.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/1800.png b/fundamentals/design-and-ux/responsive/1800.png
deleted file mode 100644
index 2d7adad..0000000
Binary files a/fundamentals/design-and-ux/responsive/1800.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/200.png b/fundamentals/design-and-ux/responsive/200.png
deleted file mode 100644
index 24b0d2a..0000000
Binary files a/fundamentals/design-and-ux/responsive/200.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/2000.png b/fundamentals/design-and-ux/responsive/2000.png
deleted file mode 100644
index e05ed7c..0000000
Binary files a/fundamentals/design-and-ux/responsive/2000.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/300.png b/fundamentals/design-and-ux/responsive/300.png
deleted file mode 100644
index 938f867..0000000
Binary files a/fundamentals/design-and-ux/responsive/300.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/400.png b/fundamentals/design-and-ux/responsive/400.png
deleted file mode 100644
index 2da8924..0000000
Binary files a/fundamentals/design-and-ux/responsive/400.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/500.png b/fundamentals/design-and-ux/responsive/500.png
deleted file mode 100644
index f329df1..0000000
Binary files a/fundamentals/design-and-ux/responsive/500.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/600.png b/fundamentals/design-and-ux/responsive/600.png
deleted file mode 100644
index 7159255..0000000
Binary files a/fundamentals/design-and-ux/responsive/600.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/700.png b/fundamentals/design-and-ux/responsive/700.png
deleted file mode 100644
index afa9449..0000000
Binary files a/fundamentals/design-and-ux/responsive/700.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/800.png b/fundamentals/design-and-ux/responsive/800.png
deleted file mode 100644
index 1c87a2d..0000000
Binary files a/fundamentals/design-and-ux/responsive/800.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/900.png b/fundamentals/design-and-ux/responsive/900.png
deleted file mode 100644
index 5e881cb..0000000
Binary files a/fundamentals/design-and-ux/responsive/900.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/ada_lovelace-300-q90.jpg b/fundamentals/design-and-ux/responsive/ada_lovelace-300-q90.jpg
deleted file mode 100644
index 68061ba..0000000
Binary files a/fundamentals/design-and-ux/responsive/ada_lovelace-300-q90.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/ada_lovelace-600-q30.jpg b/fundamentals/design-and-ux/responsive/ada_lovelace-600-q30.jpg
deleted file mode 100644
index f33ed15..0000000
Binary files a/fundamentals/design-and-ux/responsive/ada_lovelace-600-q30.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/body.png b/fundamentals/design-and-ux/responsive/body.png
deleted file mode 100644
index 5c02ff3..0000000
Binary files a/fundamentals/design-and-ux/responsive/body.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/breakpoints.html b/fundamentals/design-and-ux/responsive/breakpoints.html
deleted file mode 100644
index 9da739c..0000000
--- a/fundamentals/design-and-ux/responsive/breakpoints.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-  <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-  <style>
-    body {
-      margin: 2em;
-    }
-  </style>
-  <title>Images: Breakpoints in sizes attribute for srcset</title>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>
-  <style type="text/css">
-    @media (max-width: 500px) {
-      .vp-small {
-        font-weight: bold;
-      }
-    }
-    @media (min-width: 500px) and (max-width: 600px) {
-      .vp-medium {
-        font-weight: bold;
-      }
-    }
-    @media (min-width: 600px) {
-      .vp-large {
-        font-weight: bold;
-      }
-    }
-  </style>
-  <link rel="stylesheet" type="text/css" href="margins.css">
-</head>
-<body role="main">
-  <div class="add_margin">
-    <h1>Using breakpoints in the <code>&lt;picture&gt;</code> element</h1>
-    <p>
-      <b>Note:</b> this sample uses the <a href="http://scottjehl.github.io/picturefill/">
-      picturefill</a> polyfill to provide backwards compatibility for browsers 
-      that do not support the &lt;picture&gt; element.
-    </p>
-  </div>
-  <!-- // [START picture] -->
-  <img src="400.png" 
-       sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
-       srcset="100.png 100w, 200.png 200w, 400.png 400w,
-               800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
-  <!-- // [END picture] -->
-  <div class="add_margin">
-    <p class="vp-small">Viewport widths 0 to 499px:</p>
-    <ul class="vp-small">
-      <li>the image is 100% of the viewport width</li>
-    </ul>
-    <p class="vp-medium">Viewport widths 500px to 599px:</p>
-    <ul class="vp-medium">
-      <li>the image is 50% of the viewport width</li>
-    </ul>
-    <p class="vp-large">Viewport widths 600px and over:</p>
-    <ul class="vp-large">
-      <li>the image is 25% of the viewport width</li>
-    </ul>
-  </div>
-  <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/checker.png b/fundamentals/design-and-ux/responsive/checker.png
deleted file mode 100644
index 5c02ff3..0000000
Binary files a/fundamentals/design-and-ux/responsive/checker.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/chrome-subtitles-en.vtt b/fundamentals/design-and-ux/responsive/chrome-subtitles-en.vtt
deleted file mode 100644
index 0a53fdb..0000000
--- a/fundamentals/design-and-ux/responsive/chrome-subtitles-en.vtt
+++ /dev/null
@@ -1,34 +0,0 @@
-WEBVTT
-
-NOTE
-This is just an example file to demonstrate adding a track.
-It is used as a captions track so is visible in the sample,
-but is really a description track.
-
-00:00.000 --> 00:04.000
-Man sitting on a tree branch, using a laptop.
-
-00:05.000 --> 00:08.000
-The branch breaks, and he starts to fall.
-
-00:09.000 --> 00:10.000
-Opens Chrome.
-
-00:11.000 --> 00:13.000
-Goes to shopping site and orders a hammock.
-
-00:16.000 --> 00:18.000
-Continues falling...
-
-00:19.000 --> 00:20.500
-He falls into the hammock, already delivered and set up!
-
-00:20.500 --> 00:22.000
-Delivery man smiles.
-
-00:22.500 --> 00:26.000
-Open a new browser. Chrome fast.
-
-00:26.500 --> 00:29.500
-Man using laptop in hammock.
-White butterfly flutters past, furry brown mole pops up.
diff --git a/fundamentals/design-and-ux/responsive/cloudy.png b/fundamentals/design-and-ux/responsive/cloudy.png
deleted file mode 100644
index 5c61404..0000000
Binary files a/fundamentals/design-and-ux/responsive/cloudy.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/column-drop.html b/fundamentals/design-and-ux/responsive/column-drop.html
deleted file mode 100644
index 3a80a22..0000000
--- a/fundamentals/design-and-ux/responsive/column-drop.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="layouts-common.css">
-    <style>
-
-      /* // [START cdrop] */
-      .container {
-        display: -webkit-flex;
-        display: flex;
-        -webkit-flex-flow: row wrap;
-        flex-flow: row wrap;
-      }
-
-      .c1, .c2, .c3 {
-        width: 100%;
-      }
-
-      @media (min-width: 600px) {
-        .c1 {
-          width: 60%;
-          -webkit-order: 2;
-          order: 2;
-        }
-
-        .c2 {
-          width: 40%;
-          -webkit-order: 1;
-          order: 1;
-        }
-
-        .c3 {
-          width: 100%;
-          -webkit-order: 3;
-          order: 3;
-        }
-      }
-
-
-      @media (min-width: 800px) {
-        .c2 {
-          width: 20%;
-        }
-
-        .c3 {
-          width: 20%;
-        }
-      }
-      /* // [END cdrop] */
-
-
-    </style>
-    <title>Responsive Web Design Pattern: Column Drop</title>
-  </head>
-  <body>
-    <div class="container" role="main">
-      <div class="c1"></div>
-      <div class="c2"></div>
-      <div class="c3"></div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 800px)").addListener(hitMQ);
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDPatterns-ColumnDrop");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/compressive.html b/fundamentals/design-and-ux/responsive/compressive.html
deleted file mode 100644
index b526102..0000000
--- a/fundamentals/design-and-ux/responsive/compressive.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Compressive Image Technique Comparison</title>
-    <style>
-      .ada {
-        width: 300px;
-      }
-
-      .container {
-        text-align: center;
-      }
-
-      figure {
-        display: inline-block;
-        margin: 1em;
-      }
-
-    </style>
-  </head>
-  <body>
-    <div role="main" class="container">
-      <figure>
-        <h2>1x Image</h2>
-        <a href="ada_lovelace-300-q90.jpg">
-          <img class="ada" src="ada_lovelace-300-q90.jpg">
-        </a>
-        <figcaption>
-          1x image (300&times;300px) @ quality 90<br>
-          File size 88kB
-        </figcaption> 
-      </figure>
-      <figure>
-        <h2>2x Image</h2>
-        <a href="ada_lovelace-600-q30.jpg">
-          <img class="ada" src="ada_lovelace-600-q30.jpg">
-        </a>
-        <figcaption>
-          2x image (600&times;600px) @ quality 30<br>
-          File size 47kB
-        </figcaption>
-      </figure>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/conditional-mq.html b/fundamentals/design-and-ux/responsive/conditional-mq.html
deleted file mode 100644
index 62216c3..0000000
--- a/fundamentals/design-and-ux/responsive/conditional-mq.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Using media queries for conditional loading</title>
-    <style>
-      /* // [START conditional] */
-      .example {
-        height: 400px;
-        background-image: url(small.png);
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position-x: center;
-      }
-
-      @media (min-width: 500px) {
-        body {
-          background-image: url(body.png);
-        }
-        .example {
-          background-image: url(large.png);
-        }
-      }
-      /* // [END conditional] */
-
-      .desc {
-        margin-top: 2em;
-        text-align: center;
-      }
-    </style>
-  </head>
-  <body role="main">
-    <div class="example"></div>
-    <div class="desc">
-      On viewports less than 500px, only the image of a phone will appear,
-      while on viewports larger than 500px, a tablet will be visible with
-      a checkboard background.
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 500px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("Images-Conditional");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/credit.svg b/fundamentals/design-and-ux/responsive/credit.svg
deleted file mode 100755
index ca5ac98..0000000
--- a/fundamentals/design-and-ux/responsive/credit.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-<g>
-</g>
-	<path d="M29 4h-26c-1.65 0-3 1.35-3 3v18c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-18c0-1.65-1.35-3-3-3zM3 6h26c0.542 0 1 0.458 1 1v3h-28v-3c0-0.542 0.458-1 1-1zM29 26h-26c-0.542 0-1-0.458-1-1v-9h28v9c0 0.542-0.458 1-1 1zM4 20h2v4h-2zM8 20h2v4h-2zM12 20h2v4h-2z" fill="#000000"></path>
-</svg>
diff --git a/fundamentals/design-and-ux/responsive/fragment.html b/fundamentals/design-and-ux/responsive/fragment.html
deleted file mode 100644
index 4ae7899..0000000
--- a/fundamentals/design-and-ux/responsive/fragment.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Video: Specifying a start and end time with media fragments</title>
-  <style>
-    #container {
-      max-width: 480px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    video {
-      max-width: 100%;
-    }
-
-  </style>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Video: Specifying a start and end time with media fragments</h1>
-  <!-- // [START fragment] -->
-  <video controls>
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm#t=5,10" type="video/webm; codecs='vp8, vorbis'">
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4#t=5,10" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
-    <p>This browser does not support the video element.</p>
-  </video>
-  <!-- // [END fragment] -->
-
-  <div id="srcInfo" class="is-hidden">
-    <p>
-      <b>Event type:</b> <span id="srcEvent"></span><br>
-      <b>Current source file:</b> <span id="srcFile"></span><br>
-      <b>Video size:</b> <span id="srcWidth"></span>&times;<span id="srcHeight"></span>
-    </p>
-  </div>
-
-
-  <script>
-
-  function init() {
-    document.querySelector("video").addEventListener("loadedmetadata", showMetadata);
-  }
-
-  function showMetadata(evt) {
-    var srcInfo = document.querySelector("#srcInfo");
-    var srcEvent = document.querySelector("#srcEvent");
-    var srcFile = document.querySelector("#srcFile");
-    var srcWidth = document.querySelector("#srcWidth");
-    var srcHeight = document.querySelector("#srcHeight");
-
-    srcInfo.classList.remove("is-hidden");
-    srcEvent.textContent = evt.type;
-    srcFile.textContent = this.currentSrc.replace(/^.*[\\\/]/, '');
-    srcWidth.textContent = this.videoWidth;
-    srcHeight.textContent = this.videoHeight;
-  }
-
-  init();
-
-  </script>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/fullscreen.html b/fundamentals/design-and-ux/responsive/fullscreen.html
deleted file mode 100644
index 0d7f2ac..0000000
--- a/fundamentals/design-and-ux/responsive/fullscreen.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Video: Using the full screen API</title>
-  <style>
-    #container {
-      max-width: 480px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    video {
-      max-width: 100%;
-    }
-
-  </style>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Video: Using the full screen API</h1>
-  <video controls>
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm; codecs='vp8, vorbis'">
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
-    <p>This browser does not support the video element.</p>
-  </video>
-
-  <button type="button" id="butFullScreenDoc">Make Page Full Screen</button>
-  <button type="button" id="butFullScreenVid">Make Video Full Screen</button>
-
-
-  <div id="srcInfo" class="is-hidden">
-    <p>
-      <b>Event type:</b> <span id="srcEvent"></span><br>
-      <b>Current source file:</b> <span id="srcFile"></span><br>
-      <b>Video size:</b> <span id="srcWidth"></span>&times;<span id="srcHeight"></span>
-    </p>
-  </div>
-
-
-  <script>
-  var video;
-
-  function init() {
-    video = document.querySelector("video");
-    video.addEventListener("loadedmetadata", showMetadata);
-    video.addEventListener("play", showMetadata);
-    video.addEventListener("pause", showMetadata);
-
-    video.addEventListener("webkitfullscreenchange", function() {
-      console.log("Full Screen", video.displayingFullscreen);
-    });
-
-    document.querySelector("#butFullScreenDoc").addEventListener("click", fullScreenDoc);
-    document.querySelector("#butFullScreenVid").addEventListener("click", fullScreenVid);
-
-    video.requestFullScreen =
-      video.requestFullScreen ||
-      video.webkitRequestFullScreen ||
-      video.mozRequestFullScreen;
-
-    document.body.requestFullScreen =
-      document.body.requestFullScreen ||
-      document.body.webkitRequestFullScreen ||
-      document.body.mozRequestFullScreen;
-  }
-
-  function fullScreenDoc(evt) {
-    document.body.requestFullScreen();
-    sampleCompleted("Video-FullScreenDocument");
-  }
-
-  function fullScreenVid(evt) {
-    video.requestFullScreen();
-    sampleCompleted("Video-FullScreenVideo");
-  }
-
-
-
-  function showMetadata(evt) {
-    var srcInfo = document.querySelector("#srcInfo");
-    var srcEvent = document.querySelector("#srcEvent");
-    var srcFile = document.querySelector("#srcFile");
-    var srcWidth = document.querySelector("#srcWidth");
-    var srcHeight = document.querySelector("#srcHeight");
-
-    srcInfo.classList.remove("is-hidden");
-    srcEvent.textContent = evt.type;
-    srcFile.textContent = this.currentSrc.replace(/^.*[\\\/]/, '');
-    srcWidth.textContent = this.videoWidth;
-    srcHeight.textContent = this.videoHeight;
-  }
-
-  init();
-
-  </script>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/head-2x.jpg b/fundamentals/design-and-ux/responsive/head-2x.jpg
deleted file mode 100644
index e378a61..0000000
Binary files a/fundamentals/design-and-ux/responsive/head-2x.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/head-fb-2x.jpg b/fundamentals/design-and-ux/responsive/head-fb-2x.jpg
deleted file mode 100644
index 188c73f..0000000
Binary files a/fundamentals/design-and-ux/responsive/head-fb-2x.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/head-fb.jpg b/fundamentals/design-and-ux/responsive/head-fb.jpg
deleted file mode 100644
index 3e34b01..0000000
Binary files a/fundamentals/design-and-ux/responsive/head-fb.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/head-small-2x.jpg b/fundamentals/design-and-ux/responsive/head-small-2x.jpg
deleted file mode 100644
index 6ba7ad9..0000000
Binary files a/fundamentals/design-and-ux/responsive/head-small-2x.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/head-small.jpg b/fundamentals/design-and-ux/responsive/head-small.jpg
deleted file mode 100644
index 72532aa..0000000
Binary files a/fundamentals/design-and-ux/responsive/head-small.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/head.jpg b/fundamentals/design-and-ux/responsive/head.jpg
deleted file mode 100644
index 9d3ce40..0000000
Binary files a/fundamentals/design-and-ux/responsive/head.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/icon-font.html b/fundamentals/design-and-ux/responsive/icon-font.html
deleted file mode 100644
index 9b790c1..0000000
--- a/fundamentals/design-and-ux/responsive/icon-font.html
+++ /dev/null
@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Replacing images with icon fonts</title>
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-    <style>
-      .awesome {
-        font-family: FontAwesome;
-      }
-
-      table {
-        margin-top: 1em;
-        margin-bottom: 1em;
-      }
-
-      td {
-        width: 20%;
-        text-align: center;
-      }
-
-      tr.font {
-        font-family: FontAwesome;
-        font-size: xx-large;
-      }
-
-      tr.class {
-        font-family: monospace;
-      }
-
-    </style>
-  </head>
-  <body>
-
-    <div role="main">
-      <h1>Icon Fonts Rock</h1>
-      <p>
-        <a href="http://fontawesome.io"><span class="awesome">&#xf024;</span> Font Awesome</a> 
-        is an icon font with more than 350 different icons that can be easily customized, 
-        including size, color, shadow, etc.
-        <!-- // [START iconfont] -->
-        With Font Awesome, you can either add icons by using a unicode
-        entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
-        or by adding special classes to an &lt;i&gt; element like the CSS3
-        logo (<i class="fa fa-css3"></i>).
-        <!-- // [END iconfont] -->
-      </p>
-
-
-      <div>
-        <table>
-          <tr class="font">
-            <td>&#xf083;</td>
-            <td>&#xf0c2;</td>
-            <td>&#xf0f4;</td>
-            <td>&#xf0e7;</td>
-          </tr>
-          <tr>
-            <td>&amp;#xf083;</td>
-            <td>&amp;#xf0c2;</td>
-            <td>&amp;#xf0f4;</td>
-            <td>&amp;#xf0e7;</td>
-          </tr>
-          <tr class="class">
-            <td>.fa-camera-retro</td>
-            <td>.fa-cloud</td>
-            <td>.fa-coffee</td>
-            <td>.fa-bolt</td>
-          </tr>
-        </table>
-
-        <table>
-          <tr class="font">
-            <td>&#xf108;</td>
-            <td>&#xf10a;</td>
-            <td>&#xf10b;</td>
-            <td>&#xf002;</td>
-            
-          </tr>
-          <tr>
-            <td>&amp;#xf108</td>
-            <td>&amp;#xf10a;</td>
-            <td>&amp;#xf10b;</td>
-            <td>&amp;#xf002;</td>
-            
-          </tr>
-          <tr class="class">
-            <td>.fa-desktop</td>
-            <td>.fa-tablet</td>
-            <td>.fa-mobile</td>
-            <td>.fa-search</td>
-            
-          </tr>
-        </table>
-
-        <table>
-          <tr class="font">
-            <td>&#xf0ac;</td>
-            <td>&#xf13b;</td>
-            <td>&#xf00c;</td>
-            <td>&#xf09d;</td>
-          </tr>
-          <tr>
-            <td>&amp;#xf0ac;</td>
-            <td>&amp;#xf13b;</td>
-            <td>&amp;#xf00c;</td>
-            <td>&amp;#xf09d;</td>
-          </tr>
-          <tr class="class">
-            <td>.fa-globe</td>
-            <td>.fa-html5</td>
-            <td>.fa-check</td>
-            <td>.fa-credit-card</td>
-          </tr>
-        </table>
-      </div>
-
-      <div>
-       <p>
-        <b>Font Awesome</b> by Dave Gandy -
-        <a href="http://fontawesome.io">http://fontawesome.io</a>.
-        <br>
-        <small>
-          Font Awesome is fully open source and is GPL compatible. You can 
-          use it for commercial projects, open source projects, or really 
-          just about whatever you want.
-        </small>
-      </p>
-      </div>
-      
-    </div>
-
-
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/icon-svg.html b/fundamentals/design-and-ux/responsive/icon-svg.html
deleted file mode 100644
index 798d75b..0000000
--- a/fundamentals/design-and-ux/responsive/icon-svg.html
+++ /dev/null
@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Replacing images with icon fonts</title>
-    <style>
-      table {
-        margin-top: 1em;
-        margin-bottom: 1em;
-      }
-
-      td {
-        width: 20%;
-        text-align: center;
-      }
-
-    </style>
-  </head>
-  <body>
-
-    <div role="main">
-      <h1>SVG Icons</h1>
-      <p>
-        <a href="http://icomoon.io">
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-               xmlns:xlink="http://www.w3.org/1999/xlink" 
-               width="32" height="32" viewBox="0 0 32 32">
-            <path d="M8.111 16c0-2.044 1.657-3.701 3.701-3.701s3.701 1.657 3.701 3.701c0 2.044-1.657 3.701-3.701 3.701-2.044 0-3.701-1.657-3.701-3.701zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.836 0 16-7.163 16-16 0-8.836-7.163-16-16-16zM11.856 29.978c-4.811-2.799-8.046-8.010-8.046-13.978 0-5.967 3.235-11.178 8.046-13.978 4.813 2.799 8.050 8.009 8.050 13.978 0 5.968-3.237 11.179-8.050 13.978z" fill="#000000"></path>
-          </svg>IcoMoon SVG icons
-        </a> is a collection of SVG icons and icon font with more than 3500 
-        different icons that can be easily customized, including size, color, 
-        shadow, etc.
-        <!-- // [START iconsvg] -->
-        With SVG icons, you can either add icons using inline SVG, like 
-        this checkmark:
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-               xmlns:xlink="http://www.w3.org/1999/xlink" 
-               width="32" height="32" viewBox="0 0 32 32">
-            <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
-          </svg>
-        or by using an image tag, like this credit card icon:
-        <img src="credit.svg">.
-        <!-- // [END iconsvg] -->
-      </p>
-
-      <div>
-        <table>
-          <tr class="font">
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M32 20.548c0-2.565-1.771-4.716-4.156-5.296-0.101-4.022-3.389-7.252-7.433-7.252-2.369 0-4.477 1.109-5.839 2.835-0.764-0.987-1.959-1.624-3.303-1.624-2.307 0-4.176 1.871-4.176 4.179 0 0.201 0.015 0.399 0.043 0.592-0.351-0.063-0.711-0.098-1.080-0.098-3.344-0-6.054 2.712-6.054 6.058 0 3.346 2.71 6.058 6.054 6.058l20.508-0c3.004-0.006 5.438-2.444 5.438-5.451z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M26 10h-2v-3c0-2.761-5.373-5-12-5-6.627 0-12 2.239-12 5v18c0 2.761 5.373 5 12 5s12-2.239 12-5v-3h2c3.3 0 6-2.7 6-6s-2.7-6-6-6zM5.502 5.925c1.811-0.597 4.118-0.925 6.498-0.925s4.688 0.329 6.498 0.925c1.156 0.381 1.857 0.789 2.232 1.075-0.375 0.286-1.076 0.694-2.232 1.075-1.811 0.597-4.118 0.925-6.498 0.925s-4.688-0.329-6.498-0.925c-1.156-0.381-1.857-0.789-2.232-1.075 0.375-0.286 1.075-0.694 2.232-1.075zM28.261 17.761c-0.276 0.276-0.872 0.739-1.761 0.739h-2.5v-5h2.5c0.89 0 1.486 0.463 1.761 0.739s0.739 0.871 0.739 1.761-0.463 1.486-0.739 1.761z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M12 0l-12 16h12l-8 16 28-20h-16l12-12z" fill="#000000"></path>
-              </svg>
-            </td>
-          </tr>
-          <tr class="font">
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                  width="32" height="32" viewBox="0 0 32 32">
-                <path d="M32 26v-24h-32v24h14v2h-6v2h16v-2h-6v-2h14zM4 6h24v16h-24v-16z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M25 0h-20c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h20c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM15 31c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM24 28h-18v-24h18v24z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M23 0h-14c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h14c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM12 1.5h8v1h-8v-1zM16 30c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM24 24h-16v-20h16v20z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12-6.627 0-12 5.373-12 12 0 6.627 5.373 12 12 12 2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z" fill="#000000"></path>
-              </svg>
-            </td>
-          </tr>
-          <tr class="font">
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M27.314 4.686c3.022 3.022 4.686 7.040 4.686 11.314s-1.664 8.292-4.686 11.314c-3.022 3.022-7.040 4.686-11.314 4.686-4.274 0-8.292-1.664-11.314-4.686-3.022-3.022-4.686-7.040-4.686-11.314 0-4.274 1.664-8.292 4.686-11.314 3.022-3.022 7.040-4.686 11.314-4.686 4.274 0 8.292 1.664 11.314 4.686zM25.899 25.9c1.971-1.971 3.281-4.425 3.821-7.096-0.421 0.62-0.824 0.85-1.073-0.538-0.257-2.262-2.335-0.817-3.641-1.621-1.375 0.927-4.466-1.802-3.941 1.276 0.81 1.388 4.375-1.858 2.598 1.079-1.134 2.050-4.145 6.592-3.753 8.946 0.049 3.43-3.504 0.715-4.729-0.422-0.824-2.279-0.281-6.262-2.434-7.378-2.338-0.102-4.344-0.314-5.25-2.927-0.545-1.87 0.58-4.653 2.584-5.083 2.933-1.843 3.98 2.158 6.731 2.232 0.854-0.894 3.182-1.178 3.375-2.18-1.805-0.318 2.29-1.517-0.173-2.199-1.358 0.16-2.234 1.409-1.512 2.467-2.632 0.614-2.717-3.809-5.247-2.414-0.064 2.206-4.132 0.715-1.407 0.268 0.936-0.409-1.527-1.594-0.196-1.379 0.654-0.036 2.854-0.807 2.259-1.325 1.225-0.761 2.255 1.822 3.454-0.059 0.866-1.446-0.363-1.713-1.448-0.98-0.612-0.685 1.080-2.165 2.573-2.804 0.497-0.213 0.973-0.329 1.336-0.296 0.752 0.868 2.142 1.019 2.215-0.104-1.862-0.892-3.915-1.363-6.040-1.363-3.051 0-5.952 0.969-8.353 2.762 0.645 0.296 1.012 0.664 0.39 1.134-0.483 1.439-2.443 3.371-4.163 3.098-0.893 1.54-1.482 3.238-1.733 5.017 1.441 0.477 1.773 1.42 1.464 1.736-0.734 0.64-1.185 1.548-1.418 2.541 0.469 2.87 1.818 5.515 3.915 7.612 2.644 2.644 6.16 4.1 9.899 4.1 3.739 0 7.255-1.456 9.899-4.1z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M1.892 0l2.567 28.801 11.524 3.199 11.554-3.204 2.572-28.796h-28.216zM24.52 9.42h-13.517l0.322 3.617h12.874l-0.97 10.844-7.245 2.008-7.237-2.008-0.495-5.547h3.547l0.252 2.82 3.933 1.060 0.009-0.002 3.935-1.062 0.408-4.58h-12.242l-0.953-10.681h17.694l-0.316 3.532z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
-              </svg>
-            </td>
-            <td>
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                   xmlns:xlink="http://www.w3.org/1999/xlink" 
-                   width="32" height="32" viewBox="0 0 32 32">
-                <path d="M29 4h-26c-1.65 0-3 1.35-3 3v18c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-18c0-1.65-1.35-3-3-3zM3 6h26c0.542 0 1 0.458 1 1v3h-28v-3c0-0.542 0.458-1 1-1zM29 26h-26c-0.542 0-1-0.458-1-1v-9h28v9c0 0.542-0.458 1-1 1zM4 20h2v4h-2zM8 20h2v4h-2zM12 20h2v4h-2z" fill="#000000"></path>
-              </svg>
-            </td>
-          </tr>
-        </table>
-      </div>
-
-      <div>
-       <p>
-        <b>IcoMoon</b>
-        <a href="http://icomoon.io/">http://icomoon.io/</a>.
-        <br>
-        <small>
-          IcoMoon is an icon solution, providing three main services: 
-          Vector Icon Packs, The IcoMoon App, and font hosting.
-        </small>
-      </p>
-      </div>
-      
-    </div>
-
-
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/icon1x.png b/fundamentals/design-and-ux/responsive/icon1x.png
deleted file mode 100644
index a9e3ac9..0000000
Binary files a/fundamentals/design-and-ux/responsive/icon1x.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/icon2x.png b/fundamentals/design-and-ux/responsive/icon2x.png
deleted file mode 100644
index b16708d..0000000
Binary files a/fundamentals/design-and-ux/responsive/icon2x.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/image-set.html b/fundamentals/design-and-ux/responsive/image-set.html
deleted file mode 100644
index 81eea30..0000000
--- a/fundamentals/design-and-ux/responsive/image-set.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Using CSS image-set to provide high res images</title>
-    <style>
-      /* // [START imageset] */
-      .sample {
-        width: 128px;
-        height: 128px;
-        background-image: url(icon1x.png);
-        background-image: -webkit-image-set(  
-          url(icon1x.png) 1x,  
-          url(icon2x.png) 2x  
-        );  
-        background-image: image-set(  
-          url(icon1x.png) 1x,  
-          url(icon2x.png) 2x  
-        );
-      }
-      /* // [END imageset] */
-    </style>
-  </head>
-  <body role="main">
-    <div class="sample"></div>
-    <div class="desc">
-      On a 1x display, a <a href="icon1x.png">monochrome 128x128px icon</a> will be shown.<br>
-      On a 2x display, a <a href="icon2x.png">color 256x256px icon</a> will be shown.
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/image-sprite.html b/fundamentals/design-and-ux/responsive/image-sprite.html
deleted file mode 100644
index 896cd57..0000000
--- a/fundamentals/design-and-ux/responsive/image-sprite.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Reducing http requests with sprite sheets</title>
-    <style>
-      span.sprite-sheet {
-        display: inline-block;
-      }
-      /* // [START sprite] */
-      .sprite-sheet {
-        background-image: url(sprite-sheet.png);
-        width: 40px;
-        height: 25px;
-      }
-
-      .google-logo {
-        width: 125px;
-        height: 45px;
-        background-position: -190px -170px;
-      }
-
-      .gmail {
-        background-position: -150px -210px; 
-      }
-
-      .maps {
-        height: 40px;
-        background-position: -120px -165px;
-      }
-      /* // [END sprite] */
-
-    </style>
-  </head>
-  <body>
-    <div role="main">
-      <h1>Sprite Sheet Sample</h1>
-      <p>
-        <img src="sprite-sheet.png">
-      </p>
-      <p>
-        The Google logo <span class="sprite-sheet google-logo"></span>
-      </p>
-      <p>
-        The GMail logo <span class="sprite-sheet gmail"></span>
-      </p>
-      <p>
-        The Google Maps logo <span class="sprite-sheet maps"></span>
-      </p>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/landscape.css b/fundamentals/design-and-ux/responsive/landscape.css
deleted file mode 100644
index b8015f9..0000000
--- a/fundamentals/design-and-ux/responsive/landscape.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.orientation:after {
-  content: " Landscape";
-}
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/large-2x.png b/fundamentals/design-and-ux/responsive/large-2x.png
deleted file mode 100644
index 44bd39a..0000000
Binary files a/fundamentals/design-and-ux/responsive/large-2x.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/large.png b/fundamentals/design-and-ux/responsive/large.png
deleted file mode 100644
index 26528e6..0000000
Binary files a/fundamentals/design-and-ux/responsive/large.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/layout-shifter.html b/fundamentals/design-and-ux/responsive/layout-shifter.html
deleted file mode 100644
index 59c83a6..0000000
--- a/fundamentals/design-and-ux/responsive/layout-shifter.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="layouts-common.css">
-    <style>
-
-      /* // [START lshifter] */
-      .container {
-        display: -webkit-flex;
-        display: flex;
-        -webkit-flex-flow: row wrap;
-        flex-flow: row wrap;
-      }
-
-      .c1, .c2, .c3, .c4 {
-        width: 100%;
-      }
-
-      @media (min-width: 600px) {
-        .c1 {
-          width: 25%;
-        }
-
-        .c4 {
-          width: 75%;
-        }
-
-      }
-
-      @media (min-width: 800px) {
-        .container {
-          width: 800px;
-          margin-left: auto;
-          margin-right: auto;
-        }
-      }
-      /* // [END lshifter] */
-
-
-    </style>
-    <title>Responsive Web Design Pattern: Layout Shifter</title>
-  </head>
-  <body>
-    <div class="container" role="main">
-      <div class="c1"></div>
-      <div class="c4">
-        <div class="c2"></div>
-        <div class="c3"></div>
-      </div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 800px)").addListener(hitMQ);
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDPatterns-LayoutShifter");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/layouts-common.css b/fundamentals/design-and-ux/responsive/layouts-common.css
deleted file mode 100644
index ca0f030..0000000
--- a/fundamentals/design-and-ux/responsive/layouts-common.css
+++ /dev/null
@@ -1,40 +0,0 @@
-body {
-  margin: 0;
-}
-
-.container {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.container div {
-  box-sizing: border-box;
-  min-height: 150px;
-  min-width: 150px;
-}
-
-.c1 {
-  color: #ddd;
-  background-color: #003476;
-}
-
-.c2 {
-  color: #ddd;
-  background-color: #0062d2;
-}
-
-.c3 {
-  color: #333;
-  background-color: #b4d2f7;
-}
-
-.c4 {
-  color: #333;
-  background-color: #d5dfef;
-}
-
-.c5 {
-  color: #333;
-  background-color: #dfe1e5;
-}
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-100.jpg b/fundamentals/design-and-ux/responsive/lighthouse-100.jpg
deleted file mode 100644
index df8284d..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-100.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-1000.jpg b/fundamentals/design-and-ux/responsive/lighthouse-1000.jpg
deleted file mode 100644
index 3b75f89..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-1000.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-1400.jpg b/fundamentals/design-and-ux/responsive/lighthouse-1400.jpg
deleted file mode 100644
index 230aee2..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-1400.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-1800.jpg b/fundamentals/design-and-ux/responsive/lighthouse-1800.jpg
deleted file mode 100644
index a6f5d37..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-1800.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-200.jpg b/fundamentals/design-and-ux/responsive/lighthouse-200.jpg
deleted file mode 100644
index 7a83a50..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-200.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-400.jpg b/fundamentals/design-and-ux/responsive/lighthouse-400.jpg
deleted file mode 100644
index 59a452f..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-400.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/lighthouse-800.jpg b/fundamentals/design-and-ux/responsive/lighthouse-800.jpg
deleted file mode 100644
index d30bcc9..0000000
Binary files a/fundamentals/design-and-ux/responsive/lighthouse-800.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/margins.css b/fundamentals/design-and-ux/responsive/margins.css
deleted file mode 100644
index 3f2081f..0000000
--- a/fundamentals/design-and-ux/responsive/margins.css
+++ /dev/null
@@ -1,16 +0,0 @@
-p {
-  margin-top: 1rem;
-  margin-bottom: inherit;
-}
-li {
-  list-style: initial;
-  list-style-position: inside;
-}
-body[role=main] {
-  margin: 0;
-  padding: 0;
-}
-.add_margin {
-  margin: 0 1rem;
-  padding: 0.25rem;
-}
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/max-640px.css b/fundamentals/design-and-ux/responsive/max-640px.css
deleted file mode 100644
index ef52895..0000000
--- a/fundamentals/design-and-ux/responsive/max-640px.css
+++ /dev/null
@@ -1,7 +0,0 @@
-h1 {
-  color: red;
-}
-
-.desc:before {
-  content: "This browser window is smaller than 640px wide.";
-}
diff --git a/fundamentals/design-and-ux/responsive/media-queries.html b/fundamentals/design-and-ux/responsive/media-queries.html
deleted file mode 100644
index 12b6f85..0000000
--- a/fundamentals/design-and-ux/responsive/media-queries.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <link rel="stylesheet" href="vpdemo.css">
-    <!-- // [START mqueries] -->
-    <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
-    <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
-    <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
-    <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
-    <style>
-      @media (min-width: 500px) and (max-width: 600px) {
-        h1 {
-          color: fuchsia;
-        }
-
-        .desc:after {
-          content:" In fact, it's between 500px and 600px wide.";
-        }
-      }
-    </style>
-    <!-- // [END mqueries] -->
-    <title>RWD Fundamentals: Experimenting with media queries</title>
-  </head>
-  <body>
-    <article role="main">
-      <h1>Media Queries</h1>
-
-      <p class="desc"></p>
-
-      <p class="orientation">Orientation:</p>
-
-      <p>
-        This is a test to show how the <code>media</code> queries
-        affects a page.
-      </p>
-
-    </article>
-  <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-      <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 640px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDFundamentals-MediaQueries");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/media-query-dppx.html b/fundamentals/design-and-ux/responsive/media-query-dppx.html
deleted file mode 100644
index 641ff88..0000000
--- a/fundamentals/design-and-ux/responsive/media-query-dppx.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Images: Using media queries for high res images</title>
-    <style>
-      /* // [START mqdppx] */
-      .sample {
-        width: 128px;
-        height: 128px;
-        background-image: url(icon1x.png);
-      }
-
-      @media (min-resolution: 2dppx), /* Standard syntax */ 
-      (-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */ 
-      {
-        .sample {
-          background-size: contain;
-          background-image: url(icon2x.png);
-        }
-      }
-      /* // [END mqdppx] */
-    </style>
-  </head>
-  <body role="main">
-    <div class="sample"></div>
-    <div class="desc">
-      On a 1x display, a <a href="icon1x.png">monochrome 128x128px icon</a> will be shown.<br>
-      On a 2x display, a <a href="icon2x.png">color 256x256px icon</a> will be shown.
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
-
-
diff --git a/fundamentals/design-and-ux/responsive/media.html b/fundamentals/design-and-ux/responsive/media.html
deleted file mode 100644
index fa27389..0000000
--- a/fundamentals/design-and-ux/responsive/media.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Images: Picture element with media attributes in source</title>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>
-  <style type="text/css">
-    @media (max-width: 449px) {
-      .vp-small {
-        font-weight: bold;
-      }
-    }
-    @media (min-width: 450px) and (max-width: 800px) {
-      .vp-medium {
-        font-weight: bold;
-      }
-    }
-    @media (min-width: 800px) {
-      .vp-large {
-        font-weight: bold;
-      }
-    }
-    p {
-      margin-top: 1rem;
-      margin-bottom: inherit;
-    }
-    li {
-      list-style: initial;
-      list-style-position: inside;
-    }
-  </style>
-</head>
-<body role="main">
-  <h1>The <code>&lt;picture&gt;</code> element</h1>
-  <p>
-    <b>Note:</b> this sample uses the <a href="http://scottjehl.github.io/picturefill/">
-    picturefill</a> polyfill to provide backwards compatibility for browsers 
-    that do not support the &lt;picture&gt; element.
-  </p>
-  <!-- // [START picture] -->
-  <picture>
-    <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
-    <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
-    <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
-  </picture>
-  <!-- // [END picture] -->
-  <p class="vp-small">Viewport widths 0 to 449px:</p>
-  <ul class="vp-small">
-    <li>
-      If <code>&lt;picture&gt;</code> is not supported, the fallback 
-      <code>&lt;img src="head-fb.jpg"&gt;</code> (150px&times;150px) is used
-    </li>
-    <li>1x display: head-fb.jpg (150px&times;150px)</li>
-    <li>2x display: head-fb-2x.jpg (300px&times;300px)</li>
-  </ul>
-  <p class="vp-medium">Viewport widths 450px to 799px:</p>
-  <ul class="vp-medium">
-    <li>1x display: head-small.jpg (200px&times;133px)</li>
-    <li>2x display: head-small-2x.jpg (400px&times;267px)</li>
-  </ul>
-  <p class="vp-large">Viewport widths 800px and over:</p>
-  <ul class="vp-large">
-    <li>1x display: head.jpg (300px&times;200px)</li>
-    <li>2x display: head-2x.jpg (600px&times;400px)</li>
-  </ul>
-  <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/min-640px.css b/fundamentals/design-and-ux/responsive/min-640px.css
deleted file mode 100644
index 3205305..0000000
--- a/fundamentals/design-and-ux/responsive/min-640px.css
+++ /dev/null
@@ -1,8 +0,0 @@
-h1 {
-  color: blue;
-}
-
-.desc:before {
-  content: "This browser window is at least 640px wide!";
-}
-
diff --git a/fundamentals/design-and-ux/responsive/mostly-fluid.html b/fundamentals/design-and-ux/responsive/mostly-fluid.html
deleted file mode 100644
index d8c19b5..0000000
--- a/fundamentals/design-and-ux/responsive/mostly-fluid.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="layouts-common.css">
-    <style>
-
-      /* // [START mfluid] */
-      .container {
-        display: -webkit-flex;
-        display: flex;
-        -webkit-flex-flow: row wrap;
-        flex-flow: row wrap;
-      }
-
-      .c1, .c2, .c3, .c4, .c5 {
-        width: 100%;
-      }
-
-      @media (min-width: 600px) {
-        .c2, .c3, .c4, .c5 {
-          width: 50%;
-        }
-      }
-
-      @media (min-width: 800px) {
-        .c1 {
-          width: 60%;
-        }
-        .c2 {
-          width: 40%;
-        }
-        /* Using 33.33%, doesn't always work right due to rounding */
-        .c3, .c4 {
-          width: 33%;
-        }
-        .c5 {
-          width: 34%;
-        }
-      }
-
-      @media (min-width: 800px) {
-        .container {
-          width: 800px;
-          margin-left: auto;
-          margin-right: auto;
-        }
-      }
-      /* // [END mfluid] */
-
-
-    </style>
-    <title>Responsive Web Design Pattern: Mostly Fluid</title>
-  </head>
-  <body>
-    <div class="container" role="main">
-      <div class="c1">
-      </div>
-      <div class="c2">
-      </div>
-      <div class="c3">
-      </div>
-      <div class="c4">
-      </div>
-      <div class="c5">
-      </div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 800px)").addListener(hitMQ);
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDPatterns-MostlyFluid");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/notype.html b/fundamentals/design-and-ux/responsive/notype.html
deleted file mode 100644
index 22e790e..0000000
--- a/fundamentals/design-and-ux/responsive/notype.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Video: Specifying multiple non-typed video source files</title>
-  <style>
-    #container {
-      max-width: 480px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    video {
-      max-width: 100%;
-    }
-
-  </style>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Video: Specifying multiple non-typed video source files</h1>
-  <video controls>
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm">
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4">
-    <p>This browser does not support the video element.</p>
-  </video>
-
-  <div id="srcInfo" class="is-hidden">
-    <p>
-      <b>Event type:</b> <span id="srcEvent"></span><br>
-      <b>Current source file:</b> <span id="srcFile"></span><br>
-      <b>Video size:</b> <span id="srcWidth"></span>&times;<span id="srcHeight"></span>
-    </p>
-  </div>
-
-
-  <script>
-
-  function init() {
-    var video = document.querySelector("video");
-    video.addEventListener("loadedmetadata", showMetadata);
-    video.addEventListener("play", showMetadata);
-  }
-
-  function showMetadata(evt) {
-    var srcInfo = document.querySelector("#srcInfo");
-    var srcEvent = document.querySelector("#srcEvent");
-    var srcFile = document.querySelector("#srcFile");
-    var srcWidth = document.querySelector("#srcWidth");
-    var srcHeight = document.querySelector("#srcHeight");
-
-    srcInfo.classList.remove("is-hidden");
-    srcEvent.textContent = evt.type;
-    srcFile.textContent = this.currentSrc.replace(/^.*[\\\/]/, '');
-    srcWidth.textContent = this.videoWidth;
-    srcHeight.textContent = this.videoHeight;
-  }
-
-  init();
-
-  </script>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/off-canvas.html b/fundamentals/design-and-ux/responsive/off-canvas.html
deleted file mode 100644
index 6a32228..0000000
--- a/fundamentals/design-and-ux/responsive/off-canvas.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="layouts-common.css">
-    <style>
-
-      /* // [START ocanvas] */
-      body {
-        overflow-x: hidden;
-      }
-      
-      .container {
-        display: block;
-      }
-
-      .c1, .c3 {
-        position: absolute;
-        width: 250px;
-        height: 100%;
-        
-        /*
-          This is a trick to improve performance on newer versions of Chrome
-          #perfmatters
-        */
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden; 
-
-        -webkit-transition: -webkit-transform 0.4s ease-out;
-        transition: transform 0.4s ease-out;
-        
-        z-index: 1;
-      }
-  
-      .c1 {
-        /*
-        Using translate3d as a trick to improve performance on older versions of Chrome
-        See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-        #perfmatters
-        */
-        -webkit-transform: translate(-250px,0);
-        transform: translate(-250px,0);
-      }
-
-      .c2 {
-        width: 100%;
-        position: absolute;
-      }
-      
-      .c3 {
-        left: 100%;
-      }
-
-      .c1.open {
-        -webkit-transform: translate(0,0);
-        transform: translate(0,0);
-      }
-
-      .c3.open {
-        -webkit-transform: translate(-250px,0);
-        transform: translate(-250px,0);
-      }
-      
-      @media (min-width: 500px) {
-        /* If the screen is wider then 500px, use Flexbox */
-        .container {
-          display: -webkit-flex;
-          display: flex;
-          -webkit-flex-flow: row nowrap;
-          flex-flow: row nowrap;
-        }
-        .c1 {
-          position: relative;
-          -webkit-transition: none 0s ease-out;
-          transition: none 0s ease-out;
-          -webkit-transform: translate(0,0);
-          transform: translate(0,0);
-        }
-        .c2 {
-          position: static;
-        }
-      }
-
-      @media (min-width: 800px) {
-        body {
-          overflow-x: auto;
-        }
-        .c3 {
-          position: relative;
-          left: auto;
-          -webkit-transition: none 0s ease-out;
-          transition: none 0s ease-out;
-          -webkit-transform: translate(0,0);
-          transform: translate(0,0);
-        }
-      }
-      /* // [END ocanvas] */
-      
-
-    </style>
-    <title>Responsive Web Design Pattern: Off Canvas</title>
-  </head>
-  <body>
-    <div class="container" role="main">
-      <div class="c1" id="leftDrawer">
-      </div>
-      <div class="c2" id="mainPanel">
-        Click the <code>div</code>'s to change views
-      </div>
-      <div class="c3" id="rightDrawer">
-      </div>
-    </div>
-
-    <script type="text/javascript">
-      var position = 0;
-      var mainPanel = document.getElementById("mainPanel");
-      var leftDrawer = document.getElementById("leftDrawer");
-      var rightDrawer = document.getElementById("rightDrawer");
-
-      function toggle(evt) {
-        position++;
-        if (position % 3 == 0) {
-          leftDrawer.classList.remove("open");
-          rightDrawer.classList.remove("open");
-        } else if (position % 3 == 1) {
-          leftDrawer.classList.add("open");
-          rightDrawer.classList.remove("open");
-        } else {
-          leftDrawer.classList.remove("open");
-          rightDrawer.classList.add("open");
-        }  
-      }
-
-      mainPanel.addEventListener("click", toggle);
-      leftDrawer.addEventListener("click", toggle);
-      rightDrawer.addEventListener("click", toggle);
-      
-    </script>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 800px)").addListener(hitMQ);
-        window.matchMedia("(min-width: 500px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDPatterns-OffCanvas");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/partly_cloudy.png b/fundamentals/design-and-ux/responsive/partly_cloudy.png
deleted file mode 100644
index e5c98e0..0000000
Binary files a/fundamentals/design-and-ux/responsive/partly_cloudy.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/portrait.css b/fundamentals/design-and-ux/responsive/portrait.css
deleted file mode 100644
index 4cc96b0..0000000
--- a/fundamentals/design-and-ux/responsive/portrait.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.orientation:after {
-  content: " Portrait";
-}
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/poster.jpg b/fundamentals/design-and-ux/responsive/poster.jpg
deleted file mode 100644
index 61e5f40..0000000
Binary files a/fundamentals/design-and-ux/responsive/poster.jpg and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/rain.png b/fundamentals/design-and-ux/responsive/rain.png
deleted file mode 100644
index c177d1e..0000000
Binary files a/fundamentals/design-and-ux/responsive/rain.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/rain_s_cloudy.png b/fundamentals/design-and-ux/responsive/rain_s_cloudy.png
deleted file mode 100644
index 807113a..0000000
Binary files a/fundamentals/design-and-ux/responsive/rain_s_cloudy.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/reading.html b/fundamentals/design-and-ux/responsive/reading.html
deleted file mode 100644
index 5195814..0000000
--- a/fundamentals/design-and-ux/responsive/reading.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <style>
-      /* // [START mqreading] */
-      @media (min-width: 575px) {
-        article {
-          width: 550px;
-          margin-left: auto;
-          margin-right: auto;
-        }
-      }
-      /* // [END mqreading] */
-    </style>
-    <title>RWD Fundamentals: Optimized reading example</title>
-  </head>
-  <body>
-    <article role="main">
-      <h1>Bacon Ipsum</h1>
-      <p>
-        Bacon ipsum dolor sit amet pancetta salami beef ribs ribeye ham. Ribeye
-        strip steak boudin t-bone chuck tri-tip kielbasa sirloin frankfurter
-        shankle ball tip ham short loin hamburger pork chop. Doner jowl tail,
-        shoulder chicken beef ribs ribeye leberkas. Tongue corned beef fatback
-        turkey pork chop bacon. Pork meatloaf andouille doner. Swine biltong ham
-        pork chop tongue, shankle shank sausage jowl landjaeger bresaola boudin
-        pork. Porchetta shank beef tongue cow, pork flank shankle rump pig.
-      </p>
-
-      <p>
-        Ground round shankle tongue chicken kevin fatback pancetta boudin strip
-        steak doner shank drumstick pork loin ball tip short ribs. Kevin rump
-        chicken ribeye salami tail andouille. Tenderloin shoulder drumstick
-        biltong jowl short ribs capicola. Ham hock pastrami spare ribs tail
-        doner frankfurter.
-      </p>
-
-      <p>
-        Pancetta ground round hamburger, tenderloin tail porchetta filet mignon
-        prosciutto bacon. Prosciutto rump spare ribs boudin meatloaf doner flank
-        chuck. Prosciutto leberkas ground round, sirloin tail flank filet mignon
-        spare ribs ham turducken jowl swine pork loin shankle. Tri-tip rump doner
-        andouille tail, bacon ham jerky. Rump shank pastrami, sausage brisket
-        chicken ribeye frankfurter andouille pork chop pork pancetta. Jowl
-        tongue filet mignon jerky, prosciutto strip steak pastrami rump.
-      </p>
-
-      <p>
-        Bresaola pork kielbasa ham hock, tail cow short ribs sirloin kevin
-        fatback ground round hamburger chuck pork belly prosciutto. Corned beef
-        swine hamburger, porchetta prosciutto chicken ball tip pork loin. Ham
-        ground round meatloaf bresaola swine, shoulder filet mignon porchetta
-        drumstick beef pork. Cow kielbasa pork chop kevin landjaeger meatball
-        jowl, frankfurter biltong shoulder tail.
-      </p>
-
-      <p>
-        Meatloaf landjaeger ground round brisket t-bone cow biltong pork belly
-        andouille pancetta capicola sirloin. Kielbasa short loin meatloaf pig,
-        ham flank strip steak pancetta bacon beef. Corned beef brisket rump
-        t-bone pork. Ribeye leberkas sirloin kevin jowl. Andouille ground round
-        meatball turkey hamburger, strip steak ham hock filet mignon tail short
-        loin bacon chuck sausage. Bresaola fatback pancetta ball tip brisket
-        jerky pastrami sirloin drumstick kevin t-bone.
-      </p>
-
-      <p>
-        Tongue hamburger pork loin, rump kielbasa salami capicola spare ribs
-        pork chop landjaeger t-bone porchetta. Beef ribs jerky ribeye bacon
-        t-bone hamburger meatloaf shankle frankfurter pork belly. Meatball
-        sausage beef, pork loin hamburger andouille meatloaf flank chicken
-        venison pastrami porchetta ribeye. Cow rump tail, filet mignon sausage
-        leberkas venison shankle short loin shoulder flank swine shank biltong.
-      </p>
-    </article>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 575px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDFundamentals-Reading");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/scripted.html b/fundamentals/design-and-ux/responsive/scripted.html
deleted file mode 100644
index edb6f3f..0000000
--- a/fundamentals/design-and-ux/responsive/scripted.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Video: Scripting and adjusting playspeed of videos</title>
-  <style>
-    #container {
-      max-width: 480px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    video {
-      max-width: 100%;
-    }
-
-  </style>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Video: Scripting and adjusting playspeed of videos</h1>
-  <video>
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm; codecs='vp8, vorbis'">
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
-    <p>This browser does not support the video element.</p>
-  </video>
-
-  <button type="button" id="butAction">Play</button>
-
-  <label for="rangeSpeed">
-    Playback Speed (<span id="playbackSpeed">1</span>)
-    <input type="range" value="1" id="rangeSpeed" min="0.1" max="2" step="0.1">
-  </label>
-
-  <div id="srcInfo" class="is-hidden">
-    <p>
-      <b>Event type:</b> <span id="srcEvent"></span><br>
-      <b>Current source file:</b> <span id="srcFile"></span><br>
-      <b>Video size:</b> <span id="srcWidth"></span>&times;<span id="srcHeight"></span>
-    </p>
-  </div>
-
-
-  <script>
-  var video, but, rangeSpeed, speedLabel;
-
-  function init() {
-    video = document.querySelector("video");
-    video.addEventListener("loadedmetadata", showMetadata);
-    video.addEventListener("play", showMetadata);
-    video.addEventListener("pause", showMetadata);
-
-    but = document.querySelector("#butAction");
-    but.addEventListener("click", clickAction);
-
-    rangeSpeed = document.querySelector("#rangeSpeed");
-    rangeSpeed.addEventListener("change", changeSpeed);
-
-    speedLabel = document.querySelector("#playbackSpeed");
-  }
-
-  function clickAction(evt) {
-    if (video.paused) {
-      video.play();
-      but.textContent = "Pause";
-
-    } else {
-      video.pause();
-      but.textContent = "Play";
-    }
-    sampleCompleted("Video-ScriptedButton");
-  }
-
-  function changeSpeed(evt) {
-    var speed = parseFloat(rangeSpeed.value);
-    video.playbackRate = speed;
-    speedLabel.textContent = speed;
-    sampleCompleted("Video-ScriptedSpeed");
-  }
-
-  function showMetadata(evt) {
-    var srcInfo = document.querySelector("#srcInfo");
-    var srcEvent = document.querySelector("#srcEvent");
-    var srcFile = document.querySelector("#srcFile");
-    var srcWidth = document.querySelector("#srcWidth");
-    var srcHeight = document.querySelector("#srcHeight");
-
-    srcInfo.classList.remove("is-hidden");
-    srcEvent.textContent = evt.type;
-    srcFile.textContent = this.currentSrc.replace(/^.*[\\\/]/, '');
-    srcWidth.textContent = this.videoWidth;
-    srcHeight.textContent = this.videoHeight;
-  }
-
-  init();
-
-  </script>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/sizes.html b/fundamentals/design-and-ux/responsive/sizes.html
deleted file mode 100644
index cbe05e9..0000000
--- a/fundamentals/design-and-ux/responsive/sizes.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Images: srcset and the sizes attribute</title>
-  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>
-  <link rel="stylesheet" type="text/css" href="margins.css">
-</head>
-<body role="main">
-  <div class="add_margin">
-    <h1>Specifying sizes for the <code>&lt;picture&gt;</code> element</h1>
-    <p>
-      <b>Note:</b> this sample uses the <a href="http://scottjehl.github.io/picturefill/">
-      picturefill</a> polyfill to provide backwards compatibility for browsers 
-      that do not support the &lt;picture&gt; element.
-    </p>
-  </div>
-  <!-- // [START picture] -->
-  <img src="lighthouse-200.jpg" sizes="50vw"
-       srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
-               lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
-               lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
-               lighthouse-1800.jpg 1800w" alt="a lighthouse">
-  <!-- // [END picture] -->
-  <p class="add_margin">The image should always be 50% of the viewport width and show at
-    the correct pixel density.
-  </p>
-  <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/small-2x.png b/fundamentals/design-and-ux/responsive/small-2x.png
deleted file mode 100644
index e84b3b4..0000000
Binary files a/fundamentals/design-and-ux/responsive/small-2x.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/small.png b/fundamentals/design-and-ux/responsive/small.png
deleted file mode 100644
index 9a8248f..0000000
Binary files a/fundamentals/design-and-ux/responsive/small.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/sprite-sheet.png b/fundamentals/design-and-ux/responsive/sprite-sheet.png
deleted file mode 100644
index 49ff251..0000000
Binary files a/fundamentals/design-and-ux/responsive/sprite-sheet.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/sunny.png b/fundamentals/design-and-ux/responsive/sunny.png
deleted file mode 100644
index c3cb932..0000000
Binary files a/fundamentals/design-and-ux/responsive/sunny.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/thunderstorms.png b/fundamentals/design-and-ux/responsive/thunderstorms.png
deleted file mode 100644
index 8f910e0..0000000
Binary files a/fundamentals/design-and-ux/responsive/thunderstorms.png and /dev/null differ
diff --git a/fundamentals/design-and-ux/responsive/tiny-tweaks.html b/fundamentals/design-and-ux/responsive/tiny-tweaks.html
deleted file mode 100644
index 4f1d699..0000000
--- a/fundamentals/design-and-ux/responsive/tiny-tweaks.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="layouts-common.css">
-    <style>
-
-      /* // [START ttweaks] */
-      .c1 {
-        padding: 10px;
-        width: 100%;
-      }
-
-      @media (min-width: 500px) {
-        .c1 {
-          padding: 20px;
-          font-size: 1.5em;
-        }
-      }
-
-      @media (min-width: 800px) {
-        .c1 {
-          padding: 40px;
-          font-size: 2em;
-        }
-      }
-      /* // [END ttweaks] */
-
-    </style>
-    <title>Responsive Web Design Pattern: Tiny Tweaks</title>
-  </head>
-  <body>
-    <div class="container" role="main">
-      <div class="c1">
-        <p>
-          Bacon ipsum dolor sit amet pancetta salami beef ribs ribeye ham. Ribeye
-          strip steak boudin t-bone chuck tri-tip kielbasa sirloin frankfurter
-          shankle ball tip ham short loin hamburger pork chop. Doner jowl tail,
-          shoulder chicken beef ribs ribeye leberkas. Tongue corned beef fatback
-          turkey pork chop bacon. Pork meatloaf andouille doner. Swine biltong ham
-          pork chop tongue, shankle shank sausage jowl landjaeger bresaola boudin
-          pork. Porchetta shank beef tongue cow, pork flank shankle rump pig.
-        </p>
-
-        <p>
-          Ground round shankle tongue chicken kevin fatback pancetta boudin strip
-          steak doner shank drumstick pork loin ball tip short ribs. Kevin rump
-          chicken ribeye salami tail andouille. Tenderloin shoulder drumstick
-          biltong jowl short ribs capicola. Ham hock pastrami spare ribs tail
-          doner frankfurter.
-        </p>
-
-        <p>
-          Pancetta ground round hamburger, tenderloin tail porchetta filet mignon
-          prosciutto bacon. Prosciutto rump spare ribs boudin meatloaf doner flank
-          chuck. Prosciutto leberkas ground round, sirloin tail flank filet mignon
-          spare ribs ham turducken jowl swine pork loin shankle. Tri-tip rump doner
-          andouille tail, bacon ham jerky. Rump shank pastrami, sausage brisket
-          chicken ribeye frankfurter andouille pork chop pork pancetta. Jowl
-          tongue filet mignon jerky, prosciutto strip steak pastrami rump.
-        </p>
-      </div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 800px)").addListener(hitMQ);
-        window.matchMedia("(min-width: 500px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDPatterns-TinyTweaks");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/unyt.html b/fundamentals/design-and-ux/responsive/unyt.html
deleted file mode 100644
index cf6ec6b..0000000
--- a/fundamentals/design-and-ux/responsive/unyt.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-  <title>Video: Embedded YouTube video (non-responsive)</title>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Embedded YouTube video (non-responsive)</h1>
-
-  <iframe width="560" height="315" src="//www.youtube.com/embed/Oic22dQMRXQ" frameborder="0" allowfullscreen></iframe>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/vp-fixed.html b/fundamentals/design-and-ux/responsive/vp-fixed.html
deleted file mode 100644
index 4235209..0000000
--- a/fundamentals/design-and-ux/responsive/vp-fixed.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <link rel="stylesheet" href="vpdemo.css">
-    <style>
-      article {
-        width: 344px;
-      }
-    </style>
-    <title>RWD Fundamentals: Viewport (3 - "width=device-width, initial-scale=1" with fixed with element)</title>
-  </head>
-  <body>
-    <article role="main">
-      <h1>Fixed width element</h1>
-
-      <p>
-        This is a test to show what happens when using fixed width on
-        an element.  The width of this element is set to <b>344px</b>.
-      </p>
-
-      <p>
-        This page <b>DOES</b> have the <code>meta
-        viewport</code> set.
-      </p>
-
-      <p>
-        <b>Note:</b> each box on the background is 50px wide. 
-      </p>
-    </article>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/vp-no.html b/fundamentals/design-and-ux/responsive/vp-no.html
deleted file mode 100644
index 02fc6a5..0000000
--- a/fundamentals/design-and-ux/responsive/vp-no.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="vpdemo.css">
-    <title>RWD Fundamentals: Viewport (1 - not set)</title>
-  </head>
-  <body>
-    <article role="main">
-      <h1><code>viewport</code> <b>not</b> set</h1>
-
-      <p>
-        This page does <b>NOT</b> have the <code>meta
-        viewport</code> set.
-      </p>
-
-      <p>
-        This is a test to show how the <code>meta viewport</code> tag
-        affects a page. To simplify this example as much as possible,
-        font boosting has been disabled.
-      </p>
-
-      <p>
-        <b>Note:</b> each box on the background is 50px wide. 
-      </p>
-    </article>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/vp.html b/fundamentals/design-and-ux/responsive/vp.html
deleted file mode 100644
index ecfee9c..0000000
--- a/fundamentals/design-and-ux/responsive/vp.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <link rel="stylesheet" href="vpdemo.css">
-    <title>RWD Fundamentals: Viewport (2 - "width=device-width, initial-scale=1")</title>
-  </head>
-  <body>
-    <article role="main">
-      <h1><code>viewport</code> set</h1>
-
-      <p>
-        This page <b>DOES</b> have the <code>meta
-        viewport</code> set.
-      </p>
-
-      <p>
-        This is a test to show how the <code>meta viewport</code> tag
-        affects a page. To simplify this example as much as possible,
-        font boosting has been disabled.
-      </p>
-
-      <p>
-        <b>Note:</b> each box on the background is 50px wide. 
-      </p>
-    </article>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/vpdemo.css b/fundamentals/design-and-ux/responsive/vpdemo.css
deleted file mode 100644
index b3c4322..0000000
--- a/fundamentals/design-and-ux/responsive/vpdemo.css
+++ /dev/null
@@ -1,24 +0,0 @@
-* {
-  box-sizing: border-box;
-  /* Disable font boosting */
-  max-height: 1000000px;
-  -webkit-text-size-adjust: 100%;
-  -moz-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-}
-
-body {
-  background-image: url('checker.png');
-}
-
-article {
-  width: 100%;
-  color: #ccc;
-  background-color: rgba(0, 0, 0, 0.9);
-  padding: 10px;
-  border-radius: 4px;
-}
-
-b {
-  color: #fff;
-}
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/weather-1.css b/fundamentals/design-and-ux/responsive/weather-1.css
deleted file mode 100644
index dd31731..0000000
--- a/fundamentals/design-and-ux/responsive/weather-1.css
+++ /dev/null
@@ -1,177 +0,0 @@
-* {
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  font-family: Roboto, Arial;
-  font-size: 0.8em;
-  color: #666;
-  overflow-y: hidden;
-}
-
-.icon {
-  background-repeat: no-repeat;
-  display: inline-block;
-  margin-left: auto;
-  margin-right: auto;
-  background-size: contain;
-}
-
-.icon.rain {
-  background-image: url('rain.png');
-}
-
-.icon.sunny {
-  background-image: url('sunny.png');
-}
-
-.icon.pc {
-  background-image: url('partly_cloudy.png');
-}
-
-.icon.sshowers {
-  background-image: url('rain_s_cloudy.png');
-}
-
-.icon.cloudy {
-  background-image: url('cloudy.png');
-}
-
-.icon.thunder {
-  background-image: url('thunderstorms.png');
-}
-
-.weather-forecast {
-  width: 100%;
-  padding: 10px 10px 0 10px;
-  display: inline-block;
-}
-
-/* Header row */
-
-.location {
-  font-size: 3em;
-  color: #444;
-}
-
-/* Current Weather Summary */
-.current {
-  overflow: auto;
-  width:100%;
-  margin-bottom: 15px;
-}
-
-.current .visual {
-  width: 50%;
-  float: left;
-}
-
-.current .description {
-  width: 50%;
-  float: left;
-}
-
-/* Current Weather - Visual */
-
-.visual .icon {
-  width: 64px;
-  height: 64px;
-}
-
-.temp {
-  font-size: 2.5em;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.scale {
-  vertical-align: top;
-  display: inline-block;
-  margin-top: 6px;
-  color: #888;
-}
-
-/* General Labels */
-
-.wind:before {
-  content: "Wind: ";
-  color: #888;
-}
-
-.precip:before {
-  content: "Precipitation: ";
-  color: #888;
-}
-
-.humidity:before {
-  content: "Humidity: ";
-  color: #888;
-}
-
-.pollen:before {
-  content: "Pollen Count: ";
-  color: #888;
-}
-
-.pcount:before {
-  content: "Pollen ";
-  color: #888;
-}
-
-
-/* Seven Day Forecast */
-
-.seven-day div {
-  vertical-align: middle;
-}
-
-.seven-day-fc {
-  border-top: 1px solid rgba(0,0,0,0.2);
-  margin: 0 -11px -1px -11px;
-  padding: 10px;
-}
-
-.seven-day-fc:last-of-type {
-  border-bottom: 1px solid rgba(0,0,0,0.2);
-}
-
-.seven-day-fc div {
-  display: inline-block;
-}
-
-.seven-day-fc .date {
-  font-weight: bold;
-  color: #444;
-  width: 30%;
-}
-
-.seven-day-fc .icon {
-  width: 50px;
-  height: 50px;
-}
-
-.seven-day-fc .seven-day-temp {
-  text-align: center;
-  width: 30%;
-}
-
-.seven-day-fc .temp-high {
-  color: #444;
-
-}
-
-.seven-day-fc .temp-low {
-  color: #888;
-}
-
-.seven-day-fc .temp-low,
-.seven-day-fc .temp-high {
-  display: block;
-}
-
-.seven-day-fc .pcount {
-  text-align: center;
-  width: 16%;
-}
diff --git a/fundamentals/design-and-ux/responsive/weather-1.html b/fundamentals/design-and-ux/responsive/weather-1.html
deleted file mode 100644
index 9130837..0000000
--- a/fundamentals/design-and-ux/responsive/weather-1.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="weather-1.css">
-    <title>RWD Fundamentals: Weather (1 - non-responsive mobile)</title>
-  </head>
-  <body>
-    <div class="weather-forecast" role="main">
-      <div class="location">New York, NY</div>
-      <div class="date">Tuesday, April 15th</div>
-      <div class="desc">Overcast</div>
-      <div class="current">
-        <div class="visual">
-          <div class="icon cloudy"></div>
-          <div class="temp">58</div>
-          <div class="scale">&deg;F</div>
-        </div>
-        <div class="description">
-          <div class="precip">100%</div>
-          <div class="humidity">97%</div>
-          <div class="wind">4 mph SW</div>
-          <div class="pollen">36</div>
-        </div>
-      </div>
-      <div class="seven-day">
-        <div class="seven-day-fc">
-          <div class="date">Today</div>
-          <div class="icon thunder"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">68&deg;</div>
-            <div class="temp-low">36&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Wednesday</div>
-          <div class="icon sunny"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">50&deg;</div>
-            <div class="temp-low">39&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Thursday</div>
-          <div class="icon sunny"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">55&deg;</div>
-            <div class="temp-low">39&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Friday</div>
-          <div class="icon pc"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">54&deg;</div>
-            <div class="temp-low">43&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Saturday</div>
-          <div class="icon sshowers"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">64&deg;</div>
-            <div class="temp-low">46&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Sunday</div>
-          <div class="icon sshowers"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">64&deg;</div>
-            <div class="temp-low">50&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Monday</div>
-          <div class="icon pc"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">61&deg;</div>
-            <div class="temp-low">50&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-      </div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/weather-2-large.css b/fundamentals/design-and-ux/responsive/weather-2-large.css
deleted file mode 100644
index 277c1f4..0000000
--- a/fundamentals/design-and-ux/responsive/weather-2-large.css
+++ /dev/null
@@ -1,42 +0,0 @@
-
-body {
-  font-size: 1.0em;
-}
-
-.weather-forecast {
-  width: 100%;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-}
-
-
-.seven-day-fc {
-  display: inline-block;
-  width: 13.5%;
-  margin: 0;
-  border: none;
-  font-size: 0.8em;
-}
-
-.seven-day-fc div {
-  display: block;
-  text-align: center;
-}
-
-.seven-day-fc .date {
-  text-align: center;
-}
-
-.seven-day-fc .temp-low,
-.seven-day-fc .temp-high {
-  display: inline;
-}
-
-.seven-day-fc .seven-day-temp {
-  font-size: 1.25em;
-}
-
-.seven-day-fc .icon {
-  width: 64px;
-  height: 64px;
-}
-
diff --git a/fundamentals/design-and-ux/responsive/weather-2-small.css b/fundamentals/design-and-ux/responsive/weather-2-small.css
deleted file mode 100644
index 20d5bf2..0000000
--- a/fundamentals/design-and-ux/responsive/weather-2-small.css
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-.weather-forecast {
-  width: 100%;
-}
-
-.seven-day-fc {
-  border-top: 1px solid rgba(0,0,0,0.2);
-}
-
-.seven-day-fc:last-of-type {
-  border-bottom: 1px solid rgba(0,0,0,0.2);
-}
-
-.seven-day-fc .date {
-  width: 30%;
-}
-
-.seven-day-fc .seven-day-temp {
-  width: 30%;
-}
-
-.seven-day-fc .pcount {
-  width: 16%;
-}
-
diff --git a/fundamentals/design-and-ux/responsive/weather-2.html b/fundamentals/design-and-ux/responsive/weather-2.html
deleted file mode 100644
index 70ee179..0000000
--- a/fundamentals/design-and-ux/responsive/weather-2.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- // [START mqweather2] -->
-    <link rel="stylesheet" href="weather.css">
-    <link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
-    <link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">
-    <!-- // [END mqweather2] -->
-    <title>RWD Fundamentals: Weather (2 - responsive)</title>
-  </head>
-  <body>
-    <div class="weather-forecast" role="main">
-      <div class="location">New York, NY</div>
-      <div class="date">Tuesday, April 15th</div>
-      <div class="desc">Overcast</div>
-      <div class="current">
-        <div class="visual">
-          <div class="icon cloudy"></div>
-          <div class="temp">58</div>
-          <div class="scale">&deg;F</div>
-        </div>
-        <div class="description">
-          <div class="precip">100%</div>
-          <div class="humidity">97%</div>
-          <div class="wind">4 mph SW</div>
-          <div class="pollen">36</div>
-        </div>
-      </div>
-      <div class="seven-day">
-        <div class="seven-day-fc">
-          <div class="date">Today</div>
-          <div class="icon thunder"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">68&deg;</div>
-            <div class="temp-low">36&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Wednesday</div>
-          <div class="icon sunny"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">50&deg;</div>
-            <div class="temp-low">39&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Thursday</div>
-          <div class="icon sunny"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">55&deg;</div>
-            <div class="temp-low">39&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Friday</div>
-          <div class="icon pc"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">54&deg;</div>
-            <div class="temp-low">43&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Saturday</div>
-          <div class="icon sshowers"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">64&deg;</div>
-            <div class="temp-low">46&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Sunday</div>
-          <div class="icon sshowers"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">64&deg;</div>
-            <div class="temp-low">50&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Monday</div>
-          <div class="icon pc"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">61&deg;</div>
-            <div class="temp-low">50&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-      </div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDFundamentals-Weather2");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/design-and-ux/responsive/weather-large.css b/fundamentals/design-and-ux/responsive/weather-large.css
deleted file mode 100644
index 2021db5..0000000
--- a/fundamentals/design-and-ux/responsive/weather-large.css
+++ /dev/null
@@ -1,49 +0,0 @@
-
-body {
-  font-size: 1.0em;
-}
-
-.weather-forecast {
-  width: 100%;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-}
-
-
-.seven-day-fc {
-  display: inline-block;
-  width: 13.5%;
-  margin: 0;
-  border: none;
-  font-size: 0.8em;
-}
-
-.seven-day-fc div {
-  display: block;
-  text-align: center;
-}
-
-.seven-day-fc .date {
-  text-align: center;
-}
-
-.seven-day-fc .temp-low,
-.seven-day-fc .temp-high {
-  display: inline;
-}
-
-.seven-day-fc .seven-day-temp {
-  font-size: 1.25em;
-}
-
-.seven-day-fc .icon {
-  width: 64px;
-  height: 64px;
-}
-
-/* // [START mqsmallbplg] */
-@media (min-width: 700px) {
-  .weather-forecast {
-    width: 700px;
-  }
-}
-/* // [END mqsmallbplg] */
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/weather-small.css b/fundamentals/design-and-ux/responsive/weather-small.css
deleted file mode 100644
index 9bafcbe..0000000
--- a/fundamentals/design-and-ux/responsive/weather-small.css
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-.weather-forecast {
-  width: 100%;
-}
-
-.seven-day-fc {
-  border-top: 1px solid rgba(0,0,0,0.2);
-}
-
-.seven-day-fc:last-of-type {
-  border-bottom: 1px solid rgba(0,0,0,0.2);
-}
-
-.seven-day-fc .date {
-  width: 30%;
-}
-
-.seven-day-fc .seven-day-temp {
-  width: 30%;
-}
-
-.seven-day-fc .pcount {
-  width: 16%;
-}
-
-
-/* // [START mqsmallbpsm] */
-@media (min-width: 360px) {
-  body {
-    font-size: 1.0em;
-  }
-}
-
-@media (min-width: 500px) {
-  .seven-day-fc .temp-low,
-  .seven-day-fc .temp-high {
-    display: inline-block;
-    width: 45%;
-  }
-
-  .seven-day-fc .seven-day-temp {
-    margin-left: 5%;
-  }
-
-  .seven-day-fc .icon {
-    width: 64px;
-    height: 64px;
-  }
-}
-/* // [END mqsmallbpsm] */
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/weather.css b/fundamentals/design-and-ux/responsive/weather.css
deleted file mode 100644
index 5dabe7b..0000000
--- a/fundamentals/design-and-ux/responsive/weather.css
+++ /dev/null
@@ -1,179 +0,0 @@
-* {
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  /*border: 1px solid #999;*/
-}
-
-body {
-  font-family: Roboto, Arial;
-  font-size: 0.8em;
-  color: #666;
-  overflow-y: hidden;
-}
-
-.icon {
-  background-repeat: no-repeat;
-  display: inline-block;
-  margin-left: auto;
-  margin-right: auto;
-  background-size: contain;
-}
-
-.icon.rain {
-  background-image: url('rain.png');
-}
-
-.icon.sunny {
-  background-image: url('sunny.png');
-}
-
-.icon.pc {
-  background-image: url('partly_cloudy.png');
-}
-
-.icon.sshowers {
-  background-image: url('rain_s_cloudy.png');
-}
-
-.icon.cloudy {
-  background-image: url('cloudy.png');
-}
-
-.icon.thunder {
-  background-image: url('thunderstorms.png');
-}
-
-.weather-forecast {
-  padding: 10px 10px 0 10px;
-  display: inline-block;
-  
-}
-
-/* Header row */
-
-.location {
-  font-size: 3em;
-  color: #444;
-}
-
-.date {
-
-}
-
-.desc {
-
-}
-
-/* Current Weather Summary */
-.current {
-  overflow: auto;
-  width:100%;
-  margin-bottom: 15px;
-}
-
-.current .visual {
-  width: 50%;
-  float: left;
-}
-
-.current .description {
-  width: 50%;
-  float: left;
-}
-
-/* Current Weather - Visual */
-
-.visual .icon {
-  width: 64px;
-  height: 64px;
-}
-
-.temp {
-  font-size: 2.5em;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.scale {
-  vertical-align: top;
-  display: inline-block;
-  margin-top: 6px;
-  color: #888;
-}
-
-/* General Labels */
-
-.wind:before {
-  content: "Wind: ";
-  color: #888;
-}
-
-.precip:before {
-  content: "Precipitation: ";
-  color: #888;
-}
-
-.humidity:before {
-  content: "Humidity: ";
-  color: #888;
-}
-
-.pollen:before {
-  content: "Pollen Count: ";
-  color: #888;
-}
-
-.pcount:before {
-  content: "Pollen ";
-  color: #888;
-}
-
-
-/* Seven Day Forecast */
-
-.seven-day div {
-  vertical-align: middle;
-}
-
-.seven-day-fc {
-  
-  margin: 0 -11px -1px -11px;
-  padding: 10px;
-}
-
-.seven-day-fc div {
-  display: inline-block;
-}
-
-.seven-day-fc .date {
-  font-weight: bold;
-  color: #444;
-}
-
-.seven-day-fc .icon {
-  width: 50px;
-  height: 50px;
-}
-
-.seven-day-fc .seven-day-temp {
-  text-align: center;
-}
-
-.seven-day-fc .temp-high {
-  color: #444;
-
-}
-
-.seven-day-fc .temp-low {
-  color: #888;
-}
-
-.seven-day-fc .temp-low,
-.seven-day-fc .temp-high {
-  display: block;
-}
-
-.seven-day-fc .pcount {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/fundamentals/design-and-ux/responsive/weather.html b/fundamentals/design-and-ux/responsive/weather.html
deleted file mode 100644
index 68640a3..0000000
--- a/fundamentals/design-and-ux/responsive/weather.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="weather.css">
-    <link rel="stylesheet" media="(max-width:600px)" href="weather-small.css">
-    <link rel="stylesheet" media="(min-width:601px)" href="weather-large.css">
-    <title>RWD Fundamentals: Weather (3 - final)</title>
-  </head>
-  <body>
-    <div class="weather-forecast" role="main">
-      <div class="location">New York, NY</div>
-      <div class="date">Tuesday, April 15th</div>
-      <div class="desc">Overcast</div>
-      <div class="current">
-        <div class="visual">
-          <div class="icon cloudy"></div>
-          <div class="temp">58</div>
-          <div class="scale">&deg;F</div>
-        </div>
-        <div class="description">
-          <div class="precip">100%</div>
-          <div class="humidity">97%</div>
-          <div class="wind">4 mph SW</div>
-          <div class="pollen">36</div>
-        </div>
-      </div>
-      <div class="seven-day">
-        <div class="seven-day-fc">
-          <div class="date">Today</div>
-          <div class="icon thunder"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">68&deg;</div>
-            <div class="temp-low">36&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Wednesday</div>
-          <div class="icon sunny"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">50&deg;</div>
-            <div class="temp-low">39&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Thursday</div>
-          <div class="icon sunny"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">55&deg;</div>
-            <div class="temp-low">39&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Friday</div>
-          <div class="icon pc"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">54&deg;</div>
-            <div class="temp-low">43&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Saturday</div>
-          <div class="icon sshowers"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">64&deg;</div>
-            <div class="temp-low">46&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Sunday</div>
-          <div class="icon sshowers"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">64&deg;</div>
-            <div class="temp-low">50&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-        <div class="seven-day-fc">
-          <div class="date">Monday</div>
-          <div class="icon pc"></div>
-          <div class="seven-day-temp">
-            <div class="temp-high">61&deg;</div>
-            <div class="temp-low">50&deg;</div>
-          </div>
-          <div class="pcount">36</div>
-        </div>
-      </div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      function init() {
-        window.matchMedia("(min-width: 600px)").addListener(hitMQ);
-      }
-
-      function hitMQ(evt) {
-        sampleCompleted("RWDFundamentals-Weather");
-      }
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/discovery/social-discovery/social-sites.html b/fundamentals/discovery/social-discovery/social-sites.html
deleted file mode 100644
index 4ae6538..0000000
--- a/fundamentals/discovery/social-discovery/social-sites.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!doctype html>
-<!-- // [START ogp] -->
-<!-- // [START twitter] -->
-<html prefix="og: http://ogp.me/ns#">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <meta property="og:title" content="Enjoy Fireworks">
-    <meta property="og:description"
-          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
-    <meta property="og:image"
-          content="https://developers.google.com/web/imgs/fireworks.jpg">
-    <meta property="og:url"
-          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
-    <meta property="og:type" content="website">
-<!-- // [END ogp] -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="agektmr">
-<!-- // [END twitter] -->
-    <title>Social Site Example</title>
-    <meta name="description" content="">
-  </head>
-  <body>
-<!-- // [START microdata] -->
-    <div itemscope itemtype="http://schema.org/Article">
-      <h1 itemprop="name">Enjoy fireworks</h1>
-      <p itemprop="description">Fireworks are beautiful.
-       This article explains how beautiful fireworks are.</p>
-      <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
-    </div>
-<!-- // [END microdata] -->
-  <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/discovery/social-discovery/social-sites2.html b/fundamentals/discovery/social-discovery/social-sites2.html
deleted file mode 100644
index 388a6d2..0000000
--- a/fundamentals/discovery/social-discovery/social-sites2.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!doctype html>
-<!-- // [START best_practice] -->
-<!-- namespace declaration -->
-<html prefix="og: http://ogp.me/ns#">
-  <!-- define microdata scope and type -->
-  <head itemscope itemtype="http://schema.org/Article">
-    <title>Social Site Example</title>
-    <!-- define ogp and itemprop of microdata in one line -->
-    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
-    <!-- define ogp image -->
-    <meta property="og:image"
-          content="https://developers.google.com/web/imgs/fireworks.jpg">
-    <!-- use link[href] to define image url for microdata -->
-    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
-    <!-- define ogp and itemprop of microdata in one line -->
-    <meta property="og:url"
-          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
-    <!-- define ogp type -->
-    <meta property="og:type" content="website">
-    <!-- define twitter cards type -->
-    <meta name="twitter:card" content="summary_large_image">
-    <!-- define site's owner twitter id -->
-    <meta name="twitter:site" content="agektmr">
-    <!-- define description for ogp and itemprop of microdata in one line -->
-    <meta property="og:description" itemprop="description"
-          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
-    <!-- general description (separate with ogp and microdata) -->
-    <meta name="description"
-          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  </head>
-<!-- // [END best_practice] -->
-  <body>
-    <div>
-      <h1>Enjoy fireworks</h1>
-      <p>Fireworks are beautiful. This article explains how beautiful fireworks are.</p>
-      <img src="//developers.google.com/web/imgs/fireworks.jpg" />
-    </div>
-  </body>
-</html>
diff --git a/fundamentals/media/mobile-web-video-playback.css b/fundamentals/media/mobile-web-video-playback.css
deleted file mode 100644
index f82a7a1..0000000
--- a/fundamentals/media/mobile-web-video-playback.css
+++ /dev/null
@@ -1,214 +0,0 @@
-body {
-    margin: 0 auto;
-    font-family: Roboto, Arial, Helvetica, sans-serif;
-}
-video {
-    width: 100%;
-    height: 100%;
-}
-p {
-    margin: 12px auto;
-    padding: 12px;
-}
-@media (orientation: landscape) {
-    p, .playlistContainer {
-        max-width: 952px;
-    }
-}
-a {
-    margin-top: 12px;
-    display: inline-block;
-    color: cornflowerblue;
-    text-decoration: none;
-}
-b {
-    font-size: 21px;
-    color: #333;
-}
-.visible button {
-    outline: none;
-    position: absolute;
-    color: white;
-    display: block;
-    opacity: 1;
-    background: transparent;
-    border: 0;
-    padding: 0;
-    text-shadow: 0px 0px 4px black;
-    background-position: center center;
-    background-repeat: no-repeat;
-    pointer-events: auto;
-    z-index: 2;
-}
-#playPauseButton {
-    left: calc(50% - 24px);
-    top: calc(50% - 24px);
-    width: 48px;
-    height: 48px;
-    background-image: url('https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_circle_outline_white_48px.svg');
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.25);
-}
-#playPauseButton.playing {
-    background-image: url('https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_pause_circle_outline_white_48px.svg');
-}
-#toggleFullscreenButton {
-    right: 0px;
-    bottom: 0px;
-    width: 48px;
-    height: 48px;
-    padding: 12px;
-    background-image: url('https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fullscreen_white_24px.svg');
-}
-#toggleFullscreenButton.active {
-    background-image: url('https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fullscreen_exit_white_24px.svg');
-}
-#seekForwardButton {
-    right: 0px;
-    top: calc(50% - 64px);
-    width: 64px;
-    height: 128px;
-    background: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fast_forward_white_18px.svg);
-    background-position: 75% 50%;
-    background-repeat: no-repeat;
-    border-radius: 50%;
-}
-#seekBackwardButton {
-    left: 0px;
-    top: calc(50% - 64px);
-    width: 64px;
-    height: 128px;
-    background: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fast_rewind_white_18px.svg);
-    background-position: 25% 50%;
-    background-repeat: no-repeat;
-    border-radius: 50%;
-}
-button {
-    opacity: 0;
-    pointer-events: none;
-}
-.visible {
-    opacity: 1 !important;
-}
-#videoContainer {
-    position: relative;
-    height: 35vh;
-    width: 100%;
-    background: black;
-    margin: 0 auto;
-}
-@media (orientation: landscape) {
-  #videoContainer {
-      height: 57vh;
-  }
-}
-#videoContainer:-webkit-full-screen {
-    width: 100%;
-    height: 100%;
-}
-#video {
-    position: absolute;
-    will-change: filter;
-    transition: filter ease-out .2s;
-}
-.seeking {
-    filter: brightness(0);
-}
-#videoControls {
-    position: absolute;
-    opacity: 0;
-    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0) 66%,rgba(0,0,0,0.8) 100%);
-    box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.8);
-    width: 100%;
-    height: 100%;
-    transition: opacity 0.35s cubic-bezier(0, 0, 0.4, 1);
-    will-change: opacity;
-    font-weight: 400;
-    color: #fff;
-}
-#videoCurrentTime {
-    position: absolute;
-    left: 12px;
-    bottom: 12px;
-    line-height: 24px;
-    text-shadow: 0px 0px 4px black;
-}
-#videoDuration {
-    position: absolute;
-    right: 60px;
-    bottom: 12px;
-    line-height: 24px;
-    text-shadow: 0px 0px 4px black;
-}
-#videoProgressBar {
-    background: white;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 4px;
-    width: 100%;
-    will-change: transform;
-    transform-origin: 0 50%;
-    transform: scaleX(0);
-}
-.step0 button {
-    display: none;
-}
-.step1 #toggleFullscreenButton {
-    display: none;
-}
-.step1 #videoDuration {
-    right: 12px !important;
-}
-.spacer {
-    clear: both;
-    color: #333;
-    height: 100vh;
-}
-#muteButton {
-    outline: none;
-    pointer-events: auto;
-    opacity: 1;
-    background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_volume_off_white_24px.svg);
-    background-color: #673AB7;
-    background-position: 50%;
-    background-repeat: no-repeat;
-    border: 0;
-    border-radius: 50%;
-    width: 48px;
-    height: 48px;
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-}
-#muteButton.active {
-    background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_volume_up_white_24px.svg);
-}
-.playlistContainer {
-    margin: 0 auto;
-}
-.playlistContainer button {
-    padding: 8px 4px;
-    padding-bottom: 8px;
-    outline: none;
-    pointer-events: auto;
-    opacity: 1;
-    background-color: #fff;
-    border: 0;
-    font-weight: bold;
-    font-size: 16px;
-    background-repeat: no-repeat;
-}
-#previousTrackButton {
-    background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_navigate_before_black_24px.svg);
-    background-position: 6px 50%;
-    padding-left: 30px;
-    text-align: left;
-}
-#nextTrackButton {
-    background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_navigate_next_black_24px.svg);
-    background-position: calc(100% - 6px) 50%;
-    padding-right: 30px;
-    text-align: right;
-    float: right;
-}
diff --git a/fundamentals/media/mobile-web-video-playback.html b/fundamentals/media/mobile-web-video-playback.html
deleted file mode 100644
index 25bd4ab..0000000
--- a/fundamentals/media/mobile-web-video-playback.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Mobile Web Video Playback Sample</title>
-  <meta charset="utf-8">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="theme-color" content="#000">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="mobile-web-video-playback.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <div id="videoContainer">
-    <video id="video" playsinline src="https://storage.googleapis.com/media-session/caminandes/short.mp4#t=101" class="seeking"></video>
-    <div id="videoControls">
-      <button id="playPauseButton"></button>
-      <button id="toggleFullscreenButton"></button>
-      <button id="seekForwardButton"></button>
-      <button id="seekBackwardButton"></button>
-      <div id="videoCurrentTime"></div>
-      <div id="videoDuration"></div>
-      <div id="videoProgressBar"></div>
-    </div>
-  </div>
-  <p>
-    <b id="videoTitle">Caminandes 2: Gran Dillama - Blender Animated Short</b><br/>
-    <a id="videoArtist" href="http://www.blender.org">Blender Foundation</a>
-  </p>
-  <div class="playlistContainer">
-    <button id="previousTrackButton"></button>
-    <button id="nextTrackButton"></button>
-  </div>
-  <div class="spacer">
-    <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in gravida velit. Mauris egestas lectus nunc, nec rutrum nisi sagittis posuere. Nunc et aliquam urna, ac pulvinar velit. Donec a vestibulum mi, a venenatis turpis. Phasellus sollicitudin scelerisque lectus. Duis quam dui, venenatis ac quam ut, tincidunt scelerisque ante. Morbi imperdiet lacus vitae justo tempor, quis aliquet neque tincidunt. Donec venenatis urna lectus, vel tincidunt ipsum pretium non. Aliquam leo lorem, eleifend sit amet metus et, finibus dapibus ex. Fusce finibus quam vitae purus accumsan, quis eleifend nisi sagittis. Cras a purus mi. Nam id ullamcorper odio, eget varius dui. Nulla semper ipsum nisi. Nullam commodo mi in malesuada bibendum.
-    </p>
-    <p>
-    Nulla semper eleifend augue, at tristique tellus maximus at. Cras id lacus id nibh dapibus rutrum a vitae risus. Aenean congue elit vitae ex tristique, in bibendum felis porta. Quisque in congue justo. Suspendisse scelerisque metus vitae diam sollicitudin ornare. Phasellus quis aliquam ligula. Pellentesque tempus iaculis odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ultrices vitae ante eget maximus. Etiam sagittis tempor commodo. Duis vel tincidunt sem, a blandit risus. Vestibulum bibendum ex et lorem viverra, non cursus urna elementum. Ut semper felis lectus, eu consectetur dui posuere in. Nam sit amet mauris id nisl finibus pulvinar.
-    </p>
-    <p>
-    Sed tincidunt rhoncus dignissim. Phasellus odio purus, ultrices id rhoncus eu, hendrerit at magna. Praesent non orci vitae nisi feugiat fringilla eget vitae ligula. Morbi mollis, lectus quis consectetur imperdiet, lorem lacus luctus nisi, ac efficitur odio dolor id massa. Fusce iaculis mattis mi, ut varius mi rutrum ut. Cras tellus nibh, viverra id mattis quis, facilisis ut dui. Fusce ut viverra lectus.
-    </p>
-    <p>
-    Donec ex tortor, efficitur auctor dictum id, rhoncus nec sapien. Mauris rhoncus fermentum luctus. Sed placerat ante felis. Nulla dapibus sit amet arcu nec tincidunt. In vel vehicula nibh, sit amet ultrices est. Integer risus neque, elementum sit amet commodo ac, pharetra at mauris. Curabitur metus lectus, maximus id ligula finibus, porta tristique elit. Phasellus maximus in orci et tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed euismod faucibus hendrerit. Donec auctor placerat dui sit amet varius. Praesent non iaculis lorem. Integer vel dolor sagittis lorem vehicula egestas. Nullam imperdiet lacus id lectus bibendum, ac venenatis urna ultrices. Praesent elementum mattis sagittis.
-    </p>
-    <p>
-    Donec sit amet leo convallis, sodales nibh eget, maximus felis. Nullam elementum hendrerit metus. Nulla porttitor ullamcorper mi, ac iaculis diam molestie vitae. Nunc tempor hendrerit ex in tincidunt. Cras tristique, turpis vitae elementum hendrerit, turpis elit vulputate felis, vel ultrices leo diam vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi nulla, consectetur eu purus at, eleifend vehicula lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium pharetra neque, eu laoreet magna condimentum et. Etiam facilisis, tortor at consequat efficitur, nulla dui tempor risus, nec sodales enim ligula eu enim. Cras eu finibus lorem.
-    </p>
-  </div>
-  <button id="muteButton" hidden></button>
-  <script src="tiny-fullscreen-shim.js"></script>
-  <script src="mobile-web-video-playback.js"></script>
-</body>
-</html>
diff --git a/fundamentals/media/mobile-web-video-playback.js b/fundamentals/media/mobile-web-video-playback.js
deleted file mode 100644
index 1801f4e..0000000
--- a/fundamentals/media/mobile-web-video-playback.js
+++ /dev/null
@@ -1,353 +0,0 @@
-/* Basic stuff */
-
-function showVideoControls() {
-  videoControls.classList.add('visible');
-  videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
-  videoProgressBar.style.transform = `scaleX(${video.currentTime / video.duration})`;
-}
-
-function hideVideoControls() {
-  videoControls.classList.remove('visible');
-}
-
-videoControls.addEventListener('click', function(event) {
-  if (videoControls.classList.contains('visible')) {
-    hideVideoControls();
-  } else {
-    showVideoControls();
-  }
-});
-
-document.addEventListener('DOMContentLoaded', function() {
-  showVideoControls();
-});
-
-
-/* Utils */
-
-function secondsToTimeCode(seconds) {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = Math.floor(seconds % 60);
-  return [
-    h,
-    m > 9 ? m : '0' + m,
-    s > 9 ? s : '0' + s,
-  ].filter(Boolean).join(':');
-}
-
-
-/* Custom controls */
-
-video.addEventListener('loadedmetadata', function() {
-  console.log('loadedmetadata');
-  videoDuration.textContent = secondsToTimeCode(video.duration);
-  videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
-  videoProgressBar.style.transform = `scaleX(${video.currentTime / video.duration})`;
-});
-
-playPauseButton.addEventListener('click', function(event) {
-  event.stopPropagation();
-  if (video.paused) {
-    video.play();
-  } else {
-    video.pause();
-  }
-});
-
-video.addEventListener('play', function() {
-  console.log('play');
-  playPauseButton.classList.add('playing');
-  hideVideoControls();
-});
-
-video.addEventListener('pause', function() {
-  console.log('pause');
-  playPauseButton.classList.remove('playing');
-  showVideoControls();
-});
-
-video.addEventListener('ended', function() {
-  console.log('ended');
-  playPauseButton.classList.remove('playing');
-  video.currentTime = 0;
-  showVideoControls();
-});
-
-document.addEventListener('fullscreenchange', function() {
-  toggleFullscreenButton.classList.toggle('active', document.fullscreenElement);
-});
-
-video.addEventListener('timeupdate', function() {
-  console.log('timeupdate');
-  if (!videoControls.classList.contains('visible')) {
-    return;
-  }
-  videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
-  videoProgressBar.style.transform = `scaleX(${video.currentTime / video.duration})`;
-});
-
-seekForwardButton.addEventListener('click', function(event) {
-  event.stopPropagation();
-  seekForward();
-});
-
-seekBackwardButton.addEventListener('click', function(event) {
-  event.stopPropagation();
-  seekBackward();
-});
-
-const skipTime = 10;
-
-function seekForward() {
-  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
-}
-
-function seekBackward() {
-  video.currentTime = Math.max(video.currentTime - skipTime, 0);
-}
-
-video.addEventListener('seeking', function() {
-  console.log('seeking');
-  video.classList.add('seeking');
-});
-
-video.addEventListener('seeked', function() {
-  console.log('seeked');
-  setTimeout(function() {
-    video.classList.remove('seeking');
-  }, 200);
-});
-
-
-/* Fullscreen */
-
-toggleFullscreenButton.addEventListener('click', function(event) {
-  event.stopPropagation();
-  if (document.fullscreenElement) {
-    document.exitFullscreen();
-  } else {
-    requestFullscreenVideo();
-    lockScreenInLandscape();
-  }
-});
-
-function requestFullscreenVideo() {
-  if (videoContainer.requestFullscreen) {
-    videoContainer.requestFullscreen();
-  } else {
-    video.webkitEnterFullscreen();
-  }
-}
-
-if ('orientation' in screen) {
-  screen.orientation.addEventListener('change', function() {
-    // Let's automatically request fullscreen if user switches device in landscape mode.
-    if (screen.orientation.type.startsWith('landscape')) {
-      // Note: It may silently fail in browsers that don't allow requesting
-      // fullscreen from the orientation change event.
-      // https://github.com/whatwg/fullscreen/commit/e5e96a9da944babf0e246980559cd80a46a300ca
-      requestFullscreenVideo();
-    } else if (document.fullscreenElement) {
-      document.exitFullscreen();
-    }
-  });
-}
-
-function lockScreenInLandscape() {
-  if (!('orientation' in screen)) {
-    return;
-  }
-
-  // Let's force landscape mode only if device is in portrait mode and can be held in one hand.
-  if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {
-    screen.orientation.lock('landscape').then(function() {
-      // When screen is locked in landscape while user holds device in
-      // portrait, let's use the Device Orientation API to unlock screen only
-      // when it is appropriate to create a perfect and seamless experience.
-      listenToDeviceOrientationChanges();
-    });
-  }
-}
-
-function listenToDeviceOrientationChanges() {
-  if (!('DeviceOrientationEvent' in window)) {
-    return;
-  }
-
-  var previousDeviceOrientation, currentDeviceOrientation;
-  window.addEventListener('deviceorientation', function onDeviceOrientationChange(event) {
-    // event.beta represents a front to back motion of the device and
-    // event.gamma a left to right motion.
-    if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
-      previousDeviceOrientation = currentDeviceOrientation;
-      currentDeviceOrientation = 'landscape';
-      return;
-    }
-    if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
-      previousDeviceOrientation = currentDeviceOrientation;
-      // When device is rotated back to portrait, let's unlock screen orientation.
-      if (previousDeviceOrientation == 'landscape') {
-        screen.orientation.unlock();
-        window.removeEventListener('deviceorientation', onDeviceOrientationChange);
-      }
-    }
-  });
-}
-
-
-/* Background Playback */
-
-document.addEventListener('visibilitychange', function() {
-  // Pause video when page is hidden.
-  if (document.hidden) {
-    video.pause();
-  }
-});
-
-
-if ('IntersectionObserver' in window) {
-  // Show/hide mute button based on video visibility in the page.
-  function onIntersection(entries) {
-    console.log('onIntersection');
-    entries.forEach(function(entry) {
-      muteButton.hidden = video.paused || entry.isIntersecting;
-    });
-  }
-  var observer = new IntersectionObserver(onIntersection);
-  observer.observe(video);
-}
-
-muteButton.addEventListener('click', function() {
-  // Mute/unmute video on button click.
-  video.muted = !video.muted;
-});
-
-video.addEventListener('volumechange', function() {
-  muteButton.classList.toggle('active', video.muted);
-});
-
-
-let playlist = getAwesomePlaylist();
-let index = 3;
-
-previousTrackButton.addEventListener('click', playPreviousVideo);
-nextTrackButton.addEventListener('click', playNextVideo);
-
-updatePlaylistButtons();
-
-function playPreviousVideo() {
-  index = (index - 1 + playlist.length) % playlist.length;
-  playVideoFromPlaylist();
-}
-
-function playNextVideo() {
-  index = (index + 1) % playlist.length;
-  playVideoFromPlaylist();
-}
-
-function playVideoFromPlaylist() {
-  video.src = playlist[index].src;
-  video.play()
-  .then(_ => {
-    setMediaSession();
-    updatePlaylistButtons();
-  });
-}
-
-function setMediaSession() {
-  if (!('mediaSession' in navigator)) {
-    return;
-  }
-  let track = playlist[index];
-  navigator.mediaSession.metadata = new MediaMetadata({
-    title: track.title,
-    artist: track.artist,
-    artwork: track.artwork
-  });
-  navigator.mediaSession.setActionHandler('previoustrack', playPreviousVideo);
-  navigator.mediaSession.setActionHandler('nexttrack', playNextVideo);
-  navigator.mediaSession.setActionHandler('seekbackward', seekBackward);
-  navigator.mediaSession.setActionHandler('seekforward', seekForward);
-}
-
-function updatePlaylistButtons() {
-  let nextIndex = (index + 1) % playlist.length;
-  let previousIndex = (index - 1 + playlist.length) % playlist.length;
-
-  nextTrackButton.textContent = /"(.*)"/.exec(playlist[nextIndex].title)[1];
-  previousTrackButton.textContent = /"(.*)"/.exec(playlist[previousIndex].title)[1];
-}
-
-video.addEventListener('play', function() {
-  // Calling this one to set up media session just for the sake of separating
-  // background playback.
-  setMediaSession();
-}, { once: true });
-
-video.addEventListener('loadedmetadata', function() {
-  let newTitle = playlist[index].title.replace(/"/g, '');
-  if (newTitle !== videoTitle.textContent) {
-    videoTitle.textContent = newTitle;
-  }
-  let newArtist = playlist[index].artist;
-  if (newArtist !== videoArtist.textContent) {
-    videoArtist.textContent = newArtist;
-  }
-});
-
-/* Utils */
-
-function getAwesomePlaylist() {
-  const BASE_URL = 'https://storage.googleapis.com/media-session/';
-
-  return [{
-      src: BASE_URL + 'sintel/trailer.mp4',
-      title: '"Sintel" Trailer, Durian Open Movie Project',
-      artist: 'Blender Foundation',
-      artwork: [
-        { src: BASE_URL + 'sintel/artwork-96.png',  sizes: '96x96',   type: 'image/png' },
-        { src: BASE_URL + 'sintel/artwork-128.png', sizes: '128x128', type: 'image/png' },
-        { src: BASE_URL + 'sintel/artwork-192.png', sizes: '192x192', type: 'image/png' },
-        { src: BASE_URL + 'sintel/artwork-256.png', sizes: '256x256', type: 'image/png' },
-        { src: BASE_URL + 'sintel/artwork-384.png', sizes: '384x384', type: 'image/png' },
-        { src: BASE_URL + 'sintel/artwork-512.png', sizes: '512x512', type: 'image/png' },
-      ]
-    }, {
-      src: BASE_URL + 'big-buck-bunny/trailer.mov',
-      title: '"Big Buck Bunny" Trailer, Peach Open Movie Project',
-      artist: 'Blender Foundation',
-      artwork: [
-        { src: BASE_URL + 'big-buck-bunny/artwork-96.png',  sizes: '96x96',   type: 'image/png' },
-        { src: BASE_URL + 'big-buck-bunny/artwork-128.png', sizes: '128x128', type: 'image/png' },
-        { src: BASE_URL + 'big-buck-bunny/artwork-192.png', sizes: '192x192', type: 'image/png' },
-        { src: BASE_URL + 'big-buck-bunny/artwork-256.png', sizes: '256x256', type: 'image/png' },
-        { src: BASE_URL + 'big-buck-bunny/artwork-384.png', sizes: '384x384', type: 'image/png' },
-        { src: BASE_URL + 'big-buck-bunny/artwork-512.png', sizes: '512x512', type: 'image/png' },
-      ]
-    }, {
-      src: BASE_URL + 'elephants-dream/teaser.mp4',
-      title: '"Elephants Dream" Teaser, Orange Open Movie Project',
-      artist: 'Blender Foundation',
-      artwork: [
-        { src: BASE_URL + 'elephants-dream/artwork-96.png',  sizes: '96x96',   type: 'image/png' },
-        { src: BASE_URL + 'elephants-dream/artwork-128.png', sizes: '128x128', type: 'image/png' },
-        { src: BASE_URL + 'elephants-dream/artwork-192.png', sizes: '192x192', type: 'image/png' },
-        { src: BASE_URL + 'elephants-dream/artwork-256.png', sizes: '256x256', type: 'image/png' },
-        { src: BASE_URL + 'elephants-dream/artwork-384.png', sizes: '384x384', type: 'image/png' },
-        { src: BASE_URL + 'elephants-dream/artwork-512.png', sizes: '512x512', type: 'image/png' },
-      ]
-    }, {
-      src: BASE_URL + 'caminandes/short.mp4',
-      title: '"Caminandes 2: Gran Dillama" - Blender Animated Short',
-      artist: 'Blender Foundation',
-      artwork: [
-        { src: BASE_URL + 'caminandes/artwork-96.png',  sizes: '96x96',   type: 'image/png' },
-        { src: BASE_URL + 'caminandes/artwork-128.png', sizes: '128x128', type: 'image/png' },
-        { src: BASE_URL + 'caminandes/artwork-192.png', sizes: '192x192', type: 'image/png' },
-        { src: BASE_URL + 'caminandes/artwork-256.png', sizes: '256x256', type: 'image/png' },
-        { src: BASE_URL + 'caminandes/artwork-384.png', sizes: '384x384', type: 'image/png' },
-        { src: BASE_URL + 'caminandes/artwork-512.png', sizes: '512x512', type: 'image/png' },
-      ]
-    }];
-}
diff --git a/fundamentals/media/responsive_embed.html b/fundamentals/media/responsive_embed.html
deleted file mode 100644
index a97bda3..0000000
--- a/fundamentals/media/responsive_embed.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-	<title>Responsive Embeds</title>
-  <style>
-    /* // [START styling] */
-    .video-container {
-        position: relative;
-        padding-bottom: 56.25%;
-        padding-top: 0;
-        height: 0;
-        overflow: hidden;
-    }
-
-    .video-container iframe,
-    .video-container object,
-    .video-container embed {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-    /* // [END styling] */
-    </style>
-</head>
-<body>
-<div id="container" role="main">
-
-  <h1>Responsive Embeds</h1>
-
-  <!-- // [START markup] -->
-  <div class="video-container">
-    <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
-            frameborder="0" width="560" height="315">
-    </iframe>
-  </div>
-  <!-- // [END markup] -->
-
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/media/tiny-fullscreen-shim.js b/fundamentals/media/tiny-fullscreen-shim.js
deleted file mode 100644
index 60b3715..0000000
--- a/fundamentals/media/tiny-fullscreen-shim.js
+++ /dev/null
@@ -1,21 +0,0 @@
-HTMLElement.prototype.requestFullscreen = HTMLElement.prototype.requestFullscreen || HTMLElement.prototype.webkitRequestFullscreen;
-HTMLDocument.prototype.exitFullscreen = HTMLDocument.prototype.exitFullscreen || HTMLDocument.prototype.webkitExitFullscreen;
-
-if (!('fullscreenElement' in document)) {
-  Object.defineProperty(document, 'fullscreenElement', {
-    get: function() {
-      return document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement;
-    }
-  });
-}
-
-for (var prefixedFullscreenChangeEvent of ['webkitfullscreenchange']) {
-  document.addEventListener(prefixedFullscreenChangeEvent, function(event) {
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-
-    var fullscreenChange = document.createEvent('Event');
-    fullscreenChange.initEvent('fullscreenchange', true /*bubbles */, false /* cancelable */);
-    event.target.dispatchEvent(fullscreenChange);
-  });
-}
diff --git a/fundamentals/media/track.html b/fundamentals/media/track.html
deleted file mode 100644
index 8492680..0000000
--- a/fundamentals/media/track.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Video: Provide captions with the track element</title>
-  <style>
-    #container {
-      max-width: 480px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    video {
-      max-width: 100%;
-    }
-
-  </style>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Video: Provide captions with the <code>track</code> element</h1>
-  <!-- // [START track] -->
-  <video controls>
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
-    <track src="chrome-subtitles-en.vtt" label="English captions"
-           kind="captions" srclang="en" default>
-    <p>This browser does not support the video element.</p>
-  </video>
-  <!-- // [END track] -->
-
-
-  <div id="srcInfo" class="is-hidden">
-    <p>
-      <b>Event type:</b> <span id="srcEvent"></span><br>
-      <b>Current source file:</b> <span id="srcFile"></span><br>
-      <b>Video size:</b> <span id="srcWidth"></span>&times;<span id="srcHeight"></span>
-    </p>
-  </div>
-
-
-  <script>
-
-  function init() {
-    document.querySelector("video").addEventListener("loadedmetadata", showMetadata);
-  }
-
-  function showMetadata(evt) {
-    var srcInfo = document.querySelector("#srcInfo");
-    var srcEvent = document.querySelector("#srcEvent");
-    var srcFile = document.querySelector("#srcFile");
-    var srcWidth = document.querySelector("#srcWidth");
-    var srcHeight = document.querySelector("#srcHeight");
-
-    srcInfo.classList.remove("is-hidden");
-    srcEvent.textContent = evt.type;
-    srcFile.textContent = this.currentSrc.replace(/^.*[\\\/]/, '');
-    srcWidth.textContent = this.videoWidth;
-    srcHeight.textContent = this.videoHeight;
-  }
-
-  init();
-
-  </script>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/media/video-main.html b/fundamentals/media/video-main.html
deleted file mode 100644
index 3534283..0000000
--- a/fundamentals/media/video-main.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-  <title>Video: Specifying multiple typed video source files</title>
-  <style>
-    #container {
-      max-width: 480px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    video {
-      max-width: 100%;
-    }
-
-  </style>
-</head>
-<body>
-<div id="container" role="main">
-  <h1>Video: Specifying multiple typed video source files</h1>
-  <!-- // [START sourcetypes] -->
-  <video controls>
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
-    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
-    <p>This browser does not support the video element.</p>
-  </video>
-  <!-- // [END sourcetypes] -->
-
-  <div id="srcInfo" class="is-hidden">
-    <p>
-      <b>Event type:</b> <span id="srcEvent"></span><br>
-      <b>Current source file:</b> <span id="srcFile"></span><br>
-      <b>Video size:</b> <span id="srcWidth"></span>&times;<span id="srcHeight"></span>
-    </p>
-  </div>
-
-
-  <script>
-
-  function init() {
-    var video = document.querySelector("video");
-    video.addEventListener("loadedmetadata", showMetadata);
-    video.addEventListener("play", showMetadata);
-  }
-
-  function showMetadata(evt) {
-    var srcInfo = document.querySelector("#srcInfo");
-    var srcEvent = document.querySelector("#srcEvent");
-    var srcFile = document.querySelector("#srcFile");
-    var srcWidth = document.querySelector("#srcWidth");
-    var srcHeight = document.querySelector("#srcHeight");
-
-    srcInfo.classList.remove("is-hidden");
-    /* // [START currentsrc] */
-    srcEvent.textContent = evt.type;
-    srcFile.textContent = this.currentSrc.replace(/^.*[\\\/]/, '');
-    srcWidth.textContent = this.videoWidth;
-    srcHeight.textContent = this.videoHeight;
-    /* // [END currentsrc] */
-  }
-
-  init();
-
-  </script>
-</div>
-<script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-</body>
-</html>
diff --git a/fundamentals/native-hardware/device-orientation/dev-orientation.html b/fundamentals/native-hardware/device-orientation/dev-orientation.html
deleted file mode 100644
index 3b5ef85..0000000
--- a/fundamentals/native-hardware/device-orientation/dev-orientation.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Device orientation</title>
-    <style type="text/css">
-      .h5logo {
-        width: 50%;
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-    </style>
-  </head>
-  <body>
-    <div role="main" class="container">
-      <h1>Device Orientation</h1>
-      <p>
-        Device orientation is <b><span id="doeSupported">not</span></b> supported 
-        on your device.
-      </p>
-
-      <img id="h5logo" src="html5-logo.svg" class="h5logo">
-
-      <h2>Rotation Data</h2>
-      <p>
-        <b>alpha:</b> <span id="alpha"></span><br>
-        <b>beta:</b> <span id="beta"></span><br>
-        <b>gamma:</b> <span id="gamma"></span><br>
-      </p>
-
-      <p>
-        <b>Last updated:</b> <span id="timestamp"></span>
-      </p>
-
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-
-      var fixed = 2;
-      var h5logo  = document.getElementById("h5logo");
-      var timestamp = document.getElementById("timestamp");
-      var alpha = document.getElementById("alpha");
-      var beta = document.getElementById("beta");
-      var gamma = document.getElementById("gamma");
-
-
-      /* // [START devori] */
-      if (window.DeviceOrientationEvent) {
-        window.addEventListener('deviceorientation', deviceOrientationHandler, false);
-        document.getElementById("doeSupported").innerText = "";
-      }
-      /* // [END devori] */
-
-      var deviceOrientationData;
-
-      function deviceOrientationHandler(evt) {
-        deviceOrientationData = evt;
-        try {
-          timestamp.innerText = new Date(evt.timeStamp);
-          alpha.innerText = evt.alpha.toFixed(fixed);
-          beta.innerText = evt.beta.toFixed(fixed);
-          gamma.innerText = evt.gamma.toFixed(fixed);
-
-          // Account for difference in coordinate systems between Device
-          // Orientation and CSS by inverting some signs, and apply the
-          // rotations in the order specified by the Device Orientation spec.
-          const rotation =
-              `rotateZ(${-evt.alpha}deg) rotateX(${evt.beta}deg) rotateY(${-evt.gamma}deg)`;
-          h5logo.style.transform = rotation;
-        } catch (ex) {
-          document.getElementById("doeSupported").innerText = "NOT";
-        }
-      }
-
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/native-hardware/device-orientation/html5-logo.svg b/fundamentals/native-hardware/device-orientation/html5-logo.svg
deleted file mode 100644
index 0171e29..0000000
--- a/fundamentals/native-hardware/device-orientation/html5-logo.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <title>HTML5 Logo</title>
-  
-  <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 			"/>
-  <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894 			"/>
-  <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
-  <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
-  <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
-  <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
-  <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
-  <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
-  <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
-  <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
-</svg>
diff --git a/fundamentals/native-hardware/device-orientation/jump-test.html b/fundamentals/native-hardware/device-orientation/jump-test.html
deleted file mode 100644
index 33e2c2d..0000000
--- a/fundamentals/native-hardware/device-orientation/jump-test.html
+++ /dev/null
@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Device Motion: Calculating the maximum acceleration of an object</title>
-
-  </head>
-  <body>
-    <div role="main" class="container">
-      <h1>Jump Test</h1>
-      <p>
-        Device motion is <b><span id="dmeSupported">not</span></b> supported 
-        on your device
-      </p>
-
-      <p>
-        <h1 id="instructions"></h1>
-      </p>
-
-      <div id="result" style="display:none;">
-        <h2>Your max acceleration was:</h2>
-        <table>
-          <tr>
-            <td id="jumpx"></td>
-            <td id="jumpy"></td>
-            <td id="jumpz"></td>
-          </tr>
-        </table>
-      </div>
-
-      <button id="butJump" type="button">Go!</button>
-
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-    <script type="text/javascript">
-      var counter, timer;
-      var but = document.getElementById("butJump");
-      var inst = document.getElementById("instructions");
-      var jumpMin, jumpMax, jumpResult;
-
-      function init() {
-        but.addEventListener("click", startJump);
-        if (window.DeviceMotionEvent) {
-          document.getElementById("dmeSupported").innerText = "";
-        }
-      }
-
-      function startJump(evt) {
-        counter = 3;
-        document.getElementById("result").style.display = "none";
-        if (timer === undefined) {
-          doCounter();
-        }
-        
-      }
-
-      function doCounter() {
-        console.log("doCounter", counter);
-        if (counter == 3) {
-          inst.innerText = "Ready!";
-        } else if (counter == 2) {
-          inst.innerText = "Get Set!";
-        } else if (counter == 1) {
-          inst.innerText = "Jump!";
-          startListener();
-        }
-        timer = undefined;
-
-        counter--
-        if (counter > 0) {
-          timer = setTimeout(doCounter, 1000);
-        }
-      }
-
-      function startListener(evt) {
-        jumpMin = { x: 0, y: 0, z: 0 };
-        jumpMax = { x: 0, y: 0, z: 0 };
-        /* // [START devmot] */
-        if (window.DeviceMotionEvent) {
-          window.addEventListener("devicemotion", deviceMotionHandler);
-          setTimeout(stopJump, 3*1000);
-        }
-        /* // [END devmot] */
-      }
-
-      function stopJump(evt) {
-        inst.innerText = "Great job!";
-        window.removeEventListener("devicemotion", deviceMotionHandler);
-        jumpResult = {};
-        jumpResult.x = jumpMax.x;
-        document.getElementById("jumpx").innerText = jumpResult.x.toFixed(3) + " m/s^2";
-        jumpResult.y = jumpMax.y;
-        document.getElementById("jumpy").innerText = jumpResult.y.toFixed(3) + " m/s^2";
-        jumpResult.z = jumpMax.z;
-        document.getElementById("jumpz").innerText = jumpResult.z.toFixed(3) + " m/s^2";
-        console.log("jump", jumpResult);
-        document.getElementById("result").style.display = "block";
-      }
-
-      
-      function deviceMotionHandler(evt) {
-        
-        if (evt.acceleration.x < jumpMin.x) {
-          jumpMin.x = evt.acceleration.x;
-        }
-        
-        if (evt.acceleration.y < jumpMin.y) {
-          jumpMin.y = evt.acceleration.y;
-        }
-        if (evt.acceleration.z < jumpMin.z) {
-          jumpMin.z = evt.acceleration.z;
-        }
-
-        /* // [START devmothand] */
-        if (evt.acceleration.x > jumpMax.x) {
-          jumpMax.x = evt.acceleration.x;
-        }
-        if (evt.acceleration.y > jumpMax.y) {
-          jumpMax.y = evt.acceleration.y;
-        }
-        if (evt.acceleration.z > jumpMax.z) {
-          jumpMax.z = evt.acceleration.z;
-        }
-        /* // [END devmothand] */
-      }
-      
-
-      init();
-
-    </script>
-  </body>
-</html>
diff --git a/fundamentals/performance/critical-rendering-path/analysis_with_css.html b/fundamentals/performance/critical-rendering-path/analysis_with_css.html
deleted file mode 100644
index c4ec762..0000000
--- a/fundamentals/performance/critical-rendering-path/analysis_with_css.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/analysis_with_css_js.html b/fundamentals/performance/critical-rendering-path/analysis_with_css_js.html
deleted file mode 100644
index 4297b23..0000000
--- a/fundamentals/performance/critical-rendering-path/analysis_with_css_js.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="app.js"></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/analysis_with_css_js_async.html b/fundamentals/performance/critical-rendering-path/analysis_with_css_js_async.html
deleted file mode 100644
index 0700ae5..0000000
--- a/fundamentals/performance/critical-rendering-path/analysis_with_css_js_async.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="app.js" async></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/analysis_with_css_nb_js_async.html b/fundamentals/performance/critical-rendering-path/analysis_with_css_nb_js_async.html
deleted file mode 100644
index 9121a88..0000000
--- a/fundamentals/performance/critical-rendering-path/analysis_with_css_nb_js_async.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet" media="print">
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="app.js" async></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/app.js b/fundamentals/performance/critical-rendering-path/app.js
deleted file mode 100644
index d509db1..0000000
--- a/fundamentals/performance/critical-rendering-path/app.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* // [START full] */
-var span = document.getElementsByTagName('span')[0];
-span.textContent = 'interactive'; // change DOM text content
-span.style.display = 'inline';  // change CSSOM property
-// create a new element, style it, and append it to the DOM
-var loadTime = document.createElement('div');
-loadTime.textContent = 'You loaded this page on: ' + new Date();
-loadTime.style.color = 'blue';
-document.body.appendChild(loadTime);
-/* // [END full] */
diff --git a/fundamentals/performance/critical-rendering-path/awesome-photo.jpg b/fundamentals/performance/critical-rendering-path/awesome-photo.jpg
deleted file mode 100644
index 186b85a..0000000
Binary files a/fundamentals/performance/critical-rendering-path/awesome-photo.jpg and /dev/null differ
diff --git a/fundamentals/performance/critical-rendering-path/basic_dom.html b/fundamentals/performance/critical-rendering-path/basic_dom.html
deleted file mode 100644
index 001a977..0000000
--- a/fundamentals/performance/critical-rendering-path/basic_dom.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-    <title>Critical Path</title>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/basic_dom_nostyle.html b/fundamentals/performance/critical-rendering-path/basic_dom_nostyle.html
deleted file mode 100644
index abba340..0000000
--- a/fundamentals/performance/critical-rendering-path/basic_dom_nostyle.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Critical Path: No Style</title>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/measure_crp.html b/fundamentals/performance/critical-rendering-path/measure_crp.html
deleted file mode 100644
index d75ef75..0000000
--- a/fundamentals/performance/critical-rendering-path/measure_crp.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Critical Path: Measure</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-    <script>
-      function measureCRP() {
-        var t = window.performance.timing,
-          interactive = t.domInteractive - t.domLoading,
-          dcl = t.domContentLoadedEventStart - t.domLoading,
-          complete = t.domComplete - t.domLoading;
-        var stats = document.createElement('p');
-        stats.textContent = 'interactive: ' + interactive + 'ms, ' +
-            'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms';
-        document.body.appendChild(stats);
-      }
-    </script>
-  </head>
-  <body onload="measureCRP()">
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/measure_crp_async.html b/fundamentals/performance/critical-rendering-path/measure_crp_async.html
deleted file mode 100644
index e02eea7..0000000
--- a/fundamentals/performance/critical-rendering-path/measure_crp_async.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Critical Path: Measure Async</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-  </head>
-  <body onload="measureCRP()">
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script async src="timing.js"></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/measure_crp_inlined.html b/fundamentals/performance/critical-rendering-path/measure_crp_inlined.html
deleted file mode 100644
index 86dbc55..0000000
--- a/fundamentals/performance/critical-rendering-path/measure_crp_inlined.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Critical Path: Measure Inlined</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <style>
-      p { font-weight: bold }
-      span { color: red }
-      p span { display: none }
-      img { float: right }
-    </style>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script>
-      var span = document.getElementsByTagName('span')[0];
-      span.textContent = 'interactive'; // change DOM text content
-      span.style.display = 'inline';  // change CSSOM property
-      // create a new element, style it, and append it to the DOM
-      var loadTime = document.createElement('div');
-      loadTime.textContent = 'You loaded this page on: ' + new Date();
-      loadTime.style.color = 'blue';
-      document.body.appendChild(loadTime);
-    </script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/measure_crp_timing.html b/fundamentals/performance/critical-rendering-path/measure_crp_timing.html
deleted file mode 100644
index 6da2275..0000000
--- a/fundamentals/performance/critical-rendering-path/measure_crp_timing.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Critical Path: Measure Script</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-  </head>
-  <body onload="measureCRP()">
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="timing.js"></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/nested.html b/fundamentals/performance/critical-rendering-path/nested.html
deleted file mode 100644
index f4ca9bc..0000000
--- a/fundamentals/performance/critical-rendering-path/nested.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Critial Path: Hello world!</title>
-  </head>
-  <body>
-    <div style="width: 50%">
-      <div style="width: 50%">Hello world!</div>
-    </div>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/script.html b/fundamentals/performance/critical-rendering-path/script.html
deleted file mode 100644
index 1e365a9..0000000
--- a/fundamentals/performance/critical-rendering-path/script.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-    <title>Critical Path: Script</title>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script>
-      var span = document.getElementsByTagName('span')[0];
-      span.textContent = 'interactive'; // change DOM text content
-      span.style.display = 'inline';  // change CSSOM property
-      // create a new element, style it, and append it to the DOM
-      var loadTime = document.createElement('div');
-      loadTime.textContent = 'You loaded this page on: ' + new Date();
-      loadTime.style.color = 'blue';
-      document.body.appendChild(loadTime);
-    </script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/split_script.html b/fundamentals/performance/critical-rendering-path/split_script.html
deleted file mode 100644
index eeef2ea..0000000
--- a/fundamentals/performance/critical-rendering-path/split_script.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-    <title>Critical Path: Script External</title>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="app.js"></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/split_script_async.html b/fundamentals/performance/critical-rendering-path/split_script_async.html
deleted file mode 100644
index 3186a09..0000000
--- a/fundamentals/performance/critical-rendering-path/split_script_async.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet">
-    <title>Critical Path: Script Async</title>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="app.js" async></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/split_script_print.html b/fundamentals/performance/critical-rendering-path/split_script_print.html
deleted file mode 100644
index 96c9d92..0000000
--- a/fundamentals/performance/critical-rendering-path/split_script_print.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- // [START full] -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link href="style.css" rel="stylesheet" media="print">
-    <title>Critical Path: Print Media</title>
-  </head>
-  <body>
-    <p>Hello <span>web performance</span> students!</p>
-    <div><img src="awesome-photo.jpg"></div>
-    <script src="app.js" async></script>
-  </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/critical-rendering-path/style.css b/fundamentals/performance/critical-rendering-path/style.css
deleted file mode 100644
index 3ef4a19..0000000
--- a/fundamentals/performance/critical-rendering-path/style.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* // [START full] */
-body { font-size: 16px }
-p { font-weight: bold }
-span { color: red }
-p span { display: none }
-img { float: right }
-/* // [END full] */
\ No newline at end of file
diff --git a/fundamentals/performance/critical-rendering-path/timing.js b/fundamentals/performance/critical-rendering-path/timing.js
deleted file mode 100644
index b88ab6b..0000000
--- a/fundamentals/performance/critical-rendering-path/timing.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function measureCRP() {
-    var span = document.getElementsByTagName('span')[0];
-    span.textContent = 'interactive'; // Change DOM text content.
-    span.style.display = 'inline';  // Change CSSOM property.
-    // Create a new element, style it, and append it to the DOM.
-    var loadTime = document.createElement('div');
-    loadTime.textContent = 'You loaded this page on: ' + new Date();
-    loadTime.style.color = 'blue';
-    document.body.appendChild(loadTime);
-}
diff --git a/fundamentals/performance/optimizing-content-efficiency/minified.html b/fundamentals/performance/optimizing-content-efficiency/minified.html
deleted file mode 100644
index 8dfe1b3..0000000
--- a/fundamentals/performance/optimizing-content-efficiency/minified.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- // [START full] -->
-<html><head><style>.awesome-container{font-size:120%;width: 50%}
-</style></head><body><div>…</div><script>awesomeAnalytics();
-</script></body></html>
-<!-- // [END full] -->
diff --git a/fundamentals/performance/optimizing-content-efficiency/minify.html b/fundamentals/performance/optimizing-content-efficiency/minify.html
deleted file mode 100644
index 4087b7b..0000000
--- a/fundamentals/performance/optimizing-content-efficiency/minify.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- // [START full] -->
-<html>
-  <head>
-  <style>
-     /* awesome-container is only used on the landing page */
-     .awesome-container { font-size: 120% }
-     .awesome-container { width: 50% }
-  </style>
- </head>
-
- <body>
-   <!-- awesome container content: START -->
-    <div>…</div>
-   <!-- awesome container content: END -->
-   <script>
-     awesomeAnalytics(); // beacon conversion metrics
-   </script>
- </body>
-</html>
-<!-- // [END full] -->
diff --git a/fundamentals/primers/async-all-example.html b/fundamentals/primers/async-all-example.html
deleted file mode 100644
index b1237c7..0000000
--- a/fundamentals/primers/async-all-example.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Promises test</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <div class="network-fake">
-    <label><input type="checkbox"> Fake network delay</label>
-  </div>
-  <div class="story"></div>
-  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
-    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
-  </svg>
-  <script src="utils.js"></script>
-  <script>
-    getJson('story.json').then(function(story) {
-      addHtmlToPage(story.heading);
-
-      // Take an array of promises and wait on them all
-      return Promise.all(
-        // Map our array of chapter urls
-        // to an array of chapter json promises
-        story.chapterUrls.map(getJson)
-      );
-    }).then(function(chapters) {
-      // Now we have the chapters jsons in order! Loop thorugh…
-      chapters.forEach(function(chapter) {
-        // …and add to the page
-        addHtmlToPage(chapter.html);
-      });
-      addTextToPage("All done");
-    }).catch(function(err) {
-      // catch any error that happened along the way
-      addTextToPage("Argh, broken: " + err.message);
-    }).then(function() {
-      document.querySelector('.spinner').style.display = 'none';
-    });
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/fundamentals/primers/async-best-example.html b/fundamentals/primers/async-best-example.html
deleted file mode 100644
index 6065acd..0000000
--- a/fundamentals/primers/async-best-example.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Promises test</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <div class="network-fake">
-    <label><input type="checkbox"> Fake network delay</label>
-  </div>
-  <div class="story"></div>
-  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
-    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
-  </svg>
-  <script src="utils.js"></script>
-  <script>
-    getJson('story.json').then(function(story) {
-      addHtmlToPage(story.heading);
-
-      // Map our array of chapter urls
-      // to an array of chapter json promises
-      return story.chapterUrls.map(getJson).reduce(function(chain, chapterPromise) {
-        // Use reduce to chain the promises together,
-        // but adding content to the page for each chapter
-        return chain.then(function() {
-          return chapterPromise;
-        }).then(function(chapter) {
-          addHtmlToPage(chapter.html);
-        });
-      }, Promise.resolve());
-    }).then(function() {
-      addTextToPage("All done");
-    }).catch(function(err) {
-      // catch any error that happened along the way
-      addTextToPage("Argh, broken: " + err.message);
-    }).then(function() {
-      document.querySelector('.spinner').style.display = 'none';
-    });
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/fundamentals/primers/async-example.html b/fundamentals/primers/async-example.html
deleted file mode 100644
index 7c40e1b..0000000
--- a/fundamentals/primers/async-example.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Promises test</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <div class="network-fake">
-    <label><input type="checkbox"> Fake network delay</label>
-  </div>
-  <div class="story"></div>
-  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
-    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
-  </svg>
-  <script src="utils.js"></script>
-  <script>
-    getJson('story.json').then(function(story) {
-      addHtmlToPage(story.heading);
-
-      return story.chapterUrls.reduce(function(chain, chapterUrl) {
-        // Once the last chapter's promise is done…
-        return chain.then(function() {
-          // …fetch the next chapter
-          return getJson(chapterUrl);
-        }).then(function(chapter) {
-          // and add it to the page
-          addHtmlToPage(chapter.html);
-        });
-      }, Promise.resolve());
-    }).then(function() {
-      // And we're all done!
-      addTextToPage("All done");
-    }).catch(function(err) {
-      // Catch any error that happened along the way
-      addTextToPage("Argh, broken: " + err.message);
-    }).then(function() {
-      // Always hide the spinner
-      document.querySelector('.spinner').style.display = 'none';
-    });
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/fundamentals/primers/async-generators-example.html b/fundamentals/primers/async-generators-example.html
deleted file mode 100644
index 0e6d6c6..0000000
--- a/fundamentals/primers/async-generators-example.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Promises test</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <div class="network-fake">
-    <label><input type="checkbox"> Fake network delay</label>
-  </div>
-  <div class="story"></div>
-  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
-    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
-  </svg>
-  <script src="utils.js"></script>
-  <script>
-    spawn(function *() {
-      "use strict";
-      try {
-        // 'yield' effectively does an async wait, returning the result of the promise
-        let story = yield getJson('story.json');
-        addHtmlToPage(story.heading);
-
-        // Map our array of chapter urls
-        // to an array of chapter json promises.
-        // This makes sure they all download parallel.
-        let chapterPromises = story.chapterUrls.map(getJson);
-
-        // Can't use chapterPromises.forEach, because yielding within doesn't work
-        for (let i = 0, chapterPromise; chapterPromise = chapterPromises[i]; i++) {
-          // Wait for each chapter to be ready, then add it to the page
-          let chapter = yield chapterPromise;
-          addHtmlToPage(chapter.html);
-        }
-
-        addTextToPage("All done");
-      }
-      catch (err) {
-        // try/catch just works, rejected promises are thrown here
-        addTextToPage("Argh, broken: " + err.message);
-      }
-      document.querySelector('.spinner').style.display = 'none';
-    });
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/fundamentals/primers/chapter-1.json b/fundamentals/primers/chapter-1.json
deleted file mode 100644
index c63fe9c..0000000
--- a/fundamentals/primers/chapter-1.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "chapter": 1,
-  "html": "<p>Chapter 1 text: Cras sollicitudin orci ac velit adipiscing, ut faucibus urna auctor. Pellentesque in sem nec sem molestie malesuada. Sed aliquam mi sit amet sollicitudin luctus. Aenean quis tempus sem, in viverra metus. Maecenas sed urna bibendum, cursus lectus sed, ultricies risus.</p>"
-}
\ No newline at end of file
diff --git a/fundamentals/primers/chapter-2.json b/fundamentals/primers/chapter-2.json
deleted file mode 100644
index 411f0e8..0000000
--- a/fundamentals/primers/chapter-2.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "chapter": 2,
-  "html": "<p>Chapter 2 text: Curabitur laoreet cursus lectus, id tempus massa volutpat a. Vivamus placerat diam risus, ut rutrum neque consectetur ac. Sed ullamcorper porttitor diam, sit amet sollicitudin velit fermentum in. Praesent aliquet dui ac lorem molestie, non luctus lacus porta. Nullam risus justo, aliquam sit amet neque at, fringilla pharetra mi. Curabitur tincidunt dictum magna, vitae faucibus urna vehicula sit amet. Donec ornare malesuada nisi. Pellentesque tincidunt ultrices quam, ac laoreet risus convallis in. Ut consequat justo dolor, ac venenatis mi aliquam nec. Ut quis accumsan est, non pulvinar orci. Ut hendrerit nunc et laoreet rutrum. Nulla et libero fringilla, sodales risus in, euismod libero.</p>"
-}
\ No newline at end of file
diff --git a/fundamentals/primers/chapter-3.json b/fundamentals/primers/chapter-3.json
deleted file mode 100644
index 5b3f75f..0000000
--- a/fundamentals/primers/chapter-3.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "chapter": 3,
-  "html": "<p>Chapter 3 text: Duis ac lobortis mi. Vestibulum non augue pellentesque, convallis diam vitae, sollicitudin nulla. Aenean et pharetra erat, lobortis tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum gravida ligula justo, vitae ullamcorper metus scelerisque non. Vestibulum commodo vel metus eget vestibulum. Phasellus porttitor, nunc nec rutrum vulputate, quam lorem dapibus urna, vel accumsan purus mauris id urna. Morbi vitae rutrum nisl, sit amet cursus est. Donec ipsum dui, aliquam non metus at, ultrices accumsan odio. Morbi pretium eros eu lorem commodo pulvinar.</p><p>Donec quis elementum orci. Aenean viverra, nisl eget tempus sodales, velit elit pretium dui, eu ultrices tellus lectus rhoncus orci. Praesent arcu sem, lacinia sit amet tempus ultrices, malesuada eu odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt dictum posuere. Ut pretium lacinia tortor sit amet consequat. Phasellus ac velit pharetra, fringilla mi ut, porta neque. Donec non urna dolor. Sed sem erat, mattis non risus et, lobortis fringilla dui.</p>"
-}
\ No newline at end of file
diff --git a/fundamentals/primers/chapter-4.json b/fundamentals/primers/chapter-4.json
deleted file mode 100644
index c2662f1..0000000
--- a/fundamentals/primers/chapter-4.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "chapter": 4,
-  "html": "<p>Chapter 4 text: Maecenas nec ipsum viverra erat tincidunt convallis. Morbi nec varius lectus. Vivamus vestibulum massa vitae sapien vestibulum, eu pretium felis consectetur. Nulla sagittis sem sapien. Integer quis imperdiet ipsum, a luctus sem. Duis aliquet feugiat mauris, sed posuere diam aliquam eu. Phasellus vel turpis ac nunc blandit blandit. Sed hendrerit risus nec odio egestas gravida. Vestibulum eget purus vel nulla gravida vulputate eu auctor turpis. Integer laoreet cursus consectetur. Integer laoreet sapien a urna sollicitudin blandit. Curabitur commodo quam ut erat suscipit, ac elementum quam adipiscing. Fusce id venenatis dui. Sed vel diam vel est ullamcorper lacinia. Curabitur sollicitudin diam pharetra tincidunt scelerisque.</p>"
-}
\ No newline at end of file
diff --git a/fundamentals/primers/chapter-5.json b/fundamentals/primers/chapter-5.json
deleted file mode 100644
index 8cb424e..0000000
--- a/fundamentals/primers/chapter-5.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "chapter": 5,
-  "html": "<p>Chapter 5 text: Vivamus dignissim enim vel dolor commodo, in vehicula est facilisis. Aliquam ac ipsum sem. Sed justo risus, tincidunt ac lectus nec, molestie elementum urna. Aenean quis velit nec sapien dignissim tincidunt. Aenean venenatis faucibus ultricies. Maecenas eu libero molestie, luctus diam ac, molestie urna. Aliquam erat volutpat. Cras eu augue vitae massa lobortis euismod id nec lacus. Cras gravida bibendum turpis at varius.</p>"
-}
\ No newline at end of file
diff --git a/fundamentals/primers/promise-2.0.4.min.js b/fundamentals/primers/promise-2.0.4.min.js
deleted file mode 100644
index 85bdbb5..0000000
--- a/fundamentals/primers/promise-2.0.4.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var a,b,c,d;!function(){var e={},f={};a=function(a,b,c){e[a]={deps:b,callback:c}},d=c=b=function(a){function c(b){if("."!==b.charAt(0))return b;for(var c=b.split("/"),d=a.split("/").slice(0,-1),e=0,f=c.length;f>e;e++){var g=c[e];if(".."===g)d.pop();else{if("."===g)continue;d.push(g)}}return d.join("/")}if(d._eak_seen=e,f[a])return f[a];if(f[a]={},!e[a])throw new Error("Could not find module "+a);for(var g,h=e[a],i=h.deps,j=h.callback,k=[],l=0,m=i.length;m>l;l++)"exports"===i[l]?k.push(g={}):k.push(b(c(i[l])));var n=j.apply(this,k);return f[a]=g||n}}(),a("promise/all",["./utils","exports"],function(a,b){"use strict";function c(a){var b=this;if(!d(a))throw new TypeError("You must pass an array to all.");return new b(function(b,c){function d(a){return function(b){f(a,b)}}function f(a,c){h[a]=c,0===--i&&b(h)}var g,h=[],i=a.length;0===i&&b([]);for(var j=0;j<a.length;j++)g=a[j],g&&e(g.then)?g.then(d(j),c):f(j,g)})}var d=a.isArray,e=a.isFunction;b.all=c}),a("promise/asap",["exports"],function(a){"use strict";function b(){return function(){process.nextTick(e)}}function c(){var a=new i(e),b=document.createElement("div");return a.observe(b,{attributes:!0}),window.addEventListener("unload",function(){a.disconnect(),a=null},!1),function(){b.setAttribute("drainQueue","drainQueue")}}function d(){return function(){j.setTimeout(e,1)}}function e(){for(var a=0;a<k.length;a++){var b=k[a],c=b[0],d=b[1];c(d)}k=[]}function f(a,b){var c=k.push([a,b]);1===c&&g()}var g,h="undefined"!=typeof window?window:{},i=h.MutationObserver||h.WebKitMutationObserver,j="undefined"!=typeof global?global:this,k=[];g="undefined"!=typeof process&&"[object process]"==={}.toString.call(process)?b():i?c():d(),a.asap=f}),a("promise/cast",["exports"],function(a){"use strict";function b(a){if(a&&"object"==typeof a&&a.constructor===this)return a;var b=this;return new b(function(b){b(a)})}a.cast=b}),a("promise/config",["exports"],function(a){"use strict";function b(a,b){return 2!==arguments.length?c[a]:(c[a]=b,void 0)}var c={instrument:!1};a.config=c,a.configure=b}),a("promise/polyfill",["./promise","./utils","exports"],function(a,b,c){"use strict";function d(){var a="Promise"in window&&"cast"in window.Promise&&"resolve"in window.Promise&&"reject"in window.Promise&&"all"in window.Promise&&"race"in window.Promise&&function(){var a;return new window.Promise(function(b){a=b}),f(a)}();a||(window.Promise=e)}var e=a.Promise,f=b.isFunction;c.polyfill=d}),a("promise/promise",["./config","./utils","./cast","./all","./race","./resolve","./reject","./asap","exports"],function(a,b,c,d,e,f,g,h,i){"use strict";function j(a){if(!w(a))throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(!(this instanceof j))throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._id=F++,this._subscribers=[],k(a,this)}function k(a,b){function c(a){p(b,a)}function d(a){r(b,a)}try{a(c,d)}catch(e){d(e)}}function l(a,b,c,d){var e,f,g,h,i=w(c);if(i)try{e=c(d),g=!0}catch(j){h=!0,f=j}else e=d,g=!0;o(b,e)||(i&&g?p(b,e):h?r(b,f):a===I?p(b,e):a===J&&r(b,e))}function m(a,b,c,d){var e=a._subscribers,f=e.length;e[f]=b,e[f+I]=c,e[f+J]=d}function n(a,b){for(var c,d,e=a._subscribers,f=a._detail,g=0;g<e.length;g+=3)c=e[g],d=e[g+b],l(b,c,d,f);a._subscribers=null}function o(a,b){var c,d=null;try{if(a===b)throw new TypeError("A promises callback cannot return that same promise.");if(v(b)&&(d=b.then,w(d)))return d.call(b,function(d){return c?!0:(c=!0,b!==d?p(a,d):q(a,d),void 0)},function(b){return c?!0:(c=!0,r(a,b),void 0)}),!0}catch(e){return c?!0:(r(a,e),!0)}return!1}function p(a,b){a===b?q(a,b):o(a,b)||q(a,b)}function q(a,b){a._state===G&&(a._state=H,a._detail=b,u.async(s,a))}function r(a,b){a._state===G&&(a._state=H,a._detail=b,u.async(t,a))}function s(a){n(a,a._state=I)}function t(a){n(a,a._state=J)}var u=a.config,v=(a.configure,b.objectOrFunction),w=b.isFunction,x=b.now,y=c.cast,z=d.all,A=e.race,B=f.resolve,C=g.reject,D=h.asap,E="rsvp_"+x()+"-",F=0;u.async=D;var G=void 0,H=0,I=1,J=2;j.prototype={constructor:j,_id:void 0,_guidKey:E,_state:void 0,_detail:void 0,_subscribers:void 0,then:function(a,b){var c=this,d=new this.constructor(function(){});if(this._state){var e=arguments;u.async(function(){l(c._state,d,e[c._state-1],c._detail)})}else m(this,d,a,b);return d},"catch":function(a){return this.then(null,a)}},j.all=z,j.cast=y,j.race=A,j.resolve=B,j.reject=C,i.Promise=j}),a("promise/race",["./utils","exports"],function(a,b){"use strict";function c(a){var b=this;if(!d(a))throw new TypeError("You must pass an array to race.");return new b(function(b,c){for(var d,e=0;e<a.length;e++)d=a[e],d&&"function"==typeof d.then?d.then(b,c):b(d)})}var d=a.isArray;b.race=c}),a("promise/reject",["exports"],function(a){"use strict";function b(a){var b=this;return new b(function(b,c){c(a)})}a.reject=b}),a("promise/resolve",["exports"],function(a){"use strict";function b(a){var b=this;return new b(function(b){b(a)})}a.resolve=b}),a("promise/utils",["exports"],function(a){"use strict";function b(a){return c(a)||"object"==typeof a&&null!==a}function c(a){return"function"==typeof a}function d(a){return"[object Array]"===Object.prototype.toString.call(a)}var e=Date.now||function(){return(new Date).getTime()};a.objectOrFunction=b,a.isFunction=c,a.isArray=d,a.now=e}),b("promise/polyfill").polyfill()}();
\ No newline at end of file
diff --git a/fundamentals/primers/story.json b/fundamentals/primers/story.json
deleted file mode 100644
index ee5a0de..0000000
--- a/fundamentals/primers/story.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "heading": "<h1>A story about something</h1>",
-  "chapterUrls": [
-    "chapter-1.json",
-    "chapter-2.json",
-    "chapter-3.json",
-    "chapter-4.json",
-    "chapter-5.json"
-  ]
-}
\ No newline at end of file
diff --git a/fundamentals/primers/styles.css b/fundamentals/primers/styles.css
deleted file mode 100644
index 436c154..0000000
--- a/fundamentals/primers/styles.css
+++ /dev/null
@@ -1,41 +0,0 @@
-@-webkit-keyframes spin {
-  to {
-    stroke-dashoffset: -264;
-  }
-}
-
-@keyframes spin {
-  to {
-    stroke-dashoffset: -264;
-  }
-}
-
-.spinner circle {
-  fill: none;
-  stroke: slategray;
-  stroke-width: 16;
-  stroke-linecap: round;
-  stroke-dasharray: 0, 0, 70, 194;
-  stroke-dashoffset: 0;
-  animation: spin 1s infinite linear;
-  -webkit-animation: spin 1s infinite linear;
-}
-
-html {
-  font-family: sans-serif;
-  line-height: 1.5;
-  font-size: 14px;
-}
-h1 {
-  font-family: Cambria, Georgia, serif;
-  font-size: 2em;
-  line-height: 1.3em;
-  margin: 0 0 0.5em;
-}
-.network-fake {
-  display: none;
-  margin-bottom: 1em;
-}
-input {
-  vertical-align: middle;
-}
\ No newline at end of file
diff --git a/fundamentals/primers/sync-example.html b/fundamentals/primers/sync-example.html
deleted file mode 100644
index 1eee0de..0000000
--- a/fundamentals/primers/sync-example.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Promises test</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <div class="network-fake">
-    <label><input type="checkbox"> Fake network delay</label>
-  </div>
-  <div class="story"></div>
-  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
-    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
-  </svg>
-  <script src="utils.js"></script>
-  <script>
-    try {
-      var story = getJsonSync('story.json');
-      addHtmlToPage(story.heading);
-
-      story.chapterUrls.forEach(function(chapterUrl) {
-        var chapter = getJsonSync(chapterUrl);
-        addHtmlToPage(chapter.html);
-      });
-
-      addTextToPage("All done");
-    }
-    catch (err) {
-      addTextToPage("Argh, broken: " + err.message);
-    }
-
-    document.querySelector('.spinner').style.display = 'none';
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/fundamentals/primers/utils.js b/fundamentals/primers/utils.js
deleted file mode 100644
index 70553f7..0000000
--- a/fundamentals/primers/utils.js
+++ /dev/null
@@ -1,128 +0,0 @@
-var fakeSlowNetwork;
-
-(function() {
-  var lsKey = 'fake-slow-network';
-  var networkFakeDiv = document.querySelector('.network-fake');
-  var checkbox = networkFakeDiv.querySelector('input');
-
-  fakeSlowNetwork = Number(localStorage.getItem(lsKey)) || 0;
-
-  networkFakeDiv.style.display = 'block';
-  checkbox.checked = !!fakeSlowNetwork;
-
-  checkbox.addEventListener('change', function() {
-    localStorage.setItem(lsKey, Number(checkbox.checked));
-    location.reload();
-  });
-}());
-
-function spawn(generatorFunc) {
-  function continuer(verb, arg) {
-    var result;
-    try {
-      result = generator[verb](arg);
-    } catch (err) {
-      return Promise.reject(err);
-    }
-    if (result.done) {
-      return result.value;
-    } else {
-      return Promise.resolve(result.value).then(callback, errback);
-    }
-  }
-  var generator = generatorFunc();
-  var callback = continuer.bind(continuer, "next");
-  var errback = continuer.bind(continuer, "throw");
-  return callback();
-}
-
-function wait(ms) {
-  return new Promise(function(resolve) {
-    setTimeout(resolve, ms);
-  });
-}
-
-function get(url) {
-  // Return a new promise.
-  // We do all the work within the constructor callback.
-  var fakeNetworkWait = wait(3000 * Math.random() * fakeSlowNetwork);
-
-  var requestPromise = new Promise(function(resolve, reject) {
-    // Do the usual XHR stuff
-    var req = new XMLHttpRequest();
-    req.open('get', url);
-
-    req.onload = function() {
-      // 'load' triggers for 404s etc
-      // so check the status
-      if (req.status == 200) {
-        // Resolve the promise with the response text
-        resolve(req.response);
-      }
-      else {
-        // Otherwise reject with the status text
-        reject(Error(req.statusText));
-      }
-    };
-
-    // Handle network errors
-    req.onerror = function() {
-      reject(Error("Network Error"));
-    };
-
-    // Make the request
-    req.send();
-  });
-
-  return Promise.all([fakeNetworkWait, requestPromise]).then(function(results) {
-    return results[1];
-  });
-}
-
-function getJson(url) {
-  return get(url).then(JSON.parse);
-}
-
-function getSync(url) {
-  var startTime = Date.now();
-  var waitTime = 3000 * Math.random() * fakeSlowNetwork;
-
-  var req = new XMLHttpRequest();
-  req.open('get', url, false);
-  req.send();
-
-  while (waitTime > Date.now() - startTime);
-
-  if (req.status == 200) {
-    return req.response;
-  }
-  else {
-    throw Error(req.statusText || "Request failed");
-  }
-}
-
-function getJsonSync(url) {
-  return JSON.parse(getSync(url));
-}
-
-function getJsonCallback(url, callback) {
-  getJson(url).then(function(response) {
-    callback(undefined, response);
-  }, function(err) {
-    callback(err);
-  });
-}
-
-var storyDiv = document.querySelector('.story');
-
-function addHtmlToPage(content) {
-  var div = document.createElement('div');
-  div.innerHTML = content;
-  storyDiv.appendChild(div);
-}
-
-function addTextToPage(content) {
-  var p = document.createElement('p');
-  p.textContent = content;
-  storyDiv.appendChild(p);
-}
\ No newline at end of file
diff --git a/fundamentals/security/prevent-mixed-content/active-mixed-content.html b/fundamentals/security/prevent-mixed-content/active-mixed-content.html
deleted file mode 100644
index 41c7250..0000000
--- a/fundamentals/security/prevent-mixed-content/active-mixed-content.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Active mixed content example</title>
-    <!-- // [START snippet1] -->
-    <!-- An insecure script file loaded on a secure page -->
-    <script src="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/simple-example.js"></script>
-
-    <!-- An insecure stylesheet loaded on a secure page -->
-    <link href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/style.css" rel="stylesheet">
-
-    <style>
-      .insecure-background {
-        /* An insecure resources loaded from a style property on a secure page, this can
-           happen in many places including, @font-face, cursor, background-image, and so on. */
-        background: url('http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/puppy-thumb.jpg') no-repeat;
-      }
-    </style>
-    <!-- // [END snippet1] -->
-
-    <style>
-      .insecure-style-holder span {
-        color: #fff;
-      }
-      .insecure-background {
-        color: #000;
-        font-weight: bold;
-        background-position: left center;
-        background-repeat: no-repeat;
-        width: 300px;
-        height: 140px;
-      }
-      iframe {
-        width: 400px;
-        height: 300px;
-      }
-    </style>
-
-  </head>
-  <body>
-    <div role="main">
-      <h1>
-        Active mixed content!
-      </h1>
-      <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/active-mixed-content.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/active-mixed-content.html">HTTPS</a>
-      </p>
-      <p>
-        Several examples of active mixed content. When viewed over HTTPS most browsers block this content and display errors in the JavaScript console.
-      </p>
-      <div class="insecure-style-holder">
-        <span style="ba">Insecure style loaded</span>
-      </div>
-      <div class="insecure-background">
-        Loading insecure background here...
-      </div>
-
-      <p>Loading insecure iframe...</p>
-      <!-- // [START snippet2] -->
-      <!-- An insecure iframed page loaded on a secure page -->
-      <iframe src="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/image-gallery-example.html"></iframe>
-
-      <!-- Flash resources also qualify as active mixed content and pose a
-      serious security risk. Be sure to look for <object> tags with type set
-      to "application/x-shockwave-flash", and an http:// data attribute. -->
-      <!-- <object type="application/x-shockwave-flash" data="http://..."></object> -->
-
-      <script>
-        // An insecure resource loaded using XMLHttpRequest
-        var request = new XMLHttpRequest();
-        request.addEventListener('load', function() {
-          var jsonData = JSON.parse(request.responseText);
-          document.getElementById('output').innerHTML += '<br>' + jsonData.data;
-        });
-        request.open("GET", "http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/xmlhttprequest-data.js", true);
-        request.send();
-      </script>
-      <!-- // [END snippet2] -->
-      <div id="output">Waiting for insecure script to run...</div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/security/prevent-mixed-content/image-gallery-example.html b/fundamentals/security/prevent-mixed-content/image-gallery-example.html
deleted file mode 100644
index 74ea78e..0000000
--- a/fundamentals/security/prevent-mixed-content/image-gallery-example.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Image gallery mixed content example</title>
-    <script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script>
-    <script>
-      $(function() {
-        $('.gallery').click(function(e) {
-          e.preventDefault();
-          $('.overlay-foreground').css('background-image', 'url(' + $(this).attr('href') + ')');
-          $('.overlay').fadeIn('slow');
-        })
-        $('.overlay').click(function() {
-          $('.overlay').fadeOut('slow');
-        })
-      });
-    </script>
-    <style>
-      .overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-      .overlay-background {
-        background-color: #000;
-        filter:alpha(opacity=80);
-        -moz-opacity: 0.8;
-        -khtml-opacity: 0.8;
-        opacity: 0.8;
-        z-index: 10000;
-      }
-      .overlay-foreground {
-        background-position: center center;
-        background-repeat: no-repeat;
-        z-index: 10001;
-      }
-    </style>
-  </head>
-  <body>
-    <div role="main">
-      <h1>
-        Image gallery mixed content!
-      </h1>
-      <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/image-gallery-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/image-gallery-example.html">HTTPS</a>
-      </p>
-      <p>
-        Image galleries often rely on the &lt;img&gt; tag src attribute to display thumbnail images on the page, the anchor ( &lt;a&gt; ) tag href attribute is then used to load the full sized image for the gallery overlay. Normally &lt;a&gt; tags do not cause mixed content, but in this case the jQuery code overrides the default link behavior &mdash; to navigate to a new page &mdash; and instead loads the HTTP image on this page. While this content isn't blocked, modern browsers display a warning in the JavaScript console. This can be seen when the page is viewed over HTTPS and the thumbnail is clicked.
-      </p>
-      CLICK ME! -->
-      <!-- // [START snippet1] -->
-      <a class="gallery" href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/puppy.jpg">
-        <img src="https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/puppy-thumb.jpg">
-      </a>
-      <!-- // [END snippet1] -->
-      <div class="overlay overlay-background" style="display: none;"></div>
-      <div class="overlay overlay-foreground" style="display: none;"></div>
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/security/prevent-mixed-content/passive-mixed-content.html b/fundamentals/security/prevent-mixed-content/passive-mixed-content.html
deleted file mode 100644
index 42304f2..0000000
--- a/fundamentals/security/prevent-mixed-content/passive-mixed-content.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Passive mixed content example</title>
-    <style>
-      audio, img, video {
-        display: block;
-        margin: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div role="main">
-      <h1>
-        Passive mixed content!
-      </h1>
-      <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/passive-mixed-content.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/passive-mixed-content.html">HTTPS</a>
-      </p>
-      <p>
-        Several examples of passive mixed content. When viewed over HTTPS most browsers do <b>not</b> block this content but instead display warnings in the JavaScript console.
-      </p>
-
-      <!-- // [START snippet1] -->
-      <!-- An insecure audio file loaded on a secure page -->
-      <audio src="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/sleep.mp3" type="audio/mp3" controls></audio>
-
-      <!-- An insecure image loaded on a secure page -->
-      <img src="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/puppy.jpg">
-
-      <!-- An insecure video file loaded on a secure page -->
-      <video src="http://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" controls></video>
-      <!-- // [END snippet1] -->
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/security/prevent-mixed-content/puppy-thumb.jpg b/fundamentals/security/prevent-mixed-content/puppy-thumb.jpg
deleted file mode 100644
index 511ef35..0000000
Binary files a/fundamentals/security/prevent-mixed-content/puppy-thumb.jpg and /dev/null differ
diff --git a/fundamentals/security/prevent-mixed-content/puppy.jpg b/fundamentals/security/prevent-mixed-content/puppy.jpg
deleted file mode 100644
index b9e4849..0000000
Binary files a/fundamentals/security/prevent-mixed-content/puppy.jpg and /dev/null differ
diff --git a/fundamentals/security/prevent-mixed-content/simple-example.html b/fundamentals/security/prevent-mixed-content/simple-example.html
deleted file mode 100644
index 5de83fb..0000000
--- a/fundamentals/security/prevent-mixed-content/simple-example.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Simple mixed content example</title>
-  </head>
-  <body>
-    <div role="main">
-      <h1>
-        Simple mixed content example!
-      </h1>
-      <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/simple-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/simple-example.html">HTTPS</a>
-      </p>
-      <p>
-        This page loads the script simple-example.js using HTTP. This is the simplest case of mixed content. When the simple-example.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS.
-      </p>
-      <div id="output">Waiting for insecure script to run...</div>
-      <!-- // [START snippet1] -->
-      <script src="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/simple-example.js"></script>
-      <!-- // [END snippet1] -->
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='https://www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/fundamentals/security/prevent-mixed-content/simple-example.js b/fundamentals/security/prevent-mixed-content/simple-example.js
deleted file mode 100644
index 3b5bcef..0000000
--- a/fundamentals/security/prevent-mixed-content/simple-example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.onload = function() {
-  document.getElementById('output').innerHTML += '<br>INSECURE SCRIPT LOADED AND RUN!!!';
-}
\ No newline at end of file
diff --git a/fundamentals/security/prevent-mixed-content/sleep.mp3 b/fundamentals/security/prevent-mixed-content/sleep.mp3
deleted file mode 100755
index dc18e56..0000000
Binary files a/fundamentals/security/prevent-mixed-content/sleep.mp3 and /dev/null differ
diff --git a/fundamentals/security/prevent-mixed-content/style.css b/fundamentals/security/prevent-mixed-content/style.css
deleted file mode 100644
index 1052c12..0000000
--- a/fundamentals/security/prevent-mixed-content/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.insecure-style-holder {
-  background-color: #f00;
-}
\ No newline at end of file
diff --git a/fundamentals/security/prevent-mixed-content/xmlhttprequest-data.js b/fundamentals/security/prevent-mixed-content/xmlhttprequest-data.js
deleted file mode 100644
index 10f50d0..0000000
--- a/fundamentals/security/prevent-mixed-content/xmlhttprequest-data.js
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "data": "INSECURE DATA LOADED!!!"
-}
\ No newline at end of file
diff --git a/fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html b/fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html
deleted file mode 100644
index a01b1b7..0000000
--- a/fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>XMLHttpRequest mixed content example</title>
-  </head>
-  <body>
-    <div role="main">
-      <h1>
-        XMLHttpRequest mixed content example!
-      </h1>
-      <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html">HTTPS</a>
-      </p>
-      <p>
-        This page constructs an HTTP URL dynamically in JavaScript, the URL is eventually used to load an insecure resource by XMLHttpRequest. When the xmlhttprequest-data.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS.
-      </p>
-      <div id="output">Waiting for data...</div>
-      <!-- // [START snippet1] -->
-      <script>
-        var rootUrl = 'http://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content';
-        var resources = {
-          jsonData: '/xmlhttprequest-data.js'
-        };
-        var request = new XMLHttpRequest();
-        request.addEventListener('load', function() {
-          var jsonData = JSON.parse(request.responseText);
-          document.getElementById('output').innerHTML += '<br>' + jsonData.data;
-        });
-        request.open('GET', rootUrl + resources.jsonData, true);
-        request.send();
-      </script>
-      <!-- // [END snippet1] -->
-    </div>
-    <script>
-  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-  e.src='//www.google-analytics.com/analytics.js';
-  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-  ga('create','UA-52746336-1');ga('send','pageview');
-  var isCompleted = {};
-  function sampleCompleted(sampleName){
-    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
-      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
-      isCompleted[sampleName] = true;
-    }
-  }
-</script>
-  </body>
-</html>
diff --git a/tools/chrome-devtools/beginners/final.html b/tools/chrome-devtools/beginners/final.html
deleted file mode 100644
index 87d016d..0000000
--- a/tools/chrome-devtools/beginners/final.html
+++ /dev/null
@@ -1,29 +0,0 @@
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
-    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;header&gt;
-      &lt;p&gt;Welcome to my site!&lt;/p&gt;
-    &lt;/header&gt;
-    &lt;nav&gt;
-      &lt;ul&gt;
-        &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/nav&gt;
-    &lt;main&gt;
-      &lt;h1&gt;About Me&lt;/h1&gt;
-      &lt;p&gt;I am learning web development. Recent accomplishments:&lt;/p&gt;
-      &lt;ul&gt;
-        &lt;li&gt;Learned how to set up my code in Glitch.&lt;/li&gt;
-        &lt;li&gt;Added content to my HTML.&lt;/li&gt;
-        &lt;li&gt;Learned how to use Chrome DevTools to experiment with content changes.&lt;/li&gt;
-        &lt;li&gt;Learned the difference between HTML and the DOM.&lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/main&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
diff --git a/tools/chrome-devtools/console/primes.html b/tools/chrome-devtools/console/primes.html
deleted file mode 100644
index a166cfd..0000000
--- a/tools/chrome-devtools/console/primes.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<button class="gc-analytics-event" data-category="DevTools"
-        data-label="Console / Get Started / 1.C.1 (Numbers)">Log Numbers</button>
-<script>
-  const button = document.querySelector('button');
-  button.addEventListener('click', function () {
-    function isPrime(num) {
-      for (let i = 2, s = Math.sqrt(num); i <= s; i++) {
-        if (num % i === 0) return false;
-      }
-      return num !== 1;
-    };
-    for (let j = 1; j <= 1000; j++) {
-      const label = isPrime(j) ? 'prime:' : 'not prime:';
-      j % 3 === 0 ? console.warn(label, j) : console.log(label, j);
-    }
-  });
-</script>
diff --git a/tools/chrome-devtools/rendering-tools/forcedsync.html b/tools/chrome-devtools/rendering-tools/forcedsync.html
deleted file mode 100644
index 9f7e328..0000000
--- a/tools/chrome-devtools/rendering-tools/forcedsync.html
+++ /dev/null
@@ -1,485 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
-    <style>
-      body {
-        margin: 2em;
-      }
-    </style>
-    <title>Diagnosing forced synchronous layouts</title>
-  </head>
-  <div role="main" class="container">
-  <body>
-      <h1>Timeline demo</h1>
-      
-      <p>
-        This demo shows how you can use the Timeline to identify a kind of performance bottle-neck called 'forced synchronous layouts'.
-      </p>
-
-    <h2>
-        Make a recording
-    </h2>
-
-    <p>
-        First you'll make a recording of the animation.</p>
-    <ol>
-        <li>Click <strong>Start</strong> to start the animation.</li>
-        <li>Open the Timeline panel on this page, and go the Frames view.</li>
-        <li>Click the Record button in the Timeline.</li>
-        <li>After after a second or two (10-12 frames recorded) stop the recording and click <strong>Stop</strong> to stop the animation.</li>
-    </ol>
-
-        <style>
-        .mover {
-            background: url("particle.png");
-            height: 100px;
-               width: 100px;
-               position: absolute;
-        }
-
-        #toggle {
-            width: 70px;
-            height: 30px;
-            font-weight: bold;
-        }
-
-        #jank-container {
-            position: relative;
-        }
-
-        #jank-container.hidden{
-            display: none;
-        }
-
-        </style>
-
-        <button id="toggle">Start</button>
-
-        <div id="jank-container" class="hidden">
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-                <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-                <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-                <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-                <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-                <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        <div class="mover"></div>
-        </div>
-    </div>
-
-    <script>
-        (function() {
-            var lastTime = 0;
-            var vendors = ['ms', 'moz', 'webkit', 'o'];
-            for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-                window.requestAnimationFrame = window[vendors[x] +
-                    'RequestAnimationFrame'];
-                window.cancelAnimationFrame = window[vendors[x] +
-                    'CancelAnimationFrame'] || window[vendors[x] +
-                    'CancelRequestAnimationFrame'];
-            }
-
-            if (!window.requestAnimationFrame) {
-                window.requestAnimationFrame = function(callback, element) {
-                    var currTime = new Date().getTime();
-                    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-                    var id = window.setTimeout(
-                      function() { callback(currTime + timeToCall); },
-                      timeToCall);
-                    lastTime = currTime + timeToCall;
-                    return id;
-                };
-              }
-
-            if (!window.cancelAnimationFrame) {
-                window.cancelAnimationFrame = function(id) {
-                    clearTimeout(id);
-                };
-            }
-        })();
-
-        var raf;
-        var isAnimating = false;
-        var btn = document.querySelector('#toggle');
-        var container = document.querySelector('#jank-container');
-        var movers = document.querySelectorAll('.mover');
-
-         // Set the tops of each DOM element
-        (function init() {
-            movers[0].style.top = '50px';
-            for (var m = 1; m < movers.length; m++) {
-                movers[m].style.top = (m * 20) + 'px';
-            }
-        })();
-
-        // animation loop
-        /* // [START forcedsync] */
-        function update(timestamp) {
-            for (var m = 0; m < movers.length; m++) {
-                movers[m].style.left = ((Math.sin(movers[m].offsetTop +
-                    timestamp / 1000) + 1) * 500) +
-                 'px';
-                // movers[m].style.left = ((Math.sin(m + timestamp/1000)+1) * 500) + 'px';
-                }
-            raf = window.requestAnimationFrame(update);
-        }
-        /* // [END forcedsync] */
-
-
-        function toggleAnim(e) {
-            if (isAnimating) {
-                window.cancelAnimationFrame(raf);
-                isAnimating = false;
-                e.currentTarget.innerHTML = 'Start';
-            } else {
-                container.classList.remove("hidden");
-                raf = window.requestAnimationFrame(update);
-                isAnimating = true;
-                e.currentTarget.innerHTML = 'Stop';
-            }
-        }
-
-        btn.addEventListener('click', toggleAnim);
-
-    </script>         
-  </body>
-</html>
diff --git a/tools/chrome-devtools/rendering-tools/particle.png b/tools/chrome-devtools/rendering-tools/particle.png
deleted file mode 100755
index 33a9557..0000000
Binary files a/tools/chrome-devtools/rendering-tools/particle.png and /dev/null differ
