commit 21b1b67bf62c96acc6298cf258d9511f8a50b9d9
Author: Jen Looper <jen.looper@gmail.com>
Date:   Mon Nov 9 22:21:08 2020 -0500

    moving folders

diff --git a/Curriculum/README.md b/Curriculum/README.md
new file mode 100644
index 00000000..55711cec
--- /dev/null
+++ b/Curriculum/README.md
@@ -0,0 +1,59 @@
+# Web Development for Beginners - A Curriculum
+
+Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.
+
+[![Promo video](screenshot.png)](https://youtube.com/watch?v=kQyTzefCHxI "Promo video")
+
+> Click the image above for a video about the project and the folks who created it!
+
+## Pedagogy
+
+We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer. 
+
+By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=github-webdev4beginners-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
+
+In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12 week cycle.
+
+While we have purposefully avoided introducing JavaScript frameworks so as to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=github-webdev4beginners-cxa)".
+
+## Each lesson includes:
+
+- optional sketchnote
+- optional supplemental video
+- pre-lesson warmup quiz
+- written lesson
+- for project-based lessons, step-by-step guides on how to build the project
+- knowledge checks
+- a challenge
+- supplemental reading
+- assignment
+- post-lesson quiz
+
+## Lessons
+
+|       |                                Project Name                                |                           Concepts Taught                            | Learning Objectives                                                                                                                 |                                                            Linked Lesson                                                             | Written Lesson | Sketchnote | Assignment | Starting Quiz | Ending Quiz | Video |         Author          |
+| :---: | :------------------------------------------------------------------------: | :------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: |
+|  01   |                              Getting Started                               |          Introduction to Programming and Tools of the Trade          | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](../../../getting-started-lessons/tree/main/1-intro-to-programming-languages) |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   ✅   |         Jasmine         |
+|  02   |                              Getting Started                               |            Basics of GitHub, includes working with a team            | How to use GitHub in your project, how to collaborate with others on a code base                                                    |                           [Intro to GitHub](../../../1-getting-started-lessons/tree/main/2-github-basics)                            |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   🛑   |          Floor          |
+|  03   |                              Getting Started                               |                            Accessibility                             | Learn the basics of web accessibility                                                                                               |                      [Accessibility Fundamentals](../../../1-getting-started-lessons/tree/main/3-accessibility)                      |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   🛑   |       Christopher       |
+|  04   |                                 JS Basics                                  |                        JavaScript Data Types                         | The basics of JavaScript data types                                                                                                 |                                      [Data Types](../../../2-js-basics/tree/main/1-data-types)                                       |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   ✅   |         Jasmine         |
+|  05   |                                 JS Basics                                  |                        Functions and Methods                         | Learn about functions and methods to manage an application's logic flow                                                             |                             [Functions and Methods](../../../2-js-basics/tree/main/2-functions-methods)                              |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   ✅   | Jasmine and Christopher |
+|  06   |                                 JS Basics                                  |                       Making Decisions with JS                       | Learn how to create conditions in your code using decision-making methods                                                           |                                [Making Decisions](../../../2-js-basics/tree/main/3-making-decisions)                                 |       ✅        |            |     ✅      |       ✅       |      ✅      |   ✅   |         Jasmine         |
+|  07   |                                 JS Basics                                  |                           Arrays and Loops                           | Work with data using arrays and loops in JavaScript                                                                                 |                                  [Arrays and Loops](../../../2-js-basics/tree/main/4-arrays-loops)                                   |       ✅        |            |     ✅      |       ✅       |      ✅      |   ✅   |         Jasmine         |
+|  08   |            [Terrarium](../../../3-terrarium/tree/main/solution)            |                           HTML in Practice                           | Build the HTML to create an online terrarium, focusing on building a layout                                                         |                                [Introduction to HTML](../../../3-terrarium/tree/main/1-intro-to-html)                                |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   🛑   |           Jen           |
+|  09   |            [Terrarium](../../../3-terrarium/tree/main/solution)            |                           CSS in Practice                            | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive                     |                                 [Introduction to CSS](../../../3-terrarium/tree/main/2-intro-to-css)                                 |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   🛑   |           Jen           |
+|  10   |            [Terrarium](../../../3-terrarium/tree/main/solution)            |                JavaScript Closures, DOM manipulation                 | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation             |                 [JavaScript Closures, DOM manipulation](../../../3-terrarium/tree/main/3-intro-to-DOM-and-closures)                  |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   🛑   |           Jen           |
+|  11   |          [Typing Game](../../../4-typing-game/tree/main/solution)          |                         Build a Typing Game                          | Learn how to use keyboard events to drive the logic of your JavaScript app                                                          |                               [Event-Driven Programming](../../../4-typing-game/tree/main/typing-game)                               |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   ✅   |       Christopher       |
+|  12   | [Green Browser Extension](../../../5-browser-extension/tree/main/solution) |                        Working with Browsers                         | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension                               |                              [About Browsers](../../../5-browser-extension/tree/main/1-about-browsers)                               |       ✅        |     ✅      |     ✅      |       ✅       |      ✅      |   🛑   |           Jen           |
+|  13   | [Green Browser Extension](../../../5-browser-extension/tree/main/solution) | Building a form, call and API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage                      |               [APIs, Forms, and Local Storage](../../../5-browser-extension/tree/main/2-forms-browsers-local-storage)                |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   ✅   |           Jen           |
+|  14   | [Green Browser Extension](../../../5-browser-extension/tree/main/solution) |         Background processes in the browser, web performance         | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make   |            [Background Tasks and Performance](../../../5-browser-extension/tree/main/3-background-tasks-and-performance)             |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |           Jen           |
+|  15   |           [Space Game](../../../6-space-game/tree/main/solution)           |            More Advanced Game Development with JavaScript            | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game              |                     [Introduction to Advanced Game Development](../../../6-space-game/tree/main/1-introduction)                      |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |          Chris          |
+|  16   |           [Space Game](../../../6-space-game/tree/main/solution)           |                          Drawing to canvas                           | Learn about the Canvas API, used to draw elements to a screen                                                                       |                               [Drawing to Canvas](../../../6-space-game/tree/main/2-drawing-to-canvas)                               |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |          Chris          |
+|  17   |           [Space Game](../../../6-space-game/tree/main/solution)           |                  Moving elements around the screen                   | Discover how elements can gain motion using the cartesian coordinates and the Canvas API                                            |                          [Moving Elements Around](../../../6-space-game/tree/main/3-moving-elements-around)                          |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |          Chris          |
+|  18   |           [Space Game](../../../6-space-game/tree/main/solution)           |                         Collision detection                          | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game    |                             [Collision Detection](../../../6-space-game/tree/main/4-collision-detection)                             |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |          Chris          |
+|  19   |           [Space Game](../../../6-space-game/tree/main/solution)           |                            Keeping score                             | Perform math calculations based on the game's status and performance                                                                |                                   [Keeping Score](../../../6-space-game/tree/main/5-keeping-score)                                   |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |          Chris          |
+|  20   |           [Space Game](../../../6-space-game/tree/main/solution)           |                    Ending and restarting the game                    | Learn about ending and restarting the game, including cleaning up assets and resetting variable values                              |                               [The Ending Condition](../../../6-space-game/tree/main/6-end-condition)                                |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   🛑   |          Chris          |
+|  21   |         [Banking App](../../../7-bank-project/tree/main/solution)          |                     Layout and Route a Web Site                      | Learn how to create the scaffold of a multipage website's architecture using routing                                                |                               [Layouts and Routes](../../../7-bank-project/tree/main/1-template-route)                               |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   ✅   |          Yohan          |
+|  22   |         [Banking App](../../../7-bank-project/tree/main/solution)          |                 Build a Login and Registration Form                  | Learn about building forms and handing validation routines                                                                          |                                          [Forms](../../../7-bank-project/tree/main/2-forms)                                          |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   ✅   |          Yohan          |
+|  23   |         [Banking App](../../../7-bank-project/tree/main/solution)          |                  Methods of Fetching and Using Data                  | How data flows in and out of your app, how to fetch it, store it, and dispose of it                                                 |                                           [Data](../../../7-bank-project/tree/main/3-data)                                           |       ✅        |     🛑      |     ✅      |       ✅       |      ✅      |   ✅   |          Yohan          |
+|  24   |         [Banking App](../../../7-bank-project/tree/main/solution)          |                     Concepts of State Management                     | Learn how your app retains state and how to manage it programmatically                                                              |                               [State Management](../../../7-bank-project/tree/main/4-state-management)                               |                |     🛑      |            |               |             |       |          Yohan          |
diff --git a/Curriculum/screenshot.png b/Curriculum/screenshot.png
new file mode 100644
index 00000000..fd36b389
Binary files /dev/null and b/Curriculum/screenshot.png differ
diff --git a/bank/1-template-route/.github/post-lecture-quiz.md b/bank/1-template-route/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..fbed101a
--- /dev/null
+++ b/bank/1-template-route/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz by checking one answer per question.*
+
+1. HTML templates are part of the DOM by default
+
+- [ ] true
+- [ ] false
+
+2. Which part of the URL is needed for routing?
+
+- [ ] window.location.pathname
+- [ ] window.location.origin
+- [ ] both
+
+3. What's the name of the event triggered when calling the `history.pushState()` function?
+   
+- [ ] `pushstate`
+- [ ] `popstate`
+- [ ] `navigate`
\ No newline at end of file
diff --git a/bank/1-template-route/.github/pre-lecture-quiz.md b/bank/1-template-route/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..14dda65e
--- /dev/null
+++ b/bank/1-template-route/.github/pre-lecture-quiz.md
@@ -0,0 +1,19 @@
+*A quick warm-up about web apps*
+
+*Complete this quiz in class.*
+
+1. You need to create multiple HTML files to display different screens in a web app
+
+- [ ] true
+- [ ] false
+
+2. You can store and persist data locally in a web app
+
+- [ ] true
+- [ ] false
+
+3. What's the best data provider for a web app?
+
+- [ ] A local database
+- [ ] A JavaScript object
+- [ ] A server with a JSON API
\ No newline at end of file
diff --git a/bank/1-template-route/README.md b/bank/1-template-route/README.md
new file mode 100644
index 00000000..779b84a0
--- /dev/null
+++ b/bank/1-template-route/README.md
@@ -0,0 +1,293 @@
+# HTML Templates and Routes in a Web App
+
+<!-- ![video](video-url) -->
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction
+
+Since the advent of JavaScript in browsers, websites are becoming more interactive and complex than ever. Web technologies are now commonly used to create fully functional applications that runs directly into a browser that we call [web applications](https://en.wikipedia.org/wiki/Web_application). As Web apps are highly interactive, users do not want to wait for a full page reload every time an action is performed. That's why JavaScript is used to update the HTML directly using the DOM, to provide a smoother user experience.
+
+In this lesson, we're going to lay out the foundations to create bank web app, using HTML templates to create multiple screens that can be displayed and updated without having to reload the entire HTML page.
+
+### Prerequisite
+
+You need a local web server to test the web app we'll build in this lesson. If don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.
+
+### Preparation
+
+On your computer, create a folder named `bank` with a file named `index.html` inside it. We'll start from this HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- This is where you'll work -->
+  </body>
+</html>
+```
+
+---
+
+## HTML templates
+
+If you want to create multiples screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:
+
+- You have to reload the entire HTML when switching screen, which can be slow.
+- It's difficult to share data between the different screens.
+
+Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
+
+### Task:
+
+We'll create a bank app with two screens: the login page and the dashboard. First, let's add in the HTML body a placeholder element that we'll use to instantiate the different screens of our app:
+
+```html
+<div id="app">Loading...</div>
+```
+
+We're giving it an `id` to make it easier to locate it with JavaScript later.
+
+> Tip: since the content of this element will be replaced, we can put in a loading message or indicator that will be shown while the app is loading.
+
+Next, let's add below the HTML template for the login page. For now we'll only put in there a title and a section containing a button that we'll use to perform the navigation.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <button>Login</button>
+  </section>
+</template>
+```
+
+Then we'll add another HTML template for the dashboard page. This page will contain different sections:
+
+- A header with a title and a logout button
+- The current balance of the bank account
+- A list of transactions, displayed in a table
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <button>Logout</button>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+> Tip: when creating HTML templates, if you want to see what it will look like, you can comment out the `<template>` and `</template>` lines by enclosing them with `<!-- -->`.
+
+✅ Why do you think we use `id` attributes on the templates? Could we use something else like classes?
+
+## Displaying templates with JavaScript
+
+If you try your current HTML file in a browser, you'll see that it get stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.
+
+Instantiating a template is usually done in 3 steps:
+
+1. Retrieve the template element in the DOM, for example using [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
+2. Clone the template element, using [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode).
+3. Attach it to the DOM under a visible element, for example using [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild).
+
+✅ Why do we need to clone the template before attaching it to the DOM? What do you think would happen if we skipped this step?
+
+### Task
+
+Create a new file named `app.js` in your project folder and import that file in the `<head>` section of your HTML:
+
+```html
+<script src="app.js" defer></script>
+```
+
+Now in `app.js`, we'll create a new function `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+What we do here is exactly the 3 steps described above. We instantiate the template with the id `templateId`, and put its cloned content within our app placeholder. Note that we need to use `cloneNode(true)` to copy the entire subtree of the template.
+
+Now call this function with one of the template and look at the result.
+
+```js
+updateRoute('login');
+```
+
+✅ What's the purpose of this code `app.innerHTML = '';`? What happens without it?
+
+## Creating routes
+
+When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a web site with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+If you create a web server with `mywebsite` as the root, the URL mapping will be:
+
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+However, for our web app we are using a single HTML file containing all the screens so this default behavior won't help us. We have to create this map manually and perform update the displayed template using JavaScript.
+
+### Task
+
+We'll use a simple object to implement a [map](https://en.wikipedia.org/wiki/Associative_array) between URL paths and our templates. Add this object at the top of your `app.js` file.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Now let's modify a bit the `updateRoute` function. Instead of passing directly the `templateId` as an argument, we want to retrieve it by first looking at the current URL, and then use our map to get the corresponding template ID value. We can use [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) to get only the path section from the URL.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Here we mapped the routes we declared to the corresponding template. You can try it that it works correctlt by changing the URL manually in your browser.
+
+✅ What happens if you enter an unknown path in the URL? How could we solve this?
+
+## Adding navigation
+
+The next step for ou app is to add the possibility to navigate between pages without having to change the URL manually. This implies two things:
+
+  1. Updating the current URL
+  2. Updating the displayed template based on the new URL
+
+We already took care of the second part with the `updateRoute` function, so we have to figure out how to update the current URL.
+
+While the HTML anchor element [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) can be used to create hyperlinks to different URLs, we can't use that here as it will make the browser reload the HTML.
+
+Instead we'll have to use JavaScript and more specifically the [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) that allows to update the URL and create a new entry in the browsing history, without reloading the HTML.
+
+### Task
+
+Let's create a new function we can use to navigate in our app:
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, window.location.origin + path);
+  updateRoute();
+}
+```
+
+This method first updates the current URL based on the path given, then updates the template. The property `window.location.origin` returns the URL root, allowing us to reconstruct a complete URL from a given path.
+
+Now that we have this function, we can take care of the problem we have if a path does not match any defined route. We'll modify the `updateRoute` function by adding a fallback to one of the existing route if we can't find a match.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+If a route cannot be found, we'll now redirect to the `login` page.
+
+Let's complete the navigation system by adding bindings to our *Login* and *Logout* buttons in the HTML.
+
+```html
+<button onclick="navigate('/dashboard')">Login</button>
+...
+<button onclick="navigate('/login')">Logout</button>
+```
+
+Using the [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) attribute bind the `click` event to JavaScript code, here the call to the `navigate()` function.
+
+Try clicking on these buttons, you should be now able to navigate between the different screens of your app.
+
+✅ The `history.pushState` method is part of the HTML5 standard and implemented in [all modern browsers](https://caniuse.com/?search=pushState). If you're building a web app for older browsers, there's a trick you can use in place of this API: using a [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) before the path you can implement routing that works with regular anchor navigation and does not reload the page, as it's purpose was to create internal links within a page.
+
+## Handling the browser's back and forward buttons
+
+Using the `history.pushState` creates new entries in the browser's navigation history. You can check that by holding the *back button* of your browser, it should display something like this:
+
+![Screenshot of navigation history](./history.png)
+
+If you try clicking on the back button a few times, you'll see that the current URL changes and the history is updated, but the same template keeps being displayed.
+
+That's because don't know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
+
+### Task
+
+To make sure the displayed template is updated when the browser history changes, we'll attach a new function that calls `updateRoute()`. We'll do that at the bottom of our `app.js` file:
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Note: we used an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) here to declare our `popstate` event handler for conciseness, but a regular function would work the same.
+
+Here's a refresher video on arrow functions:
+
+[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
+
+Now try to use the back and forward buttons of your browsers, and check that the displayed is correctly updated this time.
+
+---
+
+## 🚀 Challenge
+
+Add a new template and route for a third page that shows the credits for this app.
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/en-us/azure/static-web-apps/routes) handles routing. Can you explain why some of the decisions described on that document are necessary?
+
+## Assignment
+
+[Improve the routing](assignment.md)
diff --git a/bank/1-template-route/assignment.md b/bank/1-template-route/assignment.md
new file mode 100644
index 00000000..e93ad147
--- /dev/null
+++ b/bank/1-template-route/assignment.md
@@ -0,0 +1,14 @@
+# Improve the routing
+
+## Instructions
+
+The routes declaration contains currently only the template ID to use. But when displaying a new page, a bit more is needed sometimes. Let's improve our routing implementation with two additional features:
+
+- Give titles to each template and update the window title with this new title when the template changes.
+- Add an option to run some code after the template changes. We want to print `'Dashboard is shown'` in the developer console every time the dashboard page is displayed. 
+
+## Rubric
+
+| Criteria | Exemplary                                                                                                                          | Adequate                                                                                                                                                                                  | Needs Improvement                                       |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+|          | The two features are implemented and working. Title and code addition also work for a new route added in the `routes` declaration. | The two features work, but the behavior is hardcoded and not configurable via the `routes` declaration. Adding a third route with title and code addition does not work or works partially. | One of the features is missing or not working properly. |
\ No newline at end of file
diff --git a/bank/1-template-route/history.png b/bank/1-template-route/history.png
new file mode 100644
index 00000000..589b1608
Binary files /dev/null and b/bank/1-template-route/history.png differ
diff --git a/bank/1-template-route/translations/README.es.md b/bank/1-template-route/translations/README.es.md
new file mode 100644
index 00000000..71f1e14a
--- /dev/null
+++ b/bank/1-template-route/translations/README.es.md
@@ -0,0 +1,287 @@
+# Plantillas HTML y rutas en una aplicación web
+
+<!-- ![video](video-url) -->
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción
+
+Desde la llegada de JavaScript a los navegadores, los sitios web se están volviendo más interactivos y complejos que nunca. Las tecnologías web ahora se utilizan comúnmente para crear aplicaciones completamente funcionales que se ejecutan directamente en un navegador que llamamos [aplicaciones web](https://en.wikipedia.org/wiki/Web_application). Como las aplicaciones web son muy interactivas, los usuarios no quieren esperar a que se vuelva a cargar la página completa cada vez que se realiza una acción. Es por eso que JavaScript se usa para actualizar el HTML directamente usando el DOM, para brindar una experiencia de usuario más fluida.
+
+En esta lección, vamos a sentar las bases para crear una aplicación web bancaria, utilizando plantillas HTML para crear múltiples pantallas que se pueden mostrar y actualizar sin tener que volver a cargar toda la página HTML.
+
+### Requisito previo
+
+Necesita un servidor web local para probar la aplicación web que crearemos en esta lección. Si no tiene uno, puede instalar [Node.js](https://nodejs.org) y usar el comando `npx lite-server` de la carpeta de su proyecto. Creará un servidor web local y abrirá su aplicación en un navegador.
+
+### Preparación
+
+En su computadora, cree una carpeta llamada `bank` con un archivo llamado `index.html` dentro. Comenzaremos desde este HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bank App</title>
+  </head>
+  <body>
+    <!-- Aquí es donde trabajarás -->
+  </body>
+</html>
+```
+
+---
+
+## Plantillas HTML
+
+Si desea crear varias pantallas para una página web, una solución sería crear un archivo HTML para cada pantalla que desee mostrar. Sin embargo, esta solución tiene algunos inconvenientes:
+
+- Tienes que volver a cargar todo el HTML al cambiar de pantalla, lo que puede ser lento.
+- Es difícil compartir datos entre las diferentes pantallas.
+
+Otro enfoque es tener un solo archivo HTML y definir múltiples [plantillas HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) usando el elemento `<template>`. Una plantilla es un bloque HTML reutilizable que el navegador no muestra y debe instanciarse en tiempo de ejecución mediante JavaScript.
+
+### Tarea:
+
+Crearemos una aplicación bancaria con dos pantallas: la página de inicio de sesión y el panel de control. Primero, agreguemos en el cuerpo HTML un elemento de marcador de posición que usaremos para instanciar las diferentes pantallas de nuestra aplicación:
+
+```html
+<div id="app">Loading...</div>
+```
+
+Le daremos un `id` para que sea más fácil localizarlo con JavaScript más adelante.
+
+> Consejo: dado que el contenido de este elemento será reemplazado, podemos poner un mensaje de carga o un indicador que se mostrará mientras se carga la aplicación.
+
+A continuación, agreguemos debajo la plantilla HTML para la página de inicio de sesión. Por ahora, solo pondremos allí un título y una sección que contiene un botón que usaremos para realizar la navegación.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <button>Login</button>
+  </section>
+</template>
+```
+
+Luego agregaremos otra plantilla HTML para la página del tablero. Esta página contendrá diferentes secciones:
+- Un encabezado con un título y un botón para cerrar sesión
+- El saldo actual de la cuenta bancaria
+- Una lista de transacciones, que se muestra en una tabla.
+
+```html
+<template id="dashboard">
+  <header>
+    <h1>Bank App</h1>
+    <button>Logout</button>
+  </header>
+  <section>
+    Balance: 100$
+  </section>
+  <section>
+    <h2>Transactions</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Object</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </section>
+</template>
+```
+
+Sugerencia: al crear plantillas HTML, si desea ver cómo se verá, puede comentar las líneas `<template>` y `</template>` encerrándolas entre `<!-- -->`.
+
+✅ ¿Por qué crees que usamos atributos ʻid` en las plantillas? ¿Podríamos usar algo más como clases?
+
+## Visualización de plantillas con JavaScript
+
+Si prueba su archivo HTML actual en un navegador, verá que se atasca mostrando `Loading...`. Eso es porque necesitamos agregar código JavaScript para crear instancias y mostrar las plantillas HTML.
+
+La instanciación de una plantilla se suele realizar en 3 pasos:
+
+1. Recupere el elemento de plantilla en el DOM, por ejemplo, usando [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
+2. Clone el elemento de plantilla, usando [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode).
+3. Adjúntelo al DOM bajo un elemento visible, por ejemplo usando [ʻappendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild).
+
+✅ ¿Por qué necesitamos clonar la plantilla antes de adjuntarla al DOM? ¿Qué crees que pasaría si nos salteáramos este paso?
+
+### Tarea
+
+Cree un nuevo archivo llamado `app.js` en la carpeta de su proyecto e importe ese archivo en la sección `<head>` de su HTML:
+
+
+```html
+<script src="app.js" defer></script>
+```
+
+Ahora en `app.js`, crearemos una nueva función `updateRoute`:
+
+```js
+function updateRoute(templateId) {
+  const template = document.getElementById(templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Lo que hacemos aquí son exactamente los 3 pasos descritos anteriormente. Instalamos la plantilla con el id `templateId` y colocamos su contenido clonado dentro de nuestro marcador de posición de la aplicación. Tenga en cuenta que necesitamos usar `cloneNode (true)` para copiar todo el subárbol de la plantilla.
+
+Ahora llame a esta función con una de las plantillas y observe el resultado.
+
+```js
+updateRoute('login');
+```
+
+✅ ¿Cuál es el propósito de este código `app.innerHTML = '';`? ¿Qué pasa sin él?
+
+## Creando rutas
+
+Cuando hablamos de una aplicación web, llamamos *Enrutamiento* la intención de asignar **URL** a pantallas específicas que deben mostrarse. En un sitio web con varios archivos HTML, esto se hace automáticamente ya que las rutas de los archivos se reflejan en la URL. Por ejemplo, con estos archivos en la carpeta de su proyecto:
+
+```
+mywebsite/index.html
+mywebsite/login.html
+mywebsite/admin/index.html
+```
+
+Si crea un servidor web con `mywebsite` como raíz, la asignación de URL será:
+```
+https://site.com            --> mywebsite/index.html
+https://site.com/login.html --> mywebsite/login.html
+https://site.com/admin/     --> mywebsite/admin/index.html
+```
+
+Sin embargo, para nuestra aplicación web estamos usando un solo archivo HTML que contiene todas las pantallas, por lo que este comportamiento predeterminado no nos ayudará. Tenemos que crear este mapa manualmente y actualizar la plantilla mostrada usando JavaScript.
+
+### Tarea
+
+Usaremos un objeto simple para implementar un [mapa] (https://en.wikipedia.org/wiki/Associative_array) entre las rutas de URL y nuestras plantillas. Agregue este objeto en la parte superior de su archivo `app.js`.
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard' },
+};
+```
+
+Ahora modifiquemos un poco la función `updateRoute`. En lugar de pasar directamente el `templateId` como argumento, queremos recuperarlo mirando primero la URL actual y luego usar nuestro mapa para obtener el valor de ID de plantilla correspondiente. Podemos usar [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) para obtener solo la sección de ruta de la URL.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+}
+```
+
+Aquí mapeamos las rutas que declaramos a la plantilla correspondiente. Puede probar que funciona correctamente cambiando la URL manualmente en su navegador.
+
+✅ ¿Qué sucede si ingresa una ruta desconocida en la URL? ¿Cómo podríamos solucionar esto?
+
+## Añadiendo navegación
+
+El siguiente paso para nuestra aplicación es agregar la posibilidad de navegar entre páginas sin tener que cambiar la URL manualmente. Esto implica dos cosas:
+  1. Actualización de la URL actual
+  2. Actualización de la plantilla mostrada en función de la nueva URL
+
+Ya nos ocupamos de la segunda parte con la función `updateRoute`, así que tenemos que averiguar cómo actualizar la URL actual.
+
+Si bien el elemento de anclaje HTML [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) se puede utilizar para crear hipervínculos a diferentes URL, podemos ' No use eso aquí, ya que hará que el navegador vuelva a cargar el HTML.
+
+En su lugar, tendremos que usar JavaScript y más específicamente el [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) que permite actualizar la URL y cree una nueva entrada en el historial de navegación, sin volver a cargar el HTML.
+
+### Tarea
+
+Creemos una nueva función que podamos usar para navegar en nuestra aplicación:
+
+
+```js
+function navigate(path) {
+  window.history.pushState({}, path, window.location.origin + path);
+  updateRoute();
+}
+```
+
+Este método primero actualiza la URL actual según la ruta proporcionada y luego actualiza la plantilla. La propiedad `window.location.origin` devuelve la raíz de la URL, lo que nos permite reconstruir una URL completa a partir de una ruta determinada.
+
+Ahora que tenemos esta función, podemos solucionar el problema que tenemos si una ruta no coincide con ninguna ruta definida. Modificaremos la función `updateRoute` agregando un respaldo a una de las rutas existentes si no podemos encontrar una coincidencia.
+
+```js
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/login');
+  }
+
+  ...
+```
+
+Si no se puede encontrar una ruta, ahora lo redireccionaremos a la página de `login`.
+
+Completemos el sistema de navegación agregando enlaces a nuestros botones *login* y *logout* en el HTML.
+
+```html
+<button onclick="navigate('/dashboard')">Login</button>
+...
+<button onclick="navigate('/login')">Logout</button>
+```
+
+Usando el atributo [`onclick`] (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) enlaza el evento `click` al código JavaScript, aquí la llamada al` navigate()`función.
+
+Intente hacer clic en estos botones, ahora debería poder navegar entre las diferentes pantallas de su aplicación.
+
+✅ El método `history.pushState` es parte del estándar HTML5 y está implementado en [todos los navegadores modernos](https://caniuse.com/?search=pushState). Si está creando una aplicación web para navegadores más antiguos, hay un truco que puede usar en lugar de esta API: usar un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) antes la ruta puede implementar un enrutamiento que funcione con la navegación de anclaje regular y no recargue la página, ya que su propósito era crear enlaces internos dentro de una página.
+
+## Manejo de los botones de avance y retroceso del navegador
+
+El uso de `history.pushState` crea nuevas entradas en el historial de navegación del navegador. Puede verificar que manteniendo presionado el *botón de retroceso* de su navegador, debería mostrar algo como esto:
+
+![Captura de pantalla del historial de navegación](./history.png)
+
+Si intenta hacer clic en el botón Atrás varias veces, verá que la URL actual cambia y el historial se actualiza, pero se sigue mostrando la misma plantilla.
+
+Eso es porque no sabemos que necesitamos llamar a `updateRoute()` cada vez que cambia el historial. Si echas un vistazo a la [`history.pushState` documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), puedes ver que si el estado cambia - lo que significa que nos mudamos a una URL diferente - se activa el evento [`popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event). Lo usaremos para solucionar ese problema.
+
+### Tarea
+
+Para asegurarnos de que la plantilla mostrada se actualice cuando cambie el historial del navegador, adjuntaremos una nueva función que llama a `updateRoute()`. Lo haremos en la parte inferior de nuestro archivo `app.js`:
+
+
+```js
+window.onpopstate = () => updateRoute();
+updateRoute();
+```
+
+> Nota: utilizamos una [función de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) aquí para declarar nuestro controlador de eventos `popstate` por concisión, pero un la función regular funcionaría igual.
+
+Ahora intente utilizar los botones de avance y retroceso de sus navegadores y compruebe que esta vez lo que se muestra está actualizado correctamente.
+
+
+---
+
+## 🚀 Desafío
+
+Agregue una nueva plantilla y ruta para una tercera página que muestre los créditos de esta aplicación.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+**Tarea**: [Mejorar el enrutamiento](assignment.md)
diff --git a/bank/1-template-route/translations/assignment.es.md b/bank/1-template-route/translations/assignment.es.md
new file mode 100644
index 00000000..49fabfad
--- /dev/null
+++ b/bank/1-template-route/translations/assignment.es.md
@@ -0,0 +1,14 @@
+# Mejorar el enrutamiento
+
+## Instrucciones
+
+La declaración de rutas contiene actualmente solo el ID de plantilla a usar. Pero cuando se muestra una página nueva, a veces se necesita un poco más. Mejoremos nuestra implementación de enrutamiento con dos características adicionales:
+
+- Dé títulos a cada plantilla y actualice el título de la ventana con él cuando cambie la plantilla.
+- Agregue una opción para ejecutar código después de que cambie la plantilla. Queremos imprimir `'Se muestra el panel'` en la consola del desarrollador cada vez que se muestra la página del panel.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | --------- | -------- | ----------------- |
+| | Las dos características están implementadas y funcionando. La adición de título y código también funciona para una nueva ruta agregada en la declaración de `routes`. | Las dos características funcionan, pero el comportamiento está codificado y no se puede configurar a través de la declaración de `routes`. Agregar una tercera ruta con la adición de título y código no funciona o funciona parcialmente. | Una de las funciones falta o no funciona correctamente.
\ No newline at end of file
diff --git a/bank/2-forms/.github/post-lecture-quiz.md b/bank/2-forms/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..da903b53
--- /dev/null
+++ b/bank/2-forms/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz by checking one answer per question.*
+
+1. Using `<label>` elements in forms is only for making the form pretty
+
+- [ ] true
+- [ ] false
+
+2. How can you define how a form is sent to the server?
+
+- [ ] using the `action` attribute
+- [ ] using the `method` attribute
+- [ ] both
+
+3. Which attribute can you use to set the maximum size of a text `<input>`?
+- [ ] `max`
+- [ ] `maxlength`
+- [ ] `pattern`
\ No newline at end of file
diff --git a/bank/2-forms/.github/pre-lecture-quiz.md b/bank/2-forms/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..c715cd1a
--- /dev/null
+++ b/bank/2-forms/.github/pre-lecture-quiz.md
@@ -0,0 +1,16 @@
+*Complete this quiz in class.*
+
+1. HTML forms allow to send user input to a server without using JavaScript
+
+- [ ] true
+- [ ] false
+
+2. `<label>` elements are mandatory for every form control
+
+- [ ] true
+- [ ] false
+
+3. It is secure to send form data to a server over HTTP
+   
+- [ ] true
+- [ ] false
diff --git a/bank/2-forms/README.md b/bank/2-forms/README.md
new file mode 100644
index 00000000..aa6e74d0
--- /dev/null
+++ b/bank/2-forms/README.md
@@ -0,0 +1,286 @@
+# Build a Login and Registration Form
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction
+
+In almost all modern web apps, you can create an account to have your own private space. As multiple users can access a web app at the same time, you need a mechanism to store each user personal data separately and select which information to display information. We won't cover how to manage [user identity securely](https://en.wikipedia.org/wiki/Authentication) as it's an extensive topic on its own, but we'll make sure each user is able to create one (or more) bank account on our app.
+
+In this part we'll use HTML forms to add login and registration to our web app. We'll see how to send the data to a server API programmatically, and ultimately how to define basic validation rules for user inputs.
+
+### Prerequisite
+
+You need to have completed the [HTML templates and routing](../1-template-route/README.md) of the web app for this lesson. You also need to install [Node.js](https://nodejs.org) and [run the server API](../api/README.md) locally so you can send data to create accounts.
+
+You can test that the server is running properly by executing this command in a terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Form and controls
+
+The `<form>` element encapsulates a section of an HTML document where the user can input and submit data with interactive controls. There are all sorts of user interface (UI) controls that can be used within a form, the most common one being the `<input>` and the `<button>` elements.
+
+There are a lot of different [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) of `<input>`, for example to create a field where the user can enter its username you can use:
+
+```html
+<input name="username" type="text">
+```
+
+The `name` attribute is used to identify the control and will be used as the property name when the form data will be sent over.
+
+> Take a look at the whole list of [`<input>` types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) and [other form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls) to get an idea of all the native UI elements you can use when building your UI.
+
+✅ Note that `<input>` is an [empty element](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element) on which you should *not* add a matching closing tag. You can however use the self-closing `<input/>` notation, but it's not required.
+
+The `<button>` element within a form is a bit special. If you do not specify its `type` attribute, it will automatically submit the form data to the server when pressed. Here are the possible `type` values:
+
+- `submit`: The default within a `<form>`, the button triggers the form submit action.
+- `reset`: The button resets all the form controls to their initial values.
+- `button`: Do not assign a default behavior when the button is pressed. You can then assign custom actions to it using JavaScript.
+
+### Task:
+
+Let's start by adding a form to the `login` template. We'll need a *username* field and a *Login* button.
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="user">Username</label>
+      <input name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` are used to add a caption for UI controls, such as our username field. Labels are important for the readbility of your forms, but also comes with additional benefits:
+
+- By associating a label to a form control, it helps users using assistive technologies (like a screen reader) to understand what data they're expected to provide.
+- You can click on the label to directly put focus on the associated input, making it easier to reach on touch-screen based devices.
+
+> [Accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) on the web is a very important topic that's often overlooked. Thanks to [HTML5 semantic elements](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) it's not difficult to create accessible content if you use them properly. You can [read more about accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) to avoid common mistakes and become a responsible developer.
+
+Now we'll add a second form for the registration, just below the previous one:
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input name="user" type="text">
+  <label for="currency">Currency</label>
+  <input name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Using the `value` attribute we can define a default value for a given input.
+Notice also that the input for `balance` has the `number` type. Does it look different than the other inputs? Try interacting with it.
+
+✅ Can you navigate and interact with the forms using only a keyboard? How would you do that?
+
+## Submitting data to the server
+
+Now that we have a functional UI, the next step is to send the data over to our server. Let's make a quick test using our current code: what happens if you click on the *Login* or *Register* button?
+
+Did you notice the change in your browser's URL section?
+
+![Screenshot of the browser's URL change after clicking the Register button](./images/click-register.png)
+
+The default action for a `<form>` is to submit the form to the current server URL using the [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), appending the form data directly to the URL. This method has some shortcomings though:
+
+- The data sent is very limited in size (about 2000 characters)
+- The data is directly visible in the URL (not great for passwords)
+- It does not work with file uploads
+
+That's why you can change it to use the [POST method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) which sends the form data to the server in the body of the HTTP request, without any of the previous limitations.
+
+> While POST is the most commonly used method to send data over, [in some specific scenarios](https://www.w3.org/2001/tag/doc/whenToUseGet.html) it is preferable to use the GET method, when implementing a search field for example.
+
+### Task
+
+Add `action` and `method` properties to the registration form:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Now try to register a new account with your name. After clicking on the *Register* button you should see something like this:
+
+![](./images/form-post.png)
+
+If everything goes well, the server should answer your request with a [JSON](https://www.json.org/json-en.html) response containing the account data that was created.
+
+✅ Try registering again with the same name. What happens?
+
+## Submitting data without reloading the page
+
+As you probably noticed, there's a slight issue with the approach we just used: when submitting the form, we get out of our app and the browser redirects to the server URL. We're trying to avoid all page reloads with our web app, as we're makng a [Single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+To send the form data to the server without forcing a page reload, we have to use JavaScript code. Instead of putting an URL in the `action` property of a `<form>` element, you can use any JavaScript code prepended by the `javascript:` string to perform a custom action. Using this also means that you'll have to implement some tasks that were previously done automatically by the browser:
+
+- Retrieve the form data
+- Convert and encode the form data to a suitable format
+- Create the HTTP request and send it to the server
+
+### Task
+
+Replace the registration form `action` with:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Open `app.js` add a new function named `register`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Here we retrieve the form element using `getElementById()` and use the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) helper to extract the values from form controls as a set of key/value pairs. Then we convert the data to a regular object using [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) and finally serialize the data to [JSON](https://www.json.org/json-en.html), a format commonly used for exchanging data on the web.
+
+The data is now ready to be sent to the server. Create a new function named `createAccount`:
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+What's this function doing? First, notice the `async` keyword here. This means that the function contains code that will execute [**asynchronously**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). When used along the `await` keyword, it allows waiting for asynchronous code to execute - like waiting for the server response here - before continuing.
+
+Here's a quick video about `async/await` usage:
+
+[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
+
+We use the `fetch()` API to send JSON data to the server. This method takes 2 parameters:
+
+- The URL of the server, so we put back `//localhost:5000/api/accounts` here.
+- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server know how to interpret the content.
+
+As the server will respond to the request with JSON, we can use `await response.json()` to parse the JSON content and return the resulting object. Note that this method is asynchronous, so we use the `await` keyword here before returning to make sure any errors during parsing are also caught.
+
+Now add some code to the `register` function to call `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Because we use the `await` keyword here, we need to add the `async` keyword before the register function:
+
+```js
+async function register() {
+```
+
+Finally, let's add some logs to check the result. The final function should look like this:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occured:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+That was a bit long but we got there! If you open your [browser developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools), and try registering a new account, you should not see any change on the web page but a message will appear in the console confirming that everything works.
+
+![Screenshot showing log message in the browser console](./images/browser-console.png)
+
+✅ Do you think the data is sent to the server securely? What if someone what was able to intercept the request? You can read about [HTTPS](https://en.wikipedia.org/wiki/HTTPS) to know more about secure data communication.
+
+## Data validation
+
+If you try to register a new account without setting an username first, you can see that the server returns an error with status code [400 (Bad Request)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Before sending data to a server it's a good practice to [validate the form data](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) beforehand when possible, to make sure you send a valid request. HTML5 forms controls provides built-in validation using various attributes:
+
+- `required`: the field needs to be filled otherwise the form cannot be submitted.
+- `minlength` and `maxlength`: defines the minimum and maximum number of characters in text fields.
+- `min` and `max`: defines the minimum and maximum value of a numerical field.
+- `type`: defines the kind of data expected, like `number`, `email`, `file` or [other built-in types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input). This attribute may also change the visual rendering of the form control.
+- `pattern`: allows to define a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) pattern to test if the entered data is valid or not.
+
+> Tip: you can customize the look of your form controls depending if they're valid or not using the `:valid` and `:invalid` CSS pseudo-classes.
+
+### Task
+
+There are 2 required fields to create a valid new account, the username and currency, the other fields being optional. Update the form in the HTML to reflect that:
+
+```html
+<input name="user" type="text" required>
+...
+<input name="currency" type="text" value="$" required>
+```
+
+While this particular server implementation does not enforce specific limits on the fields maximum length, it's always a good practice to define reasonable limits for any user text entry.
+
+Add a `maxlength` attribute to the text fields:
+
+```html
+<input name="user" type="text" maxlength="20" required>
+...
+<input name="currency" type="text" value="$" maxlength="5" required>
+...
+<input name="description" type="text" maxlength="100">
+```
+
+Now if you press the *Register* button and a field does not respect a validation rule we defined, you should see something like this:
+
+![Screenshot showing the validation error when trying to submit the form](./images/validation-error.png)
+
+Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that's it's not always possible to peform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation.
+
+Usually both need to be implemented, and while using client-side validation improves the user experience by providing instant feedback to the user, server-side validation is crucial to make sure the user data you manipulate is sound and safe.
+
+---
+
+## 🚀 Challenge
+
+Show an error message in the HTML if the user already exists.
+
+Here's an example of what the final login page can look like after a bit of styling:
+
+![Screenshot of the login page after adding CSS styles](./images/result.png)
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Developers have gotten very creative about their form building efforts, especially regarding validation strategies. Learn about different form flows by looking through [CodePen](https://codepen.com); can you find some interesting and inspiring forms?
+
+## Assignment
+
+[Style your bank app](assignment.md)
diff --git a/bank/2-forms/assignment.md b/bank/2-forms/assignment.md
new file mode 100644
index 00000000..7dd37b0a
--- /dev/null
+++ b/bank/2-forms/assignment.md
@@ -0,0 +1,13 @@
+# Style your bank app
+
+## Instructions
+
+Create a new `styles.css` file and add a link to it in your current `index.html` file. In the CSS file you just created add some styling to make the *Login* and *Dashboard* page looks nice and tidy. Try to create a color theme to give your app its own branding.
+
+> Tip: you can modify the HTML and add new elements and classes if needed.
+
+## Rubric
+
+| Criteria | Exemplary                                                                                                               | Adequate                                                                       | Needs Improvement                                                                             |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+|          | All pages looks clean and readable, with a consistent color theme and and the different sections standing out properly. | Pages are styled but without a theme or with sections not clearly delimitated. | Pages lack styling, the sections looks disorganized and the information is difficult to read. |
\ No newline at end of file
diff --git a/bank/2-forms/images/browser-console.png b/bank/2-forms/images/browser-console.png
new file mode 100644
index 00000000..39ee3191
Binary files /dev/null and b/bank/2-forms/images/browser-console.png differ
diff --git a/bank/2-forms/images/click-register.png b/bank/2-forms/images/click-register.png
new file mode 100644
index 00000000..4279c5c2
Binary files /dev/null and b/bank/2-forms/images/click-register.png differ
diff --git a/bank/2-forms/images/form-post.png b/bank/2-forms/images/form-post.png
new file mode 100644
index 00000000..30586f25
Binary files /dev/null and b/bank/2-forms/images/form-post.png differ
diff --git a/bank/2-forms/images/result.png b/bank/2-forms/images/result.png
new file mode 100644
index 00000000..33e088ff
Binary files /dev/null and b/bank/2-forms/images/result.png differ
diff --git a/bank/2-forms/images/validation-error.png b/bank/2-forms/images/validation-error.png
new file mode 100644
index 00000000..0d3c3fc1
Binary files /dev/null and b/bank/2-forms/images/validation-error.png differ
diff --git a/bank/2-forms/translation/README.es.md b/bank/2-forms/translation/README.es.md
new file mode 100644
index 00000000..fe23074e
--- /dev/null
+++ b/bank/2-forms/translation/README.es.md
@@ -0,0 +1,291 @@
+# Cree un formulario de inicio de sesión y registro
+
+## [Prueba previa a la conferencia](.github/prelecture-quiz.md)
+
+### Introducción
+
+En casi todas las aplicaciones web modernas, puede crear una cuenta para tener su propio espacio privado. Como varios usuarios pueden acceder a una aplicación web al mismo tiempo, necesita un mecanismo para almacenar los datos personales de cada usuario por separado y seleccionar qué información mostrar. No cubriremos cómo administrar [la identidad del usuario de forma segura](https://en.wikipedia.org/wiki/Authentication) ya que es un tema extenso en sí mismo, pero nos aseguraremos de que cada usuario pueda crear uno. O más cuenta bancaria en nuestra aplicación.
+
+En esta parte usaremos formularios HTML para agregar inicio de sesión y registro a nuestra aplicación web. Veremos cómo enviar los datos a una API de servidor de forma programática y, en última instancia, cómo definir reglas de validación básicas para las entradas del usuario.
+
+### Requisito previo
+
+Debe haber completado las [plantillas HTML y enrutamiento](../1-template-route/README.md) de la aplicación web para esta lección. También necesita instalar [Node.js](https://nodejs.org) y [ejecutar la API del servidor](../api/README.md) localmente para poder enviar datos para crear cuentas.
+
+Puede probar que el servidor está funcionando correctamente ejecutando este comando en una terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## Forma y controles
+
+El elemento `<form>` encapsula una sección de un documento HTML donde el usuario puede ingresar y enviar datos con controles interactivos. Hay todo tipo de controles de interfaz de usuario (UI) que se pueden usar dentro de un formulario, siendo el más común los elementos `<input>` y `<button>`.
+
+Hay muchos [types diferentes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) de `<input>`, por ejemplo, para crear un campo donde el usuario puede ingresar su nombre de usuario que puede usar:
+
+
+```html
+<input name="username" type="text">
+```
+
+El atributo `name` se usa para identificar el control y se usará como el nombre de la propiedad cuando se envíen los datos del formulario.
+
+> Eche un vistazo a la lista completa de [`<input>` tipos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) y [otros controles de formulario](https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls) para tener una idea de todos los elementos nativos de la interfaz de usuario que puede utilizar al crear su interfaz de usuario.
+
+✅ Tenga en cuenta que `<input>` es un [elemento vacío](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element) en el que *no* debe agregar una etiqueta de cierre coincidente. Sin embargo, puede usar la notación de cierre automático `<input/>`, pero no es necesaria.
+
+El elemento `<button>` dentro de un formulario es un poco especial. Si no especifica su atributo `type`, automáticamente enviará los datos del formulario al servidor cuando se presione. Estos son los posibles valores de tipo:
+
+- `enviar`: el valor predeterminado dentro de un` <formulario> `, el botón activa la acción de envío del formulario.
+- `reset`: El botón restablece todos los controles de formulario a sus valores iniciales.
+- `button`: No asigna un comportamiento predeterminado cuando se presiona el botón. A continuación, puede asignarle acciones personalizadas mediante JavaScript.
+
+### Tarea:
+
+Comencemos agregando un formulario a la plantilla de inicio de sesión. Necesitaremos un campo *nombre de usuario* y un botón *Iniciar sesión*.
+
+
+```html
+<template id="login">
+  <h1>Bank App</h1>
+  <section>
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label for="user">Username</label>
+      <input name="user" type="text">
+      <button>Login</button>
+    </form>
+  </section>
+</template>
+```
+
+Si observa más de cerca, puede notar que también agregamos un elemento `<label>` aquí. Las `<label>` se utilizan para agregar un título para los controles de la IU, como nuestro campo de nombre de usuario. Las etiquetas son importantes para la legibilidad de sus formularios, pero también tienen beneficios adicionales:
+
+- Al asociar una etiqueta a un control de formulario, ayuda a los usuarios que utilizan tecnologías de asistencia (como un lector de pantalla) a comprender qué datos se espera que proporcionen.
+- Puede hacer clic en la etiqueta para centrarse directamente en la entrada asociada, lo que facilita el acceso a los dispositivos con pantalla táctil.
+
+> [Accesibilidad](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) en la web es un tema muy importante que a menudo se pasa por alto. Gracias a los [elementos semánticos HTML5](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) no es difícil crear contenido accesible si los usas correctamente. Puede [leer más sobre accesibilidad](https://developer.mozilla.org/en-US/docs/Web/Accessibility) para evitar errores comunes y convertirse en un desarrollador responsable.
+
+Ahora agregaremos un segundo formulario para el registro, justo debajo del anterior:
+
+
+```html
+<hr/>
+<h2>Register</h2>
+<form id="registerForm">
+  <label for="user">Username</label>
+  <input name="user" type="text">
+  <label for="currency">Currency</label>
+  <input name="currency" type="text" value="$">
+  <label for="description">Description</label>
+  <input name="description" type="text">
+  <label for="balance">Current balance</label>
+  <input name="balance" type="number" value="0">
+  <button>Register</button>
+</form>
+```
+
+Usando el atributo `value` podemos definir un valor predeterminado para una entrada dada.
+Observe también que la entrada para `balance` tiene el tipo `number`. ¿Se ve diferente a las otras entradas? Intenta interactuar con él.
+
+✅ ¿Puede navegar e interactuar con los formularios usando solo un teclado? ¿Cómo lo harías tú?
+
+## Envío de datos al servidor
+
+Ahora que tenemos una interfaz de usuario funcional, el siguiente paso es enviar los datos a nuestro servidor. Hagamos una prueba rápida con nuestro código actual: ¿qué sucede si hace clic en el botón *Iniciar sesión* o *Registrarse*?
+
+¿Notó el cambio en la sección de URL de su navegador?
+
+! [Captura de pantalla del cambio de URL del navegador después de hacer clic en el botón Registrar](./images/click-register.png)
+
+La acción predeterminada para un `<form>` es enviar el formulario a la URL del servidor actual utilizando el [método GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3 ), agregando los datos del formulario directamente a la URL. Sin embargo, este método tiene algunas deficiencias:
+
+- Los datos enviados son de tamaño muy limitado (unos 2000 caracteres)
+- Los datos son directamente visibles en la URL (no es ideal para contraseñas)
+- No funciona con cargas de archivos.
+
+Es por eso que puede cambiarlo para usar el [método POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) que envía los datos del formulario al servidor en el cuerpo de la solicitud HTTP, sin ninguna de las limitaciones anteriores.
+
+> Si bien POST es el método más utilizado para enviar datos, [en algunos escenarios específicos](https://www.w3.org/2001/tag/doc/whenToUseGet.html) es preferible utilizar el método GET, al implementar un campo de búsqueda, por ejemplo.
+
+### Tarea
+
+Agregue las propiedades `action` y `method` al formulario de registro:
+
+```html
+<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
+```
+
+Ahora intente registrar una nueva cuenta con su nombre. Después de hacer clic en el botón * Registrarse *, debería ver algo como esto:
+
+![](./images/form-post.png)
+
+Si todo va bien, el servidor debe responder a su solicitud con una respuesta [JSON](https://www.json.org/json-en.html) que contenga los datos de la cuenta que se creó.
+
+✅ Intente registrarse nuevamente con el mismo nombre. ¿Lo que pasa?
+
+## Envío de datos sin recargar la página
+
+Como probablemente haya notado, hay un pequeño problema con el enfoque que acabamos de usar: al enviar el formulario, salimos de nuestra aplicación y el navegador redirige a la URL del servidor. Estamos tratando de evitar todas las recargas de páginas con nuestra aplicación web, ya que estamos creando una [Aplicación de una sola página (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
+
+Para enviar los datos del formulario al servidor sin forzar la recarga de una página, tenemos que usar código JavaScript. En lugar de poner una URL en la propiedad `action` de un elemento `<form>`, puede usar cualquier código JavaScript precedido por la cadena `javascript:` para realizar una acción personalizada. Usar esto también significa que tendrá que implementar algunas tareas que anteriormente el navegador realizaba automáticamente:
+
+- Recuperar los datos del formulario
+- Convierta y codifique los datos del formulario a un formato adecuado
+- Crea la solicitud HTTP y envíala al servidor
+
+### Tarea
+
+Reemplace el formulario de registro `acción` con:
+
+```html
+<form id="registerForm" action="javascript:register()">
+```
+
+Abra `app.js` agregue una nueva función llamada `registro`:
+
+```js
+function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+}
+```
+
+Aquí recuperamos el elemento del formulario usando `getElementById()` y usamos el ayudante [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) para extraer los valores del formulario controles como un conjunto de pares clave/valor. Luego convertimos los datos a un objeto regular usando [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) y finalmente serialice los datos en [JSON](https://www.json.org/json-en.html), un formato que se utiliza comúnmente para intercambiar datos en la web.
+
+Los datos ahora están listos para enviarse al servidor. Cree una nueva función llamada `createAccount`:
+
+
+```js
+async function createAccount(account) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: account
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+¿Qué hace esta función? Primero, observe la palabra clave `async` aquí. Esto significa que la función contiene código que se ejecutará [** asincrónicamente**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Cuando se usa junto con la palabra clave `await`, permite esperar a que se ejecute el código asincrónico, como esperar la respuesta del servidor aquí, antes de continuar.
+
+Aquí hay un video rápido sobre el uso de `async/await`:
+
+[![Async y Await para administrar promesas](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)] (https://youtube.com/watch?v=YwmlRkrxvkk "Async y Await para administrar promesas")
+
+Usamos la API `fetch()` para enviar datos JSON al servidor. Este método toma 2 parámetros:
+
+- La URL del servidor, por lo que volvemos a colocar `//localhost:5000/api/accounts` aquí.
+- La configuración de la solicitud. Ahí es donde establecemos el método en `POST` y proporcionamos el `body` de la solicitud. Como estamos enviando datos JSON al servidor, también necesitamos establecer el encabezado `Content-Type` en `application/json` para que el servidor sepa cómo interpretar el contenido.
+
+Como el servidor responderá a la solicitud con JSON, podemos usar `await response.json()` para analizar el contenido JSON y devolver el objeto resultante. Tenga en cuenta que este método es asíncrono, por lo que usamos la palabra clave `await` aquí antes de regresar para asegurarnos de que también se detecta cualquier error durante el análisis.
+
+Ahora agregue un código a la función `register` para llamar a `createAccount()`:
+
+```js
+const result = await createAccount(jsonData);
+```
+
+Debido a que usamos la palabra clave `await` aquí, necesitamos agregar la palabra clave `async` antes de la función de registro:
+
+```js
+async function register() {
+```
+
+Finalmente, agreguemos algunos registros para verificar el resultado. La función final debería verse así:
+
+```js
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return console.log('An error occured:', result.error);
+  }
+
+  console.log('Account created!', result);
+}
+```
+
+¡Eso fue un poco largo pero llegamos allí! Si abre sus [herramientas de desarrollo del navegador](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) e intenta registrar una nueva cuenta, no debería ver ningún cambio en la página web pero aparecerá un mensaje en la consola confirmando que todo funciona.
+
+![Captura de pantalla que muestra el mensaje de registro en la consola del navegador](./images/browser-console.png)
+
+✅ ¿Crees que los datos se envían al servidor de forma segura? ¿Y si alguien pudiera interceptar la solicitud? Puede leer sobre [HTTPS](https://en.wikipedia.org/wiki/HTTPS) para saber más sobre la comunicación segura de datos.
+
+## Validación de datos
+
+Si intenta registrar una nueva cuenta sin establecer un nombre de usuario primero, puede ver que el servidor devuelve un error con el código de estado [400 (Solicitud incorrecta)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
+
+Antes de enviar datos a un servidor, es una buena práctica [validar los datos del formulario](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) de antemano cuando sea posible, para asegurarse de enviar un solicitud válida. Los controles de formularios HTML5 proporcionan una validación incorporada utilizando varios atributos:
+
+- `required`: el campo debe completarse; de ​​lo contrario, el formulario no se podrá enviar
+- `minlength` y `maxlength`: define el número mínimo y máximo de caracteres en los campos de texto.
+- `min` y `max`: define el valor mínimo y máximo de un campo numérico.
+- `type`: define el tipo de datos esperados, como `number`, `email`, `file` u [otros tipos integrados](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input). Este atributo también puede cambiar la representación visual del control de formulario.
+- `patrón`: permite definir un patrón [expresión regular](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) para probar si los datos ingresados ​​son válidos o no.
+
+> Consejo: puedes personalizar el aspecto de los controles de tu formulario dependiendo de si son válidos o no usando las pseudoclases CSS `:valid` y `:invalid`.
+
+
+### Tarea
+
+Hay 2 campos obligatorios para crear una nueva cuenta válida, el nombre de usuario y la moneda, los otros campos son opcionales. Actualice el formulario en HTML para reflejar que:
+
+```html
+<input name="user" type="text" required>
+...
+<input name="currency" type="text" value="$" required>
+```
+
+Si bien esta implementación de servidor en particular no impone límites específicos en la longitud máxima de los campos, siempre es una buena práctica definir límites razonables para cualquier entrada de texto del usuario.
+
+Agrega un atributo `maxlength` a los campos de texto:
+
+```html
+<input name="user" type="text" maxlength="20" required>
+...
+<input name="currency" type="text" value="$" maxlength="5" required>
+...
+<input name="description" type="text" maxlength="100">
+```
+
+Ahora, si presiona el botón *Registrar* y un campo no respeta una regla de validación que definimos, debería ver algo como esto:
+
+![Captura de pantalla que muestra el error de validación al intentar enviar el formulario](./images/validation-error.png)
+
+Una validación como esta realizada *antes* de enviar cualquier dato al servidor se llama validación **del lado del cliente**. Pero tenga en cuenta que no siempre es posible realizar todas las comprobaciones sin enviar los datos. Por ejemplo, no podemos comprobar aquí si ya existe una cuenta con el mismo nombre de usuario sin enviar una solicitud al servidor. La validación adicional realizada en el servidor se denomina validación **del lado del servidor**.
+
+Por lo general, ambos deben implementarse y, si bien el uso de la validación del lado del cliente mejora la experiencia del usuario al proporcionar comentarios instantáneos al usuario, la validación del lado del servidor es crucial para garantizar que los datos del usuario que manipula sean sólidos y seguros.
+
+---
+
+## 🚀 Desafío
+
+Muestra un mensaje de error en el HTML si el usuario ya existe.
+
+Aquí hay un ejemplo de cómo puede verse la página de inicio de sesión final después de un poco de estilo:
+
+![Captura de pantalla de la página de inicio de sesión después de agregar estilos CSS](./images/result.png)
+
+## [Prueba posterior a la conferencia](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Los desarrolladores se han vuelto muy creativos en sus esfuerzos de creación de formularios, especialmente en lo que respecta a las estrategias de validación. Obtenga información sobre los diferentes flujos de formularios consultando [CodePen](https://codepen.com); ¿Puedes encontrar algunas formas interesantes e inspiradoras?
+
+## Asignación
+
+[Diseña tu aplicación bancaria](assignment.md)
diff --git a/bank/2-forms/translation/assignment.es.md b/bank/2-forms/translation/assignment.es.md
new file mode 100644
index 00000000..b30299e1
--- /dev/null
+++ b/bank/2-forms/translation/assignment.es.md
@@ -0,0 +1,13 @@
+# Diseña tu aplicación bancaria
+
+## Instrucciones
+
+Cree un nuevo archivo `styles.css` y agréguele un enlace en su archivo `index.html` actual. En el archivo CSS que acaba de crear, agregue algunos estilos para que la página *Inicio de sesión* y *Panel de control* se vea bien y ordenada. Intente crear un tema de color para darle a su aplicación su propia marca.
+
+> Consejo: puede modificar el HTML y agregar nuevos elementos y clases si es necesario.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- -------------------------------------------------- ------------------- | -------------------------------------------------- ---------------------------- | -------------------------------------------------- ------------------------------------------- |
+| | Todas las páginas se ven limpias y legibles, con un tema de color consistente y las diferentes secciones destacando correctamente. | Las páginas tienen un estilo pero sin un tema o con secciones no claramente delimitadas. | Las páginas carecen de estilo, las secciones se ven desorganizadas y la información es difícil de leer. |
diff --git a/bank/3-data/.github/post-lecture-quiz.md b/bank/3-data/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..7f6d6d2b
--- /dev/null
+++ b/bank/3-data/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz by checking one answer per question.*
+
+1. In a Single-page application, the HTML is loaded once and never updated:
+
+- [ ] true
+- [ ] false
+
+2. Why is it important to not trust data coming from user input?
+
+- [ ] because using special characters can make the UI ugly.
+- [ ] because it can contain non-sense or offensive words.
+- [ ] because it can be used as vector of attack to execute malicious scripts.
+
+3. What's the API name for sending asynchronous HTTP requests to a web server?
+- [ ] `request()`
+- [ ] `fetch()`
+- [ ] `ajax()`
diff --git a/bank/3-data/.github/pre-lecture-quiz.md b/bank/3-data/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..b9954d83
--- /dev/null
+++ b/bank/3-data/.github/pre-lecture-quiz.md
@@ -0,0 +1,16 @@
+*Complete this quiz in class.*
+
+1. You can fetch data from a server synchronously in a browser
+
+- [ ] true
+- [ ] false
+
+2. What's the most common format used to exchange *data* on the web?
+
+- [ ] HTML
+- [ ] XML
+- [ ] JSON
+
+3. There's no way to prevent a web page from accessing a public server API
+- [ ] true
+- [ ] false
diff --git a/bank/3-data/README.md b/bank/3-data/README.md
new file mode 100644
index 00000000..8e745bda
--- /dev/null
+++ b/bank/3-data/README.md
@@ -0,0 +1,322 @@
+# Methods of Fetching and Using Data
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction
+
+At the core of every web application there's *data*. Data can take many forms, but the end goal here is always to display information to the user. With web apps becoming increasingly interactive and complex, how the user access and interact with information is now a key part of web development.
+
+In this lesson, we'll see how to fetch data from a server asynchronously, and use this data to display information on a web page without reloading the HTML.
+
+### Prerequisite
+
+You need to have built the [Login and Registration Form](../2-forms/README.md) part of the web app for this lesson. You also need to install [Node.js](https://nodejs.org) and [run the server API](../api/README.md) locally so you get account data.
+
+You can test that the server is running properly by executing this command in a terminal:
+
+```sh
+curl http://localhost:5000/api
+# -> should return "Bank API v1.0.0" as a result
+```
+
+---
+
+## AJAX and data fetching
+
+Traditional web sites update the content displayed when the user click on a link or submit data using a form, by reloading the full HTML page. Every time new data needs to be loaded, the web server returns a brand new HTML page that needs to be processed by the browser, interrupting the current user action and limiting interactions during the reload. This workflow is also called a *Multi-Page Application* or *MPA*.
+
+![Update workflow in a multi-page application](./images/mpa.png)
+
+When web applications started to become more complex and interactive, a new technique called [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) emerged. This technique allows web apps to send and retrieve data from a server asynchronously using JavaScript, without having to reload the HTML page, resulting in faster updates and smoother user interactions. When new data is received from the server, the current HTML page can also be updated with JavaScript using the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) API. Over time, this approach has evolved into what we is now called a [*Single-Page Application* or *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
+
+![Update workflow in a single-page application](./images/spa.png)
+
+When AJAX was first introduced, the only API available to fetch data asynchronously was [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). But modern browsers now also implement the more convenient and powerful [`Fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), which use promises and is better suited to manipulate JSON data.
+
+> While all modern browsers supports the `Fetch API`, if you want your web application to work on legacy or old browsers it's always a good idea to check the [compatibility table on caniuse.com](https://caniuse.com/fetch) first.
+
+### Task:
+
+In [the previous lesson](../2-forms/README.md) we implented the registration form to create an account. We'll now add code to login using an existing account, and fetch its data. Open the `app.js` file and add a new `login` function:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+}
+```
+
+Here we start by retrieving the form element with `getElementById()`, and then we get the username from the input with `loginForm.user.value`. Every form control can be accessed by its name (set in the HTML using the `name` attribute) as a property of the form.
+
+In a similar fashion to what we did for the registration, we'll create another function to perform a server request, but this time for retrieving the account data:
+
+```js
+async function getAccount(user) {
+  try {
+    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+```
+
+We use the `fetch` API to request the data asynchronously from the server, but this time we don't need any extra parameters other than the URL to call, as we're only querying data. By default, `fetch` create a [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) HTTP request, which is what we are seeking here.
+
+✅ `encodeURIComponent()` is a function that escapes special characters for URL. What possible issues could we possibly have if we do not call this function and use directly the `user` value in the URL?
+
+Let's now update our `login` function to use `getAccount`:
+
+```js
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return console.log('loginError', data.error);
+  }
+
+  account = data;
+  navigate('/dashboard');
+}
+```
+
+First, as `getAccount` is an asynchronous function we need to match it with the `await` keyword to wait for the server result. As with any server request, we also have to deal with errors cases. For now we'll only add a log message to display the error, and come back to it layer.
+
+Then we have to store the data somewhere so we can later use it to display the dashboard informations. Since we the `account` variable does not exist yet, we'll create a global variable for it at the top of our file:
+
+```js
+let account = null;
+```
+
+After the user data is saved into a variable we can navigate from the *login* page to the *dashboard* using the `navigate()` function we already have.
+
+Finally, we need to call our `login` function when the login form is submitted by modifying the HTML:
+
+```html
+<form id="loginForm" action="javascript:login()">
+```
+
+Test that everything is working correctly by registering a new account and trying to login using the same account.
+
+Before moving on to the next part, we can also complete the `register` function by adding this at the bottom of the function:
+
+```js
+account = result;
+navigate('/dashboard');
+```
+
+✅ Did you know that by default, you can only call server APIs from the *same domain and port* than the web page you are viewing? This is security mechanism enforced by browsers. But wait, our web app is running on `localhost:3000` whereas the server API is running on ` localhost:5000`, why does it work? By using a technique called [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) it is possible to perform cross-origin HTTP requests is the server add specials headers to the response, allowing exceptions for specific domains.
+
+## Update HTML to display data
+
+Now that we have the user data, we have to update the existing HTML to display it. We already now how to retrieve element from the DOM using for example `document.getElementById()`. After you have a base element, here are some APIs you can use to modify it or add child elements to it:
+
+- Using the [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property you can change the text of an element. Note that changing this values removes all the element's children (if there's any) and replace it with the text provided. As such, it's also an efficient method to remove all children of a given element by assigning an empty string `''` to it.
+
+- Using [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) along with the [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) method you can create and attach one or more new child elements.
+
+✅ Using the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of an element it's also possible to change its HTML contents, but this one should avoided as it's vulnerable to [cross-site scripting (XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) attacks.
+
+### Task
+
+Before moving on to the dashboard screen, there's one more thing we should do on the *login* page. Currently, if you try to login with a username that does not exist, a message is shown in the console but for a normal user nothing changes and you don't know what's going on.
+
+Let's add a placeholder element in the login form where we can display an error message if needed. A good place would be just before the login `<button>`:
+
+```html
+...
+<div id="loginError"></div>
+<button>Login</button>
+...
+```
+
+This `<div>` element is empty, meaning that nothing we be displayed on the screen until we add some content to it. We also give it an `id` so we can retrieve it easily with JavaScript.
+
+Go back to the `app.js` file and create a new helper function `updateElement`:
+
+```js
+function updateElement(id, text) {
+  const element = document.getElementById(id);
+  element.textContent = text;
+}
+```
+
+This one is quite straightforward, given an element *id* and *text* it will update the text content of the DOM element with the matching `id`. Let's use this method in place of the previous error message in the `login` function:
+
+```js
+if (data.error) {
+  return updateElement('loginError', data.error);
+}
+```
+
+Now if you try to login with an invalid account, you should see something like this:
+
+![Screenshot showing the error message displayed during login](./images/login-error.png)
+
+Implement the same behavior for the `register` function errors (don't forget to update the HTML).
+
+## Display information on the dashboard
+
+Using the same techniques we've just seen we'll also take care of displaying the account information on the the dashboard page.
+
+This is what an account object received from the server looks like:
+
+```json
+{
+  "user": "test",
+  "currency": "$",
+  "description": "Test account",
+  "balance": 75,
+  "transactions": [
+    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
+    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
+    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
+  ],
+}
+```
+
+> Note: to make your life easier, you can use the pre-existing `test` account that's already populated with data.
+
+### Task
+
+Let's start by replacing the "Balance" section in the HTML to add placeholder elements:
+
+```html
+<section>
+  Balance: <span id="balance"></span><span id="currency"></span>
+</section>
+```
+
+We'll also add a new section just below to display the account description:
+
+```html
+<section id="description" aria-label="Account description"></section>
+```
+
+✅ As there is no text label here to explain what this section is about, we use the `aria-label` attribute to give an accessibility hint. Learn more about [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) to make sure your web apps are accessible to everyone.
+
+Next, we'll create a new function in `app.js` to fill in the placeholder:
+
+```js
+function updateDashboard() {
+  if (!account) {
+    return navigate('/login');
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+}
+```
+
+First, we check that we have the account data we need before going futher. Then we use the `updateElement()` function we created earlier to update the HTML.
+
+> To make the balance display prettier, we use the method [`toFixed(2)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) to force displaying the value with 2 digits after the decimal point.
+
+Now we need to call our `updateDashboard()` function everytime the dashboard is loaded. If you already finished the [lesson 1 assignment](../1-template-route/assignment.md) this should be straighforward, otherwise you can use the following implementation.
+
+Add this code to the end of the `updateRoute()` function:
+
+```js
+if (typeof route.init === 'function') {
+  route.init();
+}
+```
+
+And update the routes definition with:
+
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
+};
+```
+
+With this change, everytime the dashboard page is displayed then the function `updateDashboard()` is called. After a login, you should then be able to see the account balance, currency and description.
+
+## Create table rows dynamically with HTML templates
+
+In the [first lesson](../1-template-route/README.md) we used HTML template along with the [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) method to implement the navigation in our app. Templates can also be smaller and used to dynamically populate repetitive parts of a page.
+
+We'll use a similar approach to display the list of transactions in the HTML table.
+
+### Task
+
+Add a new template in the HTML `<body>`:
+
+```html
+<template id="transaction">
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+</template>
+```
+
+This template represents a single table row, with the 3 columns we want to populate: *date*, *object* and *amount* of a transaction.
+
+Then, add this `id` property to the `<tbody>` element of the table within the dashboard template to make it easier to find using JavaScript:
+
+```html
+<tbody id="transactions"></tbody>
+```
+
+Our HTML is ready, let's switch to JavaScript code and create a new function `createTransactionRow`:
+
+```js
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+```
+
+This function does exactly what its names implies: using the template we created earlier, it create a new table row and fill in its contents using transaction data. We'll use this to in our `updateDashboard()` function to populate the table:
+
+```js
+const transactionsRows = document.createDocumentFragment();
+for (const transaction of account.transactions) {
+  const transactionRow = createTransactionRow(transaction);
+  transactionsRows.appendChild(transactionRow);
+}
+updateElement('transactions', transactionsRows);
+```
+
+We use here the method [`document.createDocumentFragment()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment) that create a new DOM fragment on which we can work, before finally attaching it to our HTML table.
+
+There's still one more thing we have to do before this code can work, as our `updateElement()` function currently supports text content only. Let's change its code a bit:
+
+```js
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+```
+
+We use the [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) method as it allows to attach either text or [DOM Nodes](https://developer.mozilla.org/en-US/docs/Web/API/Node) to a parent element, which is perfect for all our use cases.
+
+If you try using the `test` account to login, you should now see a transaction list on the dashboard 🎉.
+
+---
+
+## 🚀 Challenge
+
+Work together to make the dashboard page look like a real banking app. If you already styled your app, try to use [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) to create a [responsive design](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) working nicely on both desktop and mobile devices.
+
+Here's an example of a styled dashboard page:
+
+![Screenshot of an example result of the dashboard after styling](../images/screen2.png)
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Assignment
+
+[Refactor and comment your code](assignment.md)
diff --git a/bank/3-data/assignment.md b/bank/3-data/assignment.md
new file mode 100644
index 00000000..6287cfc0
--- /dev/null
+++ b/bank/3-data/assignment.md
@@ -0,0 +1,15 @@
+# Refactor and comment your code
+
+## Instructions
+
+As your codebase grows, it's important to refactor your code frequently to keep it readable and maintainable over time. Add comments and refactor your `app.js` to improve the code quality:
+
+- Extract constants, like the server API base URL
+- Factorize similar code: for example you can create a `sendRequest()` function to regroup the code used in both `createAccount()` and `getAccount()`
+- Reorganize the code to make it easier to read, and add comments
+
+## Rubric
+
+| Criteria | Exemplary                                                                                                                                                     | Adequate                                                                                          | Needs Improvement                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+|          | Code is commented, well-organized in different sections and easy to read. Constants are extracted and a factorized `sendRequest()` function has been created. | Code is clean but can still be improved with more comments, constant extraction or factorization. | Code is messy, not commented, constants are not extracted and code is not factorized. |
diff --git a/bank/3-data/images/login-error.png b/bank/3-data/images/login-error.png
new file mode 100644
index 00000000..8a6fc380
Binary files /dev/null and b/bank/3-data/images/login-error.png differ
diff --git a/bank/3-data/images/mpa.png b/bank/3-data/images/mpa.png
new file mode 100644
index 00000000..b3a241ad
Binary files /dev/null and b/bank/3-data/images/mpa.png differ
diff --git a/bank/3-data/images/spa.png b/bank/3-data/images/spa.png
new file mode 100644
index 00000000..5bb01b6a
Binary files /dev/null and b/bank/3-data/images/spa.png differ
diff --git a/bank/3-data/translations/README.es.md b/bank/3-data/translations/README.es.md
new file mode 100644
index 00000000..be6c928a
--- /dev/null
+++ b/bank/3-data/translations/README.es.md
@@ -0,0 +1,59 @@
+# [Tema de la lección]
+
+! [Insertar un video aquí](video-url)
+
+## [Prueba previa a la conferencia](.github/prelecture-quiz.md)
+
+[Describe lo que aprenderemos]
+
+### Introducción
+
+Describe lo que se cubrirá
+
+- XHR y buscar
+- Análisis JSON
+- visualización de datos
+- plantilla de fila de tabla
+
+- asignación: comentario + código de refactorización
+- desafío: hazlo bonito
+
+> Notas
+
+### Requisito previo
+
+¿Qué pasos deberían haberse cubierto antes de esta lección?
+
+### Preparación
+
+Pasos preparatorios para comenzar esta lección
+
+---
+
+[Recorrer el contenido en bloques]
+
+## [Tema 1]
+
+### Tarea:
+
+Trabajen juntos para mejorar progresivamente su base de código para construir el proyecto con código compartido:
+
+`` `html
+bloques de código
+''
+
+✅ Comprobación de conocimientos: aproveche este momento para ampliar el conocimiento de los estudiantes con preguntas abiertas
+
+## [Tema 2]
+
+## [Tema 3]
+
+🚀 Desafío: agregue un desafío para que los estudiantes trabajen en colaboración en clase para mejorar el proyecto
+
+Opcional: agregue una captura de pantalla de la interfaz de usuario de la lección completa si corresponde
+
+## [Prueba posterior a la conferencia](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+**Vencimiento de la asignación [MM/AA]**: [Nombre de la asignación](assignment.md)
diff --git a/bank/3-data/translations/assignment.es.md b/bank/3-data/translations/assignment.es.md
new file mode 100644
index 00000000..421236de
--- /dev/null
+++ b/bank/3-data/translations/assignment.es.md
@@ -0,0 +1,15 @@
+# Refactoriza y comenta tu código
+
+## Instrucciones
+
+A medida que su código base crece, es importante refactorizar su código con frecuencia para mantenerlo legible y mantenible con el tiempo. Agregue comentarios y refactorice su ʻapp.js` para mejorar la calidad del código:
+
+- Extraer constantes, como la URL base de la API del servidor
+- Factorizar código similar: por ejemplo, puede crear una función `sendRequest()` para reagrupar el código utilizado tanto en `createAccount()` como en `getAccount()`
+- Reorganice el código para que sea más fácil de leer y agregue comentarios
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------- | -------------------------------------------------- ----------------------------------------------- | -------------------------------------------------- ----------------------------------- |
+| | El código está comentado, bien organizado en diferentes secciones y fácil de leer. Se extraen las constantes y se ha creado una función factorizada `sendRequest()`. | El código está limpio pero aún se puede mejorar con más comentarios, extracción constante o factorización. | El código es desordenado, no comentado, las constantes no se extraen y el código no se factoriza. |
diff --git a/bank/4-state-management/.github/post-lecture-quiz.md b/bank/4-state-management/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..eb0a6044
--- /dev/null
+++ b/bank/4-state-management/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz by checking one answer per question.*
+
+1. What do you think *state management* means?
+
+- [ ] Enforcement of law & order
+- [ ] Logging the user interface state over time
+- [ ] Keeping clean your app data flow
+
+2. How can you keep track of the user session state?
+
+- [ ] HTTP cookies
+- [ ] Local or session storage
+- [ ] All of the above
+
+3. Mutating an object is always the best way to update it
+- [ ] true
+- [ ] false
diff --git a/bank/4-state-management/.github/pre-lecture-quiz.md b/bank/4-state-management/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..8706b47b
--- /dev/null
+++ b/bank/4-state-management/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz in class.*
+
+1. What is an immutable object?
+
+- [ ] An object defined as a constant
+- [ ] An object that cannot be modified after it's created
+- [ ] A copy of an existing object
+
+2. What benefit(s) you get from using state management?
+
+- [ ] You can keep track of every place the state is updated
+- [ ] It's easier to debug the code
+- [ ] All of the above
+
+3. What's the best way to persist user data across different sessions?
+- [ ] Using files
+- [ ] Using the browser's `localStorage` API
+- [ ] In a database behind a server API
diff --git a/bank/4-state-management/README.md b/bank/4-state-management/README.md
new file mode 100644
index 00000000..377b4f1d
--- /dev/null
+++ b/bank/4-state-management/README.md
@@ -0,0 +1,60 @@
+# [Lesson Topic]
+
+![Embed a video here](video-url)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+[Describe what we will learn]
+
+### Introduction
+
+Describe what will be covered
+
+- logged in or not
+- account data
+- let state = {}
+- immutability
+- local storage
+
+- assignment: add transaction 
+
+
+> Notes
+
+### Prerequisite
+
+What steps should have been covered before this lesson?
+
+### Preparation
+
+Preparatory steps to start this lesson
+
+---
+
+[Step through content in blocks]
+
+## [Topic 1]
+
+### Task:
+
+Work together to progressively enhance your codebase to build the project with shared code:
+
+```html
+code blocks
+```
+
+✅ Knowledge Check - use this moment to stretch students' knowledge with open questions
+
+## [Topic 2]
+
+## [Topic 3]
+
+🚀 Challenge: Add a challenge for students to work on collaboratively in class to enhance the project
+
+Optional: add a screenshot of the completed lesson's UI if appropriate
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+**Assignment Due [MM/YY]**: [Assignment Name](assignment.md)
diff --git a/bank/4-state-management/assignment.md b/bank/4-state-management/assignment.md
new file mode 100644
index 00000000..5a24c4ab
--- /dev/null
+++ b/bank/4-state-management/assignment.md
@@ -0,0 +1,10 @@
+# [Assignment Name]
+
+## Instructions
+
+## Rubric
+
+| Criteria | Exemplary | Adequate | Needs Improvement |
+| -------- | --------- | -------- | ----------------- |
+|          |           |          |
+|          |
\ No newline at end of file
diff --git a/bank/4-state-management/translations/README.es.md b/bank/4-state-management/translations/README.es.md
new file mode 100644
index 00000000..3a7f6380
--- /dev/null
+++ b/bank/4-state-management/translations/README.es.md
@@ -0,0 +1,60 @@
+# [Tema de la lección]
+
+![Insertar un video aquí](video-url)
+
+## [Prueba previa a la conferencia](.github/prelecture-quiz.md)
+
+[Describe lo que aprenderemos]
+
+### Introducción
+
+Describe lo que se cubrirá
+
+- iniciado sesión o no
+- datos de la cuenta
+- dejar estado = {}
+- inmutabilidad
+- almacenamiento local
+
+- asignación: agregar transacción
+
+
+> Notas
+
+### Requisito previo
+
+¿Qué pasos deberían haberse cubierto antes de esta lección?
+
+### Preparación
+
+Pasos preparatorios para comenzar esta lección
+
+---
+
+[Recorrer el contenido en bloques]
+
+## [Tema 1]
+
+### Tarea:
+
+Trabajen juntos para mejorar progresivamente su base de código para construir el proyecto con código compartido:
+
+```html
+bloques de código
+```
+
+✅ Comprobación de conocimientos: aproveche este momento para ampliar el conocimiento de los estudiantes con preguntas abiertas
+
+## [Tema 2]
+
+## [Tema 3]
+
+🚀 Desafío: agregue un desafío para que los estudiantes trabajen en colaboración en clase para mejorar el proyecto
+
+Opcional: agregue una captura de pantalla de la interfaz de usuario de la lección completa si corresponde
+
+## [Prueba posterior a la conferencia](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+**Asignación vence [MM/AA]**: [Nombre de asignación](assignment.md)
diff --git a/bank/LICENSE b/bank/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/bank/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/bank/README.md b/bank/README.md
new file mode 100644
index 00000000..5dc6e419
--- /dev/null
+++ b/bank/README.md
@@ -0,0 +1,20 @@
+# :dollar: Build a Bank
+
+In this project, you'll learn how to build a fictional bank. These lessons include instructions on how to layout a web app and provide routes, build forms, manage state, and fetch data from an API from which you can fetch the bank's data.
+
+<img src="images/screen1.png" width="50%" height="auto"/><img src="images/screen2.png" width="50%" height="auto"/>
+
+## Lessons
+
+1. [HTML Templates and Routes in a Web App](1-template-route/README.md)
+2. [Build a Login and Registration Form](2-forms/README.md)
+3. [Methods of Fetching and Using Data](3-data/README.md)
+4. [Concepts of State Management](4-state-management/README.md)
+
+### Credits
+
+These lessons were written with :hearts: by [Yohan Lasorsa](https://twitter.com/sinedied).
+
+If you're interested to learn how to build the [server API](./api/README) used in these lessons, you can follow [this series of videos](https://aka.ms/NodeBeginner) (in particular videos 17 through 21).
+
+You can also take a look at [this interactive Learn tutorial](https://aka.ms/learn/express-api). 
\ No newline at end of file
diff --git a/bank/api/.eslintrc.json b/bank/api/.eslintrc.json
new file mode 100644
index 00000000..28680285
--- /dev/null
+++ b/bank/api/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+    "env": {
+        "commonjs": true,
+        "es2020": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 11
+    },
+    "rules": {
+    }
+}
diff --git a/bank/api/.gitignore b/bank/api/.gitignore
new file mode 100644
index 00000000..2ea22ebe
--- /dev/null
+++ b/bank/api/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+*.logs
+.DS_Store
+.Thumbs.db
diff --git a/bank/api/LICENSE b/bank/api/LICENSE
new file mode 100644
index 00000000..e4cd85b1
--- /dev/null
+++ b/bank/api/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Yohan Lasorsa (@sinedied)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/bank/api/README.md b/bank/api/README.md
new file mode 100644
index 00000000..ac75e151
--- /dev/null
+++ b/bank/api/README.md
@@ -0,0 +1,33 @@
+# Bank API
+
+> Bank API built with [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+The API is already built for you and not part of the exercise.
+
+However, if you're interested to learn how to build an API like this you can follow this series of videos: https://aka.ms/NodeBeginner (videos 17 through 21 covers this exact API).
+
+You can also take a look at this interactive tutorial: https://aka.ms/learn/express-api
+
+## Running the server
+
+Make sure you have [Node.js](https://nodejs.org) installed.
+
+1. Git clone this repo.
+2. Open a terminal in `api` folder, then run `npm install`.
+3. Run `npm start`.
+
+The server should start listening on port `5000`.
+
+> Note: all entries are stored in-memory and are not persisted, so when the server is stopped all data is lost.
+
+## API details
+
+Route                                        | Description
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Get server info
+POST   /api/accounts/                        | Create an account, ex: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Get all data for the specified account
+DELETE /api/accounts/:user                   | Remove specified account
+POST   /api/accounts/:user/transactions      | Add a transaction, ex: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Remove specified transaction
+
diff --git a/bank/api/api.http b/bank/api/api.http
new file mode 100644
index 00000000..b0b8b6c1
--- /dev/null
+++ b/bank/api/api.http
@@ -0,0 +1,34 @@
+# You need REST Client extension for VS Code to use this file
+# Download at https://aka.ms/vscode/rest-client
+
+GET http://localhost:5000/api/
+
+###
+
+POST http://localhost:5000/api/accounts/
+Content-Type: application/x-www-form-urlencoded
+
+user=sinedied&currency=$&balance=50
+
+###
+
+GET http://localhost:5000/api/accounts/sinedied
+
+###
+
+DELETE http://localhost:5000/api/accounts/sinedied
+
+###
+
+POST http://localhost:5000/api/accounts/sinedied/transactions
+Content-Type: application/json
+
+{
+  "date": "2020-07-24T11:09:17.781Z",
+  "object": "Bought book",
+  "amount": -20
+}
+
+###
+
+DELETE http://localhost:5000/api/accounts/sinedied/transactions/8825ff3e8331277911174fd1b73ff889
diff --git a/bank/api/package-lock.json b/bank/api/package-lock.json
new file mode 100644
index 00000000..c624c658
--- /dev/null
+++ b/bank/api/package-lock.json
@@ -0,0 +1,1313 @@
+{
+  "name": "squirrel-banking-api",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+      "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.10.4"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
+      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+      "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.10.4",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        }
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+      "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
+      "dev": true
+    },
+    "ajv": {
+      "version": "6.12.3",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
+      "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "astral-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+      "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "debug": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+      "dev": true,
+      "requires": {
+        "ms": "^2.1.1"
+      }
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "eslint": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.5.0.tgz",
+      "integrity": "sha512-vlUP10xse9sWt9SGRtcr1LAC67BENcQMFeV+w5EvLEoFe3xJ8cF1Skd0msziRx/VMC+72B4DxreCE+OR12OA6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "eslint-scope": "^5.1.0",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^1.3.0",
+        "espree": "^7.2.0",
+        "esquery": "^1.2.0",
+        "esutils": "^2.0.2",
+        "file-entry-cache": "^5.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.0.0",
+        "globals": "^12.1.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash": "^4.17.19",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^5.2.3",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      }
+    },
+    "eslint-scope": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
+      "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true
+    },
+    "espree": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.2.0.tgz",
+      "integrity": "sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.3.1",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.3.0"
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "esquery": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
+      "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
+          "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
+          "dev": true
+        }
+      }
+    },
+    "esrecurse": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
+      "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^4.1.0"
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "file-entry-cache": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
+      "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^2.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "flat-cache": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
+      "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
+      "dev": true,
+      "requires": {
+        "flatted": "^2.0.0",
+        "rimraf": "2.6.3",
+        "write": "1.0.3"
+      }
+    },
+    "flatted": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
+      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
+      "dev": true
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "globals": {
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+      "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.8.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "ignore": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "dev": true
+    },
+    "import-fresh": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+      "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+      "dev": true
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
+    "prettier": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+      "dev": true
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "regexpp": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
+      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
+      "dev": true
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "semver": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+      "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+      "dev": true
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "slice-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "astral-regex": "^1.0.0",
+        "is-fullwidth-code-point": "^2.0.0"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "table": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
+      "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.10.2",
+        "lodash": "^4.17.14",
+        "slice-ansi": "^2.1.0",
+        "string-width": "^3.0.0"
+      }
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "v8-compile-cache": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
+      "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
+      "dev": true
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "write": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
+      "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^0.5.1"
+      }
+    }
+  }
+}
diff --git a/bank/api/package.json b/bank/api/package.json
new file mode 100644
index 00000000..0ed1df06
--- /dev/null
+++ b/bank/api/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "bank-api",
+  "version": "1.0.0",
+  "description": "Bank API",
+  "private": true,
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "eslint",
+    "format": "prettier --single-quote --write *.js"
+  },
+  "keywords": [],
+  "author": {
+    "name": "Yohan Lasorsa",
+    "url": "https://twitter.com/sinedied"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "eslint": "^7.5.0",
+    "prettier": "^2.0.5"
+  },
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
+    "express": "^4.17.1"
+  },
+  "engines": {
+    "node": ">=10"
+  }
+}
diff --git a/bank/api/server.js b/bank/api/server.js
new file mode 100644
index 00000000..7a369fb6
--- /dev/null
+++ b/bank/api/server.js
@@ -0,0 +1,197 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors')
+const crypto = require('crypto');
+const pkg = require('./package.json');
+
+// App constants
+const port = process.env.PORT || 5000;
+const apiPrefix = '/api';
+
+// Store data in-memory, not suited for production use!
+const db = {
+  test: {
+    user: 'test',
+    currency: '$',
+    description: `Test account`,
+    balance: 75,
+    transactions: [
+      { id: '1', date: '2020-10-01', object: 'Pocket money', amount: 50 },
+      { id: '2', date: '2020-10-03', object: 'Book', amount: -10 },
+      { id: '3', date: '2020-10-04', object: 'Sandwich', amount: -5 }
+    ],
+  }
+};
+
+// Create the Express app & setup middlewares
+const app = express();
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
+app.use(cors({ origin: /http:\/\/localhost/ }));
+app.options('*', cors());
+
+// ***************************************************************************
+
+// Configure routes
+const router = express.Router();
+
+// Get server infos
+router.get('/', (req, res) => {
+  return res.send(`${pkg.description} v${pkg.version}`);
+});
+
+// ----------------------------------------------
+
+// Create an account
+router.post('/accounts', (req, res) => {
+  // Check mandatory request parameters
+  if (!req.body.user || !req.body.currency) {
+    return res.status(400).json({ error: 'Missing parameters' });
+  }
+
+  // Check if account already exists
+  if (db[req.body.user]) {
+    return res.status(409).json({ error: 'User already exists' });
+  }
+
+  // Convert balance to number if needed
+  let balance = req.body.balance;
+  if (balance && typeof balance !== 'number') {
+    balance = parseFloat(balance);
+    if (isNaN(balance)) {
+      return res.status(400).json({ error: 'Balance must be a number' });  
+    }
+  }
+
+  // Create account
+  const account = {
+    user: req.body.user,
+    currency: req.body.currency,
+    description: req.body.description || `${req.body.user}'s budget`,
+    balance: balance || 0,
+    transactions: [],
+  };
+  db[req.body.user] = account;
+
+  return res.status(201).json(account);
+});
+
+// ----------------------------------------------
+
+// Get all data for the specified account
+router.get('/accounts/:user', (req, res) => {
+  const account = db[req.params.user];
+
+  // Check if account exists
+  if (!account) {
+    return res.status(404).json({ error: 'User does not exist' });
+  }
+
+  return res.json(account);
+});
+
+// ----------------------------------------------
+
+// Remove specified account
+router.delete('/accounts/:user', (req, res) => {
+  const account = db[req.params.user];
+
+  // Check if account exists
+  if (!account) {
+    return res.status(404).json({ error: 'User does not exist' });
+  }
+
+  // Removed account
+  delete db[req.params.user];
+
+  res.sendStatus(204);
+});
+
+// ----------------------------------------------
+
+// Add a transaction to a specific account
+router.post('/accounts/:user/transactions', (req, res) => {
+  const account = db[req.params.user];
+
+  // Check if account exists
+  if (!account) {
+    return res.status(404).json({ error: 'User does not exist' });
+  }
+
+  // Check mandatory requests parameters
+  if (!req.body.date || !req.body.object || !req.body.amount) {
+    return res.status(400).json({ error: 'Missing parameters' });
+  }
+
+  // Convert amount to number if needed
+  let amount = req.body.amount;
+  if (amount && typeof amount !== 'number') {
+    amount = parseFloat(amount);
+  }
+
+  // Check that amount is a valid number
+  if (amount && isNaN(amount)) {
+    return res.status(400).json({ error: 'Amount must be a number' });
+  }
+
+  // Generates an ID for the transaction
+  const id = crypto
+    .createHash('md5')
+    .update(req.body.date + req.body.object + req.body.amount)
+    .digest('hex');
+
+  // Check that transaction does not already exist
+  if (account.transactions.some((transaction) => transaction.id === id)) {
+    return res.status(409).json({ error: 'Transaction already exists' });
+  }
+
+  // Add transaction
+  const transaction = {
+    id,
+    date: req.body.date,
+    object: req.body.object,
+    amount,
+  };
+  account.transactions.push(transaction);
+
+  // Update balance
+  account.balance += transaction.amount;
+
+  return res.status(201).json(transaction);
+});
+
+// ----------------------------------------------
+
+// Remove specified transaction from account
+router.delete('/accounts/:user/transactions/:id', (req, res) => {
+  const account = db[req.params.user];
+
+  // Check if account exists
+  if (!account) {
+    return res.status(404).json({ error: 'User does not exist' });
+  }
+
+  const transactionIndex = account.transactions.findIndex(
+    (transaction) => transaction.id === req.params.id
+  );
+
+  // Check if transaction exists
+  if (transactionIndex === -1) {
+    return res.status(404).json({ error: 'Transaction does not exist' });
+  }
+
+  // Remove transaction
+  account.transactions.splice(transactionIndex, 1);
+
+  res.sendStatus(204);
+});
+
+// ***************************************************************************
+
+// Add 'api` prefix to all routes
+app.use(apiPrefix, router);
+
+// Start the server
+app.listen(port, () => {
+  console.log(`Server listening on port ${port}`);
+});
diff --git a/bank/api/translations/README.es.md b/bank/api/translations/README.es.md
new file mode 100644
index 00000000..1b00a5fe
--- /dev/null
+++ b/bank/api/translations/README.es.md
@@ -0,0 +1,32 @@
+# API bancaria
+
+> API bancaria construida con [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
+
+La API ya está creada para usted y no forma parte del ejercicio.
+
+Sin embargo, si está interesado en aprender cómo construir una API como esta, puede seguir esta serie de videos: https://aka.ms/NodeBeginner (los videos 17 a 21 cubren esta API exacta).
+
+También puede echar un vistazo a este tutorial interactivo: https://aka.ms/learn/express-api
+
+## Ejecutando el servidor
+
+Asegúrese de tener [Node.js](https://nodejs.org) instalado.
+
+1. Git clone este repositorio.
+2. Abra una terminal en la carpeta `api`, luego ejecute `npm install`.
+3. Ejecute `npm start`.
+
+El servidor debería comenzar a escuchar en el puerto `5000`.
+
+> Nota: todas las entradas se almacenan en la memoria y no se conservan, por lo que cuando se detiene el servidor, se pierden todos los datos.
+
+## API
+
+Ruta                                         | Descripción
+---------------------------------------------|------------------------------------
+GET    /api/                                 | Obtener información del servidor
+POST   /api/accounts/                        | Cree una cuenta, por ejemplo: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
+GET    /api/accounts/:user                   | Obtener todos los datos de la cuenta especificada
+DELETE /api/accounts/:user                   | Eliminar cuenta especificada
+POST   /api/accounts/:user/transactions      | Agregar una transacción, por ejemplo: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
+DELETE  /api/accounts/:user/transactions/:id | Eliminar transacción especificada
diff --git a/bank/images/screen1.png b/bank/images/screen1.png
new file mode 100644
index 00000000..2fa5de4a
Binary files /dev/null and b/bank/images/screen1.png differ
diff --git a/bank/images/screen2.png b/bank/images/screen2.png
new file mode 100644
index 00000000..fc2189bf
Binary files /dev/null and b/bank/images/screen2.png differ
diff --git a/bank/solution/README.md b/bank/solution/README.md
new file mode 100644
index 00000000..d6e280f3
--- /dev/null
+++ b/bank/solution/README.md
@@ -0,0 +1,13 @@
+# Bank app
+
+> Example solution for the bank app project, built with vanilla HTML5, CSS and JavaScript (no frameworks or libraries used).
+
+## Running the app
+
+First make sure you have the [API server](../api/README.md) running.
+
+Any web server can be used to run the app, but since you should have [Node.js](https://nodejs.org) installed anyway to run the API, you can:
+
+1. Git clone this repo.
+2. Open a terminal, then run `npx lite-server solution`. It will start a development web server on port `3000`
+3. Open `http://localhost:3000` in a browser to run the app.
diff --git a/bank/solution/app.js b/bank/solution/app.js
new file mode 100644
index 00000000..34dd7678
--- /dev/null
+++ b/bank/solution/app.js
@@ -0,0 +1,271 @@
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const serverUrl = 'http://localhost:5000/api';
+const storageKey = 'savedState';
+
+// ---------------------------------------------------------------------------
+// Router
+// ---------------------------------------------------------------------------
+
+const routes = {
+  '/dashboard': { title: 'My Account', templateId: 'dashboard', init: refresh },
+  '/login': { title: 'Login', templateId: 'login' }
+};
+
+function navigate(path) {
+  window.history.pushState({}, path, window.location.origin + path);
+  updateRoute();
+}
+
+function updateRoute() {
+  const path = window.location.pathname;
+  const route = routes[path];
+
+  if (!route) {
+    return navigate('/dashboard');
+  }
+
+  const template = document.getElementById(route.templateId);
+  const view = template.content.cloneNode(true);
+  const app = document.getElementById('app');
+  app.innerHTML = '';
+  app.appendChild(view);
+  
+  if (typeof route.init === 'function') {
+    route.init();
+  }
+
+  document.title = route.title;
+}
+
+// ---------------------------------------------------------------------------
+// API interactions
+// ---------------------------------------------------------------------------
+
+async function sendRequest(api, method, body) {
+  try {
+    const response = await fetch(serverUrl + api, {
+      method: method || 'GET',
+      headers: body ? { 'Content-Type': 'application/json' } : undefined,
+      body
+    });
+    return await response.json();
+  } catch (error) {
+    return { error: error.message || 'Unknown error' };
+  }
+}
+
+async function getAccount(user) {
+  return sendRequest('/accounts/' + encodeURIComponent(user));
+}
+
+async function createAccount(account) {
+  return sendRequest('/accounts', 'POST', account);
+}
+
+async function createTransaction(user, transaction) {
+  return sendRequest('/accounts/' + user + '/transactions', 'POST', transaction);
+}
+
+// ---------------------------------------------------------------------------
+// Global state
+// ---------------------------------------------------------------------------
+
+let state = {
+  user: null,
+  account: null
+};
+
+function updateState(newState) {
+  state = newState;
+  localStorage.setItem(storageKey, JSON.stringify(state));
+}
+
+// ---------------------------------------------------------------------------
+// Login/register
+// ---------------------------------------------------------------------------
+
+async function login() {
+  const loginForm = document.getElementById('loginForm')
+  const user = loginForm.user.value;
+  const data = await getAccount(user);
+
+  if (data.error) {
+    return updateElement('loginError', data.error);
+  }
+
+  const newState = {
+    ...state,
+    user: data.user
+  };
+  updateState(newState);
+
+  navigate('/dashboard');
+}
+
+async function register() {
+  const registerForm = document.getElementById('registerForm');
+  const formData = new FormData(registerForm);
+  const data = Object.fromEntries(formData);
+  const jsonData = JSON.stringify(data);
+  const result = await createAccount(jsonData);
+
+  if (result.error) {
+    return updateElement('registerError', result.error);
+  }
+
+  const newState = {
+    ...state,
+    user: result.user
+  };
+  updateState(newState);
+
+  navigate('/dashboard');
+}
+
+// ---------------------------------------------------------------------------
+// Dashboard
+// ---------------------------------------------------------------------------
+
+async function updateAccountData() {
+  const user = state.user;
+
+  if (!user) {
+    return logout();
+  }
+
+  const data = await getAccount(user);
+
+  if (data.error) {
+    if (data.error === 'User does not exist') {
+      return logout();
+    }
+    return updateElement('dashboardError', data.error);
+  }
+
+  const newState = {
+    ...state,
+    account: data
+  };
+  updateState(newState);
+}
+
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+
+function updateDashboard() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  updateElement('description', account.description);
+  updateElement('balance', account.balance.toFixed(2));
+  updateElement('currency', account.currency);
+
+  // Update transactions
+  const transactionsRows = document.createDocumentFragment();
+  for (const transaction of account.transactions) {
+    const transactionRow = createTransactionRow(transaction);
+    transactionsRows.appendChild(transactionRow);
+  }
+  updateElement('transactions', transactionsRows);
+}
+
+function createTransactionRow(transaction) {
+  const template = document.getElementById('transaction');
+  const transactionRow = template.content.cloneNode(true);
+  const tr = transactionRow.querySelector('tr');
+  tr.children[0].textContent = transaction.date;
+  tr.children[1].textContent = transaction.object;
+  tr.children[2].textContent = transaction.amount.toFixed(2);
+  return transactionRow;
+}
+
+function addTransaction() {
+  const dialog = document.getElementById('transactionDialog');
+  dialog.classList.add('show');
+
+  // Reset form
+  const transactionForm = document.getElementById('transactionForm');
+  transactionForm.reset();
+
+  // Set date to today
+  transactionForm.date.valueAsDate = new Date();
+}
+
+async function confirmTransaction() {
+  const dialog = document.getElementById('transactionDialog');
+  dialog.classList.remove('show');
+
+  const transactionForm = document.getElementById('transactionForm');
+
+  const formData = new FormData(transactionForm);
+  const jsonData = JSON.stringify(Object.fromEntries(formData));
+  const data = await createTransaction(state.user, jsonData);
+
+  if (data.error) {
+    return updateElement('transactionError', data.error);
+  }
+
+  // Update local state with new transaction
+  const newState = {
+    ...state,
+    account: {
+      ...state.account,
+      balance: state.account.balance + data.amount,
+      transactions: [...state.account.transactions, data]
+    }
+  }
+  updateState(newState);
+
+  // Update display
+  updateDashboard();
+}
+
+async function cancelTransaction() {
+  const dialog = document.getElementById('transactionDialog');
+  dialog.classList.remove('show');
+}
+
+function logout() {
+  const newState = {
+    user: null,
+    account: null
+  };
+  updateState(newState);
+
+  navigate('/login');
+}
+
+// ---------------------------------------------------------------------------
+// Utils
+// ---------------------------------------------------------------------------
+
+function updateElement(id, textOrNode) {
+  const element = document.getElementById(id);
+  element.textContent = ''; // Removes all children
+  element.append(textOrNode);
+}
+
+// ---------------------------------------------------------------------------
+// Init
+// ---------------------------------------------------------------------------
+
+function init() {
+  // Restore state
+  const savedState = localStorage.getItem(storageKey);
+  if (savedState) {
+    updateState(JSON.parse(savedState));
+  }
+
+  // Update route for browser back/next buttons
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
diff --git a/bank/solution/index.html b/bank/solution/index.html
new file mode 100644
index 00000000..9a7567c2
--- /dev/null
+++ b/bank/solution/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Squirrel Banking</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="app.js" defer></script>
+</head>
+<body>
+  <!-- Placeholder where we will insert our app HTML based on route -->
+  <div id="app">Loading...</div>
+
+  <!-- Login page template -->
+  <template id="login">
+    <section class="login-page">
+      <div class="login-container">
+        <div class="login-title text-center">
+          <span class="hide-xs">Squirrel</span>
+          <img class="login-logo" src="logo.svg" alt="Squirrel Banking Logo">
+          <span class="hide-xs">Banking</span>
+        </div>
+        <div class="login-content">
+          <h2 class="text-center">Login</h2>
+          <form id="loginForm" action="javascript:login()">
+            <label for="user">Username</label>
+            <input name="user" type="text" maxlength="20" required>
+            <div id="loginError" class="error"></div>
+            <button>Login</button>
+          </form>
+          <p class="login-separator text-center"><span>OR</span></p>
+          <h2 class="text-center">Register</h2>
+          <form id="registerForm" action="javascript:register()">
+            <label for="user">Username</label>
+            <input name="user" type="text" maxlength="20" required>
+            <label for="currency">Currency</label>
+            <input name="currency" type="text" maxlength="5" value="$" required>
+            <label for="description">Description</label>
+            <input name="description" type="text" maxlength="100">
+            <label for="balance">Current balance</label>
+            <input name="balance" type="number" value="0">
+            <div id="registerError" class="error"></div>
+            <button>Register</button>
+          </form>
+        </div>
+      </div>
+    </section>
+  </template>
+
+  <!-- Dashboard page template -->
+  <template id="dashboard">
+    <section class="dashboard-page">
+      <header class="dashboard-header">
+        <img class="dashboard-logo" src="logo.svg" alt="Squirrel Banking Logo">
+        <span class="dashboard-title hide-xs">Squirrel Banking</span>
+        <button onclick="logout()">Logout</button>
+      </header>
+      <div class="balance">
+        <div>Balance</div>
+        <span id="balance"></span>
+        <span id="currency"></span>
+      </div>
+      <div class="dashboard-content">
+        <div class="transactions-title">
+          <div id="description" aria-label="Account description"></div>
+          <button onclick="addTransaction()">Add transaction</button>
+        </div>
+        <table class="transactions-table" aria-label="Transactions">
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Object</th>
+              <th>Amount</th>
+            </tr>
+          </thead>
+          <tbody id="transactions"></tbody>
+        </table>
+        <p id="dashboardError" class="error"></p>
+      </div>
+    </section>
+    <section id="transactionDialog" class="dialog">
+      <div class="dialog-content">
+        <h2 class="text-center">Add transaction</h2>
+        <form id="transactionForm" action="javascript:void(0)">
+          <label for="date">Date</label> 
+          <input name="date" type="date" required>
+          <label for="object">Object</label> 
+          <input name="object" type="text" maxlength="50" required>
+          <label for="amount">Amount (use negative value for debit)</label> 
+          <input name="amount" type="number" value="0" step="any" required>
+          <div id="transactionError" class="error"></div>
+          <div class="dialog-buttons">
+            <button class="button-alt" formaction="javascript:cancelTransaction()" formnovalidate>Cancel</button>
+            <button formaction="javascript:confirmTransaction()">OK</button>
+          </div>
+        </form>
+      </div>
+    </section>
+  </template>
+
+  <!-- Transaction row template -->
+  <template id="transaction">
+    <tr>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+  </template>
+</body>
+</html>
\ No newline at end of file
diff --git a/bank/solution/logo.svg b/bank/solution/logo.svg
new file mode 100644
index 00000000..9339e1bb
--- /dev/null
+++ b/bank/solution/logo.svg
@@ -0,0 +1 @@
+<svg id="squirrel" data-name="squirrel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296.2 479.27"><defs><style>.cls-1{fill: #fff;}</style></defs><path class="cls-1" d="M216.54,17c-30.06,93.06,63.25,82.67,127,133.73,48.38,38.78,92.87,118,29,234.83-11.12-29-24.49-75.4-37.9-138.2-6.71-31.52-11.1-92.35-12.16-91.7-6.88,4.25-21,37-21,37s-2.43-.6-13.36-2.83S256,187,256,187s-21.09.6-32,2.83-13.36,2.83-13.36,2.83-14.16-32.78-21-37c-1.06-.65-5.45,60.18-12.17,91.7-6.93,32.5-15.7,65.2-23.28,91.19C79.26,248.12,92.5,102.73,216.54,17Zm85.82,254.1c3.84,0,7-6.14,7-13.71s-3.12-13.71-7-13.71-6.95,6.14-6.95,13.71,3.12,13.71,6.95,13.71Zm-85.71-13.71c0-7.57-3.12-13.71-7-13.71s-6.95,6.14-6.95,13.71,3.11,13.71,6.95,13.71,7-6.14,7-13.71Zm59,23.45c0-6.37-8.78-11.53-19.62-11.53s-19.62,5.16-19.62,11.53c0,5.88,7.52,10.74,17.24,11.43v8a2.39,2.39,0,0,0,2.38,2.39h0a2.39,2.39,0,0,0,2.38-2.39v-8c9.71-.69,17.24-5.55,17.24-11.43Zm-7.72,34.51c-2.6-.18-6.08,4.76-6.93,8.07s-4,26.07-4,26.07-22.8-5.74-38.06-6-23,5.77-28.09,13.74-2.22,18.75-.44,23a21.08,21.08,0,0,0,3.63,6.14,88.82,88.82,0,0,0-5,22.13c7.8,10.18,33.56,26,33.56,26s6.54,3.47,5.38,9.55-18,13.91-30.55,11.74c-.53-.09-1.09-.21-1.68-.35C206.45,478.28,227,496.27,227,496.27s40.86-2.08,64-21.89a100.57,100.57,0,0,0,8.1-7.77c-7-2.86-13.59-5.9-17.28-8.48-10.47-7.29-16.92-24.69-13.48-29.82s10.54-3,10.54-3,29.43,6.88,42.13,5.11a21.1,21.1,0,0,0,6.65-2.57c4-2.22,13-8.87,13.88-18.31S340.1,390.61,328,381.35s-33.59-18.88-33.59-18.88,11.6-19.83,13-23,1.7-9.17-.44-10.63-19.05-8.05-19.05-8.05S270.52,315.53,267.93,315.35Z" transform="translate(-108.03 -17)"/></svg>
\ No newline at end of file
diff --git a/bank/solution/styles.css b/bank/solution/styles.css
new file mode 100644
index 00000000..38c760dd
--- /dev/null
+++ b/bank/solution/styles.css
@@ -0,0 +1,351 @@
+:root {
+  /* Colors */
+  --primary: #0091ea;
+  --primary-light: #7bbde6;
+  --accent: #546e7a;
+  --grey: #445;
+  --error: #f52;
+  --background: #f5f5f6;
+  --background-accent: #cfe5f2;
+  --white: #fff;
+  --border: #99a;
+  /* Sizes */
+  --radius: 10px;
+  --space-xs: 5px;
+  --space-sm: 10px;
+  --space-md: 20px;
+  --space-xl: 40px;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Micro reset */
+/* ------------------------------------------------------------------------ */
+
+* {
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+/* ------------------------------------------------------------------------ */
+/* General styles */
+/* ------------------------------------------------------------------------ */
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+}
+
+h2 {
+  color: var(--primary);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1.5rem;
+  margin: var(--space-md) 0;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  margin: var(--space-sm) var(--space-md);
+}
+
+input {
+  margin-top: var(--space-xs);
+  margin-bottom: var(--space-sm);
+  height: 40px;
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+input:focus {
+  border-color: var(--primary);
+  outline: 0;
+}
+
+label {
+  color: var(--grey);
+  text-transform: uppercase;
+  font-size: 80%;
+}
+
+button {
+  font-weight: bold;
+  background-color: var(--primary);
+  color: var(--white);
+  height: 40px;
+  padding: var(--space-xs);
+  border: 0;
+  border-radius: var(--radius);
+  text-transform: uppercase;
+  min-width: 100px;
+  margin: var(--space-sm) 0;
+}
+
+.button-alt {
+  background-color: transparent;
+  color: var(--primary);
+}
+
+button:hover {
+  filter: brightness(115%);
+  cursor: pointer;
+}
+
+button:focus {
+  outline: none;
+  border: 2px solid var(--grey);
+}
+
+.error {
+  color: var(--error);
+  margin: var(--space-xs) 0;
+}
+
+.error:empty {
+  display: none;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Login page */
+/* ------------------------------------------------------------------------ */
+
+.login-title {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--white);
+  margin: var(--space-md);
+}
+
+.login-logo {
+  height: 80px;
+  vertical-align: middle;
+}
+
+.login-page {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(var(--primary), var(--primary-light));
+}
+
+.login-container {
+  flex: auto;
+  max-width: 480px;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.login-content {
+  background-color: var(--background);
+  padding: var(--space-sm);
+}
+
+.login-separator {
+  position: relative;
+  top: 0.5em;
+  border-top: 1px solid var(--border);
+  opacity: 0.6;
+  margin: var(--space-md) 0;
+}
+
+.login-separator > span {
+  position: relative;
+  top: -0.5em;
+  background-color: var(--background);
+  padding: var(--space-sm);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Dashboard page */
+/* ------------------------------------------------------------------------ */
+
+.dashboard-page {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+.dashboard-header {
+  background-color: var(--grey);
+  padding: 0 var(--space-sm)
+}
+
+.dashboard-header button {
+  float: right;
+  border: 1px solid;
+  background-color: transparent;
+}
+
+.dashboard-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--white);
+  vertical-align: middle;
+  margin: 0 var(--space-sm)
+}
+
+.dashboard-logo {
+  height: 60px;
+  vertical-align: middle;
+  padding: var(--space-xs);
+}
+
+.balance {
+  background: radial-gradient(circle at center, var(--primary), var(--primary-light));
+  text-align: center;
+}
+
+.balance > div {
+  color: var(--white);
+  padding-top: var(--space-xs);
+  text-transform: uppercase;
+}
+
+.balance > span {
+  color: var(--white);
+  font-size: 3rem;
+}
+
+.transactions-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--space-sm);
+  color: var(--accent);
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.transactions-title > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.transactions-table {
+  width: 100%;
+  font-size: 1.2rem;
+  padding: var(--space-sm);
+  margin: 0;
+  border-spacing: 0;
+  background-color: var(--background);
+}
+
+.transactions-table thead th {
+  border-bottom: 1px solid var(--border);
+}
+
+.transactions-table tr:nth-child(even) {
+  background-color: var(--background-accent);
+}
+
+.transactions-table td,
+.transactions-table th {
+  padding: var(--space-xs) var(--space-sm);
+  text-align: left;
+}
+
+.transactions-table td:first-child,
+.transactions-table th:first-child {
+  /* Make first column use the minimum width */
+  width: 1%;
+  white-space: nowrap;
+}
+
+.transactions-table td:last-child,
+.transactions-table th:last-child {
+  text-align: right;
+}
+
+.dialog {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.4);
+  animation: slideFromTop 0.3s ease-in-out;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.dialog.show {
+  display: flex;
+}
+
+@keyframes slideFromTop {
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+}
+
+.dialog-content {
+  flex: auto;
+  background-color: var(--white);
+  max-width: 480px;
+  max-height: 100%;
+  padding: var(--space-sm);
+}
+
+.dialog-buttons {
+  text-align: right;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Utilities */
+/* ------------------------------------------------------------------------ */
+
+.text-center {
+  text-align: center;
+}
+
+.hide-xs {
+  display: none;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Responsive adaptations */
+/* ------------------------------------------------------------------------ */
+
+@media only screen and (min-width: 480px) {
+  .hide-xs {
+    display: initial;
+  }
+
+  .login-content,
+  .dialog-content {
+    border-radius: var(--radius);
+  }
+
+  .dialog-content {
+    margin-top: var(--space-xl);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .transactions-table {
+    border-radius: var(--radius);
+  }
+
+  .dashboard-content {
+    width: 100%;
+    max-width: 768px;
+    align-self: center;
+  }
+}
diff --git a/bank/solution/translations/README.es.md b/bank/solution/translations/README.es.md
new file mode 100644
index 00000000..bd93a706
--- /dev/null
+++ b/bank/solution/translations/README.es.md
@@ -0,0 +1,13 @@
+# Aplicación bancaria
+
+> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin marcos ni bibliotecas).
+
+## Ejecutando la aplicación
+
+Primero asegúrese de tener el [servidor API](../api/README.md) en ejecución.
+
+Se puede usar cualquier servidor web para ejecutar la aplicación, pero dado que debe tener [Node.js]https://nodejs.org) instalado de todos modos para ejecutar la API, puede:
+
+1. Git clone este repositorio.
+2. Abra una terminal, luego ejecute `npx lite-server solution`. Iniciará un servidor web de desarrollo en el puerto `3000`
+3. Abra `http://localhost: 3000` en un navegador para ejecutar la aplicación.
\ No newline at end of file
diff --git a/bank/translations/README.es.md b/bank/translations/README.es.md
new file mode 100644
index 00000000..29b95c70
--- /dev/null
+++ b/bank/translations/README.es.md
@@ -0,0 +1,16 @@
+# :dollar: Construir un banco
+
+En este proyecto, aprenderá a construir un banco ficticio. Estas lecciones incluyen instrucciones sobre cómo diseñar un sitio web y proporcionar rutas, crear formularios, administrar el estado y obtener datos de una API desde la cual puede obtener los datos del banco.
+
+<img src="screen1.png" width="50%" height="auto"><img src="screen2.png" width="50%" height="auto">
+
+## Lecciones
+
+1. [Rutas y plantillas HTML en una aplicación web](template-route/README.md)
+2. [Cree un formulario de inicio de sesión y registro](forms/README.md)
+3. [Conceptos de gestión de estado](state-management/README.md)
+4. [Métodos de obtención y uso de datos](data/README.md)
+
+### Credits
+
+Estas lecciones fueron escritas con :hearts: por [Yohan Lasorsa](https://twitter.com/sinedied)
diff --git a/browser-extension/.DS_Store b/browser-extension/.DS_Store
new file mode 100644
index 00000000..5008ddfc
Binary files /dev/null and b/browser-extension/.DS_Store differ
diff --git a/browser-extension/1-about-browsers/.github/post-lecture-quiz.md b/browser-extension/1-about-browsers/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..7f9dd262
--- /dev/null
+++ b/browser-extension/1-about-browsers/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz by checking one answer per question.*
+
+1. The World Wide Web was invented by
+
+- [ ] Tom Barnard-Loft
+- [ ] Tim Berners-Lee
+- [ ] Trish Berth-Pool
+
+2. The first browser was called
+
+- [ ] World Wide Web
+- [ ] Mozilla
+- [ ] Netscape
+
+3. Browsers can store a user's browsing history
+
+- [ ] true
+- [ ] false
diff --git a/browser-extension/1-about-browsers/.github/pre-lecture-quiz.md b/browser-extension/1-about-browsers/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..49e3bb68
--- /dev/null
+++ b/browser-extension/1-about-browsers/.github/pre-lecture-quiz.md
@@ -0,0 +1,20 @@
+*A warm-up quiz about browsers*
+
+Complete this quiz in class
+
+1. You can get browser extensions from
+
+- [ ] WalMart
+- [ ] The browser's extension store
+- [ ] The App store
+
+2. NPM stands for
+
+- [ ] Node Package Manager
+- [ ] Netscape Primary Mix
+- [ ] Natural Processing Manager
+
+3. Your browser can serve web pages both securely and insecurely 
+
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/browser-extension/1-about-browsers/LICENSE b/browser-extension/1-about-browsers/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/browser-extension/1-about-browsers/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/browser-extension/1-about-browsers/README.md b/browser-extension/1-about-browsers/README.md
new file mode 100644
index 00000000..b83bdad4
--- /dev/null
+++ b/browser-extension/1-about-browsers/README.md
@@ -0,0 +1,164 @@
+# Browser Extension Project Part 1: All about Browsers
+
+![Browser sketchnote](images/sketchnote.jpg)
+> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+Browser extensions add additional functionality to a browser. But before you build one, you should learn a little about how browsers do their work.
+
+### About the browser:
+
+In this series of lessons, you'll learn how to build a browser extension that will work on Chrome, Firefox and Edge browsers. In this part, you'll discover how browsers work and scaffold out the elements of the browser extension.
+
+But what is a browser exactly? It is a software application that allows an end user to access content from a server and display it on web pages.
+
+✅ A little history: the first browser was called 'WorldWideWeb' and was created by Sir Tim Berners-Lee in 1990.
+
+![early browsers](images/earlybrowsers.jpg)
+> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+When a user connected to the internet using a URL (Uniform Resource Locator) address, usually using Hypertext Transfer Protocol via an `http` or `https` address, the browser communicates with a web server and fetches a web page.
+
+At this point, the browser's rendering engine displays it on the user's device, which might be a mobile phone, desktop, or laptop.
+
+Browsers also have the ability to cache content so that it doesn't have to be retrieved from the server every time. They can record the history of a user's browsing activity, store 'cookies', which are small bits of data that contain information used to store a user's activity, and more. 
+
+A really important thing to remember about browsers is that they are not all the same! Each browser has its strengths and weaknesses, and a professional web developer needs to understand how to make web pages perform well cross-browser. This includes handling small viewports such as a mobile phone's, as well as a user who is offline.
+
+A really useful website that you probably should bookmark in whatever browser you prefer to use is [caniuse.com](https://www.caniuse.com). When you are building web pages, it's very helpful to use caniuse's lists of supported technologies so that you can best support your users.
+
+✅ How can you tell what browsers are most popular with your web site's user base? Check your analytics - you can install various analytics packages as part of your web development process, and they will tell you what browsers are most used by the various popular browsers.
+
+## Browser extensions
+
+Why would you want to build a browser extension? It's a handy thing to attach to your browser when you need quick access to tasks that you tend to repeat. For example, if you find yourself needing to check colors on the various web pages that you interact with, you might install a color-picker browser extension. If you have trouble remembering passwords, you might use a password-management browser extension. 
+
+Browser extensions are fun to develop, too. They tend to manage a finite number of tasks that they perform well.
+
+✅ What are your favorite browser extensions? What tasks do they perform?
+
+### Installing extensions
+
+Before you start building, take a look at the process of building and deploying a browser extension. While each browser varies a bit in how they manage this task, the process is similar on Chrome and Firefox to this example on Edge:
+
+![install a browser extension](images/install-on-edge.png)
+
+In essence, the process will be:
+
+- build your extension using `npm build` 
+- navigate in the browser to the extensions pane using the `...` icon on the top right
+- if it's a new installation, choose `load unpacked` to upload a fresh extension from its build folder (in our case it is `/dist`) 
+- or, click `reload` if you are reloading the already-installed extension
+
+✅ These instructions pertain to extensions you build yourself; to install extensions that have been released to the browser extension store associated to each browser, you should navigate to those [stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) and install the extension of your choice.
+
+### Get Started
+
+You're going to build a browser extension that displays your region's carbon footprint, showing your region's energy usage and the source of the energy. The extension will have a form that collects an API key so that you can access
+CO2 Signal's API.
+
+**You need:**
+
+- [an API key](https://www.co2signal.com/); enter your email in the box on this page and one will be sent to you
+- the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
+- the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
+- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
+
+✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/)
+
+Take a minute to look through the codebase:
+
+dist
+    -|manifest.json (defaults set here)
+    -|index.html (front-end HTML markup here)
+    -|background.js (background JS here)
+    -|main.js (built JS)
+src
+    -|index.js (your JS code goes here)
+
+✅ Once you have your API key and Region code handy, store those somewhere in a note for future use.
+
+### Build the HTML for the extension
+
+This extension has two views. One to gather the API key and region code:
+
+![extension form](images/1.png)
+
+And the second to display the region's carbon usage:
+
+![carbon usage](images/2.png)
+
+Let's start by building the HTML for the form and styling it with CSS.
+
+In the `/dist` folder, you will build a form and a result area. In the `index.html` file, populate the delineated form area:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+	<label>Region Name</label>
+		<input type="text" required class="region-name" />
+	</div>
+	<div>
+		<label>Your API Key from tmrow</label>
+		<input type="text" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+This is the form where your saved information will be input and saved to local storage.
+
+Next, create the results area; under the final form tag, add some divs:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+At this point, you can try a build. Make sure to install the package dependencies of this extension:
+
+```
+npm install
+```
+
+This command will use npm, the Node Package Manager, to install webpack for your extension's build process. Webpack is a bundler that handles compiling code. You can see the output of this process by looking in `/dist/main.js` - you see the code has been bundled.
+
+For now, the extension should build and, if you deploy it into Edge as an extension, you'll see a form neatly displayed.
+
+Congratulations, you've taken the first steps towards building a browser extension. In subsequent lessons, you'll make it more functional and useful.
+
+---
+
+## 🚀 Challenge
+
+Take a look at a browser extension store and install one to your browser. You can examine its files in interesting ways. What do you discover?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+In this lesson you learned a little about the history of the web browser; take this opportunity to learn about how the inventors of the World Wide Web envisioned its use by reading more about its history. Some useful sites include:
+
+[The History of Web Browsers](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
+
+[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Assignment 
+
+[Restyle your extension](assignment.md)
+
diff --git a/browser-extension/1-about-browsers/assignment.md b/browser-extension/1-about-browsers/assignment.md
new file mode 100644
index 00000000..62d1edff
--- /dev/null
+++ b/browser-extension/1-about-browsers/assignment.md
@@ -0,0 +1,11 @@
+# Restyle your Extension
+
+## Instructions
+
+The codebase for this extension comes complete with styles, but you don't have to use them; make your extension your own by restyling it by editing its css file.
+
+## Rubric
+
+| Criteria | Exemplary                                    | Adequate              | Needs Improvement |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+|          | Code is submitted with functional new styles | Styling is incomplete | Styles are buggy  |
\ No newline at end of file
diff --git a/browser-extension/1-about-browsers/images/1.png b/browser-extension/1-about-browsers/images/1.png
new file mode 100644
index 00000000..550722b6
Binary files /dev/null and b/browser-extension/1-about-browsers/images/1.png differ
diff --git a/browser-extension/1-about-browsers/images/2.png b/browser-extension/1-about-browsers/images/2.png
new file mode 100644
index 00000000..f521b1d2
Binary files /dev/null and b/browser-extension/1-about-browsers/images/2.png differ
diff --git a/browser-extension/1-about-browsers/images/earlybrowsers.jpg b/browser-extension/1-about-browsers/images/earlybrowsers.jpg
new file mode 100644
index 00000000..798dd548
Binary files /dev/null and b/browser-extension/1-about-browsers/images/earlybrowsers.jpg differ
diff --git a/browser-extension/1-about-browsers/images/install-on-edge.png b/browser-extension/1-about-browsers/images/install-on-edge.png
new file mode 100644
index 00000000..965f6f82
Binary files /dev/null and b/browser-extension/1-about-browsers/images/install-on-edge.png differ
diff --git a/browser-extension/1-about-browsers/images/sketchnote.jpg b/browser-extension/1-about-browsers/images/sketchnote.jpg
new file mode 100644
index 00000000..7394f457
Binary files /dev/null and b/browser-extension/1-about-browsers/images/sketchnote.jpg differ
diff --git a/browser-extension/1-about-browsers/translations/README.es.md b/browser-extension/1-about-browsers/translations/README.es.md
new file mode 100644
index 00000000..a0293a6d
--- /dev/null
+++ b/browser-extension/1-about-browsers/translations/README.es.md
@@ -0,0 +1,161 @@
+# Proyecto de extensión del navegador Parte 1: Todo sobre los navegadores
+
+![Browser sketchnote](images/sketchnote.jpg)
+> Sketchnote de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+Las extensiones de navegador agregan funcionalidad adicional a un navegador. Pero antes de crear uno, debe aprender un poco sobre cómo funcionan los navegadores.
+
+### Acerca del navegador:
+
+En esta serie de lecciones, aprenderá a crear una extensión de navegador que funcione en los navegadores Chrome, Firefox y Edge. En esta parte, descubrirá cómo funcionan los navegadores y distribuirá los elementos de la extensión del navegador.
+
+Pero, ¿qué es exactamente un navegador? Es una aplicación de software que permite al usuario final acceder al contenido de un servidor y mostrarlo en páginas web.
+
+✅ Un poco de historia: el primer navegador se llamó 'WorldWideWeb' y fue creado por Sir Tim Berners-Lee en 1990.
+
+! [navegadores iniciales](images / earlybrowsers.jpg)
+> Algunos de los primeros navegadores, a través de [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Cuando un usuario se conecta a Internet usando una dirección URL (Localizador uniforme de recursos), generalmente usando el Protocolo de transferencia de hipertexto a través de una dirección `http` o` https`, el navegador se comunica con un servidor web y busca una página web.
+
+En este punto, el motor de renderizado del navegador lo muestra en el dispositivo del usuario, que puede ser un teléfono móvil, una computadora de escritorio o una computadora portátil.
+
+Los navegadores también tienen la capacidad de almacenar en caché el contenido para que no sea necesario recuperarlo del servidor cada vez. Pueden registrar el historial de la actividad de navegación de un usuario, almacenar 'cookies', que son pequeños fragmentos de datos que contienen información que se utiliza para almacenar la actividad de un usuario, y más.
+
+Una cosa realmente importante para recordar acerca de los navegadores es que no todos son iguales. Cada navegador tiene sus fortalezas y debilidades, y un desarrollador web profesional debe comprender cómo hacer que las páginas web funcionen bien en todos los navegadores. Esto incluye el manejo de pequeñas ventanas gráficas, como las de un teléfono móvil, así como de un usuario sin conexión.
+
+Un sitio web realmente útil que probablemente debería marcar en cualquier navegador que prefiera usar es [caniuse.com](https://www.caniuse.com). Cuando está creando páginas web, es muy útil utilizar las listas de tecnologías compatibles de caniuse para que pueda ayudar mejor a sus usuarios.
+
+✅ ¿Cómo puede saber qué navegadores son los más populares entre la base de usuarios de su sitio web? Verifique sus análisis: puede instalar varios paquetes de análisis como parte de su proceso de desarrollo web, y le dirán qué navegadores son los más utilizados por los diversos navegadores populares.
+
+## Extensiones de navegador
+
+¿Por qué querrías crear una extensión de navegador? Es muy útil adjuntarlo a su navegador cuando necesita acceso rápido a tareas que tiende a repetir. Por ejemplo, si necesita comprobar los colores en las distintas páginas web con las que interactúa, puede instalar una extensión de navegador de selector de color. Si tiene problemas para recordar las contraseñas, puede utilizar una extensión de navegador de administración de contraseñas.
+
+Las extensiones de navegador también son divertidas de desarrollar. Suelen gestionar un número finito de tareas que realizan bien.
+
+✅ ¿Cuáles son sus extensiones de navegador favoritas? ¿Qué tareas realizan?
+
+### Instalando extensiones
+
+Antes de empezar a crear, observe el proceso de creación e implementación de una extensión de navegador. Si bien cada navegador varía un poco en la forma en que administran esta tarea, el proceso es similar en Chrome y Firefox a este ejemplo en Edge:
+
+![instalar una extensión de navegador](images/install-on-edge.png)
+
+En esencia, el proceso será:
+
+- construye tu extensión usando `npm build`
+- navegue en el navegador hasta el panel de extensiones usando el icono `...` en la parte superior derecha
+- si se trata de una nueva instalación, elija `load unpacked` para cargar una nueva extensión desde su carpeta de compilación (en nuestro caso es `/ dist`)
+- o haga clic en `recargar` si está recargando la extensión ya instalada
+
+✅ Estas instrucciones pertenecen a extensiones que usted mismo construye; para instalar extensiones que se han lanzado a la tienda de extensiones del navegador asociada a cada navegador, debe navegar a esas [tiendas](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) e instalar la extensión de tu elección.
+
+
+### Empezar
+
+Vas a crear una extensión de navegador que muestre la huella de carbono de tu región, mostrando el uso de energía de tu región y la fuente de energía. La extensión tendrá un formulario que recopila una clave API para que pueda acceder
+API de CO2 Signal.
+
+**Necesitas:**
+
+- [una clave API](https://www.co2signal.com/); ingrese su correo electrónico en el cuadro de esta página y se le enviará uno
+- el [código de su región](http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, Yo uso 'US-NEISO').
+- el [código de inicio](../ inicio). Descargue la carpeta `start`; completará el código en esta carpeta.
+- [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web
+
+✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/)
+
+Tómate un minuto para revisar el código base:
+
+dist
+     - | manifest.json (los valores predeterminados se establecen aquí)
+     - | index.html (marcado HTML de front-end aquí)
+     - | background.js (JS de fondo aquí)
+     - | main.js (JS construido)
+src
+     - | index.js (su código JS va aquí)
+
+✅ Una vez que tenga a mano su clave API y el código de región, guárdelos en algún lugar en una nota para uso futuro.
+
+### Construye el HTML para la extensión
+
+Esta extensión tiene dos vistas. Uno para recopilar la clave API y el código de región:
+
+![extension form](1.png)
+
+Y el segundo para mostrar el uso de carbono de la región:
+
+![carbon usage](2.png)
+
+Comencemos por construir el HTML para el formulario y darle estilo con CSS.
+
+En la carpeta `/dist`, creará un formulario y un área de resultados. En el archivo `index.html`, complete el área delineada del formulario:
+
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>¿Nuevo? Agrega tu información</h2>
+	</div>
+	<div>
+	<label>Nombre de la región</label>
+		<input type="text" required class="region-name" />
+	</div>
+	<div>
+		<label>Tu clave API de tmrow</label>
+		<input type="text" required class="api-key" />
+	</div>
+	<button class="search-btn">Enviar</button>
+</form>	
+```
+Este es el formulario donde se ingresará la información guardada y se guardará en el almacenamiento local.
+
+A continuación, cree el área de resultados; debajo de la etiqueta de formulario final, agregue algunos divs:
+
+```HTML
+<div class="result">
+	<div class="loading">cargando...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Región: </strong><span class="my-region"></span></p>
+		<p><strong>Uso de carbono: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Porcentaje de combustible fósil: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Cambia región</button>
+</div>
+```
+En este punto, puede probar una compilación. Asegúrese de instalar las dependencias del paquete de esta extensión:
+
+```
+npm install
+```
+
+Este comando usará npm, el Node Package Manager, para instalar el paquete web para el proceso de compilación de su extensión. Webpack es un paquete que maneja la compilación de código. Puede ver el resultado de este proceso mirando en `/dist/main.js`; verá que el código se ha incluido.
+
+Por ahora, la extensión debería compilarse y, si la implementa en Edge como una extensión, verá un formulario claramente mostrado.
+
+Felicitaciones, ha dado los primeros pasos para crear una extensión de navegador. En lecciones posteriores, lo hará más funcional y útil.
+
+🚀Challenge: Eche un vistazo a una tienda de extensiones de navegador e instale una en su navegador. Puede examinar sus archivos de formas interesantes. ¿Qué descubres?
+
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+En esta lección aprendió un poco sobre la historia del navegador web; Aproveche esta oportunidad para aprender cómo los inventores de la World Wide Web imaginaron su uso leyendo más sobre su historia. Algunos sitios útiles incluyen:
+
+[La historia de los navegadores web](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
+
+[Historia de la Web](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Una entrevista con Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-sueñe-un-poco-podemos-conseguir-la-web-que-queremos)
+
+**Tarea**: [Cambia el estilo de tu extensión](assignment.md)
+
diff --git a/browser-extension/1-about-browsers/translations/assignment.es.md b/browser-extension/1-about-browsers/translations/assignment.es.md
new file mode 100644
index 00000000..fed4e114
--- /dev/null
+++ b/browser-extension/1-about-browsers/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Cambia el estilo de tu extensión
+
+## Instrucciones
+
+El código base para esta extensión viene completo con estilos, pero no es necesario que los uses; haga suya su extensión al cambiarle el estilo editando su archivo css.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+| | El código se envía con nuevos estilos funcionales | El estilo está incompleto | Los estilos tienen errores |
\ No newline at end of file
diff --git a/browser-extension/2-forms-browsers-local-storage/.github/post-lecture-quiz.md b/browser-extension/2-forms-browsers-local-storage/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..229e4938
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/.github/post-lecture-quiz.md
@@ -0,0 +1,16 @@
+*Complete this quiz by checking one answer per question.*
+
+1. LocalStorage is cleared every time you close the browser window
+
+- [ ] true
+- [ ] false
+
+2. The main browser window controls a browser's extension's LocalStorage
+
+- [ ] true
+- [ ] false
+
+3. REST in an API context stands for
+- [ ] Representational State Transfer
+- [ ] Returning State Tasks
+- [ ] Rendering State To Browser
diff --git a/browser-extension/2-forms-browsers-local-storage/.github/pre-lecture-quiz.md b/browser-extension/2-forms-browsers-local-storage/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..c85d5cd3
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/.github/pre-lecture-quiz.md
@@ -0,0 +1,20 @@
+*A warm-up quiz about the browser*
+
+Complete this quiz in class
+
+1. APIs stand for
+
+- [ ] Application Programming Interfaces
+- [ ] A Programming Inference
+- [ ] Anti Proven Intentions
+
+2. Use an API to interact with
+
+- [ ] Another web-connected asset
+- [ ] A database
+- [ ] Either of the above
+
+3. Anyone can create an API 
+
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/browser-extension/2-forms-browsers-local-storage/LICENSE b/browser-extension/2-forms-browsers-local-storage/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/browser-extension/2-forms-browsers-local-storage/README.md b/browser-extension/2-forms-browsers-local-storage/README.md
new file mode 100644
index 00000000..cfa70014
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/README.md
@@ -0,0 +1,218 @@
+# Browser Extension Project Part 2: Call an API, use Local Storage
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+In this lesson, you'll call an API by submitting your browser extension's form and display the results in your browser extension. In addition, you'll learn about how you can store data in your browser's local storage for future reference and use.
+
+✅ Follow the numbered segments in the appropriate files to know where to place your code
+
+### 1. Set up the elements to manipulate in the extension:
+
+By this time you have built the HTML for the form and results `<div>` for your browser extension. From now on, you'll need to work in the `/src/index.js` file and building your extension bit by bit. Refer to the [previous lesson](../about-browsers/README.md) on getting your project set up and on the build process.
+
+Working in your `index.js` file, start by creating some `const` variables to hold the values associated with various fields:
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+All of these fields are referenced by their css class, as you set it up in the HTML in the previous lesson.
+
+### 2. Add listeners
+
+Next, add event listeners to the form and the clear button that resets the form, so that if a user submits the form or clicks that reset button, something will happen, and add the call to initialize the app at the bottom of the file:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Notice the shorthand used to listen for a submit or click event, and how the event it is passed to the handleSubmit or reset functions. Can you write the equivalent of this shorthand in a longer format? Which do you prefer?
+
+### 3. Build out the init() function and the reset() function:
+
+Now you are going to build the function that initializes the extension, which is called init():
+
+```JavaScript
+function init() {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //if we have saved keys/regions in localStorage, show results when they load
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+In this function, there is some interesting logic. Reading through it, can you see what happens?
+
+- two `const` are set up to check if the user has stored an APIKey and region code in local storage.
+- if either of those is null, show the form by changing its style to display as 'block'
+- hide the results, loading, and clearBtn and set any error text to an empty string
+- if there exists a key and region, start a routine to:
+  - call the API to get carbon usage data
+  - hide the results area
+  - hide the form
+  - show the reset button
+
+Before moving on, it's useful to learn about a very important concept available in browsers: [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage is a useful way to store strings in the browser as a `key-value` pair. This type of web storage can be manipulated by JavaScript to manage data in the browser. LocalStorage does not expire, while SessionStorage, another kind of web storage, is cleared when the browser is closed. The various types of storage have pros and cons to their usage.
+
+> Note - your browser extension has its own local storage; the main browser window is a different instance and behaves separately.
+
+You set your APIKey to have a string value, for example, and you can see that it is set on Edge by "inspecting" a web page (you can right-click a browser to inspect) and going to the Applications tab to see the storage.
+
+![Local storage pane](images/localstorage.png)
+
+✅ Think about situations where you would NOT want to store some data in LocalStorage. In general, placing API Keys in LocalStorage is a bad idea! Can you see why? In our case, since our app is purely for learning and will not be deployed to an app store, we will use this method.
+
+Notice that you use the Web API to manipulate LocalStorage, either by using `getItem()`, `setItem()` or `removeItem()`. It's widely supported across browsers.
+
+Before building the `displayCarbonUsage()` function that is called in `init()`, let's build the functionality to handle the initial form submission.
+
+### 4. Handle the form submission
+
+Create a function called `handleSubmit` that accepts an event argument `(e)`. Stop the event from propagating (in this case, we want to stop the browser from refreshing) and call a new function, `setUpUser`, passing in the arguments `apiKey.value` and `region.value`. In this way, you use the two values that are brought in via the initial form when the appropriate fields are populated.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+✅ Refresh your memory - the HTML you set up in the last lesson has two input fields whose `values` are captured via the `const` you set up at the top of the file, and they are both `required` so the browser stops users from inputting null values.
+
+### 5. Set up the user
+
+Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+This function sets a loading message to show while the API is called. At this point, you have arrived at creating the most important function of this browser extension!
+
+### 6. Display Carbon Usage
+
+Finally it's time to query the API!
+
+Before going further, we should discuss APIs. APIs, or [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), are a critical element of a web developer's toolbox. They provide standard ways for programs to interact and interface with each other. For example, if you are building a web site that needs to query a database, someone might have created an API for you to use. While there are many types of APIs, one of the most popular is a [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ The term 'REST' stands for 'Representational State Transfer' and features using variously-configured URLs to fetch data. Do a little research on the various types of APIs available to developers. What format appeals to you?
+
+There are important things to note about this function. First notice the [`async` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Writing your functions so that they run asynchronously means that they wait for an action, such as data being returned, to be completed before continuing.
+
+Here's a quick video about `async`:
+
+[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
+
+Create a new function to query the C02Signal API:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+This is a big function. What's going on here?
+
+- following best practices, you use an `async` keyword to make this function behave asyncronously. The function contains a `try/catch` block as it will return a promise when the API returns data. Because you don't have control over the speed that the API will respond (it may not respond at all!), you need to handle this uncertainty by call it asyncronously. 
+- you're querying the co2signal API to get your region's data, using your API Key. To use that key, you have to use a type of authentication in your header parameters.
+- once the API responds, you assign various elements of its response data to the parts of your screen you set up to show this data.
+- if there's an error, or if there is no result, you show an error message.
+
+✅ Using asyncronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code.
+
+Congratulations! If you build your extension (`npm run build`) and refresh it in your extensions pane, you have a working extension! The only thing that isn't working is the icon, and you'll fix that in the next lesson.
+
+---
+
+## 🚀 Challenge
+
+We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+You learned about LocalStorage and APIs in this lesson, both very useful for the professional web developer. Can you think how these two things work together? Think about how you would architect a web site that would store items to be used by an API.
+
+## Assignment
+
+[Adopt an API](assignment.md)
+
diff --git a/browser-extension/2-forms-browsers-local-storage/assignment.md b/browser-extension/2-forms-browsers-local-storage/assignment.md
new file mode 100644
index 00000000..e1d2e1b4
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/assignment.md
@@ -0,0 +1,11 @@
+# Adopt an API
+
+## Instructions
+
+APIs can be very fun to play with. Here is a [list of many free ones](https://github.com/public-apis/public-apis). Pick and API, and build a browser extension that solves a problem. It can be as small a problem of not having enough pet pictures (so, try the [dog CEO API](https://dog.ceo/dog-api/)) or something bigger - have fun!
+
+## Rubric
+
+| Criteria | Exemplary                                                                  | Adequate                                 | Needs Improvement       |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|          | A complete browser extension is submitted using an API from the above list | A partial browser extension is submitted | The submission has bugs |
\ No newline at end of file
diff --git a/browser-extension/2-forms-browsers-local-storage/images/localstorage.png b/browser-extension/2-forms-browsers-local-storage/images/localstorage.png
new file mode 100644
index 00000000..d8c1ffb1
Binary files /dev/null and b/browser-extension/2-forms-browsers-local-storage/images/localstorage.png differ
diff --git a/browser-extension/2-forms-browsers-local-storage/translations/README.es.md b/browser-extension/2-forms-browsers-local-storage/translations/README.es.md
new file mode 100644
index 00000000..1c2073fe
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/translations/README.es.md
@@ -0,0 +1,212 @@
+# Proyecto de extensión del navegador, parte 2: llamar a una API, usar almacenamiento local
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+En esta lección, llamará a una API enviando el formulario de la extensión de su navegador y mostrará los resultados en la extensión de su navegador. Además, aprenderá cómo puede almacenar datos en el almacenamiento local de su navegador para referencia y uso futuros.
+
+✅ Siga los segmentos numerados en los archivos correspondientes para saber dónde colocar su código
+
+### 1. Configure los elementos para manipular en la extensión:
+
+En este momento, ha creado el HTML para el formulario y los resultados `<div>` para la extensión de su navegador. De ahora en adelante, necesitará trabajar en el archivo `/src/index.js` y construir su extensión poco a poco. Consulte la [lección anterior](../about-browsers/ README.md) sobre cómo configurar su proyecto y el proceso de compilación.
+
+Trabajando en su archivo `index.js`, comience creando algunas variables `const` para contener los valores asociados con varios campos:
+
+
+```JavaScript
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+Todos estos campos están referenciados por su clase css, como lo configuró en el HTML en la lección anterior.
+
+### 2. Agregar oyentes
+
+A continuación, agregue detectores de eventos al formulario y el botón de borrar que restablece el formulario, de modo que si un usuario envía el formulario o hace clic en ese botón de restablecimiento, algo sucederá y agregue la llamada para inicializar la aplicación en la parte inferior del archivo:
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ Observe la abreviatura que se usa para escuchar un evento de envío o clic, y cómo el evento se pasa a las funciones handleSubmit o reset. ¿Puedes escribir el equivalente de esta abreviatura en un formato más largo? ¿Cual prefieres?
+
+### 3. Desarrolle la init() y reset() función:
+
+Ahora vas a construir la función que inicializa la extensión, que se llama `init()`:
+
+```JavaScript
+function init() {
+	//si hay algo en localStorage, recójalo
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//establecer el icono en verde genérico
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//si no tenemos las claves, mostrar el formulario
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //si hemos guardado claves / regiones en localStorage, mostrar los resultados cuando se cargan
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//borrar almacenamiento local solo para la región
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+En esta función, hay una lógica interesante. Al leerlo, ¿puedes ver lo que sucede?
+
+- Se configuran dos `const` para verificar si el usuario ha almacenado una clave API y un código de región en el almacenamiento local.
+- si alguno de ellos es nulo, muestre el formulario cambiando su estilo para que se muestre como 'bloque'
+- ocultar los resultados, cargar y borrarBtn y establecer cualquier texto de error en una cadena vacía
+- si existe una clave y una región, inicie una rutina para:
+  - llamar a la API para obtener datos de uso de carbono
+  - ocultar el área de resultados
+  - ocultar el formulario
+  - mostrar el botón de reinicio
+
+Antes de continuar, es útil conocer un concepto muy importante disponible en los navegadores: [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage es una forma útil de almacenar cadenas en el navegador como un par "clave-valor". Este tipo de almacenamiento web puede ser manipulado por JavaScript para administrar datos en el navegador. LocalStorage no caduca, mientras que SessionStorage, otro tipo de almacenamiento web, se borra cuando se cierra el navegador. Los distintos tipos de almacenamiento tienen ventajas y desventajas para su uso.
+
+> Nota: la extensión de su navegador tiene su propio almacenamiento local; la ventana principal del navegador es una instancia diferente y se comporta por separado.
+
+Configura su APIKey para que tenga un valor de cadena, por ejemplo, y puede ver que está configurado en Edge "inspeccionando" una página web (puede hacer clic con el botón derecho en un navegador para inspeccionar) y yendo a la pestaña Aplicaciones para ver el almacenamiento.
+
+![Panel de almacenamiento local](images/localstorage.png)
+
+✅ Piense en situaciones en las que NO le gustaría almacenar algunos datos en LocalStorage. En general, colocar claves API en LocalStorage es una mala idea. ¿Puedes ver por qué? En nuestro caso, dado que nuestra aplicación es puramente para aprender y no se implementará en una tienda de aplicaciones, usaremos este método.
+
+Tenga en cuenta que utiliza la API web para manipular LocalStorage, ya sea utilizando `getItem()`, `setItem()` o `removeItem()`. Es ampliamente compatible con todos los navegadores.
+
+Antes de construir la función `displayCarbonUsage()` que se llama en `init()`, construyamos la funcionalidad para manejar el envío inicial del formulario.
+
+### 4. Manejar el envío del formulario
+
+Cree una función llamada `handleSubmit` que acepte un argumento de evento `(e)`. Detenga la propagación del evento (en este caso, queremos que el navegador no se actualice) y llame a una nueva función, `setUpUser`, pasando los argumentos `apiKey.value` y `region.value`. De esta manera, utiliza los dos valores que se introducen a través del formulario inicial cuando se completan los campos correspondientes.
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+✅ Refresque su memoria: el HTML que configuró en la última lección tiene dos campos de entrada cuyos `values` se capturan mediante la `const` que configuró en la parte superior del archivo, y ambos son `required` para que el navegador detenga a los usuarios de ingresar valores nulos.
+
+### 5. Configurar el usuario
+
+Pasando a la función `setUpUser`, aquí es donde configura los valores de almacenamiento local para apiKey y regionName. Agrega una nueva función:
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+Esta función establece un mensaje de carga para mostrar mientras se llama a la API. ¡En este punto, ha llegado a crear la función más importante de esta extensión de navegador!
+
+### 6. Visualización del uso de carbono
+
+¡Finalmente es hora de consultar la API!
+
+Antes de continuar, deberíamos discutir las API. Las API, o [Interfaces de programación de aplicaciones](https://www.webopedia.com/TERM/A/API.html), son un elemento fundamental de la caja de herramientas de un desarrollador web. Proporcionan formas estándar para que los programas interactúen e interactúen entre sí. Por ejemplo, si está creando un sitio web que necesita consultar una base de datos, alguien podría haber creado una API para que la use. Si bien hay muchos tipos de API, una de las más populares es una [API REST](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
+
+✅ El término 'REST' significa 'Transferencia de estado representacional' y características que utilizan URL configuradas de diversas formas para obtener datos. Investigue un poco sobre los distintos tipos de API disponibles para los desarrolladores. ¿Qué formato te atrae?
+
+Hay cosas importantes a tener en cuenta sobre esta función. Primero observe la palabra clave `async`. Escribir sus funciones para que se ejecuten de forma asincrónica significa que
+
+Cree una nueva función para consultar la API C02Signal:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+Esta es una gran función. ¿Que está pasando aqui?
+
+- siguiendo las mejores prácticas, utiliza una palabra clave `async` para hacer que esta función se comporte de forma asíncrona. La función contiene un bloque `try / catch` ya que devolverá una promesa cuando la API devuelva datos. Debido a que no tiene control sobre la velocidad a la que responderá la API (¡es posible que no responda en absoluto!), Debe manejar esta incertidumbre llamándola de forma asincrónica.
+- está consultando la API co2signal para obtener los datos de su región, utilizando su clave API. Para usar esa clave, debe usar un tipo de autenticación en los parámetros de su encabezado.
+- una vez que la API responde, asigna varios elementos de sus datos de respuesta a las partes de su pantalla que configura para mostrar estos datos.
+- si hay un error o si no hay ningún resultado, muestra un mensaje de error.
+
+✅ El uso de patrones de programación asíncronos es otra herramienta muy útil en su caja de herramientas. Lea [acerca de las diversas formas](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) puede configurar este tipo de código.
+
+¡Felicidades! Si construye su extensión (`npm run build`) y la actualiza en su panel de extensiones, ¡tiene una extensión que funciona! Lo único que no funciona es el ícono, y lo solucionará en la próxima lección.
+
+---
+
+🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar] (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente?
+
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Aprendió sobre LocalStorage y las API en esta lección, ambos muy útiles para el desarrollador web profesional. ¿Puedes pensar en cómo funcionan estas dos cosas juntas? Piense en cómo diseñaría un sitio web que almacenaría elementos para ser utilizados por una API.
+
+**Tarea**: [Adopte una API](assignment.md)
+
diff --git a/browser-extension/2-forms-browsers-local-storage/translations/assignment.es.md b/browser-extension/2-forms-browsers-local-storage/translations/assignment.es.md
new file mode 100644
index 00000000..b46fc043
--- /dev/null
+++ b/browser-extension/2-forms-browsers-local-storage/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Adopte una API
+
+## Instrucciones
+
+Puede ser muy divertido jugar con las API. Aquí hay una [lista de muchos gratuitos](https://github.com/public-apis/public-apis). Elija una API y cree una extensión de navegador que resuelva un problema. Puede ser un problema tan pequeño el no tener suficientes imágenes de mascotas (por lo tanto, pruebe la [API de CEO para perros](https://dog.ceo/dog-api/)) o algo más grande: ¡diviértase!
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- ------------------------ | ---------------------------------------- | ----------------------- |
+| | Se envía una extensión de navegador completa utilizando una API de la lista anterior | Se envía una extensión de navegador parcial | La presentación tiene errores |
diff --git a/browser-extension/3-background-tasks-and-performance/.github/post-lecture-quiz.md b/browser-extension/3-background-tasks-and-performance/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..3143cb38
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz by checking one answer per question.*
+
+1. To get a better view of your site's performance, clear its cache and reload in the profiler
+
+- [ ] true
+- [ ] false
+
+2. Browser extensions are inherently performant
+
+- [ ] true
+- [ ] false
+
+3. Analyze the following for performance bottlenecks
+   
+- [ ] DOM traversals
+- [ ] JavaScript optimizations
+- [ ] Asset management
+- [ ] All the above
\ No newline at end of file
diff --git a/browser-extension/3-background-tasks-and-performance/.github/pre-lecture-quiz.md b/browser-extension/3-background-tasks-and-performance/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..0c6755be
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz in class.*
+
+1. Test the performance of your app
+
+- [ ] Using the browser's tools
+- [ ] Using a separate software package
+- [ ] Manually
+
+2. The 'performance' of a web site is an analysis of
+
+- [ ] How fast it loads
+- [ ] How fast the code on it runs
+- [ ] Both of the above
+
+3. Overall, the 'weight' of web pages over the past few years has gotten
+- [ ] lighter
+- [ ] heavier
+- [ ] stayed the same
\ No newline at end of file
diff --git a/browser-extension/3-background-tasks-and-performance/LICENSE b/browser-extension/3-background-tasks-and-performance/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/browser-extension/3-background-tasks-and-performance/README.md b/browser-extension/3-background-tasks-and-performance/README.md
new file mode 100644
index 00000000..e2b9ee33
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/README.md
@@ -0,0 +1,157 @@
+# Browser Extension Project Part 3: Learn about Background Tasks and Performance
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asyncronously. Your browser extension is very nearly complete. 
+
+It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them.
+
+## Web Performance Basics
+
+> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+The topic of how to make your web sites blazingly fast on all kinds of devices, for all kinds of users, in all kinds of situations, is unsurprisingly vast. Here are some points to keep in mind as you build either a standard web project or a browser extension.
+
+The first thing you need to do to ensure that your site is running efficiently is to gather data about its performance. The first place to do this is in the developer tools of your web browser. In Edge, you can select the three dots on the top right of the browser, then navigate to More Tools > Developer Tools and open the Performance tab.
+
+The Performance tab contains a Profiling tool. Open a web site (try, for example, https://www.microsoft.com) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
+
+![Edge profiler](./images/profiler.png)
+
+✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) on the Performance panel in Edge
+
+> Tip: to get a true reading of your web site's startup time, clear your browser's cache
+
+Select elements of the profile timeline to zoom in on events that happen while your page loads.
+
+Get a snapshot of your page's performance by selecting a part of the profile timeline and looking at the summary pane:
+
+![Edge profiler snapshot](./images/snapshot.png)
+
+Check the Event Log pane to see if any event took longer than 15 ms:
+
+![Edge event log](./images/log.png)
+
+✅ Get to know your profiler! Open the developer tools on this site and see if there are any bottlenecks. What's the slowest-loading asset? The fastest?
+
+## Profiling checks
+
+In general there are some "problem areas" that every web developer should watch for when building a site, so as to avoid nasty surprises when it's time to deploy to production.
+
+**Asset sizes**: The web has gotten 'heavier', and thus slower, over the past few years. Some of this weight has to do with the use of images.
+
+✅ Look through the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical view of page weight and more.
+
+A good practice is to ensure that your images are optimized, delivered at the right size and resolution for your users.
+
+**DOM traversals**: The browser has to build its Document Object Model based on the code you write, so it's in the interest of good page performance to keep your tags minimal, only using and styling what the page needs. To this point, excess CSS associated with a page could be optimized; styles that need to be used only on one page don't need to be included in the main style sheet, for example.
+
+**JavaScript**: Every JavaScript developer should watch for 'render-blocking' scripts that must be loaded before the rest of the DOM can be traversed and painted to the browser. Consider using `defer` with your inline scripts (as is done in the Terrarium module).
+
+✅ Try some sites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about the common checks that are done to determine site performance.
+
+Now that you have an idea on how the browser renders the assets you send to it, let's look at the last few things you need to do to complete your extension:
+
+### Create a function to calculate color
+
+Working in `/src/index.js`, add a function called `calculateColor()` after the series of `const` variables you set to gain access to the DOM:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+What's going on here? You pass in a value (the carbon intensity) from the API call you completed in the last lesson, and then you calculate how close its value is to the index presented in colors array. Then you send that closest color value over to the chrome runtime.
+
+The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime) that handles all kinds of background tasks, and your extension is leveraging that:
+
+> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
+
+✅ If you're developing this browser extension for Edge, it might surprise you that you're using a chrome API. The newer Edge  browser versions run on the Chromium browser engine, so you can leverage these tools.
+
+> Note, if you want to profile a browser extension, launch the dev tools from within the extension itself, as it is its own separate browser instance.
+
+### Set a default icon color
+
+Now, in the `init()` function, set the icon to be generic green to start by again calling chrome's `updateIcon` action:
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+### Call the function, execute the call
+
+Next, call that function you just created by adding it to the promise returned by the C02Signal API:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+And finally, in `/dist/background.js`, add the listener for these background action calls:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run, to draw an icon of the proper color using the Canvas API.
+
+✅ You'll learn more about the Canvas API in the [Space Game lessons](../../space-game/drawing-to-canvas/README.md).
+
+Now, rebuild your extension (`npm run build`), refresh and launch your extension, and watch the color change. Is it a good time to run an errand or wash the dishes? Now you know!
+
+Congratulations, you've built a useful browser extension and learned more about how the browser works and how to profile its performance.
+
+---
+
+## 🚀 Challenge
+
+Investigate some open source web sites have been around a long time ago, and, based on their GitHub history, see  if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Consider signing up for a [performance newsletter](https://perf.email/)
+
+Investigate some of the ways that browsers gauge web performance by looking through the performance tabs in their web tools. Do you find any major differences?
+
+## Assignment
+
+[Analyze a site for performance](assignment.md)
+
diff --git a/browser-extension/3-background-tasks-and-performance/assignment.md b/browser-extension/3-background-tasks-and-performance/assignment.md
new file mode 100644
index 00000000..4b86f826
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/assignment.md
@@ -0,0 +1,9 @@
+# Analyze a site for performance
+
+Provide a detailed report of a web site, showing areas where performance is problematic. Analyze why the site is slow and what you could do to speed it up. Don't rely only on the browser tools, but do some research on other tools that can help your report
+
+## Rubric
+
+| Criteria | Exemplary                                                                                                  | Adequate                    | Needs Improvement             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | A report is presented with details drawn not only from browser tools but from 3rd party tools if available | A basic report is presented | A minimal report is presented |
\ No newline at end of file
diff --git a/browser-extension/3-background-tasks-and-performance/images/log.png b/browser-extension/3-background-tasks-and-performance/images/log.png
new file mode 100644
index 00000000..f2b144fc
Binary files /dev/null and b/browser-extension/3-background-tasks-and-performance/images/log.png differ
diff --git a/browser-extension/3-background-tasks-and-performance/images/profiler.png b/browser-extension/3-background-tasks-and-performance/images/profiler.png
new file mode 100644
index 00000000..1d455695
Binary files /dev/null and b/browser-extension/3-background-tasks-and-performance/images/profiler.png differ
diff --git a/browser-extension/3-background-tasks-and-performance/images/snapshot.png b/browser-extension/3-background-tasks-and-performance/images/snapshot.png
new file mode 100644
index 00000000..05f333dd
Binary files /dev/null and b/browser-extension/3-background-tasks-and-performance/images/snapshot.png differ
diff --git a/browser-extension/3-background-tasks-and-performance/translations/README.es.md b/browser-extension/3-background-tasks-and-performance/translations/README.es.md
new file mode 100644
index 00000000..82f27ae0
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/translations/README.es.md
@@ -0,0 +1,153 @@
+# Proyecto de extensión del navegador, parte 3: Más información sobre el rendimiento y las tareas en segundo plano
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+En las dos últimas lecciones de este módulo, aprendió cómo crear un formulario y un área de visualización para los datos obtenidos de una API. Es una forma muy estándar de crear presencias web en la web. Incluso aprendió a manejar la obtención de datos de forma asincrónica. La extensión de su navegador está casi completa.
+
+Queda por administrar algunas tareas en segundo plano, incluida la actualización del color del icono de la extensión, por lo que este es un buen momento para hablar sobre cómo el navegador administra este tipo de tareas. Pensemos en estas tareas del navegador en el contexto del rendimiento de sus activos web a medida que los crea.
+
+## Conceptos básicos sobre el rendimiento web
+
+> "El rendimiento del sitio web se trata de dos cosas: qué tan rápido se carga la página y qué tan rápido se ejecuta el código". - [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+El tema de cómo hacer que sus sitios web sean increíblemente rápidos en todo tipo de dispositivos, para todo tipo de usuarios, en todo tipo de situaciones, es sorprendentemente vasto. Estos son algunos puntos que debe tener en cuenta al crear un proyecto web estándar o una extensión de navegador.
+
+Lo primero que debe hacer para asegurarse de que su sitio funcione de manera eficiente es recopilar datos sobre su rendimiento. El lugar para hacer esto es en las herramientas de desarrollo de su navegador web. En Edge, puede seleccionar los tres puntos en la parte superior derecha del navegador, luego navegar a Más herramientas> Herramientas de desarrollo y abrir la pestaña Rendimiento.
+
+La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra un sitio web (pruebe, por ejemplo, https://www.microsoft.com) y haga clic en el botón 'Grabar', luego actualice el sitio. Detenga la grabación en cualquier momento y podrá ver las rutinas que se generan para 'escribir', 'renderizar' y 'pintar' el sitio:
+
+![Edge profiler](./images/profiler.png)
+
+✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) en el panel Rendimiento en Edge
+
+> Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador
+
+Seleccione elementos de la línea de tiempo del perfil para ampliar los eventos que suceden mientras se carga su página.
+
+Obtenga una instantánea del rendimiento de su página seleccionando una parte de la línea de tiempo del perfil y mirando el panel de resumen:
+
+![Instantánea de Edge Profiler](./images/snapshot.png)
+
+Compruebe el panel Registro de eventos para ver si algún evento tardó más de 15 ms:
+
+![Registro de eventos de Edge](./images/log.png)
+
+✅ ¡Conoce a tu perfilador! Abra las herramientas de desarrollo en este sitio y vea si hay cuellos de botella. ¿Cuál es el activo de carga más lenta? ¿El más rápido?
+
+
+## Comprobaciones de perfiles
+
+En general, hay algunas "áreas problemáticas" que todo desarrollador web debe tener en cuenta al crear un sitio, para evitar sorpresas desagradables cuando llegue el momento de implementarlo en producción.
+
+**Tamaños de activos**: la Web se ha vuelto 'más pesada' y, por lo tanto, más lenta en los últimos años. Parte de este peso tiene que ver con el uso de imágenes.
+
+✅ Busque en el [Archivo de Internet](https://httparchive.org/reports/page-weight) una vista histórica del peso de la página y más.
+
+Una buena práctica es asegurarse de que sus imágenes estén optimizadas, entregadas con el tamaño y la resolución adecuados para sus usuarios.
+
+**Recorridos de DOM**: el navegador tiene que construir su Modelo de Objetos de Documento basado en el código que usted escribe, por lo que es de interés para un buen rendimiento de la página mantener sus etiquetas al mínimo, solo usando y estilizando lo que la página necesita. Hasta este punto, se podría optimizar el exceso de CSS asociado con una página; los estilos que deben usarse solo en una página no necesitan incluirse en la hoja de estilo principal, por ejemplo.
+
+**JavaScript**: Todo desarrollador de JavaScript debe estar atento a los scripts de 'bloqueo de renderizado' que deben cargarse antes de que el resto del DOM pueda atravesarse y pintarse en el navegador. Considere usar "diferir" con sus scripts en línea (como se hace en el módulo Terrarium).
+
+✅ Pruebe algunos sitios en un [sitio web de prueba de velocidad del sitio](https://www.webpagetest.org/) para obtener más información sobre las comprobaciones comunes que se realizan para determinar el rendimiento del sitio.
+
+Ahora que tiene una idea de cómo el navegador representa los recursos que le envía, veamos las últimas cosas que debe hacer para completar su extensión:
+
+### Crea una función para calcular el color
+
+Trabajando en `/ src / index.js`, agregue una función llamada` calculateColor () `después de la serie de variables` const` que estableció para obtener acceso al DOM:
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+¿Que está pasando aqui? Pasa un valor (la intensidad de carbono) de la llamada API que completó en la última lección, y luego calcula qué tan cerca está su valor del índice presentado en la matriz de colores. Luego, envía el valor de color más cercano al tiempo de ejecución de Chrome.
+
+Chrome.runtime tiene [una API](https://developer.chrome.com/extensions/runtime) que maneja todo tipo de tareas en segundo plano, y tu extensión aprovecha eso:
+
+> "Utilice la API chrome.runtime para recuperar la página de fondo, devolver detalles sobre el manifiesto y escuchar y responder a eventos en el ciclo de vida de la aplicación o extensión. También puede utilizar esta API para convertir la ruta relativa de las URL a URL calificadas".
+
+✅ Si está desarrollando esta extensión de navegador para Edge, puede que le sorprenda que esté utilizando una API de Chrome. Las versiones más recientes del navegador Edge se ejecutan en el motor del navegador Chromium, por lo que puede aprovechar estas herramientas.
+
+> Tenga en cuenta que si desea crear un perfil de una extensión de navegador, inicie las herramientas de desarrollo desde la propia extensión, ya que es su propia instancia de navegador independiente.
+
+### Establecer un color de icono predeterminado
+
+Ahora, en la función `init ()`, configure el ícono en verde genérico para comenzar nuevamente llamando a la acción `updateIcon` de Chrome:
+
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+### Llame a la función, ejecute la llamada
+
+A continuación, llame a la función que acaba de crear agregándola a la promesa devuelta por la API C02Signal:
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+Y finalmente, en `/dist/background.js`, agregue el oyente para estas llamadas de acción en segundo plano:
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//tomado de la extensión Energy Lollipop, ¡buena característica!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+En este código, está agregando un oyente para cualquier mensaje que llegue al administrador de tareas de backend. Si se llama 'updateIcon', entonces se ejecuta el siguiente código para dibujar un icono del color adecuado usando la API de Canvas.
+
+✅ Aprenderá más sobre la API Canvas en las [lecciones del juego espacial](../../space-game/drawing-to-canvas/README.md).
+
+Ahora, reconstruya su extensión (`npm run build`), actualice y ejecute su extensión, y observe el cambio de color. ¿Es un buen momento para hacer un mandado o lavar los platos? ¡Ahora lo sabes!
+
+Felicitaciones, ha creado una extensión de navegador útil y ha aprendido más sobre cómo funciona el navegador y cómo perfilar su rendimiento.
+
+🚀 Desafío: Investigue algunos sitios web de código abierto que han existido hace mucho tiempo y, según su historial de GitHub, vea si puede determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto de dolor más común?
+
+## [Post-lecture prueba] (.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Considere suscribirse a un [boletín informativo de rendimiento](https://perf.email/)
+
+Investigue algunas de las formas en que los navegadores miden el rendimiento web consultando las pestañas de rendimiento de sus herramientas web. ¿Encuentra diferencias importantes?
+
+**Tarea**: [Analizar el rendimiento de un sitio](assignment.md)
+
diff --git a/browser-extension/3-background-tasks-and-performance/translations/assignment.es.md b/browser-extension/3-background-tasks-and-performance/translations/assignment.es.md
new file mode 100644
index 00000000..735a3da3
--- /dev/null
+++ b/browser-extension/3-background-tasks-and-performance/translations/assignment.es.md
@@ -0,0 +1,9 @@
+# Analizar el rendimiento de un sitio
+
+Proporcione un informe detallado de un sitio web, que muestre las áreas donde el rendimiento es problemático. Analice por qué el sitio es lento y qué podría hacer para acelerarlo. No confíe solo en las herramientas del navegador, investigue un poco sobre otras herramientas que pueden ayudar a su informe
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- -------------------------------------------------- ------ | --------------------------- | ----------------------------- |
+| | Se presenta un informe con detalles extraídos no solo de las herramientas del navegador, sino también de herramientas de terceros, si están disponibles | Se presenta un informe básico | Se presenta un informe mínimo |
diff --git a/browser-extension/LICENSE b/browser-extension/LICENSE
new file mode 100644
index 00000000..fa9fb8f3
--- /dev/null
+++ b/browser-extension/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Jen Looper
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/browser-extension/README.md b/browser-extension/README.md
new file mode 100644
index 00000000..698eea27
--- /dev/null
+++ b/browser-extension/README.md
@@ -0,0 +1,28 @@
+# Building a browser extension
+
+Building browser extensions is a fun and interesting way to think about the performance of your apps while building a different type of web asset. This module includes lessons on how browsers work and how to deploy a browser extension, how to build a form, call an API, and use local storage, and how to gauge the performance of your website and improve it.
+
+You'll build a  browser extension that works on Edge, Chrome, and Firefox. This extension, which is like a mini web site that is tailored to a very specific task, checks the [C02 Signal API](https://www.co2signal.com) for a given region's electricity usage and carbon intensity, and returns a reading on the region's carbon footprint.
+
+This extension can be called ad hoc by a user once an API key and region code is input into a form to determine local electricity usage and thereby offer data that can influence a user's electricity decisions. For example, it may be preferable to delay running a clothes dryer (a carbon-intense activity) during a period of high electricity usage in your region.
+
+### Topics
+
+1. [About the browser](1-about-browsers/README.md)
+2. [Forms and local storage](2-forms-browsers-local-storage/README.md)
+3. [Background tasks and performance](3-background-tasks-and-performance/README.md)
+
+### Credits
+
+![a green browser extension](extension-screenshot.png)
+
+## Credits
+
+The idea for this web carbon trigger was offered by Asim Hussain, lead at Microsoft of the Green Cloud Advocacy team and author of the [Green Principles](https://principles.green/). It was originally a [web site project](https://github.com/jlooper/green).
+
+The structure of the browser extension was influenced by [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension).
+
+The concept behind the 'dot' icon system was suggested by the icon structure of the [Energy Lollipop](https://energylollipop.com/) browser extension for California emissions.
+
+These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
+
diff --git a/browser-extension/extension-screenshot.png b/browser-extension/extension-screenshot.png
new file mode 100644
index 00000000..c6c64d50
Binary files /dev/null and b/browser-extension/extension-screenshot.png differ
diff --git a/browser-extension/install-on-edge.png b/browser-extension/install-on-edge.png
new file mode 100644
index 00000000..965f6f82
Binary files /dev/null and b/browser-extension/install-on-edge.png differ
diff --git a/browser-extension/solution/README.md b/browser-extension/solution/README.md
new file mode 100644
index 00000000..f7178aa6
--- /dev/null
+++ b/browser-extension/solution/README.md
@@ -0,0 +1,28 @@
+# Carbon Trigger Browser Extension: Completed Code
+
+Using tmrow's C02 Signal API to track electricity usage, build a browser extension so that you can have a reminder right in your browser about how heavy your region's electricity usage is. Using this extension ad hoc will help you to make judgement calls on your activities based on this information.
+
+![extension screenshot](../extension-screenshot.png)
+
+## Getting Started
+
+You will need to have [npm](https://npmjs.com) installed. Download a copy of this code to a folder on your computer.
+
+Install all the required packages:
+
+```
+npm install
+```
+
+Build the extension from webpack
+
+```
+npm run build
+```
+
+To install on Edge, use the 'three dot' menu on the top right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder at the prompt and the extension will load. To use it, you will need an API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
+
+![installing](../install-on-edge.png)
+
+Once the API key and region is input into the extension interface, the colored dot in the browser extension bar should change to reflect your region's energy usage and give you a pointer on what energy-heavy activities would be appropriate for you to perform. The concept behind this 'dot' system was given to me by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
diff --git a/browser-extension/solution/dist/background.js b/browser-extension/solution/dist/background.js
new file mode 100644
index 00000000..c435f375
--- /dev/null
+++ b/browser-extension/solution/dist/background.js
@@ -0,0 +1,17 @@
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//borrowed from energy lollipop extension, nice feature!
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
diff --git a/browser-extension/solution/dist/images/plants-people.png b/browser-extension/solution/dist/images/plants-people.png
new file mode 100644
index 00000000..3c3a88fc
Binary files /dev/null and b/browser-extension/solution/dist/images/plants-people.png differ
diff --git a/browser-extension/solution/dist/index.html b/browser-extension/solution/dist/index.html
new file mode 100644
index 00000000..97cb9714
--- /dev/null
+++ b/browser-extension/solution/dist/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<title>My Carbon Trigger</title>
+		<link rel="stylesheet" href="./styles.css" />
+	</head>
+
+	<body class="container">
+		<img alt="plants and people" src="images/plants-people.png" />
+		<div>
+			<h1>Welcome to Your Personal Carbon Trigger!</h1>
+		</div>
+		<form class="form-data" autocomplete="on">
+			<div>
+				<h2>New? Add your Information</h2>
+			</div>
+			<div>
+				<label>Region Name</label>
+				<input type="text" required class="region-name" />
+			</div>
+			<div>
+				<label>Your API Key from tmrow</label>
+				<input type="text" required class="api-key" />
+			</div>
+			<button class="search-btn">Submit</button>
+		</form>
+		<div class="result">
+			<div class="loading">loading...</div>
+			<div class="errors"></div>
+			<div class="data"></div>
+			<div class="result-container">
+				<p><strong>Region: </strong><span class="my-region"></span></p>
+				<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+				<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+			</div>
+			<button class="clear-btn">Change region</button>
+		</div>
+
+		<script src="main.js"></script>
+	</body>
+</html>
diff --git a/browser-extension/solution/dist/main.js b/browser-extension/solution/dist/main.js
new file mode 100644
index 00000000..e69de29b
diff --git a/browser-extension/solution/dist/manifest.json b/browser-extension/solution/dist/manifest.json
new file mode 100644
index 00000000..cf9eb70e
--- /dev/null
+++ b/browser-extension/solution/dist/manifest.json
@@ -0,0 +1,12 @@
+{
+	"manifest_version": 2,
+	"name": "My Carbon Trigger",
+	"version": "0.1.0",
+	"permissions": ["<all_urls>"],
+	"background": {
+		"scripts": ["background.js"]
+	},
+	"browser_action": {
+		"default_popup": "index.html"
+	}
+}
diff --git a/browser-extension/solution/dist/styles.css b/browser-extension/solution/dist/styles.css
new file mode 100644
index 00000000..712b8edc
--- /dev/null
+++ b/browser-extension/solution/dist/styles.css
@@ -0,0 +1,143 @@
+.container {
+	margin: 1.5em;
+	text-align: center;
+}
+
+.result {
+	margin-top: 1em;
+}
+
+.clear-btn {
+	text-align: center;
+	margin: 0 auto;
+}
+
+/*basic css*/
+/* courtesy of: https://github.com/vladocar/Basic.css */
+
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+		Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+	--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
+	--c1: #0074d9;
+	--c2: #eee;
+	--c3: #fff;
+	--c4: #000;
+	--c5: #fff;
+	--m1: 8px;
+	--rc: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--c2: #333;
+		--c3: #1e1f20;
+		--c4: #fff;
+	}
+}
+
+html {
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+/* General settings */
+
+body {
+	margin: 0;
+	font: var(--sans);
+	font-weight: 400;
+	font-style: normal;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	background-color: var(--c3);
+	color: var(--c4);
+	min-width: 300px;
+}
+img,
+iframe {
+	border: none;
+	max-width: 100%;
+}
+
+a {
+	color: var(--c1);
+	text-decoration: none;
+}
+
+a:hover {
+	color: var(--c1);
+	text-decoration: underline;
+}
+
+/* Headlines */
+
+h1,
+h2 {
+	margin: 0.6em 0;
+	font-weight: normal;
+}
+
+h1 {
+	font-size: 1.5em;
+	line-height: 1.2;
+}
+
+h2 {
+	font-size: 1.4em;
+	line-height: 1.2;
+}
+
+/* Rounded Corners*/
+
+input,
+button,
+img {
+	border-radius: var(--rc);
+	margin: 5px;
+}
+
+/* Forms */
+
+input,
+select,
+textarea {
+	font-size: 1em;
+	color: var(--c4);
+	background: var(--c2);
+	border: 0;
+	padding: 0.6em;
+}
+
+label {
+	font-weight: bold;
+	text-align: left;
+}
+
+button,
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+	-webkit-appearance: none;
+	font-size: 1em;
+	display: inline-block;
+	color: var(--c5);
+	background: var(--c1);
+	border: 0;
+	margin: 4px;
+	padding: 0.6em;
+	cursor: pointer;
+	text-align: center;
+}
+
+button:hover,
+button:focus,
+input:hover,
+textarea:hover,
+select:hover {
+	opacity: 0.8;
+}
diff --git a/browser-extension/solution/package.json b/browser-extension/solution/package.json
new file mode 100644
index 00000000..28aa0348
--- /dev/null
+++ b/browser-extension/solution/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "carbon-trigger-extension",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"watch": "webpack --watch",
+		"build": "webpack"
+	},
+	"keywords": [
+		"chrome extension",
+		"edge extension",
+		"carbon usage tracker"
+	],
+	"author": "Jen Looper",
+	"license": "MIT",
+	"devDependencies": {
+		"webpack": "^4.44.1",
+		"webpack-cli": "^3.3.12"
+	},
+	"dependencies": {
+		"axios": "^0.19.2"
+	}
+}
diff --git a/browser-extension/solution/src/index.js b/browser-extension/solution/src/index.js
new file mode 100644
index 00000000..e1ea391a
--- /dev/null
+++ b/browser-extension/solution/src/index.js
@@ -0,0 +1,127 @@
+import axios from './node_modules/axios';
+
+// form fields
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// results
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+
+calculateColor = async (value) => {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	//console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	//console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+};
+
+const displayCarbonUsage = async (apiKey, region) => {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					//please get your own token from CO2Signal https://www.co2signal.com/
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+};
+
+// set up api key and region
+const setUpUser = async (apiKey, regionName) => {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//make initial call
+	displayCarbonUsage(apiKey, regionName);
+};
+
+// handle form submission
+const handleSubmit = async (e) => {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+};
+
+//initial checks
+const init = async () => {
+	//if anything is in localStorage, pick it up
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//set icon to be generic green
+	chrome.runtime.sendMessage({
+		action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+	});
+
+	if (storedApiKey === null || storedRegion === null) {
+		//if we don't have the keys, show the form
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+		//if we have saved keys/regions in localStorage, show results when they load
+		results.style.display = 'none';
+		form.style.display = 'none';
+		displayCarbonUsage(storedApiKey, storedRegion);
+		clearBtn.style.display = 'block';
+	}
+};
+
+const reset = async (e) => {
+	e.preventDefault();
+	//clear local storage for region only
+	localStorage.removeItem('regionName');
+	init();
+};
+
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+
+//start app
+init();
diff --git a/browser-extension/solution/translation/README.es.md b/browser-extension/solution/translation/README.es.md
new file mode 100644
index 00000000..fdbea68d
--- /dev/null
+++ b/browser-extension/solution/translation/README.es.md
@@ -0,0 +1,28 @@
+# Extensión del navegador Carbon Trigger: Código completo
+
+Usando la API de señal C02 de tmrow para rastrear el uso de electricidad, cree una extensión de navegador para que pueda tener un recordatorio directamente en su navegador sobre el consumo de electricidad de su región. El uso de esta extensión ad hoc le ayudará a tomar decisiones sobre sus actividades basándose en esta información.
+
+![extension screenshot](../start/extension-screenshot.png)
+
+## Empezando
+
+Deberá tener [npm](https://npmjs.com) instalado. Descargue una copia de este código en una carpeta de su computadora.
+
+Instale todos los paquetes necesarios:
+
+```
+npm install
+```
+
+Construye la extensión desde webpack:
+
+```
+npm run build
+```
+
+Para instalar en Edge, use el menú de 'tres puntos' en la esquina superior derecha del navegador para encontrar el panel Extensiones. Desde allí, seleccione 'Cargar desempaquetado' para cargar una nueva extensión. Abra la carpeta 'dist' cuando se le solicite y se cargará la extensión. Para usarlo, necesitará una clave API para la API de CO2 Signal ([obtenga una aquí por correo electrónico](https://www.co2signal.com/) - ingrese su correo electrónico en el cuadro de esta página) y el [código para su región](http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, utilizo 'US- NEISO').
+
+![installing](../start/install-on-edge.png)
+
+Una vez que se ingresa la clave API y la región en la interfaz de extensión, el punto de color en la barra de extensión del navegador debe cambiar para reflejar el uso de energía de su región y darle un indicador sobre las actividades de alto consumo de energía que serían apropiadas para usted. El concepto detrás de este sistema de "puntos" me lo dio la [extensión Energy Lollipop](https://energylollipop.com/) para las emisiones de California.
+
diff --git a/browser-extension/start/README.md b/browser-extension/start/README.md
new file mode 100644
index 00000000..50f6f237
--- /dev/null
+++ b/browser-extension/start/README.md
@@ -0,0 +1,28 @@
+# Carbon Trigger Browser Extension: Starter Code
+
+Using tmrow's C02 Signal API to track electricity usage, build a browser extension so that you can have a reminder right in your browser about how heavy your region's electricity usage is. Using this extension ad hoc will help you to make judgement calls on your activities based on this information.
+
+![extension screenshot](../extension-screenshot.png)
+
+## Getting Started
+
+You will need to have [npm](https://npmjs.com) installed. Download a copy of this code to a folder on your computer.
+
+Install all the required packages:
+
+```
+npm install
+```
+
+Build the extension from webpack
+
+```
+npm run build
+```
+
+To install on Edge, use the 'three dot' menu on the top right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder at the prompt and the extension will load. To use it, you will need an API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
+
+![installing](../install-on-edge.png)
+
+Once the API key and region is input into the extension interface, the colored dot in the browser extension bar should change to reflect your region's energy usage and give you a pointer on what energy-heavy activities would be appropriate for you to perform. The concept behind this 'dot' system was given to me by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
+
diff --git a/browser-extension/start/dist/background.js b/browser-extension/start/dist/background.js
new file mode 100644
index 00000000..ef6ddb57
--- /dev/null
+++ b/browser-extension/start/dist/background.js
@@ -0,0 +1,4 @@
+//add listener here
+
+//borrowed from energy lollipop extension
+//draw the icon here
diff --git a/browser-extension/start/dist/images/plants-people.png b/browser-extension/start/dist/images/plants-people.png
new file mode 100644
index 00000000..3c3a88fc
Binary files /dev/null and b/browser-extension/start/dist/images/plants-people.png differ
diff --git a/browser-extension/start/dist/index.html b/browser-extension/start/dist/index.html
new file mode 100644
index 00000000..58abc480
--- /dev/null
+++ b/browser-extension/start/dist/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<title>My Carbon Trigger</title>
+		<link rel="stylesheet" href="./styles.css" />
+	</head>
+
+	<body class="container">
+		<img alt="plants and people" src="images/plants-people.png" />
+		<div>
+			<h1>Welcome to Your Personal Carbon Trigger!</h1>
+		</div>
+		<!--form area-->
+
+		<!--result area-->
+
+		<script src="main.js"></script>
+	</body>
+</html>
diff --git a/browser-extension/start/dist/main.js b/browser-extension/start/dist/main.js
new file mode 100644
index 00000000..e69de29b
diff --git a/browser-extension/start/dist/manifest.json b/browser-extension/start/dist/manifest.json
new file mode 100644
index 00000000..cf9eb70e
--- /dev/null
+++ b/browser-extension/start/dist/manifest.json
@@ -0,0 +1,12 @@
+{
+	"manifest_version": 2,
+	"name": "My Carbon Trigger",
+	"version": "0.1.0",
+	"permissions": ["<all_urls>"],
+	"background": {
+		"scripts": ["background.js"]
+	},
+	"browser_action": {
+		"default_popup": "index.html"
+	}
+}
diff --git a/browser-extension/start/dist/styles.css b/browser-extension/start/dist/styles.css
new file mode 100644
index 00000000..712b8edc
--- /dev/null
+++ b/browser-extension/start/dist/styles.css
@@ -0,0 +1,143 @@
+.container {
+	margin: 1.5em;
+	text-align: center;
+}
+
+.result {
+	margin-top: 1em;
+}
+
+.clear-btn {
+	text-align: center;
+	margin: 0 auto;
+}
+
+/*basic css*/
+/* courtesy of: https://github.com/vladocar/Basic.css */
+
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+		Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+	--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
+	--c1: #0074d9;
+	--c2: #eee;
+	--c3: #fff;
+	--c4: #000;
+	--c5: #fff;
+	--m1: 8px;
+	--rc: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--c2: #333;
+		--c3: #1e1f20;
+		--c4: #fff;
+	}
+}
+
+html {
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+/* General settings */
+
+body {
+	margin: 0;
+	font: var(--sans);
+	font-weight: 400;
+	font-style: normal;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	background-color: var(--c3);
+	color: var(--c4);
+	min-width: 300px;
+}
+img,
+iframe {
+	border: none;
+	max-width: 100%;
+}
+
+a {
+	color: var(--c1);
+	text-decoration: none;
+}
+
+a:hover {
+	color: var(--c1);
+	text-decoration: underline;
+}
+
+/* Headlines */
+
+h1,
+h2 {
+	margin: 0.6em 0;
+	font-weight: normal;
+}
+
+h1 {
+	font-size: 1.5em;
+	line-height: 1.2;
+}
+
+h2 {
+	font-size: 1.4em;
+	line-height: 1.2;
+}
+
+/* Rounded Corners*/
+
+input,
+button,
+img {
+	border-radius: var(--rc);
+	margin: 5px;
+}
+
+/* Forms */
+
+input,
+select,
+textarea {
+	font-size: 1em;
+	color: var(--c4);
+	background: var(--c2);
+	border: 0;
+	padding: 0.6em;
+}
+
+label {
+	font-weight: bold;
+	text-align: left;
+}
+
+button,
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+	-webkit-appearance: none;
+	font-size: 1em;
+	display: inline-block;
+	color: var(--c5);
+	background: var(--c1);
+	border: 0;
+	margin: 4px;
+	padding: 0.6em;
+	cursor: pointer;
+	text-align: center;
+}
+
+button:hover,
+button:focus,
+input:hover,
+textarea:hover,
+select:hover {
+	opacity: 0.8;
+}
diff --git a/browser-extension/start/package.json b/browser-extension/start/package.json
new file mode 100644
index 00000000..28aa0348
--- /dev/null
+++ b/browser-extension/start/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "carbon-trigger-extension",
+	"version": "1.0.0",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"watch": "webpack --watch",
+		"build": "webpack"
+	},
+	"keywords": [
+		"chrome extension",
+		"edge extension",
+		"carbon usage tracker"
+	],
+	"author": "Jen Looper",
+	"license": "MIT",
+	"devDependencies": {
+		"webpack": "^4.44.1",
+		"webpack-cli": "^3.3.12"
+	},
+	"dependencies": {
+		"axios": "^0.19.2"
+	}
+}
diff --git a/browser-extension/start/src/index.js b/browser-extension/start/src/index.js
new file mode 100644
index 00000000..63417535
--- /dev/null
+++ b/browser-extension/start/src/index.js
@@ -0,0 +1,17 @@
+//1
+// form fields
+// results divs
+
+//6
+//call the API
+
+//5
+//set up user's api key and region
+
+//4
+// handle form submission
+
+//3 initial checks
+
+//2
+// set listeners and start app
diff --git a/browser-extension/start/translations/README.es.md b/browser-extension/start/translations/README.es.md
new file mode 100644
index 00000000..6c93c6cc
--- /dev/null
+++ b/browser-extension/start/translations/README.es.md
@@ -0,0 +1,28 @@
+# Extensión del navegador Carbon Trigger: Código de inicio
+
+Usando la API de señal C02 de tmrow para rastrear el uso de electricidad, cree una extensión de navegador para que pueda tener un recordatorio directamente en su navegador sobre el consumo de electricidad de su región. El uso de esta extensión ad hoc le ayudará a tomar decisiones sobre sus actividades basándose en esta información.
+
+![extension screenshot](extension-screenshot.png)
+
+## Empezando
+
+Deberá tener [npm](https://npmjs.com) instalado. Descargue una copia de este código en una carpeta de su computadora.
+
+Instale todos los paquetes necesarios:
+
+```
+npm install
+```
+
+Construye la extensión desde webpack:
+
+```
+npm run build
+```
+
+Para instalar en Edge, use el menú de 'tres puntos' en la esquina superior derecha del navegador para encontrar el panel Extensiones. Desde allí, seleccione 'Cargar sin empaquetar' para cargar una nueva extensión. Abra la carpeta 'dist' cuando se le solicite y se cargará la extensión. Para usarlo, necesitará una clave API para la API de CO2 Signal ([obtenga una aquí por correo electrónico](https://www.co2signal.com/) - ingrese su correo electrónico en el cuadro de esta página) y el [código para su región] (http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, utilizo 'US- NEISO').
+
+![instalación](install-on-edge.png)
+
+Una vez que se ingresa la clave API y la región en la interfaz de extensión, el punto de color en la barra de extensión del navegador debe cambiar para reflejar el uso de energía de su región y darle un indicador sobre las actividades de alto consumo de energía que serían apropiadas para usted. El concepto detrás de este sistema de "puntos" me lo dio la [extensión Energy Lollipop](https://energylollipop.com/) para las emisiones de California.
+
diff --git a/browser-extension/translations/README.es.md b/browser-extension/translations/README.es.md
new file mode 100644
index 00000000..4234139b
--- /dev/null
+++ b/browser-extension/translations/README.es.md
@@ -0,0 +1,28 @@
+# Construyendo una extensión de navegador
+
+Crear extensiones de navegador es una forma divertida e interesante de pensar en el rendimiento de sus aplicaciones mientras crea un tipo diferente de activo web. Este módulo incluye lecciones sobre cómo funcionan los navegadores y cómo implementar una extensión de navegador, cómo crear un formulario, llamar a una API y usar el almacenamiento local, y cómo medir el rendimiento de su sitio web y mejorarlo.
+
+Construirá una extensión de navegador que funcione en Edge, Chrome y Firefox. Esta extensión, que es como un mini sitio web que está diseñado para una tarea muy específica, verifica la [API de señal C02](https://www.co2signal.com) para el uso de electricidad y la intensidad de carbono de una región determinada, y devuelve un lectura sobre la huella de carbono de la región.
+
+Esta extensión puede ser llamada ad hoc por un usuario una vez que se ingresa una clave API y un código de región en un formulario para determinar el uso de electricidad local y, por lo tanto, ofrecer datos que pueden influir en las decisiones de electricidad de un usuario. Por ejemplo, puede ser preferible retrasar el funcionamiento de una secadora de ropa (una actividad intensa en carbono) durante un período de alto consumo de electricidad en su región.
+
+### Temas
+
+1. [Sobre el navegador](about-browsers/README.md)
+2. [Formularios y almacenamiento local](forms-browsers-local-storage/README.md)
+3. [Desempeño y tareas en segundo plano](background-tasks-and-performance/README.md)
+
+### Créditos
+
+![a green browser extension](extension-screenshot.png)
+
+## Créditos
+
+La idea de este disparador de carbono web fue ofrecida por Asim Hussain, líder en Microsoft del equipo de defensa de la nube verde y autor de los [Principios verdes](https://principles.green/). Originalmente era un [proyecto de sitio web](https://github.com/jlooper/green).
+
+La estructura de la extensión del navegador fue influenciada por la [extensión COVID de Adebola Adeniran](https://github.com/onedebos/covtension).
+
+El concepto detrás del sistema de iconos 'puntos' fue sugerido por la estructura de iconos de la extensión del navegador [Energy Lollipop](https://energylollipop.com/) para las emisiones de California.
+
+Estas lecciones fueron escritas con ♥ ️ por [Jen Looper](https://www.twitter.com/jenlooper)
+
diff --git a/getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..f326c797
--- /dev/null
+++ b/getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz along with your submission by checking one answer per question.*
+
+1. What language would you most likely use to create a website?
+
+- [ ] Machine Code
+- [ ] JavaScript
+- [ ] Bash
+
+1. Development environments are unique to each developer
+
+- [ ] True
+- [ ] False
+
+1. A what will a developer do to fix buggy code?
+
+- [ ] Syntax highlighting
+- [ ] Debugging
+- [ ] Code formatting
diff --git a/getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..a1d6b391
--- /dev/null
+++ b/getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz in class*
+
+1. A program be created without the creator writing any code
+
+- [ ] True
+- [ ] False
+
+1. Low level languages are a popular choice for:
+
+- [ ] Websites
+- [ ] Hardware
+- [ ] Video game software
+
+1. Which one of these tools would most most likely be in a web developer's environment?
+
+- [ ] Hardware, like a Raspberry Pi
+- [ ] Browser DevTools
+- [ ] Operating system documentation
diff --git a/getting-started-lessons/1-intro-to-programming-languages/README.md b/getting-started-lessons/1-intro-to-programming-languages/README.md
new file mode 100644
index 00000000..5a4475f7
--- /dev/null
+++ b/getting-started-lessons/1-intro-to-programming-languages/README.md
@@ -0,0 +1,190 @@
+# Introduction to Programming Languages and Tools of the Trade
+
+This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer.
+
+![Intro Programming](webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction
+
+In this lesson, we'll cover:
+
+- What is programming?
+- Types of programming languages
+- Basic elements of a program
+- Useful software and tooling for the professional developer
+
+## What is Programming?
+
+Programming (also known as coding) is the process of writing instructions to a device, such as a computer or mobile device. We write these instructions with a programming language, which is then interpreted by the device. These sets of instructions may be referred to by various names, but *program*, *computer program*, *application (app)*, and *executable* are a few popular names.
+
+A *program* can be anything that is written with code; websites, games, and phone apps are programs. While it's possible to create a program without writing code, the underlying logic is interpreted to the device and that logic was most likely written with code. A program that is *running* or *executing code* is carrying out instructions. The device that you're currently reading this lesson with is running a program to print it to your screen.
+
+✅ Do a little research: who is considered to have been the world's first computer programmer?
+
+## Programming Languages
+
+Programming languages serve a main purpose: for developers to build instructions to send to a device. Devices only can understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are a vehicle for communication between humans and computers.
+
+Programming languages come in different formats and may serve different purposes. For example, JavaScript is primarily used for web applications, while Bash is primarily used for operating systems.
+
+*Low level languages* typically require fewer steps than *high level languages* for a device to interpret instructions. However, what makes high level languages popular is its readability and support. JavaScript is considered a high level language.
+
+The following code illustrates the difference between a high level language with JavaScript and low level language with ARM assembly code.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Believe it or not, *they're both doing the same thing*: printing a Fibonacci sequence up to 10.
+
+✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1.
+
+## Elements of a program
+
+A single instruction in a program is called a *statement* and will usually have a character or line spacing that marks where the instruction ends, or *terminates*. How a program terminates varies with each language.
+
+Most programs rely on using data from a user or elsewhere, where statements may rely on data to carry out instructions. Data can change how a program behaves, so programming languages come with a way to temporarily store data that can be used later. This data is called *variables*. Variables are statements that instruct a device to save data in its memory. Variables in programs are similar to ones in algebra, where they have a unique name and their value may change over time.
+
+There's a chance that some statements will not be executed by a device. This is usually by design when written by the developer or by accident when an unexpected error occurs. This type of control of an application makes it more robust and maintainable. Typically these changes in control happen when certain decisions are met. A common statement in modern programming languages to control how a program is run is the `if..else` statement.
+
+✅ You'll learn more about this type of statement in subsequent lessons
+
+## Tools of the Trade
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+In this section, you'll learn about some software that you might find very useful as you start your professional development journey.
+
+A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them.
+
+### Editors
+
+One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you will run your code.
+
+Developers rely on editors for a few additional reasons:
+
+- *Debugging* Discovering bugs and errors by stepping through code, line by line. Some editors have debugging capabilities, or can be customized and added for specific programming languages.  
+- *Syntax highlighting* Adds colors and text formatting to code, makes it easier to read. Most editors allow customized syntax highlighting.
+- *Extensions and Integrations* Additions that are specialized for developers, by developers, for access to additional tools that aren't built into the base editor. For example, many developers also need a way to document their code and explain how it works and will install a spell check extension to check for typos. Most of these additions are intended for use within a specific editor, and most editors come with a way to search for available extensions.
+- *Customization* Most editors are extremely customizable, and each developer will have their own unique development environment that suits their needs. Many also allow developers to create their own extension.
+
+#### Popular Editors and Web Development Extensions
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Atom](https://atom.io/)
+  - [spell-check](https://atom.io/packages/spell-check)
+  - [teletype](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Browsers
+
+Another crucial tool is the browser. Web developers rely on the browser to observe how their code runs on the web, it's also used to view visual elements of a web page that are written in the editor, like HTML.
+
+Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to assist developers to collect and capture important insights about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information.
+
+#### Popular Browsers and DevTools
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Command Line Tools
+
+Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Developing code requires a significant amount of typing, and some developers prefer to not disrupt their flow on the keyboard and will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save your custom configuration, change it later, and also import it to new development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two.
+
+### Popular Command Line Options
+
+Options for the command line will differ based on the operating system you use.
+
+*💻 = comes preinstalled on the operating system.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
+
+#### Popular Command Line Tools
+
+- [Git](https://git-scm.com/) (💻 on most operating sytems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers rely on documentation often to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works.
+
+#### Popular Documentation on Web Development
+
+- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+
+✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment.
+
+---
+
+## 🚀 Challenge
+
+Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? 
+
+## Assignment 
+
+[Reading the Docs](assignment.md)
diff --git a/getting-started-lessons/1-intro-to-programming-languages/assignment.md b/getting-started-lessons/1-intro-to-programming-languages/assignment.md
new file mode 100644
index 00000000..412a00cd
--- /dev/null
+++ b/getting-started-lessons/1-intro-to-programming-languages/assignment.md
@@ -0,0 +1,12 @@
+# Reading the Docs
+
+## Instructions
+
+There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs.
+
+## Rubric
+
+Exemplary | Adequate | Needs Improvement
+--- | --- | -- |
+|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool  |
+|Provided a similar tool with docs link| Provided a similar tool without docs link | Did not mention a similar tool or used same tool on MDN |
\ No newline at end of file
diff --git a/getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md b/getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md
new file mode 100644
index 00000000..cd182a84
--- /dev/null
+++ b/getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md
@@ -0,0 +1,178 @@
+# Introducción a lenguajes de programación y herramientas del oficio
+
+Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que se tratan aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderá sobre software útil que lo ayuda como desarrollador.
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introducción
+
+En esta lección, cubriremos:
+
+- ¿Qué es la programación?
+- Tipos de lenguajes de programación
+- Elementos básicos de un programa
+- Software y herramientas útiles para el desarrollador profesional.
+
+## ¿Qué es la programación?
+
+La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un dispositivo móvil. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Estos conjuntos de instrucciones pueden tener varios nombres, pero *programa*, *programa de computadora*, *aplicación (aplicación)* y *ejecutable* son algunos nombres populares.
+
+Un *programa* puede ser cualquier cosa que esté escrita con código; Los sitios web, los juegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código* está ejecutando instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla.
+
+✅ Investigue un poco: ¿quién se considera el primer programador de computadoras del mundo?
+
+## Lenguajes de programación
+
+Los lenguajes de programación tienen un propósito principal: que los desarrolladores creen instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender binarios (1 y 0), y para *la mayoría* de los desarrolladores esa no es una forma muy eficiente de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre humanos y computadoras.
+
+Los lenguajes de programación vienen en diferentes formatos y pueden tener diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos.
+
+*Los idiomas de bajo nivel* normalmente requieren menos pasos que los *idiomas de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript se considera un lenguaje de alto nivel.
+
+El siguiente código ilustra la diferencia entre un lenguaje de alto nivel con JavaScript y un lenguaje de bajo nivel con código ensamblador ARM.
+
+```javascript
+let number = 10
+let n1 = 0, n2 = 1, nextTerm;
+
+for (let i = 1; i <= number; i++) {
+    console.log(n1);
+    nextTerm = n1 + n2;
+    n1 = n2;
+    n2 = nextTerm;
+}
+```
+
+```c
+ area ascen,code,readonly
+ entry
+ code32
+ adr r0,thumb+1
+ bx r0
+ code16
+thumb
+ mov r0,#00
+ sub r0,r0,#01
+ mov r1,#01
+ mov r4,#10
+ ldr r2,=0x40000000
+back add r0,r1
+ str r0,[r2]
+ add r2,#04
+ mov r3,r0
+ mov r0,r1
+ mov r1,r3
+ sub r4,#01
+ cmp r4,#00
+ bne back
+ end
+```
+
+Lo crea o no, *ambos hacen lo mismo*: imprimir una secuencia de Fibonacci hasta 10.
+
+✅ Una secuencia de Fibonacci se [define](https://en.wikipedia.org/wiki/Fibonacci_number) como un conjunto de números de modo que cada número es la suma de los dos precedentes, comenzando por 0 y 1.
+
+## Elementos de un programa
+
+Una sola instrucción en un programa se llama *instrucción* y generalmente tendrá un carácter o un espacio entre líneas que marca dónde termina la instrucción, o *termina*. La forma en que termina un programa varía con cada idioma.
+
+La mayoría de los programas se basan en el uso de datos de un usuario o de otros lugares, donde las declaraciones pueden basarse en datos para llevar a cabo instrucciones. Los datos pueden cambiar la forma en que se comporta un programa, por lo que los lenguajes de programación vienen con una forma de almacenar temporalmente datos que se pueden usar más adelante. Estos datos se denominan* variables*. Las variables son declaraciones que indican a un dispositivo que guarde datos en su memoria. Las variables en los programas son similares a las del álgebra, donde tienen un nombre único y su valor puede cambiar con el tiempo.
+
+Existe la posibilidad de que un dispositivo no ejecute algunas declaraciones. Esto suele ser por diseño cuando lo escribe el desarrollador o por accidente cuando ocurre un error inesperado. Este tipo de control de una aplicación la hace más robusta y fácil de mantener. Por lo general, estos cambios en el control ocurren cuando se cumplen ciertas decisiones. Una declaración común en los lenguajes de programación modernos para controlar cómo se ejecuta un programa es la declaración `if..else`.
+
+✅ Aprenderá más sobre este tipo de afirmaciones en lecciones posteriores.
+
+## Herramientas del oficio
+
+En esta sección, aprenderá sobre algún software que puede resultarle muy útil al comenzar su viaje de desarrollo profesional.
+
+Un **entorno de desarrollo** es un conjunto único de herramientas y características que un desarrollador utilizará a menudo al escribir software. Algunas de estas herramientas se han personalizado para las necesidades específicas de un desarrollador y pueden cambiar con el tiempo si un desarrollador cambia las prioridades en el trabajo o proyectos personales, o cuando usa un lenguaje de programación diferente. Los entornos de desarrollo son tan únicos como los desarrolladores que los utilizan.
+
+### Editores
+
+Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribe su código y, a veces, donde ejecutará su código.
+
+Los desarrolladores confían en los editores por algunas razones adicionales:
+
+- *Depuración* Descubrimiento de errores y errores al recorrer el código, línea por línea. Algunos editores tienen capacidades de depuración o se pueden personalizar y agregar para lenguajes de programación específicos.
+- *Resaltado de sintaxis* Agrega colores y formato de texto al código, lo hace más fácil de leer. La mayoría de los editores permiten el resaltado de sintaxis personalizado.
+- *Extensiones e integraciones del navegador* Adiciones especializadas para desarrolladores, por desarrolladores, para acceder a herramientas adicionales que no están integradas en el editor base. Por ejemplo, muchos desarrolladores también necesitan una forma de documentar su código y explicar cómo funciona, e instalarán una extensión de revisión ortográfica para verificar si hay errores tipográficos. La mayoría de estas adiciones están diseñadas para su uso dentro de un editor específico, y la mayoría de los editores vienen con una forma de buscar extensiones disponibles.
+- *Personalización* La mayoría de los editores son extremadamente personalizables, y cada desarrollador tendrá su propio entorno de desarrollo único que se adapta a sus necesidades. Muchos también permiten a los desarrolladores crear su propia extensión.
+
+
+#### Editores populares y extensiones de desarrollo web
+
+- [Código de Visual Studio](https://code.visualstudio.com/)
+  - [Corrector ortográfico de código](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
+  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
+  - [Más bonito - Formateador de código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Átomo](https://atom.io/)
+  - [revisión ortográfica](https://atom.io/packages/spell-check)
+  - [teletipo](https://atom.io/packages/teletype)
+  - [atom-beautify](https://atom.io/packages/atom-beautify)
+
+### Navegadores
+
+Otra herramienta fundamental es el navegador. Los desarrolladores web confían en el navegador para observar cómo se ejecuta su código en la web, también se usa para ver elementos visuales de una página web que están escritos en el editor, como HTML.
+
+Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que contienen un conjunto de características e información útiles para ayudar a los desarrolladores a recopilar y capturar información importante sobre su aplicación. Por ejemplo: si una página web tiene errores, a veces es útil saber cuándo ocurrieron. DevTools en un navegador se puede configurar para capturar esta información.
+
+#### Navegadores y herramientas de desarrollo populares
+
+- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
+- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+
+### Herramientas de línea de comandos
+
+Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo en el teclado y usarán atajos de teclado para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas con las herramientas de la línea de comandos sin necesidad de cambiar entre el mouse y el teclado. Otro beneficio de la línea de comandos es que son configurables y puede guardar su configuración personalizada, cambiarla más tarde y también importarla a nuevas máquinas de desarrollo. Debido a que los entornos de desarrollo son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo y algunos prefieren una combinación de ambos.
+
+### Opciones de línea de comandos populares
+
+Las opciones para la línea de comando variarán según el sistema operativo que utilice.
+
+*💻 = viene preinstalado en el sistema operativo.*
+
+#### Windows
+
+- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
+- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻
+- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
+- [mintty](https://mintty.github.io/)
+  
+#### MacOS
+
+- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
+- [iTerm](https://iterm2.com/)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
+
+#### Linux
+
+- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
+- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
+- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
+
+#### Popular Command Line Tools
+
+- [Git](https://git-scm.com/) (💻 en la mayoría de los sistemas operativos)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentación
+
+Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurra a la documentación para aprender a usarla. Los desarrolladores a menudo confían en la documentación para guiarlos a través de cómo usar las herramientas y los lenguajes correctamente, y también para obtener un conocimiento más profundo de cómo funciona.
+
+#### Documentación popular sobre desarrollo web
+
+- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
+- [Frontend Masters](https://frontendmasters.com/learn/)
+
+✅ Investiga un poco: ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo y contrasta con el entorno de un diseñador web.
+
+🚀 Desafío: Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go?
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+**Asignación**: [Asignación](assignment.md)
\ No newline at end of file
diff --git a/getting-started-lessons/1-intro-to-programming-languages/webdev101-programming.png b/getting-started-lessons/1-intro-to-programming-languages/webdev101-programming.png
new file mode 100644
index 00000000..87eabfc8
Binary files /dev/null and b/getting-started-lessons/1-intro-to-programming-languages/webdev101-programming.png differ
diff --git a/getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md b/getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..36692ac1
--- /dev/null
+++ b/getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md
@@ -0,0 +1,19 @@
+*Complete this quiz by checking one answer per question.*
+
+1. A place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more is:
+
+- [ ] GitHub
+- [ ] A Pull Request
+- [ ] A feature branch
+
+2. How would you get all the commits from a remote branch?
+
+- [ ] `git fetch`
+- [ ] `git pull`
+- [ ] `git commits -r`
+
+3. How do you switch to a branch?
+   
+- [ ] `git switch [branch-name]`
+- [ ] `git checkout [branch-name]`
+- [ ] `git load [branch-name]`
diff --git a/getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md b/getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..6b75242f
--- /dev/null
+++ b/getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md
@@ -0,0 +1,13 @@
+*Complete this quiz in class*
+
+1. How do you create a Git repo?
+
+- [ ] git create
+- [ ] git start
+- [ ] git init
+
+2. What does `git add` do?
+
+- [ ] Commits your code
+- [ ] Adds your files to a staging area for tracking
+- [ ] Adds your files to GitHub
diff --git a/getting-started-lessons/2-github-basics/README.md b/getting-started-lessons/2-github-basics/README.md
new file mode 100644
index 00000000..86f62603
--- /dev/null
+++ b/getting-started-lessons/2-github-basics/README.md
@@ -0,0 +1,292 @@
+# Introduction to GitHub
+
+This lesson covers the basics of GitHub, a platform to host and manage changes to your code.
+
+![Intro GitHub](images/webdev101-github.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction
+
+In this lesson, we'll cover:
+
+- tracking the work you do on your machine
+- working on projects with others
+- how to contribute to open source software
+
+### Prerequisites
+
+Before you begin, you'll need to check if Git is installed. In the terminal type: 
+`git --version`
+
+If Git is not installed, [download Git](https://git-scm.com/downloads). Then, setup your local Git profile in the terminal:
+`git config --global user.name "your-name"`
+`git config --global user.email "your-email"`
+
+To check if Git is already configured you can type:
+`git config --list`
+
+You'll also need a GitHub account, a code editor (like Visual Studio Code), and you'll need to open your terminal (or: command prompt).
+
+Navigate to [github.com](https://github.com/) and create an account if you haven't already, or log in and fill out your profile. 
+
+✅ GitHub isn't the only code repository in the world; there are others, but GitHub is the best known
+
+### Preparation
+
+You'll need both a folder with a code project on your local machine (laptop or PC), and a public repository on GitHub, which will serve as an example for how to contribute to the projects of others.  
+
+---
+
+## Code management
+
+Let's say you have a folder locally with some code project and you want to start tracking your progress using git - the version control system. Some people compare using git to writing a love letter to your future self. Reading your commit messages days or weeks or months later you'll be able to recall why you made a decision, or "rollback" a change - that is, when you write good "commit messages".
+
+### Task: Make a repository and commit code
+
+1. **Create repository on GitHub**. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the **new repo** button.
+
+   1. Give your repository (folder) a name
+   1. Select **create repository**.
+
+1. **Navigate to your working folder**. In your terminal, switch to the folder (also known as the directory) you want to start tracking. Type:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Initialize a git repository**. In your project type:
+
+   ```bash
+   git init
+   ```
+
+1. **Check status**. To check the status if your repository type:
+
+   ```bash
+   git status
+   ```
+
+   the output can look something like this:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist.
+
+1. **Add files to tracking**
+
+   ```bash
+   git add .
+   ```
+
+   The `git add` plus `.` argument indicates that all your files & changes for tracking.
+
+1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   This commits all of your files, adding the message "first commit". For future commit messages you will want to be more descriptive in your description to convey what type of change you've made.
+
+1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command:
+
+   > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace `repository_name` with your GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier.
+
+1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   This sends your commits in your "main" branch to GitHub.
+
+1. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](github.com/github/gitignore).
+
+#### Commit messages
+
+A great Git commit subject line completes the following sentence:
+If applied, this commit will <your subject line here>
+
+For the subject use the imperative, present tense: "change" not "changed" nor "changes". 
+As in the subject, in the body (optional) also use the imperative, present tense. The body should include the motivation for the change and contrast this with previous behavior. You're explaining the `why`, not the `how`.
+
+✅ Take a few minutes to surf around GitHub. Can you find a really great commit message? Can you find a really minimal one? What information do you think is the most important and useful to convey in a commit message?
+
+### Task: Collaborate
+
+The main reason for putting things on GitHub was to make it possible to collaborate with other developers.
+
+## Working on projects with others
+
+In your repository, navigate to `Insights > Community` to see how your project compares to recommended community standards.
+
+   Here are some things that can improve your GitHub repo:
+   - **Description**. Did you add a description for your project?
+   - **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/).
+   - **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **License**. Perhaps most importantly, a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+All these resources will benefit onboarding new team members. And those are typically the kind of things new contributors look at before even looking at your code, to find out if your project is the right place for them to be spending their time.
+
+✅ README files, although they take time to prepare, are often neglected by busy maintainers. Can you find an example of a particularly descriptive one? Note: there are some [tools to help create good READMEs](https://www.makeareadme.com/) that you might like to try.
+
+### Task: Merge some code
+
+Contributing docs help people contribute to the project. It explains what types of contributions you're looking for and how the process works. Contributors will need to go through a series of steps to be able to contribute to your repo on GitHub:
+
+
+1. **Forking your repo** You will probably want people to _fork_ your project. Forking means creating a replica of your repository on their GitHub profile.
+1. **Clone**. From there they will clone the project to their local machine. 
+1. **Create a branch**. You will want to ask them to create a _branch_ for their work. 
+1. **Focus their change on one area**. Ask contributors to concentrate their contributions on one thing at a time - that way the chances that you can _merge_ in their work is higher. Imagine they write a bug fix, add a new feature, and update several tests - what if you want to, or can only implement 2 out of 3, or 1 out of 3 changes?
+
+✅ Imagine a situation where branches are particularly critical to writing and shipping good code. What use cases can you think of?
+
+> Note, be the change you want to see in the world, and create branches for your own work as well. Any commits you make will be made on the branch you’re currently “checked out” to. Use `git status` to see which branch that is.
+
+Let's go through a contributor workflow. Assume the contributor has already _forked_ and _cloned_ the repo so they have a Git repo ready to be worked on, on their local machine:
+
+1. **Create a branch**. Use the command `git branch` to create a branch that will contain the changes they mean to contribute:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Switch to working branch**. Switch to the specified branch and update the working directory with `git checkout`:
+
+   ```bash
+   git checkout [branch-name]
+   ```
+
+1. **Do work**. At this point you want to add your changes. Don't forget to tell Git about it with the following commands:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Ensure you give your commit a good name, for your sake as well as the maintainer of the repo you are helping on.
+
+1. **Combine your work with the `main` branch**. At some point you are done working and you want to combine your work with that of the `main` branch. The `main` branch might have changed meanwhile so make sure you first update it to the latest with the following commands:
+
+   ```bash
+   git checkout main
+   git pull
+   ```
+
+   At this point you want to make sure that any _conflicts_, situations where Git can't easily _combine_ the changes happens in your working branch. Therefore run the following commands:
+
+   ```bash
+   git checkout [branch_name]
+   git merge main
+   ```
+
+   This will bring in all changes from `main` into your branch and hopefully you can just continue. If not, VS Code will tell you where Git is _confused_ and you just alter the affected files to say which content is the most accurate.
+
+1. **Send your work to GitHub**. Sending your work to GitHub means two things. Pushing your branch to your repo and then open up a PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   The above command creates the branch on your forked repo.
+
+1. **Open a PR**. Next, you want to open up a PR. You do that by navigating to the forked repo on GitHub. You will see an indication on GitHub where it asks whether you want to create a new PR, you click that and you are taken to an interface where you can change commit message title, give it a more suitable description. Now the maintainer of the repo you forked will see this PR and _fingers crossed_ they will appreciate and _merge_ your PR. You are now a contributor, yay :)
+
+1. **Clean up**. It's considered good practice to _clean up_ after you. You want to clean up both your local branch and the branch you pushed to GitHub. First let's delete it locally with the following command: 
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Ensure you go the GitHub page for the forked repo next and remove the remote branch you just pushed to it.
+
+`Pull request` seems like a silly term because really you want to push your changes to the project. But the maintainer (project owner) or core team needs to consider your changes before merging it with the project's "main" branch, so you're really requesting a change decision from a maintainer.  
+
+A pull request is the place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more. A good pull request follows roughly the same rules as a commit message. You can add a reference to an issue in the issue tracker, when your work for instance fixes an issue. This is done using a `#` followed by the number of your issue. For example `#97`.
+
+🤞Fingers crossed that all checks pass and the project owner(s) merge your changes into the project🤞
+
+Update your current local working branch with all new commits from the corresponding remote branch on GitHub:
+
+`git pull`
+
+## How to contribute to open source
+
+First, let's find a repository - or: repo - on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy the contents of to our machine.
+
+✅ A good way to find 'beginner-friendly' repos is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
+
+![Copy a repo locally](/images/clone_repo.png)
+
+There are several ways of copying code. One way is to "clone" the contents of the repository, using HTTPS, SSH, or using the GitHub CLI (Command Line Interface). 
+
+Open your terminal and clone the repository like so:
+`git clone https://github.com/ProjectURL`
+
+To work on the project, switch to the right folder:
+`cd ProjectURL`
+
+You can also open the entire project using [Codespaces](https://github.com/features/codespaces), GitHub's embedded code editor / cloud development environment, or [GitHub Desktop](https://desktop.github.com/).
+
+Lastly, you can download the code in a zipped folder. 
+
+### A few more interesting things about GitHub
+
+You can star, watching, and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code. 
+
+Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indicated otherwise, where people discuss issues related to the project. And the Pull Requests tab is where people discuss and review changes that are in progress.
+
+Projects might also have discussion in forums, mailing lists, or chat channels like Slack, Discord or IRC.
+
+✅ Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, and creating a project (like a Kanban board). There's a lot you can do!
+
+---
+
+## 🚀 Challenge 
+
+Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes.
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Read more about [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Practice, practice, practice. GitHub has great learning paths available via [lab.github.com](https://lab.github.com/):
+
+- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+You'll also find more advanced labs. 
+
+## Assignment 
+
+Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)
\ No newline at end of file
diff --git a/getting-started-lessons/2-github-basics/images/clone_repo.png b/getting-started-lessons/2-github-basics/images/clone_repo.png
new file mode 100644
index 00000000..0bd6919d
Binary files /dev/null and b/getting-started-lessons/2-github-basics/images/clone_repo.png differ
diff --git a/getting-started-lessons/2-github-basics/images/webdev101-github.png b/getting-started-lessons/2-github-basics/images/webdev101-github.png
new file mode 100644
index 00000000..8665bf6f
Binary files /dev/null and b/getting-started-lessons/2-github-basics/images/webdev101-github.png differ
diff --git a/getting-started-lessons/2-github-basics/translations/README.es.md b/getting-started-lessons/2-github-basics/translations/README.es.md
new file mode 100644
index 00000000..c7e9775d
--- /dev/null
+++ b/getting-started-lessons/2-github-basics/translations/README.es.md
@@ -0,0 +1,283 @@
+# Introducción a GitHub
+
+Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en su código.
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción
+
+En esta lección, cubriremos:
+
+- seguimiento del trabajo que realiza en su máquina
+- trabajar en proyectos con otros
+- cómo contribuir al software de código abierto
+
+### Prerrequisitos
+
+Antes de comenzar, deberá verificar si Git está instalado. En el tipo de terminal:
+`git --version`
+
+Si Git no está instalado, [descargar Git](https://git-scm.com/downloads). Luego, configure su perfil de Git local en la terminal:
+`git config --global user.name "tu-nombre"`
+`git config --global user.email "tu-email"`
+
+Para comprobar si Git ya está configurado, puede escribir:
+`git config --list`
+
+También necesitará una cuenta de GitHub, un editor de código (como Visual Studio Code) y deberá abrir su terminal (o: símbolo del sistema).
+
+Vaya a [github.com](https://github.com/) y cree una cuenta si aún no lo ha hecho, o inicie sesión y complete su perfil.
+
+✅ GitHub no es el único repositorio de código del mundo; hay otros, pero GitHub es el más conocido.
+
+### Preparación
+
+Necesitará una carpeta con un proyecto de código en su máquina local (computadora portátil o PC) y un repositorio público en GitHub, que le servirá como ejemplo de cómo contribuir a los proyectos de otros.
+
+---
+
+## Gestión de código
+
+Digamos que tiene una carpeta localmente con algún proyecto de código y desea comenzar a rastrear su progreso usando git, el sistema de control de versiones. Algunas personas comparan el uso de git con escribir una carta de amor a su yo futuro. Al leer sus mensajes de confirmación días, semanas o meses después, podrá recordar por qué tomó una decisión o "revertir" un cambio, es decir, cuando escribe buenos "mensajes de confirmación".
+
+### Tarea: hacer un repositorio y enviar código
+
+1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busque el botón **nuevo repositorio**.
+
+    1. Dale un nombre a tu repositorio (carpeta)
+    1. Seleccione **crear repositorio**.
+
+1. **Navegue a su carpeta de trabajo**. En su terminal, cambie a la carpeta (también conocida como directorio) que desea comenzar a rastrear. Tipo:
+
+   ```bash
+   cd [nombre de tu carpeta]
+   ```
+
+1. **Inicializar un repositorio de git**. En su tipo de proyecto:
+
+   ```bash
+   git init
+   ```
+
+1. **Comprobar estado**. Para comprobar el estado de su tipo de repositorio:
+
+   ```bash
+   git status
+   ```
+
+   la salida puede verse así:
+
+   ```output
+   Changes not staged for commit:
+   (use "git add <file>..." to update what will be committed)
+   (use "git checkout -- <file>..." to discard changes in working directory)
+
+        modified:   file.txt
+        modified:   file2.txt
+   ```
+
+   Por lo general, un comando `git status` le dice cosas como qué archivos están listos para ser guardados en el repositorio o tiene cambios que es posible que desee conservar.
+
+1. **Agregar archivos al seguimiento**
+
+   ```bash
+   git add .
+   ```
+
+   El argumento `git add` más `.` indica que todos sus archivos y cambios para el seguimiento.
+
+1. **Persistir en tu trabajo**. En este punto, ha agregado los archivos a lo que se denomina _área de preparación_. Un lugar donde Git rastrea sus archivos. Para que el cambio sea permanente, debe _commitir_ los archivos. Para hacerlo, crea un _commit_ con el comando `git commit`. Un _commit_ representa un punto de ahorro en el historial de su repositorio. Escriba lo siguiente para crear un _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Esto confirma todos sus archivos, agregando el mensaje "primer compromiso". Para futuros mensajes de confirmación, querrá ser más descriptivo en su descripción para transmitir qué tipo de cambio ha realizado.
+
+1. **Conecte su repositorio de Git local con GitHub**. Un repositorio de Git es bueno en su máquina, pero en algún momento desea tener una copia de seguridad de sus archivos en algún lugar y también invitar a otras personas a trabajar con usted en su repositorio. Un gran lugar para hacerlo es GitHub. Recuerde que ya hemos creado un repositorio en GitHub, por lo que lo único que debemos hacer es conectar nuestro repositorio de Git local con GitHub. El comando `git remote add` hará precisamente eso. Escriba el siguiente comando:
+
+
+   > Tenga en cuenta que antes de escribir el comando, vaya a la página de su repositorio de GitHub para encontrar la URL del repositorio. Lo usará en el siguiente comando. Reemplaza `repository_name` con tu URL de GitHub.
+
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creó anteriormente.
+
+1. **Envía archivos locales a GitHub**. Hasta ahora ha creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, así:
+ 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Esto envía sus confirmaciones en su rama "principal" a GitHub.
+
+1. **Para agregar más cambios**. Si desea continuar haciendo cambios y enviarlos a GitHub, solo necesitará usar los siguientes tres comandos:
+
+   ```bash
+   git add .
+   git commit -m "escribe tu mensaje de confirmación aquí"
+   git push
+   ```
+
+   > Sugerencia: es posible que también desee adoptar un archivo `.gitignore` para evitar que los archivos que no desea rastrear aparezcan en GitHub, como el archivo de notas que almacena en la misma carpeta pero no tiene lugar para escribir su mensaje de confirmación aquí repositorio público. Puede encontrar plantillas para archivos `.gitignore` en [.gitignore templates](github.com/github/gitignore).
+
+
+#### Confirmar mensajes
+
+Una gran línea de asunto de confirmación de Git completa la siguiente oración:
+Si se aplica, esta confirmación será <su línea de asunto aquí>
+
+Para el sujeto use el imperativo, tiempo presente: "cambiar" no "cambiar" ni "cambiar".
+Como en el sujeto, en el cuerpo (opcional) también use el imperativo, presente. El cuerpo debe incluir la motivación para el cambio y contrastarla con la conducta anterior. Estás explicando el "por qué", no el "cómo".
+
+✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de compromiso realmente bueno? ¿Puedes encontrar uno realmente mínimo? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de compromiso?
+
+### Tarea: Colaborar
+
+La razón principal para poner cosas en GitHub fue hacer posible la colaboración con otros desarrolladores.
+
+## Trabajando en proyectos con otros
+
+En su repositorio, vaya a `Insights > Community` para ver cómo se compara su proyecto con los estándares comunitarios recomendados.
+
+   Aquí hay algunas cosas que pueden mejorar su repositorio de GitHub:
+   - **Descripción**. ¿Agregaste una descripción para tu proyecto?
+   - **README**. ¿Agregaste un archivo README? GitHub proporciona una guía para escribir un [README](https://docs.github.com/articles/about-readmes/).
+   - **Pauta de contribución**. ¿Su proyecto tiene [pautas de contribución](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
+   - **Código de Conducta**. un [Código de conducta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
+   - **Licencia**. Quizás lo más importante, una [licencia](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+Todos estos recursos beneficiarán la incorporación de nuevos miembros del equipo. Y esos son típicamente el tipo de cosas que los nuevos colaboradores miran antes incluso de mirar su código, para descubrir si su proyecto es el lugar adecuado para que ellos pasen su tiempo.
+
+✅ Los archivos README, aunque requieren tiempo para prepararse, a menudo son descuidados por los ocupados mantenedores. ¿Puede encontrar un ejemplo de uno particularmente descriptivo? Nota: hay algunas [herramientas para ayudar a crear buenos archivos READMEs](https://www.makeareadme.com/) que le gustaría probar.
+
+
+### Tarea: Fusionar código
+
+Los documentos que contribuyen ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones está buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a su repositorio en GitHub:
+
+1. **Bifurcando su repositorio** Probablemente querrá que la gente _bifurque_ su proyecto. Bifurcar significa crear una réplica de su repositorio en su perfil de GitHub.
+1. **Clonar**. Desde allí, clonarán el proyecto en su máquina local.
+1. **Crea una rama**. Querrá pedirles que creen una _ rama_ para su trabajo.
+1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de que pueda _fusionar_ en su trabajo son mayores. Imagine que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si lo desea o solo puede implementar 2 de 3 o 1 de 3 cambios?
+
+✅ Imagine una situación en la que las sucursales son particularmente críticas para escribir y enviar un buen código. ¿En qué casos de uso se te ocurren?
+
+> Tenga en cuenta que sea el cambio que desea ver en el mundo y cree también sucursales para su propio trabajo. Todas las confirmaciones que realice se realizarán en la sucursal en la que está actualmente "registrado". Use `git status` para ver qué rama es esa.
+
+Repasemos el flujo de trabajo de un colaborador. Suponga que el colaborador ya ha _bifurcado_ y _clonado_ el repositorio para que tenga un repositorio de Git listo para trabajar en su máquina local:
+
+1. **Crea una rama**. Use el comando `git branch` para crear una rama que contendrá los cambios que pretenden contribuir:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Cambiar a rama de trabajo**. Cambie a la rama especificada y actualice el directorio de trabajo con `git checkout`:
+
+   ```bash
+   git checkout [branch-name]
+   ```
+
+1. **Trabaja**. En este punto, desea agregar sus cambios. No olvide informarle a Git con los siguientes comandos:
+
+   ```bash
+   git add .
+   git commit -m "mis cambios"
+   ```
+
+   Asegúrese de darle un buen nombre a su compromiso, por su bien y por el mantenedor del repositorio en el que está ayudando.
+
+1. **Combine su trabajo con la rama `principal`**. En algún momento ha terminado de trabajar y desea combinar su trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrese de actualizarla primero a la última con los siguientes comandos:
+
+   ```bash
+   git checkout main
+   git pull
+   ```
+
+   En este punto, querrá asegurarse de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurra en su rama de trabajo. Por lo tanto, ejecute los siguientes comandos:
+
+   ```bash
+   git checkout [branch_name]
+   git merge main
+   ```
+
+   Esto traerá todos los cambios de `main` a su rama y es de esperar que pueda continuar. De lo contrario, VS Code le dirá dónde está _confundido_ Git y simplemente modificará los archivos afectados para decir qué contenido es el más preciso.
+
+1. **Envíe su trabajo a GitHub**. Enviar tu trabajo a GitHub significa dos cosas. Empujar su sucursal a su repositorio y luego abrir un PR, Pull Request.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   El comando anterior crea la rama en su repositorio bifurcado.
+
+1. **Abra una PR**. A continuación, desea abrir un PR. Para hacerlo, navegue al repositorio bifurcado en GitHub. Verá una indicación en GitHub donde le preguntará si desea crear un nuevo PR, haga clic en eso y lo llevará a una interfaz donde puede cambiar el título del mensaje de confirmación, asígnele una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcó verá este PR y _dedos cruzados_ apreciarán y _ fusionar_ su PR. Ahora eres un colaborador, yay :)
+
+1. **Limpiar**. Se considera una buena práctica _limpiar_ después de ti. Desea limpiar tanto su sucursal local como la sucursal que envió a GitHub. Primero eliminémoslo localmente con el siguiente comando:
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Asegúrese de ir a la página de GitHub para el repositorio bifurcado a continuación y elimine la rama remota que acaba de ingresar.
+
+`Solicitud de extracción` parece un término tonto porque realmente desea impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar sus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente está solicitando una decisión de cambio a un mantenedor.
+
+Una solicitud de extracción es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena solicitud de extracción sigue aproximadamente las mismas reglas que un mensaje de confirmación. Puede agregar una referencia a un problema en el rastreador de problemas, cuando su trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de su problema. Por ejemplo, `#97`.
+
+🤞 Cruce los dedos para que todos los controles pasen y los propietarios del proyecto combinen sus cambios en el proyecto🤞
+
+Actualice su rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub:
+
+`git pull`
+
+## Cómo contribuir al código abierto
+
+Primero, busquemos un repositorio (o: repositorio) en GitHub que le interese y al que le gustaría contribuir con un cambio. Querrá copiar el contenido de a nuestra máquina.
+
+✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `buena-primera-edición`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/).
+
+Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o usando GitHub CLI (Interfaz de línea de comandos).
+
+Abra su terminal y clone el repositorio así:
+`git clone https://github.com/ProjectURL`
+
+Para trabajar en el proyecto, cambie a la carpeta correcta:
+`cd ProjectURL`
+
+También puede abrir todo el proyecto utilizando [Codespaces](https://github.com/features/codespaces), el entorno de desarrollo en la nube / editor de código integrado de GitHub o [GitHub Desktop](https://desktop.github.com/).
+
+Por último, puede descargar el código en una carpeta comprimida.
+
+### Algunas cosas más interesantes sobre GitHub
+
+Puede destacar, ver y / o "fork" cualquier repositorio público en GitHub. Puede encontrar sus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
+
+Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Solicitudes de extracción es donde las personas debaten y revisan los cambios que están en curso.
+
+Los proyectos también pueden tener discusiones en foros, listas de correo o canales de chat como Slack, Discord o IRC.
+
+✅ Eche un vistazo a su nuevo repositorio de GitHub y pruebe algunas cosas, como editar la configuración, agregar información a su repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer!
+
+🚀 Desafío: empareje con un amigo para trabajar en el código del otro. Cree un proyecto de forma colaborativa, bifurque el código, cree ramas y combine los cambios.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Obtenga más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
+
+[Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Práctica práctica práctica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [lab.github.com](https://lab.github.com/):
+
+- [Primera semana en GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+También encontrará laboratorios más avanzados.
+
+**Tarea**: Completa [la primera semana en el laboratorio de capacitación de GitHub](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md b/getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..2cf3f87d
--- /dev/null
+++ b/getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz by checking one answer per question.*
+
+1. Lighthouse only checks for accessibility problems
+
+- [ ] true
+- [ ] false
+
+2. Color-safe palettes help people with
+
+- [ ] color-blindness
+- [ ] visual impairments
+- [ ] both the above
+
+3. Descriptive links are vital for accessible web sites
+   
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md b/getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..ea0928fe
--- /dev/null
+++ b/getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz in class*
+
+1. An accessible web site can be checked in which browser tool
+
+- [ ] Lighthouse
+- [ ] Deckhouse
+- [ ] Cleanhouse
+
+2. You need a physical screen reader to test accessibility for visually-impaired users
+
+- [ ] true
+- [ ] false
+
+3. Accessibility is only important on government web sites
+   
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/getting-started-lessons/3-accessibility/README.md b/getting-started-lessons/3-accessibility/README.md
new file mode 100644
index 00000000..a1362a9f
--- /dev/null
+++ b/getting-started-lessons/3-accessibility/README.md
@@ -0,0 +1,218 @@
+# Creating Accessible Webpages
+
+![All About Accessibility](webdev101-a11y.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
+>
+> \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
+
+This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind. 
+
+## Tools to use
+
+### Screen readers
+
+One of the best-known accessibility tools are screen readers.
+
+[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) are commonly used clients for those with vision impairments. As we spend time ensuring a browser properly conveys the information we wish to share, we must also ensure a screen reader does the same.
+
+At its most basic, a screen reader will read a page from top to bottom audibly. If your page is all text, the reader will convey the information in a similar fashion to a browser. Of course, web pages are rarely purely text; they will contain links, graphics, color, and other visual components. Care must be taken to ensure that this information is read correctly by a screen reader.
+
+Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately screen readers are built into most operating systems, and many browsers contain extensions to emulate a screen reader.
+
+✅ Try a screen reader browser extension or tool. One that works on Windows only is [JAWS](https://webaim.org/articles/jaws/). Browsers also have built-in tools that can be used for this purpose; check out [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features).
+
+### Contrast checkers
+
+Colors on web sites need to be carefully chosen to  answer the needs of color-blind users or people who have  difficulty seeing low-contrast colors.
+
+✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). What do you learn?
+
+### Lighthouse
+
+In the developer tool area of your browser, you'll find the Lighthouse tool. This tool is important to get a first view of the accessibility (as well as other analysis) of a web site. While it's important not to rely exclusively on Lighthouse, a 100% score is very helpful as a baseline.
+
+✅ Find Lighthouse in your browser's developer tool panel and run an analysis on any site. what do you discover?
+
+## Designing for accessibility
+
+Accessibility is a relatively large topic. To help you out, there are numerous resources available.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+While we won't be able to cover every aspect of creating accessible sites, below are some of the core tenets you will want to implement. Designing an accessible page from the start is **always** easier than going back to an existing page to make it accessible.
+
+## Good display principles
+
+### Color safe palettes
+
+People see the world in different ways, and this includes colors. When selecting a color scheme for your site, you should ensure it's accessible to all. One great [tool for generating color palettes is Color Safe](http://colorsafe.co/).
+
+✅ Identify a web site that is very problematic in its use of color. Why?
+
+### Properly highlight text
+
+Highlighting text by color, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), or other [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) does not inherently inform a screen reader of its importance. A word could be bold because it's a key word, or because its the first word and the designer decided it should be bold.
+
+When a particular phrase needs to be highlighted, use the `<strong>` or `<em>` elements. These will indicate to a screen reader that those items are important.
+
+### Use the correct HTML
+
+With CSS and JavaScript it's possible to many any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it's baffling to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
+
+✅ Go to any web site and see if the designers and developers are using HTML properly. Can you find a button that should be a link? Hint: right click and choose 'View Page Source' in your browser to look at underlying code.
+
+### Use good visual clues
+
+CSS offers complete control over the look of any element on a page. You can create text boxes without an outline or hyperlinks without an underline. Unfortunately removing those clues can make it more challenging for someone who depends on them to be able to recognize the type of control.
+
+## The importance of link text
+
+Hyperlinks are core to navigating the web. As a result, ensuring a screen reader can properly read links allows all users to navigate your site.
+
+### Screen readers and links
+
+As you would expect, screen readers read link text in the same way they'd read any other text on the page. With this in mind, the text demonstrated below might feel perfectly acceptable.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. [Click here](https://en.wikipedia.org/wiki/Little_penguin) for more information.
+
+> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. Visit https://en.wikipedia.org/wiki/Little_penguin for more information.
+
+> **NOTE** As you're about to read, you should **never** create links which look like the above.
+
+Remember, screen readers are a different interface from browsers with a different set of features.
+
+### The problem with using the URL
+
+Screen readers read the text. If a URL appears in the text, the screen reader will read the URL. Generally speaking, the URL does not convey meaningful information, and can sound annoying. You may have experienced this if your phone has ever audibly read a text message with a URL.
+
+### The problem with "click here"
+
+Screen readers also have the ability to read only the hyperlinks on a page, much in the same way a sighted person would scan a page for links. If the link text is always "click here", all the user will hear is "click here, click here, click here, click here, click here, ..." All links are now indistinguishable from one another.
+
+### Good link text
+
+Good link text briefly describes what's on the other side of the link. In the above example talking about little penguins, the link is to the Wikipedia page about the species. The phrase *little penguins* would make for perfect link text as it makes it clear what someone will learn about if they click the link - little penguins.
+
+> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
+
+✅ Surf the web for a few minutes to find pages that use obscure linking strategies. Compare them with other, better-linked sites. What do you learn?
+
+#### Search engine notes
+
+As an added bonus for ensuring your site is accessible to all, you'll help search engines navigate your site as well. Search engines use link text to learn the topics of pages. So using good link text helps everyone!
+
+### ARIA
+
+Imagine the following page:
+
+| Product      | Description        | Order        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Description]('#') | [Order]('#') |
+| Super widget | [Description]('#') | [Order]('#') |
+
+In this example, duplicating the text of description and order make sense for someone using a browser. However, someone using a screen reader would only hear the words *description* and *order* repeated without context.
+
+To support these types of scenarios, HTML supports a set of attributes known as [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). These attributes allow you to provide additional information to screen readers.
+
+> **NOTE**: Like many aspects of HTML, browser and screen reader support may vary. However, most mainline clients support ARIA attributes.
+
+You can use `aria-label` to describe the link when the format of the page doesn't allow you to. The description for widget could be set as
+
+``` html
+<a href="#" aria-label="Widget description">description</a>
+```
+
+✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Progressbar. There's no HTML equivalent for a progress bar, so you identify the generic `<div>` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contains more useful information.
+
+```html
+<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+</div>
+```
+
+## Images
+
+It goes without saying screen readers are unable to automatically read what's in an image. Ensuring images are accessible doesn't take much work - it's what the `alt` attribute is all about. All images should have an `alt` to describe what they are.
+
+✅ As you might expect, search engines are also unable to understand what's in an image. They also use alt text. So once again, ensuring your page is accessible provides additional bonuses!
+
+## The keyboard
+
+Some users are unable to use a mouse or trackpad, instead relying on keyboard interactions to tab from one element to the next. It's important for your web site to present your content in logical order so a keyboard can access each element as the user moves down a document. If you build your web pages with semantic markup and use CSS to style their visual layout, your site should be keyboard-navigable, but it's important to test this aspect manually. Learn more about [keyboard navigation strategies](https://webaim.org/techniques/keyboard/).
+
+✅ Go to any web site and try to navigate through it using only your tab key. What works, what doesn't work? Why?
+
+## Summary
+
+A web accessible to some is not a truly 'world-wide web'. The best way to ensure the sites you create are accessible is to incorporate accessibility best practices from the start. While there are extra steps involved, incorporating these skills into your workflow now will mean all pages you create will be accessible.
+
+---
+
+## 🚀 Challenge
+
+Take this HTML and rewrite it to be as accessible as possible, given the strategies you learned.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Many governments have laws regarding accessibility requirements. Read up on your home country's accessibility laws. What is covered, and what isn't? An example is [this government web site](https://accessibility.blog.gov.uk/).
+
+## Assignment
+ 
+[Analyze a non-accessible web site](assignment.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
diff --git a/getting-started-lessons/3-accessibility/assignment.md b/getting-started-lessons/3-accessibility/assignment.md
new file mode 100644
index 00000000..9ae681f0
--- /dev/null
+++ b/getting-started-lessons/3-accessibility/assignment.md
@@ -0,0 +1,11 @@
+# Analyze a non-accessible web site
+
+## Instructions
+
+Identify a web site that you believe is NOT accessible, and create an action plan to improve its accessibility. Your first task would be to identify this site, detail the ways that you think it is inaccessible without using analytic tools, and then put it through a Lighthouse analysis. Take the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved.
+
+## Rubric
+
+| Criteria       | Exemplary                                                                                                                                                      | Adequate                    | Needs Improvement           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| student report | includes paragraphs on how the site is inadequate, the Lighthouse report captured as a pdf, a list of ten points to improve, with details on how to improve it | missing 20% of the required | missing 50% of the required |
\ No newline at end of file
diff --git a/getting-started-lessons/3-accessibility/translations/README.es.md b/getting-started-lessons/3-accessibility/translations/README.es.md
new file mode 100644
index 00000000..3bd60bc7
--- /dev/null
+++ b/getting-started-lessons/3-accessibility/translations/README.es.md
@@ -0,0 +1,215 @@
+# Creación de páginas web accesibles
+
+![Todo sobre accesibilidad](webdev101-a11y.png)
+> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+> El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de su discapacidad es un aspecto fundamental.
+>
+> \- Sir Timothy Berners-Lee, director del W3C e inventor de la World Wide Web
+
+Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderá sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad. 
+
+## Herramientas para usar
+
+### Lectoras de pantalla
+
+Una de las herramientas de accesibilidad más conocidas son los lectores de pantalla.
+
+[Lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
+
+En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si su página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Se debe tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
+
+Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que está familiarizado con el funcionamiento de un navegador, debe aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
+
+✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulte estas [herramientas de navegador Edge centradas en la accesibilidad](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features).
+
+### Damas de contraste
+
+Los colores en los sitios web deben elegirse cuidadosamente para responder a las necesidades de los usuarios daltónicos o de las personas que tienen dificultades para ver colores de bajo contraste.
+
+✅ Pruebe un sitio web que le guste usar para el uso del color con una extensión de navegador como
+ [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendes?
+
+### Lighthouse
+
+En el área de herramientas para desarrolladores de su navegador, encontrará la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia.
+
+✅ Busque Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecute un análisis en cualquier sitio. ¿Qué descubres?
+
+## Diseñar para la accesibilidad
+
+La accesibilidad es un tema relativamente extenso. Para ayudarlo, existen numerosos recursos disponibles.
+
+- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
+
+Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es ** siempre ** más fácil que volver a una página existente para hacerla accesible.
+
+## Buenos principios de visualización
+
+### Paletas de colores seguros
+
+La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para su sitio, debe asegurarse de que sea accesible para todos. Uno genial [herramienta para generar paletas de colores es Color Safe](http://colorsafe.co/).
+
+✅ Identifique un sitio web que sea muy problemático en el uso del color. ¿Por qué?
+
+### Resaltar correctamente el texto
+
+Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede ser en negrita porque es una palabra clave o porque es la primera palabra y el diseñador decidió que debería ser en negrita.
+
+Cuando sea necesario resaltar una frase en particular, utilice los elementos `<strong>` o `<em>`. Estos le indicarán a un lector de pantalla que esos elementos son importantes.
+
+### Usa el HTML correcto
+
+Con CSS y JavaScript es posible que muchos elementos se parezcan a cualquier tipo de control. `<span>` podría usarse para crear un `<button>`, y `<b>` podría convertirse en un hipervínculo. Si bien esto podría considerarse más fácil de diseñar, es desconcertante para un lector de pantalla. Utilice el HTML apropiado al crear controles en una página. Si desea un hipervínculo, use `<a>`. Usar el HTML correcto para el control correcto se llama hacer uso de HTML semántico.
+
+✅ Vaya a cualquier sitio web y vea si los diseñadores y desarrolladores están usando HTML correctamente. ¿Puedes encontrar un botón que debería ser un enlace? Sugerencia: haga clic derecho y elija 'View Page Source' en su navegador para ver el código subyacente.
+
+### Usa buenas pistas visuales
+
+CSS ofrece un control completo sobre el aspecto de cualquier elemento de una página. Puede crear cuadros de texto sin contorno o hipervínculos sin subrayado. Desafortunadamente, eliminar esas pistas puede hacer que sea más difícil para alguien que depende de ellas poder reconocer el tipo de control.
+
+## La importancia del texto del enlace
+
+Los hipervínculos son fundamentales para navegar por la web. Como resultado, garantizar que un lector de pantalla pueda leer correctamente los enlaces permite a todos los usuarios navegar por su sitio.
+
+### Lectores de pantalla y enlaces
+
+Como era de esperar, los lectores de pantalla leen el texto del enlace de la misma forma que leerían cualquier otro texto de la página. Teniendo esto en cuenta, el texto que se muestra a continuación puede parecer perfectamente aceptable.
+
+> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. [Haga clic aquí](https://en.wikipedia.org/wiki/Little_penguin) para obtener más información.
+
+> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para obtener más información.
+
+> ** NOTA ** Mientras estás a punto de leer, ** nunca ** debes crear enlaces que se parezcan al anterior.
+
+Recuerde, los lectores de pantalla son una interfaz diferente de los navegadores con un conjunto diferente de características.
+
+### El problema con el uso de la URL
+
+Los lectores de pantalla leen el texto. Si aparece una URL en el texto, el lector de pantalla leerá la URL. En términos generales, la URL no transmite información significativa y puede sonar molesta. Es posible que haya experimentado esto si su teléfono alguna vez leyó de manera audible un mensaje de texto con una URL.
+
+### El problema con "haga clic aquí"
+
+Los lectores de pantalla también tienen la capacidad de leer solo los hipervínculos en una página, de la misma manera que una persona con visión escanea una página en busca de enlaces. Si el texto del vínculo es siempre "haga clic aquí", todo lo que el usuario oirá es "haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, ..." Todos los enlaces ahora son indistinguibles entre sí.
+
+### Buen texto de enlace
+
+Un buen texto de enlace describe brevemente lo que está al otro lado del enlace. En el ejemplo anterior, hablando de pequeños pingüinos, el enlace es a la página de Wikipedia sobre la especie. La frase *pequeños pingüinos* sería un texto de enlace perfecto, ya que deja en claro lo que alguien aprenderá si hace clic en el enlace: pequeños pingüinos.
+
+> El [pingüino pequeño](https://en.wikipedia.org/wiki/Little_penguin), a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo.
+
+✅ Navegue por la web durante unos minutos para encontrar páginas que utilicen estrategias de enlace poco conocidas. Compárelos con otros sitios mejor vinculados. ¿Qué aprendes?
+
+#### Notas del motor de búsqueda
+
+Como una ventaja adicional para garantizar que su sitio sea accesible para todos, también ayudará a los motores de búsqueda a navegar por su sitio. Los motores de búsqueda utilizan el texto del enlace para conocer los temas de las páginas. ¡Así que usar un buen texto de enlace ayuda a todos!
+
+### ARIA
+
+Imagina la siguiente página:
+
+| Producto      | Descripción        | Orden        |
+| ------------ | ------------------ | ------------ |
+| Widget       | [Descripción]('#') | [Orden]('#') |
+| Super widget | [Descripción]('#') | [Orden]('#') |
+
+En este ejemplo, duplicar el texto de descripción y orden tiene sentido para alguien que usa un navegador. Sin embargo, alguien que use un lector de pantalla solo escuchará las palabras * descripción * y * orden * repetidas sin contexto.
+
+Para admitir este tipo de escenarios, HTML admite un conjunto de atributos conocidos como [Aplicaciones de Internet enriquecidas accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos le permiten proporcionar información adicional a los lectores de pantalla.
+
+> **NOTA**: Al igual que muchos aspectos de HTML, la compatibilidad con el navegador y el lector de pantalla puede variar. Sin embargo, la mayoría de los clientes de la línea principal admiten atributos ARIA.
+
+Puedes usar `aria-label` para describir el enlace cuando el formato de la página no te lo permite. La descripción del widget podría establecerse como
+
+``` html
+<a href="#" aria-label="Widget description">descripción</a>
+```
+
+✅ En general, el uso de marcado semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `<div>` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene más información útil.
+
+```html
+<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+</div>
+```
+
+## Imagenes
+
+No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo ʻalt`. Todas las imágenes deben tener un ʻalt` para describir lo que son.
+
+✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender qué hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
+
+## El teclado
+
+Algunos usuarios no pueden usar un mouse o trackpad, sino que dependen de las interacciones del teclado para pasar de un elemento al siguiente. Es importante que su sitio web presente su contenido en un orden lógico para que un teclado pueda acceder a cada elemento a medida que el usuario avanza por un documento. Si construye sus páginas web con marcado semántico y usa CSS para diseñar su diseño visual, su sitio debe ser navegable por teclado, pero es importante probar este aspecto manualmente. Obtenga más información sobre las [estrategias de navegación por teclado](https://webaim.org/techniques/keyboard/).
+
+✅ Vaya a cualquier sitio web e intente navegar por él utilizando solo la tecla de tabulación. ¿Qué funciona, qué no funciona? ¿Por qué?
+
+## Resumen
+
+Una web accesible para algunos no es una verdadera "red mundial". La mejor manera de garantizar que los sitios que cree sean accesibles es incorporar las mejores prácticas de accesibilidad desde el principio. Si bien hay pasos adicionales involucrados, incorporar estas habilidades en su flujo de trabajo ahora significará que todas las páginas que cree serán accesibles.
+
+🚀 Desafío: tome este HTML y vuelva a escribirlo para que sea lo más accesible posible, dados los temas que aprendió.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Example
+    </title>
+    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class="site-header">
+      <p class="site-title">Turtle Ipsum</p>
+      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
+    </div>
+    <div class="main-nav">
+      <p class="nav-header">Resources</p>
+      <div class="nav-list">
+        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
+        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
+      </div>
+    </div>
+    <div class="main-content">
+      <div>
+        <p class="page-title">Welcome to Turtle Ipsum. 
+            <a href="">Click here</a> to learn more.
+        </p>
+        <p class="article-text">
+          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+        </p>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <span class="button">Sign up for turtle news</span>
+      </div><div class="footer-section">
+        <p class="nav-header footer-title">
+          Internal Pages
+        </p>
+        <div class="nav-list">
+          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
+          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
+        </div>
+      </div>
+      <p class="footer-copyright">&copy; 2016 Instrument</span>
+    </div>
+  </body>
+</html>
+```
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lea sobre las leyes de accesibilidad de su país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web del gobierno](https://accessibility.blog.gov.uk/).
+
+** Tarea **: [Analizar un sitio web no accesible](assignment.md)
+
+Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
+
+> Autor: Christopher Harrison
diff --git a/getting-started-lessons/3-accessibility/translations/assignment.es.md b/getting-started-lessons/3-accessibility/translations/assignment.es.md
new file mode 100644
index 00000000..a13e9ba6
--- /dev/null
+++ b/getting-started-lessons/3-accessibility/translations/assignment.es.md
@@ -0,0 +1,12 @@
+# Analizar un sitio web no accesible
+
+## Instrucciones
+
+Identifique un sitio web que crea que NO es accesible y cree un plan de acción para mejorar su accesibilidad. Su primera tarea sería identificar este sitio, detallar las formas en que cree que es inaccesible sin usar herramientas analíticas y luego someterlo a un análisis Lighthouse. Tome los resultados de este análisis y describa un plan detallado con un mínimo de diez puntos que muestre cómo se podría mejorar el sitio.
+
+## Rúbrica
+
+| Criterios       | Ejemplar                                                                                                                                                      | Adecuada                    | Necesita mejorar           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
+| informe del estudiante | incluye párrafos sobre cómo el sitio es inadecuado, el informe Lighthouse capturado como un pdf, una lista de diez puntos para mejorar, con detalles sobre cómo mejorarlo | falta el 20% de lo requerido | falta el 50% de lo requerido
+ |
\ No newline at end of file
diff --git a/getting-started-lessons/3-accessibility/webdev101-a11y.png b/getting-started-lessons/3-accessibility/webdev101-a11y.png
new file mode 100644
index 00000000..f7185c6c
Binary files /dev/null and b/getting-started-lessons/3-accessibility/webdev101-a11y.png differ
diff --git a/getting-started-lessons/LICENSE b/getting-started-lessons/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/getting-started-lessons/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/getting-started-lessons/README.md b/getting-started-lessons/README.md
new file mode 100644
index 00000000..25bbbbb9
--- /dev/null
+++ b/getting-started-lessons/README.md
@@ -0,0 +1,17 @@
+# Getting Started with Web Development
+
+In this section of the curriculum, you will be introduced to non project-based concepts important to becoming a professional developer.
+
+### Topics
+
+1. [Introduction to Programming Languages and Tools of the Trade](1-intro-to-programming-languages/README.md)
+2. [Basics of GitHub](2-github-basics/README.md)
+3. [Basics of Accessibility](3-accessibility/README.md)
+
+### Credits
+
+Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
+
+Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
+
+Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/js-basics/1-data-types/.github/post-lecture-quiz.md b/js-basics/1-data-types/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..9f81e7f1
--- /dev/null
+++ b/js-basics/1-data-types/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. Constants are the same as `let` and `var` to declare variables except
+
+- [ ] Constants must be initialized
+- [ ] Constants can be altered
+- [ ] Constants can be reassigned
+
+2. Numbers and ____ are JavaScript primitives that handle numeric data
+
+- [ ] bigint
+- [ ] boolean
+- [ ] star
+
+3. Strings can reside between both single and double quotes
+   
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/js-basics/1-data-types/.github/pre-lecture-quiz.md b/js-basics/1-data-types/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..83746f63
--- /dev/null
+++ b/js-basics/1-data-types/.github/pre-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz in class*
+
+1. Booleans are a data type you can use to test the length of a string
+
+- [ ] true
+- [ ] false
+
+1. The following is an operation you can perform on a string
+
+- [ ] concatenation
+- [ ] appending
+- [ ] splicing
+
+3. `==` and `===` are interchangeable
+   
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/js-basics/1-data-types/README.md b/js-basics/1-data-types/README.md
new file mode 100644
index 00000000..c1b60a68
--- /dev/null
+++ b/js-basics/1-data-types/README.md
@@ -0,0 +1,194 @@
+# JavaScript Basics: Data Types
+
+[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
+
+![JavaScript Basics - Data types](images/webdev101-js-datatypes.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
+
+Let's start with variables and the data types that populate them!
+
+## Variables
+
+Variables store values that can be used and changed throughout your code.
+
+Creating and **declaring** a variable has the following syntax **[keyword] [name]**. It's made up of the two parts:
+
+- **Keyword**. Keywords can be `let` or `var`.  
+
+   > Note, They keyword `let` was introduced in ES6 and gives your variable a so called _block scope_. It's recommended that you use `let` over `var`. We will cover block scopes more in depth in future parts.
+- **The variable name**, this is a name you choose yourself.
+
+### Task - working with variables
+
+1. **Declare a variable**. Let's declare a variable using the `let` keyword:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` has now been declared using the `let` keyword. It currently doesn't have a value.
+
+1. **Assign a value**. Store a value in a variable with the `=` operator, followed by the expected value.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Note: the use of `=` in this lesson means we make use of an "assignment operator", used to set a value to a variable. It doesn't denote equality.
+
+   `myVariable` has now been *initialized* with the value 123.
+
+1. **Refactor**. Replace your code with the following statement.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    The above is called an _explicit initialization_ when a variable is declared and is assigned a value at the same time.
+
+1. **Change the variable value**. Change the variable value in the following way:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Once a variable is declared, you can change its value at any point in your code with the `=` operator and the new value.
+
+   ✅ Try it! You can write JavaScript right in your browser. Open a browser window and navigate to Developer Tools. In the console, you will find a prompt; type `let myVariable = 123`, press return, then type `myVariable`. What happens? Note, you'll learn more about these concepts in subsequent lessons.
+
+## Constants
+
+Declaration and initialization of a constant follows the same concepts as a variable, with the exception of the `const` keyword. Constants are typically declared with all uppercase letters.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Constants are similar to variables, with two exceptions:
+
+- **Must have a value**. Constants must be initialized, or an error will occur when running code.
+- **Reference cannot be changed**. The reference of a constant cannot be changed once initialized, or an error will occur when running code. Let's look at two examples:
+   - **Simple value**. The following is NOT allowed:
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Object reference is protected**. The following is NOT allowed.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Object value is not protected**. The following IS allowed:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Above you are changing the value of the object but not the reference itself, which makes it allowed.
+
+   > Note, a `const` means the reference is protected from reassignment. The value is not _immutable_ though and can change, especially if it's a complex construct like an object.
+
+## Data Types
+
+Variables can store many different types of values, like numbers and text. These various types of values are known as the **data type**. Data types are an important part of software development because it helps developers make decisions on how the code should be written and how the software should run. Furthermore, some data types have unique features that help transform or extract additional information in a value.
+
+✅ Data Types are also referred to as JavaScript data primitives, as they are the lowest-level data types that are provided by the language. There are 6 primitive data types: string, number, bigint, boolean, undefined, and symbol. Take a minute to visualize what each of these primitives might represent. What is a `zebra`? How about `0`? `true`?
+
+### Numbers
+
+In the previous section, the value of `myVariable` was a number data type.
+
+`let myVariable = 123;`
+
+Variables can store all types of numbers, including decimals or negative numbers. Numbers also can be used with arithmetic operators, covered in the [next section](#operators).
+
+### Arithmetic Operators
+
+There are several types of operators to use when performing arithmetic functions, and some are listed here:
+
+| Symbol | Description                                                              | Example                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **Addition**: Calculates the sum of two numbers                          | `1 + 2 //expected answer is 3`   |
+| `-`    | **Subtraction**: Calculates the difference of two numbers                | `1 - 2 //expected answer is -1`  |
+| `*`    | **Multiplication**: Calculates the product of two numbers                | `1 * 2 //expected answer is 2`   |
+| `/`    | **Division**: Calculates the quotient of two numbers                     | `1 / 2 //expected answer is 0.5` |
+| `%`    | **Remainder**: Calculates the remainder from the division of two numbers | `1 % 2 //expected answer is 1`   |
+
+✅ Try it! Try an arithmetic operation in your browser's console. Do the results surprise you?
+
+### Strings
+
+Strings are sets of characters that reside between single or double quotes.
+
+- `'This is a string'`
+- `"This is also a string"`
+- `let myString = 'This is a string value stored in a variable';`
+
+Remember to use quotes when writing a string, or else JavaScript will assume it's a variable name.
+
+### Formatting Strings
+
+Strings are textual, and will require formatting from time to time.
+
+To **concatenate** two or more strings, or join them together, use the `+` operator.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ Why does `1 + 1 = 2` in JavaScript, but `'1' + '1' = 11?` Think about it. What about `'1' + 1`?
+
+**Template literals** are another way to format strings, except instead of quotes, the backtick  is used. Anything that is not plain text must be placed inside placeholders `${ }`. This includes any variables that may be strings.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello World!
+```
+
+You can achieve your formatting goals with either method, but template literals will respect any spaces and line breaks.
+
+✅ When would you use a template literal vs. a plain string?
+
+### Booleans
+
+Booleans can be only two values: `true` or `false`. Booleans can help make decisions on which lines of code should run when certain conditions are met. In many cases, [operators](#operators) assist with setting the value of a Boolean and you will often notice and write variables being initialized or their values being updated with an operator.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ A variable can be considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Challenge
+
+JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Take a look at [this list of JavaScript exercises](https://css-tricks.com/snippets/javascript/) and try one. What did you learn?
+
+## Assignment
+
+[Data Types Practice](assignment.md)
+
diff --git a/js-basics/1-data-types/assignment.md b/js-basics/1-data-types/assignment.md
new file mode 100644
index 00000000..720dd7d2
--- /dev/null
+++ b/js-basics/1-data-types/assignment.md
@@ -0,0 +1,11 @@
+# Data Types Practice
+
+## Instructions
+
+Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices?
+
+## Rubric
+
+Criteria | Exemplary | Adequate | Needs Improvement
+--- | --- | --- | -- |
+||The six data types are listed and explored in detail, documenting their use|Four datatypes are explored|Two data types are explored|
\ No newline at end of file
diff --git a/js-basics/1-data-types/images/webdev101-js-datatypes.png b/js-basics/1-data-types/images/webdev101-js-datatypes.png
new file mode 100644
index 00000000..ceff34ba
Binary files /dev/null and b/js-basics/1-data-types/images/webdev101-js-datatypes.png differ
diff --git a/js-basics/1-data-types/translations/README.de.md b/js-basics/1-data-types/translations/README.de.md
new file mode 100644
index 00000000..207e0352
--- /dev/null
+++ b/js-basics/1-data-types/translations/README.de.md
@@ -0,0 +1,197 @@
+# JavaScript-Grundlagen: Datentypen
+
+[![Datentypen in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Datentypen in JavaScript")
+
+## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md)
+
+Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet.
+
+Beginnen wir mit Variablen und den Datentypen, die sie füllen!
+
+## Variablen
+
+Variablen speichern Werte, die im gesamten Code verwendet und geändert werden können.
+
+Das Erstellen und **Deklarieren** einer Variablen hat die folgende Syntax **[keyword] [name]**. Es besteht aus zwei Teilen:
+
+- **Keyword**. Schlüsselwörter können `let` oder `var` sein.
+
+    > Hinweis: Das Schlüsselwort `let` wurde in ES6 eingeführt und gibt Ihrer Variablen einen sogenannten "Block Scope". Es wird empfohlen, `let` over` var` zu verwenden. Wir werden uns in zukünftigen Teilen eingehender mit Blockbereichen befassen.
+- **Der Variablenname**, dies ist ein Name, den Sie selbst wählen.
+
+### Aufgabe - Arbeiten mit Variablen
+
+1. **Deklariere eine Variable**. Deklarieren wir eine Variable mit dem Schlüsselwort `let`:
+
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` wurde jetzt mit dem Schlüsselwort `let` deklariert. Es hat derzeit keinen Wert.
+
+1. **Weisen Sie einen Wert zu**. Speichern Sie einen Wert in einer Variablen mit dem Operator `=`, gefolgt vom erwarteten Wert.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Hinweis: Die Verwendung von `=` in dieser Lektion bedeutet, dass wir einen "Zuweisungsoperator" verwenden, mit dem ein Wert auf eine Variable gesetzt wird. Es bedeutet nicht Gleichheit.
+
+    `myVariable` wurde jetzt mit dem Wert 123 *initialisiert*.
+
+
+1. **Refactor**. Ersetzen Sie Ihren Code durch die folgende Anweisung.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Das Obige wird als _explizite Initialisierung_ bezeichnet, wenn eine Variable deklariert und gleichzeitig ein Wert zugewiesen wird.
+
+1. **Ändern Sie den Variablenwert**. Ändern Sie den Variablenwert folgendermaßen:
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Sobald eine Variable deklariert ist, können Sie ihren Wert an jeder Stelle in Ihrem Code mit dem Operator `=` und dem neuen Wert ändern.
+
+    ✅ Probieren Sie es aus! Sie können JavaScript direkt in Ihren Browser schreiben. Öffnen Sie ein Browserfenster und navigieren Sie zu Developer Tools. In der Konsole finden Sie eine Eingabeaufforderung. Geben Sie `let myVariable = 123` ein, drücken Sie die Eingabetaste und geben Sie `myVariable` ein. Was geschieht? Beachten Sie, dass Sie in den folgenden Lektionen mehr über diese Konzepte erfahren werden.
+
+## Konstanten
+
+Die Deklaration und Initialisierung einer Konstante folgt denselben Konzepten wie eine Variable, mit Ausnahme des Schlüsselworts `const`. Konstanten werden normalerweise mit allen Großbuchstaben deklariert.
+
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+Konstanten ähneln Variablen mit zwei Ausnahmen:
+
+- **Muss einen Wert haben**. Konstanten müssen initialisiert werden, sonst tritt beim Ausführen von Code ein Fehler auf.
+- **Referenz kann nicht geändert werden**. Die Referenz einer Konstante kann nach der Initialisierung nicht mehr geändert werden. Andernfalls tritt beim Ausführen von Code ein Fehler auf. Schauen wir uns zwei Beispiele an:
+- **Einfacher Wert**. Folgendes ist NICHT erlaubt:
+
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // not allowed
+      ```
+ 
+   - **Objektreferenz ist geschützt**. Folgendes ist NICHT erlaubt.
+
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // not allowed
+      ```
+
+    - **Objektwert ist nicht geschützt**. Folgendes ist erlaubt:
+
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // allowed
+      ```
+
+      Oben ändern Sie den Wert des Objekts, aber nicht die Referenz selbst, wodurch es zulässig wird.
+
+   > Beachten Sie, dass ein `const` bedeutet, dass die Referenz vor einer Neuzuweisung geschützt ist. Der Wert ist jedoch nicht änderbar und kann sich ändern, insbesondere wenn es sich um ein komplexes Konstrukt wie ein Objekt handelt.
+
+## Datentypen
+
+Variablen können viele verschiedene Arten von Werten wie Zahlen und Text speichern. Diese verschiedenen Arten von Werten werden als **Datentyp** bezeichnet. Datentypen sind ein wichtiger Bestandteil der Softwareentwicklung, da sie Entwicklern helfen, Entscheidungen darüber zu treffen, wie der Code geschrieben und wie die Software ausgeführt werden soll. Darüber hinaus verfügen einige Datentypen über einzigartige Funktionen, mit denen zusätzliche Informationen in einen Wert umgewandelt oder extrahiert werden können.
+
+✅ Datentypen werden auch als JavaScript-Datenprimitive bezeichnet, da es sich um die Datentypen der niedrigsten Ebene handelt, die von der Sprache bereitgestellt werden. Es gibt 6 primitive Datentypen: Zeichenfolge, Zahl, Bigint, Boolescher Wert, undefiniert und Symbol. Nehmen Sie sich eine Minute Zeit, um zu visualisieren, was jedes dieser Grundelemente darstellen könnte. Was ist ein `zebra`? Wie wäre es mit `0`? `true`?
+
+### Zahlen
+
+Im vorherigen Abschnitt war der Wert von `myVariable` ein Datentyp für Zahlen.
+
+`let myVariable = 123;`
+
+Variablen können alle Arten von Zahlen speichern, einschließlich Dezimalstellen oder negativer Zahlen. Zahlen können auch mit arithmetischen Operatoren verwendet werden, die im [nächsten Abschnitt](#operators) behandelt werden.
+
+### Rechenzeichen
+
+Es gibt verschiedene Arten von Operatoren, die beim Ausführen von arithmetischen Funktionen verwendet werden können. Einige sind hier aufgeführt:
+
+| Symbol | Beschreibung | Beispiel |
+| ------ | -------------------------------------------------- ---------------------- | -------------------------------- |
+| `+` | **Addition**: Berechnet die Summe zweier Zahlen | `1 + 2 // erwartete Antwort ist 3` |
+| `-` | **Subtraktion**: Berechnet die Differenz zweier Zahlen | `1 - 2 // erwartete Antwort ist -1` |
+| `*` | **Multiplikation**: Berechnet das Produkt zweier Zahlen | `1 * 2 // erwartete Antwort ist 2` |
+| `/` | **Division**: Berechnet den Quotienten aus zwei Zahlen | `1/2 // erwartete Antwort ist 0.5` |
+| %% | **Rest**: Berechnet den Rest aus der Division zweier Zahlen | `1 % 2 // erwartete Antwort ist 1` |
+
+
+✅ Probieren Sie es aus! Versuchen Sie eine arithmetische Operation in der Konsole Ihres Browsers. Überraschen Sie die Ergebnisse?
+
+### Strings
+
+Zeichenfolgen sind Zeichensätze, die zwischen einfachen oder doppelten Anführungszeichen stehen.
+
+- `'Das ist eine Saite'`
+- `"Dies ist auch eine Zeichenfolge"`
+- `let myString = 'Dies ist ein in einer Variablen gespeicherter Zeichenfolgenwert';`
+
+Denken Sie daran, beim Schreiben einer Zeichenfolge Anführungszeichen zu verwenden. Andernfalls geht JavaScript davon aus, dass es sich um einen Variablennamen handelt.
+
+### Formatieren von Zeichenfolgen
+
+Zeichenfolgen sind Textzeichenfolgen und müssen von Zeit zu Zeit formatiert werden.
+
+Verwenden Sie den Operator `+`, um zwei oder mehr Zeichenfolgen zu **verketten** oder miteinander zu verbinden.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+.
+✅ Warum ist in JavaScript `1 + 1 = 2`, aber `'1' + '1' = 11?` Denken Sie darüber nach. Was ist mit `'1' + 1`?
+
+** Vorlagenliterale ** sind eine weitere Möglichkeit, Zeichenfolgen zu formatieren, außer dass anstelle von Anführungszeichen das Backtick verwendet wird. Alles, was kein einfacher Text ist, muss in die Platzhalter `${ }` eingefügt werden. Dies schließt alle Variablen ein, die Zeichenfolgen sein können.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello World!
+```
+
+Sie können Ihre Formatierungsziele mit beiden Methoden erreichen, aber Vorlagenliterale berücksichtigen alle Leerzeichen und Zeilenumbrüche.
+
+✅ Wann würden Sie ein Vorlagenliteral im Vergleich zu einer einfachen Zeichenfolge verwenden?
+
+### Boolesche Werte
+
+Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Werte können dabei helfen, Entscheidungen darüber zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind. In vielen Fällen helfen [Operatoren](#operators) beim Festlegen des Werts eines Booleschen Werts, und Sie werden häufig feststellen und schreiben, dass Variablen initialisiert oder ihre Werte mit einem Operator aktualisiert werden.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Eine Variable kann als "wahr" betrachtet werden, wenn sie als boolescher Wert "wahr" ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte wahr, sofern sie nicht als falsch definiert sind](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+--- ---.
+
+## 🚀 Herausforderung
+
+JavaScript ist bekannt für seine überraschende Art, gelegentlich mit Datentypen umzugehen. Recherchiere ein bisschen über diese 'Fallstricke'. Zum Beispiel: Groß- und Kleinschreibung kann beißen! Versuchen Sie dies in Ihrer Konsole: `let age = 1; let Age = 2; age == Age` (löst `false` auf - warum?). Welche anderen Fallstricke können Sie finden?
+
+## [Quiz nach der Vorlesung](.github/post-lecture-quiz.md)
+
+## Review & Selbststudium
+
+Schauen Sie sich [diese Liste der JavaScript-Übungen](https://css-tricks.com/snippets/javascript/) an und probieren Sie eine aus. Was hast du gelernt?
+
+## Zuordnung
+
+[Praxis für Datentypen](assignment.md)
\ No newline at end of file
diff --git a/js-basics/1-data-types/translations/README.es.md b/js-basics/1-data-types/translations/README.es.md
new file mode 100644
index 00000000..3c6fbce1
--- /dev/null
+++ b/js-basics/1-data-types/translations/README.es.md
@@ -0,0 +1,187 @@
+# Conceptos básicos de JavaScript: tipos de datos
+
+[![Tipos de datos en JavaScript](https://img.youtube.com/vi/rEHV3fFMfn0/0.jpg)](https://youtube.com/watch?v=rEHV3fFMfn0 "Tipos de datos en JavaScript")
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web.
+
+¡Comencemos con las variables y los tipos de datos que las pueblan!
+
+## Variables
+
+Las variables almacenan valores que se pueden usar y cambiar a lo largo de su código.
+
+Crear y **declarar** una variable tiene la siguiente sintaxis **[keyword] [name]**. Está compuesto por dos partes:
+
+- **Keyword**. Las palabras clave pueden ser `let` o `var`.
+
+    > Tenga en cuenta que la palabra clave `let` se introdujo en ES6 y le da a su variable un llamado _alcance de bloque_ (block scope). Se recomienda utilizar `let` sobre `var`. Cubriremos los alcances de bloque con más profundidad en partes futuras.
+- **El nombre de la variable**, este es un nombre que elige usted mismo.
+
+### Tarea - trabajar con variables
+
+1. **Declare una variable**. Declaremos una variable usando la palabra clave `let`:
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` ahora se ha declarado usando la palabra clave `let`. Actualmente no tiene ningún valor.
+
+1. **Asignar un valor**. Almacene un valor en una variable con el operador `=`, seguido del valor esperado.
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > Nota: el uso de `=` en esta lección significa que hacemos uso de un "operador de asignación", que se utiliza para establecer un valor en una variable. No denota igualdad.
+
+    `myVariable` ahora se ha *inicializado* con el valor 123.
+
+1. **Refactor**. Reemplace su código con la siguiente declaración.
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    Lo anterior se denomina _inicialización explícita_ cuando se declara una variable y se le asigna un valor al mismo tiempo.
+
+1. **Cambiar el valor de la variable**. Cambie el valor de la variable de la siguiente manera:
+
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   Una vez que se declara una variable, puede cambiar su valor en cualquier punto de su código con el operador `=` y el nuevo valor.
+
+    ✅ ¡Pruébalo! Puede escribir JavaScript directamente en su navegador. Abra una ventana del navegador y navegue hasta Herramientas de desarrollo. En la consola, encontrará un mensaje; escriba `let myVariable = 123`, presione retorno, luego escriba `myVariable`. ¿Lo que pasa? Tenga en cuenta que aprenderá más sobre estos conceptos en lecciones posteriores.
+
+## Constantes
+
+La declaración e inicialización de una constante sigue los mismos conceptos que una variable, con la excepción de la palabra clave `const`. Las constantes se declaran normalmente con todas las letras mayúsculas.
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+CLas constantes son similares a las variables, con dos excepciones:
+
+- **Debe tener un valor**. Las constantes deben inicializarse o se producirá un error al ejecutar el código.
+- **La referencia no se puede cambiar**. La referencia de una constante no se puede cambiar una vez inicializada, o se producirá un error al ejecutar el código. Veamos dos ejemplos:
+    - **Valor simple**. NO se permite lo siguiente:
+
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // no permitido
+      ```
+ 
+   - **La referencia de objeto está protegida**. NO se permite lo siguiente.
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // o permitido
+      ```
+
+    - **El valor del objeto no está protegido**. Se permite lo siguiente:
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // permitido
+      ```
+
+      Arriba está cambiando el valor del objeto pero no la referencia en sí, lo que lo permite.
+
+   > Tenga en cuenta que una `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _immutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
+
+## Tipos de datos
+
+Las variables pueden almacenar muchos tipos diferentes de valores, como números y texto. Estos diversos tipos de valores se conocen como **tipo de datos**. Los tipos de datos son una parte importante del desarrollo de software porque ayudan a los desarrolladores a tomar decisiones sobre cómo se debe escribir el código y cómo se debe ejecutar el software. Además, algunos tipos de datos tienen características únicas que ayudan a transformar o extraer información adicional en un valor.
+
+✅ Los tipos de datos también se conocen como primitivas de datos de JavaScript, ya que son los tipos de datos de nivel más bajo que proporciona el lenguaje. Hay 6 tipos de datos primitivos: cadena, número, bigint, booleano, indefinido y símbolo. Tómese un minuto para visualizar lo que podría representar cada una de estas primitivas. ¿Qué es una `cebra`? ¿Qué tal `0`? ¿`true`?
+
+### Números
+
+En la sección anterior, el valor de "myVariable" era un tipo de datos numérico.
+
+`let myVariable = 123;`
+
+Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también se pueden usar con operadores aritméticos, que se tratan en la [siguiente sección] (# operadores).
+
+### Operadores aritméticos
+
+Hay varios tipos de operadores que se pueden utilizar al realizar funciones aritméticas, y algunos se enumeran aquí:
+
+| Símbolo | Descripción                                                              | Ejemplo                                |
+| ------- | ------------------------------------------------------------------------ | -------------------------------------- |
+| `+`     | **Suma**: Calcula la suma de dos números                                 | `1 + 2 //la respuesta esperada es 3`   |
+| `-`     | **Resta**: Calcula la diferencia de dos números                          | `1 - 2 //la respuesta esperada es -1`  |
+| `*`     | **Multiplicación**: Calcula el producto de dos números                   | `1 * 2 //la respuesta esperada es 2`   |
+| `/`     | **División**: Calcula el cociente de dos números                         | `1 / 2 //la respuesta esperada es 0.5` |
+| `%`     | **Resto**: Calcula el resto a partir de la división de dos números       | `1 % 2 //la respuesta esperada es 1`   |
+
+✅ ¡Pruébalo! Pruebe una operación aritmética en la consola de su navegador. ¿Te sorprenden los resultados?
+
+### Cadenas
+
+Las cadenas son conjuntos de caracteres que residen entre comillas simples o dobles.
+
+- `'Esto es una cadena'`
+- `"Esto también es una cadena"`
+- `let myString = 'Este es un valor de cadena almacenado en una variable';`
+
+Recuerde utilizar comillas al escribir una cadena, de lo contrario JavaScript asumirá que es un nombre de variable.
+
+### Formateo de cadenas
+
+Las cadenas son textuales y requerirán formato de vez en cuando.
+
+Para **concatenar** dos o más cadenas, o unirlas, use el operador `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ ¿Por qué `1 + 1 = 2` en JavaScript, pero `'1' + '1' = 11?` Piense en ello. ¿Qué pasa con `'1' + 1`?
+
+** Los literales de plantilla ** son otra forma de formatear cadenas, excepto que en lugar de comillas, se usa la comilla invertida. Todo lo que no sea texto sin formato debe colocarse dentro de los marcadores de posición `${ }`. Esto incluye cualquier variable que pueda ser cadenas.
+
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello World!
+```
+
+Puede lograr sus objetivos de formato con cualquier método, pero los literales de plantilla respetarán los espacios y saltos de línea.
+
+✅ ¿Cuándo usaría una plantilla literal frente a una cadena simple?
+
+### Booleanos
+
+Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores booleanos pueden ayudar a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones. En muchos casos, [operadores](#operadores) ayudan a establecer el valor de un booleano y, a menudo, notará y escribirá variables que se inicializan o que sus valores se actualizan con un operador.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Una variable se puede considerar 'verdadera' si se evalúa como un valor booleano 'verdadero'. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar?
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Eche un vistazo a [esta lista de ejercicios de JavaScript](https://css-tricks.com/snippets/javascript/) y pruebe uno. ¿Qué aprendiste?
+
+**Tarea**: [Práctica de tipos de datos](assignment.md)
\ No newline at end of file
diff --git a/js-basics/1-data-types/translations/assignment.de.md b/js-basics/1-data-types/translations/assignment.de.md
new file mode 100644
index 00000000..052cd99e
--- /dev/null
+++ b/js-basics/1-data-types/translations/assignment.de.md
@@ -0,0 +1,11 @@
+# Datentypen üben
+
+## Anleitung
+
+Stellen Sie sich vor, Sie bauen einen Einkaufswagen. Schreiben Sie eine Dokumentation zu den Datentypen, die Sie benötigen, um Ihr Einkaufserlebnis zu vervollständigen. Wie sind Sie zu Ihren Entscheidungen gekommen?
+
+## Rubrik
+
+Kriterien | Vorbildlich | Angemessen | Muss verbessert werden
+--- | --- | --- | - |
+|| Die sechs Datentypen werden aufgelistet und detailliert untersucht, wobei ihre Verwendung dokumentiert wird. | Vier Datentypen werden untersucht. | Zwei Datentypen werden untersucht. |
\ No newline at end of file
diff --git a/js-basics/1-data-types/translations/assignment.es.md b/js-basics/1-data-types/translations/assignment.es.md
new file mode 100644
index 00000000..55672c2d
--- /dev/null
+++ b/js-basics/1-data-types/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Práctica de tipos de datos
+
+## Instrucciones
+
+Imagina que estás construyendo un carrito de compras. Escriba documentación sobre los tipos de datos que necesitaría para completar su experiencia de compra. ¿Cómo llegó a sus elecciones?
+
+## Rúbrica
+
+Criterios | Ejemplar | Adecuado | Necesita mejorar
+--- | --- | --- | - |
+|| Los seis tipos de datos se enumeran y exploran en detalle, documentando su uso | Se exploran cuatro tipos de datos | Se exploran dos tipos de datos |
\ No newline at end of file
diff --git a/js-basics/2-functions-methods/.github/post-lecture-quiz.md b/js-basics/2-functions-methods/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..f894d1c7
--- /dev/null
+++ b/js-basics/2-functions-methods/.github/post-lecture-quiz.md
@@ -0,0 +1,12 @@
+*Complete this quiz by checking one answer per question.*
+
+1. Arguments must be provided for all parameters in a function
+
+- [ ] true
+- [ ] false
+
+2. What does a default value do?
+
+- [ ] Sets a correct value
+- [ ] Gives a starter value for a parameters so your code still behaves if you omit an argument for it
+- [ ] Has no utility
diff --git a/js-basics/2-functions-methods/.github/pre-lecture-quiz.md b/js-basics/2-functions-methods/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..2615466c
--- /dev/null
+++ b/js-basics/2-functions-methods/.github/pre-lecture-quiz.md
@@ -0,0 +1,12 @@
+*Complete this quiz in class*
+
+1. What's an argument?
+
+- [ ] It's something you declare in the function definition
+- [ ] It's something you pass into a function at invocation time
+- [ ] It's something you have with people you know
+
+2. True or false: a function must return something
+
+- [ ] true
+- [ ] false
diff --git a/js-basics/2-functions-methods/README.md b/js-basics/2-functions-methods/README.md
new file mode 100644
index 00000000..8fc8a40e
--- /dev/null
+++ b/js-basics/2-functions-methods/README.md
@@ -0,0 +1,190 @@
+# JavaScript Basics: Methods and Functions
+
+[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
+
+![JavaScript Basics - Functions](images/webdev101-js-functions.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
+
+## Functions
+
+At its core, a function is a block of code we can execute on demand. This is perfect for scenarios where we need to perform the same task multiple times; rather than duplicating the logic in multiple locations (which would make it hard to update when the time comes), we can centralize it in one location, and call it whenever we need the operation performed - you can even call functions from other functions!.
+
+Just as important is the ability to name a function. While this might seem trivial, the name provides a quick way of documenting a section of code. You could think of this as a label on a button. If I click on a button which reads "Cancel timer", I know it's going to stop running the clock.
+
+## Creating and calling a function
+
+The syntax for a function looks like the following:
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+If I wanted to create a function to display a greeting, it might look like this:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Whenever we want to call (or invoke) our function, we use the name of the function followed by `()`. It's worth noting the fact our function can be defined before or after we decide to call it; the JavaScript compiler will find it for you.
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **NOTE:** There is a special type of function known as a **method**, which you've already been using! In fact, we saw this in our demo above when we used `console.log`. What makes a method different from a function is a method is attached to an object (`console` in our example), while a function is free floating. You will hear many developers use these terms interchangeably.
+
+### Function best practices
+
+There are a handful of best practices to keep in mind when creating functions
+
+- As always, use descriptive names so you know what the function will do
+- Use **camelCasing** to combine words
+- Keep your functions focused on a specific task
+
+## Passing information to a function
+
+To make a function more reusable you'll often want to pass information into it. If we consider our `displayGreeting` example above, it will only display **Hello, world!**. Not the most useful function one could create. If we want to make it a little more flexible, like allowing someone to specify the name of the person to greet, we can add a **parameter**. A parameter (also sometimes called an **argument**), is additional information sent to a function.
+
+Parameters are listed in the definition part within parenthesis and are comma separated like so:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+We can update our `displayGreeting` to accept a name and have that displayed.
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+When we want to call our function and pass in the parameter, we specify it in the parenthesis.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher!" when run
+```
+
+## Default values
+
+We can make our function even more flexible by adding more parameters. But what if we don't want to require every value be specified? Keeping with our greeting example, we could leave name as required (we need to know who we're greeting), but we want to allow the greeting itself to be customized as desired. If someone doesn't want to customize it, we provide a default value instead. To provide a default value to a parameter, we set it much in the same way we set a value for a variable - `parameterName = 'defaultValue'`. To see a full example:
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+When we call the function, we can then decide if we want to set a value for `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// displays "Hello, Christopher"
+
+displayGreeting('Christopher', 'Hi');
+// displays "Hi, Christopher"
+```
+
+## Return values
+
+Up until now the function we built will always output to the [console](https://developer.mozilla.org/en-US/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere?
+
+We can do this by using a **return value**. A return value is returned by the function, and can be stored in a variable just the same as we could store a literal value such as a string or number.
+
+If a function does return something then the keyword `return` is used. The `return` keyword expects a value or reference of what's being returned like so:
+
+```javascript
+return myVariable;
+```  
+
+We could create a function to create a greeting message and return the value back to the caller
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+When calling this function we'll store the value in a variable. This is much the same way we'd set a variable to a static value (like `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Functions as parameters for functions
+
+As you progress in your programming career, you will come across functions which accept functions as parameters. This neat trick is commonly used when we don't know when something is going to occur or complete, but we know we need to perform an operation in response.
+
+As an example, consider [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function!
+
+If you run the code below, after 3 seconds you'll see the message **3 seconds has elapsed**.
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// timer value is in milliseconds
+setTimeout(3000, displayDone);
+```
+
+### Anonymous functions
+
+Let's take another look at what we've built. We're creating a function with a name which will be used one time. As our application gets more complex, we can see ourselves creating a lot of functions which will only be called once. This isn't ideal. As it turns out, we don't always need to provide a name!
+
+When we are passing a function as a parameter we can bypass creating one in advance and instead build one as part of the parameter. We use the same `function` keyword, but instead we build it as a parameter.
+
+Let's rewrite the code above to use an anonymous function:
+
+```javascript
+setTimeout(3000, function() {
+  console.log('3 seconds has elapsed');
+});
+```
+
+If you run our new code you'll notice we get the same results. We've created a function, but didn't have to give it a name!
+
+### Fat arrow functions
+
+One shortcut common in a lot of programming languages (including JavaScript) is the ability to use what's called an **arrow** or **fat arrow** function. It uses a special indicator of `=>`, which looks like an arrow - thus the name! By using `=>`, we are able to skip the `function` keyword.
+
+Let's rewrite our code one more time to use a fat arrow function:
+
+```javascript
+setTimeout(3000, () => {
+  console.log('3 seconds has elapsed');
+});
+```
+
+### When to use each strategy
+
+You've now seen we have three ways to pass a function as a parameter and might be wondering when to use each. If you know you'll be using the function more than once, create it as normal. If you'll be using it for just the one location, it's generally best to use an anonymous function. Whether or not you use a fat arrow function or the more traditional `function` syntax is up to you, but you will notice most modern developers prefer `=>`.
+
+---
+
+## 🚀 Challenge
+
+Can you articulate in one sentence the difference between functions and methods? Give it a try!
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax.
+
+## Assignment
+
+[Fun with Functions](assignment.md)
\ No newline at end of file
diff --git a/js-basics/2-functions-methods/assignment.md b/js-basics/2-functions-methods/assignment.md
new file mode 100644
index 00000000..4fbe387d
--- /dev/null
+++ b/js-basics/2-functions-methods/assignment.md
@@ -0,0 +1,13 @@
+# Fun with Functions
+
+## Instructions
+
+Create different functions, both functions that return something and functions that don't return anything.
+
+See if you can create a function that has a mix of parameters and parameters with default values.
+
+## Rubric
+
+| Criteria | Exemplary                                                                              | Adequate                                                         | Needs Improvement |
+| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
+|          | Solution is offered with two or more well-performing functions with diverse parameters | Working solution is offered with one function and few parameters | Solution has bugs |
\ No newline at end of file
diff --git a/js-basics/2-functions-methods/images/webdev101-js-functions.png b/js-basics/2-functions-methods/images/webdev101-js-functions.png
new file mode 100644
index 00000000..75db55d4
Binary files /dev/null and b/js-basics/2-functions-methods/images/webdev101-js-functions.png differ
diff --git a/js-basics/2-functions-methods/translations/README.de.md b/js-basics/2-functions-methods/translations/README.de.md
new file mode 100644
index 00000000..6b74a25d
--- /dev/null
+++ b/js-basics/2-functions-methods/translations/README.de.md
@@ -0,0 +1,195 @@
+# JavaScript-Grundlagen: Methoden und Funktionen
+
+[![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen")
+
+## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md)
+
+Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**.
+
+## Funktionen
+
+Eine Funktion ist im Kern ein Codeblock, den wir bei Bedarf ausführen können. Dies ist perfekt für Szenarien, in denen wir dieselbe Aufgabe mehrmals ausführen müssen. Anstatt die Logik an mehreren Orten zu duplizieren (was eine Aktualisierung zu gegebener Zeit erschweren würde), können wir sie an einem Ort zentralisieren und jederzeit aufrufen, wenn die Operation ausgeführt werden muss - Sie können sogar Funktionen von anderen Funktionen aus aufrufen!.
+
+Ebenso wichtig ist die Fähigkeit, eine Funktion zu benennen. Obwohl dies trivial erscheinen mag, bietet der Name eine schnelle Möglichkeit, einen Codeabschnitt zu dokumentieren. Sie können sich dies als Beschriftung auf einer Schaltfläche vorstellen. Wenn ich auf eine Schaltfläche mit der Aufschrift "Timer abbrechen" klicke, weiß ich, dass die Uhr nicht mehr läuft.
+
+## Eine Funktion erstellen und aufrufen
+
+Die Syntax für eine Funktion sieht folgendermaßen aus:
+
+
+```javascript
+function nameOfFunction() { // function definition
+ // function definition/body
+}
+```
+
+Wenn ich eine Funktion zum Anzeigen einer Begrüßung erstellen wollte, könnte dies folgendermaßen aussehen:
+
+```javascript
+function displayGreeting() {
+  console.log('Hello, world!');
+}
+```
+
+Wann immer wir unsere Funktion aufrufen (oder aufrufen) möchten, verwenden wir den Namen der Funktion, gefolgt von `()`. Es ist erwähnenswert, dass unsere Funktion definiert werden kann, bevor oder nachdem wir uns entscheiden, sie aufzurufen. Der JavaScript-Compiler findet es für Sie.
+
+
+```javascript
+// calling our function
+displayGreeting();
+```
+
+> **HINWEIS:** Es gibt eine spezielle Art von Funktion, die als **Methode** bekannt ist und die Sie bereits verwendet haben! Tatsächlich haben wir dies in unserer obigen Demo gesehen, als wir `console.log` verwendet haben. Was eine Methode von einer Funktion unterscheidet, ist, dass eine Methode an ein Objekt angehängt ist (in unserem Beispiel `console`), während eine Funktion frei schwebend ist. Sie werden hören, dass viele Entwickler diese Begriffe synonym verwenden.
+
+### Best Practices für Funktionen
+
+Es gibt eine Handvoll Best Practices, die beim Erstellen von Funktionen berücksichtigt werden müssen
+
+- Verwenden Sie wie immer beschreibende Namen, damit Sie wissen, was die Funktion tun wird
+- Verwenden Sie **camelCasing**, um Wörter zu kombinieren
+- Konzentrieren Sie Ihre Funktionen auf eine bestimmte Aufgabe
+
+## Informationen an eine Funktion übergeben
+
+Um eine Funktion wiederverwendbarer zu machen, möchten Sie häufig Informationen an sie weitergeben. Wenn wir unser Beispiel `displayGreeting` oben betrachten, wird nur **Hallo, Welt!** angezeigt. Nicht die nützlichste Funktion, die man erstellen könnte. Wenn wir es etwas flexibler gestalten möchten, z. B. jemandem erlauben, den Namen der zu begrüßenden Person anzugeben, können wir einen **Parameter** hinzufügen. Ein Parameter (manchmal auch als **Argument** bezeichnet) sind zusätzliche Informationen, die an eine Funktion gesendet werden.
+
+Die Parameter sind im Definitionsteil in Klammern aufgeführt und werden wie folgt durch Kommas getrennt:
+
+```javascript
+function name(param, param2, param3) {
+
+}
+```
+
+Wir können unser `displayGreeting` aktualisieren, um einen Namen zu akzeptieren und diesen anzeigen zu lassen.
+
+
+```javascript
+function displayGreeting(name) {
+  const message = `Hello, ${name}!`;
+  console.log(message);
+}
+```
+
+Wenn wir unsere Funktion aufrufen und den Parameter übergeben möchten, geben wir ihn in Klammern an.
+
+```javascript
+displayGreeting('Christopher');
+// zeigt "Hallo Christopher!" wenn ausgeführt
+```
+
+## Standardwerte
+
+Wir können unsere Funktion noch flexibler gestalten, indem wir weitere Parameter hinzufügen. Aber was ist, wenn nicht jeder Wert angegeben werden soll? In Übereinstimmung mit unserem Begrüßungsbeispiel könnten wir den Namen nach Bedarf belassen (wir müssen wissen, wen wir begrüßen), aber wir möchten, dass die Begrüßung selbst nach Wunsch angepasst wird. Wenn jemand es nicht anpassen möchte, geben wir stattdessen einen Standardwert an. Um einem Parameter einen Standardwert zuzuweisen, setzen wir ihn ähnlich wie einen Wert für eine Variable - `parameterName = 'defaultValue'`. Um ein vollständiges Beispiel zu sehen:
+
+
+```javascript
+function displayGreeting(name, salutation='Hello') {
+  console.log(`${salutation}, ${name}`);
+}
+```
+
+When we call the function, we can then decide if we want to set a value for `salutation`.
+
+```javascript
+displayGreeting('Christopher');
+// zeigt "Hallo Christopher!"
+
+displayGreeting('Christopher', 'Hi');
+// zeigt "Hi Christopher!"
+```
+
+## Rückgabewerte
+
+Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/en-US/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
+
+Wir können dies tun, indem wir einen **Rückgabewert** verwenden. Ein Rückgabewert wird von der Funktion zurückgegeben und kann in einer Variablen genauso gespeichert werden, wie wir einen Literalwert wie eine Zeichenfolge oder eine Zahl speichern könnten.
+
+Wenn eine Funktion etwas zurückgibt, wird das Schlüsselwort `return` verwendet. Das Schlüsselwort `return` erwartet einen Wert oder eine Referenz dessen, was wie folgt zurückgegeben wird:
+
+
+```javascript
+return myVariable;
+```  
+
+Wir könnten eine Funktion erstellen, um eine Begrüßungsnachricht zu erstellen und den Wert an den Anrufer zurückzugeben:
+
+```javascript
+function createGreetingMessage(name) {
+  const message = `Hello, ${name}`;
+  return message;
+}
+```
+
+Beim Aufruf dieser Funktion speichern wir den Wert in einer Variablen. Dies ist fast die gleiche Art und Weise, wie wir eine Variable auf einen statischen Wert setzen würden (wie `const name = 'Christopher'`).
+
+```javascript
+const greetingMessage = createGreetingMessage('Christopher');
+```
+
+## Funktionen als Parameter für Funktionen
+
+Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser nette Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas eintreten oder abgeschlossen sein wird, aber wir wissen, dass wir als Reaktion darauf eine Operation ausführen müssen.
+
+Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
+
+Wenn Sie den folgenden Code ausführen, wird nach 3 Sekunden die Meldung **3 Sekunden sind verstrichen** angezeigt.
+
+
+```javascript
+function displayDone() {
+  console.log('3 seconds has elapsed');
+}
+// Der Timer-Wert wird in Millisekunden angegeben
+setTimeout(3000, displayDone);
+```
+
+### Anonyme Funktionen
+
+Schauen wir uns noch einmal an, was wir gebaut haben. Wir erstellen eine Funktion mit einem Namen, der einmal verwendet wird. Wenn unsere Anwendung komplexer wird, können wir uns vorstellen, viele Funktionen zu erstellen, die nur einmal aufgerufen werden. Das ist nicht ideal. Wie sich herausstellt, müssen wir nicht immer einen Namen angeben!
+
+Wenn wir eine Funktion als Parameter übergeben, können wir die Erstellung einer Funktion im Voraus umgehen und stattdessen eine als Teil des Parameters erstellen. Wir verwenden das gleiche Schlüsselwort `function`, aber stattdessen erstellen wir es als Parameter.
+
+Schreiben wir den obigen Code neu, um eine anonyme Funktion zu verwenden:
+
+```javascript
+setTimeout(3000, function() {
+  console.log('3 seconds has elapsed');
+});
+```
+
+Wenn Sie unseren neuen Code ausführen, werden Sie feststellen, dass wir die gleichen Ergebnisse erhalten. Wir haben eine Funktion erstellt, mussten ihr aber keinen Namen geben!
+
+### Fettpfeilfunktionen
+
+Eine in vielen Programmiersprachen (einschließlich JavaScript) übliche Abkürzung ist die Möglichkeit, eine sogenannte **arrow** - oder **fat arrow** -Funktion zu verwenden. Es wird ein spezieller Indikator für `=>` verwendet, der wie ein Pfeil aussieht - daher der Name! Mit `=>` können wir das Schlüsselwort `function` überspringen.
+
+Lassen Sie uns unseren Code noch einmal umschreiben, um eine Fettpfeilfunktion zu verwenden:
+
+
+```javascript
+setTimeout(3000, () => {
+  console.log('3 seconds has elapsed');
+});
+```
+
+### Wann wird jede Strategie angewendet?
+
+Sie haben jetzt gesehen, dass wir drei Möglichkeiten haben, eine Funktion als Parameter zu übergeben, und fragen sich möglicherweise, wann sie jeweils verwendet werden sollen. Wenn Sie wissen, dass Sie die Funktion mehrmals verwenden, erstellen Sie sie wie gewohnt. Wenn Sie es nur für einen Ort verwenden, ist es im Allgemeinen am besten, eine anonyme Funktion zu verwenden. Ob Sie eine Fat-Arrow-Funktion oder die traditionellere `function` Syntax verwenden, liegt bei Ihnen, aber Sie werden feststellen, dass die meisten modernen Entwickler `=>` bevorzugen.
+
+
+---
+
+## 🚀 Herausforderung
+
+Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es!
+
+## [Quiz nach der Vorlesung](.github/post-lecture-quiz.md)
+
+## Review & Selbststudium
+
+Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
+
+## Zuordnung
+
+[Spaß mit Funktionen](assignment.md)
\ No newline at end of file
diff --git a/js-basics/2-functions-methods/translations/README.es.md b/js-basics/2-functions-methods/translations/README.es.md
new file mode 100644
index 00000000..460b624e
--- /dev/null
+++ b/js-basics/2-functions-methods/translations/README.es.md
@@ -0,0 +1,99 @@
+# Conceptos básicos de JavaScript: métodos y funciones
+
+[![Métodos y funciones](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos y funciones")
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+Cuando necesite su código para realizar una tarea, utilizará un método o una función. Analicemos las diferencias.
+
+## Funciones
+
+Una función es un bloque de código destinado a realizar una tarea. Usted crea una función usando la palabra clave `function`, un nombre, un conjunto de parámetros y la definición de la función también conocida como funciones _body_. La sintaxis de una función se parece a la siguiente:
+
+```javascript
+function name(param, param2, param3) { // definición de función
+ // definición de función/body
+}
+```
+
+## Métodos
+
+TODO
+
+### Parámetro
+
+Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
+
+```javascript
+(param, param2, param3)
+```
+
+### Parámetro
+
+Cuerpo de función
+
+Aquí define qué tarea debe realizar la función. Una función puede devolver algo o no. Si una función devuelve algo, entonces se usa la palabra clave `return`. La palabra clave `return` espera un valor o referencia de lo que se devuelve así:
+
+
+```javascript
+return myVariable;
+```  
+
+Un ejemplo más completo puede verse así:
+
+```javascript
+function add(firstValue, secondValue) {
+  let sum = firstValue + secondValue;
+  return sum;
+}
+```
+
+En el código anterior, se devuelve la variable `sum`.
+
+### Invocación
+
+Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El método `add()` introducido se puede invocar de la siguiente manera:
+
+
+```javascript
+let result = add(1, 3);
+console.log(result); // imprime 4
+```
+
+Los argumentos `1` y `3` están vinculados a los parámetros `firstValue` y `secondValue` debido al orden en el que se definen los parámetros.
+
+JavaScript es bastante flexible cuando se trata de invocaciones. No está obligado a proporcionar argumentos para todos los parámetros, el código se ejecutará de todos modos. Sin embargo, dependiendo de lo que le pase, es posible que el código no se comporte como se esperaba.
+
+> Desafío, intente llamar al método `add()` así `add(1)` y vea qué sucede
+
+### Valores predeterminados
+
+También existe el concepto de _ valores predeterminados_ en los parámetros. Esto significa que si no se pasa un argumento a un parámetro durante la invocación, el parámetro asumirá el valor predeterminado. Considere el siguiente código usando un valor predeterminado:
+
+
+```javascript
+function add5(firstValue, secondValue = 5) {
+  return firstValue + secondValue;
+}
+```
+
+La invocación de la función anterior podría verse así:
+
+```javascript
+add5 (4) // devuelve 9
+add5 (4,2) // devuelve 6
+```
+
+Cualquier parámetro con valores predeterminados debe estar al final de la lista de parámetros. La razón es que JavaScript intenta hacer coincidir argumentos con parámetros y los parámetros con valores predeterminados pueden omitirse en la invocación.
+
+🚀 Desafío:
+
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+TODO
+
+**Tarea**: [Práctica de tipos de datos](assignment.md)
+
diff --git a/js-basics/2-functions-methods/translations/assignment.de.md b/js-basics/2-functions-methods/translations/assignment.de.md
new file mode 100644
index 00000000..71f5ee61
--- /dev/null
+++ b/js-basics/2-functions-methods/translations/assignment.de.md
@@ -0,0 +1,13 @@
+# Spaß mit Funktionen
+
+## Anleitung
+
+Erstellen Sie verschiedene Funktionen, sowohl Funktionen, die etwas zurückgeben, als auch Funktionen, die nichts zurückgeben.
+
+Überprüfen Sie, ob Sie eine Funktion erstellen können, die eine Mischung aus Parametern und Parametern mit Standardwerten enthält.
+
+## Rubrik
+
+| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
+| -------- | -------------------------------------------------- ------------------------------------ | -------------------------------------------------- -------------- | ----------------- |
+| | Die Lösung wird mit zwei oder mehr leistungsfähigen Funktionen mit verschiedenen Parametern angeboten Arbeitslösung wird mit einer Funktion und wenigen Parametern angeboten Lösung hat Fehler |
\ No newline at end of file
diff --git a/js-basics/2-functions-methods/translations/assignment.es.md b/js-basics/2-functions-methods/translations/assignment.es.md
new file mode 100644
index 00000000..b1f066d9
--- /dev/null
+++ b/js-basics/2-functions-methods/translations/assignment.es.md
@@ -0,0 +1,13 @@
+# Diversión con funciones
+
+## Instrucciones
+
+Cree diferentes funciones, tanto funciones que devuelvan algo como funciones que no devuelvan nada.
+
+Vea si puede crear una función que tenga una combinación de parámetros y parámetros con valores predeterminados.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- ------------------------------------ | -------------------------------------------------- -------------- | ----------------- |
+| | La solución se ofrece con dos o más funciones de buen rendimiento con diversos parámetros | La solución de trabajo se ofrece con una función y pocos parámetros | La solución tiene errores |
diff --git a/js-basics/3-making-decisions/.github/post-lecture-quiz.md b/js-basics/3-making-decisions/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..954ef048
--- /dev/null
+++ b/js-basics/3-making-decisions/.github/post-lecture-quiz.md
@@ -0,0 +1,12 @@
+*Complete this quiz by checking one answer per question.*
+
+1. What would the following code return: `'1' == 1`
+
+- [ ] true
+- [ ] false
+
+2. Choose the correct operator to express _or_ logic
+
+- [ ] `a | b`
+- [ ] `a || b`
+- [ ] `a or b`
diff --git a/js-basics/3-making-decisions/.github/pre-lecture-quiz.md b/js-basics/3-making-decisions/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..25dbc957
--- /dev/null
+++ b/js-basics/3-making-decisions/.github/pre-lecture-quiz.md
@@ -0,0 +1,13 @@
+*Complete this quiz in class*
+
+1. The following operator `==` is called
+
+- [ ] Equality
+- [ ] Strict equality
+- [ ] Assignment
+
+2. A comparison in JavaScript returns what type?
+
+- [ ] boolean
+- [ ] null
+- [ ] string
diff --git a/js-basics/3-making-decisions/README.md b/js-basics/3-making-decisions/README.md
new file mode 100644
index 00000000..cabdf99d
--- /dev/null
+++ b/js-basics/3-making-decisions/README.md
@@ -0,0 +1,166 @@
+# JavaScript Basics: Making Decisions
+
+[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
+
+## A Brief Recap on Booleans
+
+Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
+
+Set your boolean to be true or false like this:
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ Booleans are named after the English mathematician, philosopher and logician George Boole (1815–1864).
+
+## Comparison Operators and Booleans
+
+Operators are used to evaluate conditions by making comparisons that will create a Boolean value. The following is a list of operators that are frequently used.
+
+| Symbol | Description                                                                                                                                                   | Example            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than the left                         | `5 < 6 // true`    |
+| `<=`   | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than or equal to the left | `5 <= 6 // true`   |
+| `>`    | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right                            | `5 > 6 // false`   |
+| `=>`   | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right    | `5 => 6 // false`  |
+| `===`  | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type.       | `5 === 6 // false` |
+| `!==`  | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return                                    | `5 !== 6 // true`  |
+
+✅ Check your knowledge by writing some comparisons in your browser's console. Does any returned data surprise you?
+
+## If Statement
+
+The if statement will run code in between its blocks if the condition is true.
+
+```javascript
+if (condition){
+    //Condition was true. Code in this block will run.
+}
+```
+
+Logical operators are often used to form the condition.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+```
+
+## IF..Else Statement
+
+The `else` statement will run the code in between its blocks when the condition is false. It's optional with an `if` statement.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+else{
+    //Condition was true. Code in this block will run.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables to change the returned `console.log()`.
+
+## Logical Operators and Booleans
+
+Decisions might require more than one comparison, and can be strung together with logical operators to produce a Boolean value.
+
+| Symbol | Description                                                                                     | Example                                                                 |
+| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **Logical AND**: Compares two Boolean expressions. Returns true **only** if both sides are true | `(5 > 6) && (5 < 6 ) //One side is false, other is true. Returns false` |
+| `||`   | **Logical OR**: Compares two Boolean expressions. Returns true if at least one side is true     | `(5 > 6) || (5 < 6) //One side is false, other is true. Returns true`   |
+| `!`    | **Logical NOT**: Returns the opposite value of a Boolean expression                             | `!(5 > 6) // 5 is not greater than 6, but "!" will return true`         |
+
+## Conditions and Decisions with Logical Operators
+
+Logical operators can be used to form conditions in if..else statements.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+    //Condition was true. Code in this block will run.
+    console.log("Getting a new laptop!");
+}
+else {
+    //Condition was true. Code in this block will run.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Negation operator
+
+You've seen so far how if you can use an `if...else` statement to create conditional logic. Anything that goes into an `if` needs to evaluate to true/false. By using the `!` operator you can _negate_ the expression. It would look like so:
+
+```javascript
+if (!condition) {
+  // runs if condition is false
+} else {
+  // runs if condition is true
+}
+```
+
+### Ternary expressions
+
+`if...else` isn't the only way to express decision logic. You can also use something called a ternary operator. The syntax for it looks like this:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>`
+```
+
+Below is a more tangible example:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10
+let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+```
+
+✅ Take a minute to read this code a few times. Do you understand how these operators are working?
+
+The above states that 
+- if `firstNumber` is larger than `secondNumber` 
+- then assign `firstNumber` to `biggestNumber` 
+- else assign `secondNumber`. 
+  
+The ternary expression is just a compact way of writing the code below:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Challenge
+
+Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Read more about the many operators available to the user [on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+
+## Assignment
+
+[Operators](assignment.md)
diff --git a/js-basics/3-making-decisions/assignment.md b/js-basics/3-making-decisions/assignment.md
new file mode 100644
index 00000000..88eca315
--- /dev/null
+++ b/js-basics/3-making-decisions/assignment.md
@@ -0,0 +1,40 @@
+# Operators
+
+## Instructions
+
+Play around with operators. Here's a suggestion for a program you can implement:
+
+You have a set of students from two different grading systems.
+
+### First grading system
+
+One grading system is defined as grades being from 1-5 where 3 and above means you pass the course.
+
+### Second grading system
+
+The other grade system has the following grades `A, A-, B, B-, C, C-` where `A` is the top grade and `C` is the lowest passing grade.
+
+### The task
+
+Given the following array `allStudents` representing all students and their grades, construct a new array `studentsWhoPass` containing all students who pass.
+
+> TIP, use a for-loop and if...else and comparison operators:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-'
+  1,
+  4
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Rubric
+
+| Criteria | Exemplary                      | Adequate                      | Needs Improvement               |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | Complete solution is presented | Partial solution is presented | Solution with bugs is presented |
diff --git a/js-basics/3-making-decisions/translations/README.de.md b/js-basics/3-making-decisions/translations/README.de.md
new file mode 100644
index 00000000..f2fe21f9
--- /dev/null
+++ b/js-basics/3-making-decisions/translations/README.de.md
@@ -0,0 +1,169 @@
+# JavaScript-Grundlagen: Entscheidungen treffen
+
+[![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen")
+
+## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md)
+
+Wenn Sie Entscheidungen treffen und die Reihenfolge steuern, in der Ihr Code ausgeführt wird, ist Ihr Code wiederverwendbar und robust. Dieser Abschnitt behandelt die Syntax zur Steuerung des Datenflusses in JavaScript und ihre Bedeutung bei Verwendung mit booleschen Datentypen.
+
+## Eine kurze Zusammenfassung der Booleschen Werte
+
+Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Werte helfen bei der Entscheidung, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind.
+
+Stellen Sie Ihren Booleschen Wert wie folgt auf wahr oder falsch ein:
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ Boolesche sind nach dem englischen Mathematiker, Philosophen und Logiker George Boole (1815–1864) benannt.
+
+## Vergleichsoperatoren und Boolesche Werte
+
+Operatoren werden verwendet, um Bedingungen durch Vergleiche zu bewerten, die einen Booleschen Wert erzeugen. Das Folgende ist eine Liste von Operatoren, die häufig verwendet werden.
+
+| Symbol | Beschreibung | Beispiel |
+| ------ | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------- | ------------------ |
+| `<` | **Größer als**: Vergleicht zwei Werte und gibt den booleschen Datentyp "true" zurück, wenn der Wert auf der rechten Seite größer als der linke ist `5 < 6 // true` |
+| `<=` | **Größer oder gleich**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn der Wert auf der rechten Seite größer oder gleich dem linken | ist `5 <= 6 // true` |
+| `>` | **Kleiner als**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn der Wert auf der linken Seite größer als der rechte ist `5 > 6 // false` |
+| `=>` | **Kleiner oder gleich**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn der Wert auf der linken Seite größer oder gleich dem rechten | ist `5 => 6 // false` |
+| `===` | **Strikte Gleichheit**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn die Werte rechts und links gleich sind UND denselben Datentyp haben. | `5 === 6 // false` |
+| `!==` | **Ungleichung**: Vergleicht zwei Werte und gibt den entgegengesetzten Booleschen Wert zurück, den ein strikter Gleichheitsoperator | zurückgeben würde `5 !== 6 // true` |
+
+✅ Überprüfen Sie Ihr Wissen, indem Sie einige Vergleiche in die Konsole Ihres Browsers schreiben. Überraschen Sie zurückgegebene Daten?
+
+## If-Anweisung
+
+Die if-Anweisung führt Code zwischen ihren Blöcken aus, wenn die Bedingung erfüllt ist.
+
+```javascript
+if (condition){
+    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
+}
+```
+
+Logische Operatoren werden häufig verwendet, um die Bedingung zu bilden.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
+    console.log("Getting a new laptop!");
+}
+```
+
+## IF..Else Anweisung
+
+Die `else`-Anweisung führt den Code zwischen ihren Blöcken aus, wenn die Bedingung falsch ist. Es ist optional mit einer `if`-Anweisung.
+
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
+    console.log("Getting a new laptop!");
+}
+else{
+    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Testen Sie Ihr Verständnis dieses Codes und des folgenden Codes, indem Sie ihn in einer Browserkonsole ausführen. Ändern Sie die Werte der Variablen currentMoney und LaptopPrice, um das zurückgegebene `console.log()` zu ändern.
+
+## Logische Operatoren und Boolesche Werte
+
+Entscheidungen erfordern möglicherweise mehr als einen Vergleich und können mit logischen Operatoren verknüpft werden, um einen Booleschen Wert zu erzeugen.
+
+
+| Symbol | Beschreibung | Beispiel |
+| ------ | -------------------------------------------------- ----------------------------------------- | -------------------------------------------------- --------------------- |
+| `&&` | **Logisches UND**: Vergleicht zwei Boolesche Ausdrücke. Gibt true **nur** zurück, wenn beide Seiten true | sind `(5 > 6) && (5 < 6) // Eine Seite ist falsch, die andere ist wahr. Gibt false` | zurück
+| `||` | **Logisches ODER**: Vergleicht zwei Boolesche Ausdrücke. Gibt true zurück, wenn mindestens eine Seite true ist `(5 > 6) || (5 < 6) // Eine Seite ist falsch, die andere ist wahr. Gibt true` | zurück
+| `!` | **Logisch NICHT**: Gibt den entgegengesetzten Wert eines Booleschen Ausdrucks | zurück `! (5 > 6) // 5 ist nicht größer als 6, aber "!" wird true zurückgeben` |
+
+## Bedingungen und Entscheidungen mit logischen Operatoren
+
+Logische Operatoren können verwendet werden, um Bedingungen in if..else-Anweisungen zu bilden.
+
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop-Preis bei 20 Prozent Rabatt
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
+    console.log("Getting a new laptop!");
+}
+else {
+    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Negationsoperator
+
+Sie haben bisher gesehen, wie Sie mit einer `if...else`-Anweisung eine bedingte Logik erstellen können. Alles, was in ein `if` geht, muss als wahr / falsch bewertet werden. Mit dem Operator `!` Können Sie den Ausdruck _negieren_. Es würde so aussehen:
+
+```javascript
+if (!condition) {
+  // wird ausgeführt, wenn die Bedingung falsch ist
+} else {
+  // wird ausgeführt, wenn die Bedingung erfüllt ist
+}
+```
+
+### Ternäre Ausdrücke
+
+`if...else` ist nicht die einzige Möglichkeit, Entscheidungslogik auszudrücken. Sie können auch einen so genannten ternären Operator verwenden. Die Syntax dafür sieht folgendermaßen aus:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>`
+```
+
+Below is a more tangible example:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10
+let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+```
+
+✅ Nehmen Sie sich eine Minute Zeit, um diesen Code einige Male zu lesen. Verstehen Sie, wie diese Operatoren arbeiten?
+
+Das Obige besagt das
+- wenn `firstNumber` größer als `secondNumber` ist
+- dann `firstNumber` zu `biggestNumber` zuweisen
+- sonst `secondNumber` zuweisen.
+  
+Der ternäre Ausdruck ist nur eine kompakte Art, den folgenden Code zu schreiben:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 Herausforderung
+
+Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird, und schreiben Sie es dann mit einem ternären Ausdruck neu. Was ist Ihre bevorzugte Syntax?
+
+## [Quiz nach der Vorlesung] (.github/post-lecture-quiz.md)
+
+## Review & Selbststudium
+
+Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) zur Verfügung stehen.
+
+## Zuordnung
+
+[Operators](assignment.md)
diff --git a/js-basics/3-making-decisions/translations/README.es.md b/js-basics/3-making-decisions/translations/README.es.md
new file mode 100644
index 00000000..890c8f1b
--- /dev/null
+++ b/js-basics/3-making-decisions/translations/README.es.md
@@ -0,0 +1,164 @@
+# Conceptos básicos de JavaScript: tomar decisiones
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos.
+
+## Un breve resumen sobre los valores booleanos
+
+Los booleanos pueden tener solo dos valores: `true` o` false`. Los booleanos ayudan a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones.
+
+Establezca su booleano en verdadero o falso de esta manera:
+
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ Los booleanos llevan el nombre del matemático, filósofo y lógico inglés George Boole. (1815–1864).
+
+## Operadores de comparación y valores booleanos
+
+Los operadores se utilizan para evaluar las condiciones haciendo comparaciones que crearán un valor booleano. La siguiente es una lista de operadores que se utilizan con frecuencia.
+
+| Símbolo | Descripción | Ejemplo |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Mayor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor que el del izquierdo                         | `5 < 6 // true`    |
+| `<=`   | **Mayor o igual que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor o igual que el del lado izquierdo | `5 <= 6 // true`   |
+| `>`    | **Menor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado izquierdo es mayor que el del derecho                            | `5 > 6 // false`   |
+| `=>`   | **Menor o igual que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado izquierdo es mayor o igual que el del lado derecho    | `5 => 6 // false`  |
+| `===`  |  **Igualdad estricta**: compara dos valores y devuelve el tipo de datos booleano `true` si los valores de la derecha y la izquierda son iguales Y son del mismo tipo de datos       | `5 === 6 // false` |
+| `!==`  | **Desigualdad**: compara dos valores y devuelve el valor booleano opuesto de lo que devolvería un operador de igualdad estricta                                    | `5 !== 6 // true`  |
+
+✅ Compruebe sus conocimientos escribiendo algunas comparaciones en la consola de su navegador. ¿Te sorprende algún dato devuelto?
+
+## Declaración If
+
+La sentencia if ejecutará código entre sus bloques si la condición es verdadera.
+
+```javascript
+if (condition){
+    //La condición era verdadera. Se ejecutará el código de este bloque.
+}
+```
+
+Los operadores lógicos se utilizan a menudo para formar la condición.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //La condición era verdadera. Se ejecutará el código de este bloque.
+    console.log("Getting a new laptop!");
+}
+```
+
+## IF..Else Declaración
+
+La declaración `else` ejecutará el código entre sus bloques cuando la condición sea falsa. Es opcional con una declaración `if`.
+
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //La condición era verdadera. Se ejecutará el código de este bloque.
+    console.log("Getting a new laptop!");
+}
+else{
+    //La condición era verdadera. Se ejecutará el código de este bloque.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+✅ Pruebe su comprensión de este código y del siguiente código ejecutándolo en una consola de navegador. Cambie los valores de las variables currentMoney y laptopPrice para cambiar el `console.log()` devuelto.
+
+## Operadores lógicos y booleanos
+
+Las decisiones pueden requerir más de una comparación y se pueden unir con operadores lógicos para producir un valor booleano.
+
+| Símbolo | Descripción | Ejemplo |
+| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **AND lógico**: compara dos expresiones booleanas. Devuelve verdadero **solo** si ambos lados son verdaderos | `(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve falso` |
+| `||`   | **OR lógico**: compara dos expresiones booleanas. Devuelve verdadero si al menos un lado es verdadero     | `(5 > 6) || (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve verdadero`   |
+| `!`    | **NOT lógico**: Devuelve el valor opuesto de una expresión booleana                             | `!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá verdadero`         |
+
+## Condiciones y decisiones con operadores lógicos
+
+Los operadores lógicos se pueden utilizar para formar condiciones en sentencias if..else.
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Precio del portátil al 20% de descuento
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+    //La condición era verdadera. Se ejecutará el código de este bloque.
+    console.log("Getting a new laptop!");
+}
+else {
+    //La condición era verdadera. Se ejecutará el código de este bloque.
+    console.log("Can't afford a new laptop, yet!");
+}
+```
+
+### Operador de negación
+
+Hasta ahora has visto cómo si puedes usar una instrucción `if...else` para crear lógica condicional. Cualquier cosa que entre en un `if` debe evaluarse como verdadero / falso. Utilizando el operador `!` Puede _negar_ la expresión. Se vería así:
+
+
+```javascript
+if (!condition) {
+  // se ejecuta si la condición es falsa
+} else {
+  // se ejecuta si la condición es verdadera
+}
+```
+
+### Expresiones ternarias
+
+`If...else` no es la única forma de expresar la lógica de decisión. También puede usar algo llamado operador ternario. La sintaxis tiene el siguiente aspecto:
+
+```javascript
+let variable = condition ? <return this if true> : <return this if false>`
+```
+
+A continuación se muestra un ejemplo más tangible:
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10
+let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+```
+
+✅ Tómese un minuto para leer este código varias veces. ¿Entiende cómo trabajan estos operadores?
+
+Lo anterior establece que
+- si `firstNumber` es mayor que `secondNumber`
+- luego asigne `firstNumber` a `biggestNumber`
+- de lo contrario, asigne `secondNumber`.
+  
+La expresión ternaria es solo una forma compacta de escribir el siguiente código:
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida?
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+
+**Asignación**: [Operadores](assignment.md)
+
diff --git a/js-basics/3-making-decisions/translations/assignment.de.md b/js-basics/3-making-decisions/translations/assignment.de.md
new file mode 100644
index 00000000..99b9e556
--- /dev/null
+++ b/js-basics/3-making-decisions/translations/assignment.de.md
@@ -0,0 +1,40 @@
+# Operatoren
+
+## Anleitung
+
+Spielen Sie mit den Betreibern herum. Hier ist ein Vorschlag für ein Programm, das Sie implementieren können:
+
+Sie haben eine Gruppe von Studenten aus zwei verschiedenen Bewertungssystemen.
+
+### Erstbewertungssystem
+
+Ein Bewertungssystem ist definiert als Noten von 1 bis 5, wobei 3 und höher bedeutet, dass Sie den Kurs bestehen.
+
+### Zweites Bewertungssystem
+
+Das andere Notensystem hat die folgenden Noten `A, A-, B, B-, C, C-` wobei `A` die Bestnote und `C` die niedrigste bestandene Note ist.
+
+### Die Aufgabe
+
+Erstellen Sie unter Berücksichtigung des folgenden Arrays `allStudents`, das alle Schüler und ihre Noten darstellt, ein neues Array `studentsWhoPass`, das alle bestandenen Schüler enthält.
+
+> TIPP, verwenden Sie eine for-Schleife und if...else und Vergleichsoperatoren:
+
+```javascript
+let allStudents = [
+  'A',
+  'B-'
+  1,
+  4
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Rubrik
+
+| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+| | Komplettlösung wird vorgestellt | Teillösung wird vorgestellt Lösung mit Fehlern wird vorgestellt |
\ No newline at end of file
diff --git a/js-basics/3-making-decisions/translations/assignment.es.md b/js-basics/3-making-decisions/translations/assignment.es.md
new file mode 100644
index 00000000..4cd57472
--- /dev/null
+++ b/js-basics/3-making-decisions/translations/assignment.es.md
@@ -0,0 +1,41 @@
+# Operadores
+
+## Instrucciones
+
+Juega con los operadores. Aquí hay una sugerencia de un programa que puede implementar.
+
+Tiene un conjunto de estudiantes de dos sistemas de calificación diferentes.
+
+### Primer sistema de calificación
+
+Un sistema de calificación se define como calificaciones del 1 al 5, donde 3 y más significa que aprueba el curso.
+
+### Segundo sistema de calificación
+
+El otro sistema de calificaciones tiene las siguientes calificaciones `A, A-, B, B-, C, C-` donde `A` es la calificación más alta y `C` es la calificación más baja para aprobar.
+
+### La tarea
+
+Dada la siguiente matriz `allStudents` que representa a todos los estudiantes y sus calificaciones, construya una nueva matriz `StudentsWhoPass` que contenga a todos los estudiantes que aprobaron.
+
+> SUGERENCIA, use un bucle for y if ... else y operadores de comparación:
+
+
+```javascript
+let allStudents = [
+  'A',
+  'B-'
+  1,
+  4
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+| | Se presenta la solución completa | Se presenta solución parcial | Se presenta solución con errores |
diff --git a/js-basics/4-arrays-loops/.github/post-lecture-quiz.md b/js-basics/4-arrays-loops/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..b088a240
--- /dev/null
+++ b/js-basics/4-arrays-loops/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz by checking one answer per question.*
+
+1. What part of a for-loop would you need to modify to increment its iteration by 5
+
+- [ ] condition
+- [ ] counter
+- [ ] iteration-expression
+
+2. What's the difference between a `while` and a `for-loop`
+
+- [ ] A `for-loop` has a counter and iteration-expression, where `while` only has a condition
+- [ ] A `while` has a counter and iteration-expression where `for-loop` only has a condition
+- [ ] They are the same, just an alias for one another
+
+3. Given the code `for (let i=1; i < 5; i++)`, how many iterations will it perform?
+   
+- [ ] 5
+- [ ] 4
\ No newline at end of file
diff --git a/js-basics/4-arrays-loops/.github/pre-lecture-quiz.md b/js-basics/4-arrays-loops/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..59511da7
--- /dev/null
+++ b/js-basics/4-arrays-loops/.github/pre-lecture-quiz.md
@@ -0,0 +1,13 @@
+*Complete this quiz in class*
+
+1. To refer to specific item in an array, you would use a
+
+- [ ] square bracket `[]`
+- [ ] index
+- [ ] curly braces `{}`
+
+2. How do you get the number of items in an array
+
+- [ ] The `len(array)` method
+- [ ] The property `size` on the array
+- [ ] The `length` property on the array
diff --git a/js-basics/4-arrays-loops/README.md b/js-basics/4-arrays-loops/README.md
new file mode 100644
index 00000000..599b3ec4
--- /dev/null
+++ b/js-basics/4-arrays-loops/README.md
@@ -0,0 +1,118 @@
+# JavaScript Basics: Arrays and Loops
+
+[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
+
+## Arrays
+
+Working with data is a common task for any language, and it's a much easier task when data is organized in a structural format, such as arrays. With arrays, data is stored in a structure similar to a list. One major benefit of arrays is that you can store different types of data in one array.
+
+✅ Arrays are all around us! Can you think of a real-life example of an array, such as a solar panel array?
+
+The syntax for an array is a pair of square brackets.
+
+`let myArray = [];`
+
+This is an empty array, but arrays can be declared already populated with data. Multiple values in an array are separated by a comma.
+
+`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+The array values are assigned a unique value called the **index**, a whole number that is assigned based on its distance from the beginning of the array. In the example above, the string value "Chocolate" has an index of 0, and the index of "Rocky Road" is 4. Use the index with square brackets to retrieve, change, or insert array values.
+
+✅ Does it surprise you that arrays start at the zero index? In some programming languages, indexes start at 1. There's an interesting history around this, which you can [read on Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+You can leverage the index to change a value, like this:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
+```
+
+And you can insert a new value at a given index like this:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
+```
+
+✅ A more common way to push values to an array is by using array operators such as array.push()
+
+To find out how many items are in an array, use the `length` property.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Try it yourself! Use your browser's console to create and manipulate an array of your own creation.
+
+## Loops
+
+Loops allow for repetitive or **iterative** tasks, and can save a lot of time and code. Each iteration can vary in their variables, values, and conditions. There are different types of loops in JavaScript, and they have small differences, but essentially do the same thing: loop over data.
+
+### For Loop
+
+The `for` loop requires 3 parts to iterate:
+    - `counter` A variable that is typically initialized with a number that counts the number of iterations.
+    - `condition` Expression that uses comparison operators to cause the loop to stop when `true`
+    - `iteration-expression` Runs at the end of each iteration, typically used to change the counter value
+  
+```javascript
+    //Counting up to 10
+    for (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+✅ Run this code in a browser console. What happens when you make small changes to the counter, condition, or iteration expression? Can you make it run backwards, creating a countdown?
+
+### While loop
+
+Unlike the syntax for the `for` loop, `while` loops only require a condition that will stop the loop when `true`. Conditions in loops usually rely on other values like counters, and must be managed during the loop. Starting values for counters must be created outside the loop, and any expressions to meet a condition, including changing the counter must be maintained inside the loop.
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Why would you choose a for loop vs. a while loop? 17K viewers had the same question on StackOverflow, and some of the opinions [might be interesting to you](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Loops and Arrays
+
+Arrays are often used with loops because most conditions require the length of the array to stop the loop, and the index can also be the counter value.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Ends when all flavors are printed
+```
+
+✅ Experiment with looping over an array of your own making in your browser's console. 
+
+---
+
+## 🚀 Challenge
+
+There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
+
+## Assignment
+
+[Loop an Array](assignment.md)
diff --git a/js-basics/4-arrays-loops/assignment.md b/js-basics/4-arrays-loops/assignment.md
new file mode 100644
index 00000000..0b9bd6dc
--- /dev/null
+++ b/js-basics/4-arrays-loops/assignment.md
@@ -0,0 +1,13 @@
+# Loop an Array
+
+## Instructions
+
+Create a program that lists every 3rd number between 1-20 and prints it to the console.
+
+> TIP: use a for-loop and modify the iteration-expression
+
+## Rubric
+
+| Criteria | Exemplary                               | Adequate                 | Needs Improvement              |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | Program runs correctly and is commented | Program is not commented | Program is incomplete or buggy |
\ No newline at end of file
diff --git a/js-basics/4-arrays-loops/translations/README.de.md b/js-basics/4-arrays-loops/translations/README.de.md
new file mode 100644
index 00000000..5442a4ba
--- /dev/null
+++ b/js-basics/4-arrays-loops/translations/README.de.md
@@ -0,0 +1,122 @@
+# JavaScript-Grundlagen: Arrays und Loops
+
+[![Arrays und Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
+
+## [Pre-Lecture Quiz](.github/pre-lecture-quiz.md)
+
+Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. In dieser Lektion lernen Sie Arrays und Loops kennen, mit denen Daten bearbeitet werden.
+
+## Arrays
+
+Das Arbeiten mit Daten ist eine häufige Aufgabe für jede Sprache und eine viel einfachere Aufgabe, wenn Daten in einem strukturellen Format wie Arrays organisiert sind. Bei Arrays werden Daten in einer Struktur ähnlich einer Liste gespeichert. Ein Hauptvorteil von Arrays besteht darin, dass Sie verschiedene Datentypen in einem Array speichern können.
+
+✅ Arrays sind überall um uns herum! Können Sie sich ein reales Beispiel für ein Array vorstellen, beispielsweise ein Solarpanel-Array?
+
+Die Syntax für ein Array besteht aus zwei eckigen Klammern.
+
+`let myArray = [];`
+
+Dies ist ein leeres Array, aber Arrays können als bereits mit Daten gefüllt deklariert werden. Mehrere Werte in einem Array werden durch ein Komma getrennt.
+
+`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+Den Array-Werten wird ein eindeutiger Wert zugewiesen, der als **Index** bezeichnet wird. Diese ganze Zahl wird basierend auf dem Abstand vom Anfang des Arrays zugewiesen. Im obigen Beispiel hat der Zeichenfolgenwert "Chocolate" den Index 0 und der Index "Rocky Road" den Wert 4. Verwenden Sie den Index in eckigen Klammern, um Array-Werte abzurufen, zu ändern oder einzufügen.
+
+✅ Überrascht es Sie, dass Arrays am Nullindex beginnen? In einigen Programmiersprachen beginnen die Indizes bei 1. Es gibt eine interessante Geschichte, die Sie [auf Wikipedia lesen](https://en.wikipedia.org/wiki/Zero-based_numbering) können.
+
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Sie können den Index nutzen, um einen Wert wie folgt zu ändern:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //ändert "Rocky Road" in "Butter Pecan"
+```
+
+And you can insert a new value at a given index like this:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" hinzugefügt
+```
+
+
+✅ Eine häufigere Methode zum Übertragen von Werten in ein Array ist die Verwendung von Array-Operatoren wie array.push()
+
+Verwenden Sie die Eigenschaft `length`, um herauszufinden, wie viele Elemente sich in einem Array befinden.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ Probieren Sie es aus! Verwenden Sie die Konsole Ihres Browsers, um ein Array Ihrer eigenen Erstellung zu erstellen und zu bearbeiten.
+
+## Schleifen
+
+Schleifen ermöglichen sich wiederholende oder **iterative** Aufgaben und können viel Zeit und Code sparen. Jede Iteration kann in ihren Variablen, Werten und Bedingungen variieren. Es gibt verschiedene Arten von Schleifen in JavaScript, und sie weisen kleine Unterschiede auf, tun jedoch im Wesentlichen dasselbe: Schleifen über Daten.
+
+### For Loop
+
+Die `for`-Schleife benötigt 3 Teile, um zu iterieren:
+     - `counter` Eine Variable, die normalerweise mit einer Zahl initialisiert wird, die die Anzahl der Iterationen zählt.
+     - `condition` Ausdruck, der Vergleichsoperatoren verwendet, um zu bewirken, dass die Schleife stoppt, wenn `true`
+     - `iteration-expression` Wird am Ende jeder Iteration ausgeführt und normalerweise zum Ändern des Zählerwerts verwendet
+  
+```javascript
+    //Counting up to 10
+    for (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+✅ Führen Sie diesen Code in einer Browserkonsole aus. Was passiert, wenn Sie kleine Änderungen am Zähler, der Bedingung oder dem Iterationsausdruck vornehmen? Können Sie es rückwärts laufen lassen und einen Countdown erstellen?
+
+### While-Schleife
+
+Im Gegensatz zur Syntax für die `for` -Schleife erfordern `while`-Schleifen nur eine Bedingung, die die Schleife stoppt, wenn `true`. Bedingungen in Schleifen hängen normalerweise von anderen Werten wie Zählern ab und müssen während der Schleife verwaltet werden. Startwerte für Zähler müssen außerhalb der Schleife erstellt werden, und alle Ausdrücke, die eine Bedingung erfüllen, einschließlich des Änderns des Zählers, müssen innerhalb der Schleife beibehalten werden.
+
+
+```javascript
+//Counting up to 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ Warum sollten Sie eine for-Schleife oder eine while-Schleife wählen? 17.000 Zuschauer hatten dieselbe Frage zu StackOverflow und einige der Meinungen [könnten für Sie interessant sein](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Schleifen und Arrays
+
+Arrays werden häufig mit Schleifen verwendet, da die meisten Bedingungen die Länge des Arrays erfordern, um die Schleife zu stoppen, und der Index auch der Zählerwert sein kann.
+
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Endet, wenn alle Geschmacksrichtungen gedruckt sind
+```
+
+✅ Experimentieren Sie mit dem Durchlaufen eines Arrays, das Sie selbst erstellt haben, in der Konsole Ihres Browsers.
+
+---
+
+## 🚀 Herausforderung
+
+Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu.
+
+## [Quiz nach der Vorlesung](.github/post-lecture-quiz.md)
+
+## Review & Selbststudium
+
+An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation.
+
+## Zuordnung
+
+[Array schleifen](assignment.md)
diff --git a/js-basics/4-arrays-loops/translations/README.es.md b/js-basics/4-arrays-loops/translations/README.es.md
new file mode 100644
index 00000000..a8167c56
--- /dev/null
+++ b/js-basics/4-arrays-loops/translations/README.es.md
@@ -0,0 +1,114 @@
+# Conceptos básicos de JavaScript: matrices y bucles
+
+[![Matrices y bucles](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Matrices y bucles")
+
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderá sobre matrices y bucles, que se utilizan para manipular datos.
+
+## Matrices
+
+Trabajar con datos es una tarea común para cualquier lenguaje y es una tarea mucho más fácil cuando los datos están organizados en un formato estructural, como matrices. Con las matrices, los datos se almacenan en una estructura similar a una lista. Uno de los principales beneficios de las matrices es que puede almacenar diferentes tipos de datos en una matriz.
+
+✅ ¡Las matrices están a nuestro alrededor! ¿Puede pensar en un ejemplo de la vida real de una matriz, como una matriz de paneles solares?
+
+La sintaxis de una matriz es un par de corchetes.
+
+`let myArray = [];`
+
+Esta es una matriz vacía, pero las matrices se pueden declarar ya pobladas con datos. Varios valores en una matriz están separados por una coma.
+
+`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+A los valores de la matriz se les asigna un valor único llamado **índice**, un número entero que se asigna en función de su distancia desde el principio de la matriz. En el ejemplo anterior, el valor de cadena "Chocolate" tiene un índice de 0 y el índice de "Rocky Road" es 4. Utilice el índice entre corchetes para recuperar, cambiar o insertar valores de matriz.
+
+✅ ¿Le sorprende que las matrices comiencen en el índice cero? En algunos lenguajes de programación, los índices comienzan en 1. Hay una historia interesante en torno a esto, que puedes [leer en Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+Puede aprovechar el índice para cambiar un valor, como este:
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //Se cambió "Rocky Road" a "Butter Pecan"
+```
+
+Y puede insertar un nuevo valor en un índice dado como este:
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //Añadida "Cookie Dough"
+```
+
+✅ Una forma más común de enviar valores a una matriz es mediante el uso de operadores de matriz como array.push()
+
+Para saber cuántos elementos hay en una matriz, use la propiedad `length`.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ ¡Inténtalo tú mismo! Utilice la consola de su navegador para crear y manipular una matriz de su propia creación.
+
+## Bucles
+
+Los bucles permiten tareas repetitivas o **iterativas** y pueden ahorrar mucho tiempo y código. Cada iteración puede variar en sus variables, valores y condiciones. Hay diferentes tipos de bucles en JavaScript y tienen pequeñas diferencias, pero esencialmente hacen lo mismo: bucles sobre datos.
+
+### En bucle
+
+El ciclo `for` requiere 3 partes para iterar:
+     - `counter` Una variable que normalmente se inicializa con un número que cuenta el número de iteraciones.
+     - `condition` Expresión que usa operadores de comparación para hacer que el bucle se detenga cuando `true`
+     - `iteration-expression` Se ejecuta al final de cada iteración, generalmente se usa para cambiar el valor del contador
+
+  
+```javascript
+    //Contando hasta 10
+    for (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+✅ Ejecute este código en una consola de navegador. ¿Qué sucede cuando realiza pequeños cambios en el contador, la condición o la expresión de iteración? ¿Puedes hacer que corra al revés, creando una cuenta regresiva?
+
+### Bucle while
+
+A diferencia de la sintaxis para el ciclo `for`, los ciclos `while` solo requieren una condición que detendrá el ciclo cuando sea `true`. Las condiciones en los bucles suelen depender de otros valores, como contadores, y deben gestionarse durante el bucle. Los valores iniciales para los contadores deben crearse fuera del ciclo, y cualquier expresión que cumpla una condición, incluido el cambio del contador, debe mantenerse dentro del ciclo.
+
+```javascript
+//Contando hasta 10
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ ¿Por qué elegiría un bucle for frente a un bucle while? 17K espectadores tenían la misma pregunta sobre StackOverflow, y algunas de las opiniones [podrían ser interesantes para usted](https://stackoverflow.com/questions/39969145/ while-loops-vs-for-loops-in-javascript).
+
+## Bucles y matrices
+
+Las matrices se utilizan a menudo con bucles porque la mayoría de las condiciones requieren la longitud de la matriz para detener el bucle, y el índice también puede ser el valor del contador.
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //Termina cuando se imprimen todos los sabores
+```
+
+✅ Experimente recorriendo una serie de su propia creación en la consola de su navegador.
+
+🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación.
+
+**Asignación**: [Bucle de una matriz](assignment.md)
diff --git a/js-basics/4-arrays-loops/translations/assignment.de.md b/js-basics/4-arrays-loops/translations/assignment.de.md
new file mode 100644
index 00000000..88cac1a0
--- /dev/null
+++ b/js-basics/4-arrays-loops/translations/assignment.de.md
@@ -0,0 +1,13 @@
+# Schleife ein Array
+
+## Anleitung
+
+Erstellen Sie ein Programm, das jede dritte Zahl zwischen 1 und 20 auflistet und auf der Konsole druckt.
+
+> TIPP: Verwenden Sie eine for-Schleife und ändern Sie den Iterationsausdruck
+
+## Rubrik
+
+| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+| | Programm läuft korrekt und ist kommentiert | Programm ist nicht kommentiert | Programm ist unvollständig oder fehlerhaft
diff --git a/js-basics/4-arrays-loops/translations/assignment.es.md b/js-basics/4-arrays-loops/translations/assignment.es.md
new file mode 100644
index 00000000..5d269bb2
--- /dev/null
+++ b/js-basics/4-arrays-loops/translations/assignment.es.md
@@ -0,0 +1,13 @@
+# Hacer bucle en una matriz
+
+## Instrucciones
+
+Cree un programa que enumere cada tercer número entre 1 y 20 y lo imprima en la consola.
+
+> SUGERENCIA: use un bucle for y modifique la expresión-iteración
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+| | El programa se ejecuta correctamente y está comentado | Programa no comentado | El programa está incompleto o con errores |
\ No newline at end of file
diff --git a/js-basics/LICENSE b/js-basics/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/js-basics/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/js-basics/README.md b/js-basics/README.md
new file mode 100644
index 00000000..02c69bcb
--- /dev/null
+++ b/js-basics/README.md
@@ -0,0 +1,14 @@
+# Introduction to JavaScript
+
+JavaScript is the language of the web. In these four lessons, you'll learn its basics.
+
+### Topics
+
+1. [Variables and Data Types](1-data-types/README.md)
+2. [Functions and Methods](2-functions-methods/README.md)
+3. [Making Decisions with JavaScript](3-making-decisions/README.md)
+4. [Arrays and Loops](4-arrays-loops/README.md)
+
+### Credits
+
+These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/js-basics/translations/README.de.md b/js-basics/translations/README.de.md
new file mode 100644
index 00000000..3306aa2b
--- /dev/null
+++ b/js-basics/translations/README.de.md
@@ -0,0 +1,14 @@
+# Einführung in JavaScript
+
+JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernen Sie die Grundlagen.
+
+### Themen
+
+1. [Variablen und Datentypen](1-Datentypen/README.md)
+2. [Funktionen und Methoden](2-functions-methods/README.md)
+3. [Entscheidungen mit JavaScript treffen](3-making-decisions/README.md)
+4. [Arrays und Loops](4-arrays-loops/README.md)
+
+### Credits
+
+Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/js-basics/translations/README.es.md b/js-basics/translations/README.es.md
new file mode 100644
index 00000000..bd17b271
--- /dev/null
+++ b/js-basics/translations/README.es.md
@@ -0,0 +1,14 @@
+# Introducción a JavaScript
+
+JavaScript es el lenguaje de la web. En estas cuatro lecciones, aprenderá sus conceptos básicos.
+
+### Temas
+
+1. [Variables y tipos de datos](data-types/README.md)
+2. [Funciones y métodos](variables-datatypes/README.md)
+3. [Toma de decisiones con JavaScript](making-decisions/README.md)
+4. [Arrays and Loops](arrays-loops/README.md)
+
+### Créditos
+
+Estas lecciones fueron escritas con ♥ ️ por [Jasmine Greenaway](https://twitter.com/paladique) y [Chris Noring](https://twitter.com/chris_noring)
diff --git a/lesson-template/.github/post-lecture-quiz.md b/lesson-template/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..c4d3e589
--- /dev/null
+++ b/lesson-template/.github/post-lecture-quiz.md
@@ -0,0 +1,24 @@
+*Complete this quiz along with your submission by checking one answer per question.*
+
+You will need to complete the following learn module(s) to complete the quiz:
+
+[Learn Link 1]()
+[Learn Link 2]()
+
+1. [Q1]
+
+- [ ] [Option 1]
+- [ ] [Option 2]
+- [ ] [Option 3]
+
+2. [Q2]
+
+- [ ] [Option 1]
+- [ ] [Option 2]
+- [ ] [Option 3]
+
+3. [Q3]
+   
+- [ ] [Option 1]
+- [ ] [Option 2]
+- [ ] [Option 3]
\ No newline at end of file
diff --git a/lesson-template/.github/pre-lecture-quiz.md b/lesson-template/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..48271a9c
--- /dev/null
+++ b/lesson-template/.github/pre-lecture-quiz.md
@@ -0,0 +1,19 @@
+*Complete this quiz in class*
+
+1. [Q1]
+
+- [ ] [Option 1]
+- [ ] [Option 2]
+- [ ] [Option 3]
+
+2. [Q2]
+
+- [ ] [Option 1]
+- [ ] [Option 2]
+- [ ] [Option 3]
+
+3. [Q3]
+   
+- [ ] [Option 1]
+- [ ] [Option 2]
+- [ ] [Option 3]
\ No newline at end of file
diff --git a/lesson-template/LICENSE b/lesson-template/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/lesson-template/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/lesson-template/README.md b/lesson-template/README.md
new file mode 100644
index 00000000..6bd23057
--- /dev/null
+++ b/lesson-template/README.md
@@ -0,0 +1,51 @@
+# [Lesson Topic]
+
+![Embed a video here](video-url)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+[Describe what we will learn]
+
+### Introduction
+
+Describe what will be covered
+
+> Notes
+
+### Prerequisite
+
+What steps should have been covered before this lesson?
+
+### Preparation
+
+Preparatory steps to start this lesson
+
+---
+
+[Step through content in blocks]
+
+## [Topic 1]
+
+### Task:
+
+Work together to progressively enhance your codebase to build the project with shared code:
+
+```html
+code blocks
+```
+
+✅ Knowledge Check - use this moment to stretch students' knowledge with open questions
+
+## [Topic 2]
+
+## [Topic 3]
+
+🚀 Challenge: Add a challenge for students to work on collaboratively in class to enhance the project
+
+Optional: add a screenshot of the completed lesson's UI if appropriate
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+**Assignment Due [MM/YY]**: [Assignment Name](assignment.md)
diff --git a/lesson-template/assignment.md b/lesson-template/assignment.md
new file mode 100644
index 00000000..d2e0b3c9
--- /dev/null
+++ b/lesson-template/assignment.md
@@ -0,0 +1,9 @@
+# [Assignment Name]
+
+## Instructions
+
+## Rubric
+
+| Criteria | Exemplary | Adequate | Needs Improvement |
+| -------- | --------- | -------- | ----------------- |
+|          |           |          |                   |
diff --git a/space-game/.gitignore b/space-game/.gitignore
new file mode 100644
index 00000000..ab821240
--- /dev/null
+++ b/space-game/.gitignore
@@ -0,0 +1,2 @@
+.ionide
+.DS_Store
\ No newline at end of file
diff --git a/space-game/1-introduction/.github/post-lecture-quiz.md b/space-game/1-introduction/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..13b64ea4
--- /dev/null
+++ b/space-game/1-introduction/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. Classes rely on inheritance to ascribe to behaviors
+
+- [ ] true
+- [ ] false
+
+2. Composition is a preferred design pattern for game objects
+
+- [ ] true
+- [ ] false
+
+3. Pub/Sub stands for:
+   
+- [ ] Publish/Subscribe
+- [ ] Print/Staple
+- [ ] Publish/Sanitize
\ No newline at end of file
diff --git a/space-game/1-introduction/.github/pre-lecture-quiz.md b/space-game/1-introduction/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..a3bf95ef
--- /dev/null
+++ b/space-game/1-introduction/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*A warm-up quiz about game development using JavaScript*
+
+Complete this quiz in class
+
+1. JavaScript is an unpopular language for building games
+
+- [ ] [true]
+- [ ] [false]
+
+2. Pub/Sub is a preferred pattern for managing the game's assets and flow
+
+- [ ] [true]
+- [ ] [false]
+
+3. Object inheritance can be handled by either using classes or composition
+
+- [ ] [true]
+- [ ] [false]
\ No newline at end of file
diff --git a/space-game/1-introduction/LICENSE b/space-game/1-introduction/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/space-game/1-introduction/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/space-game/1-introduction/README.md b/space-game/1-introduction/README.md
new file mode 100644
index 00000000..797b8ed8
--- /dev/null
+++ b/space-game/1-introduction/README.md
@@ -0,0 +1,220 @@
+# Build a Space Game Part I: Introduction
+
+![video](video-url)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Inheritance and Composition in game development
+
+In earlier lessons, there was not much need to worry about the design architecture of the apps you built, as the projects were very small in scope. However, when your applications grow in size and scope, architectural decisions become a larger concern. There are two major approaches to creating larger applications in JavaScript: *composition* or *inheritance*. There are pros and cons to both but let's explain them from within the context of a game.
+
+✅ One of the most famous programming books ever written has to do with [design patterns](https://en.wikipedia.org/wiki/Design_Patterns).
+
+In a game you have `game objects` which are objects that exist on a screen. This means they have a location on a cartesian coordinate system, characterized by having an `x` and `y` coordinate. As you develop a game you will notice that all your game objects have a standard property, common for every game you create, namely elements that are:
+
+- **location-based** Most, if not all, game elements are location based. This means that they have a location, an `x` and `y`.
+- **movable** These are objects that can move to a new location. This is typically a hero, a monster or an NPC (a non player character), but not for example, a static object like a tree.
+- **self-destructing** These objects only exist for a set period of time before they set themselves up for deletion. Usually this is represented by a `dead` or `destroyed` boolean that signals to the game engine that this object should no longer be rendered.
+- **cool-down** 'Cool-down' is a typical property among short-lived objects. A typical example is a piece of text or graphical effect like an explosion that should only be seen for a few milliseconds.
+
+✅ Think about a game like Pac-Man. Can you identify the four object types listed above in this game?
+
+### Expressing behavior
+
+All we described above are behavior that game objects can have. So how do we encode those? We can express this behavior as methods associated to either classes or objects.
+
+**Classes**
+
+The idea is to use `classes` in conjunction with `inheritance` to accomplish adding a certain behavior to a class.
+
+✅ Inheritance is an important concept to understand. Learn more on [MDN's article about inheritance](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Expressed via code, a game object can typically look like this:
+
+```javascript
+
+//set up the class GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//this class will extend the GameObject's inherent class properties
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//this movable object can be moved on the screen
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//this class, on the other hand, only inherits the GameObject properties
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+//a hero can move...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//but a tree cannot
+const tree = new Tree();
+```
+
+✅ Take a few minutes to re-envision a Pac-Man hero (Inky, Pinky or Blinky, for example) and how it would be written in JavaScript. 
+
+**Composition**
+
+A different way of handling object inheritance is by using *Composition*. Then, objects express their behavior like this:
+
+```javascript
+//create a constant gameObject
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...and a constant movable
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//then the constant movableObject is composed of the gameObject and movable constants
+const movableObject = {...gameObject, ...movable};
+
+//then create a function to create a new Hero who inherits the movableObject properties
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...and a static object that inherits only the gameObject properties
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//create the hero and move it
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//and create a static tree which only stands around
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**Which pattern should I use?**
+
+It's up to you which pattern you choose. JavaScript supports both these paradigms.
+
+--
+
+Another pattern common in game development addresses the problem of handling the game's user experience and performance.
+
+## Pub/sub pattern
+
+✅ Pub/Sub stands for 'publish-subscribe'
+
+This pattern addresses the idea that the disparate parts of your application shouldn't know about one another. Why is that? It makes it a lot easier to see what's going on in general if various parts are separated. It also makes it easier to suddenly change behavior if you need to. How do we accomplish this? We do this by establishing some concepts:
+
+- **message**: A message is usually a text string accompanied by an optional payload (a piece of data that clarifies what the message is about). A typical message in a game can be `KEY_PRESSED_ENTER`.
+- **publisher**: This element *publishes* a message and sends it out to all subscribers.
+- **subscriber**: This element *listens* to specific messages and carries out some task as the result of receiving this message, such as firing a laser.
+
+The implementation is quite small in size but it's a very powerful pattern. Here's how it can be implemented:
+
+```javascript
+//set up an EventEmitter class that contains listeners
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//when a message is received, let the listener to handle its payload
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//when a message is sent, send it to a listener with some payload
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+To use the above code we can create a very small implementation:
+
+```javascript
+//set up a message structure
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invoke the eventEmitter you set up above
+const eventEmitter = new EventEmitter();
+//set up a hero
+const hero = createHero(0,0);
+//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+Above we connect a keyboard event, `ArrowLeft` and send the `HERO_MOVE_LEFT` message. We listen to that message and move the `hero` as a result. The strength with this pattern is that the event listener and the hero don't know about each other. You can remap the `ArrowLeft` to the `A` key. Additionally it would be possible to do something completely different on `ArrowLeft` by making a few edits to the eventEmitter's `on` function:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+As things gets more complicated when your game grows, this pattern stays the same in complexity and your code stays clean. It's really recommended to adopt this pattern.
+
+---
+
+## 🚀 Challenge
+
+Think about how the pub-sub pattern can enhance a game. Which parts should emit events, and how should the game react to them? Now's your chance to get creative, thinking of a new game and how its parts might behave.
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber).
+
+## Assignment
+
+[Mock up a game](assignment.md)
\ No newline at end of file
diff --git a/space-game/1-introduction/assignment.md b/space-game/1-introduction/assignment.md
new file mode 100644
index 00000000..49d5914b
--- /dev/null
+++ b/space-game/1-introduction/assignment.md
@@ -0,0 +1,11 @@
+# Mock up a game
+
+## Instructions
+
+Using the code samples in the lesson, write a representation of a game you enjoy. It will have to be a simple game, but the goal is to use either the class or the composition pattern and the pub/sub pattern to show how a game might launch. Get creative!
+
+## Rubric
+
+| Criteria | Exemplary                                               | Adequate                                              | Needs Improvement                                   |
+| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
+|          | Three elements are placed on the screen and manipulated | Two elements are placed on the screen and manipulated | One element is placed on the screen and manipulated |
\ No newline at end of file
diff --git a/space-game/1-introduction/translations/README.es.md b/space-game/1-introduction/translations/README.es.md
new file mode 100644
index 00000000..47be623a
--- /dev/null
+++ b/space-game/1-introduction/translations/README.es.md
@@ -0,0 +1,216 @@
+# Construye un juego espacial Parte I: Introducción
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Herencia y composición en el desarrollo de juegos
+
+En lecciones anteriores, no había mucha necesidad de preocuparse por la arquitectura de diseño de las aplicaciones que creó, ya que los proyectos tenían un alcance muy pequeño. Sin embargo, cuando sus aplicaciones crecen en tamaño y alcance, las decisiones de arquitectura se vuelven una preocupación mayor. Hay dos enfoques principales para crear aplicaciones más grandes en JavaScript: *composición* o *herencia*. Ambos tienen pros y contras, pero vamos a explicarlos desde el contexto de un juego.
+
+✅ Uno de los libros de programación más famosos jamás escrito tiene que ver con [patrones de diseño](https://en.wikipedia.org/wiki/Design_Patterns).
+
+En un juego tienes `game objects` que son objetos que existen en una pantalla. Esto significa que tienen una ubicación en un sistema de coordenadas cartesiano, caracterizado por tener una coordenada `x` e `y`. A medida que desarrolle un juego, notará que todos los objetos de su juego tienen una propiedad estándar, común para todos los juegos que crea, es decir, elementos que son:
+
+- **location-based** (basado en la ubicación): La mayoría, si no todos, los elementos del juego se basan en la ubicación. Esto significa que tienen una ubicación, una `x` y una` y`.
+- **movable** (movible): Estos son objetos que pueden moverse a una nueva ubicación. Suele ser un héroe, un monstruo o un NPC (un personaje no jugador), pero no, por ejemplo, un objeto estático como un árbol.
+- **self-destructing** (autodestructivo): Estos objetos solo existen durante un período de tiempo determinado antes de que se configuren para su eliminación. Por lo general, esto está representado por un booleano `dead` o `destroyed` que indica al motor del juego que este objeto ya no debe procesarse.
+- **cool-down** (enfriamiento): 'Cool-down' es una propiedad típica entre los objetos de corta duración. Un ejemplo típico es un fragmento de texto o efecto gráfico como una explosión que solo debería verse durante unos pocos milisegundos.
+
+✅ Piense en un juego como Pac-Man. ¿Puedes identificar los cuatro tipos de objetos enumerados anteriormente en este juego?
+
+### Expresando comportamiento
+
+Todo lo que describimos anteriormente son comportamientos que pueden tener los objetos del juego. Entonces, ¿cómo los codificamos? Podemos expresar este comportamiento como métodos asociados a clases u objetos.
+
+**Clases**
+
+La idea es usar `classes` junto con `inheritance` para lograr agregar un cierto comportamiento a una clase.
+
+✅ La herencia es un concepto importante de comprender. Obtenga más información en el [artículo de MDN sobre herencia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+Expresado a través de código, un objeto de juego normalmente puede verse así:
+
+```javascript
+
+//configurar la clase GameObject
+class GameObject {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type;
+  }
+}
+
+//esta clase extenderá las propiedades de clase inherentes del GameObject
+class Movable extends GameObject {
+  constructor(x,y, type) {
+    super(x,y, type)
+  }
+
+//este objeto móvil se puede mover en la pantalla
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+//esta es una clase específica que extiende la clase Movable, por lo que puede aprovechar todas las propiedades que hereda
+class Hero extends Movable {
+  constructor(x,y) {
+    super(x,y, 'Hero')
+  }
+}
+
+//esta clase, por otro lado, solo hereda las propiedades GameObject
+class Tree extends GameObject {
+  constructor(x,y) {
+    super(x,y, 'Tree')
+  }
+}
+
+// un héroe puede moverse...
+const hero = new Hero();
+hero.moveTo(5,5);
+
+//pero un árbol no puede
+const tree = new Tree();
+```
+
+✅ Tómate unos minutos para volver a imaginar un héroe de Pac-Man (Inky, Pinky o Blinky, por ejemplo) y cómo se escribiría en JavaScript.
+
+**Composición**
+
+Una forma diferente de manejar la herencia de objetos es usando *Composición*. Entonces, los objetos expresan su comportamiento así:
+
+
+```javascript
+//crear un gameObject constante
+const gameObject = {
+  x: 0,
+  y: 0,
+  type: ''
+};
+
+//...y un movible constante
+const movable = {
+  moveTo(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+//entonces la constante movableObject está compuesta por gameObject y constantes movibles
+const movableObject = {...gameObject, ...movable};
+
+//luego crea una función para crear un nuevo Hero que hereda las propiedades de movableObject
+function createHero(x, y) {
+  return {
+    ...movableObject,
+    x,
+    y,
+    type: 'Hero'
+  }
+}
+//...y un objeto estático que hereda solo las propiedades de gameObject
+function createStatic(x, y, type) {
+  return {
+    ...gameObject
+    x,
+    y,
+    type
+  }
+}
+//crea el héroe y muévelo
+const hero = createHero(10,10);
+hero.moveTo(5,5);
+//y crea un árbol estático que solo se para alrededor
+const tree = createStatic(0,0, 'Tree'); 
+```
+
+**¿Qué patrón debo usar?**
+
+Depende de usted qué patrón elija. JavaScript es compatible con ambos paradigmas.
+
+--
+
+Otro patrón común en el desarrollo de juegos aborda el problema de manejar la experiencia y el rendimiento del usuario del juego.
+
+## Patrón de pub/sub
+
+✅ Pub/Sub significa publish-subscribe (publicar-suscribirse).
+
+Este patrón aborda la idea de que las distintas partes de su aplicación no deben conocerse entre sí. ¿Porqué es eso? Hace que sea mucho más fácil ver lo que sucede en general si se separan varias partes. También facilita el cambio repentino de comportamiento si es necesario. ¿Cómo logramos esto? Hacemos esto estableciendo algunos conceptos:
+
+- **message** (mensaje: un mensaje suele ser una cadena de texto acompañada de una carga útil opcional (un dato que aclara de qué se trata el mensaje). Un mensaje típico en un juego puede ser `KEY_PRESSED_ENTER`.
+- **publisher** (editor): este elemento *publica* un mensaje y lo envía a todos los suscriptores.
+- **subscriber** (suscriptor): Este elemento *escucha* mensajes específicos y realiza alguna tarea como resultado de recibir este mensaje, como disparar un láser.
+
+La implementación es bastante pequeña pero es un patrón muy poderoso. Así es como se puede implementar:
+
+
+```javascript
+//configurar una clase EventEmitter que contenga oyentes
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+//cuando se recibe un mensaje, deje que el oyente maneje su carga útil
+  on(message, listener) {
+    if (!this.listeners[message]) {
+      this.listeners[message] = [];
+    }
+    this.listeners[message].push(listener);
+  }
+//cuando se envía un mensaje, envíelo a un oyente con alguna carga útil
+  emit(message, payload = null) {
+    if (this.listeners[message]) {
+      this.listeners[message].forEach(l => l(message, payload))
+    }
+  }
+}
+
+```
+
+Para usar el código anterior, podemos crear una implementación muy pequeña:
+
+```javascript
+//configurar una estructura de mensaje
+const Messages = {
+  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
+};
+//invocar el eventEmitter que configuró anteriormente
+const eventEmitter = new EventEmitter();
+//configurar un héroe
+const hero = createHero(0,0);
+//Informe al emisor de eventos que esté atento a los mensajes relacionados con el héroe que se mueve hacia la izquierda y actúe en consecuencia
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+
+//configurar la ventana para escuchar el evento keyup, específicamente si se golpea la flecha izquierda, emite un mensaje para mover al héroe a la izquierda
+window.addEventListener('keyup', (evt) => {
+  if (evt.key === 'ArrowLeft') {
+    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
+  }
+});
+```
+
+Arriba conectamos un evento de teclado, `ArrowLeft` y enviamos el mensaje `HERO_MOVE_LEFT`. Escuchamos ese mensaje y, como resultado, movemos al `hero`. El punto fuerte de este patrón es que el oyente del evento y el héroe no se conocen. Puede reasignar la ʻArrowLeft` a la tecla ʻA`. Además, sería posible hacer algo completamente diferente en `ArrowLeft` haciendo algunas ediciones en la función `on` del eventEmitter:
+
+```javascript
+eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
+  hero.move(5,0);
+});
+```
+
+A medida que las cosas se complican cuando tu juego crece, este patrón permanece igual en complejidad y tu código se mantiene limpio. Realmente se recomienda adoptar este patrón.
+
+🚀Desafío: Piense en cómo el patrón pub-sub puede mejorar un juego. ¿Qué partes deberían emitir eventos y cómo debería reaccionar el juego ante ellos? Ahora tienes la oportunidad de ser creativo, pensar en un nuevo juego y en cómo podrían comportarse sus partes.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber).
+
+**Tarea**: [Mock up a game](assignment.md)
\ No newline at end of file
diff --git a/space-game/1-introduction/translations/assignment.es.md b/space-game/1-introduction/translations/assignment.es.md
new file mode 100644
index 00000000..87eac383
--- /dev/null
+++ b/space-game/1-introduction/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Simula un juego
+
+## Instrucciones
+
+Utilizando los ejemplos de código de la lección, escriba una representación de un juego que disfrute. Tendrá que ser un juego simple, pero el objetivo es usar la clase o el patrón de composición y el patrón pub / sub para mostrar cómo se puede lanzar un juego. ¡Se creativo!
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- ----- | -------------------------------------------------- --- | -------------------------------------------------- - |
+| | Se colocan tres elementos en la pantalla y se manipulan | Se colocan dos elementos en la pantalla y se manipulan | Un elemento se coloca en la pantalla y se manipula |
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/.github/post-lecture-quiz.md b/space-game/2-drawing-to-canvas/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..ec466299
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. You can perform drawing operations directly on the Canvas
+
+- [ ] true
+- [ ] false
+
+2. You listen to the `onload` event to know when an image has loaded asynchronously
+
+- [ ] true
+- [ ] false
+
+3. You draw images onto a screen with an operation called
+   
+- [ ] paintImage()
+- [ ] drawImage()
+- [ ] draw()
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/.github/pre-lecture-quiz.md b/space-game/2-drawing-to-canvas/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..667b7bc4
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*A warm-up quiz about game development*
+
+Complete this quiz in class
+
+1. The Canvas element is what you use to draw on a screen
+
+- [ ] true
+- [ ] false
+
+2. You can only draw simple geometric shapes
+
+- [ ] true
+- [ ] false
+
+3. The point 0,0 is in the bottom left
+
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/LICENSE b/space-game/2-drawing-to-canvas/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/space-game/2-drawing-to-canvas/README.md b/space-game/2-drawing-to-canvas/README.md
new file mode 100644
index 00000000..66b865cb
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/README.md
@@ -0,0 +1,212 @@
+# Build a Space Game Part II: Draw Hero and Monsters to Canvas
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+## The Canvas
+
+The canvas is an HTML element that by default has no content; it's a blank slate. You need to add to it by drawing on it.
+
+✅ Read [more about the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) on MDN.
+
+Here's how it's typically declared, as part of the page's body:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Above we are setting the `id`, `width` and `height`.
+
+- `id`: set this so you can obtain a reference when you need to interact with it.
+- `width`: this is the width of the element.
+- `height`: this is the height of the element.
+
+## Drawing simple geometry
+
+The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location `0,0` is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas.
+
+![the canvas's grid](canvas_grid.png)
+> Image from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+To draw on the canvas element you will need to go through the following steps:
+
+1. **Get a reference** to the Canvas element.
+1. **Get a reference** on the Context element that sits on the canvas element.
+1. **Perform a drawing operation** using the context element.
+
+Code for the above steps usually looks like so:
+
+```javascript
+// draws a red rectangle
+//1. get the canvas reference
+canvas = document.getElementById("myCanvas");
+
+//2. set the context to 2D to draw basic shapes
+ctx = canvas.getContext("2d");
+
+//3. fill it with the color red
+ctx.fillStyle = 'red';
+
+//4. and draw a rectangle with these parameters, setting location and size
+ctx.fillRect(0,0, 200, 200) // x,y,width, height
+```
+
+✅ The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
+
+You can draw all sorts of things with the Canvas API like:
+
+- **Geometrical shapes**, we've already showed how to draw a rectangle, but there is much more you can draw.
+- **Text**, you can draw a text with any font and color you wish.
+- **Images**, you can draw an image based off of an image asset like a .jpg or .png for example.
+
+✅ Try it! You know how to draw a rectangle, can you draw a circle to a page? Take a look at some interesting Canvas drawings on CodePen. Here's a [particularly impressive example](https://codepen.io/dissimulate/pen/KrAwx).
+
+## Load and draw an image asset
+
+You load an image asset by creating an `Image` object and set its `src` property. Then you listen to the `load` event to know when it's ready to be used. The code looks like this:
+
+### Load asset
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Load asset pattern
+
+It's recommended to wrap the above in a construct like so, so it's easier to use and you only try to manipulate it when it's fully loaded:
+
+```javascript
+async function loadAsset(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      // image loaded and ready to be used
+    }
+    resolve(img);
+  })
+}
+
+// use like so
+
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+}
+
+```
+
+To draw game assets to a screen, your code would look like this:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+## Now it's time to start building your game
+
+### What to build
+
+You will build a web page with a Canvas element. It should render a black screen `1024*768`. We've provided you with two images:
+
+- Hero ship
+
+   ![Hero ship](solution/assets/player.png)
+
+- 5*5 monster
+
+   ![Monster ship](solution/assets/enemyShip.png)
+
+### Recommended steps to start development
+
+Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Open the copy of this folder in Visual Studio Code. You need to have a local development environment setup, preferably with Visual Studio Code with NPM and Node installed. If you don't have `npm` set up on your computer, [here's how to do that](https://www.npmjs.com/get-npm).
+
+Start your project by navigating to the `your_work` folder:
+
+```bash
+cd your-work
+npm start
+```
+
+The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address. It's a blank page right now, but that will change
+
+> Note: to see changes on your screen, refresh your browser.
+
+### Add code
+
+Add the needed code to `your-work/app.js` to solve the below
+
+1. **Draw** a canvas with black background
+   > tip: add two lines under the appropriate TODO in `/app.js`, setting the `ctx` element to be black and the top/left coordinates to be at 0,0 and the height and width to equal that of the canvas.
+2. **Load** textures
+   > tip: add the player and enemy images using `await loadTexture` and passing in the image path. You won't see them on the screen yet!
+3. **Draw** hero in the center of the screen in the bottom half
+   > tip: use the `drawImage` API to draw heroImg to the screen, setting  `canvas.width / 2 - 45` and `canvas.height - canvas.height / 4)`;
+4. **Draw** 5*5 monsters
+   > tip: Now you can uncomment the code to draw enemies on the screen. Next, go to the `createEnemies` function and build it out.
+
+   First, set up some constants:
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+    then, create a loop to draw the array of monsters onto the screen:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Result
+
+The finished result should look like so:
+
+![Black screen with a hero and 5*5 monsters](partI-solution.png)
+
+## Solution
+
+Please try solving it yourself first but if you get stuck, have a look at a [solution](solution/app.js)
+
+---
+
+## 🚀 Challenge
+
+You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and try to draw a 3D object.
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+
+## Assignment
+
+[Play with the Canvas API](assignment.md)
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/assignment.md b/space-game/2-drawing-to-canvas/assignment.md
new file mode 100644
index 00000000..b9b83ab2
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/assignment.md
@@ -0,0 +1,11 @@
+# Play with the Canvas API
+
+## Instructions
+
+Pick one element of the Canvas API and create something interesting around it. Can you create a little galaxy of repeated stars? Can you create an interesting texture of colored lines? You can look at CodePen for inspiration (but don't copy)
+
+## Rubric
+
+| Criteria | Exemplary                                                 | Adequate                            | Needs Improvement     |
+| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
+|          | Code is submitted showing an interesting texture or shape | Code is submitted, but does not run | Code is not submitted |
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/canvas_grid.png b/space-game/2-drawing-to-canvas/canvas_grid.png
new file mode 100644
index 00000000..d89d5014
Binary files /dev/null and b/space-game/2-drawing-to-canvas/canvas_grid.png differ
diff --git a/space-game/2-drawing-to-canvas/partI-solution.png b/space-game/2-drawing-to-canvas/partI-solution.png
new file mode 100644
index 00000000..9ed2f1cf
Binary files /dev/null and b/space-game/2-drawing-to-canvas/partI-solution.png differ
diff --git a/space-game/2-drawing-to-canvas/solution/app.js b/space-game/2-drawing-to-canvas/solution/app.js
new file mode 100644
index 00000000..9751f07c
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/solution/app.js
@@ -0,0 +1,34 @@
+function loadTexture(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      resolve(img);
+    }
+  })
+}
+
+function createEnemies(ctx, canvas, enemyImg) {
+  const MONSTER_TOTAL = 5;
+  const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+  const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+  const STOP_X = START_X + MONSTER_WIDTH;
+
+  for (let x = START_X; x < STOP_X; x += 98) {
+    for (let y = 0; y < 50 * 5; y += 50) {
+      ctx.drawImage(enemyImg, x, y);
+    }
+  }
+}
+
+window.onload = async() => {
+  canvas = document.getElementById("canvas");
+  ctx = canvas.getContext("2d");
+  const heroImg = await loadTexture('assets/player.png')
+  const enemyImg = await loadTexture('assets/enemyShip.png')
+
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0,0, canvas.width, canvas.height);
+  ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height /4));
+  createEnemies(ctx, canvas, enemyImg);
+};
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/solution/assets/enemyShip.png b/space-game/2-drawing-to-canvas/solution/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/2-drawing-to-canvas/solution/assets/enemyShip.png differ
diff --git a/space-game/2-drawing-to-canvas/solution/assets/player.png b/space-game/2-drawing-to-canvas/solution/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/2-drawing-to-canvas/solution/assets/player.png differ
diff --git a/space-game/2-drawing-to-canvas/solution/index.html b/space-game/2-drawing-to-canvas/solution/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/solution/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/solution/package.json b/space-game/2-drawing-to-canvas/solution/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/solution/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/2-drawing-to-canvas/translations/README.es.md b/space-game/2-drawing-to-canvas/translations/README.es.md
new file mode 100644
index 00000000..02243e21
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/translations/README.es.md
@@ -0,0 +1,212 @@
+# Construye un juego espacial Parte II: Dibuja héroes y monstruos en el lienzo
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+## El lienzo
+
+El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle dibujo sobre él.
+
+✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) en MDN.
+
+Así es como se declara normalmente, como parte del cuerpo de la página:
+
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+Arriba estamos configurando el `id`, `width` y `alto`.
+
+- `id`: establezca esto para que pueda obtener una referencia cuando necesite interactuar con él.
+- `width`: este es el ancho del elemento.
+- `height`: esta es la altura del elemento.
+
+## Dibujar geometría simple
+
+Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje xy un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que dijiste que era el ANCHO y ALTO del lienzo.
+
+! [cuadrícula del lienzo](canvas_grid.png)
+> Imagen de [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
+
+Para dibujar en el elemento de lienzo, deberá seguir los siguientes pasos:
+
+1. **Obtenga una referencia** al elemento Canvas.
+1. **Obtenga una referencia** en el elemento Context que se encuentra en el elemento canvas.
+1. **Realice una operación de dibujo** utilizando el elemento de contexto.
+
+El código para los pasos anteriores generalmente se ve así:
+
+```javascript
+// dibuja un rectángulo rojo
+// 1. obtener la referencia del lienzo
+canvas = document.getElementById("myCanvas");
+
+// 2. establecer el contexto en 2D para dibujar formas básicas
+ctx = canvas.getContext("2d");
+
+// 3. rellénalo con el color rojo
+ctx.fillStyle = 'red';
+
+// 4. y dibuja un rectángulo con estos parámetros, configurando la ubicación y el tamaño
+ctx.fillRect(0,0, 200, 200) // x, y, ancho, alto
+```
+
+✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
+
+Puede dibujar todo tipo de cosas con la API de Canvas como:
+
+- **Formas geométricas**, ya mostramos cómo dibujar un rectángulo, pero hay mucho más que puedes dibujar.
+- **Texto**, puede dibujar un texto con cualquier fuente y color que desee.
+- **Imágenes**, puede dibujar una imagen basada en un activo de imagen como .jpg o .png, por ejemplo.
+
+✅ ¡Pruébalo! Sabes cómo dibujar un rectángulo, ¿puedes dibujar un círculo en una página? Eche un vistazo a algunos dibujos de Canvas interesantes en CodePen. Aquí hay un [ejemplo particularmente impresionante] (https://codepen.io/dissimulate/pen/KrAwx).
+
+## Cargar y dibujar un recurso de imagen
+
+Usted carga un activo de imagen creando un objeto `Image` y estableciendo su propiedad `src`. Luego escuchas el evento `load` para saber cuándo está listo para usarse. El código se ve así:
+
+### Cargar activo
+
+```javascript
+const img = new Image();
+img.src = 'path/to/my/image.png';
+img.onload = () => {
+  // image loaded and ready to be used
+}
+```
+
+### Cargar patrón de activos
+
+Se recomienda envolver lo anterior en una construcción así, para que sea más fácil de usar y solo intente manipularlo cuando esté completamente cargado:
+
+
+```javascript
+async function loadAsset(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      // imagen cargada y lista para ser utilizada
+    }
+    resolve(img);
+  })
+}
+
+// usar así
+
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+}
+
+```
+
+Para dibujar activos del juego en una pantalla, su código se vería así:
+
+```javascript
+async function run() {
+  const heroImg = await loadAsset('hero.png')
+  const monsterImg = await loadAsset('monster.png')
+
+  canvas = document.getElementById("myCanvas");
+  ctx = canvas.getContext("2d");
+  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
+  ctx.drawImage(monsterImg, 0,0);
+}
+```
+
+### Qué construir
+
+Construirá una página web con un elemento Canvas. Debería representar una pantalla negra `1024*768`. Le proporcionamos dos imágenes:
+
+- Barco héroe
+
+   ![Barco héroe](solution/assets/player.png)
+
+- Monstruo 5*5
+
+   ![Monster ship](solution/assets/enemyShip.png)
+
+
+### Pasos recomendados para iniciar el desarrollo
+
+Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
+
+
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Abra la copia de esta carpeta en Visual Studio Code. Debe tener una configuración de entorno de desarrollo local, preferiblemente con Visual Studio Code con NPM y Node instalados. Si no tiene `npm` configurado en su computadora, [aquí le explicamos cómo hacerlo](https://www.npmjs.com/get-npm).
+
+Inicie su proyecto navegando a la carpeta `your_work`:
+
+```bash
+cd your-work
+npm start
+```
+
+Lo anterior iniciará un servidor HTTP en la dirección `http: // localhost: 5000`. Abra un navegador e ingrese esa dirección. Es una página en blanco ahora mismo, pero eso cambiará
+
+> Nota: para ver los cambios en su pantalla, actualice su navegador.
+
+### Agregar código
+
+Agregue el código necesario a `your-work/app.js` para resolver lo siguiente
+
+1. **Dibuja** un lienzo con fondo negro
+   > consejo: agregue dos líneas debajo del TODO apropiado en `/app.js`, estableciendo el elemento `ctx` en negro y las coordenadas superior / izquierda en 0,0 y la altura y el ancho para que sean iguales a los del lienzo .
+2. **Cargar** texturas
+   > consejo: agregue las imágenes del jugador y del enemigo usando `await loadTexture` y pasando la ruta de la imagen. ¡Todavía no los verá en la pantalla!
+3. **Dibuja** héroe en el centro de la pantalla en la mitad inferior
+   > consejo: use la API `drawImage` para dibujar heroImg en la pantalla, configurando `canvas.width / 2 - 45` y `canvas.height - canvas.height / 4)`;
+4. **Dibujar** 5 * 5 monstruos
+   > consejo: ahora puedes descomentar el código para dibujar enemigos en la pantalla. A continuación, vaya a la función `createEnemies` y constrúyala.
+
+   Primero, configure algunas constantes:
+
+
+    ```javascript
+    const MONSTER_TOTAL = 5;
+    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+    const STOP_X = START_X + MONSTER_WIDTH;
+    ```
+
+    luego, crea un bucle para dibujar la matriz de monstruos en la pantalla:
+
+    ```javascript
+    for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          ctx.drawImage(enemyImg, x, y);
+        }
+      }
+    ```
+
+## Resultado
+
+El resultado final debería verse así:
+
+![Pantalla negra con un héroe y monstruos 5*5](partI-solution.png)
+
+## Solución
+
+Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una [solución](solution/app.js)
+
+🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D.
+
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+
+**Tarea**: [Jugar con la API de Canvas](assignment.md)
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/translations/assignment.es.md b/space-game/2-drawing-to-canvas/translations/assignment.es.md
new file mode 100644
index 00000000..2252de16
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/translations/assignment.es.md
@@ -0,0 +1,11 @@
+ Juega con la API Canvas
+
+## Instrucciones
+
+Elija un elemento de la API de Canvas y cree algo interesante a su alrededor. ¿Puedes crear una pequeña galaxia de estrellas repetidas? ¿Puedes crear una textura interesante de líneas de colores? Puede buscar inspiración en CodePen (pero no copiar)
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- ------- | ----------------------------------- | --------------------- |
+| | El código se envía mostrando una textura o forma interesante | Se envía el código, pero no se ejecuta | No se envía el código |
diff --git a/space-game/2-drawing-to-canvas/your-work/app.js b/space-game/2-drawing-to-canvas/your-work/app.js
new file mode 100644
index 00000000..eb80d910
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/your-work/app.js
@@ -0,0 +1,24 @@
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function createEnemies(ctx, canvas, enemyImg) {
+	// TODO draw enemies
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	// TODO load textures
+
+	// TODO draw black background
+	// TODO draw hero
+	// TODO uncomment the next line when you add enemies to screen
+	//createEnemies(ctx, canvas, enemyImg);
+};
diff --git a/space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png b/space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png differ
diff --git a/space-game/2-drawing-to-canvas/your-work/assets/player.png b/space-game/2-drawing-to-canvas/your-work/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/2-drawing-to-canvas/your-work/assets/player.png differ
diff --git a/space-game/2-drawing-to-canvas/your-work/index.html b/space-game/2-drawing-to-canvas/your-work/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/your-work/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/2-drawing-to-canvas/your-work/package.json b/space-game/2-drawing-to-canvas/your-work/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/2-drawing-to-canvas/your-work/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/3-moving-elements-around/.github/post-lecture-quiz.md b/space-game/3-moving-elements-around/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..88897a81
--- /dev/null
+++ b/space-game/3-moving-elements-around/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. You always need to redraw the screen
+
+- [ ] true
+- [ ] false
+
+2. What is a game loop?
+
+- [ ] A function that ensures the game can be restarted
+- [ ] A function that decided how fast the game should run
+- [ ] A function that is invoked at regular intervals and draws what the user should see
+
+3. A good case for redrawing the screen is
+   
+- [ ] A user interaction happened
+- [ ] Something has moved
+- [ ] Time has passed
\ No newline at end of file
diff --git a/space-game/3-moving-elements-around/.github/pre-lecture-quiz.md b/space-game/3-moving-elements-around/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..9fcf5bc8
--- /dev/null
+++ b/space-game/3-moving-elements-around/.github/pre-lecture-quiz.md
@@ -0,0 +1,19 @@
+*A warm-up quiz about game development*
+
+Complete this quiz in class
+
+1. Any object on the screen can receive keyboard events
+
+- [ ] true
+- [ ] false
+
+2. You can use the same method to listen to key events and mouse events
+
+- [ ] true
+- [ ] false
+
+3. To make things happen at a regular interval, you use what function?
+
+- [ ] setInterval()
+- [ ] setTimeout()
+- [ ] sleep()
diff --git a/space-game/3-moving-elements-around/LICENSE b/space-game/3-moving-elements-around/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/space-game/3-moving-elements-around/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/space-game/3-moving-elements-around/README.md b/space-game/3-moving-elements-around/README.md
new file mode 100644
index 00000000..cfe01443
--- /dev/null
+++ b/space-game/3-moving-elements-around/README.md
@@ -0,0 +1,384 @@
+# Build a Space Game Part III: Adding Motion
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+Games aren't much fun until you have aliens running around on screen! In this game, we will make use of two types of movements:
+
+- **Keyboard/Mouse movement**: when the user interacts with the keyboard or mouse to move an object on the screen.
+- **Game induced movement**: when the game moves an object with a certain time interval.
+
+So how do we move things on a screen? It's all about cartesian coordinates: we change the location (x,y) of the object and then redraw the screen.
+
+Typically you need the following steps to accomplish *movement* on a screen:
+
+1. **Set a new location** for an object; this is needed to perceive the object as having moved.
+2. **Clear the screen**, the screen needs to be cleared in between draws. We can clear it by drawing a rectangle that we fill with a background color.
+3. **Redraw object** at new location. By doing this we finally accomplish moving the object from one location to the other.
+
+ Here's what it can look like in code:
+
+```javascript
+//set the hero's location
+hero.x += 5;
+// clear the rectangle that hosts the hero
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// redraw the game background and hero
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ Can you think of a reason why redrawing your hero many frames per second might accrue performance costs? Read about [alternatives to this pattern](https://www.html5rocks.com/en/tutorials/canvas/performance/).
+
+## Handle keyboard events
+
+You handle events by attaching specific events to code. Keyboard events are triggered on the whole window whereas mouse events like a `click` can be connected to clicking a specific element. We will use keyboard events throughout this project. 
+
+To handle an event you need to use the window's `addEventListener()` method and provide it with two input parameters. The first parameter is the name of the event, for example `keyup`. The second parameter is the function that should be invoked as a result of the event taking place.  
+
+Here's an example:
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = string representation of the key
+  if (evt.key === 'ArrowUp') {
+    // do something
+  }
+})
+```
+
+For key events there are two properties on the event you can use to see what key was pressed:
+
+- `key`, this is a string representation of the pressed key, for example `ArrowUp`
+- `keyCode`, this is a number representation, for example `37`, corresponds to `ArrowLeft`.
+
+✅ Key event manipulation is useful outside of game development. What other uses can you think of for this technique?
+
+### Special keys: a caveat
+
+There are some *special* keys that affect the window. That means that if you are listening to a `keyup` event and you use these special keys to move your hero it will also perform horizontal scrolling. For that reason you might want to *shut-off* this built-in browser behavior as you build out your game. You need code like this:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Arrow keys
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // do not block other keys
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+The above code will ensure that arrow-keys and the space key have their *default* behavior shut off. The *shut-off* mechanism happens when we call `e.preventDefault()`.
+
+## Game induced movement
+
+We can make things move by themselves by using timers such as the `setTimeout()` or `setInterval()` function that update the location of the object on each tick, or time interval. Here's what that can look like:
+
+```javascript
+let id = setInterval(() => {
+  //move the enemy on the y axis
+  enemy.y += 10;
+})
+```
+
+## The game loop
+
+The game loop is a concept that is essentially a function that is invoked at regular intervals. It's called the game loop as everything that should be visible to the user is drawn into the loop. The game loop makes use of all the game objects that are part of the game, drawing all of them unless for some reason shouldn't be part of the game any more. For example if an object is an enemy that was hit by a laser and blows up, it's no longer part of the current game loop (you'll learn more on this in subsequent lessons).
+
+Here's what a game loop can typically look like, expressed in code:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+The above loop is invoked every `200` milliseconds to redraw the canvas. You have the ability to choose the best interval that makes sense for your game.
+
+## Continuing the Space Game
+
+You will take the existing code and extend it. Either start with the code that you completed during part I or use the code in [Part II- starter](your-work). 
+
+- **Moving the hero**: you will add code to ensure you can move the hero using the arrow keys.
+- **Move enemies**: you will also need to add code to ensure the enemies move from top to bottom at a given rate.
+
+## Recommended steps
+
+Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+You start your project the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address, right now it should render the hero and all the enemies; nothing is moving - yet!
+
+### Add code
+
+1. **Add dedicated objects** for `hero` and `enemy` and `game object`, they should have `x` and `y` properties. (Remember the portion on [Inheritance or composition](../README.md) ). 
+
+   *HINT* `game object` should be the one with `x` and `y` and the ability to draw itself to a canvas.
+
+   >tip: start by adding a new GameObject class with its constructor delineated as below, and then draw it to the canvas:
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Now, extend this GameObject to create the Hero and Enemy.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Add key-event handlers** to handle key navigation (move hero up/down left/right)
+
+   *REMEMBER* it's a cartesian system, top-left is `0,0`. Also remember to add code to stop *default behavior*
+
+   >tip: create your onKeyDown function and attach it to the window:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...add the code from the lesson above to stop default behavior
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Check your browser console at this point, and watch the keystrokes being logged. 
+
+3. **Implement** the [Pub sub pattern](../README.md), this will keep your code clean as you follow the remaining parts.
+
+   To do this last part, you can:
+
+   1. **Add an event listener** on the window:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Create an EventEmitter class** to publish and subscribe to messages:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Add constants** and set up the EventEmitter:
+
+        ```javascript
+        const Messages = {
+          KEY_EVENT_UP: "KEY_EVENT_UP",
+          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+        };
+        
+        let heroImg, 
+            enemyImg, 
+            laserImg,
+            canvas, ctx, 
+            gameObjects = [], 
+            hero, 
+            eventEmitter = new EventEmitter();
+        ```
+
+    1. **Initialize the game**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Setup the game loop**
+
+   Refactor the window.onload function to initialize the game and set up a game loop on a good interval. You'll also add a laser beam:
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Add code** to move enemies at a certain interval
+
+    Refactor the `createEnemies()` function to create the enemies and push them into the new gameObjects class:
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    and add a `createHero()` function to do a similar process for the hero.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    and finally, add a `drawGameObjects()` function to start the drawing:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    Your enemies should start advancing on your hero spaceship!
+
+---
+
+## 🚀 Challenge
+
+As you can see, your code can turn into 'spaghetti code' when you start adding functions and variables and classes. How can you better organize your code so that it is more readable? Sketch out a system to organize your code, even if it still resides in one file.
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+While we're writing our game without using frameworks, there are many JavaScript-based canvas frameworks for game development. Take some time to do some [reading about these](https://github.com/collections/javascript-game-engines).
+
+## Assignment
+
+[Comment your code](assignment.md)
diff --git a/space-game/3-moving-elements-around/assignment.md b/space-game/3-moving-elements-around/assignment.md
new file mode 100644
index 00000000..148ecb39
--- /dev/null
+++ b/space-game/3-moving-elements-around/assignment.md
@@ -0,0 +1,11 @@
+# Comment Your Code
+
+## Instructions
+
+Go over your current /app.js file in your game folder, and find ways to comment it and tidy it up. It's very easy for code to get out of control, and now's a good chance to add comments to ensure that you have readable code so that you can use it later.
+
+## Rubric
+
+| Criteria | Exemplary                                                          | Adequate                              | Needs Improvement                                              |
+| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
+|          | `app.js` code is fully commented and organized into logical blocks | `app.js` code is adequately commented | `app.js` code is somewhat disorganized and lacks good comments |
\ No newline at end of file
diff --git a/space-game/3-moving-elements-around/solution/app.js b/space-game/3-moving-elements-around/solution/app.js
new file mode 100644
index 00000000..92750b77
--- /dev/null
+++ b/space-game/3-moving-elements-around/solution/app.js
@@ -0,0 +1,180 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+const Messages = {
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 5;
+	});
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+
+	initGame();
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/3-moving-elements-around/solution/assets/enemyShip.png b/space-game/3-moving-elements-around/solution/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/3-moving-elements-around/solution/assets/enemyShip.png differ
diff --git a/space-game/3-moving-elements-around/solution/assets/laserRed.png b/space-game/3-moving-elements-around/solution/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/3-moving-elements-around/solution/assets/laserRed.png differ
diff --git a/space-game/3-moving-elements-around/solution/assets/player.png b/space-game/3-moving-elements-around/solution/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/3-moving-elements-around/solution/assets/player.png differ
diff --git a/space-game/3-moving-elements-around/solution/index.html b/space-game/3-moving-elements-around/solution/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/3-moving-elements-around/solution/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/3-moving-elements-around/solution/package.json b/space-game/3-moving-elements-around/solution/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/3-moving-elements-around/solution/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/3-moving-elements-around/translations/README.es.md b/space-game/3-moving-elements-around/translations/README.es.md
new file mode 100644
index 00000000..59a86814
--- /dev/null
+++ b/space-game/3-moving-elements-around/translations/README.es.md
@@ -0,0 +1,385 @@
+# Build a Space Game Part III: Adding Motion
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+ ¡Los juegos no son muy divertidos hasta que tienes extraterrestres corriendo por la pantalla! En este juego haremos uso de dos tipos de movimientos:
+
+- **Keyboard/Mouse movement** (Movimiento del teclado / mouse): cuando el usuario interactúa con el teclado o el mouse para mover un objeto en la pantalla.
+- **Game induced movement** (Movimiento inducido por el juego): cuando el juego mueve un objeto con un intervalo de tiempo determinado.
+
+Entonces, ¿cómo movemos las cosas en una pantalla? Se trata de coordenadas cartesianas: cambiamos la ubicación (x, y) del objeto y luego redibujamos la pantalla.
+
+Normalmente, necesita los siguientes pasos para lograr *movimiento* en una pantalla:
+
+1. **Set a new location** (Establecer una nueva ubicación) para un objeto; esto es necesario para percibir que el objeto se ha movido.
+2. **Clear the screen** (Limpiar la pantalla), la pantalla debe limpiarse entre sorteos. Podemos borrarlo dibujando un rectángulo que llenamos con un color de fondo.
+3. **Redraw object** (Redibujar objeto) en una nueva ubicación. Al hacer esto, finalmente logramos mover el objeto de un lugar a otro.
+
+  Así es como puede verse en el código:
+
+```javascript
+//establecer la ubicación del héroe
+hero.x += 5;
+// limpia el rectángulo que alberga al héroe
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+// vuelve a dibujar el fondo del juego y el héroe
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = "black";
+ctx.drawImage(heroImg, hero.x, hero.y);
+```
+
+✅ ¿Puedes pensar en una razón por la que volver a dibujar a tu héroe muchos fotogramas por segundo podría generar costos de rendimiento? Lea acerca de [alternativas a este patrón](https://www.html5rocks.com/en/tutorials/canvas/performance/).
+
+## Manejar eventos de teclado
+
+Maneja eventos adjuntando eventos específicos al código. Los eventos del teclado se activan en toda la ventana, mientras que los eventos del mouse como un `click` se pueden conectar a hacer clic en un elemento específico. Usaremos eventos de teclado a lo largo de este proyecto.
+
+Para manejar un evento, debe usar el método `addEventListener()` de la ventana y proporcionarle dos parámetros de entrada. El primer parámetro es el nombre del evento, por ejemplo, `keyup`. El segundo parámetro es la función que debe invocarse como resultado del evento que tiene lugar.
+
+He aquí un ejemplo:
+
+
+```javascript
+window.addEventListener('keyup', (evt) => {
+  // `evt.key` = representación de cadena de la clave
+  if (evt.key === 'ArrowUp') {
+    // hacer algo
+  }
+})
+```
+
+Para los eventos clave, hay dos propiedades en el evento que puede usar para ver qué tecla se presionó:
+
+- `key`, esta es una representación de cadena de la tecla presionada, por ejemplo `ArrowUp`
+- `keyCode`, esta es una representación numérica, por ejemplo, `37`, corresponde a `ArrowLeft`.
+
+✅ La manipulación de eventos clave es útil fuera del desarrollo del juego. ¿Qué otros usos se le ocurren para esta técnica?
+
+### Teclas especiales: una advertencia
+
+Hay algunas teclas * especiales * que afectan la ventana. Eso significa que si estás escuchando un evento `keyup` y usas estas teclas especiales para mover a tu héroe, también realizará un desplazamiento horizontal. Por esa razón, es posible que desee *apagar* este comportamiento integrado del navegador a medida que desarrolla su juego. Necesitas un código como este:
+
+```javascript
+let onKeyDown = function (e) {
+  console.log(e.keyCode);
+  switch (e.keyCode) {
+    case 37:
+    case 39:
+    case 38:
+    case 40: // Teclas de flecha
+    case 32:
+      e.preventDefault();
+      break; // Space
+    default:
+      break; // no bloquee otras llaves
+  }
+};
+
+window.addEventListener('keydown', onKeyDown);
+```
+
+El código anterior asegurará que las teclas de flecha y la tecla de espacio tengan su comportamiento *predeterminado* apagado. El mecanismo de *apagado* ocurre cuando llamamos a `e.preventDefault()`.
+
+## Movimiento inducido por el juego
+
+Podemos hacer que las cosas se muevan por sí mismas usando temporizadores como la función `setTimeout()` o `setInterval()` que actualizan la ubicación del objeto en cada tic o intervalo de tiempo. Esto es lo que puede parecer:
+
+
+```javascript
+let id = setInterval(() => {
+  //mover al enemigo en el eje y
+  enemy.y += 10;
+})
+```
+
+## El bucle del juego
+
+El bucle de juego es un concepto que es esencialmente una función que se invoca a intervalos regulares. Se llama bucle de juego, ya que todo lo que debería ser visible para el usuario se incluye en el bucle. El bucle del juego hace uso de todos los objetos del juego que son parte del juego, dibujándolos todos a menos que por alguna razón ya no deban ser parte del juego. Por ejemplo, si un objeto es un enemigo que fue golpeado por un láser y explota, ya no forma parte del ciclo del juego actual (aprenderás más sobre esto en lecciones posteriores).
+
+Así es como suele verse un bucle de juego, expresado en código:
+
+```javascript
+let gameLoopId = setInterval(() =>
+  function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    drawHero();
+    drawEnemies();
+    drawStaticObjects();
+}, 200);
+```
+
+TEl ciclo anterior se invoca cada `200` milisegundos para volver a dibujar el lienzo. Tiene la capacidad de elegir el mejor intervalo que tenga sentido para su juego.
+
+## Continuando con el juego espacial
+
+Tomarás el código existente y lo extenderás. Empiece con el código que completó durante la parte I o use el código en [Part II-starter](your-work).
+
+- **Moving the hero** (Mover al héroe): agregará código para asegurarse de que puede mover al héroe con las teclas de flecha.
+- **Move enemies** (Mover enemigos): también necesitarás agregar código para asegurarte de que los enemigos se muevan de arriba hacia abajo a un ritmo determinado.
+
+## Pasos recomendados
+
+Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Comienzas tu proyecto en la carpeta `your_work` escribiendo:
+
+```bash
+cd your-work
+npm start
+```
+
+Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abra un navegador e ingrese esa dirección, ahora mismo debería representar al héroe y a todos los enemigos; nada se mueve, ¡todavía!
+
+### Agregar código
+
+1. **Agrega objetos dedicados** para `hero` y `enemy` y `game object`, deben tener propiedades `x` e` y`. (Recuerde la parte sobre [Herencia o composición](../README.md)).
+
+    * SUGERENCIA* `game object` debe ser el que tenga `x` e `y` y la capacidad de dibujarse a sí mismo en un lienzo.
+
+    > consejo: comience agregando una nueva clase GameObject con su constructor delineado como se muestra a continuación, y luego dibuje en el lienzo:
+
+  
+    ```javascript
+        
+    class GameObject {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.dead = false;
+        this.type = "";
+        this.width = 0;
+        this.height = 0;
+        this.img = undefined;
+      }
+    
+      draw(ctx) {
+        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+      }
+    }
+    ```
+
+    Ahora, amplíe este GameObject para crear el héroe y el enemigo.
+    
+    ```javascript
+    class Hero extends GameObject {
+      constructor(x, y) {
+        ...it needs an x, y, type, and speed
+      }
+    }
+    ```
+
+    ```javascript
+    class Enemy extends GameObject {
+      constructor(x, y) {
+        super(x, y);
+        (this.width = 98), (this.height = 50);
+        this.type = "Enemy";
+        let id = setInterval(() => {
+          if (this.y < canvas.height - this.height) {
+            this.y += 5;
+          } else {
+            console.log('Stopped at', this.y)
+            clearInterval(id);
+          }
+        }, 300)
+      }
+    }
+    ```
+
+2. **Agregue controladores de eventos clave** para manejar la navegación de teclas (mueva el héroe hacia arriba / abajo a la izquierda / derecha)
+
+    * RECUERDE* es un sistema cartesiano, la parte superior izquierda es `0,0`. También recuerde agregar código para detener *comportamiento predeterminado*.
+
+    > consejo: cree su función onKeyDown y adjúntela a la ventana:
+
+   ```javascript
+    let onKeyDown = function (e) {
+	      console.log(e.keyCode);
+	        ...//agregue el código de la lección anterior para detener el comportamiento predeterminado
+	      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+   ```
+    
+   Compruebe la consola de su navegador en este punto y observe cómo se registran las pulsaciones de teclas.
+
+3. **Implemente** el [subpatrón Pub] (../ README.md), esto mantendrá su código limpio mientras sigue las partes restantes.
+
+    Para hacer esta última parte, puede:
+
+    1. **Agregue un detector de eventos** en la ventana:
+
+       ```javascript
+        window.addEventListener("keyup", (evt) => {
+          if (evt.key === "ArrowUp") {
+            eventEmitter.emit(Messages.KEY_EVENT_UP);
+          } else if (evt.key === "ArrowDown") {
+            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+          } else if (evt.key === "ArrowLeft") {
+            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+          } else if (evt.key === "ArrowRight") {
+            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+          }
+        });
+        ```
+
+    1. **Cree una clase EventEmitter** para publicar y suscribirse a mensajes:
+
+        ```javascript
+        class EventEmitter {
+          constructor() {
+            this.listeners = {};
+          }
+        
+          on(message, listener) {
+            if (!this.listeners[message]) {
+              this.listeners[message] = [];
+            }
+            this.listeners[message].push(listener);
+          }
+        
+          emit(message, payload = null) {
+            if (this.listeners[message]) {
+              this.listeners[message].forEach((l) => l(message, payload));
+            }
+          }
+        }
+        ```
+
+    1. **Agregue constantes** y configure el EventEmitter:
+
+        ```javascript
+        const Messages = {
+          KEY_EVENT_UP: "KEY_EVENT_UP",
+          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
+          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
+          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
+        };
+        
+        let heroImg, 
+            enemyImg, 
+            laserImg,
+            canvas, ctx, 
+            gameObjects = [], 
+            hero, 
+            eventEmitter = new EventEmitter();
+        ```
+
+    1. **Inicializa el juego**
+
+    ```javascript
+    function initGame() {
+      gameObjects = [];
+      createEnemies();
+      createHero();
+    
+      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+        hero.y -=5 ;
+      })
+    
+      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+        hero.y += 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+        hero.x -= 5;
+      });
+    
+      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+        hero.x += 5;
+      });
+    }
+    ```
+
+1. **Configura el bucle del juego**
+
+    Refactorice la función window.onload para inicializar el juego y configurar un bucle de juego en un buen intervalo. También agregará un rayo láser:
+
+
+    ```javascript
+    window.onload = async () => {
+      canvas = document.getElementById("canvas");
+      ctx = canvas.getContext("2d");
+      heroImg = await loadTexture("assets/player.png");
+      enemyImg = await loadTexture("assets/enemyShip.png");
+      laserImg = await loadTexture("assets/laserRed.png");
+    
+      initGame();
+      let gameLoopId = setInterval(() => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        drawGameObjects(ctx);
+      }, 100)
+      
+    };
+    ```
+
+5. **Agregar código** para mover enemigos en un cierto intervalo
+
+     Refactorice la función `createEnemies()` para crear los enemigos y empujarlos a la nueva clase gameObjects:
+
+
+    ```javascript
+    function createEnemies() {
+      const MONSTER_TOTAL = 5;
+      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+      const STOP_X = START_X + MONSTER_WIDTH;
+    
+      for (let x = START_X; x < STOP_X; x += 98) {
+        for (let y = 0; y < 50 * 5; y += 50) {
+          const enemy = new Enemy(x, y);
+          enemy.img = enemyImg;
+          gameObjects.push(enemy);
+        }
+      }
+    }
+    ```
+    
+    y agregue una función `createHero()` para hacer un proceso similar para el héroe.
+    
+    ```javascript
+    function createHero() {
+      hero = new Hero(
+        canvas.width / 2 - 45,
+        canvas.height - canvas.height / 4
+      );
+      hero.img = heroImg;
+      gameObjects.push(hero);
+    }
+    ```
+
+    y finalmente, agregue una función `drawGameObjects()` para comenzar el dibujo:
+
+    ```javascript
+    function drawGameObjects(ctx) {
+      gameObjects.forEach(go => go.draw(ctx));
+    }
+    ```
+
+    ¡Tus enemigos deberían comenzar a avanzar en tu nave espacial heroica!
+
+🚀 Desafío: como puede ver, su código puede convertirse en 'código espagueti' cuando comienza a agregar funciones, variables y clases. ¿Cómo puede organizar mejor su código para que sea más legible? Esboce un sistema para organizar su código, incluso si todavía reside en un archivo.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Mientras escribimos nuestro juego sin usar marcos, existen muchos marcos de lienzo basados en JavaScript para el desarrollo de juegos. Tómate un tiempo para hacer algo [leer sobre estos](https://github.com/collections/javascript-game-engines).
+
+**Tarea**: [Comenta tu código](assignment.md)
diff --git a/space-game/3-moving-elements-around/translations/assignment.es.md b/space-game/3-moving-elements-around/translations/assignment.es.md
new file mode 100644
index 00000000..b7679936
--- /dev/null
+++ b/space-game/3-moving-elements-around/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Comente su código
+
+## Instrucciones
+
+Revisa tu archivo /app.js actual en la carpeta de tu juego y busca formas de comentarlo y ordenarlo. Es muy fácil que el código se salga de control y ahora es una buena oportunidad para agregar comentarios para asegurarse de que tiene un código legible para que pueda usarlo más tarde.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- ---------------- | ------------------------------------- | -------------------------------------------------- ------------ |
+| | El código `app.js` está completamente comentado y organizado en bloques lógicos | El código `app.js` está adecuadamente comentado | El código `app.js` está algo desorganizado y carece de buenos comentarios |
\ No newline at end of file
diff --git a/space-game/3-moving-elements-around/your-work/app.js b/space-game/3-moving-elements-around/your-work/app.js
new file mode 100644
index 00000000..280c503d
--- /dev/null
+++ b/space-game/3-moving-elements-around/your-work/app.js
@@ -0,0 +1,38 @@
+function loadTexture(path) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = path;
+    img.onload = () => {
+      resolve(img);
+    };
+  });
+}
+
+function createEnemies(ctx, canvas, enemyImg) {
+  const MONSTER_TOTAL = 5;
+  const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+  const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+  const STOP_X = START_X + MONSTER_WIDTH;
+
+  for (let x = START_X; x < STOP_X; x += 98) {
+    for (let y = 0; y < 50 * 5; y += 50) {
+      ctx.drawImage(enemyImg, x, y);
+    }
+  }
+}
+
+window.onload = async () => {
+  canvas = document.getElementById("canvas");
+  ctx = canvas.getContext("2d");
+  const heroImg = await loadTexture("assets/player.png");
+  const enemyImg = await loadTexture("assets/enemyShip.png");
+
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(
+    heroImg,
+    canvas.width / 2 - 45,
+    canvas.height - canvas.height / 4
+  );
+  createEnemies(ctx, canvas, enemyImg);
+};
diff --git a/space-game/3-moving-elements-around/your-work/assets/enemyShip.png b/space-game/3-moving-elements-around/your-work/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/3-moving-elements-around/your-work/assets/enemyShip.png differ
diff --git a/space-game/3-moving-elements-around/your-work/assets/laserRed.png b/space-game/3-moving-elements-around/your-work/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/3-moving-elements-around/your-work/assets/laserRed.png differ
diff --git a/space-game/3-moving-elements-around/your-work/assets/player.png b/space-game/3-moving-elements-around/your-work/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/3-moving-elements-around/your-work/assets/player.png differ
diff --git a/space-game/3-moving-elements-around/your-work/index.html b/space-game/3-moving-elements-around/your-work/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/3-moving-elements-around/your-work/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/3-moving-elements-around/your-work/package.json b/space-game/3-moving-elements-around/your-work/package.json
new file mode 100644
index 00000000..ddcf7142
--- /dev/null
+++ b/space-game/3-moving-elements-around/your-work/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "solution",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "start": "npx http-server -c-1 -p 5000",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
\ No newline at end of file
diff --git a/space-game/4-collision-detection/.github/post-lecture-quiz.md b/space-game/4-collision-detection/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..8f4c828e
--- /dev/null
+++ b/space-game/4-collision-detection/.github/post-lecture-quiz.md
@@ -0,0 +1,12 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. In collision detection you compare two
+
+- [ ] circles and whether they intersect
+- [ ] rectangles and whether they intersect
+- [ ] the distance between two points
+
+2. The reason for implementing a *cooldown* effect is because
+
+- [ ] Making the game harder as you can't repeatedly fire a laser to destroy enemies
+- [ ] JavaScript can only produce a certain number of events per time unit, so you need to limit them
\ No newline at end of file
diff --git a/space-game/4-collision-detection/.github/pre-lecture-quiz.md b/space-game/4-collision-detection/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..ed317af2
--- /dev/null
+++ b/space-game/4-collision-detection/.github/pre-lecture-quiz.md
@@ -0,0 +1,14 @@
+*A warm-up quiz about about game development*
+
+Complete this quiz in class
+
+1. Collision detection is how we detect if two things have collided.
+
+- [ ] true
+- [ ] false
+
+2. How can we remove an item from the screen?
+
+- [ ] Call the garbage collector
+- [ ] Mark it as dead, only paint *not dead* objects next time we draw the screen
+- [ ] Place the item on a negative coordinate
\ No newline at end of file
diff --git a/space-game/4-collision-detection/LICENSE b/space-game/4-collision-detection/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/space-game/4-collision-detection/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/space-game/4-collision-detection/README.md b/space-game/4-collision-detection/README.md
new file mode 100644
index 00000000..74bf262d
--- /dev/null
+++ b/space-game/4-collision-detection/README.md
@@ -0,0 +1,293 @@
+# Build a Space Game Part IV: Adding A Laser and Detect Collisions
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+In this lesson you will learn how to shoot lasers with JavaScript! We will add two things to our game:
+
+- **A laser**: this laser is shot from your heroes ship and vertically upwards
+- **Collision detection**, as part of implementing the ability to *shoot* we will also add some nice game rules:
+   - **Laser hits enemy**: Enemy dies if hit by a laser
+   - **Laser hits top screen**: A laser is destroyed if hitting the top part of the screen
+   - **Enemy and hero collision**: An enemy and the hero are destroyed if hitting each other
+   - **Enemy hits bottom of the screen**: An enemy and a hero are destroyed if the enemy hits the bottom of the screen
+
+In short, you -- *the hero* -- need to hit all enemies with a laser before they manage to move to the bottom of the screen.
+
+✅ Do a little research on the very first computer game ever written. What was its functionality?
+
+Let's be heroic together!
+
+## Collision detection
+
+How do we do collision detection? We need to think of our game objects as rectangles moving about. Why is that you might ask? Well, the image used to draw a game object is a rectangle: it has an `x`, `y`, `width` and `height`.
+
+If two rectangles, i.e a hero and enemy *intersect*, you have a collision. What should happen then is up to the rules of the game. To implement collision detection you therefore need the following:
+
+1. A way to get a rectangle representation of a game object, something like this:
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. A comparison function, this function can look like this:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## How do we destroy things
+
+To destroy things in a game you need to let the game know it should no longer paint this item in the game loop that triggers on a certain interval. A way to do this is to mark a game object as *dead* when something happens, like so:
+
+```javascript
+// collision happened
+enemy.dead = true
+```
+
+Then you an proceed to sort out *dead* objects before repainting the screen, like so:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## How do we fire a laser
+
+Firing a laser translates to responding to a key-event and creating an object that moves in a certain direction. We therefore need to carry out the following steps:
+
+1. **Create a laser object**: from the top of our hero's ship, that upon creation starts moving upwards towards the screen top.
+2. **Attach code to a key event**: we need to choose a key on the keyboard that represents the player shooting the laser.
+3. **Create a game object that looks like a laser** when the key is pressed.
+
+## Cooldown on our laser
+
+The laser needs to fire every time you press a key, like *space* for example. To prevent the game producing way too many lasers in a short time we need to fix this. The fix is by implementing a so called *cooldown*, a timer, that ensures that a laser can only be fired so often. You can implement that in the following way:
+
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time)
+  }
+}
+
+class Weapon {
+  constructor {
+  }
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // produce a laser
+      this.cooldown = new Cooldown(500);
+    } else {
+      // do nothing - it hasn't cooled down yet.
+    }
+  }
+}
+```
+
+✅ Refer to lesson 1 in the space game series to remind yourself about *cooldowns*.
+
+## What to build
+
+You will take the existing code (which you should have cleaned up and refactored) from the previous lesson, and extend it. Either start with the code from part II or use the code at [Part III- starter](/your-work).
+
+> tip: the laser that you'll work with is already in your assets folder and referenced by your code
+
+- **Add collision detection**, when a laser collides with something the following rules should apply:
+   1. **Laser hits enemy**: enemy dies if hit by a laser
+   2. **Laser hits top screen**: A laser is destroyed if it hits the top part of our screen
+   3. **Enemy and hero collision**: an enemy and the hero is destroyed if hitting each other
+   4. **Enemy hits bottom of the screen**: An enemy and a hero is destroyed if the enemy hits the bottom of the screen
+
+## Recommended steps
+
+Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+You start your project the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address, right now it should render the hero and all the enemies, nothing is moving - yet :).
+
+### Add code
+
+1. **Setup a  rectangle representation of your game object, to handle collision** The below code allows you to get a rectangle representation of a `GameObject`. Edit your GameObject class to extend it:
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Add code that checks collision** This will be a new function  that tests whether two rectangles intersect:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Add laser firing capability**
+   1. **Add key-event message**. The *space* key should create a laser just above the hero ship. Add three constants in the Messages object:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+   1. **Handle space key**. Edit the `window.addEventListener` keyup function to handle spaces:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+    1. **Add listeners**. Edit the `initGame()` function to ensure that hero can fire when the space bar is hit:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       and add a new `eventEmitter.on()` function to ensure behavior when an enemy collides with a laser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1. **Move object**, Ensure the laser moves to the top of the screen gradually. You'll create a new Laser class that extends `GameObject`, as you've done before: 
+   
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+   1. **Handle collisions**, Implement collision rules for the laser. Add an `updateGameObjects()` function that tests colliding objects for hits
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      Make sure to add `updateGameObjects()` into your game loop in `window.onload`.
+
+   4. **Implement cooldown** on the laser, so it can only be fired so often.
+
+      Finally, edit the Hero class so that it can cooldown:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+At this point, your game has some functionality! You can navigate with your arrow keys, fire a laser with your space bar, and enemies disappear when you hit them. Well done!
+
+---
+
+## 🚀 Challenge
+
+Add an explosion! Take a look at the game assets in [the Space Art repo](../solution/spaceArt/readme.txt) and try to add an explosion when the laser hits an alien
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Experiment with the intervals in your game thus far. What happens when you change them? Read more about [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+## Assignment
+
+[Explore collisions](assignment.md)
diff --git a/space-game/4-collision-detection/assignment.md b/space-game/4-collision-detection/assignment.md
new file mode 100644
index 00000000..a8d6b383
--- /dev/null
+++ b/space-game/4-collision-detection/assignment.md
@@ -0,0 +1,11 @@
+# Explore Collisions
+
+## Instructions
+
+## Rubric
+
+To better understand how collisions work, build a very small game with a few items that collide. Make them move via keypresses or mouse clicks, and make something happen to one of the items when it is hit. It could be something like a meteor hitting the earth, or bumper-cars. Get creative!
+
+| Criteria | Exemplary                                                                                                                | Adequate                       | Needs Improvement |
+| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
+|          | Complete working code sample is produced, with items drawn to canvas, basic collision happening, and reactions occurring | Code is incomplete in some way | Code malfunctions |
\ No newline at end of file
diff --git a/space-game/4-collision-detection/solution/app.js b/space-game/4-collision-detection/solution/app.js
new file mode 100644
index 00000000..2fe85994
--- /dev/null
+++ b/space-game/4-collision-detection/solution/app.js
@@ -0,0 +1,379 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+
+	rectFromGameObject() {
+		return {
+			top: this.y,
+			left: this.x,
+			bottom: this.y + this.height,
+			right: this.x + this.width,
+		};
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+		this.cooldown = 0;
+		this.life = 3;
+		this.points = 0;
+	}
+	fire() {
+		gameObjects.push(new Laser(this.x + 45, this.y - 10));
+		this.cooldown = 500;
+
+		let id = setInterval(() => {
+			if (this.cooldown > 0) {
+				this.cooldown -= 100;
+			} else {
+				clearInterval(id);
+			}
+		}, 200);
+	}
+	canFire() {
+		return this.cooldown === 0;
+	}
+	decrementLife() {
+		this.life--;
+		if (this.life === 0) {
+			this.dead = true;
+		}
+	}
+	incrementPoints() {
+		this.points += 100;
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+class Laser extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 9), (this.height = 33);
+		this.type = 'Laser';
+		this.img = laserImg;
+		let id = setInterval(() => {
+			if (this.y > 0) {
+				this.y -= 15;
+			} else {
+				this.dead = true;
+				clearInterval(id);
+			}
+		}, 100);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function intersectRect(r1, r2) {
+	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
+}
+
+const Messages = {
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+	KEY_EVENT_SPACE: 'KEY_EVENT_SPACE',
+	COLLISION_ENEMY_LASER: 'COLLISION_ENEMY_LASER',
+	COLLISION_ENEMY_HERO: 'COLLISION_ENEMY_HERO',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	lifeImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	// console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	} else if (evt.keyCode === 32) {
+		eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+	} else if (evt.key === 'Enter') {
+		eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function updateGameObjects() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy');
+	const lasers = gameObjects.filter((go) => go.type === 'Laser');
+
+	enemies.forEach((enemy) => {
+		const heroRect = hero.rectFromGameObject();
+		if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+			eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+		}
+	});
+
+	lasers.forEach((l) => {
+		enemies.forEach((m) => {
+			if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+				eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+					first: l,
+					second: m,
+				});
+			}
+		});
+	});
+
+	gameObjects = gameObjects.filter((go) => !go.dead);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+		if (hero.canFire()) {
+			hero.fire();
+		}
+		// console.log('cant fire - cooling down')
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+		first.dead = true;
+		second.dead = true;
+		hero.incrementPoints();
+
+		if (isEnemiesDead()) {
+			eventEmitter.emit(Messages.GAME_END_WIN);
+		}
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+		enemy.dead = true;
+		hero.decrementLife();
+		if (isHeroDead()) {
+			eventEmitter.emit(Messages.GAME_END_LOSS);
+			return; // loss before victory
+		}
+		if (isEnemiesDead()) {
+			eventEmitter.emit(Messages.GAME_END_WIN);
+		}
+	});
+
+	eventEmitter.on(Messages.GAME_END_WIN, () => {
+		endGame(true);
+	});
+	eventEmitter.on(Messages.GAME_END_LOSS, () => {
+		endGame(false);
+	});
+}
+function drawLife() {
+	// TODO, 35, 27
+	//
+
+	const START_POS = canvas.width - 180;
+	for (let i = 0; i < hero.life; i++) {
+		ctx.drawImage(lifeImg, START_POS + 45 * (i + 1), canvas.height - 37);
+	}
+}
+
+function drawPoints() {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = 'red';
+	ctx.textAlign = 'left';
+	drawText('Points: ' + hero.points, 10, canvas.height - 20);
+}
+
+function drawText(message, x, y) {
+	ctx.fillText(message, x, y);
+}
+
+function displayMessage(message, color = 'red') {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = color;
+	ctx.textAlign = 'center';
+	ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+
+function isHeroDead() {
+	return hero.life <= 0;
+}
+
+function isEnemiesDead() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy' && !go.dead);
+	return enemies.length === 0;
+}
+
+function endGame(win) {
+	clearInterval(gameLoopId);
+
+	// set delay so we are sure any paints have finished
+	setTimeout(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		if (win) {
+			displayMessage('Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew', 'green');
+		} else {
+			displayMessage('You died !!! Press [Enter] to start a new game Captain Pew Pew');
+		}
+	}, 200);
+}
+
+function resetGame() {
+	if (gameLoopId) {
+		clearInterval(gameLoopId);
+		eventEmitter.clear();
+		initGame();
+		gameLoopId = setInterval(() => {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.fillStyle = 'black';
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+			drawPoints();
+			drawLife();
+			updateGameObjects();
+			drawGameObjects(ctx);
+		}, 100);
+	}
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+	lifeImg = await loadTexture('assets/life.png');
+
+	initGame();
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		updateGameObjects();
+		drawPoints();
+		drawLife();
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/4-collision-detection/solution/assets/enemyShip.png b/space-game/4-collision-detection/solution/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/4-collision-detection/solution/assets/enemyShip.png differ
diff --git a/space-game/4-collision-detection/solution/assets/laserRed.png b/space-game/4-collision-detection/solution/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/4-collision-detection/solution/assets/laserRed.png differ
diff --git a/space-game/4-collision-detection/solution/assets/life.png b/space-game/4-collision-detection/solution/assets/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/4-collision-detection/solution/assets/life.png differ
diff --git a/space-game/4-collision-detection/solution/assets/player.png b/space-game/4-collision-detection/solution/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/4-collision-detection/solution/assets/player.png differ
diff --git a/space-game/4-collision-detection/solution/index.html b/space-game/4-collision-detection/solution/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/4-collision-detection/solution/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/4-collision-detection/solution/package.json b/space-game/4-collision-detection/solution/package.json
new file mode 100644
index 00000000..54967de1
--- /dev/null
+++ b/space-game/4-collision-detection/solution/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "solution",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "start": "npx http-server -c-1 -p 5000",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
diff --git a/space-game/4-collision-detection/translations/README.es.md b/space-game/4-collision-detection/translations/README.es.md
new file mode 100644
index 00000000..9d39465c
--- /dev/null
+++ b/space-game/4-collision-detection/translations/README.es.md
@@ -0,0 +1,293 @@
+# Construye un juego espacial Parte IV: Adición de un láser y detección de colisiones
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+¡En esta lección aprenderá a disparar láseres con JavaScript! Agregaremos dos cosas a nuestro juego:
+
+- **Un láser**: este láser se dispara desde la nave de tu héroe y verticalmente hacia arriba
+- **Detección de colisiones**, como parte de la implementación de la capacidad de * disparar *, también agregaremos algunas reglas de juego interesantes:
+   - **El láser golpea al enemigo**: El enemigo muere si es golpeado por un láser
+   - **El láser golpea la pantalla superior**: un láser se destruye si golpea la parte superior de la pantalla
+   - **Colisión de héroe y enemigo**: Un enemigo y el héroe son destruidos si se golpean entre sí.
+   - **El enemigo golpea la parte inferior de la pantalla**: un enemigo y un héroe son destruidos si el enemigo golpea la parte inferior de la pantalla.
+
+En resumen, tú, *el héroe*, debes golpear a todos los enemigos con un láser antes de que logren moverse a la parte inferior de la pantalla.
+
+✅ Investiga un poco sobre el primer juego de computadora jamás escrito. ¿Cuál fue su funcionalidad?
+
+¡Seamos heroicos juntos!
+
+## Detección de colisiones
+
+¿Cómo hacemos la detección de colisiones? Necesitamos pensar en los objetos de nuestro juego como rectángulos que se mueven. ¿Por qué podrías preguntar? Bueno, la imagen utilizada para dibujar un objeto de juego es un rectángulo: tiene una `x`,` y`, `width` y `height`.
+
+Si dos rectángulos, es decir, un héroe y un enemigo *se cruzan*, tienes una colisión. Lo que debería suceder entonces depende de las reglas del juego. Para implementar la detección de colisiones, por lo tanto, necesita lo siguiente:
+
+1. Una forma de obtener una representación rectangular de un objeto de juego, algo como esto:
+
+
+   ```javascript
+   rectFromGameObject() {
+     return {
+       top: this.y,
+       left: this.x,
+       bottom: this.y + this.height,
+       right: this.x + this.width
+     }
+   }
+   ```
+
+2. Una función de comparación, esta función puede verse así:
+
+   ```javascript
+   function intersectRect(r1, r2) {
+     return !(r2.left > r1.right ||
+       r2.right < r1.left ||
+       r2.top > r1.bottom ||
+       r2.bottom < r1.top);
+   }
+   ```
+
+## ¿Cómo destruimos las cosas?
+
+Para destruir cosas en un juego, debes informarle al juego que ya no debería pintar este elemento en el bucle del juego que se activa en un intervalo determinado. Una forma de hacer esto es marcar un objeto del juego como *muerto* cuando algo sucede, así:
+
+
+```javascript
+// ocurrió la colisión
+enemy.dead = true
+```
+
+Luego, puede proceder a clasificar los objetos *muertos* antes de volver a pintar la pantalla, así:
+
+```javascript
+gameObjects = gameObject.filter(go => !go.dead);
+```
+
+## ¿Cómo disparamos un láser?
+
+Disparar un láser se traduce en responder a un evento clave y crear un objeto que se mueve en una dirección determinada. Por lo tanto, debemos realizar los siguientes pasos:
+
+1. **Crea un objeto láser**: desde la parte superior de la nave de nuestro héroe, que al ser creado comienza a moverse hacia la parte superior de la pantalla.
+2. **Adjuntar código a un evento clave**: necesitamos elegir una tecla en el teclado que represente al jugador disparando el láser.
+3. **Crea un objeto de juego que parezca un láser** cuando se presiona la tecla.
+
+## Enfriamiento en nuestro láser
+
+El láser debe dispararse cada vez que presione una tecla, como *espacio*, por ejemplo. Para evitar que el juego produzca demasiados láseres en poco tiempo, debemos solucionar este problema. La solución es implementar un llamado *enfriamiento*, un temporizador, que garantiza que un láser solo se pueda disparar con cierta frecuencia. Puede implementar eso de la siguiente manera:
+
+
+```javascript
+class Cooldown {
+  constructor(time) {
+    this.cool = false;
+    setTimeout(() => {
+      this.cool = true;
+    }, time)
+  }
+}
+
+class Weapon {
+  constructor {
+  }
+  fire() {
+    if (!this.cooldown || this.cooldown.cool) {
+      // produce a laser
+      this.cooldown = new Cooldown(500);
+    } else {
+      // do nothing - it hasn't cooled down yet.
+    }
+  }
+}
+```
+
+✅ Consulte la lección 1 de la serie de juegos espaciales para recordar los *tiempos de reutilización*.
+
+## Qué construir
+
+Tomará el código existente (que debería haber limpiado y refactorizado) de la lección anterior y lo extenderá. Empiece con el código de la parte II o utilice el código en [Part III- starter](/your-work).
+
+> consejo: el láser con el que trabajará ya está en su carpeta de activos y su código hace referencia a él
+
+- **Agregue detección de colisiones**, cuando un láser choca con algo, se deben aplicar las siguientes reglas:
+    1. **El láser golpea al enemigo**: el enemigo muere si es golpeado por un láser
+    2. **El láser golpea la pantalla superior**: un láser se destruye si golpea la parte superior de nuestra pantalla
+    3. **Colisión de héroe y enemigo**: un enemigo y el héroe son destruidos si se golpean entre sí
+    4. **El enemigo golpea la parte inferior de la pantalla**: un enemigo y un héroe son destruidos si el enemigo golpea la parte inferior de la pantalla.
+
+## Pasos recomendados
+
+Busque los archivos que se han creado para usted en la subcarpeta `su-trabajo`. Debe contener lo siguiente:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Comienzas tu proyecto en la carpeta `your_work` escribiendo:
+
+```bash
+cd your-work
+npm start
+```
+
+Lo anterior iniciará un servidor HTTP en la dirección `http: // localhost: 5000`. Abra un navegador e ingrese esa dirección, ahora mismo debería representar al héroe y a todos los enemigos, nada se mueve, todavía :).
+
+### Agregar código
+
+1. **Configure una representación rectangular de su objeto de juego, para manejar la colisión** El siguiente código le permite obtener una representación rectangular de un `GameObject`. Edite su clase GameObject para extenderla:
+
+
+    ```javascript
+    rectFromGameObject() {
+        return {
+          top: this.y,
+          left: this.x,
+          bottom: this.y + this.height,
+          right: this.x + this.width,
+        };
+      }
+    ```
+
+2. **Agregar código que verifica la colisión** Esta será una nueva función que prueba si dos rectángulos se cruzan:
+
+    ```javascript
+    function intersectRect(r1, r2) {
+      return !(
+        r2.left > r1.right ||
+        r2.right < r1.left ||
+        r2.top > r1.bottom ||
+        r2.bottom < r1.top
+      );
+    }
+    ```
+
+3. **Agregar capacidad de disparo láser**
+    1. **Agregar mensaje de evento clave**. La tecla *espacio* debería crear un láser justo encima de la nave del héroe. Agregue tres constantes en el objeto Mensajes:
+
+       ```javascript
+        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
+        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
+        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
+       ```
+
+1. **Tecla de espacio en el mango**. Edite la función de teclado `window.addEventListener` para manejar espacios:
+
+      ```javascript
+        } else if(evt.keyCode === 32) {
+          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+        }
+      ```
+
+1. **Agregar oyentes**. Edite la función ʻinitGame () `para asegurarse de que el héroe pueda disparar cuando se presione la barra espaciadora:
+
+       ```javascript
+       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+        if (hero.canFire()) {
+          hero.fire();
+        }
+       ```
+
+       y agregue una nueva función `eventEmitter.on ()` para asegurar el comportamiento cuando un enemigo choca con un láser:
+
+          ```javascript
+          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+            first.dead = true;
+            second.dead = true;
+          })
+          ```
+
+   1.**Mover objeto**, asegúrese de que el láser se mueva gradualmente hacia la parte superior de la pantalla. Creará una nueva clase Laser que amplíe `GameObject`, como lo hizo antes: 
+   
+      ```javascript
+        class Laser extends GameObject {
+        constructor(x, y) {
+          super(x,y);
+          (this.width = 9), (this.height = 33);
+          this.type = 'Laser';
+          this.img = laserImg;
+          let id = setInterval(() => {
+            if (this.y > 0) {
+              this.y -= 15;
+            } else {
+              this.dead = true;
+              clearInterval(id);
+            }
+          }, 100)
+        }
+      }
+      ```
+
+1. **Manejar colisiones**, implementar reglas de colisión para el láser. Agregue una función `updateGameObjects()` que prueba los objetos en colisión en busca de hits
+
+      ```javascript
+      function updateGameObjects() {
+        const enemies = gameObjects.filter(go => go.type === 'Enemy');
+        const lasers = gameObjects.filter((go) => go.type === "Laser");
+      // laser hit something
+        lasers.forEach((l) => {
+          enemies.forEach((m) => {
+            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+              first: l,
+              second: m,
+            });
+          }
+         });
+      });
+
+        gameObjects = gameObjects.filter(go => !go.dead);
+      }  
+      ```
+
+      Asegúrate de agregar `updateGameObjects()` en tu bucle de juego en `window.onload`.
+
+    4. **Implemente el tiempo de reutilización** en el láser, para que solo se pueda disparar con cierta frecuencia.
+
+       Finalmente, edite la clase Hero para que pueda enfriarse:
+
+       ```javascript
+      class Hero extends GameObject {
+        constructor(x, y) {
+          super(x, y);
+          (this.width = 99), (this.height = 75);
+          this.type = "Hero";
+          this.speed = { x: 0, y: 0 };
+          this.cooldown = 0;
+        }
+        fire() {
+          gameObjects.push(new Laser(this.x + 45, this.y - 10));
+          this.cooldown = 500;
+    
+          let id = setInterval(() => {
+            if (this.cooldown > 0) {
+              this.cooldown -= 100;
+            } else {
+              clearInterval(id);
+            }
+          }, 200);
+        }
+        canFire() {
+          return this.cooldown === 0;
+        }
+      }
+      ```
+
+En este punto, ¡tu juego tiene algunas funciones! Puedes navegar con tus flechas, disparar un láser con tu barra espaciadora y los enemigos desaparecen cuando los golpeas. ¡Bien hecho!
+
+🚀 Desafío: ¡Agrega una explosión! Echa un vistazo a los recursos del juego en [el repositorio de Space Art](../solution/spaceArt/readme.txt) e intenta agregar una explosión cuando el láser golpea a un extraterrestre.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Experimente con los intervalos de su juego hasta ahora. ¿Qué pasa cuando los cambias? Más información sobre [eventos de tiempo de JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
+
+**Asignación**: [Explorar colisiones](assignment.md)
diff --git a/space-game/4-collision-detection/translations/assignment.es.md b/space-game/4-collision-detection/translations/assignment.es.md
new file mode 100644
index 00000000..68616307
--- /dev/null
+++ b/space-game/4-collision-detection/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Explorar colisiones
+
+## Instrucciones
+
+## Rúbrica
+
+Para comprender mejor cómo funcionan las colisiones, cree un juego muy pequeño con algunos elementos que chocan. Haz que se muevan presionando las teclas o haciendo clic con el mouse, y haz que algo le suceda a uno de los elementos cuando se golpea. Podría ser algo como un meteoro golpeando la tierra o autos chocadores. ¡Se creativo!
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- -------------------------------------------------- -------------------- | ------------------------------ | ----------------- |
+| | Se produce una muestra de código de trabajo completa, con elementos dibujados en el lienzo, ocurriendo una colisión básica y ocurriendo reacciones | El código está incompleto de alguna manera | Fallos del código |
diff --git a/space-game/4-collision-detection/your-work/app.js b/space-game/4-collision-detection/your-work/app.js
new file mode 100644
index 00000000..92750b77
--- /dev/null
+++ b/space-game/4-collision-detection/your-work/app.js
@@ -0,0 +1,180 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+const Messages = {
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 5;
+	});
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+
+	initGame();
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/4-collision-detection/your-work/assets/enemyShip.png b/space-game/4-collision-detection/your-work/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/4-collision-detection/your-work/assets/enemyShip.png differ
diff --git a/space-game/4-collision-detection/your-work/assets/laserRed.png b/space-game/4-collision-detection/your-work/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/4-collision-detection/your-work/assets/laserRed.png differ
diff --git a/space-game/4-collision-detection/your-work/assets/life.png b/space-game/4-collision-detection/your-work/assets/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/4-collision-detection/your-work/assets/life.png differ
diff --git a/space-game/4-collision-detection/your-work/assets/player.png b/space-game/4-collision-detection/your-work/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/4-collision-detection/your-work/assets/player.png differ
diff --git a/space-game/4-collision-detection/your-work/index.html b/space-game/4-collision-detection/your-work/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/4-collision-detection/your-work/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/4-collision-detection/your-work/package.json b/space-game/4-collision-detection/your-work/package.json
new file mode 100644
index 00000000..54967de1
--- /dev/null
+++ b/space-game/4-collision-detection/your-work/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "solution",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "start": "npx http-server -c-1 -p 5000",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
diff --git a/space-game/5-keeping-score/.github/post-lecture-quiz.md b/space-game/5-keeping-score/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..53bc4fb3
--- /dev/null
+++ b/space-game/5-keeping-score/.github/post-lecture-quiz.md
@@ -0,0 +1,12 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. What's a fun way to show how many lifes a player has left
+
+- [ ] a number of ships
+- [ ] a decimal number
+
+2. How do you center text in the middle of the screen using the Canvas element
+
+- [ ] You use Flexbox
+- [ ] You instruct the text to be drawn at the x coordinate of: the client window width/2
+- [ ] You set the `textAlign` property to the value `center` on the context object.
diff --git a/space-game/5-keeping-score/.github/pre-lecture-quiz.md b/space-game/5-keeping-score/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..b52fa74a
--- /dev/null
+++ b/space-game/5-keeping-score/.github/pre-lecture-quiz.md
@@ -0,0 +1,14 @@
+*A warm-up quiz about game development*
+
+Complete this quiz in class
+
+1. How do you draw text on a screen using the Canvas element?
+
+- [ ] place text inside a div or span element
+- [ ] Call drawText() on the Canvas element
+- [ ] Call fillText() on the context object
+
+2. Why do you have the concept of *lifes* in a game?
+
+- [ ] to show how much damage you can take.
+- [ ] So that the game doesn't end straight away, but you have n number of chances before the game is over.
diff --git a/space-game/5-keeping-score/LICENSE b/space-game/5-keeping-score/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/space-game/5-keeping-score/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/space-game/5-keeping-score/README.md b/space-game/5-keeping-score/README.md
new file mode 100644
index 00000000..428fed07
--- /dev/null
+++ b/space-game/5-keeping-score/README.md
@@ -0,0 +1,185 @@
+# Build a Space Game Part V: Scoring and Lives
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+In this lesson, you'll learn how to add scoring to a game and calculate lives.
+
+## Draw text on the screen
+
+To be able to display a game score on the screen, you'll need to know how to place text on the screen. The answer is using the `fillText()` method on the canvas object. You can also control other aspects like what font to use, the color of the text and even its alignment (left, right, center). Below is some code drawing some text on the screen.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier!
+
+## Life, as a game concept
+
+The concept of having a life in a game is only a number. In the context of a space game it's common to assign a set of lives that get deducted one by one when your ship takes damage. It's nice if you can show a graphical representation of this like miniships or hearts instead of a number.
+
+## What to build
+
+Let's add the following to your game:
+
+- **Game score**: For every enemy ship that is destroyed, the hero should be awarded some points, we suggest a 100 points per ship. The game score should be shown in the bottom left.
+- **Life**: Your ship has three lives. You lose a life every time an enemy ship collides with you. A life score should be displayed at the bottom right and be made out of the following graphic ![life image](solution/assets/life.png).
+
+## Recommended steps
+
+Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+You start your project the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address, right now it should render the hero and all the enemies, and as you hit your left and right arrows, the hero moves and can shoot down enemies.
+
+### Add code
+
+1. **Copy over the needed assets** from the `solution/assets/` folder into `your-work` folder; you will add a `life.png` asset. Add the lifeImg to the window.onload function: 
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Add the `lifeImg` to the list of assets:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Add variables**. Add code that represents your total score (0) and lives left (3), display these scores on a screen.
+
+3. **Extend `updateGameObjects()` function**. Extend the `updateGameObjects()` function to handle enemy collisions:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Add `life` and `points`**. 
+   1. **Initialize variables**. Under `this.cooldown = 0` in the `Hero` class, set life and points:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Draw variables on screen**. Draw these values to screen:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Add methods to Game loop**. Make sure you add these functions to your window.onload function under `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implement game rules**. Implement the following game rules:
+
+   1. **For every hero and enemy collision**, deduct a life.
+   
+      Extend the `Hero` class to do this deduction:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **For every laser that hits an enemy**, increase game score with a 100 points.
+
+      Extend the Hero class to do this increment:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Add these functions to your Collision Event Emitters:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Do a little research to discover other games that are created using JavaScript/Canvas. What are their common traits?
+
+By the end of this work, you should see the small 'life' ships at the bottom right, points at the bottom left, and you should see your life count decrement as you collide with enemies and your points increment when you shoot enemies. Well done! Your game is almost complete.
+
+---
+
+## 🚀 Challenge
+
+Your code is almost complete. Can you envision your next steps?
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Research some ways that you can increment and decrement game scores and lives. There are some interesting game engines like [PlayFab](https://playfab.com). How could using one of these would enhance your game?
+
+## Assignment
+
+[Build a Scoring Game](assignment.md)
diff --git a/space-game/5-keeping-score/assignment.md b/space-game/5-keeping-score/assignment.md
new file mode 100644
index 00000000..a61e74d7
--- /dev/null
+++ b/space-game/5-keeping-score/assignment.md
@@ -0,0 +1,11 @@
+# Build a Scoring Game
+
+## Instructions
+
+Create a game where you display life and points in a creative way. A suggestion is to show the life as hearts and the points as a big number in the bottom center part of the screen. Have a look here for [Free game resources](https://www.kenney.nl/)
+
+# Rubric
+
+| Criteria | Exemplary              | Adequate                    | Needs Improvement          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | full game is presented | game is partially presented | partial game contains bugs |
\ No newline at end of file
diff --git a/space-game/5-keeping-score/solution/app.js b/space-game/5-keeping-score/solution/app.js
new file mode 100644
index 00000000..87978a91
--- /dev/null
+++ b/space-game/5-keeping-score/solution/app.js
@@ -0,0 +1,311 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+
+	rectFromGameObject() {
+		return {
+			top: this.y,
+			left: this.x,
+			bottom: this.y + this.height,
+			right: this.x + this.width,
+		};
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+		this.cooldown = 0;
+		this.life = 3;
+		this.points = 0;
+	}
+	fire() {
+		gameObjects.push(new Laser(this.x + 45, this.y - 10));
+		this.cooldown = 500;
+
+		let id = setInterval(() => {
+			if (this.cooldown > 0) {
+				this.cooldown -= 100;
+			} else {
+				clearInterval(id);
+			}
+		}, 200);
+	}
+	canFire() {
+		return this.cooldown === 0;
+	}
+	decrementLife() {
+		this.life--;
+		if (this.life === 0) {
+			this.dead = true;
+		}
+	}
+	incrementPoints() {
+		this.points += 100;
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+class Laser extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 9), (this.height = 33);
+		this.type = 'Laser';
+		this.img = laserImg;
+		let id = setInterval(() => {
+			if (this.y > 0) {
+				this.y -= 15;
+			} else {
+				this.dead = true;
+				clearInterval(id);
+			}
+		}, 100);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function intersectRect(r1, r2) {
+	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
+}
+
+const Messages = {
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+	KEY_EVENT_SPACE: 'KEY_EVENT_SPACE',
+	COLLISION_ENEMY_LASER: 'COLLISION_ENEMY_LASER',
+	COLLISION_ENEMY_HERO: 'COLLISION_ENEMY_HERO',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	lifeImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	// console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	} else if (evt.keyCode === 32) {
+		eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function updateGameObjects() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy');
+	const lasers = gameObjects.filter((go) => go.type === 'Laser');
+
+	enemies.forEach((enemy) => {
+		const heroRect = hero.rectFromGameObject();
+		if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+			eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+		}
+	});
+	// laser hit something
+	lasers.forEach((l) => {
+		enemies.forEach((m) => {
+			if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+				eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+					first: l,
+					second: m,
+				});
+			}
+		});
+	});
+
+	gameObjects = gameObjects.filter((go) => !go.dead);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+		if (hero.canFire()) {
+			hero.fire();
+		}
+		// console.log('cant fire - cooling down')
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+		first.dead = true;
+		second.dead = true;
+		hero.incrementPoints();
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+		enemy.dead = true;
+		hero.decrementLife();
+	});
+}
+
+function drawLife() {
+	// TODO, 35, 27
+	//
+
+	const START_POS = canvas.width - 180;
+	for (let i = 0; i < hero.life; i++) {
+		ctx.drawImage(lifeImg, START_POS + 45 * (i + 1), canvas.height - 37);
+	}
+}
+
+function drawPoints() {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = 'red';
+	ctx.textAlign = 'left';
+	drawText('Points: ' + hero.points, 10, canvas.height - 20);
+}
+
+function drawText(message, x, y) {
+	ctx.fillText(message, x, y);
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+	lifeImg = await loadTexture('assets/life.png');
+
+	initGame();
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		drawPoints();
+		drawLife();
+		updateGameObjects();
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/5-keeping-score/solution/assets/enemyShip.png b/space-game/5-keeping-score/solution/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/5-keeping-score/solution/assets/enemyShip.png differ
diff --git a/space-game/5-keeping-score/solution/assets/laserRed.png b/space-game/5-keeping-score/solution/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/5-keeping-score/solution/assets/laserRed.png differ
diff --git a/space-game/5-keeping-score/solution/assets/life.png b/space-game/5-keeping-score/solution/assets/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/5-keeping-score/solution/assets/life.png differ
diff --git a/space-game/5-keeping-score/solution/assets/player.png b/space-game/5-keeping-score/solution/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/5-keeping-score/solution/assets/player.png differ
diff --git a/space-game/5-keeping-score/solution/index.html b/space-game/5-keeping-score/solution/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/5-keeping-score/solution/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/5-keeping-score/solution/package.json b/space-game/5-keeping-score/solution/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/5-keeping-score/solution/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/5-keeping-score/translations/README.es.md b/space-game/5-keeping-score/translations/README.es.md
new file mode 100644
index 00000000..5e3e8f15
--- /dev/null
+++ b/space-game/5-keeping-score/translations/README.es.md
@@ -0,0 +1,182 @@
+# Construye un juego espacial Parte V: Puntuación y vidas
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+En esta lección, aprenderá cómo agregar puntos a un juego y calcular vidas.
+
+## Dibujar texto en la pantalla
+
+Para poder mostrar la puntuación de un juego en la pantalla, necesitará saber cómo colocar texto en la pantalla. La respuesta es usar el método `fillText()` en el objeto de lienzo. También puedes controlar otros aspectos como qué tipo de letra usar, el color del texto e incluso su alineación (izquierda, derecha, centro). A continuación se muestra un código que dibuja un texto en la pantalla.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ Lea más sobre [cómo agregar texto a un lienzo](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ¡y siéntase libre de hacer que el suyo se vea más elegante!
+
+## La vida, como concepto de juego
+
+El concepto de tener una vida en un juego es solo un número. En el contexto de un juego espacial, es común asignar un conjunto de vidas que se deducen una por una cuando tu nave sufre daños. Es bueno si puede mostrar una representación gráfica de esto como miniships o corazones en lugar de un número.
+
+## Qué construir
+
+Agreguemos lo siguiente a tu juego:
+
+- **Game score**** (Puntuación del juego): por cada barco enemigo que sea destruido, el héroe debería recibir algunos puntos, sugerimos 100 puntos por barco. La puntuación del juego debe mostrarse en la parte inferior izquierda.
+- **Life** (Vida): Tu nave tiene tres vidas. Pierdes una vida cada vez que un barco enemigo choca contigo. Se debe mostrar un puntaje de vida en la parte inferior derecha y estar compuesto por el siguiente gráfico: [life image](solution/assets/life.png)..
+
+## Pasos recomendados
+
+Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Comienzas tu proyecto en la carpeta `your_work` escribiendo:
+
+```bash
+cd your-work
+npm start
+```
+
+Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abre un navegador e ingresa esa dirección, en este momento debería representar al héroe y a todos los enemigos, y cuando presionas las flechas izquierda y derecha, el héroe se mueve y puede derribar enemigos.
+
+### Agregar código
+
+1. **Copie los recursos necesarios** de la carpeta `solution/ assets/` a la carpeta `your-work`; agregará un activo `life.png`. Agregue el lifeImg a la función window.onload:
+
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Agregue el `lifeImg` a la lista de activos:
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2.**Agregar variables**. Agregue un código que represente su puntaje total (0) y las vidas restantes (3), muestre estos puntajes en una pantalla.
+
+3. **Amplíe la función `updateGameObjects()`**. Amplíe la función `updateGameObjects()` para manejar las colisiones enemigas:
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Agrega `life` y `points`**.
+    1. **Inicializar variables**. En `this.cooldown = 0` en la clase `Hero`, establece la vida y los puntos:
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Dibujar variables en pantalla**. Dibuja estos valores en la pantalla:
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Agregar métodos al bucle del juego**. Asegúrese de agregar estas funciones a su función window.onload en `updateGameObjects ()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Implementa las reglas del juego**. Implementa las siguientes reglas del juego:
+
+    1. **Por cada colisión entre héroes y enemigos**, resta una vida.
+   
+       Extiende la clase `Hero` para hacer esta deducción:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Por cada láser que golpea a un enemigo**, aumenta la puntuación del juego con 100 puntos.
+
+       Extiende la clase Hero para hacer este incremento:
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Agregue estas funciones a sus Collision Event Emitters:
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Investigue un poco para descubrir otros juegos creados con JavaScript / Canvas. ¿Cuáles son sus rasgos comunes?
+
+Al final de este trabajo, deberías ver las pequeñas naves de 'vida' en la parte inferior derecha, los puntos en la parte inferior izquierda, y deberías ver que tu cuenta de vidas disminuye cuando chocas con enemigos y tus puntos aumentan cuando disparas a los enemigos. ¡Bien hecho! Tu juego está casi completo.
+
+🚀Challenge: Tu código está casi completo. ¿Puedes imaginar tus próximos pasos?
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Investigue algunas formas en las que puede incrementar y disminuir las puntuaciones y vidas del juego. Hay algunos motores de juegos interesantes como [PlayFab](https://playfab.com). ¿Cómo podría mejorar tu juego el uso de uno de estos?
+
+**Tarea**: [Crear un juego de puntuación](assignment.md)
diff --git a/space-game/5-keeping-score/translations/assignment.es.md b/space-game/5-keeping-score/translations/assignment.es.md
new file mode 100644
index 00000000..f30644b8
--- /dev/null
+++ b/space-game/5-keeping-score/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Construye un juego de puntuación
+
+## Instrucciones
+
+Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos] (https://www.kenney.nl/)
+
+# Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+| | se presenta el juego completo | se presenta parcialmente el juego | juego parcial contiene errores |
\ No newline at end of file
diff --git a/space-game/5-keeping-score/your-work/app.js b/space-game/5-keeping-score/your-work/app.js
new file mode 100644
index 00000000..8f01eef9
--- /dev/null
+++ b/space-game/5-keeping-score/your-work/app.js
@@ -0,0 +1,261 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+
+	rectFromGameObject() {
+		return {
+			top: this.y,
+			left: this.x,
+			bottom: this.y + this.height,
+			right: this.x + this.width,
+		};
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+		this.cooldown = 0;
+	}
+	fire() {
+		gameObjects.push(new Laser(this.x + 45, this.y - 10));
+		this.cooldown = 500;
+
+		let id = setInterval(() => {
+			if (this.cooldown > 0) {
+				this.cooldown -= 100;
+			} else {
+				clearInterval(id);
+			}
+		}, 200);
+	}
+	canFire() {
+		return this.cooldown === 0;
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+class Laser extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 9), (this.height = 33);
+		this.type = 'Laser';
+		this.img = laserImg;
+		let id = setInterval(() => {
+			if (this.y > 0) {
+				this.y -= 15;
+			} else {
+				this.dead = true;
+				clearInterval(id);
+			}
+		}, 100);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function intersectRect(r1, r2) {
+	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
+}
+
+const Messages = {
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+	KEY_EVENT_SPACE: 'KEY_EVENT_SPACE',
+	COLLISION_ENEMY_LASER: 'COLLISION_ENEMY_LASER',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	// console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	} else if (evt.keyCode === 32) {
+		eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function updateGameObjects() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy');
+	const lasers = gameObjects.filter((go) => go.type === 'Laser');
+	// laser hit something
+	lasers.forEach((l) => {
+		enemies.forEach((m) => {
+			if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+				eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+					first: l,
+					second: m,
+				});
+			}
+		});
+	});
+
+	gameObjects = gameObjects.filter((go) => !go.dead);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+		if (hero.canFire()) {
+			hero.fire();
+		}
+		// console.log('cant fire - cooling down')
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+		first.dead = true;
+		second.dead = true;
+	});
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+
+	initGame();
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		updateGameObjects();
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/5-keeping-score/your-work/assets/enemyShip.png b/space-game/5-keeping-score/your-work/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/5-keeping-score/your-work/assets/enemyShip.png differ
diff --git a/space-game/5-keeping-score/your-work/assets/laserRed.png b/space-game/5-keeping-score/your-work/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/5-keeping-score/your-work/assets/laserRed.png differ
diff --git a/space-game/5-keeping-score/your-work/assets/life.png b/space-game/5-keeping-score/your-work/assets/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/5-keeping-score/your-work/assets/life.png differ
diff --git a/space-game/5-keeping-score/your-work/assets/player.png b/space-game/5-keeping-score/your-work/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/5-keeping-score/your-work/assets/player.png differ
diff --git a/space-game/5-keeping-score/your-work/index.html b/space-game/5-keeping-score/your-work/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/5-keeping-score/your-work/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/5-keeping-score/your-work/package.json b/space-game/5-keeping-score/your-work/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/5-keeping-score/your-work/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/6-end-condition/.github/post-lecture-quiz.md b/space-game/6-end-condition/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..5d1fd760
--- /dev/null
+++ b/space-game/6-end-condition/.github/post-lecture-quiz.md
@@ -0,0 +1,12 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. What is a good pattern to use when a game end condition has been met?
+
+- [ ] Display a suitable message
+- [ ] Quit the game
+- [ ] Display a suitable message, offer the player to restart, and display what key to hit for that action
+
+1. You should offer a restart only when the game has ended
+
+- [ ] true
+- [ ] false
diff --git a/space-game/6-end-condition/.github/pre-lecture-quiz.md b/space-game/6-end-condition/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..c86c6bb6
--- /dev/null
+++ b/space-game/6-end-condition/.github/pre-lecture-quiz.md
@@ -0,0 +1,14 @@
+*A warm-up quiz about game development*
+
+Complete this quiz in class
+
+1. When is a good time to restart a game
+
+- [ ] when a player wins or loses
+- [ ] whenever
+
+2. When should a game end
+
+- [ ] when an enemy ship is destroyed
+- [ ] when a hero ship is destroyed
+- [ ] when points are collected
\ No newline at end of file
diff --git a/space-game/6-end-condition/LICENSE b/space-game/6-end-condition/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/space-game/6-end-condition/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/space-game/6-end-condition/README.md b/space-game/6-end-condition/README.md
new file mode 100644
index 00000000..95770d17
--- /dev/null
+++ b/space-game/6-end-condition/README.md
@@ -0,0 +1,218 @@
+# Build a Space Game Part VI: End and Restart
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
+
+- **`N` Enemy ships have been destroyed**: It's quite common if you divide up a game into different levels that you need to destroy `N` Enemy ships to complete a level
+- **Your ship has been destroyed**: There are definitely games where you lose the game if your ship is destroyed. Another common approach is that you have the concept of lives. Every time a your ship is destroyed it deducts a life. Once all lives have been lost then you lose the game.
+- **You've collected `N` points**: Another common end condition is for you to collect points. How you get points is up to you but it's quite common to assign points to various activities like destroying an enemy ship or maybe collect items that items *drop* when they are destroyed.
+- **Complete a level**: This might involve several conditions such as `X` enemy ships destroyed, `Y` points collected or maybe that a specific item has been collected.
+
+## Restarting
+
+If people enjoy your game they are likely to want to replay it. Once the game ends for whatever reason you should offer an alternative to restart.
+
+✅ Think a bit about under what conditions you find a game ends, and then how you are prompted to restart
+
+## What to build
+
+You will be adding these rules to your game:
+
+1. **Winning the game**. Once all enemy ships have been destroyed, you win the game. Additionally display some kind of victory message.
+1. **Restart**. Once all your lives are lost or the game is won, you should offer a way to restart the game. Remember! You will need to reinitialize the game and the previous game state should be cleared.
+
+## Recommended steps
+
+Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+You start your project the `your_work` folder by typing:
+
+```bash
+cd your-work
+npm start
+```
+
+The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address. Your game should be in a playable state.
+
+> tip: to avoid warnings in Visual Studio Code, edit the `window.onload` function to call `gameLoopId` as is (without `let`), and declare the gameLoopId at the top of the file, independently: `let gameLoopId;`
+
+### Add code
+
+1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyedby adding these two functions:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Add logic to message handlers**. Edit the `eventEmitter` to handle these conditions:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Add new message types**. Add these Messages to the constants object:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Add restart code** code that restarts the game at the press of a selected button.
+
+   1. **Listen to key press `Enter`**. Edit your window's eventListener to listen for this press:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Add restart message**. Add this Message to your Messages constant:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implement game rules**.  Implement the following game rules:
+
+   1. **Player win condition**. When all enemy ships are destroyed, display a victory message.
+
+      1. First, create a `displayMessage()` function:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Create an `endGame()` function:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Restart logic**. When all lives are lost or the player won the game, display that the game can be restarted. Additionally restart the game when the *restart* key is hit (you can decide what key should be mapped to restart).
+
+      1. Create the `resetGame()` function:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Add a call to the `eventEmitter` to reset the game in `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Add a `clear()` function to the EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Congratulations, Captain! Your game is complete! Well done! 🚀 💥 👽
+
+---
+
+## 🚀 Challenge
+
+Add a sound! Can you add a sound to enhance your game play, maybe when there's a laser hit, or the hero dies or wins? Have a look at this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sound using JavaScript
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Your assignment is to create a fresh sample game, so explore some of the interesting games out there to see what type of game you might build.
+
+## Assignment
+
+[Build a Sample Game](assignment.md)
diff --git a/space-game/6-end-condition/assignment.md b/space-game/6-end-condition/assignment.md
new file mode 100644
index 00000000..e5c7570e
--- /dev/null
+++ b/space-game/6-end-condition/assignment.md
@@ -0,0 +1,19 @@
+# Build a Sample Game
+
+## Instructions
+
+Try building a small game where you practice on different end conditions. Vary between getting a number of points, the hero loses all lives or all monsters are defeated. Build something simple like a console based adventure game. Use the below game flow as inspiration:
+
+```
+Hero> Strikes with broadsword - orc takes 3p damage
+Orc> Hits with club - hero takes 2p damage
+Hero> Kicks - orc takes 1p damage
+Game> Orc is defeated - Hero collects 2 coins
+Game> ****No more monsters, you have conquered the evil fortress****
+```
+
+## Rubric
+
+| Criteria | Exemplary              | Adequate                    | Needs Improvement          |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+|          | full game is presented | game is partially presented | partial game contains bugs |
\ No newline at end of file
diff --git a/space-game/6-end-condition/solution/app.js b/space-game/6-end-condition/solution/app.js
new file mode 100644
index 00000000..f16f290c
--- /dev/null
+++ b/space-game/6-end-condition/solution/app.js
@@ -0,0 +1,392 @@
+// @ts-check
+let gameLoopId;
+
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+	clear() {
+		this.listeners = {};
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+
+	rectFromGameObject() {
+		return {
+			top: this.y,
+			left: this.x,
+			bottom: this.y + this.height,
+			right: this.x + this.width,
+		};
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+		this.cooldown = 0;
+		this.life = 3;
+		this.points = 0;
+	}
+	fire() {
+		gameObjects.push(new Laser(this.x + 45, this.y - 10));
+		this.cooldown = 500;
+
+		let id = setInterval(() => {
+			if (this.cooldown > 0) {
+				this.cooldown -= 100;
+			} else {
+				clearInterval(id);
+			}
+		}, 200);
+	}
+	canFire() {
+		return this.cooldown === 0;
+	}
+	decrementLife() {
+		this.life--;
+		if (this.life === 0) {
+			this.dead = true;
+		}
+	}
+	incrementPoints() {
+		this.points += 100;
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+class Laser extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 9), (this.height = 33);
+		this.type = 'Laser';
+		this.img = laserImg;
+		let id = setInterval(() => {
+			if (this.y > 0) {
+				this.y -= 15;
+			} else {
+				this.dead = true;
+				clearInterval(id);
+			}
+		}, 100);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function intersectRect(r1, r2) {
+	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
+}
+
+const Messages = {
+	KEY_EVENT_ENTER: 'KEY_EVENT_ENTER',
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+	KEY_EVENT_SPACE: 'KEY_EVENT_SPACE',
+	COLLISION_ENEMY_LASER: 'COLLISION_ENEMY_LASER',
+	COLLISION_ENEMY_HERO: 'COLLISION_ENEMY_HERO',
+	GAME_END_LOSS: 'GAME_END_LOSS',
+	GAME_END_WIN: 'GAME_END_WIN',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	lifeImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	// console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	} else if (evt.keyCode === 32) {
+		eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+	} else if (evt.key === 'Enter') {
+		eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function updateGameObjects() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy');
+	const lasers = gameObjects.filter((go) => go.type === 'Laser');
+
+	enemies.forEach((enemy) => {
+		const heroRect = hero.rectFromGameObject();
+		if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+			eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+		}
+	});
+	// laser hit something
+	lasers.forEach((l) => {
+		enemies.forEach((m) => {
+			if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+				eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+					first: l,
+					second: m,
+				});
+			}
+		});
+	});
+
+	gameObjects = gameObjects.filter((go) => !go.dead);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+		resetGame();
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 20;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 20;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+		if (hero.canFire()) {
+			hero.fire();
+		}
+		// console.log('cant fire - cooling down')
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+		first.dead = true;
+		second.dead = true;
+		hero.incrementPoints();
+
+		if (isEnemiesDead()) {
+			eventEmitter.emit(Messages.GAME_END_WIN);
+		}
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+		enemy.dead = true;
+		hero.decrementLife();
+		if (isHeroDead()) {
+			eventEmitter.emit(Messages.GAME_END_LOSS);
+			return; // loss before victory
+		}
+		if (isEnemiesDead()) {
+			eventEmitter.emit(Messages.GAME_END_WIN);
+		}
+	});
+
+	eventEmitter.on(Messages.GAME_END_WIN, () => {
+		endGame(true);
+	});
+	eventEmitter.on(Messages.GAME_END_LOSS, () => {
+		endGame(false);
+	});
+}
+
+function endGame(win) {
+	clearInterval(gameLoopId);
+
+	// set delay so we are sure any paints have finished
+	setTimeout(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		if (win) {
+			displayMessage('Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew', 'green');
+		} else {
+			displayMessage('You died !!! Press [Enter] to start a new game Captain Pew Pew');
+		}
+	}, 200);
+}
+
+function isHeroDead() {
+	return hero.life <= 0;
+}
+
+function isEnemiesDead() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy' && !go.dead);
+	return enemies.length === 0;
+}
+
+function drawLife() {
+	// TODO, 35, 27
+	//
+
+	const START_POS = canvas.width - 180;
+	for (let i = 0; i < hero.life; i++) {
+		ctx.drawImage(lifeImg, START_POS + 45 * (i + 1), canvas.height - 37);
+	}
+}
+
+function drawPoints() {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = 'red';
+	ctx.textAlign = 'left';
+	drawText('Points: ' + hero.points, 10, canvas.height - 20);
+}
+
+function drawText(message, x, y) {
+	ctx.fillText(message, x, y);
+}
+
+function displayMessage(message, color = 'red') {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = color;
+	ctx.textAlign = 'center';
+	ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+
+function resetGame() {
+	if (gameLoopId) {
+		clearInterval(gameLoopId);
+		eventEmitter.clear();
+		initGame();
+		gameLoopId = setInterval(() => {
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.fillStyle = 'black';
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+			drawPoints();
+			drawLife();
+			updateGameObjects();
+			drawGameObjects(ctx);
+		}, 100);
+	}
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+	lifeImg = await loadTexture('assets/life.png');
+
+	initGame();
+	gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		drawPoints();
+		drawLife();
+		updateGameObjects();
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/6-end-condition/solution/assets/enemyShip.png b/space-game/6-end-condition/solution/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/6-end-condition/solution/assets/enemyShip.png differ
diff --git a/space-game/6-end-condition/solution/assets/laserRed.png b/space-game/6-end-condition/solution/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/6-end-condition/solution/assets/laserRed.png differ
diff --git a/space-game/6-end-condition/solution/assets/life.png b/space-game/6-end-condition/solution/assets/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/6-end-condition/solution/assets/life.png differ
diff --git a/space-game/6-end-condition/solution/assets/player.png b/space-game/6-end-condition/solution/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/6-end-condition/solution/assets/player.png differ
diff --git a/space-game/6-end-condition/solution/index.html b/space-game/6-end-condition/solution/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/6-end-condition/solution/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/6-end-condition/solution/package.json b/space-game/6-end-condition/solution/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/6-end-condition/solution/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/6-end-condition/translations/README.es.md b/space-game/6-end-condition/translations/README.es.md
new file mode 100644
index 00000000..885d0dc0
--- /dev/null
+++ b/space-game/6-end-condition/translations/README.es.md
@@ -0,0 +1,214 @@
+# Construye un juego espacial Parte VI: Finalizar y reiniciar
+
+![video](video-url)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+Hay diferentes formas de expresar y *condición final* en un juego. Depende de usted, como creador del juego, decir por qué ha terminado. Aquí hay algunas razones, si asumimos que estamos hablando del juego espacial que has estado construyendo hasta ahora:
+
+- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves` N` Enemy para completar un nivel
+- **Tu nave ha sido destruida**: Definitivamente hay juegos en los que pierdes el juego si tu nave es destruida. Otro enfoque común es que tienes el concepto de vidas. Cada vez que un barco es destruido, se descuenta una vida. Una vez que se hayan perdido todas las vidas, perderá el juego.
+- **Has acumulado `N` puntos**: Otra condición final común es que acumules puntos. La forma de obtener puntos depende de usted, pero es bastante común asignar puntos a diversas actividades, como destruir una nave enemiga o tal vez recolectar elementos que los elementos *sueltan* cuando son destruidos.
+- **Completa un nivel**: Esto puede implicar varias condiciones como "X" barcos enemigos destruidos, puntos "Y" acumulados o tal vez que se haya recogido un objeto específico.
+
+## Reiniciando
+
+Si las personas disfrutan de tu juego, es probable que quieran volver a jugarlo. Una vez que el juego termina por cualquier motivo, debes ofrecer una alternativa para reiniciar.
+
+✅ Piensa un poco en las condiciones en las que encuentras que termina un juego y luego cómo se te pide que reinicies
+
+## Qué construir
+
+Agregará estas reglas a su juego:
+
+1. **Ganar el juego**. Una vez que todas las naves enemigas hayan sido destruidas, ganas el juego. Además, muestra algún tipo de mensaje de victoria.
+1. **Reiniciar**. Una vez que hayas perdido todas tus vidas o hayas ganado el juego, debes ofrecer una forma de reiniciar el juego. ¡Recuerda! Deberá reinicializar el juego y se debe borrar el estado anterior del juego.
+
+## Pasos recomendados
+
+Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Comienzas tu proyecto en la carpeta `your_work` escribiendo:
+
+```bash
+cd your-work
+npm start
+```
+
+Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abra un navegador e ingrese esa dirección. Tu juego debe estar en un estado jugable.
+
+> consejo: para evitar advertencias en Visual Studio Code, edite la función `window.onload` para llamar a `gameLoopId` tal cual (sin `let`), y declare el gameLoopId en la parte superior del archivo, independientemente: `let gameLoopId;`
+
+### Agregar código
+
+1. **Condición de fin de pista**. Agregue un código que realice un seguimiento de la cantidad de enemigos o si el barco héroe ha sido destruido agregando estas dos funciones:
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Agregar lógica a los controladores de mensajes**. Edite el `eventEmitter` para manejar estas condiciones:
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Agregar nuevos tipos de mensajes**. Agregue estos mensajes al objeto de constantes:
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+2. **Agregar código de reinicio** código que reinicia el juego con solo presionar un botón seleccionado.
+
+    1. **Escuche la tecla "Enter"**. Edite el eventListener de su ventana para escuchar esta prensa:
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+1. **Agregar mensaje de reinicio**. Agregue este mensaje a su constante de Mensajes:
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Implementar las reglas del juego**. Implementa las siguientes reglas del juego:
+
+    1. **Condición de victoria del jugador**. Cuando todos los barcos enemigos sean destruidos, muestra un mensaje de victoria.
+
+       1. Primero, cree una función `displayMessage()`:
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Cree una función `endGame()`:
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // establece una demora para estar seguros de que las pinturas han terminado
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Reiniciar la lógica**. Cuando se pierdan todas las vidas o el jugador haya ganado el juego, muestre que el juego se puede reiniciar. Además, reinicie el juego cuando se presione la tecla *reiniciar* (puede decidir qué tecla debe asignarse para reiniciar).
+
+       1. Cree la función `resetGame()`:
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Agrega una llamada al `eventEmitter` para reiniciar el juego en `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Agregue una función `clear()` al EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 ¡Felicitaciones, Capitán! ¡Tu juego está completo! ¡Bien hecho! 🚀 💥 👽
+
+🚀 Desafío: ¡Agrega un sonido! ¿Puedes agregar un sonido para mejorar tu juego, tal vez cuando hay un golpe de láser, o el héroe muere o gana? Eche un vistazo a este [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) para aprender a reproducir sonido con JavaScript.
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Tu tarea es crear un juego de muestra nuevo, así que explora algunos de los juegos interesantes que existen para ver qué tipo de juego podrías construir.
+
+**Tarea**: [Crear un juego de muestra](assignment.md)
diff --git a/space-game/6-end-condition/translations/assignment.es.md b/space-game/6-end-condition/translations/assignment.es.md
new file mode 100644
index 00000000..92fba8de
--- /dev/null
+++ b/space-game/6-end-condition/translations/assignment.es.md
@@ -0,0 +1,19 @@
+# Crea un juego de muestra
+
+## Instrucciones
+
+Intente crear un juego pequeño en el que practique en diferentes condiciones finales. Varía entre obtener una cantidad de puntos, el héroe pierde todas las vidas o todos los monstruos son derrotados. Construye algo simple como un juego de aventuras basado en consola. Utilice el siguiente flujo de juego como inspiración:
+
+''
+Hero> Golpea con espada ancha: el orco recibe 3p de daño
+Orc> Golpes con garrote: el héroe recibe 2p de daño
+Hero> Patadas: el orco recibe 1p de daño
+Game> Orc es derrotado - Hero recoge 2 monedas
+Game> ****No más monstruos, has conquistado la fortaleza del mal****
+''
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | ---------------------- | --------------------------- | -------------------------- |
+| | se presenta el juego completo | se presenta parcialmente el juego | juego parcial contiene errores |
diff --git a/space-game/6-end-condition/your-work/app.js b/space-game/6-end-condition/your-work/app.js
new file mode 100644
index 00000000..abad8476
--- /dev/null
+++ b/space-game/6-end-condition/your-work/app.js
@@ -0,0 +1,311 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+
+	rectFromGameObject() {
+		return {
+			top: this.y,
+			left: this.x,
+			bottom: this.y + this.height,
+			right: this.x + this.width,
+		};
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+		this.cooldown = 0;
+		this.life = 3;
+		this.points = 0;
+	}
+	fire() {
+		gameObjects.push(new Laser(this.x + 45, this.y - 10));
+		this.cooldown = 500;
+
+		let id = setInterval(() => {
+			if (this.cooldown > 0) {
+				this.cooldown -= 100;
+			} else {
+				clearInterval(id);
+			}
+		}, 200);
+	}
+	canFire() {
+		return this.cooldown === 0;
+	}
+	decrementLife() {
+		this.life--;
+		if (this.life === 0) {
+			this.dead = true;
+		}
+	}
+	incrementPoints() {
+		this.points += 100;
+	}
+}
+
+class Enemy extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 98), (this.height = 50);
+		this.type = 'Enemy';
+		let id = setInterval(() => {
+			if (this.y < canvas.height - this.height) {
+				this.y += 5;
+			} else {
+				console.log('Stopped at', this.y);
+				clearInterval(id);
+			}
+		}, 300);
+	}
+}
+
+class Laser extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 9), (this.height = 33);
+		this.type = 'Laser';
+		this.img = laserImg;
+		let id = setInterval(() => {
+			if (this.y > 0) {
+				this.y -= 15;
+			} else {
+				this.dead = true;
+				clearInterval(id);
+			}
+		}, 100);
+	}
+}
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function intersectRect(r1, r2) {
+	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
+}
+
+const Messages = {
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+	KEY_EVENT_SPACE: 'KEY_EVENT_SPACE',
+	COLLISION_ENEMY_LASER: 'COLLISION_ENEMY_LASER',
+	COLLISION_ENEMY_HERO: 'COLLISION_ENEMY_HERO',
+};
+
+let heroImg,
+	enemyImg,
+	laserImg,
+	lifeImg,
+	canvas,
+	ctx,
+	gameObjects = [],
+	hero,
+	eventEmitter = new EventEmitter();
+
+// EVENTS
+let onKeyDown = function (e) {
+	// console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	} else if (evt.keyCode === 32) {
+		eventEmitter.emit(Messages.KEY_EVENT_SPACE);
+	}
+});
+
+function createEnemies() {
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			const enemy = new Enemy(x, y);
+			enemy.img = enemyImg;
+			gameObjects.push(enemy);
+		}
+	}
+}
+
+function createHero() {
+	hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
+	hero.img = heroImg;
+	gameObjects.push(hero);
+}
+
+function updateGameObjects() {
+	const enemies = gameObjects.filter((go) => go.type === 'Enemy');
+	const lasers = gameObjects.filter((go) => go.type === 'Laser');
+
+	enemies.forEach((enemy) => {
+		const heroRect = hero.rectFromGameObject();
+		if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+			eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+		}
+	});
+	// laser hit something
+	lasers.forEach((l) => {
+		enemies.forEach((m) => {
+			if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+				eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
+					first: l,
+					second: m,
+				});
+			}
+		});
+	});
+
+	gameObjects = gameObjects.filter((go) => !go.dead);
+}
+
+function drawGameObjects(ctx) {
+	gameObjects.forEach((go) => go.draw(ctx));
+}
+
+function initGame() {
+	gameObjects = [];
+	createEnemies();
+	createHero();
+
+	eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+		hero.y -= 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+		hero.y += 5;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+		hero.x -= 20;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+		hero.x += 20;
+	});
+
+	eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
+		if (hero.canFire()) {
+			hero.fire();
+		}
+		// console.log('cant fire - cooling down')
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+		first.dead = true;
+		second.dead = true;
+		hero.incrementPoints();
+	});
+
+	eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+		enemy.dead = true;
+		hero.decrementLife();
+	});
+}
+
+function drawLife() {
+	// TODO, 35, 27
+	//
+
+	const START_POS = canvas.width - 180;
+	for (let i = 0; i < hero.life; i++) {
+		ctx.drawImage(lifeImg, START_POS + 45 * (i + 1), canvas.height - 37);
+	}
+}
+
+function drawPoints() {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = 'red';
+	ctx.textAlign = 'left';
+	drawText('Points: ' + hero.points, 10, canvas.height - 20);
+}
+
+function drawText(message, x, y) {
+	ctx.fillText(message, x, y);
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('canvas');
+	ctx = canvas.getContext('2d');
+	heroImg = await loadTexture('assets/player.png');
+	enemyImg = await loadTexture('assets/enemyShip.png');
+	laserImg = await loadTexture('assets/laserRed.png');
+	lifeImg = await loadTexture('assets/life.png');
+
+	initGame();
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		drawPoints();
+		drawLife();
+		updateGameObjects();
+		drawGameObjects(ctx);
+	}, 100);
+};
diff --git a/space-game/6-end-condition/your-work/assets/enemyShip.png b/space-game/6-end-condition/your-work/assets/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/6-end-condition/your-work/assets/enemyShip.png differ
diff --git a/space-game/6-end-condition/your-work/assets/laserRed.png b/space-game/6-end-condition/your-work/assets/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/6-end-condition/your-work/assets/laserRed.png differ
diff --git a/space-game/6-end-condition/your-work/assets/life.png b/space-game/6-end-condition/your-work/assets/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/6-end-condition/your-work/assets/life.png differ
diff --git a/space-game/6-end-condition/your-work/assets/player.png b/space-game/6-end-condition/your-work/assets/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/6-end-condition/your-work/assets/player.png differ
diff --git a/space-game/6-end-condition/your-work/index.html b/space-game/6-end-condition/your-work/index.html
new file mode 100644
index 00000000..f84b0e79
--- /dev/null
+++ b/space-game/6-end-condition/your-work/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <canvas id ="canvas" width="1024" height="768"></canvas>
+    <script src="app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/space-game/6-end-condition/your-work/package.json b/space-game/6-end-condition/your-work/package.json
new file mode 100644
index 00000000..5b1193f3
--- /dev/null
+++ b/space-game/6-end-condition/your-work/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "solution",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/README.md b/space-game/README.md
new file mode 100644
index 00000000..c6ae53c8
--- /dev/null
+++ b/space-game/README.md
@@ -0,0 +1,27 @@
+# Build a Space Game
+
+A space game to teach more advanced JavaScript fundamentals
+
+In this lesson you will learn how to build your own space game. If you've ever played the game "Space Invaders", this game has the same idea: to steer a spaceship and fire on monsters that come down from above. Here's what the finished game will look like:
+
+![Finished game](images/pewpew.gif)
+
+In these six lessons you will learn the following:
+
+- **Interact** with the Canvas element to draw things on a screen
+- **Understand** the cartesian coordinate system
+- **Learn** the Pub-Sub pattern to create sound game architecture that's easier to maintain and extend
+- **Leverage** Async/Await to load game resources
+- **Handle** keyboard events
+
+## Overview
+
+- Theory
+   - [Introduction to building games with JavaScript](1-introduction/README.md)
+- Practice
+   - [Drawing to canvas](2-drawing-to-canvas/README.md)
+   - [Moving elements around the screen](3-moving-elements-around/README.md)
+   - [Collision detection](4-collision-detection/README.md)
+   - [Keeping score](5-keeping-score/README.md)
+   - [Ending and restarting the game](6-end-condition/README.md)
+
diff --git a/space-game/images/pewpew.gif b/space-game/images/pewpew.gif
new file mode 100644
index 00000000..c908c91c
Binary files /dev/null and b/space-game/images/pewpew.gif differ
diff --git a/space-game/solution/app.js b/space-game/solution/app.js
new file mode 100644
index 00000000..05fe7d47
--- /dev/null
+++ b/space-game/solution/app.js
@@ -0,0 +1,454 @@
+// @ts-check
+class EventEmitter {
+	constructor() {
+		this.listeners = {};
+	}
+
+	on(message, listener) {
+		if (!this.listeners[message]) {
+			this.listeners[message] = [];
+		}
+		this.listeners[message].push(listener);
+	}
+
+	emit(message, payload = null) {
+		if (this.listeners[message]) {
+			this.listeners[message].forEach((l) => l(message, payload));
+		}
+	}
+}
+
+class GameObject {
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+		this.dead = false;
+		this.type = '';
+		this.width = 0;
+		this.height = 0;
+		this.img = undefined;
+	}
+
+	draw(ctx) {
+		ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
+	}
+
+	rectFromGameObject() {
+		return {
+			top: this.y,
+			left: this.x,
+			bottom: this.y + this.height,
+			right: this.x + this.width,
+		};
+	}
+}
+
+class Hero extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		(this.width = 99), (this.height = 75);
+		this.type = 'Hero';
+		this.speed = { x: 0, y: 0 };
+	}
+}
+
+class Laser extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		this.width = 9;
+		this.height = 33;
+		this.type = 'Laser';
+		let id = setInterval(() => {
+			if (!this.dead) {
+				this.y = this.y > 0 ? this.y - 20 : this.y;
+				if (this.y <= 0) {
+					this.dead = true;
+				}
+			} else {
+				clearInterval(id);
+			}
+		}, 100);
+	}
+}
+
+class Explosion extends GameObject {
+	constructor(x, y, img) {
+		super(x, y);
+		this.img = img;
+		this.type = 'Explosion';
+		(this.width = 56 * 2), (this.height = 54 * 2);
+		setTimeout(() => {
+			this.dead = true;
+		}, 300);
+	}
+}
+
+class Monster extends GameObject {
+	constructor(x, y) {
+		super(x, y);
+		this.type = 'Monster';
+		(this.width = 98), (this.height = 50);
+		let id = setInterval(() => {
+			if (!this.dead) {
+				this.y = this.y < HEIGHT ? this.y + 30 : this.y;
+				if (this.y >= HEIGHT - this.height) {
+					this.dead = true;
+					eventEmitter.emit('MONSTER_OUT_OF_BOUNDS');
+				}
+			} else {
+				clearInterval(id);
+			}
+		}, 1500);
+	}
+}
+
+const Messages = {
+	MONSTER_OUT_OF_BOUNDS: 'MONSTER_OUT_OF_BOUNDS',
+	HERO_SPEED_LEFT: 'HERO_MOVING_LEFT',
+	HERO_SPEED_RIGHT: 'HERO_MOVING_RIGHT',
+	HERO_SPEED_ZERO: 'HERO_SPEED_ZERO',
+	HERO_FIRE: 'HERO_FIRE',
+	GAME_END_LOSS: 'GAME_END_LOSS',
+	GAME_END_WIN: 'GAME_END_WIN',
+	COLLISION_MONSTER_LASER: 'COLLISION_MONSTER_LASER',
+	COLLISION_MONSTER_HERO: 'COLLISION_MONSTER_HERO',
+	KEY_EVENT_UP: 'KEY_EVENT_UP',
+	KEY_EVENT_DOWN: 'KEY_EVENT_DOWN',
+	KEY_EVENT_LEFT: 'KEY_EVENT_LEFT',
+	KEY_EVENT_RIGHT: 'KEY_EVENT_RIGHT',
+	GAME_START: 'GAME_START',
+};
+
+class Game {
+	constructor() {
+		this.points = 0;
+		this.life = 3;
+		this.end = false;
+		this.ready = false;
+
+		eventEmitter.on(Messages.MONSTER_OUT_OF_BOUNDS, () => {
+			hero.dead = true;
+		});
+		eventEmitter.on(Messages.HERO_SPEED_LEFT, () => {
+			hero.speed.x = -10;
+			hero.img = heroImgLeft;
+		});
+		eventEmitter.on(Messages.HERO_SPEED_RIGHT, () => {
+			hero.speed.x = 10;
+			hero.img = heroImgRight;
+		});
+		eventEmitter.on(Messages.HERO_SPEED_ZERO, () => {
+			hero.speed = { x: 0, y: 0 };
+			if (game.life === 3) {
+				hero.img = heroImg;
+			} else {
+				hero.img = heroImgDamaged;
+			}
+		});
+		eventEmitter.on(Messages.HERO_FIRE, () => {
+			if (coolDown === 0) {
+				let l = new Laser(hero.x + 45, hero.y - 30);
+				l.img = laserRedImg;
+				gameObjects.push(l);
+				cooling();
+			}
+		});
+		eventEmitter.on(Messages.GAME_END_LOSS, (_, gameLoopId) => {
+			game.end = true;
+			displayMessage('You died... - Press [Enter] to start the game Captain Pew Pew');
+			clearInterval(gameLoopId);
+		});
+
+		eventEmitter.on(Messages.GAME_END_WIN, (_, gameLoopId) => {
+			game.end = true;
+			displayMessage('Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew', 'green');
+			clearInterval(gameLoopId);
+		});
+		eventEmitter.on(Messages.COLLISION_MONSTER_LASER, (_, { first: laser, second: monster }) => {
+			laser.dead = true;
+			monster.dead = true;
+			this.points += 100;
+
+			gameObjects.push(new Explosion(monster.x, monster.y, laserRedShot));
+		});
+		eventEmitter.on(Messages.COLLISION_MONSTER_HERO, (_, { monster: m, id }) => {
+			game.life--;
+			if (game.life === 0) {
+				hero.dead = true;
+				eventEmitter.emit(Messages.GAME_END_LOSS, id);
+				gameObjects.push(new Explosion(hero.x, hero.y, laserGreenShot));
+			}
+			hero.img = heroImgDamaged;
+			m.dead = true;
+			gameObjects.push(new Explosion(m.x, m.y, laserRedShot));
+		});
+		eventEmitter.on(Messages.KEY_EVENT_UP, () => {
+			hero.y = hero.y > 0 ? hero.y - 5 : hero.y;
+		});
+		eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
+			hero.y = hero.y < HEIGHT ? hero.y + 5 : hero.y;
+		});
+		eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
+			hero.x = hero.x > 0 ? hero.x - 10 : hero.x;
+		});
+		eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
+			hero.x = hero.x < WIDTH ? hero.x + 10 : hero.x;
+		});
+		eventEmitter.on(Messages.GAME_START, () => {
+			if (game.ready && game.end) {
+				// assets loaded
+				runGame();
+			}
+		});
+	}
+}
+
+const eventEmitter = new EventEmitter();
+const hero = new Hero(0, 0);
+const WIDTH = 1024;
+const HEIGHT = 768;
+let gameObjects = [];
+let laserRedImg;
+let laserRedShot;
+let laserGreenShot;
+let canvas;
+let ctx;
+let heroImg;
+let heroImgLeft;
+let heroImgRight;
+let heroImgDamaged;
+let lifeImg;
+let monsterImg;
+
+let coolDown = 0;
+
+const game = new Game();
+
+function loadTexture(path) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.src = path;
+		img.onload = () => {
+			resolve(img);
+		};
+	});
+}
+
+function rectFromGameObject(go) {
+	return {
+		top: go.y,
+		left: go.x,
+		bottom: go.y + go.height,
+		right: go.x + go.width,
+	};
+}
+
+function intersectRect(r1, r2) {
+	return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top);
+}
+
+function draw(ctx, objects) {
+	objects.forEach((obj) => {
+		obj.draw(ctx);
+	});
+}
+
+let onKeyDown = function (e) {
+	console.log(e.keyCode);
+	switch (e.keyCode) {
+		case 37:
+		case 39:
+		case 38:
+		case 40: // Arrow keys
+		case 32:
+			e.preventDefault();
+			break; // Space
+		default:
+			break; // do not block other keys
+	}
+};
+
+window.addEventListener('keydown', onKeyDown);
+window.addEventListener('keydown', (e) => {
+	switch (e.keyCode) {
+		case 37:
+			// if left
+			eventEmitter.emit(Messages.HERO_SPEED_LEFT);
+			break;
+		case 39:
+			eventEmitter.emit(Messages.HERO_SPEED_RIGHT);
+			break;
+	}
+});
+
+// TODO make message driven
+window.addEventListener('keyup', (evt) => {
+	eventEmitter.emit(Messages.HERO_SPEED_ZERO);
+	if (evt.key === 'ArrowUp') {
+		eventEmitter.emit(Messages.KEY_EVENT_UP);
+	} else if (evt.key === 'ArrowDown') {
+		eventEmitter.emit(Messages.KEY_EVENT_DOWN);
+	} else if (evt.key === 'ArrowLeft') {
+		eventEmitter.emit(Messages.KEY_EVENT_LEFT);
+	} else if (evt.key === 'ArrowRight') {
+		eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
+	} else if (evt.keyCode === 32) {
+		// space
+		eventEmitter.emit(Messages.HERO_FIRE);
+	} else if (evt.key === 'Enter') {
+		eventEmitter.emit(Messages.GAME_START);
+	}
+});
+
+function cooling() {
+	coolDown = 500;
+	let id = setInterval(() => {
+		coolDown -= 100;
+		if (coolDown === 0) {
+			clearInterval(id);
+		}
+	}, 100);
+}
+
+function displayGameScore(message) {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = 'red';
+	ctx.textAlign = 'right';
+	ctx.fillText(message, canvas.width - 90, canvas.height - 30);
+}
+
+function displayLife() {
+	// should show tree ships.. 94 * 3
+	const START_X = canvas.width - 150 - 30;
+	for (let i = 0; i < game.life; i++) {
+		ctx.drawImage(lifeImg, START_X + (i + 1) * 35, canvas.height - 90);
+	}
+}
+
+function displayMessage(message, color = 'red') {
+	ctx.font = '30px Arial';
+	ctx.fillStyle = color;
+	ctx.textAlign = 'center';
+	ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+}
+
+function createMonsters(monsterImg) {
+	// 98 * 5     canvas.width - (98*5 /2)
+	const MONSTER_TOTAL = 5;
+	const MONSTER_WIDTH = MONSTER_TOTAL * 98;
+	const START_X = (canvas.width - MONSTER_WIDTH) / 2;
+	const STOP_X = START_X + MONSTER_WIDTH;
+
+	for (let x = START_X; x < STOP_X; x += 98) {
+		for (let y = 0; y < 50 * 5; y += 50) {
+			gameObjects.push(new Monster(x, y));
+		}
+	}
+
+	gameObjects.forEach((go) => {
+		go.img = monsterImg;
+	});
+}
+
+function createHero(heroImg) {
+	hero.dead = false;
+	hero.img = heroImg;
+	hero.y = (canvas.height / 4) * 3;
+	hero.x = canvas.width / 2;
+	gameObjects.push(hero);
+}
+
+function checkGameState(gameLoopId) {
+	const monsters = gameObjects.filter((go) => go.type === 'Monster');
+	if (hero.dead) {
+		eventEmitter.emit(Messages.GAME_END_LOSS, gameLoopId);
+	} else if (monsters.length === 0) {
+		eventEmitter.emit(Messages.GAME_END_WIN);
+	}
+
+	// update hero position
+	if (hero.speed.x !== 0) {
+		hero.x += hero.speed.x;
+	}
+
+	const lasers = gameObjects.filter((go) => go.type === 'Laser');
+	// laser hit something
+	lasers.forEach((l) => {
+		monsters.forEach((m) => {
+			if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
+				eventEmitter.emit(Messages.COLLISION_MONSTER_LASER, {
+					first: l,
+					second: m,
+				});
+			}
+		});
+	});
+
+	// hero hit monster
+	monsters.forEach((m) => {
+		if (intersectRect(m.rectFromGameObject(), hero.rectFromGameObject())) {
+			eventEmitter.emit(Messages.COLLISION_MONSTER_HERO, { monster: m, id: gameLoopId });
+		}
+	});
+
+	gameObjects = gameObjects.filter((go) => !go.dead);
+}
+
+function runGame() {
+	gameObjects = [];
+	game.life = 3;
+	game.points = 0;
+	game.end = false;
+
+	createMonsters(monsterImg);
+	createHero(heroImg);
+
+	let gameLoopId = setInterval(() => {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = 'black';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		displayGameScore('Score: ' + game.points);
+		displayLife();
+		checkGameState(gameLoopId);
+		draw(ctx, gameObjects);
+	}, 100);
+}
+
+window.onload = async () => {
+	canvas = document.getElementById('myCanvas');
+	ctx = canvas.getContext('2d');
+
+	heroImg = await loadTexture('spaceArt/png/player.png');
+	heroImgLeft = await loadTexture('spaceArt/png/playerLeft.png');
+	heroImgRight = await loadTexture('spaceArt/png/playerRight.png');
+	heroImgDamaged = await loadTexture('spaceArt/png/playerDamaged.png');
+	monsterImg = await loadTexture('spaceArt/png/enemyShip.png');
+	laserRedImg = await loadTexture('spaceArt/png/laserRed.png');
+	laserRedShot = await loadTexture('spaceArt/png/laserRedShot.png');
+	laserGreenShot = await loadTexture('spaceArt/png/laserGreenShot.png');
+	lifeImg = await loadTexture('spaceArt/png/life.png');
+
+	game.ready = true;
+	game.end = true;
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	ctx.fillStyle = 'black';
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	displayMessage('Press [Enter] to start the game Captain Pew Pew', 'blue');
+
+	// CHECK  draw 5 * 5 monsters
+	// CHECK move monsters down 1 step per 0.5 second
+	// CHECK if monster collide with hero, destroy both, display loose text
+	// CHECK if monster reach MAX, destroy hero, loose text
+	// TODO add explosion when laser hits monster, should render for <=300ms
+	// TODO add specific texture when moving left or right
+	// TODO take damage when a meteor moves into you
+	// TODO add meteor, meteors can damage ships
+	// TODO add UFO after all monsters are down, UFO can fire back
+	// TODO start random green laser from an enemy and have it go to HEIGHT, if collide with hero then deduct point
+
+	// CHECK  draw bullet
+	// CHECK , bullet should be destroyed at top
+	// CHECK space should produce bullet, bullet should move 2 step per second
+	// CHECK if bullet collide with monster, destroy both
+	// CHECK if bullet rect intersect with monster rect then it is colliding..
+};
diff --git a/space-game/solution/index.html b/space-game/solution/index.html
new file mode 100644
index 00000000..57b500a2
--- /dev/null
+++ b/space-game/solution/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<p>Image to use:</p>
+<p>Canvas:</p>
+
+<canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;">
+Your browser does not support the HTML5 canvas tag.</canvas>
+
+<script src="app.js">
+
+</script>
\ No newline at end of file
diff --git a/space-game/solution/package.json b/space-game/solution/package.json
new file mode 100644
index 00000000..e6c770c3
--- /dev/null
+++ b/space-game/solution/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "space-invaders",
+	"version": "1.0.0",
+	"description": "",
+	"main": "app.js",
+	"scripts": {
+		"start": "npx http-server -c-1 -p 5000",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC"
+}
diff --git a/space-game/solution/spaceArt/png/Background/backgroundColor.png b/space-game/solution/spaceArt/png/Background/backgroundColor.png
new file mode 100755
index 00000000..be465414
Binary files /dev/null and b/space-game/solution/spaceArt/png/Background/backgroundColor.png differ
diff --git a/space-game/solution/spaceArt/png/Background/nebula.png b/space-game/solution/spaceArt/png/Background/nebula.png
new file mode 100755
index 00000000..c456fa8f
Binary files /dev/null and b/space-game/solution/spaceArt/png/Background/nebula.png differ
diff --git a/space-game/solution/spaceArt/png/Background/speedLine.png b/space-game/solution/spaceArt/png/Background/speedLine.png
new file mode 100755
index 00000000..26846cfa
Binary files /dev/null and b/space-game/solution/spaceArt/png/Background/speedLine.png differ
diff --git a/space-game/solution/spaceArt/png/Background/starBackground.png b/space-game/solution/spaceArt/png/Background/starBackground.png
new file mode 100755
index 00000000..5393c5c0
Binary files /dev/null and b/space-game/solution/spaceArt/png/Background/starBackground.png differ
diff --git a/space-game/solution/spaceArt/png/Background/starBig.png b/space-game/solution/spaceArt/png/Background/starBig.png
new file mode 100755
index 00000000..30a1cc4d
Binary files /dev/null and b/space-game/solution/spaceArt/png/Background/starBig.png differ
diff --git a/space-game/solution/spaceArt/png/Background/starSmall.png b/space-game/solution/spaceArt/png/Background/starSmall.png
new file mode 100755
index 00000000..eec17fb0
Binary files /dev/null and b/space-game/solution/spaceArt/png/Background/starSmall.png differ
diff --git a/space-game/solution/spaceArt/png/enemyShip.png b/space-game/solution/spaceArt/png/enemyShip.png
new file mode 100755
index 00000000..a9b90a6f
Binary files /dev/null and b/space-game/solution/spaceArt/png/enemyShip.png differ
diff --git a/space-game/solution/spaceArt/png/enemyUFO.png b/space-game/solution/spaceArt/png/enemyUFO.png
new file mode 100755
index 00000000..a070cb5f
Binary files /dev/null and b/space-game/solution/spaceArt/png/enemyUFO.png differ
diff --git a/space-game/solution/spaceArt/png/laserGreen.png b/space-game/solution/spaceArt/png/laserGreen.png
new file mode 100755
index 00000000..52b0d604
Binary files /dev/null and b/space-game/solution/spaceArt/png/laserGreen.png differ
diff --git a/space-game/solution/spaceArt/png/laserGreenShot.png b/space-game/solution/spaceArt/png/laserGreenShot.png
new file mode 100755
index 00000000..3496a2f5
Binary files /dev/null and b/space-game/solution/spaceArt/png/laserGreenShot.png differ
diff --git a/space-game/solution/spaceArt/png/laserRed.png b/space-game/solution/spaceArt/png/laserRed.png
new file mode 100755
index 00000000..7cd9c014
Binary files /dev/null and b/space-game/solution/spaceArt/png/laserRed.png differ
diff --git a/space-game/solution/spaceArt/png/laserRedShot.png b/space-game/solution/spaceArt/png/laserRedShot.png
new file mode 100755
index 00000000..f7211cf1
Binary files /dev/null and b/space-game/solution/spaceArt/png/laserRedShot.png differ
diff --git a/space-game/solution/spaceArt/png/life.png b/space-game/solution/spaceArt/png/life.png
new file mode 100755
index 00000000..708a9fcd
Binary files /dev/null and b/space-game/solution/spaceArt/png/life.png differ
diff --git a/space-game/solution/spaceArt/png/meteorBig.png b/space-game/solution/spaceArt/png/meteorBig.png
new file mode 100755
index 00000000..88bbf125
Binary files /dev/null and b/space-game/solution/spaceArt/png/meteorBig.png differ
diff --git a/space-game/solution/spaceArt/png/meteorSmall.png b/space-game/solution/spaceArt/png/meteorSmall.png
new file mode 100755
index 00000000..1cfd9b27
Binary files /dev/null and b/space-game/solution/spaceArt/png/meteorSmall.png differ
diff --git a/space-game/solution/spaceArt/png/player.png b/space-game/solution/spaceArt/png/player.png
new file mode 100755
index 00000000..9238efa4
Binary files /dev/null and b/space-game/solution/spaceArt/png/player.png differ
diff --git a/space-game/solution/spaceArt/png/playerDamaged.png b/space-game/solution/spaceArt/png/playerDamaged.png
new file mode 100755
index 00000000..c160bed0
Binary files /dev/null and b/space-game/solution/spaceArt/png/playerDamaged.png differ
diff --git a/space-game/solution/spaceArt/png/playerLeft.png b/space-game/solution/spaceArt/png/playerLeft.png
new file mode 100755
index 00000000..2e94da3d
Binary files /dev/null and b/space-game/solution/spaceArt/png/playerLeft.png differ
diff --git a/space-game/solution/spaceArt/png/playerRight.png b/space-game/solution/spaceArt/png/playerRight.png
new file mode 100755
index 00000000..8282ac89
Binary files /dev/null and b/space-game/solution/spaceArt/png/playerRight.png differ
diff --git a/space-game/solution/spaceArt/png/shield.png b/space-game/solution/spaceArt/png/shield.png
new file mode 100755
index 00000000..24cda51b
Binary files /dev/null and b/space-game/solution/spaceArt/png/shield.png differ
diff --git a/space-game/solution/spaceArt/preview.jpg b/space-game/solution/spaceArt/preview.jpg
new file mode 100755
index 00000000..33073b52
Binary files /dev/null and b/space-game/solution/spaceArt/preview.jpg differ
diff --git a/space-game/solution/spaceArt/readme.txt b/space-game/solution/spaceArt/readme.txt
new file mode 100755
index 00000000..d1aebea9
--- /dev/null
+++ b/space-game/solution/spaceArt/readme.txt
@@ -0,0 +1,8 @@
+ ---
+
+Space Shooter graphics by Kenney Vleugels (www.kenney.nl)
+
+You may use these graphics in personal and commercial projects.
+Credit (www.kenney.nl) would be nice but is not mandatory.
+
+ --
\ No newline at end of file
diff --git a/space-game/solution/spaceArt/spaceArt.ai b/space-game/solution/spaceArt/spaceArt.ai
new file mode 100755
index 00000000..ba87add7
--- /dev/null
+++ b/space-game/solution/spaceArt/spaceArt.ai
@@ -0,0 +1,951 @@
+%PDF-1.4
%����
+1 0 obj
<</Metadata 2 0 R/Pages 3 0 R/Type/Catalog>>
endobj
2 0 obj
<</Length 16228/Subtype/XML/Type/Metadata>>stream
+<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""
+            xmlns:xmp="http://ns.adobe.com/xap/1.0/"
+            xmlns:xmpGImg="http://ns.adobe.com/xap/1.0/g/img/">
+         <xmp:CreatorTool>Adobe Illustrator CS6 (Windows)</xmp:CreatorTool>
+         <xmp:CreateDate>2012-10-08T13:59:46+02:00</xmp:CreateDate>
+         <xmp:MetadataDate>2012-10-08T13:59:46+02:00</xmp:MetadataDate>
+         <xmp:ModifyDate>2012-10-08T13:59:46+02:00</xmp:ModifyDate>
+         <xmp:Thumbnails>
+            <rdf:Alt>
+               <rdf:li rdf:parseType="Resource">
+                  <xmpGImg:width>256</xmpGImg:width>
+                  <xmpGImg:height>156</xmpGImg:height>
+                  <xmpGImg:format>JPEG</xmpGImg:format>
+                  <xmpGImg:image>/9j/4AAQSkZJRgABAgEASABIAAD/7QAsUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABAASAAAAAEA&#xA;AQBIAAAAAQAB/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoK&#xA;DBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8f&#xA;Hx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAnAEAAwER&#xA;AAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAA&#xA;AQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPB&#xA;UtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE&#xA;1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZ&#xA;qbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEy&#xA;obHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp&#xA;0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo&#xA;+DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8A53mzc52KuxV2KuxV2Kux&#xA;V2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV1R44odil2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2K&#xA;uxV2KuxV2KuxV2KuxV2KuxV2KuxVrkMUW4t4Yra3kfHAhxJOKtYquU9sUrsKXYq7FXYq7FXYq7FX&#xA;Yq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FVrGuBDVMUOpirqYq6mKupirqYqu5DCm2&#xA;64q7FLsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVabFBawIdirsVdirsVd&#xA;irsVdirhtildhS7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FXYq7FWjihrArsVd&#xA;irsVdirsVdirsVdiq7Cl2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxVuhIJ7DrirWKuxV2K&#xA;uxV2KtEYoaxV2KuxV2KuxV2Kt0OKtgYq7FK+SKWOnqIychVeQIqK0qK4BIHkhtbe4ZQyxOynoQpI&#xA;w2q0I5fgFPOtONN6+FMUueN42KupRh1VhQ/jgEgeSFuFLsVdirsVdirsVdirsVdirsVdirsVRtrb&#xA;mTT72Wn90I/+GemAoQWFLsVdirsVdirsVdTFDsVdirsVdirqYq7FLsVTHy/ZJeaxbQPQx8uTg91X&#xA;4iPppTMTX5vDwykOf62MjQe6Xlt5SvdGsY9bghaaRHhsnmFKOHMjRpIKUNJAaV3zA7Nn+42PK7cK&#xA;XEDYZF5f17ybpejWlje6jp1lPGrUtp54InVS7cfgdgaU6ZHQ8RxA+/7yzNsd07TfJa6r61zb2za3&#xA;dXB+pkgGQlBz9RR240qXyXZ85cErOwkWufEdg80/NK1ja/S/SgLMYnNd26spp9+V9j6i5Th0+pys&#xA;R6MFzfNzsVdirsVdirsVdirsVdirsVdirsVZBocPPy3r8n++1t/xdsjLmGJ5hj+SZOxV2KppbeX7&#xA;uSP1rh0tIf5pTQ/d/XBxItV/ROjjY6otfELt+vBZRayby9P6Zls5o7yMdfTI5fdU/rx4ltKmVlYq&#xA;wIYbEHYg5Jk1irsUOxV2KuxS7FXYqvilkikWSNikiGqsNiCMjKIkKPJD0i11e28zeQtTsJZFj1XT&#xA;QuoQKxpUw7OY/wDWRjmq02mODIY84S5fqaa4ZMXuPMGhXzpcajpKz3vBFmm5uvMooWpCso6DANBm&#xA;htCdR6MvDZT5O1e09XXPN18ywRWdutlp8OxIMuxCDxCDw74cmA48Phx3nL7z+PsYyHIMD1vWbjVb&#xA;1p5SQgJEUdahQT+s9zmZo9JHBChz6ltjGkvzLZOxV2KuxV2KuxV2KuxV2KuxV2KuxVlnlgR/4M82&#xA;uxoUSyp/spmX9ZGQlzDA8wxPJs3Yqm9mkGnWqX86iS5l/wB5IT0AH7bfwyJ3YpfdXlzdSGSeQu3a&#xA;vQfIdskAlQxSqQTzQSCSFyjjoymmKE2kMesW7yBQmpQLyYLsJUHen8wyPJHJJckydiqO0nSp9Smn&#xA;ihIDQW81y1e6wIXI+mlMoz5xjAvrID5teTJw15mkDl7Y7FUQllO9jNeqP3EEkcTn/KlDsv4RNlZy&#xA;VIR722OK4GV8vx+r5ofLGp2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2Kq9lLbxXcUlzF60CsD&#xA;JFWnIeGJQ69lt5buWS2i9GBmJjirXiPDEKnGi36QeWPMdozUa7jtOA239O4DHrv92RI3CCNwkGSZ&#xA;KkEXqzxxdPUYL95pihEatcetfykbRxn04l7BE2GAKEHhS7FXYqrWdy9tcxzp9qNgaeI7j6RiUKmp&#xA;xJFfzon2OXJKfyt8Q/XgChZZR2klwiXczW8B+3KieqR/sOSV+/IZZSEbiOI910xmSBsLfQn5PeV/&#xA;Js+gzXFsU1mdne1llnjNs6W0gHqrQlua/F/CuaiQMpniFS224uW3PYnevc4ErMjfPuv7Xl35laN5&#xA;QsPMGow6ZqT84H4Q6elsfTjAGyCbmKj/ACqGuX6PJMCojigZH1cXn8Sa5fBuwSl0Fi+dsNso7KSY&#xA;LeTvbxH/AHYkfqmv+ryTbNhklIfSLdjihA3xS4fg+ifKXkb8vpvy9iLxR3mn3cLXWp6xIzRSpPDU&#xA;RfuqtxKiRxQHtvy5ZrD+vrybMufJ4tDn6ajQqQNbnbrQO4+VPnzVINKhmpYXkl2tTyeSH0flQc3z&#xA;YYZS5GND3rnjDc8VyvlX6dvuQOXuM9I8gflQ+sWy6rrDNb6efijiGzOvXkT2XKp5KcTLnN1FlRtf&#xA;yZtZ1sh9VmK1Ej8JZjSm3GREZDv75hy10Bzk2w0OqnuAfnX2ILzD+Umg6lp76h5VnHNQSEV+cTkb&#xA;kAivE+3bwzIx5xIXzDSZ5McuGY/W8engmt55IJkMc0TFJEbqGBoRmS5YNiwp4pdirsVdirsVdirs&#xA;VdirsVdiqZ+XdAvtd1W3sLWNm9aWOOWRV5CNXcKXI26VrglKggmkNqGmahp1wba+t3t5x1jkFD1p&#xA;+sYg2oKFwpdiqtZyCK8gkPRJEY/QwOJQtnUrPIrfaVmB+YOKqeKXYq7FXYqitSat44JqVCo3zRQp&#xA;/EYAgIXClO/LnmOfSpblmkkMctlc2saAmimZCF27fEa5hanSidGIF8QJ8xyP2OPmw8VV37pPLNLK&#xA;QZXZyoCgsSSAOg3zLjCMeQpuEQOSzJMkfDq08ej3emgnhdTwTs1T1gWVQP8Akr+GY5wDjBAFfj9r&#xA;lDUngNk8XT7L+4IEkk1O5PU5eAAKDjSkSbPNH+X7FL7W7G0k3jmmQSDxWtWH0jEnZqySqJL2X80d&#xA;RawtbfQrSVo4bmIPcIDQemvwIq06BiGLeOaHtHORUR1c3sLSRkTkl02DxJdYkiuyIQhQEqGeu48d&#xA;jlkOzYmPqJtvn2rKMzwgUzj8uPNN5B5htYFldLLU3W2miQ9Gc8Edf8pXPXwrmPgvDl4GeujHU4PE&#xA;rcCx8Oa/87NJgs/M8d1CAovYuTgd2Q0J/Gn0Zv8AEdnRaWWxDzzLHKdirsVdirsVdirsVdirsVdi&#xA;qvY3k9le297bkCe2kSaIkVAeNgy1HzGJFoKhil2KuxV2Kqs7iRhJ+0w+Mf5Q6n6euKFLFLsVdiqp&#xA;AUWQO+6p8XE9yOg+nFCxmZmLMasxqT4k4paxVlHkXyxp+vTanHeyyRC0spbiAx03kQVUNUHbMHXa&#xA;k4gCPP7HG1GYwGzF8znJdiqMisGfTJr4V4xOqHwq1MxZ5pDMIfwkfrc7HggdPKZvjB2+z9aDzKcF&#xA;H6DfLYa1ZXj/AGIZkZz/AJNaN+GAhhkjcSHsH5r6HPrFpaa7psTSx28fC4ZaGsT/ABq60JqEYsG+&#xA;fhXNJr8JIEh0b+xtSIkwP8XL3vGrzQJI25pIvpsehBqCf14MXaY4aI3c7N2QeK4kcL0D8rtBmvNQ&#xA;tp44nNnpbiaZwPtOp5qq12JLb08PozHwwllzcZ5fimzW54afTeGPqIr58yhvzp1iC+80JawMGSxj&#xA;4MR/M+5H6jnQ4xQef0sdie959ljlOxV2KuxV2KuxV2KuxV2KtgEmgFT4DIynGPMqrx2N0/SMgeLb&#xA;frzGnrcY62yESrfomfgSWXl2UV3+nKP5RF8tk+GgmVlYqwow2IObCExIWGDWSV2Ksu0zyQ8aRS67&#xA;FJbxXd1DY2pimiBDylg7sKTE+mVAKUBJqK7HMbLnIrhF7ssYiSQTw1Hi/HvSPWPL2r6M6JqUAgZy&#xA;yqA8clSlOW8bN/MD7g1y+MgeTAGxYS3JJdirsVdirsVZB5R8wwaLLfPMrN9Zt2hUL4nah+/NZ2lp&#xA;J5hERrnv7nE1eCWQCmP5s3Ldiqd2utWUXlO+0l4Xa8ubmKaKYU4KiD4ge9emY8sROUS6D9rkRygY&#xA;zH8dP1JJmQ47sVeheQvzVudBgXTdSRrnThtG6/3kY8N+oH+falc8duLlwWbiy648wfk9qEqXUkUI&#xA;oSzoUeOpp/IrIPvXMM6KF3whmNXqgOHilXzS7zH+b+k2dg2neVLcIpUqsvARxRg9eCUG/wDt5k48&#xA;IDUMM5m5n9byOaaWaV5pXLyyMWd2NSWJqSTl7lgUsxS7FXYq7FXYq7FXYq7FVyI0jhFFWY0AyvLk&#xA;EI2VAZBY2XFBFH2FWY+PjnP5MhkbLkRijGtYo/7xySQSABToKnxyu2VL1toJYQ0YKk9CfbG1pK76&#xA;wWUkN8My9G/rmRg1EsZscmEo2kskTxOUcUYZvMWWMxYaCKWZYrL0/MKSe0trXUrBJo7OZLmBreRo&#xA;XMyVPKUuJwwYsSQoX55j5NOJVRre04zwylKrMo8Pw/ASrzL5r1HzBNFJdxxRCLkVjgDheT8QzfG0&#xA;hrxRR9GXRgA1wgIigkuSZuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2KuxV2K&#xA;o/SPT9V6j95T4T7d81faN7dzPGyOyH7qoA3O5rvmqLkBE4EuxVRmt42Rzx+OhIPeuEFBDHdYXaJ/&#xA;Akffv/DNl2fL1EeTRkSzNu1uxVOdD8n+Zteilm0jT5byKFgkrx0orEVA3I7ZGUwObEyA5pbe2V3Y&#xA;3UlpdxGG5hPGSJuoPXCDaQbUMKXYqitN0zUNTvI7LT4HubuWvpwxirHiKn8BgJA5oJpW1ny/rWiz&#xA;Rw6rZy2Usq840lXiStaVGMZA8lBB5JfhS7FVW1tbi7uY7a2jMs8zBIo16sx2AGJNIJTXW/JnmjQr&#xA;aO51bTpbOCV/TjkfjQuQWpsT2ByMZg8kCQPJJckydirsVR50LWRapdfU5fq0kZmSUKSpjBI5V8Kq&#xA;cqlmgDRO6gWgMtV2KuxV2KuxV2KuxV2KuxV2KqttN6M6Sdgd/keuUanFxwI6piaKbDVbZdlkYD2D&#xA;Zp/ymTubeMIi11BXJMUnIj7Smv6jlWTFKG0gyEkxt7kSkqRRhv8APKiGYK6S5hTYmp8BvjS2kOqL&#xA;W1r/ACsD/D+OZmjlWQNU+ST5vWl2Ks8srjUtC8maPKHltmvNSnuwF5IWjhjgVe4qDUkVzU9oTqQd&#xA;j2XjjkM+R2A+9Q/N2wktvO97NwKw3PBkenwkqgRgD06rvmxw/S6nFIEUwrLW12Ksj8q21wlnrOpB&#xA;HEMFk0STUIX1J5Y4uPLx4O2YmtlWMt+jAOeI8/uCrqdrdXXk2yuwryrZ3tzFI4DNwSSOBl5Heg5A&#xA;/flHZ0vSXI7VAjmHnH9bF82TgOxVlv5W6fJd+ddOYIxhhdnlkAPFfgbjU9qtTK8v0lqyyAG6b6jJ&#xA;e65oPmsl5Lk21/b3dtDVn4IXnRyikkgBXHyGa3Qz9Zdt2lCMI4+m1fc87zbOudiq5Ed3CIpZ2NFU&#xA;CpJPYAYk0r060littRfy9cgpNNY2VnArfZEslunJT4VklJrmh1BJymnYwwk6eMxy9RPz/Y82vLO5&#xA;srmS2uY2imiJVkYEH57+Ob4F1oIIsKGKXYq7FXYq7FXYq7FXYq7FWwCdh1PTIzlQJVP4NBtXVSSa&#xA;kVPXxp7Zo5a3J3t4xhKLuF7S7KoStN0PfNhp5DNjqW7VIUUZbapGVpN8DgdR0OYebRyifTuGYmpz&#xA;6sdxCtP8pv6ZZi7PJ+o0g5O5AySyStykYsffNjjwQhyDWTazLVe0flX5E8r3WjWGuXduJr1wzBJG&#xA;rHyWR1BCHaoCjNbglwxq9zbDtTLI5TEfSAPtAKX/AJ6rdtqOlxwyCOFI5SqAdyUB9uijIZ8kIn1C&#xA;3J7IwZJwkccuHd6XJoum6zoEFvrEST84k5u2x5FQSQTuNztl8cnCLunTTBEzXOy+ePPGkWWj+arr&#xA;TrJStvCsZUMeRq8auak+5wYLOaX47necfFpoE8zf3ll35W+RvLuvWb32qBj9XmKemH4RsAopy79T&#xA;44MeUxMrP8TR2jMjgEesGZfmxDFY+SpNP06KO2gZoVVUUKqj1OWwH+rgzyAFy3Dj9mY5Ty+k1Kju&#xA;kv5FxTPDqsFywmi5xEoRUHkrg1r8shgnGV8IpyO18OSHDxy4jv8AoXfmX+X/AJVsNJvdasIvRuIg&#xA;hMEbfugzSopPDts3TplmfNcCAeVNXZkyc8Yncb/cXmPlDTLTU/MtjYXYLW85KuFNDtvsfoxz2MkH&#xA;PjOsOQ9X0nomhaPomnLDpduiKtC3csaivJtzkzk4hd289uZC+ZeU/kal6df1H1phJF9VBZKDdvWQ&#xA;An6GOYuDJAn0infdr4cscYM5cW6d/mh5F8rRaVf61b2whvo05ssTcULF1HJkHw71OW553Ai9w4XZ&#xA;mSQzRB+k39zyTy1p9vqOvWNhcV9G5lWJ+Jo1GPY5kamwI1/OczFKozNfwF7do35XaDphae2kEjKv&#xA;Mu9HlG1ePgvzpmNOJyS3lsOjrfzZEeW7yvzFe6mPP11fLMKwXwZAQCaQuAoqR4JlE8mMSII9Tv8A&#xA;TaXMcMal6OEbfDd7F5w8oaf5j0u3knjQXMfILKCEeh6AMdjSnQ5k5ZyjuDTzmlyCJo8niPnSxtdM&#xA;1KPSIITGbKMepI1C7tKBJViPAGmT0hkZSMueztJgeHGQ5Sv7NmPZnNLsVdirsVdirsVdirsVXRtw&#xA;kV6V4kGnjQ5XlhxRI71CeJr8RtmVhRgtAtN/ozSy0WQSqm/xBST3NzJcSF3PyHgM22n04xjzaZSt&#xA;RzIQ7FXYq7FU/wBE88eYtGtRaWs4a1UlkglUMqlutDswr881HaPYmDVwEcnFsbFFtjnIlxDnVfJP&#xA;db8x2vmnS9ImurmGz1GC4NldRsSE4TUZLgdSI14kPvtlJ7OOGEccLlGO2+5+Lm9n6qOMz4uvq/Ym&#xA;Hm/80LmDVGs9BkilsrZEjF0y8+bKBUrQgU2yjUezeHUZhmyGXEKoXtt8HAxZpRiR3k/a871G/u9R&#xA;vpr68kMtzOayOaD5AAdhm/hhESSOZRxngEekUdonmnXNFSSPT7kxQzENJEQGUlTUGhG30Zjazs7F&#xA;qMcseQXGXNPiGwesdgyA+eZ9b0i70vVWigfgJrWdQVVpIjyMb7nd1rxP81B3zX4OxIaXHKOIyPEb&#xA;3N/JyNPqazRnL3fPqp6P5w/w9oUn1Bo577UpAZEcErDFDVRyHw/E7MaDsB74Zdl/mMMseQyiJVy2&#xA;Ozdr9TGeWJjvwj70q1fzp5i1W1e0urn/AEWQgvCiqoPH7IJpXb55k6HsbBpYGGMGpGzZcM5pGYn1&#xA;CUWV3c2V5DeWshjuLdg8TjsQa5n5MQkQT0YxyERMekub0Tyf+at7+m4I9caNbKUlZLhV4lCakFty&#xA;KV+7NDj9m8OHP4+Mz47JIvY3fl5rlyylDh7q+xB6F5gsvKcOu3FrdQ316ziwso0qVkXnza4r/IAg&#xA;pTqTl0ezzkjKEriJAi+vwdh2hq45BDh/rfsSHWvPPmLV7V7S4nWO1kp6sMShQ3HcAk1ag+eT7O7B&#xA;0+kjIY+L1Vdnu/tcI55GQltYuvikUM00EyTQu0c0bBo5FNGUjoQc3E4CXNrjMi66imTxfmX5rWnq&#xA;XCTb1JZADXvuvHNPPsDTHOc9HxD5/oZRykR4P4Ve+1Dy/ql/p10Zls3nDSapsfhMfxMRtu7UPEdz&#xA;TIflJ8dV8XZafWiGKQJ9wX6n+anmK5mkNqIrSEsfTAXk4WtQGZqg/dlc/ZrTZM5zT4pSu+ew9wdb&#xA;DLKMOAcmJX19d393LeXkrTXMxrJI3UnN9HGIkkdWHF6RHpHkoZNDsVdirsVdirsVdirsVdirsVdi&#xA;rsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVdirsVfQv8A1jP/AMuv&#xA;/T7mJ+8cf1u/6xn/AOXX/p9x/eL63f8AWM//AC6/9PuP7xfW7/rGf/l1/wCn3H94vrd/1jP/AMuv&#xA;/T7j+8X1u/6xn/5df+n3H94vrd/1jP8A8uv/AE+4/vF9bv8ArGf/AJdf+n3H94vrd/1jP/y6/wDT&#xA;7j+8X1u/6xn/AOXX/p9x/eL63f8AWM//AC6/9PuP7xfW7/rGf/l1/wCn3H94vrd/1jP/AMuv/T7j&#xA;+8X1u/6xn/5df+n3H94vrd/1jP8A8uv/AE+4/vF9bv8ArGf/AJdf+n3H94vrd/1jP/y6/wDT7j+8&#xA;X1u/6xn/AOXX/p9x/eL63f8AWM//AC6/9PuP7xfW7/rGf/l1/wCn3H94vrd/1jP/AMuv/T7j+8X1&#xA;u/6xn/5df+n3H94vrd/1jP8A8uv/AE+4/vF9bv8ArGf/AJdf+n3H94vrd/1jP/y6/wDT7j+8X1u/&#xA;6xn/AOXX/p9x/eL63f8AWM//AC6/9PuP7xfW7/rGf/l1/wCn3H94vrd/1jP/AMuv/T7j+8X1u/6x&#xA;n/5df+n3H94vrd/1jP8A8uv/AE+4/vF9bv8ArGf/AJdf+n3H94vrf//Z</xmpGImg:image>
+               </rdf:li>
+            </rdf:Alt>
+         </xmp:Thumbnails>
+      </rdf:Description>
+      <rdf:Description rdf:about=""
+            xmlns:xmpTPg="http://ns.adobe.com/xap/1.0/t/pg/"
+            xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"
+            xmlns:xmpG="http://ns.adobe.com/xap/1.0/g/">
+         <xmpTPg:NPages>1</xmpTPg:NPages>
+         <xmpTPg:HasVisibleTransparency>True</xmpTPg:HasVisibleTransparency>
+         <xmpTPg:HasVisibleOverprint>False</xmpTPg:HasVisibleOverprint>
+         <xmpTPg:MaxPageSize rdf:parseType="Resource">
+            <stDim:w>800.000000</stDim:w>
+            <stDim:h>480.000000</stDim:h>
+            <stDim:unit>Pixels</stDim:unit>
+         </xmpTPg:MaxPageSize>
+         <xmpTPg:PlateNames>
+            <rdf:Seq>
+               <rdf:li>Cyan</rdf:li>
+               <rdf:li>Magenta</rdf:li>
+               <rdf:li>Yellow</rdf:li>
+               <rdf:li>Black</rdf:li>
+            </rdf:Seq>
+         </xmpTPg:PlateNames>
+         <xmpTPg:SwatchGroups>
+            <rdf:Seq>
+               <rdf:li rdf:parseType="Resource">
+                  <xmpG:groupName>Default Swatch Group</xmpG:groupName>
+                  <xmpG:groupType>0</xmpG:groupType>
+               </rdf:li>
+            </rdf:Seq>
+         </xmpTPg:SwatchGroups>
+      </rdf:Description>
+      <rdf:Description rdf:about=""
+            xmlns:illustrator="http://ns.adobe.com/illustrator/1.0/">
+         <illustrator:Type>Document</illustrator:Type>
+      </rdf:Description>
+      <rdf:Description rdf:about=""
+            xmlns:dc="http://purl.org/dc/elements/1.1/">
+         <dc:format>application/pdf</dc:format>
+         <dc:title>
+            <rdf:Alt>
+               <rdf:li xml:lang="x-default">spaceGraphics</rdf:li>
+            </rdf:Alt>
+         </dc:title>
+      </rdf:Description>
+      <rdf:Description rdf:about=""
+            xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+            xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"
+            xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#">
+         <xmpMM:RenditionClass>proof:pdf</xmpMM:RenditionClass>
+         <xmpMM:DocumentID>xmp.did:D25603A53F11E211A862D82018F201E6</xmpMM:DocumentID>
+         <xmpMM:InstanceID>uuid:4d74c508-4d0f-4050-845e-a000778f3b81</xmpMM:InstanceID>
+         <xmpMM:OriginalDocumentID>xmp.did:D25603A53F11E211A862D82018F201E6</xmpMM:OriginalDocumentID>
+         <xmpMM:DerivedFrom rdf:parseType="Resource">
+            <stRef:renditionClass>proof:pdf</stRef:renditionClass>
+         </xmpMM:DerivedFrom>
+         <xmpMM:History>
+            <rdf:Seq>
+               <rdf:li rdf:parseType="Resource">
+                  <stEvt:action>saved</stEvt:action>
+                  <stEvt:instanceID>xmp.iid:D25603A53F11E211A862D82018F201E6</stEvt:instanceID>
+                  <stEvt:when>2012-10-08T13:59:42+02:00</stEvt:when>
+                  <stEvt:softwareAgent>Adobe Illustrator CS6 (Windows)</stEvt:softwareAgent>
+                  <stEvt:changed>/</stEvt:changed>
+               </rdf:li>
+            </rdf:Seq>
+         </xmpMM:History>
+      </rdf:Description>
+      <rdf:Description rdf:about=""
+            xmlns:pdf="http://ns.adobe.com/pdf/1.3/">
+         <pdf:Producer>Adobe PDF library 10.01</pdf:Producer>
+      </rdf:Description>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?>
+endstream
endobj
3 0 obj
<</Count 1/Kids[5 0 R]/Type/Pages>>
endobj
5 0 obj
<</ArtBox[0.0 0.0 800.0 480.0]/BleedBox[0.0 0.0 800.0 480.0]/Contents 6 0 R/Group 7 0 R/LastModified(D:20121008135946+02'00')/MediaBox[0.0 0.0 800.0 480.0]/Parent 3 0 R/PieceInfo<</Illustrator 8 0 R>>/Resources<</ExtGState<</GS0 9 0 R/GS1 10 0 R/GS2 11 0 R>>/Properties<</MC0 12 0 R>>/Shading<</Sh0 13 0 R/Sh1 14 0 R/Sh2 15 0 R/Sh3 16 0 R>>/XObject<</Fm0 17 0 R>>>>/Thumb 18 0 R/TrimBox[0.0 0.0 800.0 480.0]/Type/Page>>
endobj
6 0 obj
<</Filter/FlateDecode/Length 25834>>stream
+H�lW��l�
��+��>IԚz8�Ác�1�T�9�����Bݚ��/WI�����߯?�?���{��Ͽ<�ܞ�
+��7����?�������t���3V�����ߏ�
+0�5��|�J�s�A�����ѕ#�g�W�5>�ޢ��x��%��o|3"0Bi��IK�PZJ7ZI4iՑ�y�%��3�V��ꊥ��1�i�L��F(�܍�\����������'7���{`;��$(��5��x�+�*�#�rz��E�O�}���}��o��m��Fq.�τ��;��Z�o#�m��MԷE�VB0�VρAܖ��U!�D�x�D�a��4�{Ã��a>�����5�oWˇ�|�����B�E5��QŦ�v�,��@|�p������KU�1����D��50T���EWD�j��>��kXd�%&bOe�>*{K�� ���z�/y�#����pQ»*"0]�T�9�:r�p�,/��U�a���F?zX-���jp�"k�Xr�?9ݤ�?�Ġ!{|2���qSkj#��a�5`FJ�%{�ِ��l2���&k!��2�0K�HDC&
٧m�o�d�>��N�{�N�&R��rr�k�+q����0��,���@�O*��H!�_G)������B��"6G(7݃#�zr����x,�v0*"rן��<8��#Ӎ���)U�C��p$�#�\CG�F��eZo5y�_����3?�L�\�"I:�F��R2�,1Y����,%�e"&K�ZnX6b����e"6K��`Y&b���9�ܞ�aǓ'b���;��O��SK��=;�D�t#���;I_�� g�Eo�Y��`����q"�D��"�-NK��������~w����h������w�������j��W(WB��KL�9w����#[��-_j�9u����R�Z]cuqE��Е����]5U-�֤���TB�Ф>��&���Z}�%}��p��&f�B��p�F���W���2�+
n]qh��4Ĭ�����g��0�[]�V��X]�v/��͉�L
�jc���٭����JSª��jzv��S�f��51��~^�xL��T��C��b�`��ј5m��� �����?r��tǠ���m�1�c\ֆ�ڲ��c��k�Ⱥ=w	��a+�8�̯��%�#��G��{����Ѿ]0)�B�>0�.7���L}�Ę�����)7����(�Q�f[d��:'c0'�Ia#v��0#���30�!�?�qj��~�ݞ
ߢZ�4'eܦ����>�8��6�D	K��.�D�%f4�I�y� 64��&��W�h<��gLb���������dݒ@x8{y=��Ąk^Ă��h��wd����>�Yct]���+V��܋�<V3DŽM��s[J��%����}	��X\͍3l�KxT��d��b�4ff��Kq�!���U�@���P<A���� �O��7�h���T�
ΌX �j�*�?ʣ/^���JEo�>��k��_�F�(��7�h��x12jB	� 4A��*���
��XK��˛S�5T��:������V��R��ybgM�eeL�,	���z�����}Љ_�0yW�@����U��Bp�*l@�E�F׶��Q쓼9/A���*q����m[&�����uQ��j�W)r��Ϋd�m��S�:}ˠ+����Ɔ"A�7Jb�4�p��蝭����XJv�;��b:9B�'�E��܁H���9\�ה]ukd�T�J�����Ϗ��
+��t1�Q5=7�N̚�"T�Y�4��|�&�E�A���2�8"xp�"6�D������ʵ�p��|r���wrPM'G@:�"ǰ��ȣ�X��?8�"6G����O�p;�g ���f{�r2��#����0�D���=p4��3�w���A�:�qJH~t�:E"Lj*�E��(YQ\���eU*�_�h@$Q��U,�_�hB�Q�hIy��-R����(
+�+"�_�hr͊*�EY���`DK��%��H��
+�����h�C��`��
+*8I��~����QU�P������X?m/ [�$���3Z�w���~悀�7�D\'yX#d���b��d4��1��fo��2��2>Ӭ���+	��i���MY�^���+����¥O���M(��⎶�y�&&b��Xwٯ$���L�"-��@S���,b-�t��"�
�T䊶�)b/M�Α��q��Ap�
�c���ݟ��&oa��q󏛇�?0E�^��"�b��ܛ^���0�.�[b �NL�<��Sя��F��W�;L˲����{X6T^)/�w�eX4wh�%(JH1�7U]-��&܂}a�������1津a�S?�@V�^…��
�€&p��<����x�4����
ј�"	B� ;����<�j�s�eޏ8FRO�
9�%�.�$U%�Ի�1��#^��1dz�8�4r�����룑��F���/6����,Eq��G �ٌQ��
sK�4�B��~e>DT�D[�օA}/��TRC6����P7<fd#��y��os5Q�y�㉧�}��b�!&�2}�Q��MZő�K�Q�u_������VL2|y�0x�@ēOZ�%7�v"OxVq�)���x�JM�ͼ�D8�=�ҙ[�gOĺ�
+��)_���tK��x.�q���L�c/CVu��Г׶1��^-ɭ�8p�S�N�Q�yRS�����������"� � �O����X`A��q^"�z4
�A���ہ����KR~fWݧ���d����r����sb�CP���!�MБ��y�n�������e(��	y��EV������5QY�h���1��g�c�����J��7y����ʃ��?0�q:?f�Q�����i�1<�&9ς��_tr��գ�VF�_�F��oN����P�cB�8|�L��$��X?)�
I�d�z�shd�k-���9s۟���[�o���a�+�_楜ֿ���$���Kmv�Ȍ�sV�dR�UA�gG��V�x��[�6���:�s��!�^��6�[�����̨���K)9iDc�1��}�O6����%���r����S�B��Y����n��2�I�>	�G'�b�
e��<Nst����gt���5�H�"i�3�( ?�x��hH%Y�X�#���/�z�y�Š�z���8���2��B�FܥƖ�y8�dׇ턫��5�
#�q���{v]Zx�{S�#-I�x8�~��T�v��Z;���2y�tE�c]x���'�TH��Ԙ��z#o�����'�bn$��4~e��5����˺3�~�'��0��cꑆ��p�?���u�ڙ1^��5q4���m�.�	�_��p�9�xE�vY��k��]�����|��S aY�
+ܙjPᅷ�3�0h�Ĉ�u�������$��!��h�����M����Y���/V.׿���
ȳ��ۗ���|�6���~>j�3��Cг�x�\K��z���K_q�εV����4�a;�����)y}Ρ1���.�>��l�9���ɜ�
��s�nt��]�����g��M�.
	��"k����Y�6
�i�[�!�&���G�.*_�:^��)ڌH�9�,δB[���#��h{1��G���P�ڊ��������i�%,|��J�%��O
L==c�]��m�"��`�`�r�L�<�H��|m���V�ʊ��tx��aUHE�yU��
+��1�
Yە�}�w��T�Pnɿ�"�CՑ�⨔�5���������#
G?���_�:u�XoXѷz�=X���}�"ӵ���Z�'����%�7�#�Zt�;Ɖ.�=(���A����&�X�"��S���U2��hRg+\�_�)��MM�H��]��^��RJ��:.�y҉H�)~�9����e�h��D��}����l�W�6U�c��H�,݌�G|+�����0G�I�d�:�m���د�|N'�]g��%*�ì��C�6�ezg��f;5쾻Ў�8��ާ@��~���.��O"�Zf�0	�0�¦���a�*�&�u�ͽt�?�.�]X�\����d';1�ݼ���ǀ;�K��ɉ��BY�Ld���A⼋��M
+����8��qu|��M���cn�ZC��Y�X,,#
�yK����Yr,ÓC�j�#9�|����|�
��Ӵcؚl�JR��)��.� �pX�.��� ��H~,�KcrUni�[�&��8j'T�	�*�*�0ڂ/c_�DB%����ױs�ɴ&�]�/��A��5	޾m��6�����&�nE?!�C�x�Ѽ��^rxֳ�B�!�+���2s{I�A<i[��7�%��-P{{�-�):T�Zj���e�O�<�
+AZk�,
䓸��i�\M
+�qT.Ә�	wRZ-D�a��������ߊC^�P��)\��pi�O�[pӹVF�{—Y=@ETk�po��[\	Q4��@XI�`���1,2kz�s*Me�7>\ԵJ	L&D�vʹ=��5f��m��[��&�T���#R���Ð���s_w��[�kAX�
+N�9T	h(jޞ�4k6��j���=k����E��o����`[
+hb_����h%�=5T5X�AsK�>�WA�Hs03 ǐ��A�·����P�|r�?�3�>�bk���$��Cк%Ѓ�+wE� mG�l\��'���ڙW���Z�Gq,�c$��RG���>�	DN2 ��כ��Q�Ρ����-���3����P��7'q�34���.
�\]��������5�5s�5����>M��"�4��y[U�6z"f@�H���Hm��;y�P�l{>�D���"̟�A�8�)k��G��1<Y��/r�Y[�.�k���R)Ac�T�-Kkqˮ/hþ����(�&Ǟ;+m*��5�����q����7i���]r2X=�(�q5O��[4Bf��j�Lx�q��^bCM2��풇
#~ۂ'��zx.�Sږ�C����G���p���ZX��?�ε�o�C7��?{�-a۞��h�i@�c��{�Mŕ��kG��X����}�v�
��=$%
+n����$k�Q���e�snp��"Eă�/Y��hj�Q����A��$H�S��Mmv�n%JP�4�<{nb��]��~�\Q����g�(z�DLQ.�={�oU���f�:��g:�DE����a\�����.�'C�Ө����D�eZJ���%����S��Fw��M5�CW����}76��Vzz
+^�W��a����<yĺ�If!7���\;M��@R�,�#�;��&��(������D�b�³�)Ew�{�W�ᘾ–i�|�ŔO�����/G	j���
ň�.���9�7F�s�<�,��v���
/���!Q���޽;B�5�qģP�.�fg{��b���ߺ'ϛ悄�i��L�*+-_h{�
�����������1'���'�d5O,5�ØS2Kv�*9rcq�.���fE�r�Ae�� �!��G��zF��l�Ȯ��G=Aaw_���ޥ=��-,w|9J5ӟi
�8Pyƍ�q{�o�<mè9����+�[GTE�Pv���Vz�3�܍dn&j:{�RQ�C�YL-$��� 
+M���.�>U
��6�8GM�P
1GhA�%��4�Q���V`i��;O<��3���m������~�
����6�J��G���0�hf�}�,�P�����a����5S�44�=w
p�4�h������ؕ#���Z���yZX��!�l�o���,f��G�p��'.���vK���Y#oSE�6��YJ3��������LF˅މ����dI�O.�3�X�H^�a�(/���l��}�}O(܈1[8��_�?�B��Mv��z	��~??�-F��|���<����O�`�/�Q�.��x(��
+�R�Ꮂ9�C����U()�l�}`
�6��WIW���A;N��b1dΰ |�
�舁�:�a
+��G��s/�vt�k�� �2JE����a�qk6����E��7ލ�2�9���	:h�=he�d,7HʏQ�j Җ��l�"B��!�_I���/��U�lǛ�>�����`-nEr������'/�jT�ڎ8���)@�q��!�SW���������A������`z'��Ni4�5�)>`q�J6N����z��a�כ�\)Ct��9�ɮ�”�1�8�v�T��-P1K�pg�����b��;����D��G"���X��J��&Y��ɥ}OQ�!��Tn��.K�Âm�E��,�2l
%Ոa{��	�7
��R���;Yɪ��[�Z�dt��u<�}�?�a��p+[�Sp�f���ܓ����,X������ꏘ~��Ȭ��O#"��b���h��v��d�v��)���@�꛷A
h�[����V�9q��v�P�K���x�*jQ�V2ܟ-�kt,�)/�X�F�770[�^��r�Kx��(��-NVюY��˙��b�8�,w�$�7v1k�m�(d�d��q�����c�ix[�~����Q
�u��w4�'��R:nyr���nz-�����\���]�z��"�Y��粍��[��^&K�Ȇ]��3J;����reF���w&x��{y�U��
���'!-���k2��}_��i���Gp����s��CzanPUxbK���s&
+/����0=f� ΁~
+�zW�.�x�1)�ſ���
H��}yJZ(
�C��F#<a�1���.�`�b��WQ�@��d������T����
]Kð�����r�)��: ��gi8�s_ �И�q2|����qPS�G��]P��4��蓖ِ�z(�S����W���9����r.�vaU���/��{QW>�1	ݸ��X�-�<6�M�������D�.�|�sŐ�&:��պ��&vK�p!{!_}P:C�ܑ9XU��CBD��>�-�Q�L�`N���vr� ��PT>�:���P��Bk!�
+��#X�Pa�Y��O
+eת��ǘY��@���'�۹�LDgS����ڭ�'��n�$Kj	��2�B�oi�]�����<�{>�
��~�d��I�ziQ7n�-u��s{SR�o����o-F�y���?�%U>��NF?'�t��<��c�i=ު�춥~Z�fE�M��2@v	�X-��	B��ף�!`�{�L��F:�Ϲ���
�D�t���=��tC{
|={�+�nOOd��{RW�Eo���A������
+���-�gd����&=�e���;�?�G[���/��C�AXh[���܇�_F%㹴"̜G'U����әŎ{ǛI�a�ן[�>���?K]��ɫ��Tn2�w��آJ�G�-��;���Y�����o���z�yvIZr��<�_ұk���N�u���\'�
+?�'��Qo��>���0."�@,}�L��R�X�,�E\{�׍�b�V�$7�+�˧�c�ar���1��%;�A,�/�q^������p�ݿ(9��Q;�4>�g��2��Ė��?�����a�X���^ɓY*�_��m.:��駈]�������m�[�\�N`:k��*��I;���$|o;�W���S&����92��r�[�qWi��+g�>��=� șH��7�����}�Ш@��=lČަ�Y�	��;�P
+�#�c�#'ۘ��'�
+�؆��T�N��9��6ҁ*Ų�9S�r�>Y������E��2�"mG)`ɺc&-���Ɂp��̧y ��t�Eҵ�[�W��*�`�}p��X��Ξ"��R�Ј��C��Q~"�W��0���-u?p��(,-m{�����T���WY�k(`��U,��ex�
�ޠ�KƀMd�'�0O��Rɣ)eY���F��9���@a;�
+4��ΩT��^M̯��Β�߸��SU6],2��%��D�*Nj��5ĐR4�mI�uqD�l�8}�؝����
H���Hwu5���,gX�Eh�
+��,���\<R	��q(F�[�9�`�5�7Hٯ�0Cq�#Լ-L�3�U磸�y��O���h{<�<l����L�è0@�A��Ǭ���g5z��Z3�gb�`��w����+&����s�S��ie�{���{��`����lq��dgBB�?�w��h�~wf�::�������6ϧ�nbw�R*Rx�Lwij|�#]}�
#5i������)��Yk?��$t���I'�21��B'�@��o���'��G���R�_�7��+�>€m�$��������T�R��Vk{W[��zc�����ґ��v˻H[��Qt��($�1v<B@�9V��N<�ߘ0
+��%e�����&��{�
+��vKE*�U{(t�.�'�@�d�b�V�w�S��2GA��
+o�2�N\��jY4�RQg/!�l��5#Y���C��p�w�i
皭� ��0�Gcw.W��v-���U��
j�7��� ��P��.ڃq�o���eߔ�g�:�����dA�7#�D�y
�TU9�uF{^^mSሷ�EN`l#9v�	��h; ����5�6U\5�3���v�����}��p'��(A�A��|]���<+�/Yp
�
����qb!��ac'{,@Ł�Y'adT����&��W�;��ǿ�+
��v�z��Wy�IJ�n�(�Rx�-���m 1��U!�d�!��CP��tA�%�9�V<�x�0E��v<�N����zmЄ�6v&��*�c��R���Rѝ}aL�y[#)MM�Y?lO�
_�ѱ5����ɕ��S��ȿ�c�س�Z��_��~`Z��d�L2���?��q<��;�<�8x�ى_�B:��"���)ie 	�6|7�m��y�`��*�v�G;8�,rŐ�L��5_Y5�U#+�.cE�������5���:�I4$ӭ+��Y�����&S�)L�¾���Ei4^,��+���R��C����\��ȥ-�V�DO�A�-D��*v(	�����|��*�g$b�8��/e��T���&�8r��*�\G�Cad�!�c�]��:�Ab�eeL�?y�^�O}$\�����9���t�x�f��E����f�F�� �X��"/{�|GD������!��Hg::��b��9z�u�δ�`�����]����((g`!K�Ɵ�/��si� ��õ��ȎC��Î=||=�^�������7r�A��P��"�ٞbS��E�y�_"�f�{����'�����ȕ\�R��S��v]Ȣ��Ii��}�~�`*V���ښ���##g/�f��})mx��`�ۢ��t��g0"�o�(}g�Q((������ ���хԾf����`�q�t��y�߶�2��v.q�������5 P�ka�os����}��h>?���=�	�"�9N�L!�!��r"X���]A���`"��!��%!u��J�qU��diJ�|�z�p�R�N�B�ԅSE#�R*�+}/a׾v%o�u�2_�؆�l�Wަ�ӥ�pV�DEߗ��G�bz��Dd3!䉣�^f�i
��r��	�
c���
�<�Pmv!�'�Y�`�T�hC|��]�I6u$��o�{�܏��$!�}��O���V7���*[�_s��ef�A�UN��._�^��[��(o]�q��/�PJ�p��iM���FCI�VM��.i��8�ۦÖ���K�� ����!���
+m��i��؃gѭU��
���)	�,%΅��=/Ǒ�p��8�����)Y�`��N��+	cR������b�$���-ᾉ[��=�)u�I1���'\+��+��42��`.ǝ�se�11];�-L5��k���O�E�$�+|��/�S{a�Qk/j��֩fy��1��CM�gCd�޵+�<��(��
���{L�5MM���T*2z]Ș\�HJSSڭ//GF�ӢI��ٙ��^Y�"���up(-9���\�H�Y��4���G��>��o�CXT�g�g��P��RC��i���
+-�L��UF����*Gi��4�ʝ슞+��\#��^�~�+������������Oy��N6���Y����,�B�Q����
	_\��80h�0�Ŝ��s��"}��軱p}�B�Z��C�䩀gH�2����|�H�m���;-x�(+�!�t�`��
+x�ȓJ&9�	�^�8Ga_F�99�1' c��Ʈ�	����=��
l�w�/�9|���dφ&А�
7ā���Xh4�>N�4^R�)ЋM���dt��-��N�k�H�+��M��r�ps��%�Fo
9�j�*��T@��+8��sf� ��A�c��v�6|c���`��v��²�0�;n�D ��X�%�B�b{�� [�
	�*(�2�W.��{�{�3�\���a�I�As�s��8��#�߁�����g�%�p[8����cQ������z?����3�F��4�\��%��a���m���F��н+i4)�-(r~�{��)n`��G�:��x�-�ОfH �g8qa���B�
+��<����ds��=���c �0h�6�(`�]�/��<���E_�m�x<�\�Ԛ@+��2�_1��b~!Z���Ÿs��`Oe=a9vAi\�1������!^�����a��ߩچjP�w��fȜ#�<d���d�|B>[���;"D�z��,��KɌ5r�h�.(�-K�(�$:�>��Y���N���5�6p!�;���݃H������T�Y!�P�����Ţe�h3�ـ�#�
��Q���6�
+r��a'�o�A��]�n�:�;�����?�Ǖ����a�P�I>�r�������g�+��$��EJ�Gi�����dY{�P�{�j�,�yVTp�����,h��b���Lt��Za��ND�b�Uf��껰���6���B��9�dg�q��b�E���-
�,��Et���,`�n��G!�@(���k������6TK���1&���J0��3��!��Q/LH�v�i�0Xs��蠞
u��S�������/���ږEٞ8�~������}s|@R�C�3O���a���xP�4-0p
+H\b�	��
+����0M���4
}�	� �����)O7��;�e�Bx�[$��v�R�3ͤt�܂�GJx0��$8���D6�S ���^
BjG�
+g{
+-�Ȥ��NJ�_�B�j�q�
�3q��Y#�t9���ơJ9�B���u"��9�t���p������WyD%�x�z�铌!�D���!3�P��3��mF0�	s�y��qe�&=���ؕ
+\��#�͛gB �{�EK��9�F�me��x���Sj9 X�?�J\Н��A�6B����Kq���b�Z�%p����E��E��H���m+gLL�T���3rPC�\��Ց#q���C%�1q����Q�b؂xj��!����i��Դ���P�Ҧ7��x�F��H��xV��:��׽�^�t��~4�3��j��q��0�8GW�|��i����6^d���|Gx��3/��A�ۯx´�����5����!��,�����a۪�zG=	@g���F�'�G����6U�
+mS���QnFK�>�
�*-9�:�x[뙊f�
L^r9\��8�n-�X����o}h�5[��LZ��R�L�A�6T��?�2��fݞ/x+@
+���_��zU����S�5���8��
+z;��Y���R��H��"�á���j���&ڡ�Z���9
b��&�!3����ֽ�)�G
+\�S�� ~Jfo8\���A[mU�y��ƫK�]��^Eo����z&q����T����ɌX-Q? �O{�pI�]�v���;6_xa)V.�G�b`�`a|��cOj	ԍ2?�z1��*c���F��L-�<\��
����v���v3���o\wpP�w�\��!=6z�@ш&�0��&�~�Y#=��z�,�f>U=R���[�H�Np�����г����+��oij��@;�]bIR�R�>���W�=�J/�e!w�)��/YXdV�6���_��������
$	�=�O�d2<;h���2U���!��d�Z�[I�҆[٨��)�v!hoF
k�ftD���k�'#�P	��iqBZ��t8�^�<��~!�%e�S!K�ƍ��M}o�w�K��Q
����������-I�ұ&�iJ�u�g
+tL���$�Q�������^��S�ϔ$/X�
,����|w��yW�yx"���5v4��|p�'���\*�t���27
+����� �l|���4P����)֠B��@Vΐ}��I�ʝg�Q��B���_|��f�������+�S�z��y����h�����ed	z]N�tl�M3Md(_9���c����K��c�O!R�̘<^Z����{!ｼ֧���9�h,`Rg�ֳ�u��(;�XBUwp�h�ӑ��VRZ���^Wn�>b%�����m�)�cg��VJWO&$��ў�H�7�v�B
�&�+g��HҌ4W��ۿ������<��f���R_�t�I�8p��83y��9���b�t����9x�#-�S�.�&�4q1�Lm&ä0$�:,&��9l�5���d������+vA��.n��!�U���;�$�gn�09C	,�Z��(ň[�B��/*����f��{%�3%���T\Gǟ����$S�̚����x��t��4A���V~wii�O�`�h����^CJ��\1|���+�'�4�V@��K����*?zkQ��逃|4D����
++�Ǽ�#g�R���g8����W��L9���n��9`�&�r�
��«^���8�W9��3W?�q�״�/|P��{������!�m\��2nUGA�m��'��ў<�F:[s[ǫMU8b�T�N�^��0���[�K��)d3�"ܸ,�����p�x���9��I��<t~��XWm�z�$��@=O5�Sg��
+?�����rf?�wV�S�
���x�����L�lۧn��u��t�����'kS��	��A�ÐJ��%�/�?~pP������
����"�5�Yomb�)ҕj��wIl�ũeu-I*`�~�-�5aJ�h���ș�+����w�E�H��ni/\�|э
P��;g4J����a!��D����
+
I�*���������;��w��ߝU���Ǭ)�B��q�O9�Рkͫ�Y6� �$��8����v�f�O�+qPG
��&!��C��kS�-���\I�d�S�e���R�N�wkZPLz�&w&����ap�nW��_J[�W)�@�:��	��/�����R.d
dħB�0��
X'ʧ��w��
�h��
+�ȵ���Kٴ��>PTR���nO���ӪrO�׳���U_�I�(�'	�?��
+�FqgU0�7�U�F���i�̖��Pe~���̱�	Z��	��k�P��#�#>:��,��;�-I�j�3H~�����Et!�J`�]ukU�������#?�cOr�Xva3MB����[��.SB�nAs�X��`�ӰX9�p(��P����[�l��Q�2��0����bq<*�yR�g�J9�8�Qa�U��"���E�ܳ\
+3:t�d��R�\���7���9���za*w��<C��C�����_H�Y���">���)]
+���l����wV�5�������[r{J�v���N�O����]h���j�gh%ש!.�-�Q�����թʁ�=��=�)JhQ�F�,rQ%D�H��`H��kn�`Y3VɁ���d�E�x��s�c��94T&ѻ<?t}�DX��.��%��_5�\E
�s��RMy��ڑ���y�ӧ_���**p��.ihǟW]��3VD������4r�F���K�j��E��a% &�	%:��؛Wl����4�#ʩQ�h�uο�Y�᳸�K�xb;���
+�78�~m��	n�j�����!�ȾM�e����R]-(y:�n=tJ&4i:dd$�����v�����f��-R%�����F�ڢ7zu���c��Q�����E�ѹ�}Ƨ��
$WoI�Ϸ�އ����ʧ%��O��y�3�ݼ���f葲H,�m��@�̗��"r�M/��(��Ly�D_�qQ���#̞�?��b�5����Ivxpg������9���ai����!�	�n���̏��h��
+!�r�<S�8�c�i��0���ƁF�*u[f�:|S�-�0~{gm�l�Hm*�k�R���mO+n�Y6�|�E�>t�i��%�o����o�-9
4��s����(t����H�O��Km�
�]%J�=�K�H�����/?v�?��GM�R��kC,��ʛ�e-;��w��u�욃%�%�P�GR7����5�b��j���GQؑ�3gmHa_.���z�`x��@�"�t5
+�"�j��?<���Ԑj���ULN9�'��>B;���= ΎG�8�h�쪦#��A�Y��n��}]NY��֌�c�%���g
+F��T�'HM��bQb9��!�͟��
+s v��^�H��gK�gW���[�d4�U�Fb)|WlW%�
ŰA�6[R�̜0����IΈ�B��CZc���d�a��֙|.�����㭜�
�!��7O����eЩ�+i��s#�=��fp�:r�����F��m�KMO*{TlwV0�޵�,��;�xɌ����2�e�۫]�,F�c�c������}
+*�/����r�����F�xA�j�ݨ&uك��v��lWK��*��)�YH�t�9Cm�"k1���	��ڬ�@@|�=��N��[/d��qS�`�"���Bj-��`
+Q�x5&M2!���:��w2v�A�����$�@�!r�P�����CV�	n�ӝ(�x�ϗo4�!	L��x
+��Q!_�A���f��g�������1�WFi�Ff��>iEt�өa.��|���P�$�h�����NƋ�)k[b!5��Cu��ˁ����+b��5 9F�O,Sf���5 RQwsM�Bv^�y>�d�)�M%��e��q��_�C�R�P�-g7�lT=�y'�qy��6X�`Z&���fh�~��UTUMM� ��$���Ä����u�7����!��G�Z��n-�f����
���w���:�
��kf��ɲ�̼X�t�1�*�&��a_-��vI|�V��1��( �n`p�vf�_�rh��Y,�.8�%Q�\�V)׻�8l$���v)�0 �+g9,}g��b�B�
+��D3櫗o'�y�I�R]��$���A ���-��l 0�/ۋ�.󳥀BLetKÙ���
+\`6
iQ��.J���͐c�|u�(��������ʃ"�T���J6�i8�(�q�M���u��f�4��/�u�_�J>�����梱��j)�$y��_�H������Zo�Ct޺�L�\�5_c�e_��uMd}�>�I-�#
Y�欑Q��H�1)b�.J6�\���H�vf2B��$p1�.�T5��Q��������K��ͻqx�X����A6���j'
e���Kfݠ�j�1A�^ſ��Ψ�J_������ۭ�Loۙ?c��x
��*��H6�`�X���S^�	�׋��:����u�VR��O��I�}\2n9~QPX!uFOC�����juoB�Ԧ\���OC�YbV��	4(�v�
$�^�KJK���"�P�
+�*����R������GL�r�F!R�}P:�>��.v��$?�����p,�.��:�*?{��}����*B�u_AP%�,a;N�Ш�(N��:�6�1
�L�c�
:�I8���̪��>�H�"�
��=Mr����7���@~W���U<��;N�j~6w+܊}�Q���)�u���w4݃�i�����Uv�w�h��cO�
+F������}lڤ����V
�Tdf�BAxD��Hؙ�M /bz	�L4a����1�xw
+�E�c�.6���ot^��G�������y�a�ɡ+�>t���C�+a�D��C���<XE��Ħ/ݱ�E�l�Et�p��J�&p�������!��M�f����C��W�J?����D%�AY�-,��~h`̋��9��qI�/�;��~�"2��������X���1�B����ׇ�*���wW4��y�C�?�f����>��6��]>������*�
`Æ40Y0؃����B%�H��1@A<���!ነ9����7p�mc������P�wV&	����g#���v6#���BZz$x�*:��ѝ_��(yg��W�_��Z�dS+ƣ<VE�+�P0�����B��@ڤӮ����E�-�m�r����ߪ
+7����K�����l
�o���k�E��b��BY�g
�)��i�����M�?���G��q��lga��)�Ev~ѱ��j?H&�4�A�Dڏ`�6�g�O�V�n쫼2892���F�@���.��
+�Etm����S�M��$�&Rk��O��K�mY2��#�'��C�VLgn+�We�jX��T(��C�����h�|%�ܖN�x�%�Ց�<X�ˁ�E`�yU����2'$�ٝ����A�Ys"�Uw��;t�C�{7�M"9��x��&o9t�.E⢥*���pw�!����P��QߏE�C@5�9���Ed�݃�Q����d�Cl�Q�L�*j!G�s�z%�0�x!Mq_JV���'�)��n�V
+���x�R�ː��^%�ze<�m\O�0.	Gܾ<�KT�H<����P���*�b�h��|aҶ���<#8X�pi-��HR�����
��O���x8��T��9Rby�Rn�(5�N��G��@�qޙ��!�9HQ��a"$��	M�b<�ҫuyQ�0����b�NV)OR�&��a�
+��
ks��"��V0e�J��$y��k�Z�7�)����V��������z�Fv�1�ch��٫���J�������VNZMŶ����~M�>�
+���Ó��TeO>��iR�|!f�J*!���H;�B�VѤY��6�u}�f�Yx�
+����<�	U��<�ZG��G�?���2���W-!zH�c�0ʯ��r��yX�\��Ȝ,��C��4J�K
+&�1YI�$�$�5�	�5O�<|���Hu��\�r���C1z��)�$
+��FH!Mh��n���,Z�y�J�̜�k�{7���W��@@z>@�HM\�����A�SI���@KUK��/�D�-�7+��K
G-d?Ѭԩ�+O9��8���/�9�T^�
�zr^�w9�A���-�-QFu�%�Vٓ��s��&Y�/2�{����p�{�����m^ױb{���N����O�¼/�;�����%�U�;�W<�|Y#�7���Z�L��A?J��9f�*�nQ�fit�5�8���W`1p������ﯓ�`�L� ���n���,J�kw�z<���/��X{�Fo�Pg�$�$��߁THX#�"L��])Ѹ�~]���"�"��R�4o���S|���w�/avV�B8ϡ
p�������\�—����6l�G��GēR��_CJ��˭���EY�7g,
M{0;�{��
cd����x���l�i�B,���	-�?}�SШ��f|���K�=�<���8�?m�J/A�&��K]?�����x��|��V��ڻ��i�S�<c�1��J���S�3~&�԰�a	�Y¡I��Rc��R}�D=��K�:,'mO��K�i|�)L���AL|͓��*�Ƽ��i���y��/ /�j����*2݆�Ay�)��[��X��n:T��?_��:��"������P��1�ᘍ��ʼn����)GǗ���:�[~Z�D�}���֍���4Oo�8[��܅�����*Qo:8��{��'��q{�X�!۳��K�l���vy���ϝ�9������0��|��d \*��c�Jr,�m�N�.Pe�Rn?�x�/�E>/����!�
��~�%J���r�A����e�b��s������cA"sϙb��a��������	�*8�y�?�>�T�3L��(���������~��??�������^#@?����lƢ�7#�t��zk
+(vtr�kf��և͉���*�k����$�D9R��I��8�	�D��^k��C�~����.p�h=���1o��ή�a->��SM�'��e�p���B-��ź���k!�������6�%�)���Ka�a�h�l-�ji~:��VP@�V��-���j�/�{���
R��U2@9�ql�V#��՛��
U�����v/�g�r�_�Z�+1l�[�@�P5w��0�.Щj�����d�q�!���l

?vZ`��p�Ǥ}�(6� ��� ����I�pL��rb�;4e�8}�0|���}�-A�K*����s
狺y��H;>�Y� �Iߓ��Y��ӥ���zw�N���ӕ��9Z78>H�����H'�/v
��:�8����g��W!�ra����V�R\�:5�̩BH���$R�5D)3��`��L�S.s��œ�)�a�P��ig}�Ŗ�&�~��U��%S�����,��S�/P]�0�@��Q���@�@Ɍ�]��(�|������c"���ͤ��_iK{G%}�75I�pH�y�y�m�%3�>�)js�OKM:C�u���y4Z��������KU$m��`Y� ���2BŇ
��[�fIc޼�yϦZ�o
k�e�\"�.<=�%�(?u�C)�/R�:YU.�)B�٪�d3rQLm�X2D�f�j�~>F��?z7��NPaW�ίf�E��{��rC���rj�7wo�4q�}m�P	�Qe��<:�w��v��#>�� ��>�r��!����+���i�¬��?v��dZ��O���|ϐ�l��Wq-u�&�p�C�K!FڡJ'
9���Ã�Gպ߿�\X�El�>�}@��E^Zn�|,hFVY��t�l�m�['��hlBek6�2]�F��F»����w��v�ť��eݕ��z(y �*f��W�	�G�\~��cH>�8bD�D><1
!��J�!TY�T���_}�.?GT�v�M)W���q����9���(�
���
���MC훚t�@|	��
��#�q4h��5��'S9�%�n�Ī�[_m0)r�y>ukZf]�Y`�|��J�Y`;ow�0� �e�Z,>�h����^f�K;�4���.�V��@u�/ߘ�3&=Д̈�;M���U��߇�0>�kG
��T�C�."�!/I�@���u��^���q�/1�Զ�SV�k_��RT��ǶpȨW�����<_��x�����fd����i*t��\���~M{��p��i
���AP�87*�U�h;���D���Zy��Y�nWZ�!�i��Qv���$]��c$��c0U���`#N3i
�1X0a�$uQ	��Rp!�	U7J+�ٺI����-2$W$����3ʎ�����K��稺e�ع`��a~�GҘ��0JM�H�EXr���␚mfU*(9��+J�k
+w
��- "{*f�J�Րk���l�9�&���G�r�8*p�O|;�Ϸ�6�]6���ݟU�t��TUղQ��_�	��r0Wyc���Ӯ�����4��?L_�I���.��j�=��j3
%�Q��2�*gj�־R*�{�ޣ���<x�}e�X��o芐,����k����g_���Nz���-3硰h���M�{����J�fQ4��Շ��t%P�
�.��џ�L��{H��������;9l+)o�Ŋ�N���;K���G
(2��gHRmk��	��NZ�$ޑ�����!�B��^u9���B�E�!�3��Y�������`L�b���vdW����=�����K��`lq�ӑ8�N|�l��-wf�<x�t�,ϸwn������>�(o��Q�����f������e�(��`s�}fEǃcqd8N�'��l����(}ԛ_��NZ8#��Ů%k��$������p��k�|.��yrj��rX!�;bh�����D�d����<��IG�YC��{���6��Ӏl��U���*�!�i�{Ꞇ��!��u-<
+Vn!<1�Z�|��NÔ��ܶ�I*H����f�<��
)}��PW��Y��NIJP}����%s���8O��a^H�

�܇��@V��� �<4�ɿ��F�;����0J��R�vŷ4~p�t�z�N���B�G�M�0О�[P09��\�o"
�#�#�Q(,mH�tmF־�BbY���Dm���s���l0�b��$=��f٘��L�.Uq�K��1��� ��$�7f�A��0�Q�ug*�l̆�ZL���,agfR��2��a�=����\
A�(�Х"�֐�R!mvd@D�PS:���!�z9�%c��T~K'�#�w�P��pF�ŇӔ���O>Cr��4~��|�ڮ�z���)F<�y�����oJO~'���5����r�	
���	$ �u�ڭ�JM�*��S�l�����++Ģ�o�-��
�]kâ��ڱ�i�Pv׆E�
	p�opzn��m��sC?o��T2�x(���N~8�R�{�cvA���E�O�Q�Y��FMRpe��
�%���ͯؐ=�ʞ�@���i{á�����0�����p�t8�Ƚ������t����i�����[3�sFE쿹P�%��X"�(K1sH���M�␓L�&G-���Mi��bi����e+&f�S���!����������&��z�)�>��79�0� �z��`!�C���&g[��T3ؔSL�&G#h���w���L�&GCo����p��w:i�;Ŭ�)f:pJ��z��@����&�8���M�M�/���M�S��i��i���KYд��B����Qt?��~D��̦����-���V8-�\`|j
O���p?�~f��L���E�푅\�aW/����ʑ#Ƒ��W�R7��D��v���f���XC-&�*uf������3�_�X|=�����l���"���ėj��~�f}h��?��0��G_���%���
+�7.�(�Fg����w����h޸H6W::��-��}�<ڵ)ٛZ�(FHq��u����	9pf�iĒ���T��%��c���K$����׌�;��+d��R��m�1v�8������N�-��K>����s���Kc���*j��*�-��T[�?�"�ÌA����ܷ�M>k�,spY�:�ű#����c�h�N�x
��܁���y�n$�6�$:��bm*�׼a�j#l�
�֒��A�S9�q�^o��v�S��c���K�7<%�}�n��+�:f=�^�$?���|����k�[!��%�X2D`Hbx`�H$w�l�U2�7e+M��P��q|�f��2JVO�Z��&z�B1]��҉16I��ԗ�0�X�����Pg֊��k"BȠQ�@d�t��a2�Q��Q̓��Q=׾";5�W�kr�]`�b��c@�
\���X��0.��;��ǐ��9�#��;Op��]t
��h6*HL�$M�1|!7�
+׺�V�8�#����;�[m����
_�H
�Ӊ[�7��y\xd���^�,�Y�f��Vx��Z#*F�qȃ���AE�um���t<:ID,N���E�5L��Q�˽�׫F]������c=)�u�
+ey�_�~[��2Mi�e��zFN��I���Qc�[i8���\�c��t[/3���]}:�#W�a=�c��i�͡H�:@K !��e��ӯ�4�e����zX��/�In�{���W|�K�Rq>���B�!���>��C<#zOq�!�D����C������Ѻ���&>��nq�!��z
�LJx��M\�!N}&n%��&=�]��L��7aR�tH;>�Gw�џ¹盰�.�M���!ι�W��w���Y_���f|=���������� x=b����#�_�R�$ybda�fM"W&�p�:��[�:}4%L�}�G{w��l ,yI���|�L{��y��G���:��k�k�k��+��}-����Dwgψ�}
+U��kA�a�’��L�٭�%pU���{/�Q3����Q��f喯��M��7fD�f�QANjV.D��Bb����;�/�<|�m�:qg�-�7\��	�n|n�Ձ���v���ܞ�d���P�Ƥ�/���{7&{*Z
��F9
+t~��1J�("��T�
�$s%<��! �
�G!��W�g|-4���aQ"�7��Ӹ)DXU�/��d�@��t_H�yba�"@�@�����D��̈ؤ�"dq�vǩ�M5�
+�����b�A�0��-B�������b+�/N2��As�3��2�.�SC�\� =���!)��i���
���<U��9�b����%�dS�Ĕ��`�o�!J3sߪ�ၾ3
+Fw��+�#;܏��j�	���)-\�n����6кp�"�Ҵ]9s�dU\�vv
+���	iK�[N#�JjZ�%?�Z"UȒU���u
+t�c綴���_ǣ�F�������P3�	?Y����0NC�`����cg<�6	��&(4��@2�e4Ca���8�S�[@#��
+��1�q�w���~ڦ^N�~�>ޭT�ࢗJ0_�澫c?��ƼO��/�^$a�Z���#��lj���q�qZ�8n������-�wO�HR"�d�������m.�d)K��^�����U�NY��R�>G
lr{Bb�NP4�2
+f#�)������ћ%��.�O:����K=6B�i��~�L5�Bn^R��[+���W��pǸ�!�F����9u���EN-��74�Y�x�q�g.�ͤ�C��!:�U'��\\�ȵGR��4_+\���~��3}�T��yI_?r�o�x��tĉށ��N��[zi0	��N�&����.r�Of5��IMȘ�\6R�#���M�+���a yŧNڈICf�vi�h���I�V�0K����}���*1z2��eP�
�'e�04��%4
Z!z"P��
�S�.������5��k��C�[��$���)���ײ�*���u+�r��b�<.��P�<�ܚZ>���c Dl��ǀ��@�z��7���5��5�P�k�	����}U���ۂc�b�An�]���JE��@G�1�(�]"D��Rbee0R�m���/0�NA�`�+�Ժ=��f^Z�ͮ�w��e���2>�h��,�`���l�3�,�˴���dZMN�B+V�a���%H��WS��
+C��A�ϴ�$$^̶�ʗxD�V�Ie�E��$��mYZ�q�^�U�s����#�RⅤ�t{g���P��:!�ĺ��M���WN)�\b<l���2}�x�uZ�SR��*���j����������_�7�q;��7-��@�U�Ѹ�:���e1��P���>!�	.�k�4��}�hq� ��$g�V��+f�"�f)��f�_Ḧ���ڃ���8�䋖Ӭ���uz�%>�����&��đ�ȅ�H]I�»d}�ܧu�%��C�e�@�@�(R���(y��@��<��-��pN]�,�&�ib��~@]N�ĶzƟ�#�;騹ȞvI���k�� *���)*�]=��~=��@�ot�
n��i�}�r����t3��$�;#�z]�ђ��'t��`�yj�u0
r����(�Z�%����Qҵ}�A�BLs� ��X	��Ĩ��`����%]
�k�g��Mz6h?m���_&���2�+q
��aڊ�t�au�V9����V�Mr��rnF��1���f oJ��K�@�$&�J:�S��|Le�[��>)aE7_Z
�KNI�{�5�}��n֍&p�z��i�J�g�z|K�Z`7�T{?y8�����y+a��'��:��BK����/Č��1\�L�K��yZbc)v�"dyy�#�ϗ��_i�5uoiy�؈��8]̀���ղ#I
�����g�}N��{�z@h�_""2�r5�H3��/gF::.�<!�w
g�N�nlSCɋ��"w8�\�j���(GIp�Q-|�+��'p"DM�SFQ��g��c��!����N���^�Y��B���"UMejkȂ�c�l�sU�k�
+�6z�l���c�b��#�rfc�*��i-{��/��A)��Ƙ�#�S;<Ȕ��r�޸y�~��ߦO�~�EN+���5+ S���*�V}�=�T�t4��ʌ�ͫ��̭A����6Fulj�Z�Vۼ�|8�M���X���
+k�N���y��Ҋ��6ۙ��xu�q����TK,=I��3��*V����
+E�ǎdh�x�������~�ͻo��^�8X�|m>�@�X��F��J�����������y��K�P������6�Y|˨n
+\�	ʂ��N�l�w~���D�cia�ч���=�0'���7������l­�p�4pmY��V�2�G�R�RX�%�@�o ��0d�8�>W�}35 �ɳ�O������\v�4Y|�B�/�h�����r!K���@��� 	
+��B}
ù�tщ�2o�ͧ������v��z����������/����;k=2;�P�����3��e���|~#��������߶O_6K����i9�������"��ۖ2��,^A���4���ϭ���~n��O?�����>hDx��t=kA����y��+�z�C��<�a��������1�t�3+��I/��ev�[���ORb�����j��<�W?#n�Rn)���(i5@c��0��a�Qm�/�;�,sw~R�	��ۣ��9�Tz�
1:Y����#��co�I&��߲9�ӭ��@�W:C�Xc���/+z'���K_�C/c�-�o�-������!Ӎ��<���VO::LS�Lޕ7��Y�����ԝ�/ED
�Z�+���R�2zAk�9TJ2�.��]C�����yP�,@r��L�ؚdU=���R���B.�^jhbA7ީ5:7�Ѯ>�|
+F���îkQ�p��@&��O������
�*9K�ESr'��u�_�Ct��4&�.i�>���˳@A�4	ݼ H�Ee�p&��D��]�䉞
+E:Tve��E�
����Q�?j����v�~�g��
+Ÿ��v�`����cf�!�0��q1����!Z���!5k��}{���}
+yT�9�B7d�>#_8
���l�� ~l�L3��x+l��"s��������@�o�w]x*����R��+Ty�d��ԋ�
_����w�D4�Q�F�ې�H�y�$/�"_0:"R_���
]ۘA�ľ;������#d�J`�I��IS	{�R����Y�
8��r{7N�'�MI��+V���|�vd!a9�oW��δB�`fW�
+�d�*���eL#Hf8��SwQmGu��9`�~P7O��Xb�G���W��' !�1�w���x{Y�7��)���#�ʁ���u�O����-`����ȧ	���?'NM����gg(S�řFX���u��W�l�JvoF�P��s�C��f�gՎ��nMK�V�XX+X́�=4�o���#z!z%;`O�������|���?��$lj���珰������
�`�a��
+endstream
endobj
7 0 obj
<</CS/DeviceRGB/I false/K false/S/Transparency>>
endobj
18 0 obj
<</BitsPerComponent 8/ColorSpace 19 0 R/Filter[/ASCII85Decode/FlateDecode]/Height 60/Length 1259/Width 100>>stream
+8;Yht4-&>\&3Z+tONF:dE\NWZYSB_:/.(M@P6EjSA-G:=0XaUd_`bg;S@G`.7?Or@
+<a22106Xs(i`BU@H[J9Y(a[T"`?%Fpb<=j-G'gH2?EhT_"(/Kb#S1ctr`4.(D!@K2
+$qu*>]mY9EZb7n`m;)@!A1uBO9)gjFG^[$SVN6.ACt?WZs0(\Is*9(SaYqWVU54UZ
+M5XOWO!rn?qO+QV@T2:,>()Y22Um5<68F%hcG`D(*6W2tRlCn*18;YF]M]guN\-2(
+B0&P<,kr%`>cEdi*459HH";EIaI,8A4r5LuYuVrKhWoH4[qCX2R?FM9oRDm?Kfq5;
+hUT0lIKOhl%n'LF#L!VADn]$85<f]"RZ,o"gUh4ajD)&tS69C%6PjBXP*]JM`^4o+
+D93OWa&.X"+20[l+D1ktMIq!?)'Sm$MHn+U-q[oqrV9lF8Z.cODG9l1#5;+!;b/RA
+&sI6^NZsVCh:(1tT&9@]hbC5j.^2bM^i($>;QS4M%GTuTgpcN)AFC@lWeQ1LScXd\
+I@/[aG!6f<m?@"&:/<HHp`?%-YHb/>9;6?kj70dPI4'm\)bIgLW`l*Wd>ji0WSI+*
+p$mfZq+Um/h@8Cp'0]He%3p;n)2h7ur(D?QUi>9@/f.CP^L*!!j((gY\*F^X"aF*'
+<+;+V_KaEKZIA^>-X4`ol`5\8OJ5jPO"ef;1sC9:<.\`ESK&aBcCS$]-)NJrk\"TF
+4*Q*N,QY&3eK;-JK0ENKenlLJRM3;9S'a`r=j+D>,]iAG0llEk:V/#Q(Wfb2#W_m+
+Q53V3]OU&=DS.4T;B(D#3'I0@$_Q[Y@tLK>S/I/h5@4DqT-lqun'I.JJr^d=`lRs=
+A`M^[lfVJ'p9R$$]l%_tr<P`P4n:<s0)""T*@(Qb+Fgu/A'K#Kog"]:pEb4"0C%T#
+%D05]gFnYAWr/BQj(SBQfRgXZ\Tu&&X!N1IYuaJ4q(V"_!s^J(+T]^Cn?!I+,rto1
+<3hes"YbJk<Re<D\n5#gU6!*%.];um73B/=G`2KrJ0R=%#S%1Rj>Rb["2:bD!WucT
+bu=*#m;m\D8"Zabg8Ijn!WT1HD0Q2/,Eu#7H`K/cTDV'LjrZHF0aW+F<>VPK:X9PX
+im*-s^d`*r]$Xe'>V\k4.75.j&6e\d[&16C3;M7c1OW@``dJETZmO3q"(;mq=V.CC
+E@V?b7\^[Oe0Bcef.2pG-4-<9+(;@0Trlkc4'tUGo^Nk"ok_#2r-4'JbmEpqrYY]e_SXn~>
+endstream
endobj
19 0 obj
[/Indexed/DeviceRGB 255 20 0 R]
endobj
20 0 obj
<</Filter[/ASCII85Decode/FlateDecode]/Length 428>>stream
+8;X]O>EqN@%''O_@%e@?J;%+8(9e>X=MR6S?i^YgA3=].HDXF.R$lIL@"pJ+EP(%0
+b]6ajmNZn*!='OQZeQ^Y*,=]?C.B+\Ulg9dhD*"iC[;*=3`oP1[!S^)?1)IZ4dup`
+E1r!/,*0[*9.aFIR2&b-C#s<Xl5FH@[<=!#6V)uDBXnIr.F>oRZ7Dl%MLY\.?d>Mn
+6%Q2oYfNRF$$+ON<+]RUJmC0I<jlL.oXisZ;SYU[/7#<&37rclQKqeJe#,UF7Rgb1
+VNWFKf>nDZ4OTs0S!saG>GGKUlQ*Q?45:CI&4J'_2j<etJICj7e7nPMb=O6S7UOH<
+PO7r\I.Hu&e0d&E<.')fERr/l+*W,)q^D*ai5<uuLX.7g/>$XKrcYp0n+Xl_nU*O(
+l[$6Nn+Z_Nq0]s7hs]`XX1nZ8&94a\~>
+endstream
endobj
17 0 obj
<</BBox[272.5 292.95 405.5 185.0]/Group 21 0 R/Length 597/Matrix[1.0 0.0 0.0 1.0 0.0 0.0]/Resources<</ExtGState<</GS0 9 0 R>>>>/Subtype/Form>>stream
+1 1 1 rg
+/GS0 gs
+q 1 0 0 1 384 266.75 cm
+0 0 m
+-0.05 0.05 l
+h
+-90.05 0.05 m
+-90.05 0 l
+h
+7.05 -81.75 m
+14.783 -71.117 18.65 -58.85 18.65 -44.95 c
+18.65 -27.416 12.434 -12.434 0 0 c
+-12.434 12.467 -27.434 18.7 -45 18.7 c
+-62.6 18.7 -77.616 12.483 -90.05 0.05 c
+-102.45 -12.417 -108.65 -27.416 -108.65 -44.95 c
+-108.65 -58.783 -104.833 -71 -97.2 -81.6 c
+-106.733 -69.834 -111.5 -56.066 -111.5 -40.3 c
+-111.5 -21.9 -105.017 -6.217 -92.05 6.75 c
+-79.05 19.717 -63.366 26.2 -45 26.2 c
+-26.634 26.2 -10.967 19.717 2 6.75 c
+15 -6.25 21.5 -21.934 21.5 -40.3 c
+21.5 -56.133 16.684 -69.95 7.05 -81.75 c
+f
+Q
+
+endstream
endobj
21 0 obj
<</I true/K false/S/Transparency/Type/Group>>
endobj
9 0 obj
<</AIS false/BM/Normal/CA 1.0/OP false/OPM 1/SA true/SMask/None/Type/ExtGState/ca 1.0/op false>>
endobj
13 0 obj
<</AntiAlias false/ColorSpace/DeviceRGB/Coords[0.0 0.0 1.0 0.0]/Domain[0.0 1.0]/Extend[true true]/Function 22 0 R/ShadingType 2>>
endobj
14 0 obj
<</AntiAlias false/ColorSpace/DeviceRGB/Coords[0.0 0.0 1.0 0.0]/Domain[0.0 1.0]/Extend[true true]/Function 23 0 R/ShadingType 2>>
endobj
15 0 obj
<</AntiAlias false/ColorSpace/DeviceRGB/Coords[0.0 0.0 1.0 0.0]/Domain[0.0 1.0]/Extend[true true]/Function 24 0 R/ShadingType 2>>
endobj
16 0 obj
<</AntiAlias false/ColorSpace/DeviceRGB/Coords[0.0 0.0 1.0 0.0]/Domain[0.0 1.0]/Extend[true true]/Function 25 0 R/ShadingType 2>>
endobj
25 0 obj
<</Bounds[]/Domain[0.0 1.0]/Encode[0.0 1.0]/FunctionType 3/Functions[26 0 R]>>
endobj
26 0 obj
<</C0[0.368627 0.247059 0.419608]/C1[0.345098 0.239216 0.396078]/Domain[0.0 1.0]/FunctionType 2/N 1.0>>
endobj
24 0 obj
<</Bounds[]/Domain[0.0 1.0]/Encode[0.0 1.0]/FunctionType 3/Functions[27 0 R]>>
endobj
27 0 obj
<</C0[1.0 1.0 1.0]/C1[1.0 1.0 1.0]/Domain[0.0 1.0]/FunctionType 2/N 1.0>>
endobj
23 0 obj
<</Bounds[]/Domain[0.0 1.0]/Encode[0.0 1.0]/FunctionType 3/Functions[28 0 R]>>
endobj
28 0 obj
<</C0[1.0 1.0 1.0]/C1[0.807843 0.192157 0.192157]/Domain[0.0 1.0]/FunctionType 2/N 1.0>>
endobj
22 0 obj
<</Bounds[]/Domain[0.0 1.0]/Encode[0.0 1.0]/FunctionType 3/Functions[29 0 R]>>
endobj
29 0 obj
<</C0[1.0 1.0 1.0]/C1[0.443137 0.792157 0.207843]/Domain[0.0 1.0]/FunctionType 2/N 1.0>>
endobj
12 0 obj
<</Color[20224 32768 65535]/Dimmed false/Editable true/Preview true/Printed true/Title(Layer 1)/Visible true>>
endobj
10 0 obj
<</AIS false/BM/Normal/CA 1.0/OP false/OPM 1/SA true/SMask 30 0 R/Type/ExtGState/ca 1.0/op false>>
endobj
11 0 obj
<</AIS false/BM/Normal/CA 0.301956/OP false/OPM 1/SA true/SMask/None/Type/ExtGState/ca 0.301956/op false>>
endobj
30 0 obj
<</G 31 0 R/S/Luminosity/Type/Mask>>
endobj
31 0 obj
<</BBox[-32768.0 32767.0 32767.0 -32768.0]/Group 32 0 R/Length 85/Matrix[1.0 0.0 0.0 1.0 0.0 0.0]/Resources<</ExtGState<</GS0 9 0 R>>/Shading<</Sh0 33 0 R>>>>/Subtype/Form>>stream
+q
+0 g
+/GS0 gs
+0 114.0005951 103.8505402 0 215.9746094 233.5996094 cm
+BX /Sh0 sh EX Q
+
+endstream
endobj
32 0 obj
<</CS/DeviceGray/I false/K false/S/Transparency/Type/Group>>
endobj
33 0 obj
<</AntiAlias false/ColorSpace/DeviceGray/Coords[0.0 0.0 1.0 0.0]/Domain[0.0 1.0]/Extend[true true]/Function 34 0 R/ShadingType 2>>
endobj
34 0 obj
<</Bounds[]/Domain[0.0 1.0]/Encode[0.0 1.0]/FunctionType 3/Functions[35 0 R]>>
endobj
35 0 obj
<</C0[1.0]/C1[0.0]/Domain[0.0 1.0]/FunctionType 2/N 1.0>>
endobj
8 0 obj
<</LastModified(D:20121008135946+02'00')/Private 36 0 R>>
endobj
36 0 obj
<</AIMetaData 37 0 R/AIPrivateData1 38 0 R/AIPrivateData2 39 0 R/ContainerVersion 9/CreatorVersion 16/NumBlock 2/RoundtripStreamType 1/RoundtripVersion 12>>
endobj
37 0 obj
<</Length 925>>stream
+%!PS-Adobe-3.0 
+%%Creator: Adobe Illustrator(R) 12.0
+%%AI8_CreatorVersion: 16.0.0
+%%For: (Kenney) ()
+%%Title: (spaceGraphics.ai)
+%%CreationDate: 10/8/2012 1:59 PM
+%%Canvassize: 16383
+%%BoundingBox: -95 156 706 637
+%%HiResBoundingBox: -94.5 156.5 705.5 636.5
+%%DocumentProcessColors: Cyan Magenta Yellow Black
+%AI5_FileFormat 8.0
+%AI12_BuildNumber: 682
+%AI3_ColorUsage: Color
+%AI7_ImageSettings: 0
+%%RGBProcessColor: 0 0 0 ([Registration])
+%AI3_TemplateBox: 306 396 306 396
+%AI3_TileBox: -90.5 90.5 701.5 702.5
+%AI3_DocumentPreview: None
+%AI5_ArtSize: 14400 14400
+%AI5_RulerUnits: 6
+%AI9_ColorModel: 1
+%AI5_ArtFlags: 0 0 0 1 0 0 1 0 0
+%AI5_TargetResolution: 800
+%AI5_NumLayers: 1
+%AI9_OpenToView: -605 930 1 1821 1045 26 0 0 50 116 0 0 1 1 1 0 1
+%AI5_OpenViewLayers: 7
+%%PageOrigin:0 0
+%AI7_GridSettings: 1 1 1 1 1 1 0.8 0.8 0.8 0.9 0.9 0.9
+%AI9_Flatten: 1
+%AI12_CMSettings: 00.MS
+%%EndComments
+
+endstream
endobj
38 0 obj
<</Length 22924>>stream
+%%BoundingBox: -95 156 706 637
+%%HiResBoundingBox: -94.5 156.5 705.5 636.5
+%AI7_Thumbnail: 128 80 8
+%%BeginData: 22780 Hex Bytes
+%0000330000660000990000CC0033000033330033660033990033CC0033FF
+%0066000066330066660066990066CC0066FF009900009933009966009999
+%0099CC0099FF00CC0000CC3300CC6600CC9900CCCC00CCFF00FF3300FF66
+%00FF9900FFCC3300003300333300663300993300CC3300FF333300333333
+%3333663333993333CC3333FF3366003366333366663366993366CC3366FF
+%3399003399333399663399993399CC3399FF33CC0033CC3333CC6633CC99
+%33CCCC33CCFF33FF0033FF3333FF6633FF9933FFCC33FFFF660000660033
+%6600666600996600CC6600FF6633006633336633666633996633CC6633FF
+%6666006666336666666666996666CC6666FF669900669933669966669999
+%6699CC6699FF66CC0066CC3366CC6666CC9966CCCC66CCFF66FF0066FF33
+%66FF6666FF9966FFCC66FFFF9900009900339900669900999900CC9900FF
+%9933009933339933669933999933CC9933FF996600996633996666996699
+%9966CC9966FF9999009999339999669999999999CC9999FF99CC0099CC33
+%99CC6699CC9999CCCC99CCFF99FF0099FF3399FF6699FF9999FFCC99FFFF
+%CC0000CC0033CC0066CC0099CC00CCCC00FFCC3300CC3333CC3366CC3399
+%CC33CCCC33FFCC6600CC6633CC6666CC6699CC66CCCC66FFCC9900CC9933
+%CC9966CC9999CC99CCCC99FFCCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
+%CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFFFF0033FF0066FF0099FF00CC
+%FF3300FF3333FF3366FF3399FF33CCFF33FFFF6600FF6633FF6666FF6699
+%FF66CCFF66FFFF9900FF9933FF9966FF9999FF99CCFF99FFFFCC00FFCC33
+%FFCC66FFCC99FFCCCCFFCCFFFFFF33FFFF66FFFF99FFFFCC110000001100
+%000011111111220000002200000022222222440000004400000044444444
+%550000005500000055555555770000007700000077777777880000008800
+%000088888888AA000000AA000000AAAAAAAABB000000BB000000BBBBBBBB
+%DD000000DD000000DDDDDDDDEE000000EE000000EEEEEEEE0000000000FF
+%00FF0000FFFFFF0000FF00FFFFFF00FFFFFF
+%524C45534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C534C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C524C524C524C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C284C284C4C4C284C284C28
+%4C284C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C28524C4C
+%28524C4C28524C4C28524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C524C524C524C524C524C524C524C524C524C524C524C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C524C524C524C524C524C524C524C524C524C524C524C524C524C52
+%4C524C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C534C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C7D7D4C28767D7E7D7D4C4C537D524C
+%4C534C524C534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C285282AF7E7D7CFFFF
+%FF7C7D7EA8A67C284C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C774C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C52FD044C76A6A8
+%FFA8A6A8FFFFA783FFA9A77B524C4C4C524C4C4C524C4C4C524C4C4C524C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C524C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C4B7C7BA87EA87CFFA8FF7CA77EA87C7B514C284C284C284C284C
+%284C284C284C284C524C534C524C534C524C534C524C534C524C534C524C
+%534C524C534C524C534C524C7D4C524C534C524C534C524C534C524C534C
+%524C534C524C534C524C534C524C534C524C534C524C534C524C534C524C
+%534C524C534C524C534C524C527BA6A77E52A6525352A77C77A8A67B764C
+%524C534C524C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C
+%284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C7753284C284C4C4C284C
+%4C4C284C4C4C284C284C284C284C284C4C4C284C4C4C284C4C4C284C4C4C
+%284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28527BA77D4C7B522752
+%7C5253AE7B52284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C7E4C
+%524C4C4C524C4C4C524C4C4C524C4C4C7752774C534C4C4C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C28
+%7682A84C767C7C7B7C4CA8A67C4C4C4C524C4C4C524C4C4C524C4C4C524C
+%4C4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C28527D52284C284C284C284C284C284C28535277537D53775377
+%524C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C284C284C2876A77D27524C4C2753A87C284C284C284C284C284C
+%284C284C284C284C284C534C524C534C524C534C524C534C524C534C524C
+%534C524C534C524C534C524C534CA84C524C524C534C524C534C4C4C7D77
+%7752534C534C77537D77774C524C534C524C534C524C534C524C534C524C
+%534C524C534C524C534C524C534C524C534C7D77FD054C53A14C534C524C
+%534C524C534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C
+%4C4C284C4C4C284C4C4C284C4C4C284C4C4C28527D53284C4C4C284C4C4C
+%284C4C775253284C284C4C4C284C4C537777284C284C4C4C284C4C4C284C
+%4C4C284C4C4C284C4C4C284C284C284C4C4C284C4C4C284C284C284C4C4C
+%284C284C284C4C4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4CA8524C4C
+%524C4C4C524C4C4C7D534C4C524C4C4C524C4C4C524C5377774C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C
+%524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C7E53284C284C284C284C2877524C284C284C284C284C284C284C
+%28525352284C284C284C284C284C5158284C284C284C284C284C6F4C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C284C284C524C534C524C534C524C534C524C534C524C534C524C
+%534C524C534C4C4C534C524CA84C4C4C534C524C534C7777534C524C534C
+%524C534C524C534C524C7777524C534C524C534C524C7C7C4C4C534C524C
+%534C524CA14C524C534C524C534C524C53FD074C534C524C534C524C534C
+%524C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C4C
+%284C4C4C284C4C4C28534C4C284C284C7E53284C284C4C4C284C5353284C
+%4C4C284C4C4C284C4C4C284C4C4C28774C4C284C4C4C284C28577CA85152
+%284C4C4C284C4B9AA1704B4C284C4C4C284C4C4C284C4C53537D4C4C284C
+%4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C777D4C4C4C524CA84C524C4C4C
+%524C4C4C7D4C4C4C524C4C4C524C4C4C524C4C4C524C4C52774C4C4C524C
+%524C5283FFFFAE52524C534C524C9BFFFFCA764C4C4C524C4C4C524C537D
+%AFA9AFA8AF7E7728524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C28524C4C284C
+%284C7D52284C284C284C28534C4C284C284C284C284C284C284C284C284C
+%284C524C284C284C285858CFAECFA8835852284C6F9AA1FFA8FF9A9A4B4C
+%284C284C277784AFA8A984A8A8AF847D274C284C284C284C284C284C284C
+%284C284C284C534C524C534C524C534C524C534C524C534C524C534C524C
+%534C524C534C524C534C774C534C524C534C4C52774C524C534C524C534C
+%524C534C524C534C524C774C524C534C524C527CFFFFAD52524C534C524C
+%9ACAFFA1704C524C534C524C77A8FFA8A1759999A1A8FFA87D4C524C534C
+%524C534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C
+%284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C2853FD04
+%4C284C4C4C284C4C4C284C4C4C28FD044C524C4C284C4C4C28527C832D52
+%4C4C284C284C4B76A1704B4C4C4C284C4C4C7DAFA8766E6F6F996E9AA8AF
+%7E53284C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C
+%5252534C524C4C4C524C4C4C524C4C4C524C4C4C524C774C524C4C4C524C
+%4C287C7C4C4C524C4C4C524C4C4C9A4C524C52FD044C53AFA8A06F754B76
+%6F996E9AA8AF53FD044C524C4C4C524C4C4C524C4C4C524C284C284C284C
+%284C284C284C284C284C284C284C284C284C284C27774C4C284C284C284C
+%284C284C284C28534C4C284C284C284C284C284C284C284C284C284C4C4C
+%284C284C284C284C2752284C284C284C284C284C4B4C284C284C284C277D
+%A8A86F994B28274C4B6F6EA8A97E284C284C284C284C284C284C284C284C
+%284C524C534C524C534C524C534C524C534C524C534C524C534C524C77A8
+%A24C534C524C534C524C534C524C534C774C534C524C534C524C534C524C
+%534C524C534C774C534C524C534C524C534C524C534C524C534C524C534C
+%524C534C524C537DFFA199995228524C526F6FA1FF7E534C524C534C524C
+%534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C
+%4C4C28FD044CA2534C284C4C4C284C4C4C284C4C4C28524C4C284C4C4C28
+%4C4C4C284C4C4C284C4C4C28534C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C287EA9A16E752728274C27996EA1AF8428
+%4C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C524C4C4C524C4C4C534C4C4C524C4C4C524C4C4C524C4C
+%4C774C4C4C524C4C4C524C4C4C524C4C4C524C4C4C534C4C4C524C4C4C52
+%4C7652524C4C4C524C4C4C534C704C534C4C4C524C4C7DFFA86F6F76284C
+%27769999A1FF7E4C4C524C4C4C524C4C4C524C4C4C524C4C4C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C2852284C284C284C284C284C284C284C284C4C5228
+%4C284C284C284C284C7DA7274C284C284C284C2870934C284C284C284C28
+%53A8A9756F6F754B4B6E9375A8A87D284C284C284C284C284C284C284C28
+%4C284C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C534C534C524C534C524C534C8383524C524C534C524C5370BC
+%4C534C524C534C4C4CA8A9A8759999996F6F6FA8A8A94C4C4C534C524C53
+%4C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C284C28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C7C82274C4C
+%4C284C4C4C28769A4C284C4C4C284C4C4C52AFA9A8769A6F7576A8A9AF53
+%4C4C4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C4C4C524C4C4C534C4C4C524C4C4C524C4C4C524C4C4C52
+%4C4C4C77534C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C8282524C524C4C4C524C4C76CA4C4C4C524C4C4C524C4C53AFAFFFA8A8
+%A8FFA8AF7D4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C274C4B524B52284C28
+%4C284C284C284C284C284C76A1284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C5158284C284C284C284C28769A4C284C284C284C28
+%4C284C5284A8AF84AFA884524C284C284C284C284C284C284C284C284C28
+%4C284C524C534C524C534C524C534C524C534C524C534C524C524C524B76
+%5176517651524C534C524C534C524C534C7D7DA176A877534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C52
+%4C524C534C524C534C524C4C4C77537E77774C4C4C524C534C524C534C52
+%4C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C4C28
+%4C28524B7651754B7651754B765152284C4C4C284C4C4C285377A8527684
+%A1FD044C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C
+%4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C284C284C284C284C4C4C
+%284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C524C4C4C
+%524C4C4C524C4C4C5275765176517651767676517675524C534C4C4C524C
+%4C4C7D84A19AA8774C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C
+%524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C284C284C
+%284C284C284C284C284C284C284C284C4B764B7651767576517675764B76
+%5151274C284C284C284C284C5277284C284C284C284C284C284C284C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C534C524C534C524C534C524C534C524C534C524B765176767C76
+%767576767C767C757651764C534C534C524C534C4C28534C524C534C524C
+%534C524C534C524C534C524C534C524C534C524C534C524C534C524C534C
+%524C534C524C534C524C534C524C534C524C534C524C534C524C534C524C
+%534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C284C
+%4B754B76757675767576517675767576517551764C4C284C4C4C284C4C4C
+%284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C
+%4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C
+%284C4C4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C524C
+%4C4C524C4C4C767576757C7676757C7676757C7676757C757651524C4C4C
+%524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C
+%4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C
+%524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C284C284C
+%284C284C284C284C284C284C284C4B765176517675767576757675767576
+%75764B75274C284C284C284C284C284C214C284C284C284C284C284C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C284C284C284C284C284C284C284C284C284C284C284C284C284C
+%284C284C524C534C524C534C524C534C524C534C524C767576757C767C76
+%7C767C757C767C757C767651764C524C534C524C534C524C7E7D774C534C
+%524C534C524C534C524C53537D52534C524C534C524C534C524C53527D77
+%774C524C534C524C534C524C534C5352764C524C534C524C534C524C534C
+%524C534C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C4C
+%4B765176757675767576757675767576757651754B4C4C4C284C4C4C284C
+%287DA8CF7E4C284C4C4C284C4C4C28FD044CA8A1A2284C4C4C284C4C4C28
+%4C4C4C28A2A8CA774C4C4C284C4C4C284C4C4C284C52A17C7C284C284C4C
+%4C284C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C524C4C
+%4C524C4C4C524C525176517651765176757C7676757C7676757675764C53
+%4C4C4C52FD044C7DA076A84C4C4C524C4C4C524C4C4C524C7D7693A1534C
+%524C4C4C524C4C4C524C4C7EA193A228524C4C4C524C4C4C524C4C287D9A
+%A176524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C284C284C
+%284C284C284C284C284C284C284C2851517651754B764B75517675767576
+%75764B764B4C284C284C284C284C277D6F9AA853284C284C284C284C284C
+%284C779A68A1524C284C284C284C284C284C4CA876937D4C284C284C284C
+%284C284C284C779AA0A0274C284C284C284C284C284C284C284C284C284C
+%284C284C534C524C534C524C534C524C534C524C534C534C7651764B7651
+%7651765176767C7676517675764C534C524C534C524C52A29A6FFF534C4C
+%534C524C534C524C52287E6F93A17D28534C524C534C534C534C53A89A6F
+%A84C4C4C524C534C524C534C4C28A2939AA1774C524C534C524C534C524C
+%534C524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C284C
+%4C4C284C284C284C4B754B7651765176517551764B4C284C4C4C4B4C284C
+%59A86F93A884524C28FD054C284C287E849368A18453284C284C284C4B4C
+%28537DA86F93A17EFD044C284C4C4C284C4C777D9A68A18477284C284C4C
+%4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C524B524C524C524B7651765176517651524B524C4C4C534C6F
+%4B7784FFA8764BA8A9AF59766F704C704B5353A8A9A84B4C4CAFA9845252
+%6F4C4B6F4C7D84FFA8764BA8AFA953766F4C28704B524CA1A1A84B7076AF
+%A87D4C5276524C4C4C524C4C4C524C4C4C524C4C4C524C284C284C284C28
+%4C284C284C284C284C284C284C4B754B764B4C284C4B514B7651514B4C28
+%4C284C284C284C6FA884AFA87D274C7DAFA8AF7E6F4B4C4B9A7EAFA8A97D
+%4C274C7EAFA8A87D6F4B4C68A184AFA8A8272777AFA8AF7E76274C45A17E
+%A1A1A8774B277684AFA1A07C76274C284C284C284C284C284C284C284C28
+%4C524C534C524C534C524C534C524C534C524C534C76757C76764B534C53
+%4C7651524C534C524C534C524C534C76A8FFA9AFA1946FA8A9FFA9A96F4C
+%4C7076AFA9FFA9A26F936FAFAFAFA9AF6F4C4C6FA1AFA9FFA89A6FA8AFAF
+%A9AF704C4C70A1AFA9FFAFA16F946FA8A9AFA8A76F524C524C534C524C53
+%4C524C534C524C534C4C4C284C4C4C284C4C4C284C4C4C284C4C4C285251
+%7675767551284C4C4C284C284C284C4C4C284C4C4C284C4BA8A7C9A8A86F
+%93A1AEA7C9846F4B4C4B76A8C9A7A87D936F7684AEA7A78470284C45A8A7
+%A7A7A86F6FA1AFA7A78476284C45A1A8A7A7AE766F6F9A84A8A6AD846F28
+%4C4C4C284C4C4C284C4C4C284C4C4C284C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4B76767C7576514C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C7077A5C0CDA2936FA8A5C69F7D6FFD044C7D9EC6A5A26F9370A8A4C69F
+%7D4B524C6F77A6C6C7A89A6FA8A6C69E7D4B524C4C4CA19EC7A0A175936F
+%A7C6C67B7D4B4C4C524C4C4C524C4C4C524C4C4C524C4C4C284C284C284C
+%284C284C284C284C284C284C28514B7675754B4C284C284C284C284C284C
+%284C284C284C284C274C4C5151A86F93A17C4B52274C284C284C284C4B76
+%7D93689A7D514B4C284C284C4B4C4B5275A86F93A17C4B52274C284C284C
+%28524C5276A16F9A7D754B4C274C284C284C284C284C284C284C284C284C
+%284C534C524C534C524C534C524C534C524C534C524C5251764B524C524C
+%534C524C534C524C534C524C534C524C534C4C284D7DA19AFF4C4D4C534C
+%524C534C524C53287D7693A15328534C524C534C534C534C4DA8A19AA828
+%534C524C534C524C534C4D2876A09A7D534C4D4C534C524C534C524C534C
+%524C534C524C534C524C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C
+%284C4B4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C284C4C4C2852
+%4C52FD044C284C4C4C284C4C4C284C4C524B53284C284C4C4C284C4C4C28
+%4C28524C524C4C284C4C4C284C4C4C284C4C4C284C4C52284C4C4C284C4C
+%4C284C4C4C284C4C4C284C4C4C28FD054C524C4C4C524C4C4C524C4C4C52
+%4C4C4C524C4C4C534C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C
+%4C524C524C524C4C4C524C4C4C524C4C4C524C4C4C524C524C524C4C4C52
+%4C4C4C524C4C4C534C4C28524C4C4C524C4C4C524C4C4C524C4C4C534C4C
+%4C524C4C4C524C4C4C524C4C4C524C4C4C524C4C4C524C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C524C534C524C534C524C534C524C534C524C534C52
+%4C534C524C534C524C534C524C534C524C534C524C534C524C534C524C53
+%4C524C534C524C534C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C284C284C284C284C284C284C28
+%4C284C284C284C284C284C284C284C284C77537752775377527753775277
+%537752775377527753775277537752775377527753775277537752775377
+%527753775277537752775377527753775277537752775377527753775277
+%537752775377527753775277537752775377527753775277537752775377
+%52775377527753775277537752775377527753775277537752FD7FFFFF
+%%EndData
+
+endstream
endobj
39 0 obj
<</Length 56494>>stream
+%AI12_CompressedDatax��}�v�����=k���LD0����
���3�-`f���>��ne�D�ߙs�f� ���+uUuW���Z�НI�ID	����E�ۜO��������\@��AO���}�y�J�w�Y2�y�T�����@�;w=� �W�χ]�;�6�ݒМ���Y��*@��9�2q"���D���s���z��4�6g����T"�@7��b�鏿���9O$���S�'MP*�F����ݙ�P2���g�H�'���0;i/F��*L��٬8N�Y�S��{.�_��it���_f�l��<����]��9�dp���8��,����b��*���'�q�w3�
*F������nպ�9�`b,ޖmS�.�Ϸݯ>�	`�5(�\C@�eP��R�rh��:�?�D��������_9��dܕ�J��@� <�!ݾ]��ݸ?�����bO/'��襾��������R�zS��΁h��b��
+ I���_]D���z��'�����>%P}�	D2�!)"w�-�!�mBU�
+�1�T��B��?��mK���~G%Q\sь������H��|�˭�(^jHMD/k&7�'#��fm ��?�|IO��T��J��7ށPU�?F��q%>˼W�xX&����s��G@�lh����OAH�O���r9
:��v?���
+Ļ����p2�T��i�;���0uSyu�7~��}���4��j��=W��������@��<r��N����
?�
+,垺�l��oU�F�w[ߜ�@�tǝ��`�
�M7����&��l�T���|w�[����z,6SX�z��d2Tq+��|#��w�1@��f��?��bs8����Y�&�@��6ƺD�#���$82q�>�����-S��9o�@c�����:�""�g܁���yW��d4E֋��kN�mT�הT�M���"��?�f�"����a�
;�n<n�@9}I����{0N���������?�/N�D_I�RW��Y�h|1D�`	���P8��p%�I�Rq*��+����q&^�sp�$T
+��_�L�)�(2Mf�,I�ŐE���#y�O�d�%)��؃+��&���`E���ࠁ�$T�L$�_*I��Nf�Y��$�,&�$��|�HA�,�
+�R)
+.0R�T6E�Ť�)6ťx�a
+�P��P���\Y����Kq��@gIԼt2���JC��t:�Φi��t.6ͥ�4�!2q��t&�̤P��4����3L�����³�,�Y�|6���	IO*�H"�iD��%� rd��,&"B�!_D<�%��F6B3� XDmZB*F) �Ĩ$
+��S$�;�.��&"��Ĉ�0�r1)���4FF�:t:�ʦ
7t�
4�Y.�g�t(F�:K3t��h�!�I0I&Ť��eh�ȰW$��"	�*R@�L�.2�b�-�,����%�$�b)��4˰E�e9���\@
�⠙�9��yq(�D�<�CU<<@;��*��_\,c��,����js&x��q�����a
�A�
x�����w��F�H�8��j�0�+B�i���i��JB��E�=K�"T]G �.f
!���
+�*&�h
��6���"��•
��AR��$ 8���	�2�&i ���d�Di ��
�!q��Bt
��-B��hA:DOb�'�	�Y"�� ,�����,;�N
+I	����
{!�c�ՠZ(��(,��40(�#��cR�%�q��JWQ��񕕮�t�������F�����EJW\����t���.�~�"G�\!^i颤+%]I|%�����t�	��2X��(]�t�w�WF���EI���x%�����t�%�W�T�Ì܉yUC'Y�hI�D9J�2$IPQ�QvR�$3�"/�hqZ�R�V�,!X:��d`�`��(�e
�_���$��$���S8?+q������3"���|��ys8�pwF�l�k��iؐ�A�� PP�(�$�i$(hh#�(�*��àXP0*&A��0R����bN��π��`H�XK @Cs@�"4�*�*��tJz��
D4"���P@j�'��%�%�)�$ҙdl��z���k�ʀwM(�t�G�:���V5�dCʥq�!��+�kn`�譿H�_R1�TCL�W��5����.l�(�"�@���E+f���`��52؆(J�,��tI:K�l�'���ҕ/0S҅�t����Ɩ�xa-���7l>����/6+�=�HWQ�d��.���H	�;��Hl�ʪF��q��XE����J�>ep�����]0r
NQ4r1�DW���QZLcqe2`��͕MA���%�I��B��l���y*[]Ed�b���Z�LN��D����.��"�ݕ�vW�
�ŖW[^)P���ň�F���\��8d鬯4'Y���������a�%ϋ�ȓ:z�4ӻ1)E:dW���Ȋ|��ʀ|I�sF�HF��9��qšQ�F���3CH��5V��3g4��hi'[;�wa$�'��"�,��]�����/J�G.�����-S?�����300a��E{[��Hsdk#���Fv�he�a�dD���D��!6te��q�'�D�-����h10�C��2jh���2�&c�4j@���Cg"�5�]��D���;cY1�M
f�Z������le6+�3�H�ϊ�l<[��؀�Ҡ��&F�t�hK34,�5��k*�{��0&$`l���^���ҹ8q2D���LI}!�L����9�<](,;/��g;��k����3��9C�濸����
�!��񿦿I��&�����
ʔ,�X4S�N��$3E����I�4��RNdq���=<rr�yY��$&XH��*��+,b&0@�ZD�5�`B��"�h�F���D���n�:L�(�`0����i4���)}
���U��8
+�L)$.�8ԕY"�6*s�&�s�q�S4ʔ�(�iٳ�z5ȧ����2)�Q�Ӣn.O�_���G%T�E�r�_E멀(Ks�$�T��*�)$�T(��*M�(ފ�R�D
+���4
+6H��(i����'��
+�g�L%y��ۀ�Cc��A�D�!��\�H��$p�y�)�F�:<���
� #������/��MPlK�1p
�6�\e��8��N���L)��������QE�3z��Ҳ�R��2�&��F�T�w�tBM���bʃjio��	��i4;��-Ak��e@"���?�T�
-y��R~%�2K�$��)e�N�;`�j�R��EEr�M�Q4Ijh�vESDQ-Mŋ�"@Y��(���R9!˶L]��Y��R�iO�PR�B�t��FJ˴��-�[�zDs,�2�U�s��*G��Z�?"ba����%�:j,bdZ�c�y�\�Vf�ՑD��lj>�R�S�r�R���3�Ei69���Y�䁇8�E�8&p
+	��.�G�	tO��+,�I<Ò�V))f�n�uY�]`�e��w��A(~�V</���+�˥�������^��.��/��� H���b@<��iiЂ)��=�/Oڎ�0��I"���DS#U����5UAN�#�
+U��+H�H�%GTZ�m��5a\��>Wn88f&��Ug�gh5��װ��*��_c�˓'��~6��k��w��2��h:�*�ϵ1��Dwn�ߝ��|L
+ ��_R�PI�G���B��������\z�_	Og�"
�c�*꣝?<1h)�����t�;��;�w�nT[��mLb�x��9cvC�
�3jk���*�f��b�5y"N��5Ө��#߇ʌw� H��s0�漉X9&�@|�~��=M�t����j��Z<>��
�P Ҝυ~k1�΂�'�0-���j�ES���;Bw,�"=�s@��}�����q�`<{��)̎@8ka��/�gs�P
+�3��(#��Z3����G�x2���p�t;��$
�#:���ܰ��N�Ժ�+���&Sl���=Rܡ��l
��$�
��匰�R���^-����G�l/f�����~+��fMdo�1��=��o�
4�֞�,Q�}����M>���9j<�!<��nsh��^���s%~J���F9�N}��ߙ�\uM*��虘��Է_�����'q�
�>��N��C�چ�L��Ӛ�����~���yW�[~�cD`�X�,�vo#�ϰ"`p�G�cԝ7;`^m�1ٍ�בb$�xNS:l*L	J�i�#���,��l`��t27�k�2˦e��L�Qy��n�'CAm}���9�w��Z��x�#w�3�G=Y�=_b�]��l�6	��
xc�gڜvϬ?Zq��.�HS��&M��i�]>����l���A���L�
+�f,k�к��_BWa"�‚x�R�Dʺh\�Dz�68Vۀ��Q��!>q��������U�;�
+v=���s�}�l����/��R�PX	��B<���mAQ�LN	��
+���{��!�ݗދ�d�L�~l�/Qq��#1���Tѽ�|���#�����ߍ�m�M�M�FKۧK��=��J<��Dח�YO�̻p�+	B���b>�qxI��
}^m
+
+�z�v�*L>��n���H-]�*ˣ\~�ޔX��ܨ����U
+X��M
��0i�
/���PF��_<��F��5{���n�o����=W��Ma4����7���δ�u�[���U��ϧ�"���q�3�pYt6&ŰЖ�4���y�ڼ)D�N��i�0+E����xZ�as�6e�;SY�'v�)��9�����RP��oP)_@Q]�D�x��h�������[G�|{"t���������eU���*��AX�!v1i�
#�
+-��s�^Kh����N%�	��RD9QN�X�5:�:o��4����f�8�bu���� ���
+�0F^ѕ�6��3���Z[
[����:]�K,�0}9���\�L��F����D�7O��i2������1�A�}OZ�)�`
}�T�n��f�����3-'t�;�.j��P�dʬ�<_��U�%��	�I6�xy�B��x�]b\7�n�`Ի.�Ik,��v6F;b���
+�0�ޓ^��n^�vF�x8v߮i�}�bd_}Ō�ө ��i*$5@6lA
IÊ��6���Z�E��R}�IZtƄ����Թ�bQAߦ�ba1*!��TS����a�x{Z�j�:5��mD�u)g̉�M>?g]�r=c�%��b؉s�#���5��RhIA�:qIl��)؜���Qs�^��	����E2�P�=̑�o�!TTeZh�P��B':��$-F�J~� ܛ�#���𘦫̈́-0௨=+J��L��i,6k7�]�6ǂ:�t֞ۿlԕX�=��25����
{X�6lN]�C*hׁ��h��4��ZF�fh�;N��E=�7/���n�rc�d�T��0 �̠��t�a[�L�� ���S9A�T�.
+����̎�j7@C:�A��sm��
+kG"ʲ��)f���(��k[b&Y��y�3tЇb���9�*CTnn�0aF�t�Ϯ�MEZ}d$�}w��(:a_��B�,��ء�a���<��&C�Y�	Vz�[�Tw�|�1�OŇi}�bi����iT�Hfp�� ,��RE���Z�LMhƌ�jA10�P�@{�(p�Ի�%'Ӷ���%fv��%:��"���Lp�f.�\�s1n��XH�
(|�0~����2�a��b�>F{���w�Z���my��L;��@�����I:x{#�����	
+�����1�IŵG�l-5��d�st�E�LR�F
+��B��ʛ*O]��Y������K��7�~�6v�R�����a�+|v�K��K(�#�el���C4�U
oڀH)�XW��5>6���n��s��Κ6I�5��8(�9vSuFR}�׊k�PU�n�?3(My�A���x;tq��v�B|�������-<�<G��%ƿV&���s�F���g����D��VY��o��0�\���hS�s{�R.�/`tƢeٺ�]"鳑9�,�3���N�u�o�]iF+�����&��ժ	j�C%�j_6��ʊ��o�_Z�=нt�
(_���̤S<��cϬ�'b��X{��
��ݖ6�fye~<깛�*�S_ٯ���b왌=0��'�X�W�?Fd
���)������U��z�8�����м}s:��I�l��杏YYQ����H��=�O|�Y�(
)j/`H�`�wgm�?u0���u
�NZۊ�hJ��/���A�4eFގ�q��&#����0�p��,_d�S�Wo��6�7UA��Z�����s�E��Yo���i���Fml�Ϭ0�������?���@��<�3D˙d�/:�D�&�t[���s���&�%8�A;
:�P7v�4�E<�7��{�_@Ab��qp.L^�r=�"�,�!4M<�	u|�J��m�t���;В�g��Ԓ\����a���!�ǩbs*.�+�i���U]NƓv����,�%I4
0��’,h��%�Бv�Zjc}��Ե�a;d�P��m���ָ��1��4�����Rt��%H҂fo�#���D��QN�j�i���k7���d�$:�L�ΚB��8տ�"J�/��Q���5��
+>ѫ+��L�5�L�"�l���+��ر���yx�h��F��A;�z�	�3��)*��rУ���{	G�I9(A
����X�V�H�f��d=.
+� /�?|r��}���D�I�s�
��GC�ӗ=t�V<?Ϥ�.w������s(�p�?j>�ˉ��SJ�^�k�-��p�_�7�3uw�Q{��]��2y��x�_�E;�s�ef?�L�Č�f�„�p�=,���YaV!c�pt��R�9�uvsQ�'��b����F���%X�L��~.�T��߯L�)�G��`��P{�M����
���D�eZ�/��L��<���b����\��,:
+���(u>
��
C����f���c��͋��S\������)�O�bE��Y���m�~��ι��d�}t-�7���,L�;js��M��K�����A��
+�
+E�_�.O��{��v�9@��!��'���fZ��>r��r���#B�eA_�~P���r�Iݿ�q�?
+_�ң��~:�}&h�}
rq��6[�����n�!Atr�b�	D�_"�.3LWGb���y~�gSh	����;I'o��}�9G��^q�'�}��	u����L=P7c��f�"��w.����%k�xo�I@`(��
ׂ���{��?B'|^���*b�b��k#�9p�#:9��${�u,U�p�?�|_�aj*-�����J1e�	�j��[T����R^�}����4I=Q�m��~���X�k6�>�j��d���w�u������O��5�Nyd������'��Ľ�C�L�����b���}������apx�N�v&*�L�gT��/+<�TD�ȸE��|�	��7�.�P�f�>ߥ���b�s�j0!�Q��U�@���hS
�E~�OY�)$0�?�<<r1�웑^z�j�+Cd���l��z�EU��D���o�����Di"_"�����=F��m����b��p��(��+�Ac��M�� F-�t��s{��W�����w�t��|0ҡz6��U�[�"�V֌,�A�R0t��es�e���������\�����H�,%/��g^���Ϧ���I�m;�v
����96�f���=�=���}Cec�C�{�1������}PG%�T0�“+�?�����Ϟ^{=`��EOR�A��FA{'=Q%r��g�F��z�/|?"}������n�=ӗ;�o�����0���M���L�A`���x@��n�Z��آQ�q����?��cx�:0OA����������w{/���g��Q.JO��G!V�B��{�L�i�N����F:
�
+B;w �L+��F���8N�+�=�<.�����CT�Z�Vng���	�k���_~��mJoV_E��o��Vŗ��ebEbmSʝ�·oV,"�J`��Rڊ0�k�C�|���J�ۄZ�k�F`0bOq��YA�&ޓj���`��F,)�6B��K�	���������:��N���b��dD�o4HQ�俒ky�U�"0zj��wUb(��!�%_�T���*F�r�O�i0� �ˍ����>���*�����70m,�Æ7���~����/��1×�]�#�^�¦x��鵄CiƎ�K@�}s4�*v��D�'B}<�F%���"�P�by@���H��^Cr�eU�[�
*�*��c�Q윆��/���U\�1Y��H�2���k����W���&<����1_�w��|���#K�a����?.9�{E��m�2��=�
+{w_���{�k~ıMcc��UkwGk������5�ǃ��~E���MX=�����#�
+��@��[�>������ޥo��u��&��q;,��z0!�Z䮈�{>��O�Oc��gpT�\;\�1T��h\�8��b��ܙjra��Ȫ�����̵ƻ�Z�"8;�'��ٶT�c^�Lb��/4j2���O=m⼸�\�
�����s��A�Q#�s�c�����F�3�w��lz,3��UQ�V��x`[���^�
+C�
B��������96��r)�6A��U��BU���w��b9y	��Y�~xQ���*�� �"��-��9D��Pԡ"%fH}=c�����rS��li��9�ɣ�G����n+�
%���^X�0y��lJtmX��_?����5Y��f%w�~�|
��
�i�W�xs���w�^���(���2�J�3�J�
ò<���'r�ѐ@�*�<i����KT�%Ϳ����x�ē�ώ2"�}��L�}Qfn��*l����.���U������
�,ZU�b�f�]�ZO�m�0
+g�A��%s���qz��"�-�k*��2gLr����̫����=�D���O�O��.��3�0N��z(��pu���Ao�5Qȷ�ƅ���A���a4�~cv���P�Y�-��-�;�*���͝�}��D�q����cMK���8�,�g}
+�"�`Tp?EC�.�
�zo�0��b�����!.��g�WH�9]i�;"-�+W�3ʆe�;J�ų=qp�L�'Q1` F��S���AWB�Y5���q��6ƶ�a^�e^����gh����ü�!��p�`ʷ�Ȟ�1�kŞ�z���g��KC��2���Ӛ~<���	�˽]���b9B��3ȵC��do@>dD�@���+�O���Q��I�?F���}[�Hn�K�if�ZF`�c����!�@nq����Y�3�_��;h���2f���r �&���y�?���}�j=�IVog\��Ԏw�^�w�p���@�//5���SȤ�ш��K�?��Rʐ�㺗ߟ�����l�0ͳ��C���ʥB��u��bW��0}�>�69�8�:�s��S�d*N�R�ki4?��rߊ�Y⥽�-�=Ѽ9�Kū����A����&��-P��1���(`�
m��OL�A�P�1�s�g�)�@����e?k�bח�N^���#a� ޻������X���q��3՚�R���.��.��������qO���
��o�_[�AOzׇiz�Q�(��Em>4��\�*'�TŒK������-�'��ϛ�E�!��l�/ү_|��u{�;����؀6/B~���M>��5�
���[�=t�
+����C�&`82x���T����h��kɗ����I�t�ƛ����B�hMn�B�7�#�����BS�	U^���N����h,w��S���(M�(r�C�h*��x�#��u�>dtw�Z��]/س�ٌ
�x.���
G6~���Ij�inva8<a�(����c?�����H#��׏�>����9�9�&|��q�+�&����iB#ٿAC�oEӋ�=~�	25豥��.�YJ�ܶ�fJ�G|����-�n�
9���#*�D��@0���X*}��q&
��預?��i�R���['�A$1?Q'wI�NE*7He�M��R��o<Y7�v��1�N�
t$4���N�.y�C�JO�π�~%cUG�*�+wJ��Z?�Y�K��%nO�A��c� O�`��k7�[8��ȅ�d�Q"7��!�~�M��q���AC��0]�aOC����D�p�T�m.���jc�gA��?_�i���ŵ��_k�KUR�z��9�=4�Cз��9�����`�4[7�`0\{�zO�+�\���h����^`w��stp��7��H&V�%�o.�	���G\���E�ʝ\�<V|����0
+�B~�������"Y�)^q�<��NfOYUQ"Չzu�	6�s����+��߇1
+&5,��8:S���Dz��#����hv����׷A-蓟6/��>mw��sAgZ�/�����M���	q���
+FE<9dc�7�9f�9(�������|�����w�٘ž1��.��H0R�t-\�|�u`0�r���;��Dw��H�Ƨq�I:����>�>-�{ϝ]���7�7�R��*���א��7����X��A�ڠ��0N��a�A�����Y�q�����{��L�ʋ�O����X�+�_)j7^�����Cܤ�>Ϸ%�Tt���d�$鴙�sTBDž�.�#@K^��Zg�G����Q#��N�]ϑ��*3���ǧ�1�fΨ�?���[k��.zh�;O�q��������7���E��w
z���)zNW�9£�f݆��{�k����>�����T��~�����
+���у.̉0��c֔��D�j�	�b|1�|�=����p��Й�9�z��V����/H2�8���6}]9C�_
�	Rצ�]+��G͇�7rqc��>�e'}���w�'�0)�A�]?K�����Ώ&\�
+���`���߄��nc߀-p����}O\���b�����o�/�����J��<�x_���R��1��Vnp̾�{vS*��?�A#�:7�^�aχ��@�7/{|��dm�O��:��>�QS\�ΥT5�������t����,�`O:At�������So����H(^ز��P(W��vt~}vK��ZЛ./َ�p��((@�� @x�����ޫ�UK��{��eA�Ba����k��AUwS_��{�e��'
m;C1��]�稕��dGɃԯ�c�n��2n5}H\0��U���{�i����8�9��p
+Z�(�R��;�%��[���B')v�<��8!:��y�=�}�L&�
�=����浳�nQN�������|\��4�s!�;����uZ����Bl�����q�Q-�N{�D�[^'�79���#��/����ҋ��~�߁	����B3A gMo�)P��J?'�@�@QPo�vz�d"�7���{#L#IĎ
�MrF�.W�ܩw
�Z\B/��ȕ?�K��e�}��k�%�Ͻ^���G-B���4X�C-I��d&�+M��.%�>{���ǖK�R=����&.2��I�{�v$�eJ��т���Z��h�(��K"����P;`���Sr��›���UVPS7��`�Cx���a��7z��r�E�6#�)�Y�!n�,�ݧfP
� �wf~�dj�]a��Z��3�O��-�R{���gCE������י3��]~�ۿ�_ޚB-�M.̠���/_$/��|'���2�\���Cb?5��k��]s�k���o m��.
1��!���P_���֭��{��3@�~��_I�]���}���P�ޠ0˅f�P���c�",�f��3�I#n
5���n�j�� �,qe���H��J�nG�T�}�-�R{���e�
+j�(�?������
�����O%��H� <�W��*�2�1TF��'.ґ8�z���;�E6=5�����i
��K:��8�h
+PY���5k��'W��nM�֎�	TyXÀ+�Z����!j��]s������S0`
+�ޏy۷�n�w#ic�%�2͛C�H�����
+�����w-�޿�v�VP����
+k���V��ݼ��v��zpn	�����P_2��lQ��
+����:�I�B}?��-�
+����j�14��M�����z���~�³xO�KP[��Ax�O�C��������q���������s/��
거4�M�%��Ӑ��Ȳ��?(f�s�^��/�]y�#r_�s����.%B=�WК�^O�Wj—+V�P}��l�T��W��Nd6.{
P�ɑ��1��MԀ��I��.�w��;�o�����$g��q�+��r�X����{�����Ԟ� Tܗ�~w��ʆ�������Ը��h�4]=ϽX>E�6���ò@��|�[>�Ƀ���Ӌ���T�fR�u�yd���n�uf�4svp����O?�?�e�݅�G�R��n�P�]�\[>�gC��i��<�b^�/l������[�g��{^��)H3)0�'���G����)`��(ex�E�~�L�<Z���jVO��/��OQܐ�lu-���ݸ�S�K��9���3�;>|S��
+��7�S��b4oxZ�(�VO{��S�NV�j�N�
+�����&|7�b�Ht��EI�}������tް�A�}�j��7R�6D>���
��E��j/�߼���y��JT�%��Ո48���-p���c?S��y˪Ȉ]f�~p6���y�^��
+����3ѩn	�l����׍F{k�R{{w��9�d��*I�q�-��.�^�,��!�m������0T#�\15Mw;{*��^�{�@M0|��)}-
uP�
U�d�2��IK�ص��
+'�o��T���j�]ɳ�5T�ZXBE~EOc軛�F��^�-�b#�UO	0�S�:�v�2|�M"F����)���uZ��(����=^;V��I�'�
z�B��pv
+U!���n)�р_���mZ�G�Za��d�ԥ�RO�'�`~��:/�5bw�-=��Ě�Щ)��ۗ>—	6�ejsD�9����:HE2�^��W>n�Ƹ>��Y����G�4$E9��wU�s�|�š� �#�����=�`4�(����b��Mrj�Y��Y��6�/����a�J���C(c�|]0�a�C<���/��&=�{�{��ړhX�u����C��:�@d-0��l�垆�K�a�	_6���o��X8�=��(�:�̥�F���Ϛ�7�̥'�X٬�}�yʖ]�$�&�ŠHy)����8�J�k!L+�p/��J�u8<��9��8�a�x.�(̅�	}b�v}���R�[�'���v���f��a
�/qz_�tBw�r�Z~k�6d�/yXS�Dt����t*`�'�wɨl���a|��W3C���G�Z��Z�*<�7}�31��s%��wo:��G��8�d^[|��U��'Fn/��ɯ$�����}\(Z���{��]<�>�C���%�5�*�$uځ�
TU���2
=ԫD]m�7J�4
���K�,КYu�@t�w�%�̂,�!9ܭ#K��d���B��g<�F*֤Zl���0��).�\Bh9[Ө2j�NI)e��ˉ:۴i~Z�=�o�����M��3o�B>�X���Y���ႆ�������螆���P�ֲY����m�d���M?���Mi��ְwrV�撵��ޅm"M��V�����HK���d���4�L2MF[�t�&�Ǟ���0��m.�����'���[͝'���&l.�ј�.��=p뛨�1P@se�v�7�[�gf�aIn�Iu2s�Z`��\�Dgu��V�Z��yi-���u�b��+���Ԩ�խL!_g��&���s+@���赳lL5����;�"�&q-��f�m�
+TՉd�u�o?R�U�U�&.`�C�[����F��
a˼�f��>G3��`-v�^g%����(���u�%V�Đ�%�Vv+��G9Vv��ž�e1������,`�;Ǣ�yw]S�ec ���@�f��������ȅ��
��i
��2Z%q�R �Q�Ɣ��z� 0��vI�+u�8������QM376
+!ĸ���El!�r�К�E%��,�����fp�?�`�-���^}�6��}��
D$N��~3������Ɗ�J^Onr7A�e��a4�O�cO+ƁжK�q����A�apUpz��2�ik���E|E�TK�A���i\Z2su(4���.
+A��{n8�^�$�.B��kD�u�~�Y����L��6Jk���Ш�U�pɡ���.4��bʹ��X���\�9���Ƣ(֢���k�U*�\]���6�D�jê>����
}b� ��v+�E�JV����G�����>ShaY�5�����1L%��kz�
&�%�6�N��nK��"��v�3h7]\`e�v�V��a;�9(Tۆ�MT6���'p1�,��JZ*ZS���\���
ղ�Y\\��tR�	(�@1�e�3���������@�.�:2ͺNp������V�rq\��㠒�-�"H���R�娺[���{�u�Q���7YP�H���q+����3,���EV66�`�[�"����*Psl�n�D�sE�9�U��-�k�Z��0�G�N�ۑ���U����͝�LJ��_���au��:r�j�����W��֌�-���ֿX�~p\oX�YY�f��Q��V�Ǘ�8���Qߗ�����1>"Ud��k��Y�
+K�6d�b3�f
+��q� �Z�
9f%�֫�m���ֹ���D]I��4lPz�5�Y�gh�=[�@���G�b4bt��^̝��b�"���bͥq&q
hiٶU��5���^T��܏~�qX��%|G���Si���ݬ����Qw�[�6�oخ�հ�~*®Y.��\��*U$��Hy���:ĭd����ͻ7|��y#t�
e�q��|f;�|Ұf��'OHn��g�˷#�2�q:�T5�o�,uq�t>�\�)uq�t>3�j.��)�,��>�oGN]�4��>�O��(�/d��'Oo��gWg}o'��>��f�|J���|Kƭ�h�������W�['#�-�qѦ�1�V��]�o���^��
c� ���3��� �4��W�����C��W�q?�&)��ݽw�*����T��*/�=�hV�[-�s�CC��Dn�7+�f��Y�Y��.�6Y&�i�@9��R;������Ni\��חX8�k��M;��^��:�sa���b��;��˵�$w�`6�4��;�iՍrJ�spb�g+$���.1���N^
+g�%�]��6����O��qL�t�����l��gl�jFj�����^���q��� ���ǜfk��52SCD޽�^���W���IFSi��Gs4�\�.Wޯ�SزϿٓ]1�fe��p\�������ޞU�
+f9��4t^y�:"�)飞�4�ȍ5��G�P�ģڶ��*Rt�f<V��%�C�!igC�9&���a��������c#�_Duf��c��ܙ�K��e�Wd��"�霺g�c���qӓ��DL�|���[9?s��kn����3���eƕ�k�ᴏ�Lk%�j��^G*�.���1�l�2a�{��8;?O����zZ�Ĉ�=]rڟE��;37[J!�s���C�����7�X!d��5��W���W�}O�v���j� 댿��Ik���&$�]yo�+Fo��$�7�Y�*��6�H���f���Jm�V6�Y+Eotm�Go�r�A7���)�ћ
�����s��Q���J��Go��@y��IPA�n��
+�pkGo4
��8z���̢7�q�>W0�z�fi���6A�1;eʂg���&N�sBoHW���Zu7�t��.��#��ʹ�zȜ-r7~���J �\.ം�M>�&����e�Y�ǵB��b�c�S��zt�N!N�[eM�U��1�u�<��9rZ��_�(ƒ�i�����*���ȇfح=m13�~�`k�y泸������3.���󶝙�f�Ǫ�yVk���g�>mk�y;�MN-s�6��S��Kbr޶3�1Mrަw��<�xZff�)�^.�t�����Y����-$��!oK���d饙��f������KG-0$65
������]4�i������:�קm!��vm�q彳vCy~�
4�<���q����pi���ǁf����������?��(��
�js�Ǩ�,�1]I-Lu��5|J#�mi�c\�b���⊶���]/a;�9Vd�	c���������s3�fkb���r�e�駰�s�w��|6Zv"g�=Z�L��$��}w���6I���r[�2!��$��$YT��I�R���I�М�$ɢ��mtm
3�Ăb���뗂�����y4$�-�ߒ����`9�7K�[���oI�[/֩G�ߥ�iR�O������<C��9�u����x���}(���b\���q�^Zs����;�u�ܮ#CU��!]�Qm��`�,m����Ď�*�p9d��0(v�1P�umL�{����t�@N��p�J2:J/lP��x��u�4�o��{��g}�7�~R�
+��$�n��o��'N(�gT�\d��b��UBP[m*�O�C}����>#�2�m)�}�N����Z&ӧ���/�Ak
�T�p?�X&�%�viw��%T|��)�F޴J����Z�d5P�a��L�3�ݡ��
�h�
���x��rN���*ُ����/Viw�v�ٍ��&��%ԃ�n�c��pN�ͣ%�	��d
5s�'�ޭ����0iAt�&�oR^`n���Y�Ë�ԢɗWU&�U��4�^P&&�,��#jc�b�.����>���`T&�I.r���>���m����f9��u�q�u�v��3k��J�66�x����3�j�er�<�^;��d=�6���68YϮ�����A+n{��t׈w:cŸ��� 7���yLfKkW:��:@�vb��1���,�v�N쳶����gE��͖����J�m$�����o��g�է_���>��\/�v�ط� �Nb��,�v��&V���g���b�Ъ�}fQzq �jb�2�;%�Ӷ��g1����>��>u�]Ӭ��tm����
�����֥��}f44X6�H�3��Sƛ
js��,�-'��C�Ɖ}fY}�@���耴���fav�zֈ�ʉ}���;8P�zb���Շ�sˉ}f�-j[�}�.���l&V���g?�l-��:����>3t�(gHn-��̼\Z2r�1b�w���V�s��L3�3<w4���̾�q{-��ȏ�ɱ�)~�6�G���l�=�όK
ӫ��������$�%�:Z.�`��ޝ�tl�f�mZ)�t��Ƚ��z�l�v�����9��T��4��jK�	��^ٜ��3�˔�e��k�܆��8�����;�].#�k�g�l���[�s�m�vL�����Zs��p�����#���\#����?� �r�ߚ�:������㔅�n�iZ��]�ӻ���*p��Q���iŰ��rn͡s���B���D��>w+m�%�).�e��UN���;��TlW����<����H
!�>	G�F�9o��c�oLiB[�ڳ��aW+�	�Ru�I~���
+X�a
��VP���4�K��67�ȝ8���1
��úY�z.�"�i��?�f�Xm��k1O��1&0;g����g�⪴k�M�}k��l��x���ڶs�3�
+/"�^�m:�Yb�n��%�h�M�Uۇ˳�()�bɶ��n�j�;l'1F����慮���+��M
+)<�:�6��w��m�����!�b�|t������XѦ'|���qǰY�j�b�ܦP��,�L���m
+�c�~;����,l��[M��k��4Ky\��?SS]{��&���0�'_���]J��:|4�6�����6�G�s�v��(7�)k���D9����Z	r<�����(k�lߗ��c��m�/����ф,ퟗ�M�}����ԏ�1/����(���D�Q\�VL/������X�u~�Y"��j�"�
+�"�r��٤�<��tExIs
b�L��g᭒Ke2�돋{3�V�a�u.��M����*��ʥ�\��{ɿq#�n����M=�u|�����'��&m��,�G9�x�Sc��bl`��>��6���
+ee��s�V?��Nkl�0��:�B�ʻm�蝹�eӚ�~�Ś[�|�Iޭ�&��>�9���>�n���E�is��M�r�Ύ�� ^db�v�[����R�Ǔ�?JU1������]V�pDXs����
�No�Pu�y���FU�0M�+>7,2������#7@��d��V��Ԟ/}|��|��B�&��OD,�=�YB����_VG�
9r�'-#��"5P�9r3�@=a1aH�N��V�������i"���J�j
���O^�*T���m��|�5���ޓ��tN��iL	��;a�ro
���x��1�C��7)+tqxӳ�E�D��/�#�{�9�E���dΩ'���4���d�:�j�=m�����ru&�5T��v�c�\.�t<]��4��6�b�e�p˲M��YE��U��U3��ik/�R�����v�pwb],ܲ$��[�Uָ�%�Wm��ܦ�9���I��j[Z�ު!�����m2_��׈_m
j�v�K�,�e`��	�uv���Z��נ����C�L8g�֨�T�r�b{o������(�Q٬���v3M��m�Ů�7��nմ;����{w�q�D��U�8%qӍ�-���1�[s�j���sr���i��(&��M~�#̕
�5O��/)����Q��v�,7u
�s.c|Z��#0ɟ�	��`H�7R�v�ף��j	m��xlpR��l*%4��]i+c�4�M�dsv4�um2f��U�>����
e���t�����s��k�0;z�X�6���4UI�Ʀ6�(�!����w�dt�9)��.�/�-e1[��HCo���6�&��MJ��*�mJ��|DCHuՔD��S>���$��GD��AJ��|Dm�x��D���;.2�34��eڬ���6�Y?%q�M����آ�~m��W��m|X�ԛ��|X�.���+4���]��봭V(��:��ưn���}��(���
+w�����B]�
5��l��"��e�Yo�i���1�x��j�U<t��j;J��[�����C�k�6:�PC�m�jeu�}i�a_���%���j�mZ29l�b�\xh��DZj�����N;��@�p�=5uk�՟������0�f*	��{tm|�}���a�>�PO*�i�f�^�p�Z��q��u<\c]����oڟvh�>m����;n7�r:���^Zv��Dp-N3;�о����Zׂ�@�{w��"2�<�����$�nt��i������fj�����)�xhm�HÚò=�ڟv��M<�_�-�[8�����5�|����v,�WW<��*k3�r��假���9��́���)���C��WI%�=��~��diow�-�||�������xh2�ߛLH��F�v͇ƿ���C��kuY†*7u(W4խ<\9{�Mjq{��*�ײc�����Վ(\J���r����Cр��
kv����l<�7~L8m�-�2n��k��65�6:�ʁ�����s�;�j�ʆ�]�er�������%0�xhڡn���;�� ��
ԭ�v�4�5�L#P�xhڡ��:�p�X�ik&^����x(gH��v��E��-F�6[8���b���\��C�Az;*�4=�Pg��ޅ���CK_]��o��CH�Ɓ�r����R�ʺڏ����9��v���ƭ~�x��ݮ�,wf�P�����=�uD�~��!�R�R
+���?'�SmG��$X
�7D�K)(��y�3A g=�a��
=_���� -�BY]^���y������4�ze�d����;DFA?��g_W��ς��/�N�}|��wpy�s��4�өh�
`2��c����R�ܝvj��C�޽J�����:�d�w뷕An��tO���ϾPSWއ�S�/(Q������Eo�99y��0qq�)r<��{o4�V�_?��|�_ x���g�L���[A���Y��|��F�f��sU�K���c��h�"�+'�}DŽ������ú�,@�Ky=z�x���)�H�Lt���#�H.�f����!�C���v�h��ս����o,��2���v���Z��U���4y��]�q������}������dǸq�� FйjQ���Fi5�g��j��`��.��
1Z|-�>RW��n!6ϗ�Y���
��C!�������/��mAE�?r�����xh�F�����хW���G��]yxxGr��?�����0�R�â��jص"b�Z��>�r,����
s����3}�s�A��O��q���g
���|�����{F�����������޻��JP� ;o*B��6~ �JD��-�U^�iL�_ʃ��A��Ai
W��{w��\�
+��g_Ɏ�,�O���
+!|��@⠔&����-�y����BȽ	�EھtN�[������#�qT*���F���9�܍To��׋m�{�!��)�$�oP� ����#���>�e�ѯC����`+�ޚʙʜBQ����R���y\�Y}�UC�8V�dR�[z}�|ѵ���=u��W\�a��g�V(���8k�%d&�'5�gO�m�h�C��)��Ϙ��Py�W��,��&"�=$���	E|�3�(�U~�g���w�kW�Ah���^v��(���\��|/L��{so����1=�]J��S�]��������G��J���x�h���aP��q�8�ǭ�Ϧ�Hj/�X���|���!���S�k���������� ͞����p�/b.^i�����������EIF�cPz��o����Ӈf�_�rׁ6צ�y:�^��7�wi�Ȕ=�x�@�0�F���N��	C�OS�y;yS�M_�V`rO?�t��3g������P��h�K�v�m(O������-��@��Ca$
��A�7���,B_Wfe��hQg��'��R� ���.z��>R���st�c�]&^��	/@��'�~�������kE
+wF�\�j�J= �禐�D:�|��L?\qM���Y���^����S�t�3;�ȼ�^�)�=��d0��,%uk}�'|���Ӵ?w0!���sC�!ʦ�yyp��ƒ�2�hV����)���v��彳���ϰ�w���<��h��:��� �dr���Q$�@���=�)��?���A:���Q��ĕ#?�k~���������Ҡ׭���y�{6��#���Vx��򁞡q,f2����Kn��4R�#��
�u�0��1�]Ұ�(}V�Н�����T\)D�Ķ1 (�cV��u
�|��5?�|�2Fef�ܞb���!3
�3f���q[ȟ&����K����pc
+��,�*�[>|��ꌌ}<=ʅ���;Ö�B����A/�7���Y���Z>�����鳋���E}���t�zKg�*7���_TA��)��nn��YXE&J����+:<%
+`u^��i(U�ÓB������q�P�r�v��r:C+�L N�
^9��	h��]d���睼�3���en�y�^aຜ��i �O��½�p.�s�O�GD���MP��2[����c����>�>ۣ���t�M��ZU�G
��
+���{۠�G�
���*�p���Q�	�n������S��m/ɌrM����+i�
�^����l�<��=FD+�wG_r�s�j˥���,U���"]��k&u3G�1CSOA�ڏ~�͞��3Pzq�,N0�DPpq���3�@�Ƭ0A޼���v%����:G����h���S�7�O�n*���y�]D/U�x;�0�����Q�Ǿ������9�f�
P��K���^pͦ?
+b���Z��L�����gs�";S�|��걵��|�`�,���
�`��q�r$�A��2��
+/��=w"�p���5��ģx��Gie�w���]۟�-�)������?�����`V
k���������J�'���F�H6�?��sd��h�\�=Mx�
+�o�ܒ7Ez3�s���ڛ���?~a�i��{�����������qcz��Ɖ���X��I�L` ~.-"ߺ�7�}$�˚���<���E�c@�}u�j�&��7�ubO>1@�ubO>cA��@Pވ|�[s����ۑ�������#_�G��B���yKGƀ��m�9�
^=e��v��>o����7�3��Fb������
_>ּ�`��
2ao$y���od|��%P�Sԁ#�нG���J������{L��u���1	kf<�_�C$�}�|�]�|��HPZ~�!K7sYNJB��
)
+��f��.���3�UL�$��A��1s]-���J}��x;x=��`[7K��}:ۻ=>JЂ�ݤs�7���չ�n�r|6F��}P�=�A1P"���[�IU�q$3\i�W�"m�c6�(qd@�0� ��+�9�"���a��(���3lOCZjٓގ��T����V�j�� �=
i�wt7o�!-5��nMCZ�Gښ��윬:��!-�#�٢��Th�޲�l�M���5��,��
�T��g���*�L��pq�]4���O߇�[�`�>��&yo��SF?��p��Y���f����^��·��kd���a\�F��	�� #Ͱ{���������V�{��OK!�N�znYn6�ϘunGܵw&��`\�yA�Rŷ�a�
�m�"�^��_�=�W�|M�#�v��H��0e2���pˌ�~k�	3�p�G'f<��؇���������Ӵјi<�P��T����nn-�"0�#�d表l��5押�_SfKf�\�-
�o�S�74�V�XA���eur|��܃��"�m_�\0�l\�Ѣ�.%M�͆��~��Qw�y���p
+CB-�'TB���'X)̩X����Dr3LWF����+�:~G��f�
O�>��#Nxm]���3xi"�O��4w1U��<�h��&���X��X��H�}}joO����x���b��x�������5L�ۍ<�$�7����hP���ܖ�:5���,�0C�v'��Ή,��+�7}�l���z!O��k���l���ll��2!����؎�$����;��P�<��=7J�rE�����0(b
7<�a�9�;�3C礵�/t�_�
��:�"g���9�5/����9�Xl@mcN�nҏ��[N�����o�|�m�?��1��4��C��J��e��+��f�
+2��]���}�篖.�J��?ii���4K{'��w-��d���d@���?2f���\+Fݓ�~�ǩ������1"lЇ;��f~c�1�o�j�"��6�F�!����ըJ���	�%�#����y4��a�f3����
�m��Dp��
<z���C�vkF���V�?	��%O����8ŏ��.���Y�{)�ߨ�G���0M
+���
�(~��|(yl��݁5�z8����b/��]��@��\�7͓��Vf?�Ɖ�������].�����5�=�_��:��]��{����z�����q��f=Fu��G�$VǞ���궇;b.�6EѬ��6����YM�-���(��(,����F���pe��(���J��o�lLE��\�G��qBߎ[&�
���U�X�;��@gHF����*d���hm��ڡ�$��p���w�Yڵwiϔ+�~d�[
+v;G�1y��v;���,��Ճv��i*��;̔:�Ku$Kx�����p<��
o��\�v#�FBE����>�c�:�Ku01Mq��W��C8����V
��U�r���P�:��ù�������5�X�zJ����I
+:�檢�<�:|A�����F�h�/z�(�͞��hxw��4��]Z|�x��
�M |�G��Eq;�`��y��
��B�D�z m�F.��~k����%ڸn���#�ePEbmN��L`���f�^��}�7w�h�Xl���SoZ<�_7
+��{�٥Ǎ#�~�s�Z�g��*�XI�R+y��%���8�d�҆/�o�� �j�R��9�ޝ�Sh�
 (!G.�/�o����������>�=�C�P�
F�KY�tQ+"��"�w�G�g����SF�:�/5��W��n�Z��<exv�,����WXQ9��62�w񓧄ߗO�3#Ío�_��/���Md8�n+}����@�#���1N�AB�#���0^a����Ss>��`.`�q�ԹW�V���E{����Ӎ������ZP��+�E��}@��S
�M��3
��sݣ�������+2w��og�A�'�1P���s���P�y˝��4~F��ݷ?*}�_��f�Ƿ��V3�TT۝���B#Pc��\�x�s���7>p���]�q��_?�Փ�w�����OS�k?��.~�o�+�˦�������y]�u�e@�^tm��ocɑ�Zc����(/L���hbI��O���_xI�͘v����&rc<t���v��x�3��A<y����O�o�]	iw�ۿ=��ĽΞ=z�?j��o�%PKtp����/E��Ͽ���-���-�?�B�lp�@w�q��鳳�ѕ+1^�u���3��g��1�}��xn����p�����Õ��~w�ʳ����ǒ�v��S��ڝ{���K�~�vu��b�ԗJI�s'p���`����*ߙ���]�s��c�R�yܻ~xM����k��n�Ʋ>��86�bè��_??���7N�F5
+
�8K�O�*�8O����A�u�)�A��˅D��n�}���+
�ݩ�F���wΊ?�}���������[��>�P�п����g>v�oߒv��3&?}����������>w�볐q�����PU���CH�ޭ�Ϻ��_:��M��kX��Lį���{
hy8G��'����<;�����vz7?��W��?�h��YQ�7٪w��|ϟ�l�/�_�p���_��ћ���}5�,|
+���۟ZW���%������酫sb/�!�>��ׯ���ÛW>x��I��;�].��eY�_�{���ݐ�y�6���X��Ռ�w}�	����ܽ�N�__9�z�[���{s�n�~�׿���'WNާ��ˇ�]�臷~�z����"��]�ǵK��]��$���䷷ξ{�?F�;�>���T����x;}�ݪ�G㥛Wn�~���?~�v����\_�=�`9���S�=�������*��}:\�����/}�������?��o�wJԑ�r�o�����bw���?�q�V
+���?��snS����g�n����o�^�=~�?~9>��J��ƈ7F��nq��������+��_|�[�f���q�n�q�_�����a�/B��G�Ɠ�濾s�꩟�+�b]t�.�OP��s�4,l��z�O�~��kWN?���[����Ao��dP����/Ž�}��ſ��6���ƯWv��f\��� ���ۧ�6�Ҵ�M:H����꽇��Pd4Nxx�
$
<�����Ὃ#Ln���w?�����PU��nk>��I��I2���&r!.l��c��ۿ$1˷$���k��=s�?�W￉~�ȵ�p:U������x�lT�~9r�\��_�*f���[#�b�}�nPG�^��k��lntFUf��
+��>}�w���%�Ϥ��Ѡ������R��7���w�p�����>�
 4�f�RMY%��1�(x��E\Fw`��˟^�v��ˇ7>�y��O����q�VL�%��>�S���w�u�����s7w�~{��;i��x/��\���i��~����>_�|���y��_K*ǥ_s��
+�z��3����4����y�4���<��ޅϞ�����O~��G{�N��['��¥������kO>���^y|�����ӽ�{.}~���p�����c�Z��QtN�{_��xfh�W�=�%��w]�����]���O/]:���٫�:x�����W���{��
��@
��?0��%�}w������'/}��͚%��](��g�����S:خ��?����A��'�_���W�Br�ԗ~�
+�
�m����c���w�n~�Y�V�R#�*X_��)�lQ����&q���GD
�
����xp��p���ֿ��GĢ}�������0��wL��&^�4��Xg�G�������?�;�j
�Y����)ȡ6d+�p�|��?��?�rde�}������ѐ�1ߓ��T����+";���?BO���o��}t���G]�!�=dvw�L�����]��s�p�\������<�/�yn�����4>@�S���Ƈ�ЗR����w"ߖ�g��?����Jߟ��@}9��Oi|'����(}J���ȗR������/���`�����X�#�ՙo�=Qw��/��z�܇��
eXOA}�(�]�JN�8y��{7�ʪ��(�s
"�(3�z��K(���>���D�t�n�	���?���7Q���Yr8D��>�;��I4��?�pk�'��7�����O���'%�s���o]��u�Ff��\��a�{�Ew>4
+d1�s��O�['
+.��?/��*��a�*)���V��nS���x��t})qH�驧�_��֏W��x����.��;��ڽ��̲�r��W@��|z����)�N�n�]N���x�O���OT�_���{����&;��a?<�u��Ϳ��N��f�.|��I�;Y)��G��n/��o~�aH5�?������kÅ*�?�����rV'���������W>c������p��qx��8�����M�Cw�폯ZI�<��gU7�~C^�:�z��;�����n��s7�¯���aQ]9���@Z�@%���/���O�9j�
�O�	�:��������C��Nę�yN����3b�z���E��ظN>�����qDuͫd/�g��=ߋ��†T��W�޼o�"�g�Z���&�C#���p0l�^${
.�|�t� c����G/��F_<.P�͟���o
eM�7m_�����IӁM�G�q�?5��Du����>}ʼn���J�
���Q�ד��5Gwp"�^�ţW�R�����d�ϑ}|�J�R�l>�n�a��|r��� h��������ș7D�������y���g�������_�#e���
+�w��Gw��;�e�;_g�#��]��Fu7�ﶱ�s�޽s�bڝ���$s���`	aڑ��НG�$���D��:��<{����믿���|]�8��?~.��w�P��8�=��y��A�(��/��~��O��%��=���|!&v���
�����F��DS��}���w�h���W���x�݆π�����?��o��O/���Ο9y�3

+P�NW������I1|w�~����_��ُ�Μ��:پ�ˆ*�\
>���߻ɓo
�߻<����kW��7��{�+�Q��~ˣ�EzG?98�g\ÔB��y����!c����~�ۑF>���������o���G�t����i��|��p��P�g�|�/
+�>��������Ǘ�_�-+?��:i����g�� ��պ�Չ�խw.@I��~���ۥ���ը���/u�[�6���o��;r�/�-/μwxN������g	��iw�t�u��/��:���g(�r�_���
�;�ς_����clr��_�\/ݼ�C��/}�,\�{y8}�
ze�����;]�}��m~�2c����H��^���/��n-:�~�q�����~*H���.����_�A|�ǵ�݇�t��' ���\��qQ�v������z|�K�ϫ�Ͽ��E\�v�ߞ�����_��y1!���O~z�݋/�n�7��~�����_A�׵�O}�%:��L��2���>f�x�~�}w��g��|����7|��*:��w�ۂ���G�ܻ��Ow^�Q��c�b���řӑk�������>����[ԚO�ƪ��7����y����|z�����r��/?����7��y}�M�����~�ޝ�ݥ��zL���*W�r��1޾k]��bk�z��u�.��o�=k\�[R֎��]��]��c�}׺zt
u�������}��wW=�I�TA�?|�~0|w��?=:��?cwn/������e��y�C|ze�)l��N�����¥'O��t��O��}�?{v���[\ٻ��Z[��w*���.6�:����#�~H�Y�������>�
��}���O��=}��|�ɓ������������߻������������!��ԏO��v�…�������~��.��sb���3�h�څ���P��w}�;�?�q��n�}tw�4�����L�=���_\���?�q�ׇ�E/4
�N��s�?��K�����?����4��^�?�}?E����4v��M��
0Σ���nX������n߅na}�������_?G���n�ý����������_���7�c�w=����xȏn��Ըy̍w[��њ�*|�����,Nk�����3��+�
+n��q�9]7L�c��
�?��„}?�w��3ĥ�����a��e��c؏-z��㘧�E���1Ї�#p�����yXB�����p[�y�������/ݘLJ���t��)�S>�]L��<%�����〃��#��\>����B��az� ?�4ݰ?�~I�V���y���:��
���>ԯ�U����oG�2-C�����ܵ-�8�N��{�e�]P-���So�ĕo.�o�q�}�p�J��w�`�<�vS?��>Rc�׵n9�O��S\�I���Q���r�'�r�g�2�i��2/m˖��g�v���
�D>�t�qS�t��H��’�����۱
������%�ߟ �0��H5]�%���� "0~}\��q��w�b�kts��{G���8�n�d�DA]�M=�\�0��I�na�G��b]�ҢFJ_���i`b^
���&T���
+Ҍ��5-��5@׏-0�<h�؇Y
#�@���?�ȁ+�){d�e�P;�&`S�c�^�������=���襖c,���X���ȫdUMj;v�ޭ��U=�\��ŋU��AeAZ�[%�k�Qع��~%`�ڝ1�cg��0,N�����HK����nE�iyaZ�x�i�[�n���Rަ�+o��E�0��<hi���$.��r
+�~�]����)�&߁r����&
�#�l�_��1��ǀ�yp���/0ͪ�#�o��A�D�j�>�.Q[h���6�U�.�ѷ
A�����
+�N��?S�Ӑa�z�0ic��y��hiZF`����.z&5�i��[�~�-Q��-#7���s�uˈ�#�A��4�(N3�a����"�G}m�ʱ�D��Nlf7������9V�<jČ��5��a��3�
t�30��\O(�FG5uq��^�0
nƖ��5��(Ys�s��%�Ld�k�4�+��dM�T��>7�,fN��f|0�G6x1ĵNi����XO&����nYZ`��0kఐ@��>\
#��ahZJeB�~ �����E�
,�c�N��e�������ݐ֦������ڔ��,ݐ��b��=����X���ͫ�w��-�(D�YSa��2Ԥw��-P�Aѕ�K�^7
cK�*2][��"蝅�gYF�B������`���"-��Gf
+�ˊ��hm�b4�q���t�z�e*��8_s���h,>(���)�G��}�(GS�b4�
�,��v�e�*��R�C
�1(~/W�f�놉e�^�"��h�9%h�!Z�|�#-^I����Vk��N���J4�sЊ/آ!*��	�lM�y�}���12��I�1ҕkT.hw�Wʙ�E��C���������������5�hK��稁���@��Cp
+X�42����,j 	�H�S'��`?(`�o��k̓0��YY[��A
yg�om�b!�J�=_[�Qر�dm���J;��(zPx��Pom��Iw��-P��0zg����Bꝅ�k=(
+�YD��@у"���"�q��!L��V�t��>�
��F����3
+a�+�Ȇ1�%q3c�j�����1";�dF�����2c^fẗ��736gF�X`K�H���w����h4<<6��q���2,䞻n
+�5����(r;^�-R��~�QyW�Ҋ�1En�-�'���_%�Ӂ?���+@�nA5 q=�9�����e ���N�Ѩ\�-�s������Dޭ���@)"�{a�ϳc`r�u���h�n��YB�8h��
��iБ&�+�~�4pp�N�
+KX��㲔�0jQ�j9
�U0���]�&4��
�&`p�����Wj'���َ6�%7�c��2����*>"%�a�q�9h98mW��4�p���X�ek:wM7��0֮e�	�家�ڦ�t�Nu���ᦷ����ߊ��3蠣fC�;@�P�s��h�F��
+�[!��e��	89��B0~􅮳�q��A����	�+` Ln�Q�0��`5�^���ed�qQ0aXL�T
GB����
�m,�U�y ��]���g����!�g��o����"���W��I�A�(9{!���P�S/�0ڠ~
�����z��2��,�`C��_)<կ
+ا��Gm3{� W���h+>�픚���B�]��?�m.qi@9���@�28i)m�g;c�U`&ɝAz
+�|�'��c#����r߁a⎈3
��e7+cڴ�M��4qL��4Ȅ�g�#6<��hX�F�i+�&���yQ�F����E|��.j3b�� �F���m��L���*��\3Ե3]ӆ�|íoF̐�Z \��PqE-T}+���ӡ��D�|��0���r:�1��6�,U�G������P�1������|�1#��jV��5��R���J�1��jΥ�Nb���,rQᝣK���6���Q�,�WA�V�A9�L����;��P�K�ch��rc���z5�T�3t_���%�k���1��[p�L�z��R.e1%��j�F��?��tљ���@0�Q�b���CU����������2��y;a�3a�s3��f;�y܏�MK7L]_}�=zp�F�7�${=�F$�i�i��3P~�6�tZ;y��Շ��I�?�}/���W1bD��d���-�
q8Q/?!�T׭E1��\hsK�ͳ�ٶʍ-)�Us�1����W4�(	�M@�`��u�P}vCP�e��_G`�Y�4�uQ��`1W���2Z�Zx�50lAӘ3�>�@4Lɝ�[7u���t�m��Z?�1�ѰG��,x"fw�{du�*�O�-0�L=X��O�2�u�]���̙d[�z���kj��Iߵ@a�X�rWY5�C�\-���˱"v,��X&o;��*3=��wQ��q�����a���'�w<�5 �:�}��v�֍�X;��HA�{Hj����/��FJJR^�;��IK�̨�BX6*�Hc�WO�����@ �|�}�ѻ��P뙓	����j�v��j������!�a8��ī�&��M��Wd�GlٱW3;J�k\*<�byԸ�na�-},9e�|+��x`�-v���Ūhڲ)��{b�z4ǀ����!r�Q�г9�b�0�	�u�l�1Z���R���ĆVb�/���*�e��ݜ&Ӎ8���)��##�X�_`Z����}:Ӓ�v���4u*S��V��U�n�N�{���dC��
+��\��� A��yd�[�N5���l�r��NU���Nh��Z�e:�-�Π�uKښ~{��-�p<¨�B����<ćeY��O�0��=!D�ϛa�os�,��Y�_��<���lD1Pjg��j��Vk�y�v�������8��h���.R�N�w�>�鿿>��������_�%4�>�����'k];�R.�
���.����p����N�Ǹw�����\��	t}�$�e�뗽>Z��$��qz���2�_�A���!�k�#8���8��y1�K�{����!Ω]�fѨ4(y�T��B	�Z�e��q�
+;FYi����,s6��%��0RD
+nGƒgׁ��A�(�!-jJ}� %iMC
&P��7���ľ!D}�R�`�^�DJ�4�zu]����Gz1i/���Q~1+������S�f��0!c`�aA�:'BZ�ĩp%p��f���5O��.8�KY<�95�d���İơ�.����J��Thɽ�/o�r����uh��0g�*��0쫚�	i�`�j��������f�Џ��,2
�N�����>bIl)�rDU�0���T�f0aFIx
�8F|�I�8��WTD�	�8�7����٧���k�#��������*;�(�b^�chQ���ZY
�Q k��ǦH�������1��P8����y�%�yL��cgH�$����HeXX�I̊��(1�ǥ���ބX�i�ɐ��o�w��s��g�g��@!`n,��[H�^���d�
�d^<�,��2�A�[�
hL�1n���ڋo�]�⁶�BM��ǂ�@x��Х�9L�.ɬ%�-
+�0��ꁂ�CMI��E�����
��	�
���ޖu娢j�PFY5E5�c#�WJ	��n��M4�I]�Yw��ެ%-�ώ�>��-��x�΢�u5m$P�8��?g�H����$m�1���D�9������ŏ8�n*�%��!���"ԓ�j�jpᝥ�����kUyT�����Dmv[��?O%3������4�İ�H^��
�Ɍ	��c?��	K�{yP�S��b�>(�8��~0��.J�4�R����7E	�����
+�SP�/��F�F"n|&-
+'t���,ƖGx�i�G1|C47|����릵`X��a�6�x�Y�I��e���^b�B�$��tQel�tM���b�MI
+�x�(E�xҒ�A�i�
��'��3tS��|�P��*���ܛ���ɛ�B�W�l֑��uK�UԬ����`h�F���{&���lb�Ϳ-No���>d����5���^>�B
xݜ��G�7Kkr�U�*���;�k���g
-����M�
�u� i�D�gU4��n��ޥ��$��׶�L+Ѳ���﬍Y�
4�)�=�m0��d��
��_	��2��ݽզD�P ��[�-�,�6�l^d�e�D�E;k��-�e�i������=5��M�2�l�ʕ�&�\ã��\����ndK�p��n,�A��oT����iwzw�
���=0�����	�K�`�[vѭ'�|
+��A��E���3���n��껥�[&��A�L=��y�Ƈi�X���$δ��r�IY`!�������Lyݐئ+P���w���
�`�&sQ�a��j2?��Mi�����t.��������pt���nр�=��7���0t�3B�c

2c�Np9��k�<GZ����ݘ�Px� �˄���������T�!��0dwT��'�a�~`1��>=�M��p��^��Eq�8�٧KJ�)G�]T��qo�F��eo�;~sd{��tEha�3,)Q�OYv�s\H����L�:����Y���E4���o���t�??�7%�C�B��y�A
+V/E_��
*$�(G�ƴ�@1��Q���sqg��˻�����H��'b����-��˘#p�(z��Ed���i1�"�@�o
��0j`;gZ���	N������sz�q�
+�VC|#

+7�G��ŧ
�����&��㳃_<ġY2'�|
+�����
+�Na�X�|I2�B̌1hp%N�1(��"JY.6Plxy]ǂ���i��	�� ?3��"g�\K���13�T�
+�a������r��p��J5�?�5��S�:6�{���y�Ž,��q�Xk �N������G�wwI��*�C����)��F�0Q�`|S���șy��_���֑�t��S=�%�E��5|`
���+N�)ӨA6��{�dm��-���]^�<�n�%˫���N���u(*jfF�0ղ�/�V�a����DvZ�5���d���ưH�����,
�H�oл!����7)��U��U'�Je�wI|���Jy��P��
KW�}�/��O��gD��љƌ{��h�U�).˜���B�BC�Q�,i�y�eZ<�h��5�����,�n�G��%m-���(�ȱ�(��f�b�e�ɔ4ky�s�e�P�	�f���l�bF-@\Ou}0� ����Ʊ�>
f�T�~[�t� �D�0(�
2�!�� o�a������i�Q�cP&��UٗC1O�݋N5Bu��$*���`�q.V+o�
�!̤sb����)�K�k����uC6mH����e�ӾL�<
�����q��g�
g�H��i(X$�	{K���q+R�0�9Tb��+R00͇�}B�#�4c�bb#L�cW�<t< WY���A��(�e�쬊Vz'+��I��������[��4�B���L�R�,�NqVp�_a��4\N��l��v�F>?�����p)k�����ŭ'y��lifz<��p���b{1tsa��S��}0�uU"�&��$j�>(/�\)�[ź�Μ�;�	���N�r�\l"x��
|�F�,�q��~q(&"��\��.�^��p�
+#ő6Al��V���o��5��͡L^V3���3��\�vg6�[#캅�&��b���3�}
�N^�lԮՖ�ٌ�b�&35��镵������b�/����ܺ)-WJƴ�8�,���뙅�$��>d�睥=h��<�@��
C��|�<7������H�mVi=B14K'2�'{#�-�mKSnk�n�
�v����C!����6qQ'��h ��-R�YZB�\ay5��M2	��}X2��]��ز�K�5��дw'��j���iy8,_�_]Ks�u�j�����Ҕof`N��A�H�����M�&kX��gz��V@�3S�4�O�u��y��vmL[�5xL'��k@�edP��*t�i�}���ͭ�����"�@��L?��7���y���WNt�b`�`�b��hy���WN\ӣߜ�!�Lag��1���l�p���s�ae�+�uk��D.
��T�x9U�9��IL��΢�u��L5��P�X�>/��СJ�l��UM_�R:з�[�Q�>]�G����Z�l�����P_6kQs�u�|4=�/�)_�����]�j׍����O_����)�+9n�V�_�Co�r��^ts�^쬽]��+ǧ���ֻvt�A!d��
+'6�Ǡgs�-,;6C#\n���n�!	1��������0���T�g�v�	�e�&rw�YD�P���c��C��j��B�W�!Ӌ�H��#�r�Vϔ�����=0k8R�����8Gvԣ��dL��N�PXyq)ɥ�H_���7+?���<6�l���ބ[AB�Ʋ1������|B�S�9<�.�@#ܞU6	��Hۖ6ґ�:����K�
+Z�!WA�!;H/P�"��W#�
f�I���<��*�WB_*��U
���S��&"�T���+ߕ�3��V�q�(�f��T��C@�y�����#2�p��'s��J��5W���qP ��f�_��5�ٔ�!�����)���-����5Jk��P@x�6j*�q���&O1|�f��2�o�y7PƝ����h�"[�%^�)!�FFѾ|fX��*Q�a��G"%z`<�HӦ��8��%�z����Ɂx:���\c)ie4�f,9�Xp��z�Q͌/xielե�44b#���"ⰴ߀7���|���
�HW[3��5Sp;4H��a�-SA�
2�1GJ�8�����b,�b��{
dl�8
+�d�#�ˎqYb�ŵ6��+�Y�']C����� �]��(@����p|�RRV�Ù�
+b3L#Û&��"��PԚ��dBp>�e_�H�'�$
+�ș �$	n!7	��GB	�eo���!�#�3"��R��.�����XG�����Ş֜	ԃ�%%w�X =� �խ�mZ&kr^�G���76�������ؕ�ѳ���Z#ܻ�م�	���)_1SҘ�h������Տp�0����<
+F�,3Y��*�8��9�00��r&C��
�Q���CMNe�s��Y�����}�ĵ01Ŏ%jv)�6����d��G�-�
+�;�k����<���ǤF
+�0��~I�|蝏v鈩���18�Q6ȻqsN
��n�B6�T����14_�Y��n�3k�
�6Rﷅ;[�-�6)������@�Ѱ���9�`�������X����؝h�q�e����ɳF��q�gEOVZ'�Nk�릶:V+�A�j�,S�2��滓]��*N�D����蛖���ۏ�v���
�R5b���1���P��J���1�,��T>l�O�$�䡽A��U28�5�g��rЋ"�*�ѧ�ы䏐�!� ����'̞��|
+?bȁ�\D~DzK~5�6���
�1�l'�TN�pB�vY�w�Z��r�t�"����Vlo��Z���/��n�d��&{38����&5Yz��k&�k�mkoM^i0���������5+��b���kv��2�u����/����"��Z�+.��6�L{�5ʘ�����*�+M>e-�iwj�^�ͧ�^͠7y�	��P���v����nV�83e��Z|�=?8�"EQ"$�u��':99E���CX0v�+��~1t�#����E����#�
+�>��b�i+B/�ɵ�SG|N?�^�~��_
���Q>6p�>��H�a
�PڔI/�f9�K�W�ۈ8���1#%D�a��p�8zlC�B9��0〈�.Sj5�{.�=[x����J�q˞�Z87��_x��+~�ɺR�&jҹ�\�ĥ��Q�q�2rOa�j~��F�Ҭ˻���/b-#�O�B+^��{⧲���2)���~�q1.�2�sg=��+������T�89���xt�
F�.��i�T1C|�b�0`�:�P$�i���=g�hʗ����ʗh4t>F�8C\��J`ϝSW]����
����r���
��S/-\�R��]���K4�?����0�m2v�y]���I,�P�o�4;�-�N���I׵;�\��N�s�N:��d������;ovҩ�u���<�O01��y�EY��^®Z�f'���
+"w2s�ޗ̴�9�:��@:/�͵��/ �N��B)�$��8��
�IN�“�3�$f]~.��2��s�T'�L����܅�zZ_b�i��)5K<�'W8x�O�/�eBa<V�KY`�^��.�a�I��M(��,$uZ�,�ˢ�z�u�
+Dޙ�b�
̚H����<�,by�2���I�4��,�Kg,��f!/� �eEC�$k#y��’q"�5�7֢���R=�W0����)z��%[�ڝ����R�6�2��5ʝ��Zb�G��f�3Rg��P�W�㚪0��Ԙ�V-�n�����)�����g��.ʾ��^$�D�j��������4G�������4���L�����|i�/�P��o��ie`�}�j�[��h8q��c4d���;M+?�O��SmhyD?C��J�I#L���"hX[��j�֖�Nm�ݭv^�8i��a�vCc[���c���K�b�T&с��$�9:�Y� ��"wi�;��8��E?�|���i�g�-��E<��&��s�R�q?u�ј�+�.�p:���]�1%闿�gSx8=-8���Ҝ��~rx�$�Rv�0kh�ı(���μ>���81��id��jN�}����W��䲎e�a�ۧ7�@���a��ߋ�k݌}���S����N8mۖm<�
��̅T�Cq�x���"�����G���o�S�A�Ƨ���c�:8�DM��IJZ6�����E�W�����vu��p,�Ӏ�K=�
���J�&���0���i.�赙�ħ��q��)�,�bPA���~ݟj��mPYrke�f�\{�ղp�lYʭ5�-��&�V���-��h/��Ά<���|��C�HZ/���h_Lk{g�0�9R;�j�c�]�
+Π�y�2)TF�����2����G���*Wn�Ƀ_�q�f�?�=2�.�0�*C��D
�T#�˖�|(�S_��oI�J��*���Fʳ	�@�Z=��U)mx�J?y���&���6�7;y_0��ɳV����"�Ca92���r��N�Xi]/�sF;p,'O��΢�}J����S��usiWX�,��4��ֺ�8<(�oQ��,�JK��QH ��1	LS)�������l)%i��>��%��
�ѳ��27.1���2<'a�b�Q�
)q��Z0�oe��z~q(�9�ҐB��Ȭ�����B���dŠ<��y�ye�K?��'f��e��
{qiB�C��Y�m�rZi��=����
C�<��ާ醁�iݼla����y,2O�:�}�ߚR�v� q��+,�}Y�z���Q/N�*G���*�^8��;*�B�R��<��Q8(���uj�h�6�\�U�H��,Gm��5|��;X;��_y'�aFb:��r�4H���U�L2Y?�*|Ɗ��g���iA���f̊.aiֆ�I��8a��k&��sGIE/���x�<V�3ifS@Rp�2��13Pk}P���u媰�b`�X����d��4�
+��ցH�@Á��]���p�A��ځ��ʁƏ���aZ�gn��^�2�����f�`8���sW�[W�aN^�<��nQ��	T�M��oh=�U�@��v�oz��s_�8AM�
�6.Q%	�����������P�fو��}I/����k����]{YM?���j���j�p�96|ˆ��(7��f+�w��^s�Y��w��7��͗t$����e�Ko�Zd齦�JyZ��v�(�N%ͤ�k8�,���:iה�^.�
V;�ZoځT�����ۮ���Dz�<�v���� ��i��9^4C�9��do�X���	�r��9��4��nd�5Aip8��Y/ɿ�o\�2\�ƈ�S`�|&������}��B�6.O!pefS�&/Ei��U�ɫ*?�מ��,wMz/��i����Rn+��.�Tю����ю �,�%�t2S����Z���A;�Z���Y�8��ӎ<���A�o�=���b��m�eh���m��5�[�@e�JO��lh���ro��G��(����Ű+A%_���i�A;��a�m�^��˰��Z��z��W�
�B�N��Q9z��������EZ�	;Ҋk���X��ړS�mz���]k;���]���h����,��dU6�6z�����x�t�f�6�mk^���S�����Ѯ�A�-a�n���b<+�5�,�O���
i���z��*�Ze�6��6�����pm��|�%���G�����RikxL��0�TG|��R�Ɓ�C�K�`*'�{58�".q��'�0�L���{�7#�Ô�s_��Gq�OD�CG\�G�8C��lnY�Arh5c��f9��s!�l	�S�JW�zqH�G�1�Z�iE�r�k����qa�y��4�T^$CFW|j��6^[ �ު���ɬ���;V��9�Y��Zv����$fY��,������Q9z&�q�*�:-�4��6}��I�-�h;�nƅ�(V
{��0��b���������o�܀�8�?"�͓�Ԁꌷ�9�Q���&�9>-�<��fՂ�#ɷ�#Xk������[�ƺ�2�<�G`NYH-e���P5Ū�Y��yK�CU������8�MR2���t��[�=��aJA�.2/\�!�k�|P����9xe��3�**�V@����S���(̤�ā��L��T��D\�mX�a��^�,k=�
+)�rh����AƊ�
~��m�i�X	M�+�hm��c�Z
+�����'��fZD�oP���TF�����S�Ւ4-fU�T�S
+S.כ~`(	L��>`r��;�<N3���)��G��ZKI�6�!�U�i`��7	2�� #�%�
s�/o�aJ3��7n?��cEh��@�l(��.�4��|}2R�@:S�
�1�0�F��c�H�a�/�L�4�W�ĕ	3�~""�]�lH�EW���="IĘ8r���ō �\��2�'^=���`:Q�k���4`t�Kխz�h!Ev��'�)3� ʲ+d[-�<�V(�˚�QKT�]ksK����5����4k��E9B{��$I���B�+�h�&��<�C�4���c(�����?�Ln��1�W`�Q.���q@WjQm����-���\k#���*�C��T3
�E!�sp�CMv� C66
��:Ț7^��0]�LN�|O4}�����{Ȓ�tƝtSvB-��.d�Z�	�!k�
+�\�
+�C@1��{��a�U��.�Ԇ]�n�^ȁ�!��x�(F:PP���i�Sp�E�#b���u嘚��z�я�L8��L�\*���0����]�0�|w?�i��^�!��^�F
+3��
+�+��:艋��$���e"�t�œ�Ԯ V�\��0�0��
�1�_�
+�:=�C@d	��N���<t7O����
�^.��洡b��<4+
+�Db�]ʧ�{��1Y3�l�T:.閿woQ{�<2�ڴ��V�g�e�;@���k~�4<Ӏ������ѝ)ހ�I

���R�^�;}
+k�d���&�:�
@&�!�էT���N�5Kj?����CR.,�A�����'x�]�03�*�� �2aK��.ژQ�O�Et�(U�AB�yiX_�Ct��c�c����II��6�Bi��,jY	���M�bE(����f����؉�8/��Xf����k�)���;�d�7>���(RsK~9gHCt1%PҤi��[�,��֕	t�`#�Z7��4M�U넍���\��S"��$޲��'IJ8�g�ٻ�]��ĥ�P6�}&>�:C=�"����*C9;�� ���p�X,�8"�����1Y�A ܳ<���l�0�7c@��3�5!�)e���S[��������B�A,M����_	�-ҍ{��=Ra�o{)�yob�2Th���,���񁯓fL
+�f��?K�ޫ^��yֺ1h==�Up�*���\�zA�u��s#7�<�>/�31v�
��jj��M��A���l�%���n���0O����/�S�i�il�G"�d5YK�?��&71�N˚4�28��5�4���785��$��@竖
�Ypݔ��TբאϦ$��^)��`h�b�+�^c�?#��R�@�Φ���R�BJ?Gِ����Ę�	���
j�;^���˄�w���j�4�T
+gLeos�z�$8�悫- -1���&N��*3��c��
֫X�+WL�9庥:*��TB7���L����o�[,Z��
�߈�������
�1�� E�d_�pi�W�,�Ox�����rB����;�rցOE�4<쇜�P�x�oa�g�s���A hJDF���	-
2�#�I.*n��K/ҷ���1����m\;vya�/x�	 ���TZ1��T���U�����HJ��E%�yw
��o��2Cg�){"KJ�Qr����ŁN�r�8�_"�υe0Y�"%��R�>�;@J]��R�Ν�řSﱐ-q���m₣�bq��,?^��ŏu8�	�Ĉ�wq�/
�KE@Q{aA\�sW>f�3x����
����xYu�4�!".�.i�e�g)(��SN��5Ǔ���^@���sK�E?���&�I0���A
+�� k�}��y-�L^_�R:��&���euir4�a�{<R��t��8$ߟ��H^D��z`ʽ�=�J~,��49���q*��,,�.ο�g!<�uowH�3�j��g�
�^���k��Ů�ٗ���Q=����V�{��d��
�5�z�5rN�_��J
๸�8/)`�;��*�W��M�<�y�3q�����d��y9r�f�3��c��̴
y��fSi��Z�3):7�9v�3['��x�+6y�0�r�X�./-�:�5j=.yr��Ȕ�t8�q�ow��
�s�lN��{�)>�?%�����;Z��j�<-��x��NP~+�@H�<�H��\e^Ɠ����ݺl�[E}�a
+�X%��%�f�b�p}ʡ��;���}�Cb܊G���b*�1����,�g0dž�Dqٖ+f}`3u��[B”&��1%�)�l����%E���d���Z�E+&n��sS�`Z��)�g�F�@�mXpˢ79�J`l�,pZ�dI�V�)��ǝ�W��5���]��$����Z9ݡ>S˂U0�,�H18��v;�時�6���ϊ�+6o�%0Z�b�K8)�-� l%���J�j�lH�c� �h�4
�oV���0LW��]�S�1N��Cl��Rq�a�L
�fX�Y�twH�M����2J�dͺ.�6@�UJ���˴�MYH��n^r�!�5��&�l
��\c���D�.�]��MR(ҚvT�4J��p"�)��i���r��z"?��;��P~���i��I�䁬�	��_�W��� ��2��H80��8��Y�7]��ش=9A!��#"=���^dg���`���4��M[p+�ҵ��oT������0�Fk
�FS��\�'V�:���Sr"z�h�j^�Tk�",�K�8�����q\$�����E�
�q,	]s���B�&�πa�9tL�U�$m1��7\g�D��K��s/cJbǯ���bJ��2N�];O��q	h��(�	w���uӥ�h,�B$ǣ-�2��y�nha�=:�Ӗ�lM(�Xmt��R#���,r1�� ?�L
r�ȞUp�W��i�gqdž�Z<v�+U��*1��MQ��6-j)�;A��Z<7�AQ��)��u*�m�[ӿ�G���kfT���e��,�x�t��Hr/]�B)�=⌒r���L�Mp]F8OF���T���
+���)
7t��@
�t��K��}H)衣�b�������XR@o9%u��?`�u�zb�XމJg�T*�U��H���%��Kb�G�Q�ÅCt)E���/e���{V�7:
+��. ���J�"�a��3maˤg#�`��	٫�Tȹ��Ǐs:�\� &� ��p��!e���*8F�����^�+����pމk
����`�^�����}9�Ƕ��}�N:2M��ʱv��yJ`\�4I:g6�I�1�xD���=�cꩨ
Se�|֏3��r����ܗ��	a`����{>eV��H��=�����iD�4��
G|��
gt���|-M����, _�B5]fAT�-m>L\�9�8�3���Y�>�cɷm��,y�Z��S,�ʮ�K��R3/�L��E�ĥ�R1,W�G�]XZ0�H|mˑdq\1�D�Ƭ�@�����:"J8���Uat:Q9�\��=��0<&�ࡂ~��&��h*�B����7$G�*R��)�G����쟸R[ǥ�&Z�|�wZd0�rp�QW�UNdB��!��V����A��e��W
H˘�������v��!�k",��/�(�@�Q6n&m�@2*)$Q���	]����)��`��*E-jH'�Y5�TN��!��t�H�$�Ȕ_#D
<��i�p~��њ�o�"rTb
+�h�c�9�m6KZ�D�|S�����t�m$|�;i�j8% TQe*�Ȟ�\�yK�ús��%�
�)<;*➤l��lq��e!Q�֗���y�� ���$_��	��������‰���d������+�8H:�8�|Fq�
+E�"0Uɒ�H.�i�IR�\��!_RG���D��\
+{#%��^O=��9�q�ˋ�s �W�3C�
Ĝ��1
GHz'���,1
`[IydN
,/o
+
$b�x���!?�Ty��A�q�PY7�f4����'���g��r
1�F,4��s딙7�*���cĘ��q��L�埨8�=#��ɳ:�<�� ]Ƌٳv�5���Ru?
�����sW@3)�DR\�@i
����.��Ɲ�N���{a��*���
HV�3���{�b��z1�Sь�,�����Xf����>�����Y=����8E���
+-0l�]ZH`�di�Z���Gަ�|6��"͞E~^�>�!�fbE�1α��=���0��l�_�+�ד���WԖ|x�')(�P��5?�"��d��Od-T:����d����8`�Q+"��HϜ�:Զ& mA(�G�L�d8�^�&���y&iێ��%��9�8
 ��Y���]yJ;�%-j
��ߴ��Q����2j&���&�$1��sE�@�D�=1�l$.��/j)�2
;u3q5����h�e@KQ)=�ZR�pZ�@�7�gn1򵆹����T�S/,'���<�ɳʐ�Ȓ�Y��$�n,�+�����=�t\�&u�_��kC5Q��'%s�OE���i�k^pH�a-W1y��P-��b��@g~?�"�Jc��qͶ*�R
+Zr@ˊ
��J-�Z!�~�Z֙"qKhJy9T��V.+ѽ!�[=@�
+*E�wh��P_��c�AG�KY�Z����J�/�|��5�R[Q+�Z���RXM�V+�ZA�У����g�\+����Z�P��qњ������iM"m6�֕6”�f�s��g����
ͼ�$�Z%���l�V���m�b�zV6�6�[k�ªg7Dc�K�@�9hG�
+S~���i='�#b)��p�hwM��)���>��sޏ�8B����;�P�b�2�Y��պ�,ϙv�N��W���k}�� \�ډX�*Y�%������ѡ�r��%C�]Je^[��墴K�\7��
��2v'��-�Z�oݓ
+T&N�J�_+<k��j�5VK��zo�Z��Yoj�BCWZ|��kK@[�=�-m��Ƌa�h+h�R֔2�j��s����r��F�7�tn���8�T�����`Y��
�Bb�`n
Xn��n�`n�E�
�̚n��n��
+��{U��)�ah�aP��0�����mF�6#pB�
�
+܆ �!T����mF��%pOu�6#pB�
}�
��
}��R�	܆�	܆�
��l�6p����m���m�U�66��0�:p�l���[��Ձ��D�6=pƃ�[�bJ��F�V��n�p!p˓Ɂ[��4BC_n���m^�������E����i�e�6�D	�f��^��\9p�qPn3���-�r�f|�a�L9���&g��r�6����f���`n3ȁ��(r�6s���,'n�+��mf\9p����f.�s�2��9B��R�Pf�2G(�e/r�2��9B�ŗ!!f���M2Gh�9B���1�)Q#��a�A�pn�?�q
���
+�p%f�Q/m��:\���2E���!���XF-{�seo@T� FԠ&�ڨ
�VG
b#6���5x�<n�խ_����
��>�$rkb�|�>G|lc@ŵ������T�B��Q��&�IT�S'�A��!�`[1f��ں�X[`�>[C
�lm�
DZ|Ȉk�0������p�p�&�
�)���xXhRT�� �j� *�
D�JqI����
A�… [�n���)�M
_��8�:}A��/��e�I^
v��U���#�MCk��8�9���#�Q��r/�W)#�t>
��Q!�U~����݅x[y��k��@�``����e��.�Z�@RF!{3
���(��a$&�}��S��T�ٕ�X��cf�D��a�q4������Y���7s�z
ko0p��_�TF�^y����4��Y"���\�/dAU��Ц/d)��d�2�uۗ�ص_����Y~� A��F���/��΂�
[�/�hb B�`2����"B�0xp&�-�L�2荀3��nW�oε<`�נּs���E��ZR�uH!ː��
a=2������gp��уܡr�P�����Z�S���;��
+ �sK@�Z'��'��𳉁����.M��*Zw�X��K�K�kA�¯�d����Lx�67(�%t�6xF�X4�1��fb�;�f�Y�'[VA߫���|+��ТD�%�L�������R�S-qe|ҒڕP7ⓖn�j�~��'m-�TfZ�G�E����,���
+���Y���"jM��O�2�[����F�5�c�Dk=ۈO�j;9[�^*�F|R�[�E1?LC�6i�أe#i;J�+{�z�k]���϶[��bkAf��D[[�2i��kXǦ�mmm��F;���OZ>�%P���٠}F*���Pn�&�J�PI�o<-�3�t�h�N���rWmE�͔�}P*SJ;���.|_�?��Fk�m�#��k�{�X�	�]�9��q���uCm�Vӡ~���Mh���7\VhY�=���zߺ����5�ȩK���En`Y��֚�ZA�5��Z[�4Z���z�֜�v])߆nn��:�����X���6Ik�h�F�>��dR�֪��c�W���Ԭ����5���ՌO~N�^����%����.��S*d�8c�>���"{�D�]_��:q=b߉���ߥ�7���߱��yA�
+�fJ�Qy��yp�� ����f��>1ڮL������$;�r&���Y��D�6:�{*�\N=f�$�8�d�?���/�a�������kGY�t[A�v'��_����a��&Q&���<�V(��te�5Mג��W���b�X�|��'�
+��2-ϋD�W��Ԓ>��Ko���XF2�
y�"��vd '_��A�0�N�ƣ�yӐ1i�7��qX�)'����N�^�2��}y����#r��x_����҈+�����p<���VK+��s��c,�^mFHڦ<�
+!�z�ML�F#U�{BV�g!�Fx�.4���^��
+!�߳h�$m�h.Qo(#�
W��v�\l���=�p�n=ztw}�`�'w������{���\Z�6��]����MQ�����U�7��R{��+g�w��y7q/Z�S�!N�u�'������H���c&��{��X����'�y�F�W���-�� 
{>z�����?y�I��dI+ҧ��>�3��2Ž���û�~x�铟�^�;up���7w����oL�{�.=x|��w�>X��c�������2���X�w�A�L�����
+����E�N�޻���eT��]�gǓM���Mb��mtB�����Ѫ�p�X���,-���@jdKQ��C��,�nz�ľP�b�7�R!E/:�<h�)$���V���,�����4�����jg��S*�y�EfiQ��C��Z
N�gzv�f 6;v@�,1�5�W�B�?����������.�pn����(Ym*Y�gنt�j�c�+�����*�A@$:Z��|+�TI��^��#���e"���"z6ȳ�F��Te~qLX {��u�Z�A@$B�������AT��#-�1����jW�JZ�^��?�p<*fA���6rq�A�9�VG������T�/wN�B
�'CF��ja��o�{rl��&��iڪ�H��&SE˚�+~��x����7���0��,7��Qϛ:��Sn���0�<�X-��=�8/t��3Bf����h��L�i������:,��q����G��졘:f|��_�
m��_�1��w��Ҹ�ཅ��b�C^M��Suc���Е�ݞj���sx�J�qB�;�u�1�;���s>���`2�=�5��̳�G����R��j��wz
+�~q��y0��)����+��g	�
tgi^
�6���z2�ʳ�	�3엍�"�a��M@��\��g�OA��|����,�c6����0е_�b�Ck�4tO�P�o�i%�W1��z�	Qx~.`�M��z�XJ�b�e &��x�����an�<�DmPC�-c��S��|O#��B��N��y?�#�}�,j�N\�֋�p��W��v��}>4k����;rF
Xy�#�R�^�
+��"�C.��G���S�庘2�n*��9�N���0ِB�Kݯ������r����/6y"$Q��[�-���w�<�r9�2T+����;♼�R�]T}�,)�7�u�D���e��px�h�f�A6Xl�<�3:
+G|-�WA�
+hr|4�	t��y��r�	+���N�6:\}��j�P���Hqš�Si���a���c(U	�d�I�DS&�rz[
0�7�����E�z:��)yi&�X�=R�Hy?�"��r�8,��N��E��if¤p���2X>rM��˸RMF��H�׉��|��9
Lj���d�ьe:e��9�gYt	�x���;K>���j�$7d��b@�|uI^�CVk
����Z�'�Y�w
�̡��!���~Μ?�â���5�L�j�N�'�U�P8']���a��4!8S�(Ke����Ln���=Se!��+M7Q	<�0�y(�@CE|�ߢ���-�v�ʗ�B�Ds8�����~�<��0�7$�!K���z?txYDܽ��ï�X�t�;�G�L��J�X7d�-�ƩR�b�9��|�c�E�YS�1T����b��}�39�
�I�j�|a����~X�ʫ�
��S\Mء�����O������Y���0��U���&Z�ϳ[L��!)b�|���D�pGuw<3���w�Y�i)�9c>���*S�~��G���2*Ԡ�tK�opc�����oI��m����Z�[��`c��|46��)������3w欛8fb�al1]W/3��p�E��Yb����b7@�z�AX��y�~
+�1n0���m��������)|�Q"���L/��i����n�۵n�Цyz�c@��u��Wx������Ő�y�}�ѻ�Փ���(�2 �N�;�n!K#ו�VYn���s�p�es����k�qig����'��cZ�F�,\Y7��°����]VNx�V���5>��\�i�-�?yo�a>��:���y�|˲!q�;�`_�^�}R.ڐ��uw'�Mܵ1[eSX��v���2�縧�N[Qp��Z�h����*%�8���k�Rb��%�#�}R?\����4&1�d4
+�D���Y��sM�)Y>E��3+-0i�2������ԷKh]��u�
�F��ܴqg1��+�C���ʪRg���*ŭ�lj֖֋N���Rq��-c�W�
�|5�C��-�`��sdZ��ء�T��89{v�FZ���.m৅��_�@���D���8���v��;"�[�BH6֫S۱o�Ҥ-�
+��xu���Øy�h�8:��J�-�Ъ麡�b������к)ش���!�*є���7� �^-�v�tY7�Бu�{��U	|����Z1��Sn3R���קO�]�<6y��ީ�O�>�RJ�������{Ϟ>�z��&!%� 8��?��
d�T�g��)���?�����5��[�r�iNU8�Ԙ�������
+�M{�`�=�#�4	�"=�Zt ^F|&L�u����az�%��p�v���:�����$��|��K�fW�C�?8�L�R�O'�f8�'z���/�\1��e��
�]ΐ��C��1���j��S	���a:��q���-��=�D�S}�[ږ�d�f�j�\��䨶epF���uK� 5
;�q�S�p�#�s ?	ܠ�ō���5����_��Z��e�z�m�q�u��9�2"�n�G�e�%�e纶eKX�9�8�k�
����!�5
+�C�*O�U�'r��-`d�c?4�K`TۀF�qs�v	��(h}�K��j�<�����6��C�q��U��f��\�+�)�zY�Ɂ���a�
@�eg�a
0�F���p��&������	
�gWP%J��i�<�
F��!�*h`?^
S��2ϐ��CU]��xR��V�H��k�n�k���ig��0��A���Z�U���c�v�Ү�-5=�M�Y;�JvU�`���B�U����2;�V�ޚ&�,_	8,��� ��E7�C�f݃���E�ԃ���,*'�Z�����u:�VV���D9���B�i?G�(���R˩K�\��:B�e�n���4�!���4
15�m�JD�چ.�%MCܭ�a��r2l�\L5LjV�e�'`�-=�nM��;�2��M�a��8y��u�r�};�>Iźe$�	tY����$��x��X��5P$"��2��khdž�{	t�����ģ �mZ5���$�r���M�>
]���p�'E�]�S�����w/f�c�0�Cc�4x8����3��|Z+`D �l��d=�ҩT���Č�V��o!k�$&1��N4]��{�S���a���s	
+�1NCG�G#�;�0�a���f�/������
,�b+E��d����!�M9n�fSs��1M�l�ZCznDS�2�����������ܵ��;k�QZ����"���1(��Y˻n��F�,�\[�������JY������`0������g����:kcP���ڊRX���9ES;�u�-0��`r;��I97-B�Zʒc(@1�S�Ĩ���
��UKYr(ƠX��b�4��5iKYr(Ơ$�{�Æy�8|KYe��`��!Oh�1�
+x��:G�Х�tp�U�u�=x�Jh>P6/̭��u�
+h�LA��D�B��R\٢��P�ॄ������5�G!��k )5��9D�,8,C�[��f�5��K
$�'����8l����m���<~�۝5����hw���(�P-�����;7�(zPX��im���r;���{0�sg���E
+�w��-�(|�Y(��@уB����k=(J�%63��T�U�I��/�r�o8�7����t�A3\`����k�
+RbETt���ر3�c���@�r2�SF�x��13���Y�-2w��,ä/D���͑2��ɞ'8�2��B��ɒ�����}a�s�˹�H�S܌ZP�@D�y-���޲w(`�
+�s:36�ad g�LyWf��	���I�����10��:����=4�0�pZdB~��n*±�m��C
p����޵�i@�|��q��j�r,�
�Mh�q���҂d�E�xvr��k�fzΠ�t��2����*������o����X���
/��/5=����֚~]�l��7�ʖ���S[m��m��7|�����[n|��oFt��6Xq	���k� m���6b��ճ&`�վ��b�)�ic���B,�
L�]
'B�8x?(`�E�l��컾i��h`B��ЩR���Ф
�%,�W+z��
�B;3r�8Gˋ�N�.p�E%�B�n��J�0I�^~5�Z�U�H��q�$֘���
F����^潆Ø�A�r`��+���b�V
��Q1Rۼ�0ĕ�����q��@�����ɍA�
+–HOsB�!r��<zJ"����Q�x�8R�4Զ�M�x��5�Ӗ2L4���0mD��ܰhMCٴ�Mo�r�8ǼH��pi��9�k
�N�v���
���p4=����Nm��L/�����˛
3��Cx��G
'mV<��V����>,E"*H#�`��|��)��t���4bf�Sm�rp�1�^?�T�F������4b�;R���c��*�U�&1�O�؛
+҈1��bES�e�ǰ��U<Ri�6�Ί-(ǟ��V,Yi����W�}��`:�
	��4bfH]1R�c0��J� ���78�r%�1��%�T�&�a#a@����������d%����v:���&��æ�E%Ra�0�+��ӑ{XV8wF��=GB$�/��Y����Cv����j'y0����{<���x ROu�Zs�̅6���<s�-����T��S�7�z���N&Z#U
Tw`��O'���҆�����
���a9ש�:��dÄ3��
��0 1��q����ϙ6���k�{�dV�t�̈́�Mve26+�1[�����~j�p�zr-P�,��\��*�Y~++�cE6��ɱL�v��Uf�WWѻ���V檙�y�[O�
���<*�3������wV	�if����Q�D�ʀx�����_����ۊ�U\��6�;�=p����+w4�J^��p���a�=��]�H����ƅukL�)���lg����ЉG�99����\M[&�WOL^��X��W>˯��uC���J,���t����z���4u*S��V�8�o�g�m�	n;�ľn��Aj�R
�;����kP��n7��;���-ikz�-b7���ժCz��1�d��>�����>'x���وb�������Ս����5F�,�Y�0�FU,����=�j�4����Z+1�(2\��!2q��/6?���G=re�����òLx��i|
+�t΋��������������@�����	ZM�ȯJ�mJ
pL8�e��*�i�b�!�<��&�gO\���	C6��*�c����!��%��M��������D��[mp��QVe�A�����y&�yH�rΥ�a�TֲT��ڻ��:n#�@�a_8(l/w�=�(��i�Bi
+7�p"��ёYI�_~s#wɕ�H���0 ���e87��!�h�.�ˍ$I��@ڱO��&h�j"�	�/'�|�H�iɴ�'E9�T�X[p*�,'���:	�i��+cP���V���ZL(�`�����{U�"��-�{�B!��)GC�>��,MRg��'Nhm�ݱ�E1f|����ٕ����t�7��!H�'�?�(������T�r�k�p@�,G8���9��ru��d�ʒ�O��^2�Osk���ކL;�>E�~\�>-�_)���o68+V�J�ge��R7Y>4E'����Z�E~!%��=����
+'�Mެkz�gvk���J�@)����<�+&�vM	|&�'e�6QX^SBw\6y�߬nR���S�F��zG	�&��F�̚��9E�j0F�֜�c����y�%
�R�V$�Ruf�O}g\*RD��"�J��tU	%�Yޅ��V5�}x5�+��|�\S˪��,fٵ@�	<'>�����D7�*�<o��ARt�l�MٟR���aEV�F}.�G��D����'W�
+���OGsm;��f]�]�
+�u�
+C��\l���tE��i��Y�J[GP�9������v~C�-r�805'�*��¼֬��_��Օ��a����
;]R}݈��m���cWs
�5+v`��b�E~a�G����c��f��]�G�qO�s�=���7��t��b-{c������}�o᳖TRW��^���.� t��
�;���f�3��;�1���Ṭ���X]sT�&�5Lյ�L/��lJ��]7bˀ].ŝ,/V���g~�g����������z��В��t�@чŻWںL�|vYQf��p��iY�t��^D�[�z�+!�.~)��Ú3�dBiʫ���b����U��*�Uɯ����
+�uT3SK[��u�����6
+��C��~�F��'��{�@�NJ�F�}!k��<2[��/�k0!��שe�/����g,�zX�~�%�S8�A2�Y_�UW��Y��}�1�:�˩�����!���(�UY�f��'
�Xpo��`"++�,oxZ�d��ӚDz��y��B��5�V%���P�m+��/v���v5�iĶ�)cK֜���
+�<�Ip}3���d��{*����e��XWı�}ɝ��ʞ@u���ǒ��wG�]����T�e_S���ڞBu��TϚ?�}|�����~X�W|�Ŝ^[
<-�B��������.Sj��4!8˹}�y�[КPք��-�K����ٌ]�
+,�wi���*VTt��W�Ka��a;T�_Uݫ�qa&��ٮ���~������Lp\��Kؼ��o�F\#�
9ɚ��i�٠�N�A��>�� ���2�n��-�@�C[)i@&&@�0l�ngX-��e�S���HC���h�3@&
#@�uT��(�d�D�X�4�nPy�����ޒ�������o�����y����E!�?���h&
+`�����
+�)����{�9�Mȫ�\3�����@����
+�24c$��=%	BR�~�������
+��eA�1!:����-�E��h�6t��W�q��~��������U����O�ۻ݅(��O�.��������O/�������y�P|��_?Z
�����XQBj��B`VE>BQ��*�W��\Ѳ1�J�Q�,](&��j�8�rBHJ��E=!�UP�}��>��㏷��鋳=��4�J��qh���o�2��l�����]Y#����Ng�M �MijP��͟o����on/"�������^�v��^Pl�͛w����1�'_���H�7�����I$��#���/W�����I S\��h�e��U��m������@~�Tl�?ŧE�ύk������m.���(x����6�/��\���V&*G��@�8
+.%y�2~�Z�!�QN;)1*
�L-m��!@������S�g����g�r@��(�[Ov�c���(>
��m��	��+%��L2u�R0
�X
ў��M�����c9�q>=w�9�5��7.�S��zjU(���w!cH�^D�<&7�1������b�e�<y�r��
n%��oD�2FV<�"!Ls�FV��$ѱBb���@?��(N�Z��O-=ӄ�� 1=I�`���t�Z��@:�ݙc8�!�cl6H���.����9�\��orX����
�ǣ ��`��X$�QK��2�F+!�:�aJ��g"?1�R�hjՋW��N�I��!(4�@
e�b#�ʁщ$$����a�ለ^C=������3��#iibhe{����#^���c�X#(b�^���ç�
+9?��9j^a�q�5�ݸ�=���q�8���c`4�}�
IE��U�
����!v�!=�v�Z�Ѕ���j���E��΂�V*	��E������aʂ�7<�t!0�& )�A/��=t�wx�4'X]�ŭ�,�X������I�݆d"�ıh�qz�%�Y:\��G��y^�E��8$,�3�~��� �l��m)
+y
��L)��f�p�j+��+BP�V��uddk�I" ���'Y�@��D�J��ZBJ�0�Ns
+5����͵Ȇ�I�.M��uTm�}����KB�K���\�;$�� A>
��8�Fh�0"C4�4��H˞�#x�;!G:�w�g��M4P��pu	�21Qy۰f���5�M�R�&m��
+U �BI1>�_�PZ;�
E\@-��0����):(��$�H0�ϴ��匘B0l��-��P�A澅��R�~;rD?J�h9�w�����
|�cT�Bp$a��
�,����$�{1���:�ɸ2=v8�� �w<�
T���̓
+!-ٰP�bѤ�h�;����}5�9�(b����CQ^���2��Sd#����:N+>n��������irͫ�3�CqX��
�`z����
�O��^���%r.��Ú>~@�C��Zz�VۓWj�~�Po���)�h���?�R�����,������M�Mζ���Q4���
+�P�.��-��,$�~v�*���C?a�)s)MUd�F��:��;d��y�8"DV'�ם#�4�žhQ*�Oo����
N�Iu��њ�|�`v\Z2�	��,
1xn�
C "u���e+�[%�K�wCԒ��_2F�2v6*��r�}vݢA#��&9������0������a�t�yb /;
V^89
�6[��s�8 qi�x�J�
^r��#C�qÇ!b�<mϥ�׌%�K ����j&L~/��
+=�y����������������/��W�"��_��w��n/�v�G�����i�l��o�w��O�d�>�������T�
+/^|���>�7))�
+endstream
endobj
40 0 obj
<</CreationDate(D:20121008135946+02'00')/Creator(Adobe Illustrator CS6 \(Windows\))/ModDate(D:20121008135946+02'00')/Producer(Adobe PDF library 10.01)/Title(spaceGraphics)>>
endobj
xref
+0 41
+0000000000 65535 f
+0000000016 00000 n
+0000000076 00000 n
+0000016382 00000 n
+0000000000 00000 f
+0000016433 00000 n
+0000016868 00000 n
+0000042773 00000 n
+0000048240 00000 n
+0000045639 00000 n
+0000047262 00000 n
+0000047377 00000 n
+0000047135 00000 n
+0000045751 00000 n
+0000045897 00000 n
+0000046043 00000 n
+0000046189 00000 n
+0000044802 00000 n
+0000042837 00000 n
+0000044240 00000 n
+0000044288 00000 n
+0000045577 00000 n
+0000046935 00000 n
+0000046735 00000 n
+0000046550 00000 n
+0000046335 00000 n
+0000046430 00000 n
+0000046645 00000 n
+0000046830 00000 n
+0000047030 00000 n
+0000047500 00000 n
+0000047553 00000 n
+0000047847 00000 n
+0000047924 00000 n
+0000048071 00000 n
+0000048166 00000 n
+0000048313 00000 n
+0000048486 00000 n
+0000049462 00000 n
+0000072439 00000 n
+0000128986 00000 n
+trailer
+<</Size 41/Root 1 0 R/Info 40 0 R/ID[<838233C7729CC24BBB2639371FE8C8AF><647F4E0C077AE047AC783EC203F62904>]>>
+startxref
+129176
+%%EOF
diff --git a/space-game/solution/spaceArt/spaceArt.svg b/space-game/solution/spaceArt/spaceArt.svg
new file mode 100755
index 00000000..c75b5e98
--- /dev/null
+++ b/space-game/solution/spaceArt/spaceArt.svg
@@ -0,0 +1,157 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!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" xmlns:ev="http://www.w3.org/2001/xml-events" width="800.0px" height="480.0px" overflow="visible" viewBox="0.0 0.0 800.0 480.0" enable-background="new 0.0 0.0 800.0 480.0">
+	<defs>
+		<linearGradient id="Grad1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0 0.0178833 -0.01826477 0.0 468.95 300.0)" x1="-819.2" y1="0" x2="819.2" y2="0">
+			<stop offset="0.0" stop-color="#FFFFFF"/>
+			<stop offset="1.0" stop-color="#71CA35"/>
+		</linearGradient>
+		<linearGradient id="Grad2" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0 -0.0178833 -0.01826477 0.0 539.0 300.0)" x1="-819.2" y1="0" x2="819.2" y2="0">
+			<stop offset="0.0" stop-color="#FFFFFF"/>
+			<stop offset="1.0" stop-color="#CE3131"/>
+		</linearGradient>
+		<linearGradient id="Grad3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0 -0.06958008 -0.06338501 0.0 213.65 189.4)" x1="-819.2" y1="0" x2="819.2" y2="0">
+			<stop offset="0.0" stop-color="#FFFFFF"/>
+			<stop offset="1.0" stop-color="#FFFFFF" stop-opacity="0.0"/>
+		</linearGradient>
+		<linearGradient id="Grad4" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0 -0.10986328 0.10269165 0.0 454.9 106.45)" x1="-819.2" y1="0" x2="819.2" y2="0">
+			<stop offset="0.0" stop-color="#5E3F6B"/>
+			<stop offset="1.0" stop-color="#583D65"/>
+		</linearGradient>
+	</defs>
+	<rect width="800.0px" height="480.0px" x="0px" y="0px" fill="#5E3F6B"/>
+	<g>
+		<g transform="matrix(-1.0033417 0.0 0.0 1.0067139 320.65 407.95)">
+			<g transform="matrix(1.0 0.0 0.0 1.0 0.0 0.0)">
+				<path fill="#CCCCCC" stroke-linecap="round" stroke-linejoin="round" d="M -11.9 -11.75 L -8.95 -35.45 L -8.4 -36.7 C -8.066667 -37.033333 -7.6833334 -37.2 -7.25 -37.2 L 7.3 -37.2 C 7.733333 -37.2 8.099999 -37.033333 8.4 -36.7 C 8.733333 -36.36667 8.933332 -35.95 9.0 -35.45 L 12.0 -11.75 L 11.9 -11.65 L 10.35 -10.5 L 7.3 -35.2 L -4.0 -35.2 L -7.1 -10.5 L -8.65 -11.75 L -8.8 -11.65 L -8.9 -11.75 L -9.05 -11.65 L -9.15 -11.75 L -9.3 -11.65 L -9.4 -11.75 L -9.55 -11.65 L -9.65 -11.75 L -9.8 -11.65 L -9.9 -11.75 L -10.15 -11.55 L -10.4 -11.75 L -10.55 -11.65 L -10.65 -11.75 L -10.8 -11.65 L -10.9 -11.75 L -11.05 -11.65 L -11.15 -11.75 L -11.3 -11.65 L -11.4 -11.75 L -11.55 -11.65 L -11.65 -11.75 L -11.8 -11.65 L -11.9 -11.75 Z M 8.4 36.3 L 7.8 37.0 L 6.95 37.25 L 5.4 37.25 L 5.4 35.25 L 6.95 35.25 L 12.35 25.2 L 13.45 27.0 L 8.4 36.3 Z M 13.45 27.0 L 13.45 27.05 Z M -2.15 37.25 L -6.9 37.25 L -7.75 37.0 L -8.4 36.3 L -13.45 27.05 L -13.2 27.05 L -12.95 27.05 L -12.7 27.05 L -12.45 27.05 L -12.2 27.05 L -11.95 27.05 L -11.9 26.95 L -11.45 27.05 L -11.2 27.05 L -10.95 27.05 L -10.7 27.05 L -10.45 27.05 L -10.2 27.05 L -9.15 25.2 L -3.65 35.25 L -2.15 35.25 L -2.15 37.25 Z M -13.45 27.05 L -13.4 27.0 Z M -13.2 27.05 L -13.15 27.0 Z M -10.45 27.05 L -10.4 27.0 Z M -10.7 27.05 L -10.65 27.0 Z M -10.95 27.05 L -10.9 27.0 Z M -11.2 27.05 L -11.15 27.0 Z M -11.45 27.05 L -11.4 27.0 Z M -12.2 27.05 L -12.15 27.0 Z M -12.45 27.05 L -12.4 27.0 Z M -12.7 27.05 L -12.65 27.0 Z M -12.95 27.05 L -12.9 27.0 Z"/>
+				<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 12.0 -11.75 L 31.45 0.9 L 33.85 -0.4 L 33.95 -0.3 L 34.1 -0.4 L 34.2 -0.3 L 34.35 -0.4 L 34.45 -0.3 L 34.6 -0.4 L 34.7 -0.3 L 34.85 -0.4 L 34.95 -0.3 L 35.1 -0.4 L 35.2 -0.3 L 35.35 -0.4 L 35.5 -0.2 L 35.85 -0.4 L 35.95 -0.3 L 36.1 -0.4 L 36.2 -0.3 L 36.35 -0.4 L 36.45 -0.3 L 36.6 -0.4 L 36.7 -0.3 L 36.85 -0.4 L 36.95 -0.3 L 37.1 -0.4 L 38.4 1.1 L 32.9 4.1 L 14.0 -8.15 L 10.35 -10.5 L 11.9 -11.65 L 12.0 -11.75 Z M 34.95 21.95 L 33.65 22.6 L 33.25 22.8 L 31.05 23.25 L 31.05 21.2 L 32.9 20.8 L 38.4 17.8 L 37.55 20.5 L 34.95 21.95 Z M 15.7 24.5 L 15.7 26.55 L 13.45 27.05 L 12.35 25.2 L 15.7 24.5 Z M 13.45 27.05 L 13.45 27.0 Z M -15.65 26.55 L -15.65 26.5 L -15.4 26.55 L -15.15 26.55 L -14.9 26.55 L -14.65 26.55 L -14.4 26.55 L -14.15 26.55 L -14.15 26.45 L -13.65 26.55 L -13.4 26.55 L -13.15 26.55 L -12.9 26.55 L -12.65 26.55 L -12.4 26.55 L -12.4 24.5 L -9.15 25.2 L -10.2 27.05 L -10.4 27.0 L -10.65 27.0 L -10.9 27.0 L -11.15 27.0 L -11.4 27.0 L -11.9 26.95 L -11.95 27.05 L -12.15 27.0 L -12.4 27.0 L -12.65 27.0 L -12.9 27.0 L -13.15 27.0 L -13.4 27.0 L -15.65 26.55 Z M -13.4 27.0 L -13.45 27.05 Z M -15.4 26.55 L -15.4 26.5 Z M -13.15 27.0 L -13.2 27.05 Z M -15.15 26.55 L -15.15 26.5 Z M -12.9 27.0 L -12.95 27.05 Z M -14.9 26.55 L -14.9 26.5 Z M -12.65 27.0 L -12.7 27.05 Z M -14.65 26.55 L -14.65 26.5 Z M -12.4 27.0 L -12.45 27.05 Z M -14.4 26.55 L -14.4 26.5 Z M -12.15 27.0 L -12.2 27.05 Z M -13.65 26.55 L -13.65 26.5 Z M -11.4 27.0 L -11.45 27.05 Z M -13.4 26.55 L -13.4 26.5 Z M -11.15 27.0 L -11.2 27.05 Z M -13.15 26.55 L -13.15 26.5 Z M -10.9 27.0 L -10.95 27.05 Z M -12.9 26.55 L -12.9 26.5 Z M -10.65 27.0 L -10.7 27.05 Z M -12.65 26.55 L -12.65 26.5 Z M -10.4 27.0 L -10.45 27.05 Z M -33.15 22.8 L -33.6 22.6 L -34.8 21.95 L -34.25 20.5 L -35.1 17.8 L -29.6 20.8 L -27.85 21.2 L -27.85 23.25 L -28.1 23.2 L -28.35 23.2 L -28.6 23.2 L -28.85 23.2 L -29.1 23.2 L -29.6 23.15 L -29.6 23.25 L -29.85 23.2 L -30.1 23.2 L -30.35 23.2 L -30.6 23.2 L -30.85 23.2 L -31.1 23.2 L -33.15 22.8 Z M -31.1 23.2 L -31.1 23.25 Z M -30.85 23.2 L -30.85 23.25 Z M -30.6 23.2 L -30.6 23.25 Z M -28.1 23.2 L -28.1 23.25 Z M -28.35 23.2 L -28.35 23.25 Z M -28.6 23.2 L -28.6 23.25 Z M -28.85 23.2 L -28.85 23.25 Z M -29.1 23.2 L -29.1 23.25 Z M -29.85 23.2 L -29.85 23.25 Z M -30.1 23.2 L -30.1 23.25 Z M -30.35 23.2 L -30.35 23.25 Z M -33.85 -0.4 L -31.5 0.9 L -11.9 -11.75 L -11.8 -11.65 L -11.65 -11.75 L -11.55 -11.65 L -11.4 -11.75 L -11.3 -11.65 L -11.15 -11.75 L -11.05 -11.65 L -10.9 -11.75 L -10.8 -11.65 L -10.65 -11.75 L -10.55 -11.65 L -10.4 -11.75 L -10.15 -11.55 L -9.9 -11.75 L -9.8 -11.65 L -9.65 -11.75 L -9.55 -11.65 L -9.4 -11.75 L -9.3 -11.65 L -9.15 -11.75 L -9.05 -11.65 L -8.9 -11.75 L -8.8 -11.65 L -8.65 -11.75 L -7.1 -10.5 L -10.7 -8.15 L -29.6 4.1 L -35.1 1.1 L -33.85 -0.4 Z"/>
+				<path fill="#802B2B" stroke-linecap="round" stroke-linejoin="round" d="M 33.85 -0.4 L 36.2 -5.2 L 36.85 -5.95 C 37.116665 -6.15 37.416664 -6.25 37.75 -6.25 L 43.0 -6.25 L 43.9 -5.95 L 44.55 -5.1 L 44.75 -4.0 L 42.1 22.95 L 41.6 24.1 C 41.333332 24.4 41.016666 24.6 40.65 24.7 L 40.25 24.75 L 40.0 24.75 L 39.75 24.75 L 39.5 24.75 L 39.25 24.75 L 38.85 24.7 L 38.5 24.75 L 38.25 24.75 L 38.0 24.75 L 37.75 24.75 L 37.5 24.75 L 37.25 24.75 L 36.25 24.5 L 35.5 23.55 L 34.95 21.95 L 37.55 20.5 L 38.4 17.8 L 40.35 22.7 L 43.0 -4.25 L 41.0 -4.25 L 38.4 1.1 L 37.1 -0.4 L 36.95 -0.3 L 36.85 -0.4 L 36.7 -0.3 L 36.6 -0.4 L 36.45 -0.3 L 36.35 -0.4 L 36.2 -0.3 L 36.1 -0.4 L 35.95 -0.3 L 35.85 -0.4 L 35.5 -0.2 L 35.35 -0.4 L 35.2 -0.3 L 35.1 -0.4 L 34.95 -0.3 L 34.85 -0.4 L 34.7 -0.3 L 34.6 -0.4 L 34.45 -0.3 L 34.35 -0.4 L 34.2 -0.3 L 34.1 -0.4 L 33.95 -0.3 L 33.85 -0.4 Z M 5.4 37.25 L -2.15 37.25 L -2.15 35.25 L 5.4 35.25 L 5.4 37.25 Z M -34.8 21.95 L -35.45 23.55 L -36.25 24.5 L -37.15 24.75 L -37.4 24.75 L -37.65 24.75 L -37.9 24.75 L -38.2 24.75 L -38.55 24.7 L -38.9 24.75 L -39.15 24.75 L -39.4 24.75 L -39.65 24.75 L -39.9 24.75 L -40.15 24.75 L -40.6 24.7 C -41.0 24.6 -41.333332 24.4 -41.6 24.1 L -42.0 22.95 L -44.65 -4.0 L -44.55 -5.1 L -43.9 -5.95 L -42.95 -6.25 L -37.75 -6.25 L -36.9 -5.95 L -36.25 -5.25 L -33.85 -0.4 L -35.1 1.1 L -37.75 -4.25 L -39.7 -4.25 L -37.05 22.7 L -35.1 17.8 L -34.25 20.5 L -34.8 21.95 Z"/>
+				<path fill="#CAA202" stroke-linecap="round" stroke-linejoin="round" d="M 31.05 23.25 L 15.7 26.55 L 15.7 24.5 L 19.5 23.65 L 23.4 22.85 L 27.2 22.05 L 31.05 21.2 L 31.05 23.25 Z M -31.1 23.25 L -31.1 23.2 L -30.85 23.25 L -30.6 23.25 L -30.35 23.25 L -30.1 23.25 L -29.85 23.25 L -29.6 23.25 L -29.6 23.15 L -29.1 23.25 L -28.85 23.25 L -28.6 23.25 L -28.35 23.25 L -28.1 23.25 L -27.85 23.25 L -27.85 21.2 L -23.95 22.05 L -20.1 22.85 L -16.3 23.65 L -12.4 24.5 L -12.4 26.55 L -12.65 26.5 L -12.9 26.5 L -13.15 26.5 L -13.4 26.5 L -13.65 26.5 L -14.15 26.45 L -14.15 26.55 L -14.4 26.5 L -14.65 26.5 L -14.9 26.5 L -15.15 26.5 L -15.4 26.5 L -15.65 26.5 L -31.1 23.25 Z M -15.65 26.5 L -15.65 26.55 Z M -30.85 23.25 L -30.85 23.2 Z M -15.4 26.5 L -15.4 26.55 Z M -30.6 23.25 L -30.6 23.2 Z M -15.15 26.5 L -15.15 26.55 Z M -30.35 23.25 L -30.35 23.2 Z M -14.9 26.5 L -14.9 26.55 Z M -30.1 23.25 L -30.1 23.2 Z M -14.65 26.5 L -14.65 26.55 Z M -29.85 23.25 L -29.85 23.2 Z M -14.4 26.5 L -14.4 26.55 Z M -29.1 23.25 L -29.1 23.2 Z M -13.65 26.5 L -13.65 26.55 Z M -28.85 23.25 L -28.85 23.2 Z M -13.4 26.5 L -13.4 26.55 Z M -28.6 23.25 L -28.6 23.2 Z M -13.15 26.5 L -13.15 26.55 Z M -28.35 23.25 L -28.35 23.2 Z M -12.9 26.5 L -12.9 26.55 Z M -28.1 23.25 L -28.1 23.2 Z M -12.65 26.5 L -12.65 26.55 Z"/>
+				<path fill="#F2F2F2" stroke-linecap="round" stroke-linejoin="round" d="M -7.1 -10.5 L -4.0 -35.2 L 7.3 -35.2 L 10.35 -10.5 L 12.35 5.45 L 12.35 25.2 L 6.95 35.25 L 5.4 35.25 L 9.9 26.8 L 9.9 5.45 L 6.5 -31.7 L -3.25 -31.7 L -6.65 5.45 L -6.65 26.8 L -2.15 35.25 L -3.65 35.25 L -9.15 25.2 L -9.15 5.45 L -7.1 -10.5 Z"/>
+				<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M -2.15 35.25 L -6.65 26.8 L -6.65 5.45 L -3.25 -31.7 L 6.5 -31.7 L 9.9 5.45 L 9.9 26.8 L 5.4 35.25 L -2.15 35.25 Z M 8.05 -2.55 L 7.95 -3.95 L -4.65 -3.95 L -4.8 -2.55 L -5.65 5.45 L 8.9 5.45 L 8.05 -2.55 Z M -37.75 -4.25 L -35.1 1.1 L -35.1 17.8 L -37.05 22.7 L -39.7 -4.25 L -37.75 -4.25 Z M 40.35 22.7 L 38.4 17.8 L 38.4 1.1 L 41.0 -4.25 L 43.0 -4.25 L 40.35 22.7 Z"/>
+				<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 12.35 25.2 L 12.35 5.45 L 10.35 -10.5 L 14.0 -8.15 L 15.7 5.45 L 15.7 18.2 L 15.7 19.15 L 15.7 24.5 L 12.35 25.2 Z M -12.4 19.15 L -12.4 18.2 L -12.4 5.45 L -10.7 -8.15 L -7.1 -10.5 L -9.15 5.45 L -9.15 25.2 L -12.4 24.5 L -12.4 19.15 Z"/>
+				<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 14.0 -8.15 L 32.9 4.1 L 32.9 20.8 L 31.05 21.2 L 31.05 15.9 L 31.05 14.95 L 15.7 18.2 L 15.7 5.45 L 14.0 -8.15 Z M -27.85 15.9 L -27.85 21.2 L -29.6 20.8 L -29.6 4.1 L -10.7 -8.15 L -12.4 5.45 L -12.4 18.2 L -27.85 14.95 L -27.85 15.9 Z"/>
+				<path fill="#B9CED7" stroke-linecap="round" stroke-linejoin="round" d="M 32.9 4.1 L 38.4 1.1 L 38.4 17.8 L 32.9 20.8 L 32.9 4.1 Z M -23.95 16.7 L -27.85 15.9 L -27.85 14.95 L -12.4 18.2 L -12.4 19.15 L -16.3 18.35 L -20.1 17.55 L -23.95 16.7 Z M -29.6 4.1 L -29.6 20.8 L -35.1 17.8 L -35.1 1.1 L -29.6 4.1 Z M 23.4 17.55 L 19.5 18.35 L 15.7 19.15 L 15.7 18.2 L 31.05 14.95 L 31.05 15.9 L 27.2 16.7 L 23.4 17.55 Z"/>
+				<path fill="#C44D4D" stroke-linecap="round" stroke-linejoin="round" d="M 7.95 -3.95 L 8.05 -2.55 L -4.8 -2.55 L -4.65 -3.95 L 7.95 -3.95 Z"/>
+				<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M -4.8 -2.55 L 8.05 -2.55 L 8.9 5.45 L -5.65 5.45 L -4.8 -2.55 Z"/>
+				<path fill="#ECBD02" stroke-linecap="round" stroke-linejoin="round" d="M -27.85 15.9 L -23.95 16.7 L -23.95 22.05 L -27.85 21.2 L -27.85 15.9 Z M -20.1 17.55 L -16.3 18.35 L -16.3 23.65 L -20.1 22.85 L -20.1 17.55 Z M 19.5 23.65 L 19.5 18.35 L 23.4 17.55 L 23.4 22.85 L 19.5 23.65 Z M 31.05 15.9 L 31.05 21.2 L 27.2 22.05 L 27.2 16.7 L 31.05 15.9 Z"/>
+				<path fill="#FFCC00" stroke-linecap="round" stroke-linejoin="round" d="M -23.95 22.05 L -23.95 16.7 L -20.1 17.55 L -20.1 22.85 L -23.95 22.05 Z M -16.3 18.35 L -12.4 19.15 L -12.4 24.5 L -16.3 23.65 L -16.3 18.35 Z M 19.5 18.35 L 19.5 23.65 L 15.7 24.5 L 15.7 19.15 L 19.5 18.35 Z M 23.4 22.85 L 23.4 17.55 L 27.2 16.7 L 27.2 22.05 L 23.4 22.85 Z"/>
+			</g>
+		</g>
+		<g transform="matrix(1.0 0.0 0.0 1.0 0.0 0.0)">
+			<path fill="#802B2B" stroke-linecap="round" stroke-linejoin="round" d="M 283.15 407.55 L 280.8 402.7 L 280.15 401.95 C 279.88333 401.75 279.6 401.65 279.3 401.65 L 277.25 401.65 C 276.94998 401.65 276.65 401.75 276.35 401.95 C 276.05 402.15 275.8333 402.43332 275.7 402.8 L 275.5 403.9 L 278.2 431.05 C 278.23334 431.48334 278.38333 431.86667 278.65 432.2 C 278.91666 432.5 279.25 432.69998 279.65 432.8 L 280.75 432.6 L 281.5 431.65 L 282.75 428.6 L 281.9 425.85 L 279.95 430.8 L 277.25 403.65 L 279.3 403.65 L 281.9 409.05 L 283.15 407.55 Z M 315.0 445.45 L 322.55 445.45 L 322.55 443.45 L 315.0 443.45 L 315.0 445.45 Z M 354.75 428.6 L 356.0 431.65 L 356.75 432.6 L 357.85 432.8 C 358.25 432.69998 358.58334 432.5 358.85 432.2 L 359.3 431.05 L 361.95 403.9 L 361.85 402.8 L 361.2 401.95 C 360.9 401.75 360.5833 401.65 360.25 401.65 L 358.3 401.65 C 357.96664 401.65 357.66666 401.75 357.4 401.95 L 356.75 402.65 L 354.35 407.55 L 355.65 409.05 L 358.3 403.65 L 360.25 403.65 L 357.6 430.8 L 355.65 425.85 L 354.75 428.6 Z"/>
+			<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 282.75 428.6 L 286.65 430.7 L 287.05 430.9 L 289.25 431.35 L 289.25 429.3 L 287.4 428.9 L 281.9 425.85 L 282.75 428.6 Z M 304.65 434.7 L 306.9 435.2 L 308.0 433.3 L 304.65 432.6 L 304.65 434.7 Z M 330.65 435.2 L 332.85 434.7 L 332.85 432.6 L 329.6 433.3 L 330.65 435.2 Z M 348.35 431.35 L 350.45 430.9 L 350.85 430.7 L 354.75 428.6 L 355.65 425.85 L 350.1 428.9 L 348.35 429.3 L 348.35 431.35 Z M 354.35 407.55 L 350.2 409.8 L 329.1 396.1 L 327.55 397.4 L 331.15 399.75 L 350.1 412.1 L 355.65 409.05 L 354.35 407.55 Z M 308.4 396.1 L 287.3 409.8 L 283.15 407.55 L 281.9 409.05 L 287.4 412.1 L 306.35 399.75 L 310.0 397.4 L 308.4 396.1 Z"/>
+			<path fill="#CAA202" stroke-linecap="round" stroke-linejoin="round" d="M 289.25 431.35 L 304.65 434.7 L 304.65 432.6 L 300.8 431.75 L 296.95 430.95 L 293.1 430.15 L 289.25 429.3 L 289.25 431.35 Z M 332.85 434.7 L 348.35 431.35 L 348.35 429.3 L 344.45 430.15 L 340.6 430.95 L 336.75 431.75 L 332.85 432.6 L 332.85 434.7 Z"/>
+			<path fill="#CCCCCC" stroke-linecap="round" stroke-linejoin="round" d="M 306.9 435.2 L 311.95 444.5 L 312.6 445.2 L 313.45 445.45 L 315.0 445.45 L 315.0 443.45 L 313.45 443.45 L 308.0 433.3 L 306.9 435.2 Z M 322.55 445.45 L 324.05 445.45 L 324.9 445.2 L 325.55 444.5 L 330.65 435.2 L 329.6 433.3 L 324.05 443.45 L 322.55 443.45 L 322.55 445.45 Z M 329.1 396.1 L 326.15 372.25 C 326.0833 371.75 325.8833 371.33334 325.55 371.0 C 325.25 370.66666 324.86667 370.5 324.4 370.5 L 313.1 370.5 C 312.6667 370.5 312.28336 370.66666 311.95 371.0 C 311.65 371.33334 311.44998 371.75 311.35 372.25 L 308.4 396.1 L 310.0 397.4 L 313.1 372.5 L 324.4 372.5 L 327.55 397.4 L 329.1 396.1 Z"/>
+			<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M 281.9 409.05 L 279.3 403.65 L 277.25 403.65 L 279.95 430.8 L 281.9 425.85 L 281.9 409.05 Z M 322.55 443.45 L 327.1 434.95 L 327.1 413.45 L 323.7 376.05 L 313.9 376.05 L 310.5 413.45 L 310.5 434.95 L 315.0 443.45 L 322.55 443.45 Z M 312.3 405.4 L 312.45 403.95 L 325.1 403.95 L 325.2 405.4 L 326.1 413.45 L 311.5 413.45 L 312.3 405.4 Z M 358.3 403.65 L 355.65 409.05 L 355.65 425.85 L 357.6 430.8 L 360.25 403.65 L 358.3 403.65 Z"/>
+			<path fill="#F2F2F2" stroke-linecap="round" stroke-linejoin="round" d="M 313.1 372.5 L 310.0 397.4 L 308.0 413.45 L 308.0 433.3 L 313.45 443.45 L 315.0 443.45 L 310.5 434.95 L 310.5 413.45 L 313.9 376.05 L 323.7 376.05 L 327.1 413.45 L 327.1 434.95 L 322.55 443.45 L 324.05 443.45 L 329.6 433.3 L 329.6 413.45 L 327.55 397.4 L 324.4 372.5 L 313.1 372.5 Z"/>
+			<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 327.55 397.4 L 329.6 413.45 L 329.6 433.3 L 332.85 432.6 L 332.85 427.25 L 332.85 426.25 L 332.85 413.45 L 331.15 399.75 L 327.55 397.4 Z M 308.0 433.3 L 308.0 413.45 L 310.0 397.4 L 306.35 399.75 L 304.65 413.45 L 304.65 426.25 L 304.65 427.25 L 304.65 432.6 L 308.0 433.3 Z"/>
+			<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 331.15 399.75 L 332.85 413.45 L 332.85 426.25 L 348.35 423.0 L 348.35 423.95 L 348.35 429.3 L 350.1 428.9 L 350.1 412.1 L 331.15 399.75 Z M 304.65 413.45 L 306.35 399.75 L 287.4 412.1 L 287.4 428.9 L 289.25 429.3 L 289.25 423.95 L 289.25 423.0 L 304.65 426.25 L 304.65 413.45 Z"/>
+			<path fill="#B9CED7" stroke-linecap="round" stroke-linejoin="round" d="M 332.85 426.25 L 332.85 427.25 L 336.75 426.4 L 340.6 425.6 L 344.45 424.75 L 348.35 423.95 L 348.35 423.0 L 332.85 426.25 Z M 350.1 412.1 L 350.1 428.9 L 355.65 425.85 L 355.65 409.05 L 350.1 412.1 Z M 304.65 426.25 L 289.25 423.0 L 289.25 423.95 L 293.1 424.75 L 296.95 425.6 L 300.8 426.4 L 304.65 427.25 L 304.65 426.25 Z M 287.4 428.9 L 287.4 412.1 L 281.9 409.05 L 281.9 425.85 L 287.4 428.9 Z"/>
+			<path fill="#FFCC00" stroke-linecap="round" stroke-linejoin="round" d="M 332.85 427.25 L 332.85 432.6 L 336.75 431.75 L 336.75 426.4 L 332.85 427.25 Z M 293.1 424.75 L 293.1 430.15 L 296.95 430.95 L 296.95 425.6 L 293.1 424.75 Z M 300.8 426.4 L 300.8 431.75 L 304.65 432.6 L 304.65 427.25 L 300.8 426.4 Z M 340.6 425.6 L 340.6 430.95 L 344.45 430.15 L 344.45 424.75 L 340.6 425.6 Z"/>
+			<path fill="#C44D4D" stroke-linecap="round" stroke-linejoin="round" d="M 312.45 403.95 L 312.3 405.4 L 325.2 405.4 L 325.1 403.95 L 312.45 403.95 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 325.2 405.4 L 312.3 405.4 L 311.5 413.45 L 326.1 413.45 L 325.2 405.4 Z"/>
+			<path fill="#ECBD02" stroke-linecap="round" stroke-linejoin="round" d="M 348.35 429.3 L 348.35 423.95 L 344.45 424.75 L 344.45 430.15 L 348.35 429.3 Z M 289.25 423.95 L 289.25 429.3 L 293.1 430.15 L 293.1 424.75 L 289.25 423.95 Z M 300.8 431.75 L 300.8 426.4 L 296.95 425.6 L 296.95 430.95 L 300.8 431.75 Z M 336.75 426.4 L 336.75 431.75 L 340.6 430.95 L 340.6 425.6 L 336.75 426.4 Z"/>
+			<path fill="#996A4D" stroke-linecap="round" stroke-linejoin="round" d="M 634.35 370.45 L 645.45 370.45 C 645.95 370.45 646.38336 370.61667 646.75 370.95 C 647.11664 371.28336 647.35 371.7 647.45 372.2 L 650.15 391.15 L 648.4 392.85 L 647.75 388.35 L 645.45 372.5 L 638.95 372.5 L 633.55 372.5 L 634.35 370.45 Z M 662.95 403.0 C 666.95 405.23334 670.95 407.5 674.95 409.8 L 679.7 407.55 L 682.45 402.7 C 682.6167 402.36667 682.8667 402.11667 683.2 401.95 C 683.5 401.75 683.8333 401.65 684.2 401.65 L 685.95 401.65 L 686.5 403.65 L 684.2 403.65 L 681.2 409.05 L 674.85 412.05 L 662.9 405.25 L 661.75 404.6 L 662.95 403.0 Z M 636.7 445.45 L 632.9 445.45 L 631.95 445.2 L 631.2 444.5 L 625.4 435.2 L 614.3 433.05 L 614.0 430.95 L 616.2 431.35 L 626.6 433.3 L 632.9 443.45 L 635.65 443.45 L 637.8 443.45 L 636.7 445.45 Z M 604.3 409.1 L 623.75 398.05 L 624.8 399.75 L 621.6 401.6 L 605.9 410.5 L 604.55 411.25 L 604.3 409.1 Z"/>
+			<path fill="#CCCCCC" stroke-linecap="round" stroke-linejoin="round" d="M 650.15 391.15 L 650.85 396.1 L 649.0 397.35 L 648.4 392.85 L 650.15 391.15 Z M 652.55 435.2 L 646.75 444.5 L 646.05 445.2 L 645.05 445.45 L 643.3 445.45 L 643.3 443.45 L 645.05 443.45 L 651.3 433.3 L 652.55 435.2 Z M 627.15 396.1 L 630.55 372.2 C 630.6167 371.7 630.8334 371.28336 631.2 370.95 C 631.56665 370.61667 632.0 370.45 632.5 370.45 L 634.35 370.45 L 633.55 372.5 L 632.5 372.5 L 628.95 397.35 L 627.15 396.1 Z"/>
+			<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 650.85 396.1 L 662.95 403.0 L 661.75 404.6 L 653.15 399.75 L 649.0 397.35 L 650.85 396.1 Z M 661.75 404.6 L 661.7 404.6 Z M 680.2 428.6 L 675.7 430.7 L 675.25 430.9 L 672.75 431.35 L 672.75 429.3 L 674.85 428.9 C 676.95 427.9 679.0667 426.88333 681.2 425.85 L 680.2 428.6 Z M 655.1 434.7 L 652.55 435.2 L 651.3 433.3 L 655.1 432.6 L 655.1 434.7 Z M 605.15 431.35 L 602.75 430.9 L 602.25 430.7 L 597.8 428.6 L 596.8 425.85 L 603.1 428.9 L 605.15 429.3 L 605.15 431.35 Z M 598.25 407.55 L 603.0 409.8 L 604.3 409.1 L 604.55 411.25 L 603.1 412.05 L 596.8 409.05 L 598.25 407.55 Z M 623.75 398.05 L 627.15 396.1 L 628.95 397.35 L 624.8 399.75 L 623.75 398.05 Z"/>
+			<path fill="#802B2B" stroke-linecap="round" stroke-linejoin="round" d="M 685.95 401.65 L 686.5 401.65 L 687.55 401.95 L 688.3 402.8 L 688.5 403.9 L 685.45 431.05 L 684.9 432.2 L 683.8 432.8 L 682.5 432.6 C 682.10004 432.36667 681.8167 432.05 681.65 431.65 L 680.2 428.6 L 681.2 425.85 L 683.45 430.8 L 685.45 412.9 L 686.5 403.65 L 685.95 401.65 Z M 643.3 445.45 L 636.7 445.45 L 637.8 443.45 L 643.3 443.45 L 643.3 445.45 Z M 597.8 428.6 L 596.4 431.65 L 595.5 432.6 L 594.25 432.8 C 593.7833 432.69998 593.39996 432.5 593.1 432.2 C 592.8 431.86667 592.6333 431.48334 592.6 431.05 L 589.55 403.9 C 589.48334 403.5 589.5333 403.13333 589.7 402.8 C 589.8667 402.43332 590.1167 402.15 590.45 401.95 L 591.5 401.65 L 593.75 401.65 L 594.75 401.95 L 595.5 402.65 L 598.25 407.55 L 596.8 409.05 L 593.75 403.65 L 591.5 403.65 L 594.55 430.8 L 596.8 425.85 L 597.8 428.6 Z"/>
+			<path fill="#CAA202" stroke-linecap="round" stroke-linejoin="round" d="M 672.75 431.35 L 655.1 434.7 L 655.1 432.6 L 659.5 431.75 L 663.95 430.95 L 668.35 430.15 L 672.75 429.3 L 672.75 431.35 Z M 614.3 433.05 L 605.15 431.35 L 605.15 429.3 L 609.6 430.15 L 614.0 430.95 L 614.3 433.05 Z"/>
+			<path fill="#B7886A" stroke-linecap="round" stroke-linejoin="round" d="M 633.55 372.5 L 638.95 372.5 L 640.3 377.9 L 637.65 385.1 L 642.8 392.4 L 647.75 388.35 L 648.4 392.85 L 646.45 393.9 L 641.8 396.3 L 635.3 385.45 L 636.45 379.05 L 635.1 376.0 L 633.55 372.5 Z M 661.7 404.6 L 661.75 404.6 L 662.9 405.25 L 666.65 414.2 L 677.55 417.45 L 683.45 411.05 L 684.45 405.75 L 686.5 403.65 L 685.45 412.9 L 681.2 416.25 L 676.2 420.15 L 674.85 419.5 L 665.55 415.35 L 661.7 404.6 Z M 626.6 425.5 L 629.45 427.0 L 634.45 429.55 L 638.7 436.75 L 637.8 443.45 L 635.65 443.45 L 636.9 437.85 L 634.15 432.45 L 625.3 427.8 L 616.2 431.35 L 614.0 430.95 L 618.4 429.05 L 622.7 427.25 L 622.85 427.25 L 622.85 427.15 L 626.6 425.5 Z M 621.6 401.6 L 624.8 399.75 L 623.35 409.85 L 611.2 414.85 L 604.55 411.25 L 605.9 410.5 L 611.3 413.05 L 619.9 409.65 L 621.6 401.6 Z"/>
+			<path fill="#C7A48D" stroke-linecap="round" stroke-linejoin="round" d="M 638.95 372.5 L 645.45 372.5 L 647.75 388.35 L 642.8 392.4 L 637.65 385.1 L 640.3 377.9 L 638.95 372.5 Z M 621.6 401.6 L 619.9 409.65 L 611.3 413.05 L 605.9 410.5 L 621.6 401.6 Z M 616.2 431.35 L 625.3 427.8 L 634.15 432.45 L 636.9 437.85 L 635.65 443.45 L 632.9 443.45 L 626.6 433.3 L 616.2 431.35 Z M 684.2 403.65 L 686.5 403.65 L 684.45 405.75 L 683.45 411.05 L 677.55 417.45 L 666.65 414.2 L 662.9 405.25 L 674.85 412.05 L 681.2 409.05 L 684.2 403.65 Z"/>
+			<path fill="#F2F2F2" stroke-linecap="round" stroke-linejoin="round" d="M 646.45 393.9 L 648.4 392.85 L 649.0 397.35 L 651.3 413.45 L 651.3 433.3 L 645.05 443.45 L 643.3 443.45 L 648.45 434.95 L 648.45 413.45 L 646.45 393.9 Z M 633.55 372.5 L 635.1 376.0 L 633.35 376.0 L 629.45 413.45 L 629.45 427.0 L 626.6 425.5 L 626.6 413.45 L 628.95 397.35 L 632.5 372.5 L 633.55 372.5 Z"/>
+			<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M 635.1 376.0 L 636.45 379.05 L 635.3 385.45 L 641.8 396.3 L 646.45 393.9 L 648.45 413.45 L 648.45 434.95 L 643.3 443.45 L 637.8 443.45 L 638.7 436.75 L 634.45 429.55 L 629.45 427.0 L 629.45 413.45 L 633.35 376.0 L 635.1 376.0 Z M 631.6 405.35 L 630.6 413.45 L 647.3 413.45 L 646.35 405.35 L 646.2 403.95 L 631.75 403.95 L 631.6 405.35 Z M 596.8 409.05 L 596.8 425.85 L 594.55 430.8 L 591.5 403.65 L 593.75 403.65 L 596.8 409.05 Z M 681.2 425.85 L 681.2 416.25 L 685.45 412.9 L 683.45 430.8 L 681.2 425.85 Z"/>
+			<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 651.3 433.3 L 651.3 413.45 L 649.0 397.35 L 653.15 399.75 L 655.1 413.45 L 655.1 426.25 L 655.1 427.25 L 655.1 432.6 L 651.3 433.3 Z M 628.95 397.35 L 626.6 413.45 L 626.6 425.5 L 622.85 427.15 L 622.85 426.25 L 622.85 413.45 L 623.35 409.85 L 624.8 399.75 L 628.95 397.35 Z"/>
+			<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 653.15 399.75 L 661.7 404.6 L 665.55 415.35 L 674.85 419.5 L 674.85 428.9 L 672.75 429.3 L 672.75 423.95 L 672.75 423.0 L 655.1 426.25 L 655.1 413.45 L 653.15 399.75 Z M 604.55 411.25 L 611.2 414.85 L 623.35 409.85 L 622.85 413.45 L 622.85 426.25 L 605.15 423.0 L 605.15 423.95 L 605.15 429.3 L 603.1 428.9 L 603.1 412.05 L 604.55 411.25 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 630.6 413.45 L 631.6 405.35 L 646.35 405.35 L 647.3 413.45 L 630.6 413.45 Z"/>
+			<path fill="#C44D4D" stroke-linecap="round" stroke-linejoin="round" d="M 646.35 405.35 L 631.6 405.35 L 631.75 403.95 L 646.2 403.95 L 646.35 405.35 Z"/>
+			<path fill="#B9CED7" stroke-linecap="round" stroke-linejoin="round" d="M 622.85 426.25 L 622.85 427.15 L 622.85 427.25 L 622.7 427.25 L 618.4 426.4 L 614.0 425.6 L 609.6 424.75 L 605.15 423.95 L 605.15 423.0 L 622.85 426.25 Z M 603.1 412.05 L 603.1 428.9 L 596.8 425.85 L 596.8 409.05 L 603.1 412.05 Z M 681.2 416.25 L 681.2 425.85 C 679.06665 426.88333 676.94995 427.9 674.85 428.9 L 674.85 419.5 L 676.2 420.15 L 681.2 416.25 Z M 663.95 425.6 L 659.5 426.4 L 655.1 427.25 L 655.1 426.25 L 672.75 423.0 L 672.75 423.95 L 668.35 424.75 L 663.95 425.6 Z"/>
+			<path fill="#ECBD02" stroke-linecap="round" stroke-linejoin="round" d="M 605.15 429.3 L 605.15 423.95 L 609.6 424.75 L 609.6 430.15 L 605.15 429.3 Z M 614.0 425.6 L 618.4 426.4 L 618.4 429.05 L 614.0 430.95 L 614.0 425.6 Z M 659.5 426.4 L 663.95 425.6 L 663.95 430.95 L 659.5 431.75 L 659.5 426.4 Z M 668.35 424.75 L 672.75 423.95 L 672.75 429.3 L 668.35 430.15 L 668.35 424.75 Z"/>
+			<path fill="#FFCC00" stroke-linecap="round" stroke-linejoin="round" d="M 609.6 424.75 L 614.0 425.6 L 614.0 430.95 L 609.6 430.15 L 609.6 424.75 Z M 618.4 426.4 L 622.7 427.25 L 618.4 429.05 L 618.4 426.4 Z M 659.5 426.4 L 659.5 431.75 L 655.1 432.6 L 655.1 427.25 L 659.5 426.4 Z M 663.95 430.95 L 663.95 425.6 L 668.35 424.75 L 668.35 430.15 L 663.95 430.95 Z"/>
+			<path fill="#C4C4C4" stroke-linecap="round" stroke-linejoin="round" d="M 676.45 149.05 L 676.45 150.65 L 674.25 150.65 L 674.25 154.05 L 672.65 152.8 L 672.65 150.65 C 672.65 150.21666 672.8167 149.84999 673.15 149.55 C 673.45 149.21667 673.81665 149.05 674.25 149.05 L 676.45 149.05 Z M 665.95 197.45 L 665.95 199.05 L 662.4 199.05 L 661.45 198.75 L 660.9 197.95 C 660.76666 197.61667 660.76666 197.28334 660.9 196.95 L 671.4 167.15 L 674.25 163.75 L 662.4 197.45 L 665.95 197.45 Z M 631.5 151.25 L 631.5 149.65 L 651.5 149.65 L 651.5 151.25 L 631.5 151.25 Z M 606.55 149.05 L 608.75 149.05 C 609.18335 149.05 609.5667 149.21667 609.9 149.55 C 610.2 149.85 610.35 150.21667 610.35 150.65 L 610.35 152.8 L 608.75 154.05 L 608.75 150.65 L 606.55 150.65 L 606.55 149.05 Z M 617.1 197.45 L 620.6 197.45 L 608.75 163.75 L 611.65 167.15 L 622.1 196.95 L 622.15 197.95 L 621.55 198.75 L 620.6 199.05 L 617.1 199.05 L 617.1 197.45 Z"/>
+			<path fill="#8F9746" stroke-linecap="round" stroke-linejoin="round" d="M 676.45 150.65 L 676.45 149.05 L 681.0 149.05 C 681.3333 149.05 681.6333 149.15001 681.9 149.35 L 682.5 150.1 L 690.4 170.55 L 690.5 171.4 L 690.1 172.25 L 667.15 198.55 L 666.65 198.95 L 665.95 199.05 L 665.95 197.45 L 676.95 184.8 L 688.9 171.15 L 686.05 163.75 L 681.0 150.65 L 676.45 150.65 Z M 659.4 171.95 L 660.65 173.15 L 653.5 187.4 L 652.9 188.05 L 652.1 188.3 L 630.95 188.3 L 630.1 188.05 L 629.5 187.4 L 622.4 173.15 L 623.6 171.95 L 630.95 186.7 L 652.1 186.7 L 659.4 171.95 Z M 631.5 149.65 L 631.5 151.25 L 623.6 157.6 L 623.25 155.9 L 630.55 150.0 C 630.81665 149.76666 631.1333 149.65 631.5 149.65 Z M 651.5 151.25 L 651.5 149.65 C 651.89996 149.65 652.2166 149.76666 652.45 150.0 L 659.8 155.9 L 659.4 157.6 L 651.5 151.25 Z M 606.55 149.05 L 606.55 150.65 L 602.05 150.65 L 596.95 163.75 L 594.1 171.15 L 606.05 184.8 L 617.1 197.45 L 617.1 199.05 L 616.45 198.95 L 615.9 198.55 L 592.9 172.25 C 592.73334 172.01666 592.61664 171.73332 592.55 171.4 C 592.48334 171.09999 592.51666 170.81667 592.65 170.55 L 600.6 150.1 C 600.7 149.76668 600.88336 149.51668 601.15 149.35 C 601.4167 149.15001 601.7167 149.05 602.05 149.05 L 606.55 149.05 Z"/>
+			<path fill="#AEB762" stroke-linecap="round" stroke-linejoin="round" d="M 676.45 150.65 L 681.0 150.65 L 686.05 163.75 L 680.15 163.75 L 683.0 171.15 L 673.95 184.8 L 676.95 184.8 L 665.95 197.45 L 676.45 163.75 L 676.45 150.65 Z M 623.6 157.6 L 631.5 151.25 L 631.5 176.15 L 631.5 176.25 C 631.5 177.28334 631.86664 178.15001 632.6 178.85 C 633.3 179.58333 634.1667 179.95 635.2 179.95 L 647.85 179.95 C 648.88336 179.95 649.75006 179.58333 650.45 178.85 C 651.15 178.15001 651.5 177.28334 651.5 176.25 L 651.5 176.05 L 651.5 151.25 L 659.4 157.6 L 659.4 171.95 L 652.1 186.7 L 647.85 183.9 L 635.2 183.9 L 630.95 186.7 L 623.6 171.95 L 623.6 157.6 Z M 606.55 150.65 L 606.55 163.75 L 617.1 197.45 L 606.05 184.8 L 609.0 184.8 L 600.05 171.15 L 602.9 163.75 L 596.95 163.75 L 602.05 150.65 L 606.55 150.65 Z"/>
+			<path fill="#9AA34B" stroke-linecap="round" stroke-linejoin="round" d="M 686.05 163.75 L 688.9 171.15 L 676.95 184.8 L 673.95 184.8 L 683.0 171.15 L 680.15 163.75 L 686.05 163.75 Z M 606.05 184.8 L 594.1 171.15 L 596.95 163.75 L 602.9 163.75 L 600.05 171.15 L 609.0 184.8 L 606.05 184.8 Z M 630.95 186.7 L 635.2 183.9 L 647.85 183.9 L 652.1 186.7 L 630.95 186.7 Z"/>
+			<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 672.65 152.8 L 674.25 154.05 L 671.8 154.65 L 662.0 157.0 L 659.4 157.6 L 659.8 155.9 L 672.65 152.8 Z M 674.25 163.75 L 671.4 167.15 L 660.65 173.15 L 659.4 171.95 L 662.05 170.5 L 671.8 165.1 L 674.25 163.75 Z M 623.25 155.9 L 623.6 157.6 L 621.0 157.0 L 611.2 154.65 L 608.75 154.05 L 610.35 152.8 L 623.25 155.9 Z M 611.2 165.1 L 620.95 170.5 L 623.6 171.95 L 622.4 173.15 L 611.65 167.15 L 608.75 163.75 L 611.2 165.1 Z"/>
+			<path fill="#EEEEEE" stroke-linecap="round" stroke-linejoin="round" d="M 674.25 154.05 L 674.25 150.65 L 676.45 150.65 L 676.45 163.75 L 665.95 197.45 L 662.4 197.45 L 674.25 163.75 L 674.25 154.05 Z M 631.5 151.25 L 651.5 151.25 L 651.5 176.05 C 651.4667 175.11667 651.1167 174.31667 650.45 173.65 C 649.75 172.91667 648.8833 172.55 647.85 172.55 L 635.2 172.55 C 634.1667 172.55 633.3 172.91667 632.6 173.65 C 631.89996 174.34999 631.5333 175.18332 631.5 176.15 L 631.5 151.25 Z M 608.75 150.65 L 608.75 154.05 L 608.75 163.75 L 620.6 197.45 L 617.1 197.45 L 606.55 163.75 L 606.55 150.65 L 608.75 150.65 Z"/>
+			<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 671.8 154.65 L 674.25 154.05 L 674.25 163.75 L 671.8 165.1 L 671.8 154.65 Z M 662.05 170.5 L 659.4 171.95 L 659.4 157.6 L 662.0 157.0 L 662.05 170.5 Z M 608.75 163.75 L 608.75 154.05 L 611.2 154.65 L 611.2 165.1 L 608.75 163.75 Z M 620.95 170.5 L 621.0 157.0 L 623.6 157.6 L 623.6 171.95 L 620.95 170.5 Z"/>
+			<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 671.8 165.1 L 662.05 170.5 L 662.0 157.0 L 671.8 154.65 L 671.8 165.1 Z M 611.2 154.65 L 621.0 157.0 L 620.95 170.5 L 611.2 165.1 L 611.2 154.65 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 651.5 176.05 L 651.5 176.25 C 651.5 177.28334 651.15 178.15001 650.45 178.85 C 649.75 179.58333 648.8833 179.95 647.85 179.95 L 635.2 179.95 C 634.1667 179.95 633.3 179.58333 632.6 178.85 C 631.86664 178.15001 631.5 177.28334 631.5 176.25 L 631.5 176.15 C 631.5333 175.18333 631.89996 174.35 632.6 173.65 C 633.3 172.91667 634.1667 172.55 635.2 172.55 L 647.85 172.55 C 648.88336 172.55 649.75006 172.91667 650.45 173.65 C 651.1167 174.31667 651.4667 175.11667 651.5 176.05 Z"/>
+			<path fill="#EFF4F5" stroke-linecap="round" stroke-linejoin="round" d="M 658.2 244.8 C 657.7 244.53333 657.3667 244.09999 657.2 243.5 C 657.06665 242.93333 657.1333 242.4 657.4 241.9 C 657.7 241.4 658.13336 241.06667 658.7 240.9 L 660.35 241.1 C 660.85 241.40001 661.1666 241.83334 661.3 242.4 C 661.4667 243.0 661.4 243.55 661.1 244.05 C 660.8333 244.55 660.39996 244.86667 659.8 245.0 L 658.2 244.8 Z M 624.8 243.5 C 624.6666 244.09999 624.35 244.53333 623.85 244.8 L 622.2 245.0 C 621.6333 244.86667 621.19995 244.55 620.9 244.05 C 620.63336 243.55 620.5667 243.0 620.7 242.4 C 620.8667 241.83333 621.2 241.4 621.7 241.1 L 623.3 240.9 C 623.9 241.06667 624.3334 241.4 624.6 241.9 C 624.89996 242.4 624.9666 242.93333 624.8 243.5 Z M 675.35 274.55 C 675.35 273.98334 675.56665 273.48334 676.0 273.05 C 676.43335 272.61667 676.93335 272.4 677.5 272.4 C 678.06665 272.4 678.56665 272.61667 679.0 273.05 C 679.43335 273.48334 679.65 273.98334 679.65 274.55 C 679.65 275.11667 679.43335 275.61667 679.0 276.05 C 678.56665 276.48334 678.06665 276.7 677.5 276.7 C 676.93335 276.7 676.43335 276.48334 676.0 276.05 C 675.56665 275.61667 675.35 275.11667 675.35 274.55 Z M 602.35 274.55 C 602.35 273.98334 602.56665 273.48334 603.0 273.05 C 603.43335 272.61667 603.93335 272.4 604.5 272.4 C 605.06665 272.4 605.56665 272.61667 606.0 273.05 C 606.43335 273.48334 606.65 273.98334 606.65 274.55 C 606.65 275.11667 606.43335 275.61667 606.0 276.05 C 605.56665 276.48334 605.06665 276.7 604.5 276.7 C 603.93335 276.7 603.43335 276.48334 603.0 276.05 C 602.56665 275.61667 602.35 275.11667 602.35 274.55 Z M 623.85 304.3 C 624.35 304.6 624.6666 305.03336 624.8 305.6 C 624.9667 306.2 624.9 306.75 624.6 307.25 C 624.3333 307.75 623.89996 308.06668 623.3 308.2 L 621.7 308.0 C 621.2 307.73334 620.8667 307.30002 620.7 306.7 C 620.56665 306.13333 620.6333 305.6 620.9 305.1 C 621.2 304.6 621.63336 304.26666 622.2 304.1 L 623.85 304.3 Z M 658.7 308.2 C 658.1333 308.06668 657.69995 307.75 657.4 307.25 C 657.13336 306.75 657.0667 306.2 657.2 305.6 C 657.3667 305.03333 657.7 304.59998 658.2 304.3 L 659.8 304.1 C 660.4 304.26666 660.8334 304.6 661.1 305.1 C 661.39996 305.6 661.4666 306.13333 661.3 306.7 C 661.1666 307.30002 660.85 307.73334 660.35 308.0 L 658.7 308.2 Z"/>
+			<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 657.2 243.5 C 657.3667 244.09999 657.7 244.53333 658.2 244.8 L 659.8 245.0 C 660.4 244.86667 660.8334 244.55 661.1 244.05 C 661.39996 243.55 661.4666 243.0 661.3 242.4 C 661.1666 241.83333 660.85 241.4 660.35 241.1 L 658.7 240.9 C 658.1333 241.06667 657.69995 241.4 657.4 241.9 C 657.13336 242.4 657.0667 242.93333 657.2 243.5 Z M 639.5 236.55 C 639.06665 236.98334 638.85 237.48334 638.85 238.05 C 638.85 238.61667 639.06665 239.11667 639.5 239.55 C 639.93335 239.98334 640.43335 240.2 641.0 240.2 C 641.56665 240.2 642.06665 239.98334 642.5 239.55 C 642.93335 239.11667 643.15 238.61667 643.15 238.05 C 643.15 237.48334 642.93335 236.98334 642.5 236.55 C 642.06665 236.11667 641.56665 235.9 641.0 235.9 C 640.43335 235.9 639.93335 236.11667 639.5 236.55 Z M 623.85 244.8 C 624.35 244.53333 624.6666 244.09999 624.8 243.5 C 624.9667 242.93333 624.9 242.4 624.6 241.9 C 624.3333 241.4 623.89996 241.06667 623.3 240.9 L 621.7 241.1 C 621.2 241.40001 620.8667 241.83334 620.7 242.4 C 620.56665 243.0 620.6333 243.55 620.9 244.05 C 621.2 244.55 621.63336 244.86667 622.2 245.0 L 623.85 244.8 Z M 641.05 244.3 L 641.0 244.3 C 632.6667 244.3 625.5333 247.25 619.6 253.15 C 613.7 259.0833 610.75 266.21664 610.75 274.55 C 610.75 282.91666 613.7 290.03333 619.6 295.9 C 625.5333 301.8333 632.6667 304.8 641.0 304.8 C 649.3333 304.8 656.44995 301.86667 662.35 296.0 L 662.4 295.9 C 668.3333 290.03333 671.3 282.91666 671.3 274.55 C 671.3 266.18332 668.3333 259.05 662.4 253.15 C 656.5 247.25 649.3833 244.3 641.05 244.3 Z M 641.0 304.8 L 641.05 304.8 Z M 619.6 295.9 L 619.65 295.95 Z M 619.6 253.15 L 619.55 253.2 Z M 674.65 256.85 C 674.8167 256.28333 674.75006 255.74998 674.45 255.25 C 674.18335 254.75 673.75 254.41667 673.15 254.25 L 671.55 254.45 C 671.05 254.75 670.7167 255.18333 670.55 255.75 C 670.4166 256.35 670.4833 256.9 670.75 257.4 C 671.05 257.9 671.48334 258.21667 672.05 258.35 L 673.7 258.15 C 674.2 257.88333 674.51666 257.45 674.65 256.85 Z M 676.0 273.05 C 675.56665 273.48334 675.35 273.98334 675.35 274.55 C 675.35 275.11667 675.56665 275.61667 676.0 276.05 C 676.43335 276.48334 676.93335 276.7 677.5 276.7 C 678.06665 276.7 678.56665 276.48334 679.0 276.05 C 679.43335 275.61667 679.65 275.11667 679.65 274.55 C 679.65 273.98334 679.43335 273.48334 679.0 273.05 C 678.56665 272.61667 678.06665 272.4 677.5 272.4 C 676.93335 272.4 676.43335 272.61667 676.0 273.05 Z M 684.25 274.55 C 684.25 286.51666 680.01666 296.7 671.55 305.1 C 663.15 313.56665 652.9667 317.8 641.0 317.8 C 629.06665 317.8 618.8833 313.56665 610.45 305.1 C 603.15 297.83334 599.01666 289.23334 598.05 279.3 L 597.8 274.55 C 597.8 262.61667 602.01666 252.43333 610.45 244.0 C 618.8833 235.56667 629.06665 231.35 641.0 231.35 C 652.9667 231.35 663.15 235.56667 671.55 244.0 C 680.01666 252.43333 684.25 262.61667 684.25 274.55 Z M 603.0 273.05 C 602.56665 273.48334 602.35 273.98334 602.35 274.55 C 602.35 275.11667 602.56665 275.61667 603.0 276.05 C 603.43335 276.48334 603.93335 276.7 604.5 276.7 C 605.06665 276.7 605.56665 276.48334 606.0 276.05 C 606.43335 275.61667 606.65 275.11667 606.65 274.55 C 606.65 273.98334 606.43335 273.48334 606.0 273.05 C 605.56665 272.61667 605.06665 272.4 604.5 272.4 C 603.93335 272.4 603.43335 272.61667 603.0 273.05 Z M 611.25 257.4 C 611.55 256.9 611.61664 256.35 611.45 255.75 C 611.31665 255.18333 611.0 254.75 610.5 254.45 L 608.85 254.25 C 608.2833 254.41667 607.85 254.75 607.55 255.25 C 607.2833 255.75 607.2167 256.28333 607.35 256.85 C 607.51666 257.45 607.85 257.88333 608.35 258.15 L 609.95 258.35 C 610.55 258.21667 610.98334 257.9 611.25 257.4 Z M 607.55 293.9 C 607.85 294.4 608.2833 294.71667 608.85 294.85 L 610.5 294.65 C 611.0 294.38333 611.31665 293.95 611.45 293.35 C 611.6167 292.78333 611.55005 292.25 611.25 291.75 C 610.98334 291.25 610.55 290.91666 609.95 290.75 L 608.35 290.95 C 607.85 291.25 607.51666 291.68332 607.35 292.25 C 607.2167 292.85 607.2833 293.4 607.55 293.9 Z M 624.8 305.6 C 624.6666 305.03333 624.35 304.59998 623.85 304.3 L 622.2 304.1 C 621.6333 304.26666 621.19995 304.6 620.9 305.1 C 620.63336 305.6 620.5667 306.13333 620.7 306.7 C 620.8667 307.30002 621.2 307.73334 621.7 308.0 L 623.3 308.2 C 623.9 308.06668 624.3334 307.75 624.6 307.25 C 624.89996 306.75 624.9666 306.2 624.8 305.6 Z M 671.55 294.65 L 673.15 294.85 C 673.75 294.71667 674.18335 294.4 674.45 293.9 C 674.75 293.4 674.81665 292.85 674.65 292.25 C 674.51666 291.68332 674.2 291.25 673.7 290.95 L 672.05 290.75 C 671.48334 290.91666 671.05 291.25 670.75 291.75 C 670.48334 292.25 670.4167 292.78333 670.55 293.35 C 670.7167 293.95 671.05 294.38333 671.55 294.65 Z M 641.0 308.9 C 640.43335 308.9 639.93335 309.11667 639.5 309.55 C 639.06665 309.98334 638.85 310.48334 638.85 311.05 C 638.85 311.61667 639.06665 312.11667 639.5 312.55 C 639.93335 312.98334 640.43335 313.2 641.0 313.2 C 641.56665 313.2 642.06665 312.98334 642.5 312.55 C 642.93335 312.11667 643.15 311.61667 643.15 311.05 C 643.15 310.48334 642.93335 309.98334 642.5 309.55 C 642.06665 309.11667 641.56665 308.9 641.0 308.9 Z M 657.4 307.25 C 657.7 307.75 658.13336 308.06668 658.7 308.2 L 660.35 308.0 C 660.85 307.73334 661.1666 307.30002 661.3 306.7 C 661.4667 306.13333 661.4 305.6 661.1 305.1 C 660.8333 304.6 660.39996 304.26666 659.8 304.1 L 658.2 304.3 C 657.7 304.6 657.3667 305.03336 657.2 305.6 C 657.06665 306.2 657.1333 306.75 657.4 307.25 Z"/>
+			<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 638.85 238.05 C 638.85 237.48334 639.06665 236.98334 639.5 236.55 C 639.93335 236.11667 640.43335 235.9 641.0 235.9 C 641.56665 235.9 642.06665 236.11667 642.5 236.55 C 642.93335 236.98334 643.15 237.48334 643.15 238.05 C 643.15 238.61667 642.93335 239.11667 642.5 239.55 C 642.06665 239.98334 641.56665 240.2 641.0 240.2 C 640.43335 240.2 639.93335 239.98334 639.5 239.55 C 639.06665 239.11667 638.85 238.61667 638.85 238.05 Z M 674.45 255.25 C 674.75 255.75 674.81665 256.28333 674.65 256.85 C 674.51666 257.45 674.2 257.88333 673.7 258.15 L 672.05 258.35 C 671.48334 258.21667 671.05 257.9 670.75 257.4 C 670.48334 256.9 670.4167 256.35 670.55 255.75 C 670.7167 255.18333 671.05 254.75 671.55 254.45 L 673.15 254.25 C 673.75 254.41667 674.18335 254.75 674.45 255.25 Z M 686.5 274.55 C 686.5 287.11667 682.05 297.83334 673.15 306.7 C 664.2833 315.6 653.56665 320.05 641.0 320.05 C 628.43335 320.05 617.7 315.6 608.8 306.7 C 601.06665 298.96667 596.7167 289.83334 595.75 279.3 L 595.5 274.55 C 595.5 261.98334 599.93335 251.25002 608.8 242.35 C 617.7 233.48334 628.43335 229.05 641.0 229.05 C 653.56665 229.05 664.2833 233.48334 673.15 242.35 C 682.05 251.25 686.5 261.98334 686.5 274.55 Z M 671.55 305.1 C 680.01666 296.7 684.25 286.51666 684.25 274.55 C 684.25 262.61667 680.01666 252.43333 671.55 244.0 C 663.15 235.56667 652.9667 231.35 641.0 231.35 C 629.06665 231.35 618.8833 235.56667 610.45 244.0 C 602.01666 252.43333 597.8 262.61667 597.8 274.55 L 598.05 279.3 C 599.01666 289.23334 603.15 297.83334 610.45 305.1 C 618.8833 313.56665 629.06665 317.8 641.0 317.8 C 652.9667 317.8 663.15 313.56665 671.55 305.1 Z M 611.45 255.75 C 611.6167 256.35 611.55005 256.9 611.25 257.4 C 610.98334 257.9 610.55 258.21667 609.95 258.35 L 608.35 258.15 C 607.85 257.88333 607.51666 257.45 607.35 256.85 C 607.2167 256.28333 607.2833 255.74998 607.55 255.25 C 607.85 254.75 608.2833 254.41667 608.85 254.25 L 610.5 254.45 C 611.0 254.75 611.31665 255.18333 611.45 255.75 Z M 608.85 294.85 C 608.2833 294.71667 607.85 294.4 607.55 293.9 C 607.2833 293.4 607.2167 292.85 607.35 292.25 C 607.51666 291.68332 607.85 291.25 608.35 290.95 L 609.95 290.75 C 610.55 290.91666 610.98334 291.25 611.25 291.75 C 611.55 292.25 611.61664 292.78333 611.45 293.35 C 611.31665 293.95 611.0 294.38333 610.5 294.65 L 608.85 294.85 Z M 673.15 294.85 L 671.55 294.65 C 671.05 294.38333 670.7167 293.95 670.55 293.35 C 670.4166 292.78333 670.4833 292.25 670.75 291.75 C 671.05 291.25 671.48334 290.91666 672.05 290.75 L 673.7 290.95 C 674.2 291.25 674.51666 291.68332 674.65 292.25 C 674.8167 292.85 674.75006 293.4 674.45 293.9 C 674.18335 294.4 673.75 294.71667 673.15 294.85 Z M 639.5 309.55 C 639.93335 309.11667 640.43335 308.9 641.0 308.9 C 641.56665 308.9 642.06665 309.11667 642.5 309.55 C 642.93335 309.98334 643.15 310.48334 643.15 311.05 C 643.15 311.61667 642.93335 312.11667 642.5 312.55 C 642.06665 312.98334 641.56665 313.2 641.0 313.2 C 640.43335 313.2 639.93335 312.98334 639.5 312.55 C 639.06665 312.11667 638.85 311.61667 638.85 311.05 C 638.85 310.48334 639.06665 309.98334 639.5 309.55 Z"/>
+			<path fill="#BF5237" stroke-linecap="round" stroke-linejoin="round" d="M 641.0 244.3 L 641.05 244.3 C 649.3833 244.3 656.5 247.25 662.4 253.15 L 651.75 263.85 C 648.7833 260.9167 645.2167 259.45 641.05 259.45 L 641.0 244.3 Z M 641.05 259.45 L 641.0 259.45 Z M 671.3 274.55 C 671.3 282.91666 668.3333 290.03333 662.4 295.9 L 662.35 296.0 L 651.7 285.35 L 651.75 285.25 C 654.68335 282.31668 656.15 278.7667 656.15 274.6 L 671.3 274.55 Z M 656.15 274.6 L 656.15 274.55 Z M 641.0 304.8 C 632.6667 304.8 625.55005 301.85 619.65 295.95 L 630.35 285.25 C 633.2833 288.21667 636.8333 289.7 641.0 289.7 L 641.0 304.8 Z M 610.75 274.55 C 610.75 266.21664 613.68335 259.09998 619.55 253.2 L 630.3 263.95 C 627.3667 266.88333 625.9 270.41666 625.9 274.55 L 610.75 274.55 Z"/>
+			<path fill="#9E442E" stroke-linecap="round" stroke-linejoin="round" d="M 662.4 253.15 C 668.3333 259.05 671.3 266.18332 671.3 274.55 L 656.15 274.55 C 656.15 270.38333 654.68335 266.81668 651.75 263.85 L 662.4 253.15 Z M 641.05 304.8 L 641.0 304.8 L 641.0 289.7 C 645.1667 289.7 648.73334 288.25 651.7 285.35 L 662.35 296.0 C 656.45 301.86667 649.35004 304.8 641.05 304.8 Z M 641.0 289.7 L 641.05 289.7 Z M 619.65 295.95 L 619.6 295.9 C 613.7 290.03333 610.75 282.91666 610.75 274.55 L 625.9 274.55 C 625.9 278.75 627.38336 282.31668 630.35 285.25 L 619.65 295.95 Z M 625.9 274.55 L 625.9 274.6 Z M 619.55 253.2 L 619.6 253.15 C 625.5333 247.25 632.6667 244.3 641.0 244.3 L 641.0 259.45 C 636.8333 259.45 633.2833 260.9167 630.35 263.85 L 630.3 263.95 L 619.55 253.2 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 641.0 259.45 L 641.05 259.45 C 645.2167 259.45 648.7833 260.9167 651.75 263.85 C 654.68335 266.81665 656.15 270.3833 656.15 274.55 C 656.15 278.75 654.68335 282.31668 651.75 285.25 L 651.7 285.35 C 648.73334 288.25 645.18335 289.7 641.05 289.7 C 636.85 289.7 633.2833 288.21667 630.35 285.25 C 627.38336 282.31668 625.9 278.7667 625.9 274.6 C 625.9 270.43335 627.3667 266.88336 630.3 263.95 L 630.35 263.85 C 633.2833 260.9167 636.8333 259.45 641.0 259.45 Z M 656.15 274.55 L 656.15 274.6 Z M 641.05 289.7 L 641.0 289.7 Z M 625.9 274.6 L 625.9 274.55 Z M 650.85 265.9 L 650.2 265.4 C 649.6 265.0 648.9333 264.8 648.2 264.8 C 647.1333 264.8 646.24994 265.16666 645.55 265.9 C 644.7833 266.63333 644.4 267.51666 644.4 268.55 C 644.4 269.28333 644.60004 269.94998 645.0 270.55 L 645.55 271.2 C 646.25 271.93332 647.13336 272.3 648.2 272.3 C 649.23334 272.3 650.11664 271.93332 650.85 271.2 C 651.55 270.46667 651.9 269.58334 651.9 268.55 C 651.9 267.51666 651.55 266.63333 650.85 265.9 Z"/>
+			<path fill="#594A68" stroke-linecap="round" stroke-linejoin="round" d="M 650.2 265.4 L 650.85 265.9 C 651.55 266.63333 651.9 267.51666 651.9 268.55 C 651.9 269.58334 651.55 270.46667 650.85 271.2 C 650.11664 271.93332 649.23334 272.3 648.2 272.3 C 647.1333 272.3 646.24994 271.93332 645.55 271.2 L 645.0 270.55 C 644.60004 269.94998 644.4 269.28333 644.4 268.55 C 644.4 267.51666 644.7833 266.63333 645.55 265.9 C 646.25 265.16666 647.13336 264.8 648.2 264.8 C 648.93335 264.8 649.60004 265.0 650.2 265.4 Z"/>
+			<path fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" d="M 290.35 310.6 C 290.88333 310.2 291.41666 310.01666 291.95 310.05 L 296.0 310.05 C 296.6 310.05 297.15 310.23334 297.65 310.6 L 297.9 310.8 C 298.26666 311.13333 298.5 311.6 298.6 312.2 L 298.65 312.35 L 299.55 318.65 L 305.35 321.9 L 305.75 321.15 C 305.91666 320.65 306.25 320.28333 306.75 320.05 C 307.08334 319.78333 307.55002 319.65 308.15 319.65 L 308.85 319.65 L 310.0 319.9 C 310.5 320.06665 310.91666 320.46664 311.25 321.1 L 311.35 321.4 L 311.5 322.35 L 311.5 322.6 L 310.55 330.95 L 310.5 331.2 L 309.8 332.45 L 308.5 333.15 L 308.0 333.2 L 306.7 332.9 L 306.1 332.5 L 305.7 332.6 L 299.5 333.75 L 298.15 335.85 L 297.3 336.7 L 296.85 336.9 L 295.9 337.05 L 292.1 337.05 L 291.2 336.9 L 290.7 336.7 L 289.9 335.9 L 288.55 333.75 L 282.3 332.6 L 281.9 332.45 L 281.25 332.9 L 280.0 333.2 L 279.6 333.15 C 279.0 333.05 278.53333 332.81665 278.2 332.45 L 277.95 332.1 C 277.75 331.86667 277.6 331.56668 277.5 331.2 L 277.5 330.95 L 276.55 322.6 L 276.5 322.35 C 276.5 321.98334 276.55 321.66666 276.65 321.4 L 276.75 321.1 C 277.08334 320.46667 277.51666 320.06668 278.05 319.9 C 278.38333 319.7 278.73334 319.61667 279.1 319.65 L 279.8 319.65 L 281.15 320.0 L 282.1 320.95 L 282.65 321.9 C 284.61667 320.8333 286.56668 319.74997 288.5 318.65 L 289.4 312.35 L 289.4 312.2 C 289.5 311.6 289.75 311.13333 290.15 310.8 L 290.35 310.6 Z M 298.15 335.85 L 298.15 335.9 Z M 289.9 335.9 L 289.85 335.85 Z M 291.35 312.6 L 290.3 319.9 L 282.7 324.1 L 281.25 323.4 L 280.35 321.95 L 280.15 321.75 L 279.8 321.65 L 279.1 321.65 L 278.8 321.75 L 278.55 322.0 L 278.5 322.35 L 279.45 330.7 L 279.6 331.05 L 280.0 331.25 L 280.35 331.15 L 280.65 330.85 L 281.1 329.9 L 282.5 330.55 L 282.65 330.65 L 289.75 331.9 L 291.55 334.8 L 291.8 335.05 L 292.1 335.1 L 295.9 335.1 L 296.2 335.05 L 296.45 334.8 L 298.25 331.9 L 305.35 330.65 L 305.5 330.55 L 306.9 329.9 L 307.35 330.85 L 307.6 331.15 L 308.0 331.25 L 308.35 331.05 L 308.55 330.7 L 309.5 322.35 L 309.45 322.0 L 309.2 321.75 L 308.85 321.65 L 308.15 321.65 L 307.85 321.75 C 307.71667 321.78333 307.63333 321.85 307.6 321.95 L 306.75 323.4 L 305.25 324.1 L 297.7 319.9 L 296.65 312.6 L 296.45 312.2 L 296.0 312.05 L 291.95 312.05 C 291.81668 312.05 291.68335 312.1 291.55 312.2 L 291.35 312.6 Z"/>
+			<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M 290.3 319.9 L 291.35 312.6 L 291.55 312.2 C 291.68332 312.1 291.81665 312.05 291.95 312.05 L 296.0 312.05 L 296.45 312.2 L 296.65 312.6 L 297.7 319.9 L 297.15 320.3 L 297.85 325.25 L 297.85 331.4 L 298.25 331.9 L 296.45 334.8 L 296.2 335.05 L 295.9 335.1 L 292.1 335.1 L 291.8 335.05 L 291.55 334.8 L 289.75 331.9 L 290.1 331.4 L 290.1 325.25 L 290.85 320.3 L 290.3 319.9 Z M 306.75 323.4 L 307.6 321.95 C 307.63333 321.85 307.71667 321.78333 307.85 321.75 L 308.15 321.65 L 308.85 321.65 L 309.2 321.75 L 309.45 322.0 L 309.5 322.35 L 308.55 330.7 L 308.35 331.05 L 308.0 331.25 L 307.6 331.15 L 307.35 330.85 L 306.9 329.9 L 307.2 329.05 L 307.2 323.9 L 306.75 323.4 Z M 281.1 329.9 L 280.65 330.85 L 280.35 331.15 L 280.0 331.25 L 279.6 331.05 L 279.45 330.7 L 278.5 322.35 L 278.55 322.0 L 278.8 321.75 L 279.1 321.65 L 279.8 321.65 L 280.15 321.75 L 280.35 321.95 L 281.25 323.4 L 280.8 323.9 L 280.8 329.05 L 281.1 329.9 Z M 296.3 322.8 L 291.7 322.8 L 291.35 325.25 L 296.6 325.25 L 296.3 322.8 Z"/>
+			<path fill="#A8C7CE" stroke-linecap="round" stroke-linejoin="round" d="M 297.7 319.9 L 305.25 324.1 L 306.75 323.4 L 307.2 323.9 L 307.2 329.05 L 306.9 329.9 L 305.5 330.55 L 305.35 330.65 L 298.25 331.9 L 297.85 331.4 L 297.85 325.25 L 297.15 320.3 L 297.7 319.9 Z M 289.75 331.9 L 282.65 330.65 L 282.5 330.55 L 281.1 329.9 L 280.8 329.05 L 280.8 323.9 L 281.25 323.4 L 282.7 324.1 L 290.3 319.9 L 290.85 320.3 L 290.1 325.25 L 290.1 331.4 L 289.75 331.9 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 291.7 322.8 L 296.3 322.8 L 296.6 325.25 L 291.35 325.25 L 291.7 322.8 Z"/>
+			<path fill="#5C4434" stroke-linecap="round" stroke-linejoin="round" d="M 193.0 311.1 L 193.85 311.55 L 237.35 349.85 C 237.68333 350.15 237.9 350.55 238.0 351.05 L 245.5 397.85 L 245.25 399.1 L 244.3 400.0 L 194.3 421.9 L 193.25 422.05 L 192.3 421.65 L 156.35 394.2 L 124.55 395.15 L 123.4 394.85 C 123.066666 394.61667 122.816666 394.31668 122.65 393.95 L 109.65 361.55 L 109.5 360.65 L 109.85 359.75 L 132.85 325.4 C 133.15001 324.96667 133.55 324.68335 134.05 324.55 L 192.05 311.1 L 193.0 311.1 Z M 243.5 398.15 L 236.0 351.35 L 192.5 313.05 L 134.5 326.5 L 111.5 360.8 L 124.5 393.2 L 157.0 392.2 L 193.5 420.05 L 243.5 398.15 Z"/>
+			<path fill="#997055" stroke-linecap="round" stroke-linejoin="round" d="M 207.3 346.05 L 203.8 358.3 L 210.95 349.25 L 210.95 356.05 L 214.15 352.05 L 222.05 359.05 L 226.9 389.1 L 195.6 402.85 L 190.85 399.2 L 186.8 390.4 L 171.9 384.7 L 166.15 380.35 C 163.28334 378.18335 160.08334 377.15002 156.55 377.25 L 134.55 377.95 L 130.15 366.9 L 142.3 362.55 L 128.4 362.55 L 143.7 339.65 L 188.35 329.3 L 207.3 346.05 Z M 180.15 341.8 C 179.15 340.8 177.93333 340.3 176.5 340.3 C 175.06667 340.3 173.83333 340.8 172.8 341.8 C 171.8 342.83334 171.3 344.06668 171.3 345.5 C 171.3 346.93332 171.8 348.15 172.8 349.15 C 173.83334 350.15 175.06668 350.65 176.5 350.65 C 177.93333 350.65 179.15 350.15 180.15 349.15 C 181.18333 348.15 181.7 346.93332 181.7 345.5 C 181.7 344.06668 181.18333 342.83334 180.15 341.8 Z M 168.05 345.3 C 167.55 344.8 166.93333 344.55 166.2 344.55 C 165.46667 344.55 164.83334 344.8 164.3 345.3 C 163.8 345.83334 163.55 346.46667 163.55 347.2 C 163.55 347.93332 163.8 348.55 164.3 349.05 C 164.83334 349.55 165.46667 349.8 166.2 349.8 C 166.93333 349.8 167.55 349.55 168.05 349.05 C 168.58334 348.55 168.85 347.93332 168.85 347.2 C 168.85 346.46667 168.58334 345.83334 168.05 345.3 Z"/>
+			<path fill="#836049" stroke-linecap="round" stroke-linejoin="round" d="M 203.8 358.3 L 207.3 346.05 L 188.35 329.3 L 143.7 339.65 L 128.4 362.55 L 142.3 362.55 L 130.15 366.9 L 134.55 377.95 L 156.55 377.25 C 160.08334 377.15 163.28334 378.18332 166.15 380.35 L 171.9 384.7 L 186.8 390.4 L 190.85 399.2 L 195.6 402.85 L 226.9 389.1 L 222.05 359.05 L 214.15 352.05 L 210.95 356.05 L 210.95 349.25 L 203.8 358.3 Z M 176.5 340.3 C 177.93333 340.3 179.15 340.8 180.15 341.8 C 181.18333 342.83334 181.7 344.06668 181.7 345.5 C 181.7 346.93332 181.18333 348.15 180.15 349.15 C 179.15 350.15 177.93333 350.65 176.5 350.65 C 175.06667 350.65 173.83333 350.15 172.8 349.15 C 171.8 348.15 171.3 346.93332 171.3 345.5 C 171.3 344.06668 171.8 342.83334 172.8 341.8 C 173.83334 340.8 175.06668 340.3 176.5 340.3 Z M 236.0 351.35 L 243.5 398.15 L 193.5 420.05 L 157.0 392.2 L 124.5 393.2 L 111.5 360.8 L 134.5 326.5 L 192.5 313.05 L 236.0 351.35 Z M 166.2 344.55 C 166.93333 344.55 167.55 344.8 168.05 345.3 C 168.58334 345.83334 168.85 346.46667 168.85 347.2 C 168.85 347.93332 168.58334 348.55 168.05 349.05 C 167.55 349.55 166.93333 349.8 166.2 349.8 C 165.46667 349.8 164.83334 349.55 164.3 349.05 C 163.8 348.55 163.55 347.93332 163.55 347.2 C 163.55 346.46667 163.8 345.83334 164.3 345.3 C 164.83334 344.8 165.46667 344.55 166.2 344.55 Z"/>
+			<path fill="#5C4434" stroke-linecap="round" stroke-linejoin="round" d="M 125.7 407.1 C 126.03333 406.83334 126.433334 406.6667 126.9 406.6 L 152.65 405.05 C 153.08333 405.05 153.48334 405.15 153.85 405.35 L 154.6 406.3 L 163.35 426.45 L 163.45 427.65 L 162.8 428.7 L 142.95 446.6 L 141.85 447.05 L 140.65 446.9 L 120.6 436.9 C 120.2 436.7 119.899994 436.40002 119.7 436.0 C 119.5 435.53333 119.450005 435.1 119.55 434.7 L 125.05 408.25 C 125.183334 407.78333 125.4 407.4 125.7 407.1 Z M 152.75 407.05 L 127.05 408.65 L 121.5 435.1 L 141.55 445.1 L 161.45 427.25 L 152.75 407.05 Z"/>
+			<path fill="#997055" stroke-linecap="round" stroke-linejoin="round" d="M 127.2 432.4 L 131.2 413.35 L 149.55 412.2 L 155.45 425.9 L 151.8 429.2 L 146.05 424.6 L 148.15 432.55 L 140.75 439.15 L 138.3 437.9 L 137.3 434.25 L 131.05 434.35 L 127.2 432.4 Z M 135.1 422.55 C 135.56667 422.98334 136.13333 423.2 136.8 423.2 C 137.46667 423.2 138.03334 422.98334 138.5 422.55 C 138.96666 422.08334 139.2 421.5167 139.2 420.85 C 139.2 420.18335 138.96666 419.61667 138.5 419.15 C 138.03334 418.68335 137.46667 418.45 136.8 418.45 C 136.13333 418.45 135.56667 418.68335 135.1 419.15 C 134.63333 419.61667 134.4 420.18335 134.4 420.85 C 134.4 421.51666 134.63333 422.0833 135.1 422.55 Z"/>
+			<path fill="#836049" stroke-linecap="round" stroke-linejoin="round" d="M 131.2 413.35 L 127.2 432.4 L 131.05 434.35 L 137.3 434.25 L 138.3 437.9 L 140.75 439.15 L 148.15 432.55 L 146.05 424.6 L 151.8 429.2 L 155.45 425.9 L 149.55 412.2 L 131.2 413.35 Z M 127.05 408.65 L 152.75 407.05 L 161.45 427.25 L 141.55 445.1 L 121.5 435.1 L 127.05 408.65 Z M 136.8 423.2 C 136.13333 423.2 135.56667 422.98334 135.1 422.55 C 134.63333 422.08334 134.4 421.5167 134.4 420.85 C 134.4 420.18335 134.63333 419.61667 135.1 419.15 C 135.56667 418.68335 136.13333 418.45 136.8 418.45 C 137.46667 418.45 138.03334 418.68335 138.5 419.15 C 138.96666 419.61667 139.2 420.18335 139.2 420.85 C 139.2 421.51666 138.96666 422.0833 138.5 422.55 C 138.03334 422.98334 137.46667 423.2 136.8 423.2 Z"/>
+			<path fill="#71CA35" stroke-linecap="round" stroke-linejoin="round" d="M 483.35 226.2 C 483.81665 226.66666 482.8833 228.43332 480.55 231.5 L 479.3 233.1 C 480.13333 234.26668 480.73334 235.53334 481.1 236.9 L 488.55 237.55 C 493.85 238.25 496.5 239.06667 496.5 240.0 C 496.5 240.96666 493.85 241.78333 488.55 242.45 L 481.1 243.15 C 480.73334 244.48332 480.13333 245.73332 479.3 246.9 L 480.55 248.5 C 482.88333 251.56667 483.81668 253.33333 483.35 253.8 C 482.85 254.3 481.08334 253.36667 478.05 251.0 L 476.45 249.75 C 475.28336 250.61667 474.0167 251.23334 472.65 251.6 L 471.95 259.05 C 471.25 264.35 470.43332 267.0 469.5 267.0 C 468.53333 267.0 467.71664 264.35 467.05 259.05 C 466.75 256.75 466.53333 254.26668 466.4 251.6 C 465.03333 251.23334 463.76666 250.63333 462.6 249.8 L 461.0 251.05 C 457.93332 253.38333 456.16666 254.31667 455.7 253.85 C 455.2 253.35 456.13333 251.58334 458.5 248.55 L 459.75 246.95 C 458.91666 245.78333 458.31665 244.51666 457.95 243.15 L 450.4 242.45 C 445.13333 241.78333 442.5 240.96666 442.5 240.0 C 442.5 239.06667 445.13333 238.25 450.4 237.55 L 457.95 236.9 C 458.31668 235.5 458.9167 234.21667 459.75 233.05 L 458.5 231.45 C 456.13333 228.41666 455.2 226.65 455.7 226.15 C 456.16666 225.68333 457.93332 226.61667 461.0 228.95 L 462.6 230.25 C 463.76666 229.38333 465.03333 228.78333 466.4 228.45 C 466.53333 225.71667 466.75 223.20001 467.05 220.9 C 467.71664 215.63333 468.53333 213.0 469.5 213.0 C 470.43332 213.0 471.25 215.63333 471.95 220.9 L 472.65 228.45 C 474.01666 228.81667 475.28333 229.41667 476.45 230.25 L 478.05 229.0 C 481.08334 226.63333 482.85 225.7 483.35 226.2 Z M 469.5 217.0 L 469.05 221.15 C 468.75 223.41667 468.53333 225.88335 468.4 228.55 L 467.95 229.75 L 466.9 230.4 C 465.76666 230.66667 464.73334 231.15001 463.8 231.85 C 463.43332 232.11667 463.01666 232.25 462.55 232.25 C 462.05 232.21666 461.63333 232.04999 461.3 231.75 C 461.6 232.15001 461.75 232.56668 461.75 233.0 L 461.4 234.25 C 460.7 235.18333 460.2 236.23334 459.9 237.4 L 459.2 238.45 C 458.86667 238.71667 458.48334 238.86667 458.05 238.9 L 450.65 239.55 L 446.5 240.0 L 450.65 240.5 L 458.1 241.15 C 458.5 241.18333 458.88333 241.33334 459.25 241.6 L 459.9 242.65 C 460.2 243.78334 460.7 244.83334 461.4 245.8 C 461.63333 246.16667 461.75 246.56667 461.75 247.0 L 461.3 248.2 C 461.69998 247.93333 462.11664 247.8 462.55 247.8 C 462.98334 247.8 463.4 247.93333 463.8 248.2 C 464.76666 248.86667 465.81668 249.36667 466.95 249.7 C 467.35 249.8 467.68335 250.01668 467.95 250.35 C 468.21667 250.68333 468.36667 251.06667 468.4 251.5 C 468.53333 254.09999 468.75 256.53333 469.05 258.8 L 469.5 263.0 L 470.0 258.8 L 470.65 251.5 C 470.68335 251.06667 470.83334 250.68333 471.1 250.35 C 471.36667 250.01668 471.71667 249.8 472.15 249.7 C 473.25 249.36667 474.28333 248.85 475.25 248.15 C 475.61667 247.88333 476.03333 247.75 476.5 247.75 C 476.93332 247.75 477.3333 247.9 477.7 248.2 C 477.43332 247.8 477.3 247.38333 477.3 246.95 C 477.3 246.51666 477.43332 246.11667 477.7 245.75 C 478.36667 244.78334 478.86667 243.75 479.2 242.65 C 479.30002 242.21666 479.5167 241.86667 479.85 241.6 C 480.18335 241.33333 480.56668 241.18332 481.0 241.15 L 488.3 240.5 L 492.5 240.0 L 488.3 239.55 L 481.0 238.9 L 479.85 238.45 C 479.51666 238.18333 479.3 237.85 479.2 237.45 C 478.86667 236.31667 478.36667 235.26666 477.7 234.3 L 477.3 233.05 C 477.3 232.61667 477.44998 232.21667 477.75 231.85 C 477.35 232.11667 476.93335 232.25 476.5 232.25 C 476.06668 232.25 475.6667 232.13333 475.3 231.9 C 474.33334 231.2 473.28336 230.7 472.15 230.4 L 471.1 229.75 C 470.83334 229.38333 470.68335 229.0 470.65 228.6 L 470.0 221.15 L 469.5 217.0 Z M 477.95 231.6 L 477.7 231.8 L 477.95 231.6 Z M 477.95 248.4 L 477.75 248.15 L 477.95 248.4 Z M 461.1 248.45 L 461.35 248.25 L 461.1 248.45 Z M 461.25 231.7 L 461.3 231.8 L 461.25 231.7 Z M 469.5 242.85 C 468.69998 242.85 468.01666 242.56667 467.45 242.0 C 466.91666 241.46666 466.65 240.79999 466.65 240.0 C 466.65 239.2 466.91666 238.51666 467.45 237.95 C 468.01666 237.41666 468.69998 237.15 469.5 237.15 C 470.30002 237.15 470.96667 237.41666 471.5 237.95 C 472.06668 238.51666 472.35 239.2 472.35 240.0 C 472.35 240.8 472.06668 241.46667 471.5 242.0 C 470.96667 242.56667 470.30002 242.85 469.5 242.85 Z"/>
+			<path fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" d="M 469.05 221.15 L 469.5 217.0 L 470.0 221.15 L 470.65 228.6 C 470.68335 229.0 470.83334 229.38333 471.1 229.75 L 472.15 230.4 C 473.28333 230.7 474.3333 231.2 475.3 231.9 C 475.66666 232.13333 476.06665 232.25 476.5 232.25 C 476.93332 232.25 477.3333 232.1 477.7 231.8 C 477.43332 232.2 477.3 232.61667 477.3 233.05 L 477.7 234.3 C 478.36667 235.26666 478.86667 236.31667 479.2 237.45 C 479.30002 237.85 479.5167 238.18333 479.85 238.45 L 481.0 238.9 L 488.3 239.55 L 492.5 240.0 L 488.3 240.5 L 481.0 241.15 C 480.56668 241.18333 480.18335 241.33334 479.85 241.6 C 479.51666 241.86667 479.3 242.21666 479.2 242.65 C 478.86667 243.75 478.36667 244.78334 477.7 245.75 C 477.43332 246.11667 477.3 246.51666 477.3 246.95 C 477.3 247.38333 477.44998 247.78333 477.75 248.15 C 477.35 247.88333 476.93335 247.75 476.5 247.75 C 476.03333 247.75 475.61667 247.88333 475.25 248.15 C 474.28333 248.84999 473.25 249.36665 472.15 249.7 C 471.71667 249.8 471.36667 250.01668 471.1 250.35 C 470.83334 250.68333 470.68335 251.06667 470.65 251.5 L 470.0 258.8 L 469.5 263.0 L 469.05 258.8 C 468.75 256.53333 468.53333 254.09999 468.4 251.5 C 468.36667 251.06667 468.21667 250.68333 467.95 250.35 C 467.68332 250.01668 467.34998 249.8 466.95 249.7 C 465.81668 249.36667 464.76666 248.86667 463.8 248.2 C 463.4 247.93333 462.98334 247.8 462.55 247.8 C 462.11667 247.8 461.71667 247.95 461.35 248.25 L 461.75 247.0 C 461.75 246.56667 461.63333 246.16667 461.4 245.8 C 460.7 244.83334 460.2 243.78334 459.9 242.65 L 459.25 241.6 C 458.88333 241.33333 458.5 241.18332 458.1 241.15 L 450.65 240.5 L 446.5 240.0 L 450.65 239.55 L 458.05 238.9 C 458.48334 238.86667 458.86667 238.71667 459.2 238.45 L 459.9 237.4 C 460.2 236.23332 460.7 235.18332 461.4 234.25 L 461.75 233.0 C 461.75 232.56667 461.6 232.16667 461.3 231.8 C 461.63333 232.06667 462.05 232.21666 462.55 232.25 C 463.01666 232.25 463.43332 232.11667 463.8 231.85 C 464.73334 231.15001 465.76666 230.66667 466.9 230.4 L 467.95 229.75 L 468.4 228.55 C 468.53333 225.88333 468.75 223.41666 469.05 221.15 Z M 477.7 231.8 L 477.95 231.6 L 477.75 231.85 Z M 477.75 248.15 L 477.95 248.4 L 477.7 248.2 Z M 461.35 248.25 L 461.1 248.45 L 461.3 248.2 Z M 461.3 231.8 L 461.25 231.7 L 461.3 231.75 Z M 467.45 242.0 C 468.01666 242.56667 468.69998 242.85 469.5 242.85 C 470.30002 242.85 470.96667 242.56667 471.5 242.0 C 472.06668 241.46666 472.35 240.79999 472.35 240.0 C 472.35 239.2 472.06668 238.51666 471.5 237.95 C 470.96667 237.41666 470.30002 237.15 469.5 237.15 C 468.69998 237.15 468.01666 237.41666 467.45 237.95 C 466.91666 238.51666 466.65 239.2 466.65 240.0 C 466.65 240.8 466.91666 241.46667 467.45 242.0 Z"/>
+			<path fill="#CE3131" stroke-linecap="round" stroke-linejoin="round" d="M 558.55 242.45 L 551.1 243.15 C 550.73334 244.48332 550.13336 245.73332 549.3 246.9 L 550.55 248.5 C 552.8833 251.56667 553.81665 253.33333 553.35 253.8 C 552.85 254.3 551.0833 253.36667 548.05 251.0 L 546.45 249.75 C 545.2833 250.61667 544.01666 251.23334 542.65 251.6 L 541.95 259.05 C 541.25 264.35 540.43335 267.0 539.5 267.0 C 538.5333 267.0 537.7167 264.35 537.05 259.05 C 536.75 256.75 536.5333 254.26668 536.4 251.6 C 535.0333 251.23334 533.76666 250.63333 532.6 249.8 L 531.0 251.05 C 527.93335 253.38333 526.1667 254.31667 525.7 253.85 C 525.2 253.35 526.13336 251.58334 528.5 248.55 L 529.75 246.95 C 528.9167 245.78333 528.3167 244.51666 527.95 243.15 L 520.4 242.45 C 515.13336 241.78333 512.5 240.96666 512.5 240.0 C 512.5 239.06667 515.13336 238.25 520.4 237.55 L 527.95 236.9 C 528.31665 235.5 528.9166 234.21667 529.75 233.05 L 528.5 231.45 C 526.13336 228.41666 525.2 226.65 525.7 226.15 C 526.1667 225.68333 527.93335 226.61667 531.0 228.95 L 532.6 230.25 C 533.76666 229.38333 535.0333 228.78333 536.4 228.45 C 536.5333 225.71667 536.75 223.20001 537.05 220.9 C 537.7167 215.63333 538.5333 213.0 539.5 213.0 C 540.43335 213.0 541.25 215.63333 541.95 220.9 L 542.65 228.45 C 544.01666 228.81667 545.2833 229.41667 546.45 230.25 L 548.05 229.0 C 551.0833 226.63333 552.85 225.7 553.35 226.2 C 553.81665 226.66666 552.8833 228.43332 550.55 231.5 L 549.3 233.1 C 550.1333 234.26668 550.7333 235.53334 551.1 236.9 L 558.55 237.55 C 563.85 238.25 566.5 239.06667 566.5 240.0 C 566.5 240.96666 563.85 241.78333 558.55 242.45 Z M 558.3 240.5 L 562.5 240.0 L 558.3 239.55 L 551.0 238.9 C 550.56665 238.86667 550.1833 238.71667 549.85 238.45 C 549.51666 238.18333 549.3 237.85 549.2 237.45 C 548.8667 236.31667 548.3667 235.26666 547.7 234.3 L 547.3 233.05 C 547.3 232.61667 547.45 232.21667 547.75 231.85 L 546.5 232.25 C 546.06665 232.25 545.6666 232.13333 545.3 231.9 C 544.3333 231.2 543.2833 230.7 542.15 230.4 L 541.1 229.75 C 540.8333 229.38333 540.68335 229.0 540.65 228.6 L 540.0 221.15 L 539.5 217.0 L 539.05 221.15 C 538.75 223.41667 538.5333 225.88335 538.4 228.55 L 537.95 229.75 C 537.65 230.08333 537.30005 230.29999 536.9 230.4 C 535.76666 230.66667 534.73334 231.15001 533.8 231.85 C 533.43335 232.11667 533.01666 232.25 532.55 232.25 C 532.05 232.21666 531.6333 232.04999 531.3 231.75 C 531.6 232.15001 531.75 232.56668 531.75 233.0 L 531.4 234.25 C 530.7 235.18333 530.2 236.23334 529.9 237.4 L 529.2 238.45 L 528.05 238.9 L 520.65 239.55 L 516.5 240.0 L 520.65 240.5 L 528.1 241.15 C 528.5 241.18333 528.88336 241.33334 529.25 241.6 L 529.9 242.65 C 530.2 243.78334 530.7 244.83334 531.4 245.8 C 531.63336 246.16667 531.75 246.56667 531.75 247.0 L 531.3 248.2 C 531.7 247.93333 532.1167 247.8 532.55 247.8 C 532.98334 247.8 533.4 247.93333 533.8 248.2 C 534.76666 248.86667 535.81665 249.36667 536.95 249.7 C 537.35 249.8 537.6833 250.01668 537.95 250.35 C 538.2167 250.68333 538.3667 251.06667 538.4 251.5 C 538.5333 254.09999 538.75 256.53333 539.05 258.8 L 539.5 263.0 L 540.0 258.8 L 540.65 251.5 C 540.68335 251.06667 540.8333 250.68333 541.1 250.35 C 541.36664 250.01668 541.7167 249.8 542.15 249.7 C 543.25 249.36667 544.2833 248.85 545.25 248.15 C 545.61664 247.88333 546.0333 247.75 546.5 247.75 C 546.93335 247.75 547.3334 247.9 547.7 248.2 C 547.43335 247.8 547.3 247.38333 547.3 246.95 C 547.3 246.51666 547.43335 246.11667 547.7 245.75 C 548.3667 244.78334 548.8667 243.75 549.2 242.65 C 549.3 242.21666 549.51666 241.86667 549.85 241.6 C 550.1833 241.33333 550.56665 241.18332 551.0 241.15 L 558.3 240.5 Z M 547.95 248.4 L 547.75 248.15 L 547.95 248.4 Z M 531.1 248.45 L 531.35 248.25 L 531.1 248.45 Z M 531.25 231.7 L 531.3 231.8 L 531.25 231.7 Z M 547.95 231.6 L 547.7 231.8 L 547.95 231.6 Z M 537.45 242.0 C 536.9167 241.46666 536.65 240.79999 536.65 240.0 C 536.65 239.2 536.9167 238.51666 537.45 237.95 C 538.01666 237.41666 538.7 237.15 539.5 237.15 C 540.3 237.15 540.9667 237.41666 541.5 237.95 C 542.06665 238.51666 542.35 239.2 542.35 240.0 C 542.35 240.8 542.06665 241.46667 541.5 242.0 C 540.9667 242.56667 540.3 242.85 539.5 242.85 C 538.7 242.85 538.01666 242.56667 537.45 242.0 Z"/>
+			<path fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" d="M 562.5 240.0 L 558.3 240.5 L 551.0 241.15 C 550.56665 241.18333 550.1833 241.33334 549.85 241.6 C 549.51666 241.86667 549.3 242.21666 549.2 242.65 C 548.8667 243.75 548.3667 244.78334 547.7 245.75 C 547.43335 246.11667 547.3 246.51666 547.3 246.95 C 547.3 247.38333 547.45 247.78333 547.75 248.15 C 547.35004 247.88333 546.93335 247.75 546.5 247.75 C 546.0333 247.75 545.61664 247.88333 545.25 248.15 C 544.2833 248.84999 543.25 249.36665 542.15 249.7 C 541.7167 249.8 541.36664 250.01668 541.1 250.35 C 540.8333 250.68333 540.68335 251.06667 540.65 251.5 L 540.0 258.8 L 539.5 263.0 L 539.05 258.8 C 538.75 256.53333 538.5333 254.09999 538.4 251.5 C 538.36664 251.06667 538.2166 250.68333 537.95 250.35 C 537.68335 250.01668 537.35004 249.8 536.95 249.7 C 535.81665 249.36667 534.76666 248.86667 533.8 248.2 C 533.4 247.93333 532.98334 247.8 532.55 247.8 C 532.1167 247.8 531.7167 247.95 531.35 248.25 L 531.75 247.0 C 531.75 246.56667 531.63336 246.16667 531.4 245.8 C 530.7 244.83334 530.2 243.78334 529.9 242.65 L 529.25 241.6 C 528.88336 241.33333 528.5 241.18332 528.1 241.15 L 520.65 240.5 L 516.5 240.0 L 520.65 239.55 L 528.05 238.9 L 529.2 238.45 L 529.9 237.4 C 530.2 236.23332 530.7 235.18332 531.4 234.25 L 531.75 233.0 C 531.75 232.56667 531.6 232.16667 531.3 231.8 C 531.6333 232.06667 532.05 232.21666 532.55 232.25 C 533.01666 232.25 533.43335 232.11667 533.8 231.85 C 534.73334 231.15001 535.76666 230.66667 536.9 230.4 C 537.3 230.3 537.64996 230.08334 537.95 229.75 L 538.4 228.55 C 538.5333 225.88333 538.75 223.41666 539.05 221.15 L 539.5 217.0 L 540.0 221.15 L 540.65 228.6 C 540.68335 229.0 540.8333 229.38333 541.1 229.75 L 542.15 230.4 C 543.2833 230.7 544.3333 231.2 545.3 231.9 C 545.6666 232.13333 546.06665 232.25 546.5 232.25 L 547.7 231.8 C 547.43335 232.2 547.3 232.61667 547.3 233.05 L 547.7 234.3 C 548.3667 235.26666 548.8667 236.31667 549.2 237.45 C 549.3 237.85 549.51666 238.18333 549.85 238.45 C 550.1833 238.71667 550.56665 238.86667 551.0 238.9 L 558.3 239.55 L 562.5 240.0 Z M 547.75 248.15 L 547.95 248.4 L 547.7 248.2 Z M 531.35 248.25 L 531.1 248.45 L 531.3 248.2 Z M 531.3 231.8 L 531.25 231.7 L 531.3 231.75 Z M 547.7 231.8 L 547.95 231.6 L 547.75 231.85 Z M 536.65 240.0 C 536.65 240.8 536.9167 241.46667 537.45 242.0 C 538.01666 242.56667 538.7 242.85 539.5 242.85 C 540.3 242.85 540.9667 242.56667 541.5 242.0 C 542.06665 241.46666 542.35 240.79999 542.35 240.0 C 542.35 239.2 542.06665 238.51666 541.5 237.95 C 540.9667 237.41666 540.3 237.15 539.5 237.15 C 538.7 237.15 538.01666 237.41666 537.45 237.95 C 536.9167 238.51666 536.65 239.2 536.65 240.0 Z"/>
+			<path fill="#71CA35" stroke-linecap="round" stroke-linejoin="round" d="M 472.2 284.75 C 473.06668 285.58334 473.5 286.61667 473.5 287.85 L 473.5 312.15 C 473.5 313.35 473.08334 314.35 472.25 315.15 L 472.1 315.3 L 470.8 316.15 L 469.0 316.5 L 467.15 316.15 C 466.65 315.95 466.18332 315.65002 465.75 315.25 C 464.91666 314.41666 464.5 313.38333 464.5 312.15 L 464.5 287.85 C 464.5 286.65 464.9 285.63333 465.7 284.8 L 465.8 284.7 C 466.66666 283.9 467.71667 283.5 468.95 283.5 C 470.25 283.5 471.33334 283.91666 472.2 284.75 Z M 469.0 316.5 L 468.95 316.5 Z M 468.95 283.5 L 469.0 283.5 Z M 466.55 287.85 L 466.55 312.15 C 466.55 312.81665 466.76666 313.36664 467.2 313.8 C 467.7 314.26666 468.28336 314.5 468.95 314.5 C 469.68332 314.5 470.26666 314.26666 470.7 313.8 C 471.2 313.36667 471.45 312.81668 471.45 312.15 L 471.45 287.85 C 471.45 287.18335 471.2 286.61667 470.7 286.15 C 470.26666 285.71667 469.69998 285.5 469.0 285.5 C 468.30002 285.5 467.7 285.71667 467.2 286.15 C 466.76666 286.61667 466.55 287.18335 466.55 287.85 Z M 468.95 314.5 L 469.0 314.5 Z M 469.0 285.5 L 468.95 285.5 Z"/>
+			<path fill="url(#Grad1)" stroke-linecap="round" stroke-linejoin="round" d="M 466.55 312.15 L 466.55 287.85 C 466.55 287.18335 466.76666 286.61667 467.2 286.15 C 467.7 285.71667 468.28336 285.5 468.95 285.5 C 469.68332 285.5 470.26666 285.71667 470.7 286.15 C 471.2 286.61667 471.45 287.18335 471.45 287.85 L 471.45 312.15 C 471.45 312.81665 471.2 313.36664 470.7 313.8 C 470.26666 314.26666 469.69998 314.5 469.0 314.5 C 468.30002 314.5 467.7 314.26666 467.2 313.8 C 466.76666 313.36667 466.55 312.81668 466.55 312.15 Z M 469.0 314.5 L 468.95 314.5 Z M 468.95 285.5 L 469.0 285.5 Z"/>
+			<path fill="#CE3131" stroke-linecap="round" stroke-linejoin="round" d="M 535.8 284.75 L 537.2 283.85 L 539.0 283.5 L 540.85 283.85 L 542.15 284.7 L 542.3 284.85 C 543.1 285.65 543.5 286.65 543.5 287.85 L 543.5 312.15 C 543.5 313.38333 543.0833 314.41666 542.25 315.25 C 541.38336 316.08334 540.3167 316.5 539.05 316.5 C 537.7833 316.5 536.7167 316.1 535.85 315.3 L 535.75 315.2 C 534.9167 314.36667 534.5 313.35 534.5 312.15 L 534.5 287.85 C 534.5 286.61667 534.93335 285.58334 535.8 284.75 Z M 539.05 316.5 L 539.0 316.5 Z M 539.0 283.5 L 539.05 283.5 Z M 539.05 285.5 L 539.0 285.5 C 538.3 285.5 537.7167 285.73334 537.25 286.2 C 536.7833 286.63333 536.55 287.18332 536.55 287.85 L 536.55 312.15 C 536.55 312.81665 536.7833 313.38333 537.25 313.85 C 537.7167 314.28333 538.3 314.5 539.0 314.5 C 539.7 314.5 540.2833 314.28333 540.75 313.85 C 541.2167 313.38333 541.45 312.81665 541.45 312.15 L 541.45 287.85 C 541.45 287.18335 541.2167 286.63336 540.75 286.2 C 540.2833 285.73334 539.7167 285.5 539.05 285.5 Z M 539.0 314.5 L 539.05 314.5 Z"/>
+			<path fill="url(#Grad2)" stroke-linecap="round" stroke-linejoin="round" d="M 539.0 285.5 L 539.05 285.5 C 539.7167 285.5 540.2833 285.73334 540.75 286.2 C 541.2167 286.63333 541.45 287.18332 541.45 287.85 L 541.45 312.15 C 541.45 312.81665 541.2167 313.38333 540.75 313.85 C 540.2833 314.28333 539.7167 314.5 539.05 314.5 C 538.31665 314.5 537.7167 314.28333 537.25 313.85 C 536.7833 313.38333 536.55 312.81665 536.55 312.15 L 536.55 287.85 C 536.55 287.18335 536.7833 286.63336 537.25 286.2 C 537.7167 285.73334 538.3 285.5 539.0 285.5 Z M 539.05 314.5 L 539.0 314.5 Z"/>
+			<path fill="#CCCCCC" stroke-linecap="round" stroke-linejoin="round" d="M 415.2 396.1 L 418.6 372.25 C 418.6667 371.71667 418.88336 371.28336 419.25 370.95 C 419.61667 370.61667 420.05 370.45 420.55 370.45 L 433.5 370.45 C 434.0 370.45 434.43332 370.61667 434.8 370.95 C 435.16666 371.28336 435.4 371.71667 435.5 372.25 L 438.9 396.1 L 437.05 397.35 L 433.5 372.5 L 420.55 372.5 L 417.0 397.35 L 415.2 396.1 Z M 440.6 435.2 L 434.8 444.5 L 434.1 445.2 L 433.1 445.45 L 431.35 445.45 L 431.35 443.45 L 433.1 443.45 L 439.35 433.3 L 440.6 435.2 Z M 422.7 445.45 L 420.95 445.45 L 420.0 445.2 L 419.25 444.5 L 413.45 435.2 L 414.65 433.3 L 420.95 443.45 L 422.7 443.45 L 422.7 445.45 Z"/>
+			<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 438.9 396.1 L 463.0 409.8 L 467.75 407.55 L 469.2 409.05 L 462.9 412.05 L 441.2 399.75 L 437.05 397.35 L 438.9 396.1 Z M 468.25 428.6 L 463.75 430.7 L 463.3 430.9 L 460.8 431.35 L 460.8 429.3 L 462.9 428.9 L 469.2 425.85 L 468.25 428.6 Z M 443.15 434.7 L 440.6 435.2 L 439.35 433.3 L 443.15 432.6 L 443.15 434.7 Z M 413.45 435.2 L 410.9 434.7 L 410.9 432.6 L 414.65 433.3 L 413.45 435.2 Z M 393.15 431.35 L 390.75 430.9 L 390.25 430.7 L 385.8 428.6 L 384.8 425.85 L 391.1 428.9 L 393.15 429.3 L 393.15 431.35 Z M 386.25 407.55 L 391.0 409.8 L 415.2 396.1 L 417.0 397.35 L 412.85 399.75 L 391.1 412.05 L 384.8 409.05 L 386.25 407.55 Z"/>
+			<path fill="#802B2B" stroke-linecap="round" stroke-linejoin="round" d="M 467.75 407.55 L 470.45 402.7 C 470.61667 402.36667 470.86667 402.11667 471.2 401.95 L 472.2 401.65 L 474.5 401.65 C 474.86667 401.65 475.21667 401.75 475.55 401.95 L 476.3 402.8 L 476.5 403.9 L 473.45 431.05 L 472.9 432.2 C 472.6 432.5 472.23334 432.69998 471.8 432.8 L 470.5 432.6 C 470.1 432.36667 469.81668 432.05 469.65 431.65 L 468.25 428.6 L 469.2 425.85 L 471.45 430.8 L 474.5 403.65 L 472.2 403.65 L 469.2 409.05 L 467.75 407.55 Z M 431.35 445.45 L 422.7 445.45 L 422.7 443.45 L 431.35 443.45 L 431.35 445.45 Z M 385.8 428.6 L 384.4 431.65 L 383.5 432.6 L 382.25 432.8 C 381.78333 432.69998 381.4 432.5 381.1 432.2 C 380.8 431.86667 380.63333 431.48334 380.6 431.05 L 377.55 403.9 C 377.48334 403.5 377.53336 403.13333 377.7 402.8 C 377.86667 402.43332 378.11667 402.15 378.45 401.95 C 378.78336 401.75 379.13336 401.65 379.5 401.65 L 381.75 401.65 C 382.11667 401.65 382.45 401.75 382.75 401.95 L 383.5 402.65 L 386.25 407.55 L 384.8 409.05 L 381.75 403.65 L 379.5 403.65 L 382.55 430.8 L 384.8 425.85 L 385.8 428.6 Z"/>
+			<path fill="#CAA202" stroke-linecap="round" stroke-linejoin="round" d="M 460.8 431.35 L 443.15 434.7 L 443.15 432.6 L 447.55 431.75 L 452.0 430.95 L 456.4 430.15 L 460.8 429.3 L 460.8 431.35 Z M 410.9 434.7 L 393.15 431.35 L 393.15 429.3 L 397.6 430.15 L 402.05 430.95 L 406.45 431.75 L 410.9 432.6 L 410.9 434.7 Z"/>
+			<path fill="#F2F2F2" stroke-linecap="round" stroke-linejoin="round" d="M 417.0 397.35 L 420.55 372.5 L 433.5 372.5 L 437.05 397.35 L 439.35 413.45 L 439.35 433.3 L 433.1 443.45 L 431.35 443.45 L 436.5 434.95 L 436.5 413.45 L 432.6 376.0 L 421.4 376.0 L 417.5 413.45 L 417.5 434.95 L 422.7 443.45 L 420.95 443.45 L 414.65 433.3 L 414.65 413.45 L 417.0 397.35 Z"/>
+			<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 412.85 399.75 L 417.0 397.35 L 414.65 413.45 L 414.65 433.3 L 410.9 432.6 L 410.9 427.25 L 410.9 426.25 L 410.9 413.45 L 412.85 399.75 Z M 439.35 433.3 L 439.35 413.45 L 437.05 397.35 L 441.2 399.75 L 443.15 413.45 L 443.15 426.25 L 443.15 427.25 L 443.15 432.6 L 439.35 433.3 Z"/>
+			<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 412.85 399.75 L 410.9 413.45 L 410.9 426.25 L 393.15 423.0 L 393.15 423.95 L 393.15 429.3 L 391.1 428.9 L 391.1 412.05 L 412.85 399.75 Z M 441.2 399.75 L 462.9 412.05 L 462.9 428.9 L 460.8 429.3 L 460.8 423.95 L 460.8 423.0 L 443.15 426.25 L 443.15 413.45 L 441.2 399.75 Z"/>
+			<path fill="#B9CED7" stroke-linecap="round" stroke-linejoin="round" d="M 410.9 426.25 L 410.9 427.25 L 406.45 426.4 L 402.05 425.6 L 397.6 424.75 L 393.15 423.95 L 393.15 423.0 L 410.9 426.25 Z M 391.1 412.05 L 391.1 428.9 L 384.8 425.85 L 384.8 409.05 L 391.1 412.05 Z M 462.9 412.05 L 469.2 409.05 L 469.2 425.85 L 462.9 428.9 L 462.9 412.05 Z M 452.0 425.6 L 447.55 426.4 L 443.15 427.25 L 443.15 426.25 L 460.8 423.0 L 460.8 423.95 L 456.4 424.75 L 452.0 425.6 Z"/>
+			<path fill="#FFCC00" stroke-linecap="round" stroke-linejoin="round" d="M 410.9 427.25 L 410.9 432.6 L 406.45 431.75 L 406.45 426.4 L 410.9 427.25 Z M 397.6 424.75 L 402.05 425.6 L 402.05 430.95 L 397.6 430.15 L 397.6 424.75 Z M 447.55 426.4 L 447.55 431.75 L 443.15 432.6 L 443.15 427.25 L 447.55 426.4 Z M 452.0 430.95 L 452.0 425.6 L 456.4 424.75 L 456.4 430.15 L 452.0 430.95 Z"/>
+			<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M 434.4 405.35 L 434.25 403.95 L 419.8 403.95 L 419.65 405.35 L 418.65 413.45 L 435.35 413.45 L 434.4 405.35 Z M 384.8 409.05 L 384.8 425.85 L 382.55 430.8 L 379.5 403.65 L 381.75 403.65 L 384.8 409.05 Z M 422.7 443.45 L 417.5 434.95 L 417.5 413.45 L 421.4 376.0 L 432.6 376.0 L 436.5 413.45 L 436.5 434.95 L 431.35 443.45 L 422.7 443.45 Z M 471.45 430.8 L 469.2 425.85 L 469.2 409.05 L 472.2 403.65 L 474.5 403.65 L 471.45 430.8 Z"/>
+			<path fill="#C44D4D" stroke-linecap="round" stroke-linejoin="round" d="M 434.25 403.95 L 434.4 405.35 L 419.65 405.35 L 419.8 403.95 L 434.25 403.95 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 419.65 405.35 L 434.4 405.35 L 435.35 413.45 L 418.65 413.45 L 419.65 405.35 Z"/>
+			<path fill="#ECBD02" stroke-linecap="round" stroke-linejoin="round" d="M 393.15 429.3 L 393.15 423.95 L 397.6 424.75 L 397.6 430.15 L 393.15 429.3 Z M 402.05 425.6 L 406.45 426.4 L 406.45 431.75 L 402.05 430.95 L 402.05 425.6 Z M 447.55 431.75 L 447.55 426.4 L 452.0 425.6 L 452.0 430.95 L 447.55 431.75 Z M 456.4 430.15 L 456.4 424.75 L 460.8 423.95 L 460.8 429.3 L 456.4 430.15 Z"/>
+		</g>
+		<g transform="matrix(1.0033417 0.0 0.0 1.0067139 530.35 407.95)">
+			<g transform="matrix(1.0 0.0 0.0 1.0 0.0 0.0)">
+				<path fill="#CCCCCC" stroke-linecap="round" stroke-linejoin="round" d="M -11.9 -11.75 L -8.95 -35.45 L -8.4 -36.7 C -8.066667 -37.033333 -7.6833334 -37.2 -7.25 -37.2 L 7.3 -37.2 C 7.733333 -37.2 8.099999 -37.033333 8.4 -36.7 C 8.733333 -36.36667 8.933332 -35.95 9.0 -35.45 L 12.0 -11.75 L 11.9 -11.65 L 10.35 -10.5 L 7.3 -35.2 L -4.0 -35.2 L -7.1 -10.5 L -8.65 -11.75 L -8.8 -11.65 L -8.9 -11.75 L -9.05 -11.65 L -9.15 -11.75 L -9.3 -11.65 L -9.4 -11.75 L -9.55 -11.65 L -9.65 -11.75 L -9.8 -11.65 L -9.9 -11.75 L -10.15 -11.55 L -10.4 -11.75 L -10.55 -11.65 L -10.65 -11.75 L -10.8 -11.65 L -10.9 -11.75 L -11.05 -11.65 L -11.15 -11.75 L -11.3 -11.65 L -11.4 -11.75 L -11.55 -11.65 L -11.65 -11.75 L -11.8 -11.65 L -11.9 -11.75 Z M 8.4 36.3 L 7.8 37.0 L 6.95 37.25 L 5.4 37.25 L 5.4 35.25 L 6.95 35.25 L 12.35 25.2 L 13.45 27.0 L 8.4 36.3 Z M 13.45 27.0 L 13.45 27.05 Z M -2.15 37.25 L -6.9 37.25 L -7.75 37.0 L -8.4 36.3 L -13.45 27.05 L -13.2 27.05 L -12.95 27.05 L -12.7 27.05 L -12.45 27.05 L -12.2 27.05 L -11.95 27.05 L -11.9 26.95 L -11.45 27.05 L -11.2 27.05 L -10.95 27.05 L -10.7 27.05 L -10.45 27.05 L -10.2 27.05 L -9.15 25.2 L -3.65 35.25 L -2.15 35.25 L -2.15 37.25 Z M -13.45 27.05 L -13.4 27.0 Z M -13.2 27.05 L -13.15 27.0 Z M -10.45 27.05 L -10.4 27.0 Z M -10.7 27.05 L -10.65 27.0 Z M -10.95 27.05 L -10.9 27.0 Z M -11.2 27.05 L -11.15 27.0 Z M -11.45 27.05 L -11.4 27.0 Z M -12.2 27.05 L -12.15 27.0 Z M -12.45 27.05 L -12.4 27.0 Z M -12.7 27.05 L -12.65 27.0 Z M -12.95 27.05 L -12.9 27.0 Z"/>
+				<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 12.0 -11.75 L 31.45 0.9 L 33.85 -0.4 L 33.95 -0.3 L 34.1 -0.4 L 34.2 -0.3 L 34.35 -0.4 L 34.45 -0.3 L 34.6 -0.4 L 34.7 -0.3 L 34.85 -0.4 L 34.95 -0.3 L 35.1 -0.4 L 35.2 -0.3 L 35.35 -0.4 L 35.5 -0.2 L 35.85 -0.4 L 35.95 -0.3 L 36.1 -0.4 L 36.2 -0.3 L 36.35 -0.4 L 36.45 -0.3 L 36.6 -0.4 L 36.7 -0.3 L 36.85 -0.4 L 36.95 -0.3 L 37.1 -0.4 L 38.4 1.1 L 32.9 4.1 L 14.0 -8.15 L 10.35 -10.5 L 11.9 -11.65 L 12.0 -11.75 Z M 34.95 21.95 L 33.65 22.6 L 33.25 22.8 L 31.05 23.25 L 31.05 21.2 L 32.9 20.8 L 38.4 17.8 L 37.55 20.5 L 34.95 21.95 Z M 15.7 24.5 L 15.7 26.55 L 13.45 27.05 L 12.35 25.2 L 15.7 24.5 Z M 13.45 27.05 L 13.45 27.0 Z M -15.65 26.55 L -15.65 26.5 L -15.4 26.55 L -15.15 26.55 L -14.9 26.55 L -14.65 26.55 L -14.4 26.55 L -14.15 26.55 L -14.15 26.45 L -13.65 26.55 L -13.4 26.55 L -13.15 26.55 L -12.9 26.55 L -12.65 26.55 L -12.4 26.55 L -12.4 24.5 L -9.15 25.2 L -10.2 27.05 L -10.4 27.0 L -10.65 27.0 L -10.9 27.0 L -11.15 27.0 L -11.4 27.0 L -11.9 26.95 L -11.95 27.05 L -12.15 27.0 L -12.4 27.0 L -12.65 27.0 L -12.9 27.0 L -13.15 27.0 L -13.4 27.0 L -15.65 26.55 Z M -13.4 27.0 L -13.45 27.05 Z M -15.4 26.55 L -15.4 26.5 Z M -13.15 27.0 L -13.2 27.05 Z M -15.15 26.55 L -15.15 26.5 Z M -12.9 27.0 L -12.95 27.05 Z M -14.9 26.55 L -14.9 26.5 Z M -12.65 27.0 L -12.7 27.05 Z M -14.65 26.55 L -14.65 26.5 Z M -12.4 27.0 L -12.45 27.05 Z M -14.4 26.55 L -14.4 26.5 Z M -12.15 27.0 L -12.2 27.05 Z M -13.65 26.55 L -13.65 26.5 Z M -11.4 27.0 L -11.45 27.05 Z M -13.4 26.55 L -13.4 26.5 Z M -11.15 27.0 L -11.2 27.05 Z M -13.15 26.55 L -13.15 26.5 Z M -10.9 27.0 L -10.95 27.05 Z M -12.9 26.55 L -12.9 26.5 Z M -10.65 27.0 L -10.7 27.05 Z M -12.65 26.55 L -12.65 26.5 Z M -10.4 27.0 L -10.45 27.05 Z M -33.15 22.8 L -33.6 22.6 L -34.8 21.95 L -34.25 20.5 L -35.1 17.8 L -29.6 20.8 L -27.85 21.2 L -27.85 23.25 L -28.1 23.2 L -28.35 23.2 L -28.6 23.2 L -28.85 23.2 L -29.1 23.2 L -29.6 23.15 L -29.6 23.25 L -29.85 23.2 L -30.1 23.2 L -30.35 23.2 L -30.6 23.2 L -30.85 23.2 L -31.1 23.2 L -33.15 22.8 Z M -31.1 23.2 L -31.1 23.25 Z M -30.85 23.2 L -30.85 23.25 Z M -30.6 23.2 L -30.6 23.25 Z M -28.1 23.2 L -28.1 23.25 Z M -28.35 23.2 L -28.35 23.25 Z M -28.6 23.2 L -28.6 23.25 Z M -28.85 23.2 L -28.85 23.25 Z M -29.1 23.2 L -29.1 23.25 Z M -29.85 23.2 L -29.85 23.25 Z M -30.1 23.2 L -30.1 23.25 Z M -30.35 23.2 L -30.35 23.25 Z M -33.85 -0.4 L -31.5 0.9 L -11.9 -11.75 L -11.8 -11.65 L -11.65 -11.75 L -11.55 -11.65 L -11.4 -11.75 L -11.3 -11.65 L -11.15 -11.75 L -11.05 -11.65 L -10.9 -11.75 L -10.8 -11.65 L -10.65 -11.75 L -10.55 -11.65 L -10.4 -11.75 L -10.15 -11.55 L -9.9 -11.75 L -9.8 -11.65 L -9.65 -11.75 L -9.55 -11.65 L -9.4 -11.75 L -9.3 -11.65 L -9.15 -11.75 L -9.05 -11.65 L -8.9 -11.75 L -8.8 -11.65 L -8.65 -11.75 L -7.1 -10.5 L -10.7 -8.15 L -29.6 4.1 L -35.1 1.1 L -33.85 -0.4 Z"/>
+				<path fill="#802B2B" stroke-linecap="round" stroke-linejoin="round" d="M 33.85 -0.4 L 36.2 -5.2 L 36.85 -5.95 C 37.116665 -6.15 37.416664 -6.25 37.75 -6.25 L 43.0 -6.25 L 43.9 -5.95 L 44.55 -5.1 L 44.75 -4.0 L 42.1 22.95 L 41.6 24.1 C 41.333332 24.4 41.016666 24.6 40.65 24.7 L 40.25 24.75 L 40.0 24.75 L 39.75 24.75 L 39.5 24.75 L 39.25 24.75 L 38.85 24.7 L 38.5 24.75 L 38.25 24.75 L 38.0 24.75 L 37.75 24.75 L 37.5 24.75 L 37.25 24.75 L 36.25 24.5 L 35.5 23.55 L 34.95 21.95 L 37.55 20.5 L 38.4 17.8 L 40.35 22.7 L 43.0 -4.25 L 41.0 -4.25 L 38.4 1.1 L 37.1 -0.4 L 36.95 -0.3 L 36.85 -0.4 L 36.7 -0.3 L 36.6 -0.4 L 36.45 -0.3 L 36.35 -0.4 L 36.2 -0.3 L 36.1 -0.4 L 35.95 -0.3 L 35.85 -0.4 L 35.5 -0.2 L 35.35 -0.4 L 35.2 -0.3 L 35.1 -0.4 L 34.95 -0.3 L 34.85 -0.4 L 34.7 -0.3 L 34.6 -0.4 L 34.45 -0.3 L 34.35 -0.4 L 34.2 -0.3 L 34.1 -0.4 L 33.95 -0.3 L 33.85 -0.4 Z M 5.4 37.25 L -2.15 37.25 L -2.15 35.25 L 5.4 35.25 L 5.4 37.25 Z M -34.8 21.95 L -35.45 23.55 L -36.25 24.5 L -37.15 24.75 L -37.4 24.75 L -37.65 24.75 L -37.9 24.75 L -38.2 24.75 L -38.55 24.7 L -38.9 24.75 L -39.15 24.75 L -39.4 24.75 L -39.65 24.75 L -39.9 24.75 L -40.15 24.75 L -40.6 24.7 C -41.0 24.6 -41.333332 24.4 -41.6 24.1 L -42.0 22.95 L -44.65 -4.0 L -44.55 -5.1 L -43.9 -5.95 L -42.95 -6.25 L -37.75 -6.25 L -36.9 -5.95 L -36.25 -5.25 L -33.85 -0.4 L -35.1 1.1 L -37.75 -4.25 L -39.7 -4.25 L -37.05 22.7 L -35.1 17.8 L -34.25 20.5 L -34.8 21.95 Z"/>
+				<path fill="#CAA202" stroke-linecap="round" stroke-linejoin="round" d="M 31.05 23.25 L 15.7 26.55 L 15.7 24.5 L 19.5 23.65 L 23.4 22.85 L 27.2 22.05 L 31.05 21.2 L 31.05 23.25 Z M -31.1 23.25 L -31.1 23.2 L -30.85 23.25 L -30.6 23.25 L -30.35 23.25 L -30.1 23.25 L -29.85 23.25 L -29.6 23.25 L -29.6 23.15 L -29.1 23.25 L -28.85 23.25 L -28.6 23.25 L -28.35 23.25 L -28.1 23.25 L -27.85 23.25 L -27.85 21.2 L -23.95 22.05 L -20.1 22.85 L -16.3 23.65 L -12.4 24.5 L -12.4 26.55 L -12.65 26.5 L -12.9 26.5 L -13.15 26.5 L -13.4 26.5 L -13.65 26.5 L -14.15 26.45 L -14.15 26.55 L -14.4 26.5 L -14.65 26.5 L -14.9 26.5 L -15.15 26.5 L -15.4 26.5 L -15.65 26.5 L -31.1 23.25 Z M -15.65 26.5 L -15.65 26.55 Z M -30.85 23.25 L -30.85 23.2 Z M -15.4 26.5 L -15.4 26.55 Z M -30.6 23.25 L -30.6 23.2 Z M -15.15 26.5 L -15.15 26.55 Z M -30.35 23.25 L -30.35 23.2 Z M -14.9 26.5 L -14.9 26.55 Z M -30.1 23.25 L -30.1 23.2 Z M -14.65 26.5 L -14.65 26.55 Z M -29.85 23.25 L -29.85 23.2 Z M -14.4 26.5 L -14.4 26.55 Z M -29.1 23.25 L -29.1 23.2 Z M -13.65 26.5 L -13.65 26.55 Z M -28.85 23.25 L -28.85 23.2 Z M -13.4 26.5 L -13.4 26.55 Z M -28.6 23.25 L -28.6 23.2 Z M -13.15 26.5 L -13.15 26.55 Z M -28.35 23.25 L -28.35 23.2 Z M -12.9 26.5 L -12.9 26.55 Z M -28.1 23.25 L -28.1 23.2 Z M -12.65 26.5 L -12.65 26.55 Z"/>
+				<path fill="#F2F2F2" stroke-linecap="round" stroke-linejoin="round" d="M -7.1 -10.5 L -4.0 -35.2 L 7.3 -35.2 L 10.35 -10.5 L 12.35 5.45 L 12.35 25.2 L 6.95 35.25 L 5.4 35.25 L 9.9 26.8 L 9.9 5.45 L 6.5 -31.7 L -3.25 -31.7 L -6.65 5.45 L -6.65 26.8 L -2.15 35.25 L -3.65 35.25 L -9.15 25.2 L -9.15 5.45 L -7.1 -10.5 Z"/>
+				<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M -2.15 35.25 L -6.65 26.8 L -6.65 5.45 L -3.25 -31.7 L 6.5 -31.7 L 9.9 5.45 L 9.9 26.8 L 5.4 35.25 L -2.15 35.25 Z M 8.05 -2.55 L 7.95 -3.95 L -4.65 -3.95 L -4.8 -2.55 L -5.65 5.45 L 8.9 5.45 L 8.05 -2.55 Z M -37.75 -4.25 L -35.1 1.1 L -35.1 17.8 L -37.05 22.7 L -39.7 -4.25 L -37.75 -4.25 Z M 40.35 22.7 L 38.4 17.8 L 38.4 1.1 L 41.0 -4.25 L 43.0 -4.25 L 40.35 22.7 Z"/>
+				<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 12.35 25.2 L 12.35 5.45 L 10.35 -10.5 L 14.0 -8.15 L 15.7 5.45 L 15.7 18.2 L 15.7 19.15 L 15.7 24.5 L 12.35 25.2 Z M -12.4 19.15 L -12.4 18.2 L -12.4 5.45 L -10.7 -8.15 L -7.1 -10.5 L -9.15 5.45 L -9.15 25.2 L -12.4 24.5 L -12.4 19.15 Z"/>
+				<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 14.0 -8.15 L 32.9 4.1 L 32.9 20.8 L 31.05 21.2 L 31.05 15.9 L 31.05 14.95 L 15.7 18.2 L 15.7 5.45 L 14.0 -8.15 Z M -27.85 15.9 L -27.85 21.2 L -29.6 20.8 L -29.6 4.1 L -10.7 -8.15 L -12.4 5.45 L -12.4 18.2 L -27.85 14.95 L -27.85 15.9 Z"/>
+				<path fill="#B9CED7" stroke-linecap="round" stroke-linejoin="round" d="M 32.9 4.1 L 38.4 1.1 L 38.4 17.8 L 32.9 20.8 L 32.9 4.1 Z M -23.95 16.7 L -27.85 15.9 L -27.85 14.95 L -12.4 18.2 L -12.4 19.15 L -16.3 18.35 L -20.1 17.55 L -23.95 16.7 Z M -29.6 4.1 L -29.6 20.8 L -35.1 17.8 L -35.1 1.1 L -29.6 4.1 Z M 23.4 17.55 L 19.5 18.35 L 15.7 19.15 L 15.7 18.2 L 31.05 14.95 L 31.05 15.9 L 27.2 16.7 L 23.4 17.55 Z"/>
+				<path fill="#C44D4D" stroke-linecap="round" stroke-linejoin="round" d="M 7.95 -3.95 L 8.05 -2.55 L -4.8 -2.55 L -4.65 -3.95 L 7.95 -3.95 Z"/>
+				<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M -4.8 -2.55 L 8.05 -2.55 L 8.9 5.45 L -5.65 5.45 L -4.8 -2.55 Z"/>
+				<path fill="#ECBD02" stroke-linecap="round" stroke-linejoin="round" d="M -27.85 15.9 L -23.95 16.7 L -23.95 22.05 L -27.85 21.2 L -27.85 15.9 Z M -20.1 17.55 L -16.3 18.35 L -16.3 23.65 L -20.1 22.85 L -20.1 17.55 Z M 19.5 23.65 L 19.5 18.35 L 23.4 17.55 L 23.4 22.85 L 19.5 23.65 Z M 31.05 15.9 L 31.05 21.2 L 27.2 22.05 L 27.2 16.7 L 31.05 15.9 Z"/>
+				<path fill="#FFCC00" stroke-linecap="round" stroke-linejoin="round" d="M -23.95 22.05 L -23.95 16.7 L -20.1 17.55 L -20.1 22.85 L -23.95 22.05 Z M -16.3 18.35 L -12.4 19.15 L -12.4 24.5 L -16.3 23.65 L -16.3 18.35 Z M 19.5 18.35 L 19.5 23.65 L 15.7 24.5 L 15.7 19.15 L 19.5 18.35 Z M 23.4 22.85 L 23.4 17.55 L 27.2 16.7 L 27.2 22.05 L 23.4 22.85 Z"/>
+			</g>
+		</g>
+		<g transform="matrix(1.0 0.0 0.0 1.0 0.0 0.0)">
+			<path fill="#802B2B" stroke-linecap="round" stroke-linejoin="round" d="M 567.85 407.55 L 570.2 402.7 L 570.85 401.95 C 571.11664 401.75 571.39996 401.65 571.7 401.65 L 573.75 401.65 C 574.05 401.65 574.35 401.75 574.65 401.95 L 575.3 402.8 L 575.5 403.9 L 572.8 431.05 C 572.76666 431.48334 572.61664 431.86667 572.35 432.2 L 571.35 432.8 C 570.95 432.86667 570.5834 432.80002 570.25 432.6 C 569.88336 432.36667 569.63336 432.05 569.5 431.65 L 568.25 428.6 L 569.1 425.85 L 571.05 430.8 L 573.75 403.65 L 571.7 403.65 L 569.1 409.05 L 567.85 407.55 Z M 536.0 445.45 L 528.45 445.45 L 528.45 443.45 L 536.0 443.45 L 536.0 445.45 Z M 496.25 428.6 L 495.0 431.65 L 494.25 432.6 L 493.15 432.8 C 492.75 432.69998 492.41666 432.5 492.15 432.2 C 491.88333 431.86667 491.73334 431.48334 491.7 431.05 L 489.05 403.9 C 488.98334 403.5 489.01666 403.13333 489.15 402.8 C 489.31665 402.43332 489.53333 402.15 489.8 401.95 C 490.1 401.75 490.4167 401.65 490.75 401.65 L 492.7 401.65 L 493.6 401.95 L 494.25 402.65 L 496.65 407.55 L 495.35 409.05 L 492.7 403.65 L 490.75 403.65 L 493.4 430.8 L 495.35 425.85 L 496.25 428.6 Z"/>
+			<path fill="#9EBBC7" stroke-linecap="round" stroke-linejoin="round" d="M 568.25 428.6 L 564.35 430.7 L 563.95 430.9 L 561.75 431.35 L 561.75 429.3 L 563.6 428.9 L 569.1 425.85 L 568.25 428.6 Z M 546.35 434.7 L 544.1 435.2 L 543.0 433.3 L 546.35 432.6 L 546.35 434.7 Z M 520.35 435.2 L 518.15 434.7 L 518.15 432.6 L 521.4 433.3 L 520.35 435.2 Z M 502.65 431.35 L 500.55 430.9 L 500.15 430.7 L 496.25 428.6 L 495.35 425.85 L 500.9 428.9 L 502.65 429.3 L 502.65 431.35 Z M 496.65 407.55 L 500.8 409.8 L 521.9 396.1 L 523.45 397.4 L 519.85 399.75 L 500.9 412.1 L 495.35 409.05 L 496.65 407.55 Z M 542.6 396.1 L 563.7 409.8 L 567.85 407.55 L 569.1 409.05 L 563.6 412.1 L 544.65 399.75 L 541.0 397.4 L 542.6 396.1 Z"/>
+			<path fill="#CAA202" stroke-linecap="round" stroke-linejoin="round" d="M 561.75 431.35 L 546.35 434.7 L 546.35 432.6 L 550.2 431.75 L 554.05 430.95 L 557.9 430.15 L 561.75 429.3 L 561.75 431.35 Z M 518.15 434.7 L 502.65 431.35 L 502.65 429.3 L 506.55 430.15 L 510.4 430.95 L 514.25 431.75 L 518.15 432.6 L 518.15 434.7 Z"/>
+			<path fill="#CCCCCC" stroke-linecap="round" stroke-linejoin="round" d="M 544.1 435.2 L 539.05 444.5 L 538.4 445.2 L 537.55 445.45 L 536.0 445.45 L 536.0 443.45 L 537.55 443.45 L 543.0 433.3 L 544.1 435.2 Z M 528.45 445.45 L 526.95 445.45 L 526.1 445.2 L 525.45 444.5 L 520.35 435.2 L 521.4 433.3 L 526.95 443.45 L 528.45 443.45 L 528.45 445.45 Z M 521.9 396.1 L 524.85 372.25 C 524.9167 371.75 525.1167 371.33334 525.45 371.0 C 525.75 370.66666 526.1333 370.5 526.6 370.5 L 537.9 370.5 C 538.3333 370.5 538.7166 370.66666 539.05 371.0 C 539.35 371.33334 539.55 371.75 539.65 372.25 L 542.6 396.1 L 541.0 397.4 L 537.9 372.5 L 526.6 372.5 L 523.45 397.4 L 521.9 396.1 Z"/>
+			<path fill="#AC3939" stroke-linecap="round" stroke-linejoin="round" d="M 569.1 409.05 L 571.7 403.65 L 573.75 403.65 L 571.05 430.8 L 569.1 425.85 L 569.1 409.05 Z M 528.45 443.45 L 523.9 434.95 L 523.9 413.45 L 527.3 376.05 L 537.1 376.05 L 540.5 413.45 L 540.5 434.95 L 536.0 443.45 L 528.45 443.45 Z M 525.8 405.4 L 524.9 413.45 L 539.5 413.45 L 538.7 405.4 L 538.55 403.95 L 525.9 403.95 L 525.8 405.4 Z M 492.7 403.65 L 495.35 409.05 L 495.35 425.85 L 493.4 430.8 L 490.75 403.65 L 492.7 403.65 Z"/>
+			<path fill="#F2F2F2" stroke-linecap="round" stroke-linejoin="round" d="M 537.9 372.5 L 541.0 397.4 L 543.0 413.45 L 543.0 433.3 L 537.55 443.45 L 536.0 443.45 L 540.5 434.95 L 540.5 413.45 L 537.1 376.05 L 527.3 376.05 L 523.9 413.45 L 523.9 434.95 L 528.45 443.45 L 526.95 443.45 L 521.4 433.3 L 521.4 413.45 L 523.45 397.4 L 526.6 372.5 L 537.9 372.5 Z"/>
+			<path fill="#BDD6DB" stroke-linecap="round" stroke-linejoin="round" d="M 523.45 397.4 L 521.4 413.45 L 521.4 433.3 L 518.15 432.6 L 518.15 427.25 L 518.15 426.25 L 518.15 413.45 L 519.85 399.75 L 523.45 397.4 Z M 543.0 433.3 L 543.0 413.45 L 541.0 397.4 L 544.65 399.75 L 546.35 413.45 L 546.35 426.25 L 546.35 427.25 L 546.35 432.6 L 543.0 433.3 Z"/>
+			<path fill="#D3E1E7" stroke-linecap="round" stroke-linejoin="round" d="M 519.85 399.75 L 518.15 413.45 L 518.15 426.25 L 502.65 423.0 L 502.65 423.95 L 502.65 429.3 L 500.9 428.9 L 500.9 412.1 L 519.85 399.75 Z M 546.35 413.45 L 544.65 399.75 L 563.6 412.1 L 563.6 428.9 L 561.75 429.3 L 561.75 423.95 L 561.75 423.0 L 546.35 426.25 L 546.35 413.45 Z"/>
+			<path fill="#B9CED7" stroke-linecap="round" stroke-linejoin="round" d="M 518.15 426.25 L 518.15 427.25 L 514.25 426.4 L 510.4 425.6 L 506.55 424.75 L 502.65 423.95 L 502.65 423.0 L 518.15 426.25 Z M 500.9 412.1 L 500.9 428.9 L 495.35 425.85 L 495.35 409.05 L 500.9 412.1 Z M 546.35 426.25 L 561.75 423.0 L 561.75 423.95 L 557.9 424.75 L 554.05 425.6 L 550.2 426.4 L 546.35 427.25 L 546.35 426.25 Z M 563.6 428.9 L 563.6 412.1 L 569.1 409.05 L 569.1 425.85 L 563.6 428.9 Z"/>
+			<path fill="#FFCC00" stroke-linecap="round" stroke-linejoin="round" d="M 518.15 427.25 L 518.15 432.6 L 514.25 431.75 L 514.25 426.4 L 518.15 427.25 Z M 557.9 424.75 L 557.9 430.15 L 554.05 430.95 L 554.05 425.6 L 557.9 424.75 Z M 550.2 426.4 L 550.2 431.75 L 546.35 432.6 L 546.35 427.25 L 550.2 426.4 Z M 510.4 425.6 L 510.4 430.95 L 506.55 430.15 L 506.55 424.75 L 510.4 425.6 Z"/>
+			<path fill="#4A3C55" stroke-linecap="round" stroke-linejoin="round" d="M 524.9 413.45 L 525.8 405.4 L 538.7 405.4 L 539.5 413.45 L 524.9 413.45 Z"/>
+			<path fill="#C44D4D" stroke-linecap="round" stroke-linejoin="round" d="M 538.7 405.4 L 525.8 405.4 L 525.9 403.95 L 538.55 403.95 L 538.7 405.4 Z"/>
+			<path fill="#ECBD02" stroke-linecap="round" stroke-linejoin="round" d="M 502.65 429.3 L 502.65 423.95 L 506.55 424.75 L 506.55 430.15 L 502.65 429.3 Z M 561.75 423.95 L 561.75 429.3 L 557.9 430.15 L 557.9 424.75 L 561.75 423.95 Z M 550.2 431.75 L 550.2 426.4 L 554.05 425.6 L 554.05 430.95 L 550.2 431.75 Z M 514.25 426.4 L 514.25 431.75 L 510.4 430.95 L 510.4 425.6 L 514.25 426.4 Z"/>
+			<path fill="url(#Grad3)" stroke-linecap="round" stroke-linejoin="round" d="M 215.45 247.3 C 211.75 213.0 211.75 179.1 215.45 145.6 C 215.45 145.26668 215.58333 144.98334 215.85 144.75 L 215.85 144.55 L 215.95 144.6 L 216.1 144.55 L 216.1 144.75 C 216.36667 144.98334 216.5 145.26668 216.5 145.6 C 220.2 179.1 220.2 213.0 216.5 247.3 C 216.5 247.63333 216.36667 247.93333 216.1 248.2 L 216.1 248.4 L 215.95 248.3 L 215.85 248.4 L 215.85 248.2 C 215.58333 247.93333 215.45 247.63333 215.45 247.3 Z"/>
+			<path fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" d="M 175.0 229.0 L 175.35 230.65 L 175.55 234.0 L 178.85 234.15 L 180.5 234.5 L 178.85 234.95 L 175.55 235.1 L 175.35 238.45 L 175.0 240.0 C 174.86667 240.0 174.73334 239.48334 174.6 238.45 C 174.5 237.51666 174.45 236.4 174.45 235.1 L 171.1 234.95 C 170.03334 234.85 169.5 234.70001 169.5 234.5 C 169.5 234.36667 170.03334 234.25 171.1 234.15 L 174.45 234.0 C 174.45 232.7 174.5 231.58333 174.6 230.65 C 174.73334 229.55 174.86667 229.0 175.0 229.0 Z"/>
+			<path fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" d="M 174.0 262.0 C 174.26666 262.0 174.5 263.03333 174.7 265.1 L 175.05 271.45 L 181.4 271.75 C 183.46666 271.94998 184.5 272.19998 184.5 272.5 C 184.5 272.80002 183.46666 273.05002 181.4 273.25 L 175.05 273.55 L 174.7 279.95 C 174.5 281.98334 174.26666 283.0 174.0 283.0 C 173.7 283.0 173.45 281.98334 173.25 279.95 C 173.05 278.15 172.95 276.01666 172.95 273.55 L 166.55 273.25 C 164.51666 273.05002 163.5 272.80002 163.5 272.5 C 163.5 272.19998 164.51666 271.94998 166.55 271.75 L 172.95 271.45 C 172.95 269.01666 173.05 266.9 173.25 265.1 C 173.45 263.03333 173.7 262.0 174.0 262.0 Z"/>
+			<path fill="url(#Grad4)" stroke-linecap="round" stroke-linejoin="round" d="M 453.7 37.25 C 454.6 36.116665 455.58334 35.016666 456.65 33.95 C 464.38333 26.216667 473.71667 22.35 484.65 22.35 C 495.5833 22.35 504.91666 26.216667 512.65 33.95 C 520.38336 41.683334 524.25 51.01667 524.25 61.95 C 524.25 64.183334 524.1 66.35 523.8 68.45 C 528.0 66.85 532.55 66.05 537.45 66.05 C 547.95 66.05 556.9167 69.76667 564.35 77.2 C 571.7833 84.63333 575.5 93.61667 575.5 104.15 C 575.5 114.65 571.7833 123.61667 564.35 131.05 C 556.9167 138.48334 547.95 142.2 537.45 142.2 L 531.35 141.8 C 529.45 144.7 527.2 147.45 524.6 150.05 C 519.56665 155.05 514.0 158.75 507.9 161.15 C 505.36667 165.88333 502.03333 170.3 497.9 174.4 C 487.13333 185.2 474.11667 190.6 458.85 190.6 C 443.58334 190.6 430.55002 185.2 419.75 174.4 L 415.4 169.55 L 409.1 169.95 C 395.6667 169.95 384.2 165.2 374.7 155.7 C 368.23334 149.23334 363.96667 141.85 361.9 133.55 C 355.3 132.31667 349.48334 129.16666 344.45 124.1 C 337.71667 117.4 334.35 109.28333 334.35 99.75 C 334.35 90.25 337.71667 82.13333 344.45 75.4 C 349.51666 70.333336 355.4 67.183334 362.1 65.95 L 362.1 65.4 C 362.1 58.966667 364.36667 53.466667 368.9 48.9 C 373.46667 44.366665 378.96667 42.1 385.4 42.1 C 390.76666 42.1 395.46667 43.666664 399.5 46.8 C 402.86667 44.2 406.75 42.9 411.15 42.9 L 411.65 42.9 C 412.68335 41.4 413.88336 39.966667 415.25 38.6 C 420.75 33.1 427.4 30.349998 435.2 30.35 C 442.30002 30.35 448.46667 32.65 453.7 37.25 Z"/>
+			<path fill="#FFFFFF" opacity="0.3019608" stroke-linecap="round" stroke-linejoin="round" d="M 391.05 295.0 C 398.78333 284.36667 402.65 272.1 402.65 258.2 C 402.65 240.66667 396.43332 225.68333 384.0 213.25 C 371.56668 200.78334 356.56668 194.55 339.0 194.55 C 321.4 194.55 306.38333 200.76666 293.95 213.2 C 281.55002 225.66666 275.35 240.66666 275.35 258.2 C 275.35 272.03336 279.16666 284.25003 286.8 294.85 C 277.26666 283.08334 272.5 269.31668 272.5 253.55 C 272.5 235.15 278.98334 219.46666 291.95 206.5 C 304.95 193.53334 320.63333 187.05 339.0 187.05 C 357.36667 187.05 373.03333 193.53334 386.0 206.5 C 399.0 219.5 405.5 235.18333 405.5 253.55 C 405.5 269.38333 400.68332 283.2 391.05 295.0 Z M 293.95 213.2 L 293.95 213.25 Z M 384.0 213.25 L 383.95 213.2 Z"/>
+		</g>
+	</g>
+</svg>
diff --git a/space-game/solution/spaceArt/spaceArt.swf b/space-game/solution/spaceArt/spaceArt.swf
new file mode 100755
index 00000000..94526faa
Binary files /dev/null and b/space-game/solution/spaceArt/spaceArt.swf differ
diff --git a/space-game/solution/spritesheet.png b/space-game/solution/spritesheet.png
new file mode 100644
index 00000000..39572938
Binary files /dev/null and b/space-game/solution/spritesheet.png differ
diff --git a/space-game/translations/README.es.md b/space-game/translations/README.es.md
new file mode 100644
index 00000000..1ed1c433
--- /dev/null
+++ b/space-game/translations/README.es.md
@@ -0,0 +1,26 @@
+# Construye un juego espacial
+
+Un juego espacial para enseñar los fundamentos de JavaScript más avanzados
+
+En esta lección aprenderás a construir tu propio juego espacial. Si alguna vez has jugado al juego "Space Invaders", este juego tiene la misma idea: dirigir una nave espacial y disparar a los monstruos que vienen desde arriba. Así es como se verá el juego terminado:
+
+![Finished game](pewpew.gif)
+
+En estas seis lecciones aprenderá lo siguiente:
+
+- **Interactuar** con el elemento Canvas para dibujar cosas en una pantalla
+- **Comprender** el sistema de coordenadas cartesiano
+- **Aprenda** el patrón Pub-Sub para crear una arquitectura de juegos de sonido que sea más fácil de mantener y ampliar
+- **Aprovecha** Async / Await para cargar recursos del juego
+- **Manejar** eventos de teclado
+
+## Visión de conjunto
+
+- teoría
+   - [Introducción a la creación de juegos con JavaScript](introduction/README.md)
+- practica
+   - [Dibujo a lienzo](drawing-to-canvas/README.md)
+   - [Mover elementos por la pantalla](moving-elements-around/README.md)
+   - [Detección de colisiones](collision-detection/README.md)
+   - [Manteniendo la puntuación](keeping-score/README.md)
+   - [Finalizar y reiniciar el juego](end-condition/README.md)
\ No newline at end of file
diff --git a/terrarium/1-intro-to-html/.github/post-lecture-quiz.md b/terrarium/1-intro-to-html/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..34304f86
--- /dev/null
+++ b/terrarium/1-intro-to-html/.github/post-lecture-quiz.md
@@ -0,0 +1,17 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. [Spans and Divs are interchangeable]
+
+- [ ] [true]
+- [ ] [false]
+
+2. [The head of an HTML doc can contain:]
+
+- [ ] [the title tag]
+- [ ] [metadata]
+- [ ] [all the above]
+
+3. [You can't use deprecated tags in your markup]
+- [ ] [true]
+- [ ] [false]
+- [ ] [false, but they have been deprecated for good reason]
\ No newline at end of file
diff --git a/terrarium/1-intro-to-html/.github/pre-lecture-quiz.md b/terrarium/1-intro-to-html/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..feb8ab0b
--- /dev/null
+++ b/terrarium/1-intro-to-html/.github/pre-lecture-quiz.md
@@ -0,0 +1,19 @@
+*A warm-up quiz about HTML*
+
+Complete this quiz in class
+
+1. HTML stands for 'HyperText Mockup Language'
+
+- [ ] [true]
+- [ ] [false]
+
+2. All HTML tags need both opening and closing tags
+
+- [ ] [true]
+- [ ] [false]
+
+3. Using semantic markup is most important for 
+
+- [ ] [code readability]
+- [ ] [screen readers]
+- [ ] [maintenance]
\ No newline at end of file
diff --git a/terrarium/1-intro-to-html/LICENSE b/terrarium/1-intro-to-html/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/terrarium/1-intro-to-html/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/terrarium/1-intro-to-html/README.md b/terrarium/1-intro-to-html/README.md
new file mode 100644
index 00000000..6392b6d3
--- /dev/null
+++ b/terrarium/1-intro-to-html/README.md
@@ -0,0 +1,219 @@
+# Terrarium Project Part 1: Introduction to HTML
+
+![Introduction to HTML](images/webdev101-html.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+HTML, or HyperText Markup Language, is the 'skeleton' of the web. If CSS 'dresses up' your HTML and JavaScript brings it to life, the body of your web application is its HTML. HTML's syntax even reflects that idea, as it includes "head", "body", and "footer" tags.
+
+In this lesson, we're going to use HTML to layout the 'skeleton' of our virtual terrarium's interface. It will have a title and three columns: a right and left column where the draggable plants live, and a center area that will be the actual glass-looking terrarium. By the end of this lesson, you will be able to see the plants in the columns, but the interface will look a little strange; don't worry, in the next section you will add CSS styles to the interface to make it look better.
+
+### Task:
+
+On your computer, create a folder called 'terrarium' and inside it, a file called 'index.html'. You can do this in Visual Studio Code after you create your terrarium folder by opening a new VS Code window, clicking 'open folder', and navigating to your new folder. Click the small 'file' button in the Explorer pane and create the new file:
+
+![explorer in VS Code](images/vs-code-index.png)
+
+> index.html files indicate to a browser that it is the default file in a folder; URLs such as `https://anysite.com/test` might be built using a folder structure including a folder called `test` with `index.html` inside it; `index.html` doesn't have to show in a URL.
+
+---
+
+## 1. The DocType and html tags
+
+The first line of an HTML file is its doctype. It's a little surprising that you need to have this line at the very top of the file, but it tells older browsers that the browser needs to render the page in a standard mode, following the current html specification.
+
+> Tip: in VS Code, you can hover over a tag and get information about its use from the MDN Reference guides.
+
+The second line should be the `<html>` tag's opening tag, followed right now by its closing tag. These tags are the root elements of your interface.
+
+### Task:
+
+Add these lines at the top of your `index.html` file:
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ There are a few different modes that can be determined by setting the DocType with a query string: [Quirks Mode and Standards Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). These modes used to support really old browsers that aren't normally used nowadays (Netscape Navigator 4 and Internet Explorer 5). You can stick to the standard doctype declaration.
+
+---
+
+## 2. The document's 'head'
+
+The 'head' area of the HTML document includes crucial information about your web page, also known as [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). In our case, we tell the web server to which this page will be sent to be rendered four things:
+
+-   the page's title
+-   page metadata including:
+    -   the 'character set', telling about what character encoding is used in the page
+    -   browser information, including `x-ua-compatible` which indicates that the IE=edge browser is supported
+    -   information about how the viewport should behave when it is loaded. Setting the viewport to have an initial scale of 1 controls the zoom level when the page is first loaded.
+
+### Task:
+
+Add a 'head' block to your document in between the opening and closing `<html>` tags.
+
+```html
+<head>
+	<title>Welcome to my Virtual Terrarium</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ What would happen if you set a viewport meta tag like this: `<meta name="viewport" content="width=600">`? Read more about the [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
+
+---
+
+## 3. The document's `body`
+
+### HTML Tags
+
+In HTML, you add tags to your .html file to create elements of a web page. Each tag usually has an opening and closing tag, like this: `<p>hello</p>` to indicate a paragraph. Create you interface's `<body>` by adding a set of tags inside the `<html>` tag pair; your markup now looks like this:
+
+### Task:
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+Now, you can start building out your page. Normally, you use `<div>` tags to create the separate elements in a page. We'll create a series of `<div>` elements which will contain images.
+
+### Images
+
+One html tag that doesn't need a closing tag is the `<img>` tag, because it has a `src` element that contains all the information the page needs to render the item.
+
+Create a folder in your app called `images` and in that, add all the images in the [source code folder](../images); (there are 14 images of plants).
+
+### Task:
+
+Add those plant images into two columns between the `<body></body>` tags:
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Note: Spans vs. Divs. Divs are considered 'block' elements, and Spans are 'inline'. What would happen if you transformed these divs to spans?
+
+With this markup, the plants now show up on the screen. It looks pretty bad, because they aren't yet styled using CSS, and we'll do that in the next lesson.
+
+Each image has an alt tag that will appear even if you can't see or render an image. This is an important element to include for accessibility. Learn more about accessibility in future lessons; for now, remember that it's important to enable screen readers to step through your web app so that visually impaired users can use your web site.
+
+✅ Did you notice that each image has the same alt tag? Is this good practice? Why or why not? Can you improve this code?
+
+---
+
+## 4. Semantic markup
+
+In general, it's preferable to use 'semantics' when writing HTML. What does that mean? It means that you use HTML tags the way they were designed: to represent its data; so an H1 tag should always be present on a page
+
+Add the following line right below your opening `<body>` tag:
+
+```html
+<h1>My Terrarium</h1>
+```
+
+Using semantic markup such as having headers be `<h1>` and unordered lists be rendered as `<ul>` helps screen readers navigate through a page. In general, buttons should be written as `<button>` and lists should be `<li>`. While it's _possible_ to use specially styled `<span>` elements with click handlers to mock buttons, it's better for differently-abled users to use technologies to determine where on a page a button resides, and to interact with it, if the element appears as a button. For this reason, try to use semantic markup as much as possible.
+
+✅ Take a look at a screen reader and [how it interacts with a web page](https://www.youtube.com/watch?v=OUDV1gqs9GA). Can you see why having non semantic markup might confuse the user?
+
+## 5. The terrarium
+
+The last part of this interface involves creating markup that will be styled to create a terrarium.
+
+### Task:
+
+Add this markup above the last `</div>` tag:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Even though you added this markup to the screen, you see absolutely nothing render. Why?
+
+---
+
+## 🚀Challenge
+
+There are some wild 'older' tags in HTML that are still fun to play with, though you shouldn't use deprecated tags such as [these tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) in your markup. Still, can you use the old `<marquee>` tag to make the h1 title scroll horizontally? (if you do, don't forget to remove it afterwards)
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+HTML is the 'tried and true' building block system that has helped build the web into what it is today. Learn a little about its history by studying some old and new tags. Can you figure out why some tags were deprecated and some added? What tags might be introduced in the future?
+
+Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=webdev101-github-jelooper).
+
+
+## Assignment
+
+[Practice your HTML: Build a blog mockup](assignment.md)
\ No newline at end of file
diff --git a/terrarium/1-intro-to-html/assignment.md b/terrarium/1-intro-to-html/assignment.md
new file mode 100644
index 00000000..617b45b3
--- /dev/null
+++ b/terrarium/1-intro-to-html/assignment.md
@@ -0,0 +1,11 @@
+# Practice your HTML: Build a blog mockup
+
+## Instructions
+
+Imagine you are designing, or redesigning, your personal web site. Create a graphical markup of your site, and then write down the HTML markup you would use to build out the various elements of the site. You can do this on paper, and scan it, or use software of your choice, just make sure to hand-code the HTML markup.
+
+## Rubric
+
+| Criteria | Exemplary                                                                           | Adequate                                                                         | Needs Improvement                                                                 |
+| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed |
\ No newline at end of file
diff --git a/terrarium/1-intro-to-html/images/vs-code-index.png b/terrarium/1-intro-to-html/images/vs-code-index.png
new file mode 100644
index 00000000..2d54f48c
Binary files /dev/null and b/terrarium/1-intro-to-html/images/vs-code-index.png differ
diff --git a/terrarium/1-intro-to-html/images/webdev101-html.png b/terrarium/1-intro-to-html/images/webdev101-html.png
new file mode 100644
index 00000000..98147807
Binary files /dev/null and b/terrarium/1-intro-to-html/images/webdev101-html.png differ
diff --git a/terrarium/1-intro-to-html/translations/README.es.md b/terrarium/1-intro-to-html/translations/README.es.md
new file mode 100644
index 00000000..038377db
--- /dev/null
+++ b/terrarium/1-intro-to-html/translations/README.es.md
@@ -0,0 +1,214 @@
+# Terrarium Project Parte 1: Introducción a HTML
+
+![Introducción a HTML](images/webdev101-html.png)
+> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+HTML, o HyperText Markup Language, es el "esqueleto" de la web. Si CSS 'viste' su HTML y JavaScript le da vida, el cuerpo de su aplicación web es su HTML. La sintaxis de HTML incluso refleja esa idea, ya que incluye etiquetas "head", "body" y "footer".
+
+En esta lección, usaremos HTML para diseñar el 'esqueleto' de la interfaz de nuestro terrario virtual. Tendrá un título y tres columnas: una columna derecha e izquierda donde viven las plantas que se pueden arrastrar, y un área central que será el terrario de vidrio real. Al final de esta lección, podrá ver las plantas en las columnas, pero la interfaz se verá un poco extraña; no se preocupe, en la siguiente sección agregará estilos CSS a la interfaz para que se vea mejor.
+
+### Tarea:
+
+En su computadora, cree una carpeta llamada 'terrario' y dentro de ella, un archivo llamado 'index.html'. Puede hacer esto en Visual Studio Code después de crear su carpeta de terrario abriendo una nueva ventana de VS Code, haciendo clic en 'abrir carpeta' y navegando a su nueva carpeta. Haga clic en el botón pequeño 'archivo' en el panel del Explorador y cree el nuevo archivo:
+
+! [explorador en VS Code] (images / vs-code-index.png)
+
+> Los archivos index.html indican a un navegador que es el archivo predeterminado en una carpeta; Las URL como `https://anysite.com/test` se pueden construir usando una estructura de carpetas que incluya una carpeta llamada `test` con `index.html` dentro; `Index.html` no tiene que aparecer en una URL.
+
+---
+
+## 1. Las etiquetas DocType y html
+
+La primera línea de un archivo HTML es su doctype. Es un poco sorprendente que necesite tener esta línea en la parte superior del archivo, pero le dice a los navegadores más antiguos que el navegador necesita representar la página en un modo estándar, siguiendo la especificación html actual.
+
+> Consejo: en VS Code, puede colocar el cursor sobre una etiqueta y obtener información sobre su uso en las guías de referencia de MDN.
+
+La segunda línea debe ser la etiqueta de apertura de la etiqueta `<html>`, seguida ahora por su etiqueta de cierre. Estas etiquetas son los elementos raíz de su interfaz.
+
+### Tarea:
+
+Agrega estas líneas en la parte superior de tu archivo `index.html`:
+
+
+```HTML
+<!DOCTYPE html>
+<html></html>
+```
+
+✅ Hay algunos modos diferentes que se pueden determinar configurando DocType con una cadena de consulta: [Modo Quirks y Modo estándar](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Estos modos solían admitir navegadores realmente antiguos que no se utilizan normalmente en la actualidad (Netscape Navigator 4 e Internet Explorer 5). Puede ceñirse a la declaración de tipo de documento estándar.
+
+---
+
+## 2. El 'encabezado' del documento
+
+El área 'encabezado' del documento HTML incluye información crucial sobre su página web, también conocida como [metadatos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). En nuestro caso, le decimos al servidor web al que se enviará esta página para que sea renderizada cuatro cosas:
+
+- el título de la página
+- metadatos de la página que incluyen:
+    - el 'conjunto de caracteres', que indica qué codificación de caracteres se utiliza en la página
+    - información del navegador, incluido `x-ua-compatible`, que indica que el navegador IE = edge es compatible
+    - información sobre cómo debería comportarse la ventana gráfica cuando se carga. Configurar la ventana gráfica para que tenga una escala inicial de 1 controla el nivel de zoom cuando la página se carga por primera vez.
+
+### Tarea:
+
+Agregue un bloque de 'encabezado' a su documento entre las etiquetas de apertura y cierre `<html>`.
+
+```html
+<head>
+	<title>Bienvenida a mi terrario virtual</title>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+```
+
+✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: `<meta name =" viewport "content =" width = 600 ">`? Obtenga más información sobre [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
+
+---
+
+## 3. El `cuerpo` del documento
+
+### Etiquetas HTML
+
+En HTML, agrega etiquetas a su archivo .html para crear elementos de una página web. Cada etiqueta generalmente tiene una etiqueta de apertura y cierre, como esta: `<p>hola</p>` para indicar un párrafo. Cree su interfaz `<body>` agregando un conjunto de etiquetas dentro del par de etiquetas `<html>`; su marcado ahora se ve así:
+
+### Tarea:
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Bienvenida a mi terrario virtual</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body></body>
+</html>
+```
+
+Ahora, puede comenzar a construir su página. Normalmente, usa etiquetas `<div>` para crear los elementos separados en una página. Crearemos una serie de elementos `<div>` que contendrán imágenes.
+
+### Imágenes
+
+Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento.
+
+Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente] (../ images); (hay 14 imágenes de plantas).
+
+### Tarea:
+
+Agregue esas imágenes de plantas en dos columnas entre las etiquetas `<body> </body>`:
+
+
+```html
+<div id="page">
+	<div id="left-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+		</div>
+	</div>
+	<div id="right-container" class="container">
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+		</div>
+		<div class="plant-holder">
+			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+		</div>
+	</div>
+</div>
+```
+
+> Nota: Spans vs. Divs. Los Divs se consideran elementos de 'bloque' y los Spans están 'en línea'. ¿Qué pasaría si transformaras estos divs en tramos?
+
+Con este marcado, las plantas ahora aparecen en la pantalla. Se ve bastante mal, porque aún no están diseñados con CSS, y lo haremos en la próxima lección.
+
+Cada imagen tiene una etiqueta alt que aparecerá incluso si no puede ver o representar una imagen. Este es un elemento importante a incluir para la accesibilidad. Obtenga más información sobre accesibilidad en lecciones futuras; Por ahora, recuerde que es importante permitir que los lectores de pantalla recorran su aplicación web para que los usuarios con discapacidad visual puedan utilizar su sitio web.
+
+✅ ¿Notaste que cada imagen tiene la misma etiqueta alt? ¿Es esta una buena práctica? ¿Por qué o por qué no? ¿Puedes mejorar este código?
+
+---
+
+## 4. Marcado semántico
+
+En general, es preferible usar 'semántica' al escribir HTML. Qué significa eso? Significa que utiliza etiquetas HTML de la forma en que fueron diseñadas: para representar sus datos; por lo que una etiqueta H1 siempre debe estar presente en una página
+
+Agrega la siguiente línea justo debajo de tu etiqueta de apertura `<body>`:
+
+```html
+<h1>Mi terrario</h1>
+```
+
+El uso de marcado semántico, como que los encabezados sean `<h1>` y las listas desordenadas se representen como `<ul>`, ayuda a los lectores de pantalla a navegar por una página. En general, los botones deben escribirse como `<button>` y las listas deben ser `<li>`. Si bien es _posible_ usar elementos `<span>` de estilo especial con controladores de clic para simular botones, es mejor que los usuarios con capacidades diferentes usen tecnologías para determinar en qué parte de una página reside un botón e interactuar con él, si el elemento aparece como un botón. Por esta razón, intente utilizar el marcado semántico tanto como sea posible.
+
+✅ Eche un vistazo a un lector de pantalla y [cómo interactúa con una página web](https://www.youtube.com/watch?v=OUDV1gqs9GA). ¿Puedes ver por qué tener un marcado no semántico podría confundir al usuario?
+
+## 5. El terrario
+
+La última parte de esta interfaz implica la creación de marcas que se diseñarán para crear un terrario.
+
+### Tarea:
+
+Agregue este marcado encima de la última etiqueta `</div>`:
+
+```html
+<div id="terrarium">
+	<div class="jar-top"></div>
+	<div class="jar-walls">
+		<div class="jar-glossy-long"></div>
+		<div class="jar-glossy-short"></div>
+	</div>
+	<div class="dirt"></div>
+	<div class="jar-bottom"></div>
+</div>
+```
+
+✅ Aunque agregó este marcado a la pantalla, no ve absolutamente nada renderizado. ¿Por qué?
+
+---
+
+🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después)
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+HTML es el sistema de bloques de construcción 'probado y verdadero' que ha ayudado a convertir la web en lo que es hoy. Aprenda un poco sobre su historia estudiando algunas etiquetas antiguas y nuevas. ¿Puedes averiguar por qué algunas etiquetas quedaron obsoletas y otras se agregaron? ¿Qué etiquetas podrían introducirse en el futuro?
+
+** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.md)
\ No newline at end of file
diff --git a/terrarium/1-intro-to-html/translations/assignment.es.md b/terrarium/1-intro-to-html/translations/assignment.es.md
new file mode 100644
index 00000000..93ca8bfd
--- /dev/null
+++ b/terrarium/1-intro-to-html/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Practica tu HTML: crea una maqueta de blog
+
+## Instrucciones
+
+Imagínese que está diseñando o rediseñando su sitio web personal. Cree un marcado gráfico de su sitio y luego escriba el marcado HTML que usaría para construir los diversos elementos del sitio. Puede hacer esto en papel y escanearlo, o usar el software de su elección, solo asegúrese de codificar manualmente el marcado HTML.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------------- --------------------------------- | -------------------------------------------------- ------------------------------ | -------------------------------------------------- ------------------------------- |
+| | El diseño de un blog se representa visualmente con al menos 10 elementos de marcado mostrados | Un diseño de blog se representa visualmente con alrededor de 5 elementos de marcado mostrados | El diseño de un blog se representa visualmente con un máximo de 3 elementos de marcado mostrados |
diff --git a/terrarium/2-intro-to-css/.github/post-lecture-quiz.md b/terrarium/2-intro-to-css/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..1ed542d9
--- /dev/null
+++ b/terrarium/2-intro-to-css/.github/post-lecture-quiz.md
@@ -0,0 +1,21 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+You will need to reference the following learn module to complete the quiz:
+
+[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
+
+1. [You can write CSS directly in the head section of your HTML file]
+
+- [ ] [true]
+- [ ] [false]
+
+1. [It's always necessary to include CSS in your app]
+
+- [ ] [true]
+- [ ] [false]
+- [ ] [false, but if you want it to look good you need CSS]
+
+1. [Which browser tool can be used to inspect CSS?]
+- [ ] [Elements]
+- [ ] [Styles]
+- [ ] [Network]
\ No newline at end of file
diff --git a/terrarium/2-intro-to-css/.github/pre-lecture-quiz.md b/terrarium/2-intro-to-css/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..39d1ba56
--- /dev/null
+++ b/terrarium/2-intro-to-css/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*A warm-up quiz about CSS*
+
+Complete this quiz in class
+
+1. HTML elements must have either a class or an id in order to be styled
+
+- [ ] [true]
+- [ ] [false]
+
+2. CSS stands for 'Complete Style Sheets'
+
+- [ ] [true]
+- [ ] [false]
+
+3. CSS can be used to create animations 
+
+- [ ] [true]
+- [ ] [false]
\ No newline at end of file
diff --git a/terrarium/2-intro-to-css/README.md b/terrarium/2-intro-to-css/README.md
new file mode 100644
index 00000000..00ae94fa
--- /dev/null
+++ b/terrarium/2-intro-to-css/README.md
@@ -0,0 +1,259 @@
+# Terrarium Project Part 2: Introduction to CSS
+
+![Introduction to CSS](images/webdev101-css.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+CSS, or Cascading Style Sheets, solve an important problem of web development: how to make your web site look nice. Styling your apps makes them more usable and nicer-looking; you can also use CSS to create Responsive Web Design (RWD) - allowing your apps to look good no matter what screen size they are displayed on. CSS is not only about making your app look nice; its spec includes animations and transforms that can enable sophisticated interactions for your apps. The CSS Working Group helps maintain current CSS specifications; you can follow their work at [World Wide Web Consortium's site](https://www.w3.org/Style/CSS/members).
+
+> Note, CSS is a language that evolves, like everything on the web, and not all browsers support newer parts of the specification. Always check your implementations by consulting [CanIUse.com](caniuse.com).
+
+In this lesson, we're going to add styles to our online terrarium and learn more about several CSS concepts: the cascade, inheritance, and the use of selectors, positioning, and using CSS to build layouts. In the process we will layout the terrarium and create the actual terrarium itself.
+
+### Prequisite:
+
+You should have the HTML for your terrarium built and ready to be styled.
+
+### Task:
+
+In your terrarium folder, create a new file called `style.css`. Import that file in the `<head>` section:
+
+```
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## 1. The Cascade
+
+Cascading Style Sheets incorporate the idea that the styles 'cascade' such that the application of a style is guided by its priority. Styles set by a web site author take priority over those set by a browser. Styles set 'inline' take priority over those set in an external style sheet.
+
+### Task:
+
+Add the inline style "color: red" to your `<h1>` tag:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Then, add the following code to your `style.css` file:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ Which color displays in your web app? Why? Can you find a way to override styles? When would you want to do this, or why not?
+
+---
+
+## 2. Inheritance
+
+Styles are inherited from an ancestor style to a descendent, such that nested elements inherit the styles of their parents.
+
+### Task:
+
+Set the body's font to a given font, and check to see a nested element's font:
+
+```
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Open your browser's console to the 'Elements' tab and observe the H1's font. It inherits its font from the body, as stated within the browser:
+
+![inherited font](images/1.png)
+
+✅ Can you make a nested style inherit a different property?
+
+---
+
+## 3. CSS Selectors
+
+### Tags
+
+So far, your `style.css` file has only a few tags styled, and the app looks pretty strange:
+
+```
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+This way of styling a tag gives you control over unique elements, but you need to control the styles of many plants in your terrarium. To do that, you need to leverage CSS selectors.
+
+### Ids
+
+Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`:
+
+```
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+Here, you have placed these containers with absolute positioning to the far left and right of the screen, and used percentages for their width so that they can scale for small mobile screens.
+
+✅ This code is quite repeated, thus not "DRY" (Don't Repeat Yourself); can you find a better way to style these ids, perhaps with an id and a class? You would need to change the markup and refactor the CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Classes
+
+In the example above, you styled two unique elements on the screen. If you want styles to apply to many elements on the screen, you can use CSS classes. Do this to layout the plants in the left and right containers.
+
+Notice that each plant in the HTML markup has a combination of ids and classes. The ids here are used by the JavaScript that you will add later to manipulate the terrarium plant placement. The classes, however, give all the plants a given style.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Add the following to your `style.css` file:
+
+```css
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+Notable in this snippet is the mixture of relative and absolute positioning, which we'll cover in the next section. Take a look at the way heights are handled by percentages:
+
+You set the height of the plant holder to 13%, a good number to ensure that all the plants are displayed in each vertical container without need for scrolling.
+
+You set the plant holder to move to the left to allow the plants to be more centered within their container. The images have a large amount of transparent background so as to make them more draggable, so need to be pushed to the left to fit better on the screen.
+
+Then, the plant itself is given a max-width of 150%. This allows it to scale down as the browser scales down. Try resizing your browser; the plants stay in their containers but scale down to fit.
+
+Also notable is the use of z-index, which controls the relative altitude of an element (so that the plants sit on top of the container and appear to sit inside the terrarium).
+
+✅ Why do you need both a plant holder and a plant CSS selector?
+
+## 4. CSS Positioning
+
+Mixing position properties (there are static, relative, fixed, absolute, and sticky positions) can be a little tricky, but when done properly it gives you good control over the elements on your pages.
+
+Absolute positioned elements are positioned relative to their nearest positioned ancestors, and if there are none, it is positioned according to the document body.
+
+Relative positioned elements are positioned based on the CSS's directions to adjust its placement away from its initial position.
+
+In our sample, the `plant-holder` is a relative-positioned element that is positioned within an absolute-positioned container. The resultant behavior is that the side bar containers are pinned left and right, and the plant-holder is nested, adjusting itself within the side bars, giving space for the plants to be placed in a vertical row.
+
+> The `plant` itself also has absolute positioning, necessary to making it draggable, as you will discover in the next lesson.
+
+✅ Experiment with switching the types of positioning of the side containers and the plant-holder. What happens?
+
+## 5. CSS Layouts
+
+Now you will use what you learned to build the terrarium itself, all using CSS!
+
+First, style the `.terrarium` div children as a rounded rectangle using CSS:
+
+```css
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 10%;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 58%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 4rem 4rem;
+	bottom: 1%;
+	left: 21%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Note the use of percentages here, even for the `border-radius`. If you scale your browser down, you can see how the jar corners scale as well. Also notice the widths and height percentages for the jar elements and how each element is absolutely positioned in the center, pinned to the bottom of the viewport.
+
+✅ Try changing the jar colors and opacity vs. those of the dirt. What happens? Why?
+
+---
+
+## 🚀Challenge
+
+Add a 'bubble' shine to the left bottom area of the jar to make it look more glasslike. You will be styling the `.jar-glossy-long` and `.jar-glossy-short` to look like a reflected shine. Here's how it would look:
+
+![finished terrarium](./images/terrarium-final.png)
+
+To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+CSS seems deceptively straightforward, but there are many challenges when trying to style an app perfectly for all browsers and all screen sizes. CSS-Grid and Flexbox are tools that have been developed to make the job a little more structured and more reliable. Learn about these tools by playing [Flexbox Froggy](https://flexboxfroggy.com/) and [Grid Garden](https://codepip.com/games/grid-garden/).
+
+## Assignment
+
+[CSS Refactoring](assignment.md)
\ No newline at end of file
diff --git a/terrarium/2-intro-to-css/assignment.md b/terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 00000000..ccc54661
--- /dev/null
+++ b/terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,11 @@
+# CSS Refactoring
+
+## Instructions
+
+Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
+
+## Rubric
+
+| Criteria | Exemplary                                                         | Adequate                      | Needs Improvement                    |
+| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|          | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
diff --git a/terrarium/2-intro-to-css/images/1.png b/terrarium/2-intro-to-css/images/1.png
new file mode 100644
index 00000000..ffc5d3ed
Binary files /dev/null and b/terrarium/2-intro-to-css/images/1.png differ
diff --git a/terrarium/2-intro-to-css/images/terrarium-final.png b/terrarium/2-intro-to-css/images/terrarium-final.png
new file mode 100644
index 00000000..672ced51
Binary files /dev/null and b/terrarium/2-intro-to-css/images/terrarium-final.png differ
diff --git a/terrarium/2-intro-to-css/images/webdev101-css.png b/terrarium/2-intro-to-css/images/webdev101-css.png
new file mode 100644
index 00000000..21c1ad8e
Binary files /dev/null and b/terrarium/2-intro-to-css/images/webdev101-css.png differ
diff --git a/terrarium/2-intro-to-css/translations/README.es.md b/terrarium/2-intro-to-css/translations/README.es.md
new file mode 100644
index 00000000..54233ea2
--- /dev/null
+++ b/terrarium/2-intro-to-css/translations/README.es.md
@@ -0,0 +1,258 @@
+# Terrarium Project Parte 2: Introducción a CSS
+
+![Introducción a CSS](images/webdev101-css.png)
+> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+CSS, o Cascading Style Sheets, resuelve un problema importante del desarrollo web: cómo hacer que su sitio web se vea bien. Diseñar tus aplicaciones las hace más útiles y atractivas; También puede usar CSS para crear un diseño web receptivo (RWD), lo que permite que sus aplicaciones se vean bien sin importar en qué tamaño de pantalla se muestren. CSS no se trata solo de hacer que su aplicación se vea bien; su especificación incluye animaciones y transformaciones que pueden permitir interacciones sofisticadas para sus aplicaciones. El grupo de trabajo CSS ayuda a mantener las especificaciones CSS actuales; puede seguir su trabajo en el [sitio del World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
+
+> Tenga en cuenta que CSS es un lenguaje que evoluciona, como todo en la web, y no todos los navegadores admiten partes más nuevas de la especificación. Siempre verifique sus implementaciones consultando [CanIUse.com](caniuse.com).
+
+En esta lección, agregaremos estilos a nuestro terrario en línea y aprenderemos más sobre varios conceptos de CSS: la cascada, la herencia y el uso de selectores, posicionamiento y uso de CSS para crear diseños. En el proceso, diseñaremos el terrario y crearemos el terrario en sí.
+
+### Requisito previo:
+
+Debería tener el HTML para su terrario construido y listo para darle estilo.
+
+### Tarea:
+
+En su carpeta de terrario, cree un nuevo archivo llamado `style.css`. Importe ese archivo en la sección `<head>`:
+
+```
+<link rel="stylesheet" href="./style.css" />
+```
+
+---
+
+## 1. La cascada
+
+Las hojas de estilo en cascada incorporan la idea de que los estilos 'se mueven en cascada' de manera que la aplicación de un estilo está guiada por su prioridad. Los estilos establecidos por el autor de un sitio web tienen prioridad sobre los establecidos por un navegador. Los estilos configurados 'en línea' tienen prioridad sobre los configurados en una hoja de estilo externa.
+
+### Tarea:
+
+Agrega el estilo en línea "color: red" a tu etiqueta `<h1>`:
+
+```HTML
+<h1 style="color: red">My Terrarium</h1>
+```
+
+Luego, agregue el siguiente código a su archivo `style.css`:
+
+```CSS
+h1 {
+ color: blue;
+}
+```
+
+✅ ¿Qué color se muestra en su aplicación web? ¿Por qué? ¿Puedes encontrar una forma de anular estilos? ¿Cuándo querría hacer esto o por qué no?
+
+---
+
+## 2. Herencia
+
+Los estilos se heredan de un estilo antepasado a un estilo descendiente, de modo que los elementos anidados heredan los estilos de sus padres.
+
+### Tarea:
+
+Establezca la fuente del cuerpo en una fuente determinada y verifique para ver la fuente de un elemento anidado:
+
+```
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+```
+
+Abra la consola de su navegador en la pestaña 'Elementos' y observe la fuente H1. Hereda su fuente del cuerpo, como se indica en el navegador:
+
+![fuente heredada](images/1.png)
+
+✅ ¿Puede hacer que un estilo anidado herede una propiedad diferente?
+
+---
+
+## 3. Selectores CSS
+
+### Etiquetas
+
+Hasta ahora, su archivo `style.css` tiene solo algunas etiquetas con estilo, y la aplicación se ve bastante extraña:
+
+```
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+```
+
+Esta forma de diseñar una etiqueta te da control sobre elementos únicos, pero necesitas controlar los estilos de muchas plantas en tu terrario. Para hacer eso, necesita aprovechar los selectores de CSS.
+
+### ID
+
+Agregue un poco de estilo para diseñar los contenedores izquierdo y derecho. Dado que solo hay un contenedor izquierdo y solo un contenedor derecho, se les dan identificadores en el marcado. Para diseñarlos, use `#`:
+
+```
+#left-container {
+	background-color: #eee;
+	width: 15%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+#right-container {
+	background-color: #eee;
+	width: 15%;
+	right: 0px;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+```
+
+HAquí, ha colocado estos contenedores con posicionamiento absoluto en el extremo izquierdo y derecho de la pantalla, y ha utilizado porcentajes para su ancho para que puedan escalar para pantallas móviles pequeñas.
+
+✅ Este código se repite bastante, por lo tanto, no "DRY" (Don't Repeat yourself: No se repita); ¿Puede encontrar una mejor manera de diseñar estos identificadores, tal vez con un id y una clase? Necesitaría cambiar el marcado y refactorizar el CSS:
+
+```html
+<div id="left-container" class="container"></div>
+```
+
+### Clases
+
+En el ejemplo anterior, diseñó dos elementos únicos en la pantalla. Si desea que los estilos se apliquen a muchos elementos en la pantalla, puede usar clases CSS. Haga esto para colocar las plantas en los contenedores izquierdo y derecho.
+
+Observe que cada planta en el marcado HTML tiene una combinación de identificadores y clases. Los identificadores aquí son utilizados por JavaScript que agregará más adelante para manipular la ubicación de la planta del terrario. Las clases, sin embargo, dan a todas las plantas un estilo determinado.
+
+```html
+<div class="plant-holder">
+	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+</div>
+```
+
+Agrega lo siguiente a tu archivo `style.css`:
+
+```css
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+```
+
+En este fragmento se destaca la mezcla de posicionamiento relativo y absoluto, que cubriremos en la siguiente sección. Eche un vistazo a la forma en que se manejan las alturas por porcentajes:
+
+Establece la altura del soporte de la planta en 13%, un buen número para garantizar que todas las plantas se muestren en cada contenedor vertical sin necesidad de desplazarse.
+
+Configura el soporte de la planta para que se mueva hacia la izquierda para permitir que las plantas estén más centradas dentro de su contenedor. Las imágenes tienen una gran cantidad de fondo transparente para que se puedan arrastrar más, por lo que es necesario empujarlas hacia la izquierda para que quepan mejor en la pantalla.
+
+Luego, a la planta en sí se le asigna un ancho máximo del 150%. Esto permite que se reduzca a medida que el navegador se reduce. Intente cambiar el tamaño de su navegador; las plantas permanecen en sus contenedores pero se reducen para adaptarse.
+
+También es notable el uso del índice z, que controla la altitud relativa de un elemento (de modo que las plantas se sientan en la parte superior del contenedor y parezcan sentarse dentro del terrario).
+
+✅ ¿Por qué necesita tanto un soporte para plantas como un selector CSS de plantas?
+
+## 4. Posicionamiento CSS
+
+Mezclar propiedades de posición (hay posiciones estáticas, relativas, fijas, absolutas y pegajosas) puede ser un poco complicado, pero cuando se hace correctamente, te da un buen control sobre los elementos de tus páginas.
+
+Los elementos de posición absoluta se colocan en relación con sus antepasados ​​colocados más cercanos y, si no hay ninguno, se colocan de acuerdo con el cuerpo del documento.
+
+Los elementos de posición relativa se colocan según las direcciones del CSS para ajustar su ubicación lejos de su posición inicial.
+
+En nuestra muestra, el "plant-holder" es un elemento de posición relativa que se coloca dentro de un contenedor de posición absoluta. El comportamiento resultante es que los contenedores de las barras laterales se sujetan a izquierda y derecha, y el portaplantas se encaja, ajustándose dentro de las barras laterales, dando espacio para que las plantas se coloquen en una fila vertical.
+
+> La `planta` en sí también tiene un posicionamiento absoluto, necesario para que sea arrastrable, como descubrirás en la siguiente lección.
+
+✅ Experimente cambiando los tipos de colocación de los contenedores laterales y el portaplantas. ¿Lo que pasa?
+
+## 5. Diseños CSS
+
+Ahora usará lo que aprendió para construir el terrario en sí, ¡todo usando CSS!
+
+Primero, diseñe los elementos secundarios `.terrarium` div como un rectángulo redondeado usando CSS:
+
+```css
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 10%;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 58%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 4rem 4rem;
+	bottom: 1%;
+	left: 21%;
+	opacity: 0.7;
+	z-index: -1;
+}
+```
+
+Tenga en cuenta el uso de porcentajes aquí, incluso para el `border-radius`. Si reduce la escala de su navegador, también puede ver cómo se escalan las esquinas del frasco. Observe también los porcentajes de ancho y alto de los elementos del tarro y cómo cada elemento está absolutamente posicionado en el centro, fijado a la parte inferior de la ventana gráfica.
+
+✅ Intente cambiar los colores y la opacidad del frasco frente a los de la suciedad. ¿Lo que pasa? ¿Por qué?
+
+---
+
+🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el` .jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería:
+
+! [terrario terminado](./images/terrarium-final.png)
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trata de diseñar una aplicación perfectamente para todos los navegadores y todos los tamaños de pantalla. CSS-Grid y Flexbox son herramientas que se han desarrollado para hacer el trabajo un poco más estructurado y más confiable. Aprende sobre estas herramientas jugando a [Flexbox Froggy](https://flexboxfroggy.com/) y [Grid Garden](https://codepip.com/games/grid-garden/).
+
+**Asignación**: [Refactorización CSS] (asignación.md)
+
+Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](. Github / post-lecture-quiz.md):
+
+[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
+
diff --git a/terrarium/2-intro-to-css/translations/assignment.es.md b/terrarium/2-intro-to-css/translations/assignment.es.md
new file mode 100644
index 00000000..c91b8f23
--- /dev/null
+++ b/terrarium/2-intro-to-css/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Refactorización CSS
+
+## Instrucciones
+
+Cambie el estilo del terrario usando Flexbox o CSS Grid, y tome capturas de pantalla para mostrar que lo ha probado en varios navegadores. Es posible que deba cambiar el marcado, así que cree una nueva versión de la aplicación con el arte en su lugar para su refactorización. No se preocupe por hacer que los elementos se puedan arrastrar; solo refactorice el HTML y CSS por ahora.
+
+## Rúbrica
+
+| Criterios | Ejemplar                                                         | Adecuada                      | Necesita mejorar                    |
+| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
+|          | Presenta un terrario completamente rediseñado usando Flexbox o CSS Grid | Modifique algunos de los elementos | No cambiar el estilo del terrario en absoluto |
diff --git a/terrarium/3-intro-to-DOM-and-closures/.github/post-lecture-quiz.md b/terrarium/3-intro-to-DOM-and-closures/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..932f55e2
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. [The DOM is a model to represent a document on the web]
+
+- [ ] [true]
+- [ ] [false]
+
+2. [Use JavaScript closures to perform the following:]
+
+- [ ] [write functions within functions]
+- [ ] [enclose the DOM]
+- [ ] [close script blocks]
+
+3. [Fill in the blank: Closures are useful when one or more functions need to access an outer function's ______]
+
+- [ ] [arrays]
+- [ ] [scope]
+- [ ] [functions]
\ No newline at end of file
diff --git a/terrarium/3-intro-to-DOM-and-closures/.github/pre-lecture-quiz.md b/terrarium/3-intro-to-DOM-and-closures/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..16fef69a
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/.github/pre-lecture-quiz.md
@@ -0,0 +1,18 @@
+*A warm-up quiz about the DOM*
+
+Complete this quiz in class
+
+1. The DOM stands for 'Document Object Management'
+
+- [ ] [true]
+- [ ] [false]
+
+2. The DOM can be thought of as a tree
+
+- [ ] [true]
+- [ ] [false]
+
+3. Using the Web API, you can manipulate the DOM
+
+- [ ] [true]
+- [ ] [false]
\ No newline at end of file
diff --git a/terrarium/3-intro-to-DOM-and-closures/LICENSE b/terrarium/3-intro-to-DOM-and-closures/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/terrarium/3-intro-to-DOM-and-closures/README.md b/terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 00000000..70cf4e31
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,211 @@
+# Terrarium Project Part 3: DOM Manipulation and a Closure
+
+![DOM and a closure](images/webdev101-js.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+Manipulating the DOM, or the "Document Object Model", is a key aspect of web development. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." The challenges around DOM manipulation on the web have often been the impetus behind using JavaScript frameworks instead of vanilla JavaScript to manage the DOM, but we will manage on our own!
+
+In addition, this lesson will introduce the idea of a [JavaScript closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), which you can think of as a function enclosed by another function so that the inner function has access to the outer function's scope.
+
+We will use a closure to manipulate the DOM.
+
+> Think of the DOM as a tree, representing all the ways that a web page document can be manipulated. Various APIs (Application Program Interfaces) have been written so that programmers, using their programming language of choice, can access the DOM and edit, change, rearrange, and otherwise manage it.
+
+![DOM tree representation](./images/dom-tree.png)
+
+> A representation of the DOM and the HTML markup that references it. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+In this lesson, we will complete our interactive terrarium project by creating the JavaScript that will allow a user to manipulate the plants on the page.
+
+### Prequisite:
+
+You should have the HTML and CSS for your terrarium built. By the end of this lesson you will be able to move the plants into and out of the terrarium by dragging them.
+
+### Task:
+
+In your terrarium folder, create a new file called `script.js`. Import that file in the `<head>` section:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Note: use `defer` when importing an external JavaScript file into the html file so as to allow the JavaScript to execute only after the HTML file has been fully loaded. You could also use the `async` attribute, which allows the script to execute while the HTML file is parsing, but in our case, it's important to have the HTML elements fully available for dragging before we allow the drag script to be executed.
+---
+
+## 1. The DOM elements
+
+The first thing you need to do is to create references to the elements that you want to manipulate in the DOM. In our case, they are the 14 plants currently waiting in the side bars.
+
+### Task:
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+What's going on here? You are referencing the document and looking through its DOM to find an element with a particular Id. Remember in the first lesson on HTML that you gave individual Ids to each plant image (`id="plant1"`)? Now you will make use of that effort. After identifying each element, you pass that item to a function called `dragElement` that you'll build in a minute. Thus, the element in the HTML is now drag-enabled, or will be shortly.
+
+✅ Why do we reference elements by Id? Why not by their CSS class? You might refer to the previous lesson on CSS to answer this question.
+
+---
+
+## 2. The Closure
+
+Now you are ready to create the dragElement closure, which is an outer function that encloses an inner function or functions (in our case, we will have three). 
+
+Closures are useful when one or more functions need to access an outer function's scope. Here's an example:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+In this example, the displayCandy function surrounds a function that pushes a new candy type into an array that already exists in the function. If you were to run this code, the `candy` array would be undefined, as it is a local variable (local to the closure). 
+
+✅ How can you make the `candy` array accessible? Try moving it outside the closure. This way, the array becomes global, rather than remaining only available to the closure's local scope.
+
+### Task:
+
+Under the element declarations in `script.js`, create a function:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` get its `terrariumElement` object from the declarations at the top of the script. Then, you set some local positions at `0` for the object passed into the function. These are the local variables that will be manipulated for each element as you add drag and drop functionality within the closure to each element. The terrarium will be populated by these dragged elements, so the application needs to keep track of where they are placed.
+
+In addition, the terrariumElement that is passed to this function is assigned a `pointerdown` event, which is part of the [web APIs](https://developer.mozilla.org/en-US/docs/Web/API) designed to help with DOM management. `onpointerdown` fires when a button is pushed, or in our case, a draggable element is touched. This event handler works on both [web and mobile browsers](https://caniuse.com/?search=onpointerdown), with a few exceptions.
+
+✅ The [event handler `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) has much more support cross-browser; why wouldn't you use it here? Think about the exact type of screen interaction you're trying to create here.
+
+---
+
+## 3. The Pointerdrag function
+
+The terrariumElement is ready to be dragged around; when the `onpointerdown` event is fired, the function pointerDrag is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Task: 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Several things happen. First, you prevent the default events that normally happen on pointerdown from occurring by using `e.preventDefault();`. This way you have more control over the interface's behavior.
+
+> Come back to this line when you've built the script file completely and try it without `e.preventDefault()` - what happens?
+
+Second, open `index.html` in a browser window, and inspect the interface. When you click a plant, you can see how the 'e' event is captured. Dig into the event to see how much information is gathered by one pointer down event!  
+
+Next, note how the local variables `pos3` and `pos4` are set to e.clientX. You can find the `e` values in the inspection pane. These values capture the x and y coordinates of the plant at the moment you click on it or touch it. You will need fine-grained control over the behavior of the plants as you click and drag them, so you keep track of their coordinates.
+
+✅ Is it becoming more clear why this entire app is built with one big closure? If it wasn't, how would you maintain scope for each of the 14 draggable plants?
+
+Complete the initial function by adding two more pointer event manipulations under `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Now you are indicating that you want the plant to be dragged along with the pointer as you move it, and for the dragging gesture to stop when you deselect the plant. `onpointermove` and `onpointerup` are all parts of the same API as `onpointerdown`. The interface will throw errors now as you have not yet defined the `elementDrag` and the `stopElementDrag` functions, so build those out next.
+
+## 4. The elementDrag and stopElementDrag functions
+
+You will complete your closure by adding two more internal functions that will handle what happens when you drag a plant and stop dragging it. The behavior you want is that you can drag any plant at any time and place it anywhere on the screen. This interface is quite un-opinionated (there is no drop zone for example) to allow you to design your terrarium exactly as you like it by adding, removing, and repositioning plants.
+
+### Task: 
+
+Add the `elementDrag` function right after the closing curly bracket of `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+In this function, you do a lot of editing of the initial positions 1-4 that you set as local variables in the outer function. What's going on here?
+
+As you drag, you reassign `pos1` by making it equal to `pos3` (which you set earlier as `e.clientX`)  minus the current `e.clientX` value. You do a similar operation to `pos2`. Then, you reset `pos3` and `pos4` to the new X and Y coordinates of the element. You can watch these changes in the console as you drag. Then, you manipulate the plant's css style to set its new position based on the new positions of `pos1` and `pos2`, calculating the plant's top and left X and Y coordinates based on comparing its offset with these new positions.
+
+> `offsetTop` and `offsetLeft` are CSS properties that set an element's position based on that of its parent; its parent can be any element that is not positioned as `static`. 
+
+All this recalculation of positioning allows you to fine-tune the behavior of the terrarium and its plants.
+
+### Task: 
+
+The final task to complete the interface is to add the `closeElementDrag` function after the closing curly bracket of `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+This small function resets the `onpointerup` and `onpointermove` events so that you can either restart your plant's progress by starting to drag it again, or start dragging a new plant.
+
+✅ What happens if you don't set these events to null?
+
+Now you have completed your project!
+
+🥇Congratulations! You have finished your beautiful terrarium. ![finished terrarium](./images/terrarium-final.png)
+
+---
+
+## 🚀Challenge
+
+Add new event handler to your closure to do something more to the plants; for example, double-click a plant to bring it to the front. Get creative!
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+While dragging elements around the screen seems trivial, there are many ways to do this and many pitfalls, depending on the effect you seek. In fact, there is an entire [drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) that you can try. We didn't use it in this module because the effect we wanted was somewhat different, but try this API on your own project and see what you can achieve.
+
+Find more information on pointer events on the [W3C docs](https://www.w3.org/TR/pointerevents1/) and on [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).
+
+Always check browser capabilities using [CanIUse.com](https://caniuse.com/).
+
+## Assignment
+
+[Work a bit more with the DOM](assignment.md)
+
diff --git a/terrarium/3-intro-to-DOM-and-closures/assignment.md b/terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 00000000..03865021
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,11 @@
+# Work a bit more with the DOM
+
+## Instructions
+
+Research the DOM a little more by 'adoping' a DOM element. Visit the MSDN's [list of DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used.
+
+## Rubric
+
+| Criteria | Exemplary                                     | Adequate                                         | Needs Improvement       |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Paragraph write-up is presented, with example | Paragraph write-up is presented, without example | No writeup is presented |
diff --git a/terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png b/terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png
new file mode 100644
index 00000000..cad066b4
Binary files /dev/null and b/terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png differ
diff --git a/terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png b/terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png
new file mode 100644
index 00000000..5d930e1a
Binary files /dev/null and b/terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png differ
diff --git a/terrarium/3-intro-to-DOM-and-closures/images/webdev101-js.png b/terrarium/3-intro-to-DOM-and-closures/images/webdev101-js.png
new file mode 100644
index 00000000..f0181bed
Binary files /dev/null and b/terrarium/3-intro-to-DOM-and-closures/images/webdev101-js.png differ
diff --git a/terrarium/3-intro-to-DOM-and-closures/translations/README.es.md b/terrarium/3-intro-to-DOM-and-closures/translations/README.es.md
new file mode 100644
index 00000000..56798506
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/translations/README.es.md
@@ -0,0 +1,207 @@
+# Terrarium Project Part 3: DOM Manipulación y cierre
+
+! [DOM y un cierre](images/webdev101-js.png)
+> Boceto de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de marcos de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta!
+
+Además, esta lección presentará la idea de un [cierre de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), que puede considerar como una función encerrada por otra función para que la función interna tenga acceso al alcance de la función externa.
+
+Usaremos un cierre para manipular el DOM.
+
+> Piense en el DOM como un árbol, que representa todas las formas en que se puede manipular un documento de página web. Se han escrito varias API (interfaces de programas de aplicación) para que los programadores, utilizando el lenguaje de programación de su elección, puedan acceder al DOM y editarlo, cambiarlo, reorganizarlo y administrarlo de otro modo.
+
+
+![DOM tree representation](./images/dom-tree.png)
+
+> Una representación del DOM y el marcado HTML que lo hace referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+En esta lección, completaremos nuestro proyecto de terrario interactivo creando el JavaScript que permitirá al usuario manipular las plantas en la página.
+
+### Requisito previo:
+
+Debería tener el HTML y CSS para su terrario construido. Al final de esta lección, podrá mover las plantas dentro y fuera del terrario arrastrándolas.
+
+### Tarea:
+
+En su carpeta de terrario, cree un nuevo archivo llamado `script.js`. Importe ese archivo en la sección `<head>`:
+
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Nota: use `defer` cuando importe un archivo JavaScript externo en el archivo html para permitir que JavaScript se ejecute solo después de que el archivo HTML se haya cargado por completo. También podría usar el atributo `async`, que permite que el script se ejecute mientras se analiza el archivo HTML, pero en nuestro caso, es importante tener los elementos HTML completamente disponibles para arrastrar antes de permitir que se ejecute el script de arrastre.
+---
+
+## 1. Los elementos DOM
+
+Lo primero que debe hacer es crear referencias a los elementos que desea manipular en el DOM. En nuestro caso, son las 14 plantas que esperan actualmente en las barras laterales.
+
+
+### Tarea:
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+¿Que está pasando aqui? Está haciendo referencia al documento y mirando a través de su DOM para encontrar un elemento con un Id particular. ¿Recuerda en la primera lección sobre HTML que le dio ID individuales a cada imagen de planta (`id = "plant1"`)? Ahora harás uso de ese esfuerzo. Después de identificar cada elemento, pasa ese elemento a una función llamada `dragElement` que creará en un minuto. Por lo tanto, el elemento en el HTML ahora está habilitado para arrastrar, o lo estará en breve.
+
+✅ ¿Por qué hacemos referencia a elementos por Id? ¿Por qué no por su clase de CSS? Puede consultar la lección anterior sobre CSS para responder a esta pregunta.
+
+---
+
+## 2. El cierre
+
+Ahora está listo para crear el cierre dragElement, que es una función externa que encierra una función o funciones internas (en nuestro caso, tendremos tres).
+
+Los cierres son útiles cuando una o más funciones necesitan acceder al alcance de una función externa. He aquí un ejemplo:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+En este ejemplo, la función displayCandy rodea una función que inserta un nuevo tipo de caramelo en una matriz que ya existe en la función. Si tuviera que ejecutar este código, la matriz `candy` no estaría definida, ya que es una variable local (local al cierre).
+
+✅ ¿Cómo se puede hacer accesible la matriz de `candy`? Intente moverlo fuera del cierre. De esta manera, la matriz se vuelve global, en lugar de permanecer solo disponible para el alcance local del cierre.
+
+### Tarea:
+
+Debajo de las declaraciones de elementos en `script.js`, crea una función:
+
+
+```javascript
+function dragElement(terrariumElement) {
+	//establecer 4 posiciones para posicionar en la pantalla
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` obtiene su objeto` terrariumElement` de las declaraciones en la parte superior del script. Luego, establece algunas posiciones locales en "0" para el objeto pasado a la función. Estas son las variables locales que se manipularán para cada elemento a medida que agrega la funcionalidad de arrastrar y soltar dentro del cierre de cada elemento. El terrario estará poblado por estos elementos arrastrados, por lo que la aplicación debe realizar un seguimiento de dónde se colocan.
+
+Además, al terrariumElement que se pasa a esta función se le asigna un evento `pointerdown`, que forma parte de las [API web](https://developer.mozilla.org/en-US/docs/Web/API) diseñadas para ayudar con la gestión del DOM. `Onpointerdown` se dispara cuando se presiona un botón, o en nuestro caso, se toca un elemento que se puede arrastrar. Este controlador de eventos funciona tanto en [navegadores web como móviles](https://caniuse.com/?search=onpointerdown), con algunas excepciones.
+
+✅ El [controlador de eventos `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) tiene mucho más soporte entre navegadores; ¿Por qué no lo usarías aquí? Piense en el tipo exacto de interacción de pantalla que está intentando crear aquí.
+
+---
+
+## 3. La función Pointerdrag
+
+El terrariumElement está listo para ser arrastrado; cuando se dispara el evento `onpointerdown`, se invoca la función `pointerDrag`. Agrega esa función justo debajo de esta línea: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Tarea: 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Suceden varias cosas. Primero, evita que ocurran los eventos predeterminados que normalmente ocurren en el puntero hacia abajo usando `e.preventDefault ();`. De esta manera, tiene más control sobre el comportamiento de la interfaz.
+
+> Regrese a esta línea cuando haya construido el archivo de script por completo y pruébelo sin `e.preventDefault ()`- ¿qué sucede?
+
+En segundo lugar, abra `index.html` en una ventana del navegador e inspeccione la interfaz. Cuando hace clic en una planta, puede ver cómo se captura el evento 'e'. ¡Profundice en el evento para ver cuánta información recopila un evento de puntero hacia abajo!
+
+A continuación, observe cómo las variables locales `pos3` y` pos4` se establecen en e.clientX. Puede encontrar los valores de `e` en el panel de inspección. Estos valores capturan las coordenadas xey de la planta en el momento en que hace clic en ella o la toca. Necesitará un control detallado sobre el comportamiento de las plantas al hacer clic en ellas y arrastrarlas, de modo que pueda realizar un seguimiento de sus coordenadas.
+
+✅ ¿Está cada vez más claro por qué toda esta aplicación está construida con un gran cierre? Si no fuera así, ¿cómo mantendría el alcance para cada una de las 14 plantas arrastrables?
+
+Complete la función inicial agregando dos manipulaciones de eventos de puntero más en `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Ahora está indicando que desea que la planta se arrastre junto con el puntero mientras la mueve, y que el gesto de arrastre se detenga cuando anule la selección de la planta. `Onpointermove` y `onpointerup` son partes de la misma API que `onpointerdown`. La interfaz arrojará errores ahora ya que aún no ha definido las funciones `elementDrag` y `stopElementDrag`, así que compárelas a continuación.
+
+## 4. Las funciones elementDrag y stopElementDrag
+
+Completarás tu cierre agregando dos funciones internas más que se encargarán de lo que sucede cuando arrastras una planta y dejas de arrastrarla. El comportamiento que desea es que pueda arrastrar cualquier planta en cualquier momento y colocarla en cualquier lugar de la pantalla. Esta interfaz no tiene opiniones (no hay zona de caída, por ejemplo) para permitirle diseñar su terrario exactamente como le gusta agregando, quitando y reposicionando plantas.
+
+### Tarea:
+
+Agrega la función `elementDrag` justo después del corchete de cierre de `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+En esta función, usted edita mucho las posiciones iniciales 1-4 que establece como variables locales en la función externa. ¿Que está pasando aqui?
+
+A medida que arrastra, reasigna `pos1` haciéndolo igual a `pos3` (que configuró anteriormente como `e.clientX`) menos el valor actual de `e.clientX`. Realiza una operación similar a `pos2`. Luego, restablece `pos3` y `pos4` a las nuevas coordenadas X e Y del elemento. Puede ver estos cambios en la consola mientras arrastra. Luego, manipula el estilo CSS de la planta para establecer su nueva posición en función de las nuevas posiciones de `pos1` y` pos2`, calculando las coordenadas X e Y superior e izquierda de la planta en función de la comparación de su desplazamiento con estas nuevas posiciones.
+
+> `OffsetTop` y `offsetLeft` son propiedades CSS que establecen la posición de un elemento basándose en la de su padre; su padre puede ser cualquier elemento que no esté posicionado como "estático".
+
+Todo este recálculo de posicionamiento le permite afinar el comportamiento del terrario y sus plantas.
+
+### Tarea:
+
+La tarea final para completar la interfaz es agregar la función `closeElementDrag` después del corchete de cierre de `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` para que pueda reiniciar el progreso de su planta comenzando a arrastrarla nuevamente, o comenzar a arrastrar una nueva planta.
+
+✅ ¿Qué sucede si no configura estos eventos como nulos?
+
+¡Ahora has completado tu proyecto!
+
+---
+
+🥇¡Felicitaciones! Has terminado tu hermoso terrario. ![terrario terminado](./images/terrarium-final.png)
+
+🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo!
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Si bien arrastrar elementos por la pantalla parece trivial, hay muchas formas de hacerlo y muchas trampas, según el efecto que busque. De hecho, hay una [API de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) completa que puedes probar. No lo usamos en este módulo porque el efecto que queríamos era algo diferente, pero pruebe esta API en su propio proyecto y vea lo que puede lograr.
+
+** Tarea: [Trabajar un poco más con el DOM](assignment.md)
+
diff --git a/terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md b/terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md
new file mode 100644
index 00000000..8ba7506b
--- /dev/null
+++ b/terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md
@@ -0,0 +1,11 @@
+# Trabaja un poco más con DOM
+
+## Instrucciones
+
+Investigue el DOM un poco más 'adoptando' un elemento DOM. Visite la [lista de interfaces DOM de MSDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) y elija una. Encuéntrelo en un sitio web en la web y escriba una explicación de cómo se usa.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+| | Se presenta la redacción del párrafo, con ejemplo | Se presenta la redacción del párrafo, sin ejemplo | No se presenta ninguna reseña |
diff --git a/terrarium/LICENSE b/terrarium/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/terrarium/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/terrarium/README.md b/terrarium/README.md
new file mode 100644
index 00000000..45bbfe22
--- /dev/null
+++ b/terrarium/README.md
@@ -0,0 +1,34 @@
+# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
+
+A small drag and drop code-meditation. With a little HTML, JS and CSS, you can build a web interface, style it, and add an interaction.
+
+![my terrarium](images/screenshot_gray.png)
+
+# Lessons
+
+1. [Intro to HTML](./1-intro-to-html/README.md)
+2. [Intro to CSS](./2-intro-to-css/README.md)
+3. [Intro to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
+
+## Credits
+
+Written with ♥️  by [Jen Looper](https://www.twitter.com/jenlooper)
+
+The terrarium created via CSS was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
+
+The artwork was hand drawn by [Jen Looper](http://jenlooper.com) using Procreate.
+
+## Deploy your Terrarium
+
+You can deploy, or publish your terrarium to the web using Azure Static Web Apps. 
+
+1. Fork this repo
+
+2. Press this button
+
+[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=terrarium-github-webdevforbeginners#create/Microsoft.StaticApp)
+
+3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
+
+
+
diff --git a/terrarium/images/screenshot_gray.png b/terrarium/images/screenshot_gray.png
new file mode 100644
index 00000000..5d930e1a
Binary files /dev/null and b/terrarium/images/screenshot_gray.png differ
diff --git a/terrarium/solution/images/plant1.png b/terrarium/solution/images/plant1.png
new file mode 100644
index 00000000..9baee27b
Binary files /dev/null and b/terrarium/solution/images/plant1.png differ
diff --git a/terrarium/solution/images/plant10.png b/terrarium/solution/images/plant10.png
new file mode 100644
index 00000000..4b5136d1
Binary files /dev/null and b/terrarium/solution/images/plant10.png differ
diff --git a/terrarium/solution/images/plant11.png b/terrarium/solution/images/plant11.png
new file mode 100644
index 00000000..3530fe56
Binary files /dev/null and b/terrarium/solution/images/plant11.png differ
diff --git a/terrarium/solution/images/plant12.png b/terrarium/solution/images/plant12.png
new file mode 100644
index 00000000..b7f6dfd7
Binary files /dev/null and b/terrarium/solution/images/plant12.png differ
diff --git a/terrarium/solution/images/plant13.png b/terrarium/solution/images/plant13.png
new file mode 100644
index 00000000..18938b77
Binary files /dev/null and b/terrarium/solution/images/plant13.png differ
diff --git a/terrarium/solution/images/plant14.png b/terrarium/solution/images/plant14.png
new file mode 100644
index 00000000..87ccb623
Binary files /dev/null and b/terrarium/solution/images/plant14.png differ
diff --git a/terrarium/solution/images/plant2.png b/terrarium/solution/images/plant2.png
new file mode 100644
index 00000000..b90853ff
Binary files /dev/null and b/terrarium/solution/images/plant2.png differ
diff --git a/terrarium/solution/images/plant3.png b/terrarium/solution/images/plant3.png
new file mode 100644
index 00000000..17e10d1f
Binary files /dev/null and b/terrarium/solution/images/plant3.png differ
diff --git a/terrarium/solution/images/plant4.png b/terrarium/solution/images/plant4.png
new file mode 100644
index 00000000..4bbafadc
Binary files /dev/null and b/terrarium/solution/images/plant4.png differ
diff --git a/terrarium/solution/images/plant5.png b/terrarium/solution/images/plant5.png
new file mode 100644
index 00000000..d303d401
Binary files /dev/null and b/terrarium/solution/images/plant5.png differ
diff --git a/terrarium/solution/images/plant6.png b/terrarium/solution/images/plant6.png
new file mode 100644
index 00000000..823eeed0
Binary files /dev/null and b/terrarium/solution/images/plant6.png differ
diff --git a/terrarium/solution/images/plant7.png b/terrarium/solution/images/plant7.png
new file mode 100644
index 00000000..fceb7f24
Binary files /dev/null and b/terrarium/solution/images/plant7.png differ
diff --git a/terrarium/solution/images/plant8.png b/terrarium/solution/images/plant8.png
new file mode 100644
index 00000000..40b4f156
Binary files /dev/null and b/terrarium/solution/images/plant8.png differ
diff --git a/terrarium/solution/images/plant9.png b/terrarium/solution/images/plant9.png
new file mode 100644
index 00000000..17a34357
Binary files /dev/null and b/terrarium/solution/images/plant9.png differ
diff --git a/terrarium/solution/index.html b/terrarium/solution/index.html
new file mode 100644
index 00000000..1c44732b
--- /dev/null
+++ b/terrarium/solution/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Welcome to my Virtual Terrarium</title>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<!-- import the webpage's stylesheet -->
+		<link rel="stylesheet" href="./style.css" />
+		<!-- import the webpage's JavaScript file -->
+		<script src="./script.js" defer></script>
+	</head>
+
+	<body>
+		<div id="page">
+			<h1>My Terrarium</h1>
+
+			<div id="left-container" class="container">
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
+				</div>
+			</div>
+			<div id="right-container" class="container">
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
+				</div>
+				<div class="plant-holder">
+					<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
+				</div>
+			</div>
+
+			<div id="terrarium">
+				<div class="jar-top"></div>
+				<div class="jar-walls">
+					<div class="jar-glossy-long"></div>
+					<div class="jar-glossy-short"></div>
+				</div>
+				<div class="dirt"></div>
+				<div class="jar-bottom"></div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/terrarium/solution/script.js b/terrarium/solution/script.js
new file mode 100644
index 00000000..cc3950b0
--- /dev/null
+++ b/terrarium/solution/script.js
@@ -0,0 +1,64 @@
+/*The solution to draggable elements was inspired by w3schools solution on creating a [Draggable HTML Element](https://www.w3schools.com/howto/howto_js_draggable.asp).*/
+
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+
+/*"A closure is the combination of a function bundled together (enclosed) 
+with references to its surrounding state (the lexical environment). 
+In other words, a closure gives you access to an outer function’s scope 
+from an inner function." Create a closure so that you can track the dragged element*/
+
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+
+	function pointerDrag(e) {
+		e.preventDefault();
+		console.log(e);
+		// get the initial mouse cursor position for pos3 and pos4
+		pos3 = e.clientX;
+		pos4 = e.clientY;
+		// when the mouse moves, start the drag
+		document.onpointermove = elementDrag;
+		// when the mouse is lifted, stop the drag
+		document.onpointerup = stopElementDrag;
+	}
+
+	function elementDrag(e) {
+		// calculate the new cursor position
+		// pos1 = where the Xmouse WAS - where it IS
+		pos1 = pos3 - e.clientX;
+		// pos2 = where the Ymouse WAS - where it IS
+		pos2 = pos4 - e.clientY;
+		//reset pos3 to current location of Xmouse
+		pos3 = e.clientX;
+		//reset pos4 to current location of Ymouse
+		pos4 = e.clientY;
+		console.log(pos1, pos2, pos3, pos4);
+		// set the element's new position:
+		terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+		terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+	}
+
+	function stopElementDrag() {
+		// stop calculating when mouse is released
+		document.onpointerup = null;
+		document.onpointermove = null;
+	}
+}
diff --git a/terrarium/solution/style.css b/terrarium/solution/style.css
new file mode 100644
index 00000000..26720f45
--- /dev/null
+++ b/terrarium/solution/style.css
@@ -0,0 +1,105 @@
+body {
+	font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+	color: #3a241d;
+	text-align: center;
+}
+
+#left-container {
+	left: 0px;
+}
+
+#right-container {
+	right: 0px;
+}
+
+.container {
+	background-color: #eee;
+	width: 15%;
+	top: 0px;
+	position: absolute;
+	height: 100%;
+	padding: 10px;
+}
+
+.plant-holder {
+	position: relative;
+	height: 13%;
+	left: -10px;
+}
+
+.plant {
+	position: absolute;
+	max-width: 150%;
+	max-height: 150%;
+	z-index: 2;
+}
+
+/*https://codepen.io/Rotarepmi/pen/rjpNZY*/
+
+.jar-walls {
+	height: 80%;
+	width: 60%;
+	background: #d1e1df;
+	border-radius: 10%;
+	position: absolute;
+	bottom: 0.5%;
+	left: 20%;
+	opacity: 0.5;
+	z-index: 1;
+}
+
+.jar-top {
+	width: 50%;
+	height: 5%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 80.5%;
+	left: 25%;
+	opacity: 0.7;
+	z-index: 1;
+}
+
+.jar-bottom {
+	width: 50%;
+	height: 1%;
+	background: #d1e1df;
+	position: absolute;
+	bottom: 0%;
+	left: 25%;
+	opacity: 0.7;
+}
+
+.dirt {
+	width: 58%;
+	height: 5%;
+	background: #3a241d;
+	position: absolute;
+	border-radius: 0 0 4rem 4rem;
+	bottom: 1%;
+	left: 21%;
+	opacity: 0.7;
+	z-index: -1;
+}
+
+.jar-glossy-long {
+	width: 3%;
+	height: 20%;
+	border-radius: 2rem;
+	background: #ddfbff;
+	position: absolute;
+	bottom: 20%;
+	left: 5%;
+}
+
+.jar-glossy-short {
+	width: 3%;
+	height: 5%;
+	border-radius: 2rem;
+	background: #ddfbff;
+	position: absolute;
+	bottom: 45%;
+	left: 5%;
+}
diff --git a/terrarium/translations/README.es.md b/terrarium/translations/README.es.md
new file mode 100644
index 00000000..c72c3f80
--- /dev/null
+++ b/terrarium/translations/README.es.md
@@ -0,0 +1,27 @@
+# Mi terrario: un proyecto para aprender sobre la manipulación de HTML, CSS y DOM usando JavaScript 🌵🌱
+
+Una pequeña meditación de código de arrastrar y soltar. Con un poco de HTML, JS y CSS, puede crear una interfaz web, darle estilo y agregar una interacción.
+
+![mi terrario](screenshot_gray.png)
+
+# Lessons
+
+1. [Introducción a CSS](./intro-to-css/README.md)
+2. [Introducción a HTML](./intro-to-html/README.md)
+3. [Introducción a DOM y JS Closures](intro-to-DOM-and-js-closures/README.md)
+
+## Créditos
+
+Escrito con ♥ ️ por [Jen Looper](https://www.twitter.com/jenlooper)
+
+El terrario creado a través de CSS se inspiró en el frasco de vidrio [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) de Jakub Mandra.
+
+La obra de arte fue dibujada a mano por [Jen Looper](http://jenlooper.com) usando Procreate.
+
+La solución para elementos arrastrables se inspiró en la solución de w3schools para crear un [Elemento HTML arrastrable](https://www.w3schools.com/howto/howto_js_draggable.asp).
+
+Encuentre más información sobre eventos de punteros en los [documentos del W3C](https://www.w3.org/TR/pointerevents1/) y en los [documentos web de MDN](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).
+
+Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/).
+
+Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=webdev101-github-jelooper).
diff --git a/typing-game/.github/post-lecture-quiz.md b/typing-game/.github/post-lecture-quiz.md
new file mode 100644
index 00000000..ae8c7447
--- /dev/null
+++ b/typing-game/.github/post-lecture-quiz.md
@@ -0,0 +1,18 @@
+*Complete this quiz by checking one answer per question.*
+
+1. Just about anything a user does on a page raises an event
+
+- [ ] true
+- [ ] false
+
+2. Common events include
+   
+- [ ] click_event
+- [ ] select_event
+- [ ] input_event
+- [ ] all of these
+
+3. You can use anonymous functions to create event handlers
+
+- [ ] true
+- [ ] false
\ No newline at end of file
diff --git a/typing-game/.github/pre-lecture-quiz.md b/typing-game/.github/pre-lecture-quiz.md
new file mode 100644
index 00000000..c8715a24
--- /dev/null
+++ b/typing-game/.github/pre-lecture-quiz.md
@@ -0,0 +1,20 @@
+*Complete this quiz in class.*
+
+1. Event-driven programming is when a user 
+
+- [ ] clicks on a button
+- [ ] changes a value
+- [ ] interacts with the page
+- [ ] any of the above
+
+2. In procedural programming, functions are called
+
+- [ ] any time
+- [ ] in a specific order
+- [ ] left to right
+
+3. The universal method exposed in the DOM for registering event handlers is called
+   
+- [ ] addEventListener
+- [ ] addListener
+- [ ] addEvent
\ No newline at end of file
diff --git a/typing-game/LICENSE b/typing-game/LICENSE
new file mode 100644
index 00000000..034c6b2d
--- /dev/null
+++ b/typing-game/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/typing-game/README.md b/typing-game/README.md
new file mode 100644
index 00000000..f7abad56
--- /dev/null
+++ b/typing-game/README.md
@@ -0,0 +1,30 @@
+# Event-Driven Programming - Build a Typing Game
+
+## Introduction
+
+Typing is one of the most underrated skills of the developer. The ability to quickly transfer thoughts from your head to your editor allows creativity to flow freely. One of the best ways to learn is to play a game!
+
+> So, let's build a typing game!
+
+You're going to use the JavaScript, HTML and CSS skills you have built up so far to create a typing game. The game will present the player with a random quote (we're using [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) quotes) and time how long the player takes to type it out accurately. You're going to use the JavaScript, HTML and CSS skills you have built up so far to create a typing game.
+
+![demo](images/demo.gif)
+
+## Prerequisites
+
+This lesson assumes you're familiar with the following concepts:
+
+- Creating text input and button controls
+- CSS and setting styles using classes
+- JavaScript basics
+  - Creating an array
+  - Creating a random number
+  - Getting the current time
+
+## Lesson
+
+[Creating a typing game by using event driven programming](./project/README.md)
+
+## Credits
+
+Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/typing-game/assignment.md b/typing-game/assignment.md
new file mode 100644
index 00000000..cd444a51
--- /dev/null
+++ b/typing-game/assignment.md
@@ -0,0 +1,12 @@
+# Create a new keyboard game
+
+## Instructions
+
+Create a small game that uses keyboard events to do tasks. It can be a different kind of typing game, or an art type game that paints pixels to the screen on keystrokes. Get creative!
+
+## Rubric
+
+| Criteria | Exemplary                | Adequate                 | Needs Improvement |
+| -------- | ------------------------ | ------------------------ | ----------------- |
+|          | A full game is presented | The game is very minimal | The game has bugs |
+|          |
\ No newline at end of file
diff --git a/typing-game/images/demo.gif b/typing-game/images/demo.gif
new file mode 100644
index 00000000..171388ee
Binary files /dev/null and b/typing-game/images/demo.gif differ
diff --git a/typing-game/solution/index.css b/typing-game/solution/index.css
new file mode 100644
index 00000000..c1767359
--- /dev/null
+++ b/typing-game/solution/index.css
@@ -0,0 +1,8 @@
+.highlight {
+	background-color: yellow;
+}
+
+.error {
+	background-color: lightcoral;
+	border-color: red;
+}
diff --git a/typing-game/solution/index.html b/typing-game/solution/index.html
new file mode 100644
index 00000000..9fd43226
--- /dev/null
+++ b/typing-game/solution/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Typing</title>
+		<link rel="stylesheet" href="./index.css" />
+	</head>
+
+	<body>
+		<h1>Practice your typing</h1>
+		<div>Click start to have a quote displayed. Type the quote as fast as you can!</div>
+
+		<h2 id="quote"></h2>
+		<h2 id="message"></h2>
+		<div>
+			<input type="text" id="typed-value" />
+		</div>
+		<div>
+			<button id="start" type="button">Start</button>
+		</div>
+		<script src="./index.js"></script>
+	</body>
+</html>
diff --git a/typing-game/solution/index.js b/typing-game/solution/index.js
new file mode 100644
index 00000000..646c38a3
--- /dev/null
+++ b/typing-game/solution/index.js
@@ -0,0 +1,85 @@
+const quotes = [
+	'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+	'There is nothing more deceptive than an obvious fact.',
+	'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+	'I never make exceptions. An exception disproves the rule.',
+	'What one man can invent another can discover.',
+	'Nothing clears up a case so much as stating it to another person.',
+	'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+
+// array for storing the words of the current challenge
+let words = [];
+// stores the index of the word the player is currently typing
+let wordIndex = 0;
+// default value for startTime (will be set on start)
+let startTime = Date.now();
+
+// grab UI items
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message')
+const typedValueElement = document.getElementById('typed-value');
+
+document.getElementById('start').addEventListener('click', function () {
+	// get a quote
+	const quoteIndex = Math.floor(Math.random() * quotes.length);
+	const quote = quotes[quoteIndex];
+	// Put the quote into an array of words
+	words = quote.split(' ');
+	// reset the word index for tracking
+	wordIndex = 0;
+
+	// UI updates
+	// Create an array of span elements so we can set a class
+	const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+	// Convert into string and set as innerHTML on quote display
+	quoteElement.innerHTML = spanWords.join('');
+	// Highlight the first word
+	quoteElement.childNodes[0].className = 'highlight';
+	// Clear any prior messages
+	messageElement.innerText = '';
+
+	// Setup the textbox
+	// Clear the textbox
+	typedValueElement.value = '';
+	// set focus
+	typedValueElement.focus();
+	// set the event handler
+
+	// Start the timer
+	startTime = new Date().getTime();
+});
+
+typedValueElement.addEventListener('input', (e) => {
+	// Get the current word
+	const currentWord = words[wordIndex];
+	// get the current value
+	const typedValue = typedValueElement.value;
+
+	if (typedValue === currentWord && wordIndex === words.length - 1) {
+		// end of quote
+		// Display success
+		const elapsedTime = new Date().getTime() - startTime;
+		const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+		messageElement.innerText = message;
+	} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+		// end of word
+		// clear the typedValueElement for the new word
+		typedValueElement.value = '';
+		// move to the next word
+		wordIndex++;
+		// reset the class name for all elements in quote
+		for (const wordElement of quoteElement.childNodes) {
+			wordElement.className = '';
+		}
+		// highlight the new word
+		quoteElement.childNodes[wordIndex].className = 'highlight';
+	} else if (currentWord.startsWith(typedValue)) {
+		// currently correct
+		// highlight the next word
+		typedValueElement.className = '';
+	} else {
+		// error state
+		typedValueElement.className = 'error';
+	}
+});
diff --git a/typing-game/typing-game/README.md b/typing-game/typing-game/README.md
new file mode 100644
index 00000000..1794636e
--- /dev/null
+++ b/typing-game/typing-game/README.md
@@ -0,0 +1,330 @@
+# Creating a game using events
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+## Event driven programming
+
+When creating a browser based application, we provide a graphical user interface (GUI) for the user to use when interacting with what we've built. The most common way to interact with the browser is through clicking and typing in various elements. The challenge we face as a developer is we don't know when they're going to perform these operations!
+
+[Event-driven programming](https://en.wikipedia.org/wiki/Event-driven_programming) is the name for the type of programming we need to do to create our GUI. If we break this phrase down a little bit, we see the core word here is **event**. [Event](https://www.merriam-webster.com/dictionary/event), according to Merriam-Webster, is defined as "something which happens". This describes our situation perfectly. We know something is going to happen for which we want to execute some code in response, but we don't know when it will take place.
+
+The way we mark a section of code we want to execute is by creating a function. When we think about [procedural programming](https://en.wikipedia.org/wiki/Procedural_programming), functions are called in a specific order. This same thing is going to be true with event driven programming. The difference is **how** the functions will be called.
+
+To handle events (button clicking, typing, etc.), we register **event listeners**. An event listener is a function which listens for an event to occur and executes in response. Event listeners can update the UI, make calls to the server, or whatever else needs to be done in response to the user's action. We add an event listener by using [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), and providing a function to execute.
+
+> **NOTE:** It's worth highlighting there are numerous ways to create event listeners. You can use anonymous functions, or create named ones. You can use various shortcuts, like setting the `click` property, or using `addEventListener`. In our exercise we are going to focus on `addEventLister` and anonymous functions, as it's probably the most common technique web developers use. It's also the most flexible, as `addEventListener` works for all events, and the event name can be provided as a parameter.
+
+### Common events
+
+There are [dozens of events](https://developer.mozilla.org/docs/Web/Events) available for you to listen to when creating an application. Basically anything a user does on a page raises an event, which gives you a lot of power to ensure they get the experience you desire. Fortunately, you'll normally only need a small handful of events. Here's a few common ones (including the two we'll use when creating our game):
+
+- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): The user clicked on something, typically a button or hyperlink
+- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button
+- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): The user highlighted some text
+- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): The user input some text
+
+## Creating the game
+
+We are going to create a game to explore how events work in JavaScript. Our game is going to test a player's typing skill, which is one of the most underrated skills all developers should have. We should all be practicing our typing! The general flow of the game will look like this:
+
+- Player clicks on start button and is presented with a quote to type
+- Player types the quote as quickly as they can in a textbox
+  - As each word is completed, the next one is highlighted
+  - If the player has a typo, the textbox is updated to red
+  - When the player completes the quote, a success message is displayed with the elapsed time
+
+Let's build our game, and learn about events!
+
+### File structure
+
+We're going to need three total files: **index.html**, **script.js** and **style.css**. Let's start by setting those up to make life a little easier for us.
+
+- Create a new folder for your work by opening a console or terminal window and issuing the following command:
+
+```bash
+# Linux or macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing game
+```
+
+- Open Visual Studio Code
+
+```bash
+code .
+```
+
+- Add three files to the folder in Visual Studio Code with the following names:
+  - index.html
+  - script.js
+  - style.css
+
+## Create the user interface
+
+If we explore the requirements, we know we're going to need a handful of elements on our HTML page. This is sort of like a recipe, where we need some ingredients:
+
+- Somewhere to display the quote for the user to type
+- Somewhere to display any messages, like a success message
+- A textbox for typing
+- A start button
+
+Each of those will need IDs so we can work with them in our JavaScript. We will also add references to the CSS and JavaScript files we're going to create.
+
+Create a new file named **index.html**. Add the following HTML:
+
+```html
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Typing game!</h1>
+  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+  <h2 id="quote"></h2> <!-- This will display our quote -->
+  <h2 id="message"></h2> <!-- This will display any status messages -->
+  <div>
+    <input type="text" id="typed-value" /> <!-- The textbox for typing -->
+    <button type="button" id="start">Start</button> <!-- To start the game -->
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+### Launch the application
+
+It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) which will both host your application locally and refresh the browser each time you save.
+
+- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install**
+  - You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation
+  - Restart Visual Studio Code if prompted
+- Once installed, in Visual Studio Code, click Ctl-Shift-P (or Cmd-Shift-P) to open the command pallate
+- Type **Live Server: Open with Live Server**
+  - Live Server will start hosting your application
+- Open a browser and navigate to **https://localhost:5500**
+- You should now see the page you created!
+
+Let's add some functionality.
+
+## Add the CSS
+
+With our HTML created, let's add the CSS for core styling. We need to highlight the word the player should be typing, and colorize the textbox if what they've typed is incorrect. We'll do this with two classes.
+
+Create a new file named **style.css** and add the following syntax.
+
+```css
+/* inside style.css */
+.highlight {
+  background-color: yellow;
+}
+
+.error {
+  background-color: lightcoral;
+  border: red;
+}
+```
+
+✅ When it comes to CSS you can layout your page however you might like. Take a little time and make the page look more appealing:
+
+- Choose a different font
+- Colorize the headers
+- Resize items
+
+## JavaScript
+
+With our UI created, it's time to focus our attention on the JavaScript which will provide the logic. We're going to break this down into a handful of steps:
+
+- [Create the constants](#add-the-constants)
+- [Event listener to start the game](#add-start-logic)
+- [Event listener to typing](#add-typing-logic)
+
+But first, create a new file named **script.js**.
+
+### Add the constants
+
+We're going to need a few items to make our lives a little easier for programming. Again, similar to a recipe, here's what we'll need:
+
+- Array with the list of all quotes
+- Empty array to store all the words for the current quote
+- Space to store the index of the word the player is currently typing
+- The time the player clicked start
+
+We're also going to want references to the UI elements:
+
+- The textbox (**typed-value**)
+- The quote display (**quote**)
+- The message (**message**)
+
+```javascript
+// inside script.js
+// all of our quotes
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+const words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = DateTime.getTime();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+```
+
+✅ Go ahead and add more quotes to your game
+
+> **NOTE:** We can retrieve the elements whenever we want in code by using `document.getElementById`. Because of the fact we're going to refer to these elements on a regular basis we're going to avoid typos with string literals by using constants. Frameworks such as [Vue.js](https://vuejs.org/) or [React](https://reactjs.org/) can help you better manage centralizing your code.
+
+Take a minute to watch a video on using `const`, `let` and `var`
+
+[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
+
+### Add start logic
+
+To begin the game, the player will click on start. Of course, we don't know when they're going to click start. This is where an [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) comes into play. An event listener will allow us to listen for something to occur (an event) and execute code in response. In our case, we want to execute code when the user clicks on start.
+
+When the user clicks **start**, we need to select a quote, setup the user interface, and setup tracking for the current word and timing. Below is the JavaScript you'll need to add; we discuss it just after the script block.
+
+```javascript
+// at the end of script.js
+document.getElementById('start').addEventListener('click', () => {
+  // get a quote
+  const quoteIndex = Math.floor(Math.random() * quotes.length);
+  const quote = quotes[quoteIndex];
+  // Put the quote into an array of words
+  words = quote.split(' ');
+  // reset the word index for tracking
+  wordIndex = 0;
+
+  // UI updates
+  // Create an array of span elements so we can set a class
+  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
+  // Convert into string and set as innerHTML on quote display
+  quoteElement.innerHTML = spanWords.join('');
+  // Highlight the first word
+  quoteElement.childNodes[0].className = 'highlight';
+  // Clear any prior messages
+  messageElement.innerText = '';
+
+  // Setup the textbox
+  // Clear the textbox
+  typedValueElement.value = '';
+  // set focus
+  typedValueElement.focus();
+  // set the event handler
+
+  // Start the timer
+  startTime = new Date().getTime();
+});
+```
+
+Let's break down the code!
+
+- Setup the word tracking
+  - Using [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) and [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) allows us to randomly select a quote from the `quotes` array
+  - We convert the `quote` into an array of `words` so we can track the word the player is currently typing
+  - `wordIndex` is set to 0, since the player will start on the first word
+- Setup the UI
+  - Create an array of `spanWords`, which contains each word inside a `span` element
+    - This will allow us to highlight the word on the display
+  - `join` the array to create a string which we can use to update the `innerHTML` on `quoteElement`
+    - This will display the quote to the player
+  - Set the `className` of the first `span` element to `highlight` to highlight it as yellow
+  - Clean the `messageElement` by setting `innerText` to `''`
+- Setup the textbox
+  - Clear the current `value` on `typedValueElement`
+  - Set the `focus` to `typedValueElement`
+- Start the timer by calling `getTime`
+
+### Add typing logic
+
+As the player types, an `input` event will be raised. This event listener will check to ensure the player is typing the word correctly, and handle the current status of the game. Returning to **script.js**, add the following code to the end. We will break it down afterwards.
+
+```javascript
+// at the end of script.js
+typedValueElement.addEventListener('input', () => {
+  // Get the current word
+  const currentWord = words[wordIndex];
+  // get the current value
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // end of sentence
+    // Display success
+    const elapsedTime = new Date().getTime() - startTime;
+    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
+    messageElement.innerText = message;
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // end of word
+    // clear the typedValueElement for the new word
+    typedValueElement.value = '';
+    // move to the next word
+    wordIndex++;
+    // reset the class name for all elements in quote
+    for (const wordElement of quoteElement.childNodes) {
+      wordElement.className = '';
+    }
+    // highlight the new word
+    quoteElement.childNodes[wordIndex].className = 'highlight';
+  } else if (currentWord.startsWith(typedValue)) {
+    // currently correct
+    // highlight the next word
+    typedValueElement.className = '';
+  } else {
+    // error state
+    typedValueElement.className = 'error';
+  }
+});
+```
+
+Let's break down the code! We start by grabbing the current word and the value the player has typed thus far. Then we have waterfall logic, where we check if the quote is complete, the word is complete, the word is correct, or (finally), if there is an error.
+
+- Quote is complete, indicated by `typedValue` being equal to `currentWord`, and `wordIndex` being equal to one less than the `length` of `words`
+  - Calculate `elapsedTime` by subtracting `startTime` from the current time
+  - Divide `elapsedTime` by 1,000 to convert from milliseconds to seconds
+  - Display a success message
+- Word is complete, indicated by `typedValue` ending with a space (the end of a word) and `typedValue` being equal to `currentWord`
+  - Set `value` on `typedElement` to be `''` to allow for the next word to be typed
+  - Increment `wordIndex` to move to the next word
+  - Loop through all `childNodes` of `quoteElement` to set `className` to `''` to revert to default display
+  - Set `className` of the current word to `highlight` to flag it as the next word to type
+- Word is currently typed correctly (but not complete), indicated by `currentWord` started with `typedValue`
+  - Ensure `typedValueElement` is displayed as default by clearing `className`
+- If we made it this far, we have an error
+  - Set `className` on `typedValueElement` to `error`
+
+## Test your application
+
+You've made it to the end! The last step is to ensure our application works. Give it a shot! Don't worry if there are errors; **all developers** have errors. Examine the messages and debug as needed.
+
+Click on **start**, and start typing away! It should look a little like the animation we saw before.
+
+![Animation of the game in action](typing-game/images/demo.gif)
+
+---
+
+## 🚀 Challenge
+
+Add more functionality
+
+- Disable the `input` event listener on completion, and re-enable it when the button is clicked
+- Disable the textbox when the player completes the quote
+- Display a modal dialog box with the success message
+- Store high scores using [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+Read up on [all the events available](https://developer.mozilla.org/en-US/docs/Web/Events) to the developer via the web browser, and consider the scenarios in which you would use each one.
+
+## Assignment [Create a new keyboard game](assignment.md)
\ No newline at end of file