This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
@ -182,7 +183,8 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
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?
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**.
@ -179,7 +180,8 @@ You've now seen we have three ways to pass a function as a parameter and might b
Can you articulate in one sentence the difference between functions and methods? Give it a try!
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
@ -158,7 +160,9 @@ if (firstNumber > secondNumber) {
Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
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.
@ -110,7 +112,10 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
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.
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:
### 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:
@ -21,7 +23,7 @@ On your computer, create a folder called 'terrarium' and inside it, a file calle
---
## 1. The DocType and html tags
## 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.
@ -29,7 +31,7 @@ The first line of an HTML file is its doctype. It's a little surprising that you
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:
### Task
Add these lines at the top of your `index.html` file:
@ -42,7 +44,7 @@ Add these lines at the top of your `index.html` file:
---
## 2. The document's 'head'
## 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:
@ -52,7 +54,7 @@ The 'head' area of the HTML document includes crucial information about your web
- 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:
### Task
Add a 'head' block to your document in between the opening and closing `<html>` tags.
@ -69,13 +71,13 @@ Add a 'head' block to your document in between the opening and closing `<html>`
---
## 3. The document's `body`
## 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:
### Task
```html
<!DOCTYPE html>
@ -98,7 +100,7 @@ One html tag that doesn't need a closing tag is the `<img>` tag, because it has
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:
### Task
Add those plant images into two columns between the `<body></body>` tags:
@ -163,7 +165,7 @@ Each image has an alt tag that will appear even if you can't see or render an im
---
## 4. Semantic markup
## 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
@ -177,7 +179,7 @@ Using semantic markup such as having headers be `<h1>` and unordered lists be re
✅ 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 terrarium
The last part of this interface involves creating markup that will be styled to create a terrarium.
@ -205,7 +207,9 @@ Add this markup above the last `</div>` tag:
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)
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).
@ -13,11 +15,11 @@ CSS, or Cascading Style Sheets, solve an important problem of web development: h
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:
### Prequisite
You should have the HTML for your terrarium built and ready to be styled.
### Task:
### Task
In your terrarium folder, create a new file called `style.css`. Import that file in the `<head>` section:
@ -27,11 +29,11 @@ In your terrarium folder, create a new file called `style.css`. Import that file
---
## 1. The Cascade
## 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:
### Task
Add the inline style "color: red" to your `<h1>` tag:
@ -51,11 +53,11 @@ h1 {
---
## 2. Inheritance
## Inheritance
Styles are inherited from an ancestor style to a descendent, such that nested elements inherit the styles of their parents.
### Task:
### Task
Set the body's font to a given font, and check to see a nested element's font:
@ -73,7 +75,7 @@ Open your browser's console to the 'Elements' tab and observe the H1's font. It
---
## 3. CSS Selectors
## CSS Selectors
### Tags
@ -167,7 +169,7 @@ Also notable is the use of z-index, which controls the relative altitude of an e
✅ Why do you need both a plant holder and a plant CSS selector?
## 4. CSS Positioning
## 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.
@ -181,7 +183,7 @@ In our sample, the `plant-holder` is a relative-positioned element that is posit
✅ Experiment with switching the types of positioning of the side containers and the plant-holder. What happens?
## 5. CSS Layouts
## CSS Layouts
Now you will use what you learned to build the terrarium itself, all using CSS!
@ -248,7 +250,9 @@ Add a 'bubble' shine to the left bottom area of the jar to make it look more gla
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)
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!
@ -21,11 +23,11 @@ We will use a closure to manipulate the DOM.
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:
### 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:
### Task
In your terrarium folder, create a new file called `script.js`. Import that file in the `<head>` section:
@ -36,11 +38,11 @@ In your terrarium folder, create a new file called `script.js`. Import that file
> 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 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:
### Task
```html
dragElement(document.getElementById('plant1'));
@ -65,7 +67,7 @@ What's going on here? You are referencing the document and looking through its D
---
## 2. The Closure
## 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).
@ -87,7 +89,7 @@ In this example, the displayCandy function surrounds a function that pushes a ne
✅ 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:
### Task
Under the element declarations in `script.js`, create a function:
@ -110,11 +112,11 @@ In addition, the terrariumElement that is passed to this function is assigned a
---
## 3. The Pointerdrag function
## 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;`:
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
## 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:
### Task
Add the `elementDrag` function right after the closing curly bracket of `pointerDrag`:
@ -170,7 +172,7 @@ As you drag, you reassign `pos1` by making it equal to `pos3` (which you set ear
All this recalculation of positioning allows you to fine-tune the behavior of the terrarium and its plants.
### Task:
### Task
The final task to complete the interface is to add the `closeElementDrag` function after the closing curly bracket of `elementDrag`:
@ -195,7 +197,9 @@ Now you have completed your project!
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!
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)
## Assignment
[Create a new keyboard game](4-typing-game/typing-game/assignment.md)
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:
### 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.
✅ A little history: the first browser was called 'WorldWideWeb' and was created by Sir Timothy Berners-Lee in 1990.
> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
@ -146,7 +148,9 @@ Congratulations, you've taken the first steps towards building a browser extensi
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?
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:
### 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.
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
### 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:
@ -44,7 +46,7 @@ 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:
### 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():
@ -106,7 +108,7 @@ Notice that you use the Web API to manipulate LocalStorage, either by using `get
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
### 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.
@ -118,7 +120,7 @@ function handleSubmit(e) {
```
✅ 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
### 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:
@ -135,7 +137,7 @@ function setUpUser(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
### Display Carbon Usage
Finally it's time to query the API!
@ -206,7 +208,9 @@ Congratulations! If you build your extension (`npm run build`) and refresh it in
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?
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.
@ -143,7 +145,9 @@ Congratulations, you've built a useful browser extension and learned more about
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?
| 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](/1-getting-started-lessons/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/2-github-basics) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/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/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/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/4-arrays-loops) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 09 | [Terrarium](/3-terrarium/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/2-intro-to-css) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 10 | [Terrarium](/3-terrarium/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/3-intro-to-DOM-and-closures) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 11 | [Typing Game](/4-typing-game/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/typing-game) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/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/1-about-browsers) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an 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/2-forms-browsers-local-storage) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/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/3-background-tasks-and-performance) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen |
| 15 | [Space Game](/6-space-game/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/1-introduction) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 17 | [Space Game](/6-space-game/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/3-moving-elements-around) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 18 | [Space Game](/6-space-game/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/4-collision-detection) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 20 | [Space Game](/6-space-game/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/6-end-condition) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 23 | [Banking App](/7-bank-project/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/3-data) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan |
| 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](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | 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/2-github-basics/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | 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/2-functions-methods/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | 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/3-making-decisions/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | 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/2-intro-to-css/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 10 | [Terrarium](/3-terrarium/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/3-intro-to-DOM-and-closures/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 11 | [Typing Game](/4-typing-game/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/typing-game/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/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/1-about-browsers/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an 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/2-forms-browsers-local-storage/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/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/3-background-tasks-and-performance/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen |
| 15 | [Space Game](/6-space-game/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/1-introduction/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 17 | [Space Game](/6-space-game/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/3-moving-elements-around/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 18 | [Space Game](/6-space-game/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/4-collision-detection/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 20 | [Space Game](/6-space-game/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/6-end-condition/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 23 | [Banking App](/7-bank-project/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/3-data/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan |
Jen Looper
4 years ago