diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..d06ffd2ea
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..723ef36f4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea
\ No newline at end of file
diff --git a/README.md b/README.md
index 613167863..5e3f75cff 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,128 @@
->Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a Pull Request.
+# DEPRECATED - JavaScript 1
+This module has been replace with the JavaScript module, find it [here](https://github.com/HackYourFuture/JavaScript)
-# HackYourJavaScript
+```
+In this module you'll make a start into wonderful world of programming. We will be using the programming language `JavaScript` to do so. You'll learn about the basic building blocks of programming: `loops`, `functions`, `control flow` and more. Consider these as the ABC's of programming, without them it's impossible to write working software!
-Here you can find course content and homework for the JavaScript 1,2 and 3 modules
+You'll be learning two main things:
-|Week|Topic|Read|Homework|Review|
-|----|-----|----|--------|------|
-|0.|Preparation for your first JavaScript session|[Pre-reading](/Week0/README.md)|-|-|
-|1.|Git Session with Unmesh|[Reading Week 1](/Week1/README.md) | [Homework Week 1](/Week1/MAKEME.md)|[Review](/Week1/REVIEW.md)|
-|2.|• Intro JavaScript (What is it, where can you use it for) • Variables [var, let, const] • Basic Data types [Strings, Numbers, Arrays, Booleans] • Operators • Naming conventions|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Review](/master/Week2/REVIEW.md)|
-|3.|• Git work flow :smiling_imp: • Advanced data types [Objects] • Conditions • Statements vs Expressions • Loops (for/while) • Functions • Scope|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[Review](/Week3/REVIEW.md)|
-|4.|• Capturing user input • Events • Basic DOM manipulations[img src, innerHTML] • Code debugging using the browser • Code commenting • Structuring code files |[Reading Week 4](/Week4/README.md)|[Homework Week 4](/Week4/MAKEME.md)|Review|
-|5.|• Functions + JSON/Arrays • Array Manipulations • JSON • Map and filter • Arrow functions |[Reading Week 5](/Week5/README.md)|[Homework Week 5](/Week5/MAKEME.md)|[Review](/Week5/REVIEW.MD)|
-|6.|• Closures • Callbacks|[Reading Week 6](/Week6/README.md)|[Homework Week 6](/Week6/MAKEME.md)|[Review](/Week6/REVIEW.md)|
-|7.|• Object Oriented Programming • Code flow (order of execution) • Async VS Sync|[Reading Week 7](/Week7/README.md)|[Homework Week 7](/Week7/MAKEME.md)|[Review](/Week7/REVIEW.md)|
-|8.|• Structure for a basic SPA • XHTTP Requests • API calls|[Reading Week 8](/Week8/README.md)|[Homework Week 8](/Week8/MAKEME.md)|Review|
-|9.|• (re)writing data structures (in JSON) • Promises|[Reading Week 9](/Week9/README.md)|[Homework Week 9](/Week9/MAKEME.md)|[Review](/Week9/REVIEW.md)|
+1. **Fundamental concepts in programming**. While we're using JavaScript to illustrate these concepts, it's important to keep in mind that what you will learn is applicable to **any** programming language. They might differ in syntax (a fancy term for the arrangement of words in a language in order for it to make sense), but the functionality will be the same: a loop will always be a loop.
-__Kind note:__
+This should be your mindset when you're learning concepts: **I'm learning how to become a software developer that can adjust to any language used, because I know what the underlying principles and concepts are**.
-We expect you to __always__ come prepared to the class on Sunday.
+2. **How to think like a programmer**. In one sentence this means: knowing how to solve problems using a computer. Let's split that up in two parts: `how to solve problems` refers to the ability to identify issues and find effective solutions. `computationally` refers to the ability to think in logical steps that the computer can understand and execute.
-### Overall
-A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
+This should be your mindset when you're learning how to think : **I'm learning how to think in logical steps, identifying cause and effect, and always looking for solutions**.
+## Before you start!
+### 1. Install some new software!
+
+In order to test your JavaScript code, you'll be using software that will execute your files from the command line. This software is called [Node.js](https://nodejs.org/en/download/). Download the Long-Term Support (LTS) version for your specific operating system.
+
+- For Windows, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-x86.msi)
+- For Mac, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1.pkg)
+- For Linux, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz)
+
+After you've installed it, go to your command line interface. Type in the following command:
+
+```
+node --version
+```
+
+It should show you version `v12.16.1` or higher.
+
+### 2. A new way of submitting homework!
+
+Starting from this module you'll submit homework in a different way. You will be only using GIT and GitHub and work **like a real developer would**: pushing code from your computer to GitHub and making pull requests!
+
+Before you start with the homework, make a `fork` of the following repository: [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1). You'll always use the **HackYourHomework** version of the module repository whenever you have to submit your homework.
+
+Here are the steps to get started:
+
+1. `fork` the HackYourHomework repository to your personal account.
+2. `clone` your forked repository to your computer.
+3. Make `GIT` branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands):
+
+`console
+foo@bar:~$ git branch week1-YOURNAME
+foo@bar:~$ git branch week2-YOURNAME
+foo@bar:~$ git branch week3-YOURNAME
+`
+
+4. `checkout` to `week1-YOURNAME`
+5. Get started with making your homework!
+
+Here's a video in order that shows you how it's done: [How to Submit Your Homework](https://www.youtube.com/watch?v=CpYARPYGQU8)
+
+### 3. Presentation module
+Besides learing a lot of technical concepts you'll be focussing on the softskills as well. Please have a look at [this](https://github.com/HackYourFuture/presentation-module) RePo for more details.
+
+## Learning goals
+
+In order to successfully complete this module you will need to master the following:
+
+- Have an idea of what `computer programming` is
+- Know the basic building blocks of `JavaScript`
+- Correctly write and use `variables`, `functions` and `loops`
+- Understand the `control flow`
+
+## How to use this repository
+
+### Repository content
+
+This repository consists of 3 essential parts:
+
+1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week
+2. `MAKEME`: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
+3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
+
+### How to study
+
+Let's say you are just starting out with the JavaScript1 module. This is what you do...
+
+1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript1`, that would be [Week1 Reading](/Week1/README.md)
+2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the HTML-CSS module)
+3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript1`, that would be [Week1 Homework](/Week1/MAKEME.md)
+4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have
+5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel
+6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
+7. You spend **Monday** and **Tuesday** finalizing your homework
+8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
+9. Start the new week by going back to point 1!
+
+In summary:
+
+
+
+To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack!
+
+### Video lectures
+
+For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be [Uday Khaki](https://hackyourfuture.slack.com/team/U3T5HDP0W): former HackYourFuture student and now successful web developer for several years!
+
+You can find out more about him here:
+
+- [@Uday on Slack](https://hackyourfuture.slack.com/team/U3T5HDP0W)
+
+Learn from Uday in the following playlist of videos he has made for you! (Click on the image to open the link)
+
+
+
+## Planning
+
+| Week | Topic | Reading Materials | Homework | Lesson Plan |Presentation module |
+| ---- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |-----------|
+| 1. | What is JavaScript?, Variables, Data Structures & Naming Conventions | [Reading W1](https://github.com/HackYourFuture/JavaScript1/tree/master/Week1/README.md) | [Homework W1](https://github.com/HackYourFuture/JavaScript1/tree/master/Week1/MAKEME.md) | [Lesson Plan W1](https://github.com/HackYourFuture/JavaScript1/tree/master/Week1/LESSONPLAN.md) |[W1 presentations](https://github.com/HackYourFuture/presentation-module/blob/main/week1.md) |
+| 2. | Statements vs. Expressions, Control flow, Loops, Operators, Conditional statement | [Reading W2](https://github.com/HackYourFuture/JavaScript1/tree/master/Week2/README.md) | [Homework W2](https://github.com/HackYourFuture/JavaScript1/tree/master/Week2/MAKEME.md) | [Lesson Plan W2](https://github.com/HackYourFuture/JavaScript1/tree/master/Week2/LESSONPLAN.md) |[W2 presentation](https://github.com/HackYourFuture/presentation-module/blob/main/week2.md) |
+| 3. | Functions, Thinking like a programmer I, How JavaScript relates to HTML/CSS | [Reading W3](https://github.com/HackYourFuture/JavaScript1/tree/master/Week3/README.md) | [Homework W3](https://github.com/HackYourFuture/JavaScript1/tree/master/Week3/MAKEME.md) | [Lesson Plan W3](https://github.com/HackYourFuture/JavaScript1/tree/master/Week3/LESSONPLAN.md) |
+
+## Finished?
+
+Did you finish the module? Good job! You're doing great!
+
+If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/JavaScript2) to go to JavaScript2!
+
+_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_
+
+ This work is licensed under a Creative Commons Attribution 4.0 International License.```
diff --git a/VSCodeTips/README.md b/VSCodeTips/README.md
deleted file mode 100644
index e5590d4bd..000000000
--- a/VSCodeTips/README.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# VSCode Tips
-
-Here are some tips for getting up to speed with VSCode as you progress through this course.
-
-## Some useful extensions
-
-VSCode can be extended with _extensions_. There are two that we recommend you install from day 1.
-
-**Spell Checker**. We fully understand that you guys sometimes have difficulty with the correct English spelling when choosing names for variables and functions in your JavaScript programs. That is nothing to be ashamed of, but why not get some help from a handy extension?
-
-**ESLint**. This extension can check your JavaScript code for obvious errors, such as undefined variables, unused variables, etc.
-
-### Installation instructions
-
-1. Start up VSCode.
-
-2. Press the last button in the area in left margin (called the Activity Bar), shown below:
- 
-
-3. In the input field in the upper left corner, type `code spellchecker` as pictured here:
-
- 
-
- (The indication 122K in this picture means that this extension has been downloaded 122,000 times. The five star rating indicates users like it a lot.)
-
-4. Press the green `install` button of **Code Spellchecker**.
-5. When the installation has finished, install the ESLint extension in a similar fashion (1.2 million downloads!):
-
- 
-
-6. When this second extension has finished installing you will notice that the green `install` button changes to a blue `reload` button. But no need to press this button at this time (no harm done if you did).
-7. You now need to install a global Node package to support ESLint. Open a terminal window in VSCode by selecting **View**, **Integrated Terminal** from the menu bar.
-8. A terminal window opens in the lower half of the VSCode window. In this window, type the command below (on Linux and MacOS systems you may need to prefix this command with `sudo`, e.g. `sudo npm ...`):
-
- ```
- npm install -g eslint
- ```
-
-
-9. Once the installation has finished close VSCode for now.
-
-## Using VSCode for your homework
-
-You’ll get the most out of VSCode if you organise your work in folders, say a folder for each week in the JavaScript module.
-
-(Later in the course you will be “cloning” Git repositories into local folders as the basis for your homework or projects.)
-
-To start work with VSCode in particular folder, start VSCode and open the relevant folder: from the menu, select **File**, **Open Folder**. VSCode will now open this folder to be your "project folder", until you close VSCode or open another folder.
-
-Assuming that you will use the folder for JavaScript work, you need to create a special file inside of it as required by ESlint.
-
-From the menu, select **View**, **Command Palette…** and type `create` as show in the picture below. Select: **Create** '.eslintrc.json' File.
-
-
-
-The `.eslintrc.json` file will now be created in the project folder. No need to touch this file at this time, it just needs to sit in your project folder. Later in the course you may wish to add additional "rules" to this file for more stringent code checking.
-
-## Creating your JavaScript file
-
-You are now ready to start adding your first JavaScript file.
-
-1. From the menu, select **File**, **New File**. This will create a new, empty file named "Untitled-1".
-2. Select **File**, **Save** from the menu and give your file a an appropriate name. Make sure that you give it an extension ".js" to make it a JavaScript file.
-3. Start entering your JavaScript code in the new file. Be on the watch out for green squirly underlines. These are warnings from either ESLint or the Spell Checker that something might be wrong.
-4. If you see green squirly underlines, hover your mouse pointer over the underlined text and a tooltip will appear that explains what might be wrong.
-5. You can also open the "problem" panel by selecting **View**, **Problems** from the menu to see any problems identified.
-6. Pay attention also to the lower left part of the VSCode window, i.e. the status bar. It gives an indication of the number of errors and warnings issued. In the picture below there are zero errors, 7 warnings (usually from ESLint) and 14 informational messages (usually from the spell checker).
-
- 
-
-## Some useful short-cut commands
-
-In the previous section we frequently referred you to the menu bar to select commands. As you get more proficient with VSCode you may want to inspect these menus a little closer and take note of the short-cut commands listed in their right margin. For example, the short-cut command for **File**, **New** is listed as Ctrl+N (press `Ctrl` and `N` keys simultaneously) on a Windows or Linux PC and ⌘N on a Mac.
-
-Here are some short-cut commands that you will use many times a day and that we recommend you familiarise yourself with from day 1:
-
-| Operation | Windows | Mac | Linux |
-| --------- | ------- | ----- | ----- |
-| **Format Document** (make it pretty) | Shift‑Alt‑F | ⇧⌥F| Ctrl‑Shift‑I |
-| **Search** (Find)| Ctrl+F | ⌘F | Ctrl+F |
-| **Replace** (Find and replace) | Ctrl+H | ⌥⌘F | Ctrl+H |
-| **Rename Symbol** (change all names in file to a different name) | F2 | F2 | F2 |
-| Open an **Integrated Terminal** window in VSCode | Ctrl+' | ⌃\` | Ctrl+' |
-
-- **Format Document**. This command reformats your JavaScript file in a generally accepted standard format, using proper indenting, proper use of spaces, placing of curly braces and more. A neatly formatted document helps you to better understand your own code and your teachers, mentors and fellow students will love your for it too when they review your work.
-
- *With VSCode at your finger tips there is no longer any excuse for submitting poorly formatted homework!*
-
-- **Search**. Search for specified text.
-- **Replace**. Replace specified text by some other text.
-
- In the figure below the **Replace** pop-up window is shown. The **Search** pop-up is similar, but with one input field only.
-
- 
-
- - The `Aa` button activates the **Match Case** option.
- - The `Ab|` button matches **Whole Words Only**.
- - The `.*` button allow you to search using _regular expressions_, which you may encounter in later modules as an advanced JavaScript programming topic.
- - The `c-b` button next to the second input field replaces the next occurrence of the matched text.
- - The `ab-ac` button replaces **all** occurrences of the matched text.
- - The left and right arrows move the cursor to the previous and next match.
- - To get rid of the pop-up press `Esc` or press the `x` button.
-
-- **Rename Symbol**. This command renames all occurrences of a JavaScript variable or function name. To do so, move the text cursor to the variable or function name and press F2. A small pop-up window will appear in which you can type a new name. Press Enter to finalise the change or Esc to cancel it.
-
-- **Open an Integrated Terminal window**. We already covered this when we mentioned the **View**, **Integrated Terminal** menu command.
-
-## Running and debugging your code with the VSCode Node debugger
-
-If your JavaScript program is contained in a single file the easiest way to run and examine your code is the start straight in VSCode. Before you can run it you need to do a small preparation. This needs to be done only once per project folder.
-
-1. As illustrated in the figure below, press the **Debug** button in the left margin as indicated by the red triangle.
-
- 
-
-2. You'll see the Debugger Pane in the left hand side of the screen as shown below. Press the "cog" button as indicated by the red triangle.
-
- 
-
-3. Next you will prompted to select an environment. Choose `Node.js`. This produces a JSON file, displayed in a new editor tab with a contents as shown below.
-
- ```
- {
- // Use IntelliSense to learn about possible Node.js debug attributes.
- // Hover to view descriptions of existing attributes.
- // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
- "version": "0.2.0",
- "configurations": [
- {
- "type": "node",
- "request": "launch",
- "name": "Launch Program",
- "program": "${file}"
- }
- ]
- }
- ```
-
- At this his time no changes are necessary to this file. You can just close the editor tab.
-
-4. Next, press the **Explorer** button in the left margin as indicated by the red triangle in the figure below.
-
- 
-
-5. Observe that VSCode has created a `.vscode` subfolder in your project folder where it keeps the JSON file just created and potentially other VSCode settings.
-6. You can now run your code in the debugger. Switch to the editor tab contains your program and press the green triangular button or, alternatively, press F5.
-7. Note that when your program finishes execution the debugger is still active. You can stop it by pressing the square red button.
-
-If you do not really need to debug your program (e.g., by placing breakpoints) etc, you may prefer to run your program in a terminal window. You can open an Integrated Terminal as explained earlier and type:
-
-```
-node prog.js
-```
-
-Replace `prog.js` with the actual file name of your program.
-
-If you want to run your program in terminal window independent of VSCode you should make sure you are in the same directory as the program you want to run.
-
-
-### Placing break points and inspecting variables
-
-This is covered in class.
-
-### Further information
-
-Please note that VSCode is actively being developed. At present there is a monthly release cycle, so don't be surprised when you are prompted once a month to update to the latest version. We advise you to update when prompted (naturally, not when you are in the middle something that you don't want interrupted).
-
-You can find detailed information about VSCode at the [VSCode web site](https://code.visualstudio.com/docs).
diff --git a/VSCodeTips/assets/27807986-f1f76762-6044-11e7-831d-dd2a6551f027.PNG b/VSCodeTips/assets/27807986-f1f76762-6044-11e7-831d-dd2a6551f027.PNG
deleted file mode 100644
index f6bb34e60..000000000
Binary files a/VSCodeTips/assets/27807986-f1f76762-6044-11e7-831d-dd2a6551f027.PNG and /dev/null differ
diff --git a/VSCodeTips/assets/27807987-f1fa8406-6044-11e7-8284-b51cd1251921.PNG b/VSCodeTips/assets/27807987-f1fa8406-6044-11e7-8284-b51cd1251921.PNG
deleted file mode 100644
index 407df8051..000000000
Binary files a/VSCodeTips/assets/27807987-f1fa8406-6044-11e7-8284-b51cd1251921.PNG and /dev/null differ
diff --git a/VSCodeTips/assets/27809404-94afa762-604f-11e7-9d77-0d590bfccc19.png b/VSCodeTips/assets/27809404-94afa762-604f-11e7-9d77-0d590bfccc19.png
deleted file mode 100644
index eab70baba..000000000
Binary files a/VSCodeTips/assets/27809404-94afa762-604f-11e7-9d77-0d590bfccc19.png and /dev/null differ
diff --git a/VSCodeTips/assets/27809813-64ae6c98-6053-11e7-8b6c-2bec3400ccd3.PNG b/VSCodeTips/assets/27809813-64ae6c98-6053-11e7-8b6c-2bec3400ccd3.PNG
deleted file mode 100644
index a5d9324dd..000000000
Binary files a/VSCodeTips/assets/27809813-64ae6c98-6053-11e7-8b6c-2bec3400ccd3.PNG and /dev/null differ
diff --git a/VSCodeTips/assets/27810425-592063d4-605a-11e7-9e29-dfb02f1aed22.png b/VSCodeTips/assets/27810425-592063d4-605a-11e7-9e29-dfb02f1aed22.png
deleted file mode 100644
index e2a193c6a..000000000
Binary files a/VSCodeTips/assets/27810425-592063d4-605a-11e7-9e29-dfb02f1aed22.png and /dev/null differ
diff --git a/VSCodeTips/assets/27833250-393c5a82-60d2-11e7-8713-648ec54abbed.png b/VSCodeTips/assets/27833250-393c5a82-60d2-11e7-8713-648ec54abbed.png
deleted file mode 100644
index 7afa7a8a8..000000000
Binary files a/VSCodeTips/assets/27833250-393c5a82-60d2-11e7-8713-648ec54abbed.png and /dev/null differ
diff --git a/VSCodeTips/assets/27833256-3d44da32-60d2-11e7-8f34-0bc0579a10c3.png b/VSCodeTips/assets/27833256-3d44da32-60d2-11e7-8f34-0bc0579a10c3.png
deleted file mode 100644
index 6018dcb0c..000000000
Binary files a/VSCodeTips/assets/27833256-3d44da32-60d2-11e7-8f34-0bc0579a10c3.png and /dev/null differ
diff --git a/VSCodeTips/assets/27833921-189a16f4-60d5-11e7-87ee-996cf97921ac.png b/VSCodeTips/assets/27833921-189a16f4-60d5-11e7-87ee-996cf97921ac.png
deleted file mode 100644
index d6c6cb770..000000000
Binary files a/VSCodeTips/assets/27833921-189a16f4-60d5-11e7-87ee-996cf97921ac.png and /dev/null differ
diff --git a/VSCodeTips/assets/27857540-5db15d4a-6172-11e7-953f-347c592b4e4f.png b/VSCodeTips/assets/27857540-5db15d4a-6172-11e7-953f-347c592b4e4f.png
deleted file mode 100644
index 01747d7c9..000000000
Binary files a/VSCodeTips/assets/27857540-5db15d4a-6172-11e7-953f-347c592b4e4f.png and /dev/null differ
diff --git a/Week0/README.md b/Week0/README.md
deleted file mode 100644
index 829795be4..000000000
--- a/Week0/README.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Reading material for your first JavaScript lesson:
-
-```
-In week one we will discuss the following topics:
-• Git
-```
-
-### Here are resources that we like you to read as a preparation for the coming lecture.
-
-- In you next lecture **Unmesh** will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals.
-- Please watch [Up Running with Bash Scripting](https://www.lynda.com/Bash-tutorials/Up-Running-Bash-Scripting/142989-2.html)
-as a recap on the cli classes you have had (1 hour and 25 min).
-- Please watch the first 5 chapters of the [Git essential training](https://www.lynda.com/Git-tutorials/Git-Essential-Training/100222-2.html)
diff --git a/Week1/.DS_Store b/Week1/.DS_Store
new file mode 100644
index 000000000..0e98056ea
Binary files /dev/null and b/Week1/.DS_Store differ
diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md
new file mode 100644
index 000000000..66ffd2359
--- /dev/null
+++ b/Week1/LESSONPLAN.md
@@ -0,0 +1,276 @@
+# Lesson Plan JavaScript1 Week 1
+
+## Agenda
+
+The purpose of this class is to introduce to the student:
+
+- The 2 types of websites: static vs. dynamic
+- The pillars of web development: HTML/CSS/JavaScript
+ - where JavaScript can run: Browser / Node
+- What are variables
+- How to name variables properly
+- What are the basic data types
+- What are the compound data types
+
+## Core concepts
+
+_FIRST HALF (12.00 - 13.30)_
+
+## 1. The 2 types of websites: static vs. dynamic
+
+### Explanation
+
+Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS
+Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code.
+
+### Example
+
+Examples the two different kind of websites
+
+- Static: https://www.atlassian.com/time-wasting-at-work-infographic
+- Dynamic: https://www.facebook.com/
+
+### Exercise
+
+Discuss in class which claim belongs to which type of website:
+
+- Content of Web pages can not be change at runtime.
+- Server side languages such as PHP, Node.js are used.
+- Content of Web pages can be changed.
+- No interaction with database possible.
+- Interaction with database is possible
+- It is faster to load as compared to the other typ of website.
+- It is slower then static website.
+- Lower Development costs.
+- Content may change every time the page is loaded.
+- Feature of Content Management System.
+- HTML, CSS, Javascript is used for developing the website.
+- Same content is delivered every time the page is loaded.
+
+### Essence
+
+[In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php)
+
+ Static:
+ Advantage:
+ - Flexible
+ - Cheaper
+ Disadvantages:
+ - not updating content
+ - Scalability
+
+ Dynamic:
+ Advantage:
+ - Easy to pull in data on stuctured and organised way
+ - Content management system
+ Disadvantage:
+ - Design is more fixed, because the pages are more of a template
+ - Costs
+
+## 2. The pillars of web development: HTML/CSS/JavaScript
+
+### Explanation
+
+- HTML defines what the content is.
+- CSS defines the appearance of the page.
+- JavaScript defines behavior of the page.
+- Where can JavaScript run:
+ - browser
+ - Node
+
+### Example
+
+- An example about relationship between HTML, CSS and Javascript using a metaphor of building a city: https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/
+
+### Exercise
+
+Let students fork and then clone the repository.
+Let students create a classwork directory and create an index.html along with an app.js. Script tag should be added to the end of body tag(reason for doing so is part of JS2 Week1).
+
+The end result should look like:
+
+```
+- js1-week1-classwork
+ - index.html
+ - app.js
+```
+
+### Essence
+
+Up until now at HackYourFuture, we have been writing websites using HTML and CSS. Even though a website written with these two languages works just fine, it is only a static page.
+
+These static pages can interact with a visitor only through the use of forms. Once a form is filled out and submitted, a request is sent back to the server where a new static web page is constructed and eventually downloaded into the browser.
+
+A big disadvantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load.
+
+It doesn't exhibit any dynamic behavior like:
+
+1. reacting to user actions such as mouse click events or key presses.
+2. rendering complex animations
+3. sending requests over network to servers and fetching a response
+4. and this is where JavaScript steps in.
+
+## 3. What are variables (const & let) & naming conventions
+
+### Explanation
+
+In JavaScript, there are three ways of creating variables.
+
+- var
+- let
+- const
+
+While `var` has been used in JavaScript for a long period of time, `let` and `const` are recent additions having been introduced in ES6.
+
+Three different stages of working with variables are:
+
+- Variable Declaration
+ - Declaration means creating a variable and providing it with a name. During the whole program, a variable can be declared only once.
+- Variable Initialization
+ - Initialization is declaring a variable and assigning it an initial value at the time of declaration. By default, all variables created in JavaScript have undefined as the default value unless explicitly given a different value.
+- Variable (Re)Assignment
+ - Variable assignment means throwing away the old value of a variable and replacing it with a new one. Initialization can be thought of as a special way of assignment.
+
+https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md
+
+### Example
+
+```javascript
+// Variable Declaration
+var firstName;
+let lastName;
+const age; // is this correct???
+
+console.log(firstName);
+console.log(lastName);
+console.log(age);
+```
+
+```javascript
+// Variable Initialization
+
+var firstName = "Yash";
+let lastName = "Kapila";
+
+const age = 29;
+
+console.log(firstName);
+console.log(lastName);
+console.log(age);
+```
+
+```javascript
+var firstName = "Tom";
+let lastName = "Hanks";
+
+console.log(firstName);
+console.log(lastName);
+
+// Assigning variables to a different value
+firstName = "Hanks";
+lastName = "Tom";
+
+console.log(firstName);
+console.log(lastName);
+```
+
+### Exercise
+
+1. Create 2 variables using the `let` keyword
+
+ - make 1 variable contain your first name
+ - the second variable should have no value assigned
+
+1. Make 2 variables using the `const` keyword
+ - the first variable should contain the city you currently stay at
+ - come up with name and a value for the second variable yourself
+
+
+### Essence
+
+Any application written in any programming language requires data or information to work with. This information can be as simple as a string, number or complex types like a list of strings, a mix of strings and numbers etc.
+
+For example, your name and age are simple pieces of information, a string and a number respectively. On the other hand, your house address could be considered as a complex set of information including house number, street name, city, postcode and country.
+
+Variables are simply named storage/pointer for this information.
+
+_SECOND HALF (14.00 - 16.00)_
+
+## 4. The basic data types (string, boolean, number, undefined, null)
+
+### Explanation
+
+In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: `string`, `number`, `bigint`, `boolean`, `null`, `undefined`, and `symbol`.
+
+Boolean — true or false
+Null — no value
+Undefined — a declared variable but hasn’t been given a value
+Number — integers, floats, etc
+String — an array of characters i.e words
+Symbol — a unique value that's not equal to any other value (not used during HYF)
+
+### Example
+
+- `string`, e.g. "HackYourFuture"
+- `number`, e.g. 5, or 10.6
+- `boolean`, e.g. `true` or `false`
+- `array`, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
+- `null` \*
+- `undefined` \*
+- `symbol` e.g. `new Symbol('example')`
+
+\* The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined".
+Whenever you declare a variable (using `let`), but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it.
+
+### Exercise
+
+
+Everybody has four minutes to find a way to store all basic data types in a variable by making use of the typeof operator:
+
+```js
+let x = 5;
+let typeOfX = typeof x; // -> "number"
+```
+
+### Essence
+
+In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/
+
+## 5. The compound data types (object, array)
+
+### Explanation
+
+Pieces of information often form a group. For example the names of all the students in this class can be grouped together
+as a list. In JavaScript lists are stored in a datatype called an `Array`.
+
+Another way pieces of information can form a group are multiple properties of the same thing. For example the dimensions
+of this room: length, width, height. These groups of information are stored in a datatype called an `Object`.
+
+### Example
+
+- `array`\*, e.g. `[1, 2, 3]` or `['Gijs', 'Jim', 'Noer', 'Wouter']`
+- `object`, e.g. `{name: 'Wilgert', shoeSize: 42}`, or the special object `null`
+
+### Exercise
+
+1. Create a list of your favorite types of food/dishes like this:
+
+```js
+const foods = ['Chocolate', 'Risotto', 'Tuna melt'];
+```
+
+2. Create an object that contains the properties of your town/city like this:
+
+```js
+const city = {
+ name: 'Huizen',
+ province: 'Noord-Holland',
+ population: 50000,
+ capital: false,
+};
+```
+
+### Essence
+
+- Object key: value
+- Array numeric index: value
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
index 5c3fa05a5..9b5330f0f 100644
--- a/Week1/MAKEME.md
+++ b/Week1/MAKEME.md
@@ -1,46 +1,205 @@
-## Homework week 1:
+# Homework JavaScript1 Week 1
+## **Todo list**
+
+1. Practice the concepts
+2. JavaScript exercises
+3. Code along
+
+## **1. Practice the concepts**
+
+Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself.
+
+In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems:
+
+- [Learn-js](https://www.learn-js.org/). Do all the `Learn the basics` exercises.
+- [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do all the exercises (#1 to #10).
+- [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). Do at least 20 exercises, you can choose whichever ones you feel are challenging enough.
+
+## **2. JavaScript exercises**
+
+> Inside of your `JavaScript1` fork and inside of the `Week1` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (10 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `logHello.js`.
+
+> In each file, start off with the string `'use strict'`. This will make sure the code interpreter will enforce stronger rules when looking at your code.
+
+> Before starting, make sure you have [Node.js](https://nodejs.org/en/download/) installed on your computer. You'll use this to execute your code to check if it works.
+
+**Exercise 1: Hello world!**
+
+Write a statement, using the `console.log()` function. It should fulfill the following requirements:
+
+- It takes a string as an argument
+- The string should contain the message `"Hello world!"`
+- Execute the function 10 times, each time using the phrase in different languages
+
+For example:
+
+```
+Halo, dunia! // Indonesian
+Ciao, mondo! // Italian
+Hola, mundo! // Spanish
```
-Topics discussed in class this week:
-• Git
+
+Finished? Using the command line, navigate to your `js-exercises` folder and type in the following to test your code:
+
+```console
+foo@bar:~$ node FILENAME.js
+```
+
+Expected output: It should show the message `Hello world!` in 10 different languages.
+
+**Exercise 2: Error debugging**
+
+Consider the following code:
+
+```js
+console.log('I'm awesome'!;
+```
+
+Here are the requirements:
+
+- Copy the code in your `.js` file and run it in the command line using `node`.
+
+You will see that you will get a [SyntaxError](https://techterms.com/definition/syntax_error).
+
+- **Correct the mistake**.
+
+> Hint: the SyntaxError message will give you some indication of what the error _might_ be, but figure out yourself how to correct it!
+
+Expected output: When done right, the command line should show the message `I'm awesome!`.
+
+**Exercise 3: Log the number**
+
+Follow the steps. Make sure that each step is written on the line after.
+
+1. First, declare your variable `numberX`. Do not _initialize_ it (which means, don't give it a starting value) yet
+2. Add a `console.log` statement that explains in words _what you think_ the value of `x` is
+3. Add a `console.log` statement that logs the value of `numberX`.
+4. Now _initialize_ your variable `numberX` with a number (also called an `integer` in computer science terms)
+5. Next, add a `console.log` statement that explains _what you think_ the value of `numberX` is
+6. Add a `console.log` statement that logs the value of `numberX`
+
+**Exercise 4: Log the string**
+
+Follow the steps. Make sure that each step is written on the line after.
+
+1. Declare a variable `myString` and assign a string to it. Use your full name, including spaces, as the content for the string.
+2. Write a `console.log` statement in which you explain in words _what you think_ the value of the string is.
+3. Now `console.log` the variable `myString`.
+4. Now reassign to the variable `myString` a new string.
+5. Just like what you did before write a `console.log` statement that explains in words _what you think_ will be logged to the console.
+6. Now console.log `myString` again.
+
+**Exercise 5: Round a number and log it**
+
+Follow the steps. Make sure that each step is written on the line after.
+
+1. Declare a variable `z` and assign the number `7.25` to it.
+2. Write a `console.log` statement in which you log the value of `z`.
+3. Declare another variable `a` that has the value of `z` but rounded to the nearest integer.
+4. Write a `console.log` statement in which you log the value of `a`.
+5. So now we have `z` and `a` find a way to compare the two values and store the highest of the two in a new variable.
+6. Write a `console.log` statement in which you log the value of the highest value.
+
+**Exercise 6: Log an array of animals**
+
+Follow the steps. Make sure that each step is written on the line after.
+
+1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example `items` instead of `item`.
+2. Write a `console.log` statement that explains in words _what you think_ the value of the array is.
+3. Write a `console.log` statement that logs the array.
+4. Create a new variable with an array that has 3 of your favorite animals, each in a different string. Make sure the name of the variables says something about what the variable contains.
+5. Write a `console.log` statement that logs the second array.
+6. Add a statement that adds another string ("Piglet)" to the array of animals.
+7. Write a `console.log` statement that logs the second array!
+
+**Exercise 7: Log the length of a string**
+
+Follow the steps. Make sure that each step is written on the line after.
+
+1. Declare a variable called `mySentence` and initialize it with the following string: "Programming is so interesting!".
+2. Figure out (using Google) how to get the length of `mySentence`.
+3. Write a `console.log` statement to log the length of `mySentence`.
+
+**Exercise 8: Type checker**
+
+Create a `function` that fulfills the following requirements:
+
+- Takes in 2 arguments
+- Check the data type of each
+- Compares each data type
+- Logs to the console the message `SAME TYPE` if they are the same type. If they are different types log `Not the same...`.
+
+Follow the steps:
+
+1. Declare 4 variables: 2 must be `strings` and 2 must be `objects`
+2. Create 6 conditional statements, where for each you check if the data type of one variable is the same as the other
+3. Find out how to check the type of a variable
+4. Write 2 `console.log` statements to log the type of 2 variables, each with a different data type
+5. Now compare the types of your different variables with one another
+6. Log `Not the same...` when the types are different
+
+Here's an incomplete example of how it could look:
+
+```js
+// Declare all variables
+let x = 9;
+let y = 67;
+
+// Check data type
+console.log(...);
+
+// Check if data type is the same
+if (...) {
+ console.log('SAME TYPE');
+}
```
->[Here](/Week1/README.md) you find the readings you have to complete before the fifth lecture.
+**Exercise 9: Log the remainder**
-## Step 1: Share a useful resource
+Answer the following questions. For each, write in comments what the answer is followed by how you came to that conclusion:
+
+1. If `x` equals 7, and the only other statement is `x = x % 3`, what would be the value of `x` after the calculation?
+2. If `y` equals 21, and the only other statement is `y = y % 4`, what would be the value of `y` after the calculation?
+3. If `z` equals 13, and the only other statement is `z = z % 2`, what would be the value of `z` after the calculation?
+
+**Exercise 10: Compare arrays**
+
+Follow the steps:
+
+1. Declare 2 variables, that each hold an array. The first array should have 4 items, the second 7 items
+2. Find out how to get the length of each array. Write a `console.log` statement that shows the length of each array
+
+```js
+const array = ["hello", 123, true, { name: "Noer" }];
+
+console.log('The length of the array is...' + ...);
+```
-_Deadline Monday_
+3. Write a conditional statement that checks if both are of equal length. If they are, log to the console `They are the same!`, if not log `Two different sizes`
-All share a video or a resource (this can be a drawing, article or a pod cast) that was helpful for you the last few weeks with learning JavaScript. Please share this in the channel of your class in Slack. Also write as small note about what the resource i about and why you think it's so helpful (you can share more than one if you like).
+## **3. Code along**
-## Step 2: Feedback
+> Create a new GitHub repository for this project. It's a portfolio piece!
-_Deadline Monday_
+We don't want to lose the connection with HTML/CSS, so in the following tutorial you'll learn how to build a simple web application use HTML/CSS and JavaScript.
-Give one of your fellow students in Github feedback about their homework of the previous week: create an issue in their repo, telling them what they did great and what they can improve.
+You'll first write the HTML and CSS, to provide structure and style to the page. When doing so, notice how the developer chooses to do this. Why do they use this tag instead of something else? Why do they give an element a certain class name?
-Step3
+After, the developer will write JavaScript code. You'll notice it's different from how you've used JavaScript. It is something we call **DOM Manipulation**. Don't worry, you don't need to master this just yet. Just follow along and do some research yourself if you already want to learn more about it!
-## Step 3: Git homework
+- [Calculator](https://www.youtube.com/watch?v=6v4vBXL-qkY)
-_Deadline Wednesday_
+## **SUBMIT YOUR HOMEWORK!**
-Git homework for this week:
+After you've finished your todo list it's time to show us what you got! Starting from this week you'll be submitting all your homework through GitHub. What you'll be doing is upload all your files to a separate repository.
-Pair up with another student in your class. The homework requires two people to work together. Let us call them admin and user.
+Go over to [HackYourHomework/JavaScript1](https://www.github.com/HackYourHomework/JavaScript1). Notice how it's **HackYourHomework**, a repository meant to submit the homework!
-1. admin creates a new repository on github called “animals” (without quotes).
-2. admin adds a file called “zoo.txt” with some animal generally found in a zoo.
-3. admin commits and pushes his changes (in master branch)
-4. admin adds user as a collaborator (find out how to add a collaborator to a git repository)
-5. user clones a repository from admin (find out how to clone a repository. Note that `git init` is not required when you clone a repository)
-6. user makes a new branch called user-dev
-7. user adds another file called “pets.txt” with some animals generally found in a home.
-8. user commits and pushes his branch to remote
-9. admin pulls the branch crated by user (find out how to pull changes from the repository)
-10. admin submits the link to his github repository (named animal), where unmesh should be able to see the collaborator’s (i.e. user’s) branch along with his commits.
+Then take a look at the following [guide](../hand-in-homework-guide.md) to see to set everything up.
-Note:
+The homework that needs to be submitted is the following:
-The *user* is *not supposed to fork* the admin’s repository. *admin* is supposed to add user as a collaborator and *user* should just *clone* the repository (i.e. *user* will only have the local copy of the repository). Only *admin* will have the *github* server copy of the repository. Of course, admin will have its local copy of the repository too.
+1. JavaScript exercises
+_Deadline Saturday 23.59 CET_
diff --git a/Week1/README.md b/Week1/README.md
index 6946d5257..bbcac17ac 100644
--- a/Week1/README.md
+++ b/Week1/README.md
@@ -1,37 +1,199 @@
-# Reading material for the second lecture:
+# Reading Material JavaScript1 Week 1
+## Agenda
+
+These are the topics for week 1:
+
+1. What is programming?
+ - Software
+ - What is a programming language?
+2. What is web development?
+ - Web development vs. software development
+ - Web development vs. web design
+ - Website vs. web application
+3. What is JavaScript?
+4. What are variables?
+ - The keywords: let, const, var
+ - values
+5. What are data types?
+ - 6 basic types
+
+## 0. Video Lectures
+
+Your teacher Uday has made video lectures for this week's material. You can find them here: [Videos 1 - 10](https://www.youtube.com/playlist?list=PLVYDhqbgYpYUiqH8IxLJ5qomkEGMzes1q)
+
+
+
+## 1. What is programming?
+
+Programming is giving a computer instructions written in a language it can understand, in order to solve a problem you (or the company you work for) have. We don't necessarily need computers to solve problems, but we use them because they provide several benefits:
+
+1. They are fast
+2. Cheap to use
+3. Can work 24/7 (as long as it has power)
+
+This is important to note: a computer is a `tool` we use to make our lives easier.
+
+- [What is a Computer?](https://www.youtube.com/watch?v=rRSD128KWIM)
+- [What Do Computers Do?](https://www.youtube.com/watch?v=92TaQRBwPSs)
+
+In order to use this tool, we need to talk to it in a way it understands (programming language) and give it commands on what to do (the act of programming). However, despite the power a computer has it is not very smart. It can't do anything without being told **exactly** what it needs to do to solve a problem, step-by-step. This is why we learn how to program: in order to tell the computer to do what we want it to do.
+
+Go through the following resources to learn more about what programming is:
+
+- [What is programming?](https://www.youtube.com/watch?v=3tWMQ3ZMjbg)
+- [What do programmers do?](https://www.youtube.com/watch?v=kEjCfsrotAM)
+- [Introduction into programming Playlist](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZYJC7L-r6rX6utt6wwJCyi)
+
+### Software
+
+As a software developer (synonym to 'programmer' or 'software engineer'), you will write these instructions in order to create 'software'. Look at the following video to get a better idea of what software is:
+
+- [What is software?](https://www.youtube.com/watch?v=MSA3WsGeTNI)
+
+### What is a programming language?
+
+Programming is done using a programming language. Why do we need a language to communicate with the computer? At its most basic level, a computer operates based on 0's and 1's: the 0 means 'off', and the 1 means 'on' (think of it like a light switch that either turns the light on or off).
+
+Smart people decided to make working with this easier to understand, so that a lot of people can more simply communicate with a computer. This is how the development of programming languages started: by defining a vocabulary, grammar and syntax to put more organization to the 0's and 1's, we can more simply communicate exactly what we want to computer to do.
+
+- [What is a programming language?](https://www.youtube.com/watch?v=EGQh5SZctaE)
+- [What are programming languages](https://hackr.io/blog/what-is-programming-language)
+
+There are various languages, each made to fulfill a certain need. For example, Microsoft developed a language called [C#](https://www.youtube.com/watch?v=paJUbVeKEOU) in order to make applications for computers that run a Windows operating system. The language of C# is able to easily "talk" with the preexisting software.
+
+You will be learning JavaScript, a language that has been made to "talk" to web browsers (Google Chrome, Mozilla Firefox, Safari, Internet Explorer, etc.).
+
+Read the following article to learn more about different languages and their uses:
+
+- [14 Programming Languages Explained](https://mikkegoes.com/14-programming-languages-explained/)
+
+## 1. What is web development?
+
+In HackYourFuture we focus on `web programmming` (also known as `web development`): writing code that creates websites and web applications. Look at the following video to learn about what you'll be doing:
+
+- [What does a web developer do?](https://www.youtube.com/watch?v=GEfuOMzRgXo)
+
+## Web development vs. software development
+
+The field of programming is broad. As a software developer (a general term for anyone that writes code to create software) there are several career paths you might take. The following are some of the biggest:
+
+1. **Web**. Developing websites and web applications to be accessed and used in the browser
+2. **Mobile**. This refers mostly to Android and iOS application development
+3. **Desktop**. Every application on your computer has been made by desktop developers
+4. **Data science**. Writing custom programs to extract patterns from big piles of data is what this developer does
+5. **Gaming**. Game developers work with a variety of designers, artists and testers to realize a video game
+6. **Quality Assurance**. Applications need to be tested, and these developers write tests that check for the correct working of any piece of code
+
+Read the following article to read more about different career paths:
+
+- [Software Development Career Paths](https://simpleprogrammer.com/software-development-career-paths/#title-career-developer-options)
+
+Note: once you've chosen a certain track it doesn't mean you can't try out any other! If anything, you are encouraged to explore and see what fits your taste, while building your career :)
+
+### Web development vs. web design
+
+You might have heard these terms used interchangeably. They are, however, two different things. A web developer writes code and handles the logical, technical side. A web designer decides how things are going to look and handles the creative side. The following video will explain this more clearly:
+
+[Web Developer vs. Web Designer](https://www.youtube.com/watch?v=bDtxF7qSofg)
+
+### Websites vs. web applications
+
+Before we get started with the meat of the module (which is JavaScript), we need to make a small but important distinction: are we going to make websites or web applications? For non-developers, there is no difference but for you as a developer you must know what it is that you'll be producing.
+
+The difference between a website and a web application is the difference between [Wikipedia](https://www.wikipedia.org) and [Facebook](https://wwww.facebook.com). In Facebook, the data shown changes depending on the user. If you are logged in, you'll see different things than that I will. However, on Wikipedia the information will always be the same, for both you and me.
+
+In other words, we're talking about `static`(= website) versus `dynamic` (= application) sites: a static site always has the same information and serves only to be information, while a dynamic site changes the data shown to the user depending on who it is and what their interactivity on the page is.
+
+Read the following articles to learn more about this:
+
+- [Website vs. Web Application](https://www.seguetech.com/website-vs-web-application-whats-the-difference/)
+- [Static vs. dynamic websites](https://www.youtube.com/watch?v=4sP7fp3cp24)
+
+## 3. What is JavaScript?
+
+JavaScript is a programming language. We use it to communicate with the browser, software that allows us to access the Internet and open webpages. It is essential to learn in order to become a web developer.
+
+You've already learned what HTML and CSS do. Javascript is the third part that makes the circle complete. If we liken the three to the human body, we could say that HTML provides the skeleton with all the basic content, CSS makes the skin/shape to determine the look, and JavaScript is the brain and muscles to allow for interactivity.
+
+
+
+The main use for JavaScript is to make your webpage interactive: for example, if you click a button it will open a popup. Or if you scroll over an image, it changes its color.
+
+Check the following resources to learn more about it:
+
+- [What is JavaScript?](https://www.youtube.com/watch?v=nItSSTwBvSU)
+- [What does JavaScript do and what is it used for?](https://www.youtube.com/watch?v=OSWppEa2Zac)
+
+## 4. What are variables?
+
+A `variable` is a box that contains a piece of information, to be saved for later use. You give it a name that describes what its contents are, and to also refer to it at a later point.
+
+- [Beginner Programming Concepts - What's a Variable?
+ ](https://www.youtube.com/watch?v=Jvrszgiexg0)
+
+### The keywords: let, const, var
+
+The concept of a `variable` is a central concept within programming. It's applied the same way across almost all programming languages. In JavaScript we apply it by using a special `keyword`, a word that is reserved by the language because it has a special meaning.
+
+The keywords are `var`, `let` and `const`.
+
+Read more about this in the following article:
+
+- [Variables](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md)
+
+A variable always contains a `value`: the piece of information that you want to save and refer to at a later stage. Read more about this here:
+
+- [Values](https://www.github.com/hackyourfuture/fundamentals/blob/master/fundamentals/values.md)
+
+When creating variables, it's important to think about the right name to give it. It should always reflect what "type" of data it contains and what its purpose is. You (and other developers that will read your code) should be able to read a variable name and know what its purpose is.
+
+Why do we need variables? You'll be using variables **to manipulate its content** (the value inside the variable). Why would you want to do this? For most of the time, you want to perform some kind of calculation. The most basic example is the following:
+
+```js
+const one = 1;
+const two = one + one;
```
-In week two we will discuss the following topics:
-• Intro JavaScript (What is it, where can you use it for)
-• Variables [var, let, const]
-• Basic Data types [Strings, Numbers, Arrays, Booleans]
-• Operators
-• Naming conventions
-```
-## How to get started
-1. Download and install the *LTS* version of NodeJS - https://nodejs.org/en/download/
-To test that it was installed and running properly, go to your terminal and run the command: node -v You should get the node version printed on your terminal, for example, v8.9.1
-2. Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free VSCode editor, which is supported on Windows, Mac and Linux. Please refer to our [VSCode Tips](../VSCodeTips/README.md) for more information.
+Here we have assigned to a new variable the calculation `one` plus `one`. Why have we put the end result into a new variable? It is because the result of the calculation will **not be remembered** later. Memory works differently in computers: after a calculation is finished a computer thinks its job is done. The result will not exist after, unless explicitly captured within a variable.
+
+This is something that you will learn when you start coding yourself. If you can't wait you can already look at the [homework](./MAKEME.md).
+
+## 5. What are data types?
+
+A data type is a category of data. It tells the code interpreter what kind of data it is reading so it knows how to process and optimally store it in memory.
+
+An example of this is the `Number` type. In most programming languages, when it reads the number `2` it doesn't know that it's a number. It needs to be told that the character `2` is of the `Number` data type.
+
+## 6 Basic types
+
+There are about `6 basic data types` in JavaScript:
+
+- `String`
+- `Number`
+- `Boolean`
+- `Object`
+- `Array`
+- `Function`
-## Here are resources that we like you to read as a preparation for the coming lecture:
+A data type, or data structure, is a way of organizing information. Computers need to know how to look at any piece of information, and it can interpret it only if it fits into one of the aforementioned data types.
-Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs):
+You can read more about them in the following article:
-Only watch the below chapters:
+- [JavaScript Data Types](https://www.tutorialrepublic.com/javascript-tutorial/javascript-data-types.php)
+- [JS Data Types](https://www.w3schools.com/js/js_datatypes.asp)
+- [Variables & Data Types](https://www.youtube.com/watch?v=Hrd3SfCCXZw)
-0. Introduction
-1. Programming Basics
-2. Core Programming Syntax
-3. Variables and Data Types
+Why do you need to know this? Again, this goes back to computers not being very smart: it needs to know **exactly** how to look at things, what to do with it and in what order.
-- Read this ~ http://speakingjs.com/es5/ch01.html read up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class)
+In JavaScript, the data types allow us to store various types of information, and perform manipulations on them. You'll learn more about them at a later stage.
-- Read the entire JavaScript Introduction at MDN~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
+## Extra resources
-- Helpful resource: http://jsbooks.revolunet.com/ (here you can find tons of free JavaScript books online)
+If you feel like you need more information to fill in the gaps of your understanding, check out the following resources to learn more about the basics of JavaScript:
-:star: You can also already go through the [review](/Week2/REVIEW.md) of the upcoming lecture. :star:
+- [Introduction to JavaScript Development](https://www.udemy.com/refactoru-intro-js)
-_Please go through the material and come to class prepared!_
+## Finished?
+Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md).
diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md
deleted file mode 100644
index 31ea60ec2..000000000
--- a/Week1/REVIEW.md
+++ /dev/null
@@ -1,332 +0,0 @@
-# REVIEW JavaScript Basics week 1
-
-```
-This review covers:
-• some commands taught by Unmesh in class today
-• Intro JavaScript (What is it, where can you use it for)
-• Variables [var, let, const]
-• Basic Data types [Strings, Numbers, Arrays]
-• Operators
-```
-
-## CLI
-```
-pwd : present working directory
-ls : List files in the directory
-cd : change the directory
-touch: Create an empty file
-echo : display the string
-echo -n : Display the string without newline
-echo “something” > file : Redirect the output of echo and create file
-echo “another thing” >> file : Append the string to the file
-mkdir: make a new directory
-cd ~ : home
-cd - : previous directory
-cd .. : parent directory
-ls -a : List all files including hidden files
-cd / : change to the root directory
-cat : Concatenate the file line by line and display it on the terminal
-less: Print the big file line by line
-vim : open the editor with {a: to go to the insert mode, :wq to write and quit }
-for var in {START..END}; do ; ;..; ; done
-head : display the first 10 lines of file
-tail : display the last 10 lines of file
-head -n : display first n lines of file
-tail -n : display last n lines of file
-man : Display manual of the COMMAND
-```
-
-:star: Highly recommended :star: :take a look at the Command Line [repository](https://github.com/HackYourFuture/CommandLine) and especially review the preparations of the first lecture: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md
-
-## Variables
-
-A "variable" is a place where you can store information, such as a string, or a number. A variable has a _name_ (that you choose) and a _value_. New variables in JavaScript are declared using one of three keywords: `let`, `const`, or `var`.
-
-> Think of variables names like **labels** on boxes, while the value of the variable are the **contents** of the box - you could change the contents of a box and leave the label intact, the contents of the boxes can have different types, the boxes should have good labels (a box of books being labeled pens would be very confusing),
->
-
-> Photo from [Khan Academy](http://cs-blog.khanacademy.org/2013/09/teaching-variables-analogies-and.html)
-
-
-### Variable declaration
-
-Variables are "declared" using the `var`, `let` or `const` keyword. In the following example three variables are declared with the names `x`, `foo` and `bar`.
-
-```js
-var x;
-let foo;
-const bar;
-```
-
-Note that the chosen names in this example are meaningless (perhaps with the exception of `x`, for instance as part of a mathematical program). You should make an effort to always choose names that best describe what you intend this variable to hold.
-
-### var
-
-Prior to JavaScript ES6 the `var` keyword was the only way to declare a variable. ES6 introduced two new keywords, `let` and `const` for declaring variables. They improve on how the older `var` declaration works (this involves the concept of "scope" that you will learn about in the third lecture). In HackYourFuture we encourage you to use the more modern `let` and `const` keywords over `var`, but you will often come across `var` in existing books, software libraries and examples on the Internet, so you should understand `var` too.
-
-### let and const
-- read about [let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
-- read about [const](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/const)
-- [let vs const] (http://wesbos.com/let-vs-const/)
-
-Here, we say: "declare variable x and initialize it with the integer (number) 6".
-
-```js
-let foo; // declare variable `foo`
-```
-
-```js
-let foo = 6; // declare and assign a variable at the same time
-```
-
-You can also assign a value to an existing variable:
-```js
-foo = 4; // change variable `foo`
-```
-
-
-## Value types
-
-Values are the "things" that you assign to a variable. All values have a type. In our example above, the variable `x` is assigned a value of type `number`. JavaScript supports the following types:
-
-* `string`, e.g. "HackYourFuture"
-* `number`, e.g. 5, or 10.6
-* `boolean`, e.g. `true` or `false`
-* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
-* `object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
-* `function`, e.g. `function () { return 4; }`
-* `symbol`
-* `undefined`
-
-If you declare a variable without specifying its value, then, by default its value is `undefined`.
-
-To get the type of a value assigned to a variable, use the following code:
-
-```js
-let x = 5;
-let typeOfX = typeof x; // -> 'number'
-```
-
-Note that I've put an asterisk behind 'array'. That is because in JavaScript, array is a special kind of object:
-
-```js
-let arr = [1, 2, 3];
-let typeOfArr = typeof arr; // -> 'object'
-```
-
-However, in practice we will call these variables arrays.
-
-### Null and undefined
-
-The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type `'object'`, and `undefined` always has type `'undefined'`.
-
-Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly assign it the value `null`.
-
-```js
-let x;
-console.log(typeof x); // -> 'undefined'
-```
-
-
-### `typeof` operator
-
-You can use the `typeof` operator to get the type of a certain variable as you have seen in the above section 'Value types'. As you can see in the following examples it returns the type of value that you have assigned to your variable.
-
-## Strings
-
-In JavaScript you can assign a series of characters to a variable, you then call this a string. You can use all sorts of characters (text/numbers, spaces or phrases) in strings. By using the `''` you define that something is a string. You can also use `""` to create a string. Both are fine as long as you are consistent (just make a choice on which one you prefer and stick to it).
-
-```js
-let foo = '42';
-typeof foo //-> 'string'
-
-let bar = 'I\'m 99 years old ';
-typeof bar //-> 'string'
-```
-
-### String indexes and string properties
-
-Individual characters in a string can be accessed by their position (index) within the string. The index of a string always starts at 0.
-Strings also have properties, for example `.length` you can use this to find the length of a string.
-
-So for example:
-```js
-let baz = 'Hello World';
-baz[0]; //-> "H"
-baz.length; //-> 11
-```
-
-### String methods
-
-String methods are named operations that you can use on string values to create new values. For example, the `toUpperCase` method creates a new string with all uppercase letters.
-
-```js
-let baz = 'Hello World!';
-baz.toUpperCase(); // -> 'HELLO WORLD'
-```
-
-Methods differ from properties (such as `.length`) in that you must always use them with open and close parentheses `(` and `)`.
-
-Some methods need additional information, and you must supply it in the form of one or more _parameters_. For example:
-
-```js
-let baz = 'Hello World!';
-baz.slice(3, 8) // -> 'lo Wo'
-baz.startsWith('He') // -> true
-baz.indexOf('World') // -> 6
-```
-
-## Numbers
-
-All numbers in JavaScript are considered numbers, either with or without a decimal.
-
-```js
-let quux = 42;
-typeof quux //-> 'number'
-
-let quuux = 3.3333;
-typeof quuux //-> 'number'
-
-```
-
-
-## Arrays
-
-Arrays are values that contain a list of things, instead of just one thing. What's inside the array, we typically call "elements". So, the array `[1, 2, 3]` has three elements. The array `[]` has no elements and is therefore empty. The number of elements in an array is called its "length".
-
-When you want to access an element inside an array, you use an "index". This is the number that you put between brackets (`[]`).
-
-Given the following code:
-
-```js
-let arr = ['john', 'jane', 'jack'];
-console.log(arr[0]);
-```
-
-The number `0` is the "index of the first element of array `arr`". Conversely, the element "at index 0 in array `arr` is `'john'`".
-
-Instead of a number, you can also use a variable to access elements in an array, *as long as this variable is a number*:
-
-```js
-let arr = ['john', 'jane', 'jack'];
-let a = 1;
-console.log(arr[a]); // -> jane
-```
-
-If the index you use is not an integer (a whole number), or if it's less than `0` or if it's greater than or equal to the array's length, you will get back `undefined`.
-
-More about [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
-
-## Operators
-
-### Comparison operators
-
->Note the two different uses of the equals sign:
-A single equals sign (=) is used to assign a value to a variable.
-A triple equals sign (===) is used to compare two values (see Equality Operators).
-
-#### Equality operators
-
-* Equality `==`
-* Inequality `!=`
-* Identity / strict equality `===` (preferred)
-* Non-identity / strict inequality `!==` (preferred)
-
-How does this work in practice?
-
-```js
-1 == 1 // -> true
-7 == '7' // -> true
-1 != 2 // -> true
-5 === 5 // -> true
-9 === '9' // -> false
-3 !== 3 // -> false
-3 !== '3' // -> true
-```
-
-> why does `7 == '7'` returns true and `9 === '9'` returns false?
-
-We strongly recommend that you always use the strict form when comparing for equality (`===`) or inequality (`!==`). Use the non-strict forms only when there is a compelling reason to do so (you will be hard pressed to find such a reason).
-
-#### Relational operators
-
-* Greater than operator `>`
-* Greater than or equal operator `>=`
-* Less than operator `<`
-* Less than or equal operator `<=`
-
-```js
-4 > 3 // -> true
-3 >= 3 // -> true
-13 < 12 // -> false
-3 <= 4 // -> true
-```
-
-More about [comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
-
-### Arithmetic operators
-
-* Addition `+`
-* Subtraction `-`
-* Multiplication `*`
-* Division `/`
-* Remainder (sometimes called modulo) `%`
- Returns the remainder left over after you've shared the left number out into a number of integer portions equal to the right number.
-
-```js
-8 + 9 // -> 17, adds two numbers together.
-20 - 12 // -> 8, subtracts the right number from the left.
-3 * 4 // -> 12, multiplies two numbers together.
-10 / 5 // -> 2, divides the left number by the right.
-8 % 3 /// -> 2, as three goes into 8 twice, leaving 2 left over.
-```
-
-More about [Arithmetic operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#.25_.28Modulus.29)
-
-### Logical operators
-
-* AND `&&`
-* OR `||`
-* NOT `!`
-
-Given that x = 6 and y = 3
-```js
-x < 10 && y > 1 // -> true
-x === 5 || y === 5 // -> false
-x !== y // -> true
-```
-
-Logical NOT
-
-```js
-true === !false
-false === !true
-```
-
-More about [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators)
-
-### typeof operator
-
-We already mentioned the `typeof` operator:
-
-```js
-typeof 5 // -> 'number'
-```
-
-### Assignment operators
-
-In addition to the simple assignment operator `=` there are also compound assignment operators such as `+=`. The following two assignments are equivalent:
-
-```js
-x += 1;
-x = x + 1;
-```
-
-|Operator| Example| Same As|
-|:------:|:--------:|:-------:|
-|`=` | `x = y` | `x = y`|
-|`+=`| `x += y` | `x = x + y`|
-|`-=`| `x -= y` | `x = x - y`|
-|`*=`| `x *= y` | `x = x * y`|
-|`/=`| `x /= y` | `x = x / y`|
-|`%=`| `x %= y` | `x = x % y`|
diff --git a/Week1/assets/box.png b/Week1/assets/box.png
deleted file mode 100644
index 872c80221..000000000
Binary files a/Week1/assets/box.png and /dev/null differ
diff --git a/Week1/resources/ASmarterWaytoLearnJavaScript.pdf b/Week1/resources/ASmarterWaytoLearnJavaScript.pdf
deleted file mode 100644
index d5f3554f6..000000000
Binary files a/Week1/resources/ASmarterWaytoLearnJavaScript.pdf and /dev/null differ
diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md
new file mode 100644
index 000000000..25a10f1eb
--- /dev/null
+++ b/Week2/LESSONPLAN.md
@@ -0,0 +1,262 @@
+# Lesson Plan JavaScript1 Week 2
+
+## Agenda
+
+The purpose of this class is to introduce to the student:
+
+- The difference between statements & expressions
+- What are operators
+- What are loops
+- What are conditional statements
+
+## Core concepts
+
+FIRST HALF (12.05 - 13.30)
+
+## 1. Q&A about last week's concepts & homework
+
+### Explanation
+
+- static vs. dynamic websites
+- Variables in JavaScript: `var`, `let`, `const`, declaration, initialization, assignment
+- Basic Data Types in JavaScript: `number`, `string`, `boolean`, `undefined`, `null`
+- Compound Data Types in JavaScript: `array`, `object`
+
+### Exercise
+
+Let the students explain the concepts themselves.
+
+## 2. The difference between statements & expressions
+
+### Explanation
+
+An expression is a piece of code that resolves to a value (becomes a value)
+
+A statement is an instruction
+
+### Example
+
+#### Expressions
+
+- `sum(a, b)`
+- `a`
+- `a > 4 ? "yes" : "no"`
+- `a + b`
+- `a && b || c`
+
+#### statements
+
+- `let x;`
+- `if (a > 4) { console.log("larger than 4"); } else { console.log("not larger than 4"); }`
+
+### Exercise
+
+#### Indicate for each of these whether it is an expression or a statement:
+
+1. `l`
+2. `l = 4;`
+3. `l == 4`
+4. `if (l == 4) { console.log("yes"); }`
+5. `console.log("yes");`
+6. `"yes"`
+7. `console.log(l == 4 ? "yes" : "no")`
+8. `function a() { return 4; }`
+9. `let a = function () { return 4; }`
+
+#### Given the following code:
+
+```js
+let s = 'Hello'.toLowerCase();
+let l = s.length;
+
+function sum(a, b) {
+ return a + b;
+}
+let max = function(a, b) {
+ return a > b ? a : b;
+};
+
+let s1 = sum(4, 5);
+let s2 = 4 + 5;
+
+if (s2 == s1) {
+ console.log('same');
+} else {
+ console.log('not same');
+}
+```
+
+List 5 statements from all 11 _statements_ in the code above
+
+List 5 expressions of all 28 _expressions_ in the code above (BONUS!)
+
+### Essence
+
+It's important to know the difference between expressions and statement because:
+
+1. It will give you an overview on what the code is about (is it an instruction or is code that resolves to a value)
+2. While writing code you'll not mix up the two and therefore make sure that you do not write wrong code.
+
+## 3. What are operators (comparison, arithmetic, logical, assignment)
+
+### Explanation
+
+- Arithmetic Operators
+ - take numerical values (either literals or variables) as their operands and return a single numerical value.
+ - `19 + 13`, `126 / 3`, `397 % 71`
+- Comparison Operators
+ - Two different types of comparison operators; They will always return a logical value,
+ - Equality Operators
+ - checks if the operands are 'the same'
+ - difference in '=' '==' '==='
+ - Relational Operators
+ - checks if the specific relation between two operands is true or false
+ - `>`, `<`, `<=`, `>=`
+
+
+- Logical Operators
+ - Mostly 'comparing' boolean values, but it can be used with any type.
+ - `true || false`, `false && true`, `!true`
+
+- Assignment Operators
+ - assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal '='
+ - `+=`, `-=`, `*=`, `/=`
+
+(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
+
+### Example
+
+https://www.tutorialsteacher.com/javascript/javascript-operators
+
+### Exercise
+
+See example
+
+### Essence
+
+Operators are very important in a programming language, because this is how we manipulate values.
+In fact, operators are the building blocks of all possible actions.
+
+SECOND HALF (14.00 - 16.00)
+
+## 4. What are loops (do/while & for loop)
+
+### Explanation
+
+Programming loops are about doing the same thing over and over again, without typing the code over and over again. Another term for that is: iteration
+
+Wikipedia: In most computer programming languages, a while loop is a (control flow) statement that allows (a block of) code to be executed repeatedly based on a given Boolean condition.
+
+### Example
+
+```javascript
+```
+
+### Exercise
+
+Make a for loop with a do-while loop
+
+### Essence
+
+In programming you have to do a lot of (almost) similar calculations over and over again. Using loops makes it easier (and less boring) to code. Next to that it makes sure the the code is much more compact.
+
+You can check: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code as well. underneath the paragraph: 'Why bother'
+
+## 5. What are conditional statements (if/else & switch)
+
+### Explanation
+
+The normal order of execution of statements in a computer program is in straight-line order, from top to bottom. However, sometimes it is desirable to execute one or more statements conditionally, i.e. depending on whether some condition – determined by the state of your program – holds true (Boolean expression).
+
+In its simplest form the `if` statement looks like this:
+
+```js
+if () {
+}
+```
+
+Then we have:
+
+```js
+if() {
+} else {
+}
+```
+
+At last we have:
+
+```js
+if() {
+} else if {
+}
+```
+
+The switch statement can sometimes be a useful alternative to a long list of if statements. This is the case when the condition is an expression that can be decomposed into a number of distinct values or cases, as shown in the example below.
+Depending on the value of the expression specified in the `switch` clause, one of the `case` statement blocks is executed. Each statement block should end with a `break` statement to ensure that a `case` doesn't 'fall through' into the next `case`.
+
+The `default` statement at the end is executed when none of the preceding cases hold true. The `default` statement is not strictly required, but is a best practice to always specify one.
+
+### Example
+
+```js
+if (distance < 10) {
+ console.log('I will take the bike.');
+}
+```
+
+```js
+const hyfModule = 'JavaScript-1';
+let message = '';
+
+switch (hyfModule) {
+ case 'HTML/CSS':
+ message = 'In this module you will learn HTML and CSS.';
+ break;
+ case 'JavaScript-1':
+ message = 'In this module you will learn Git and JavaScript basics.';
+ break;
+ case 'JavaScript-2':
+ message = 'In this module you will learn about JavaScript in the browser with HTML and CSS.';
+ break;
+ case 'JavaScript-3':
+ message = 'In this module you will learn about Async and API calls.';
+ break;
+ case 'Node':
+ message = 'This module is about building server and CLI applications using Node.';
+ break;
+ case 'Database':
+ message = 'In this module is about Relational and Non-Relational Data and Database Systems.';
+ break;
+ case 'React':
+ message = 'In this module you will to build Single Page Applications using React.';
+ break;
+ case 'Project':
+ message = 'In this final module you will do your graduation project.';
+ break;
+ default:
+ message = 'This module is unknown: ' + hyfModule;
+}
+
+console.log(message);
+```
+
+### Exercise
+
+Create a Switch/Case that will log the season based on the month.
+
+```javascript
+const month = 'January';
+let season = '';
+
+switch (month) {
+ case 'January':
+ season = 'winter';
+ break;
+}
+
+console.log(season); // 'winter'
+```
+
+https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/if...else
+
+### Essence
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
index 8c1e02a24..abc8df3da 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -1,166 +1,179 @@
-## Homework Week 2
+# Homework JavaScript1 Week 2
-```
-Topics discussed in class this week:
-• Intro JavaScript (What is it, where can you use it for)
-• Variables [var, let, const]
-• Basic Data types [Strings, Numbers, Arrays, Booleans]
-• Operators
-```
-
->[Here](/Week1/README.md) you find the readings you have to complete before the second lecture.
+## **Todo list**
-## Before you start with the homework:
+1. Practice the concepts
+2. JavaScript exercises
+3. Code along
+4. PROJECT: Grade calculator
-1. Go through the review of [week 1](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)
-2. Watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though).
-3. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs):
- 0. Introduction
- 1. Programming Basics
- 2. Core Programming Syntax
- 3. Variables and Data Types
+## **1. Practice the concepts**
+In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week!
-## Step 2: Feedback
+- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!)
+- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures)
-_Deadline Wednesday_
+## **2. JavaScript exercises**
-Provide feedback on the HTML-CSS assignments (week 3) of one of your fellow students. You will be assigned to one of the assignments by the class lead of this week.
+> Inside of your `JavaScript1` fork and inside of the `Week2` folder, create a folder called `homework`. Inside of that folder, create a folder called js-exercises. For all the following exercises create a new .js file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be removeComma.js.
-## Step 3: JavaScript
+> For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference.
-_Deadline Thursday_
+> Start each file off with the string `'use strict'` at the top.
-> For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference.
+**Exercise 1: Remove the comma**
-1\. Write a `console.log` statement saying "Hello World!" for each language that you know.
+Consider the following string:
-For example:
-```
-Halo, dunia! // Indonesian
-Ciao, mondo! // Italian
-Hola, mundo! // Spanish
+```js
+let myString = 'hello,this,is,a,difficult,to,read,sentence';
```
-2\. Consider the following code:
-```
-console.log('I'm awesome');
-```
-2\.1 Copy the code in your `.js` file and run it. You will see that you will get a SyntaxError. Find a solution for this error, Hint read the error message carefully, it also gives an indication of where the problem is.
+Follow the steps:
-3\. Declare a variable `x` and initialize it with an integer.
-3\.1 First, _declare_ your variable `x`.
-3\.2 Add a console.log statement that explains that explains in words what _you think_ the value of `x` is, like in this example:
-```js
- // TODO -> here you initialize your variable
- console.log('the value of my variable x will be: whateverYouThinkItWillLog');
-```
-3\.3 Add a console.log statement that logs the value of `x`.
-3\.4 Now _initialize_ your variable `x` with an integer.
-3\.5 Now add a console.log statement that explains what _you think_ the value of `x` is.
-3\.6 Add a console.log statement that logs the value of `x`.
- Steps to be taken:
-
-```js
- // TODO -> here you declare your variable
- console.log('the value of x will be: whateverYouThinkItWillLog');
- // TODO -> log the actual value of x
- // TODO -> here you initialize your variable
- console.log('the value of x will be: whateverYouThinkItWillLog');
- // TODO -> log value of x again
+1. Add the variable to your file.
+2. Log the length of `myString`.
+3. The commas make that the sentence is quite hard to read. Find a way to remove the commas from the string and replace them with spaces. (use Google!)
+4. After replacing the commas, log `myString` to see if you succeeded.
+
+Expected result in the console: `hello this is a difficult to read sentence`
+
+**Exercise 2: The even/odd reporter**
+
+Report whether or not a number is odd/even!
+
+1. Create a `for` loop, that iterates from 0 to 20.
+2. Create a conditional statement that checks if the value of the counter variable is odd or even.
+3. If it's odd, log to the console `The number [PUT_NUMBER_HERE] is odd!`.
+4. If it's even, log to the console `The number [PUT_NUMBER_HERE] is even!`.
+
+**Exercise 3: The recipe card**
+
+Ever wondered how to make a certain meal? Let's create a recipe list with JavaScript!
+
+1. Declare a variable that holds an empty object literal (your meal recipe).
+2. Give the object 3 properties: a `title` (string), a `servings` (number) and an `ingredients` (array of strings) property.
+3. Log each property out separately, using a loop (for, while or do/while)
+
+Expected result:
+
+```console
+Meal name: Omelette
+Serves: 2
+Ingredients: 4 eggs, 2 strips of bacon, 1 tsp salt/pepper
```
-4\. Declare a variable `y` and assign a string to it.
-4\.1 Write a console.log statement in which you explain in words what _you think_ the value of the string is.
-4\.2 Now console.log the variable `y`.
-4\.3 Now assign a new string to the variable `y`.
-4\.4 Just like you did before write a console.log statement that explains in words what you think will be logged to the console.
-4\.5 Now console.log `y` again.
+**Exercise 4: The reading list**
+
+Keep track of which books you read and which books you want to read!
+
+Follow the steps:
+
+1. Declare a variable that holds an array of 3 objects, where each object describes a book and has properties for the `title` (string), `author` (string), and `alreadyRead` (boolean indicating if you read it yet).
+2. Loop through the array of books.
+3. For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien".
+4. Create a conditional statement to change the log depending on whether you read it yet or not. If you read it, log a string like `You already read "The Hobbit"` right after the log of the book details
+5. If you haven't read it log a string like `You still need to read "The Lord of the Rings"`
+
+**Exercise 5: Who wants a drink?**
+
+You're at a party and you feel thirsty! However, you've got 5 friends who are also in need of a drink. Let's go get them a drink.
+
+1. Declare a variable that holds an empty array, called `drinkTray`.
+
+There are 3 different types of drinks:
+
```js
- // TODO -> here you declare AND assign your string
- console.log('the value of my string will be: whateverYouThinkItWillLog');
- // TODO -> log the actual value of the string to the console
- // TODO -> assign a new value to your variable x
- console.log('the value of my string will be: whateverYouThinkItWillLog');
- // TODO -> log the actual value of the string to the console
+const drinkTypes = ['cola', 'lemonade', 'water'];
```
-5\. How do you round the number 7.25, to the nearest integer?
-5\.1 Declare a variable `z` and assign the number 7.25 to it.
-5\.2 Console.log `z`.
-5\.3 Declare another variable `a` that has the value of z but rounded to the nearest integer.
-5\.4 Console.log `a`.
-5\.5 So now we have `z` and `a` find a way to compare the two values and store the highest of the two in a new variable.
-5\.6 Console.log the highest value.
-
-6\. *Arrays!*
-6\.1 Declare an empty array.
-6\.2 Write a console.log statement that explains in words what you think the value of the array is.
-6\.3 Console.log your array.
-6\.4 Create an array that has your favorite animals inside (you can decide on how to call it yourself, but read on a bit here and see if you can find a good name that exactly describes what this variable will hold).
-6\.5 Log your array.
-6\.6 Add a statement that adds Daan's favorite animal (baby pig) to the *existing array*.
-6\.7 Log your new array!
-
-7\. *More strings*
-7\.1 Let's consider the following string: `let myString = "this,is,a,test"`.
-7\.2 Add the string to your file and console.log it.
-7\.3 Find a way to get the length of `myString`.
-7\.4 Console.log the length of `myString`.
-
-8\. Write a program that checks the types of two variables and prints out `SAME TYPE` if they are the same type.
-8\.1 First declare at least four variables and assign them different data types.
-8\.2 For each variable write a `console.log` statement that logs the value
- ```js
- let foo = 3;
- console.log('The value of my variable foo is: ' + foo);
- ```
-8\.3 Now write a console.log statement wherein you first explain in words what you think the _type_ of your variables is.
-8\.4 Now use `typeof` to log the actual _type_ of your variables.
-8\.5 Now compare the types of your different variables with one another.
-8\.6 Make sure to also show a message when the variables you are comparing are not the same type.
-
-For example:
+2. Create a loop that runs 5 times. On each iteration, push a drink into the `drinkTray` variable. The `drinkTray` can only hold at most two instances of the same drink type, for example it can only hold 2 colas, 2 lemonades, 2 waters.
```js
-let x = 9;
-let y = 'Hello';
+// Expected result:
+const drinkTray = ['cola', 'cola', 'lemonade', 'lemonade', 'water'];
-if () {
- console.log('SAME TYPE');
-}
-// TODO -> add a way of giving feedback if your variables don't have the same type
+// 'Hey guys, I brought a cola, cola, lemonade, lemonade, water!'
```
-9\. If `x` equals 7, and the only other statement is `x = x % 3`, what would be the new value of `x`?
-9\.1 Add at least 3 `console.log` statements in which you show that you understand what `%` does.
+3. If there are already two instances of a `drinkType` then start with the next drink in the array.
+4. Your `drinkTray` should contain 2 cola, 2 lemonade and 1 water.
+5. Log to the console: "Hey guys, I brought a [INSERT VALUES FROM ARRAY]!" (For example: "Hey guys, I brought a cola, cola, lemonade, lemonade, water!")
+
+Test out your code using `node` in the command line!
+
+## **3. Code along**
+
+> Create a new GitHub repository for each of these projects. They are portfolio pieces!
+
+In the following 2 projects you'll be flexing your HTML/CSS skills again, together with writing JavaScript code. They are similar in structure and logic, so be sure to spot the similarities!
+
+It's ok if you don't understand exactly what's happening here. Just follow along and try to understand: ask yourself questions about what the developer is doing and think about every line of code.
+
+**Project 1: Temperature Converter**
+
+This project will teach you how to convert temperature from one scale to another in real-time!
+
+In the first part you'll be building the basic frontend, which means the way the page is going to look using only HTML/CSS. In the second part you'll be writing the logic that will allow a user to convert the temperature from one temperature scale to another (i.e. Celsius to Fahrenheit)
+
+- [Temperature Converter Pt. I](https://www.youtube.com/watch?v=EHclqGV_KME)
+- [Temperature Converter Pt. II](https://www.youtube.com/watch?v=8mRGfLL1nzE)
-10\. Write a program to answer the following questions:
-10\.1 Can you store multiple types in an array? Numbers and strings? Make an example that illustrates your answer.
-10\.2 Can you compare infinities? (Not in Eyad's world) - does 6/0 === 10/0? How can you test this?
-10\.3 Add console.log statements to the above program's in which you show that you understand the concepts (just like you've done in the above assignments).
+**Project 2: Weight Converter**
-## Step 4: **Some freeCodeCamp challenges (10 hours):**
+In the following tutorial you'll learn how to make a Weight Converter application. You'll make use of HTML, CSS and JavaScript. At first you'll be building the basic layout of the frontend (the HTML & CSS). After you'll start writing the JavaScript logic that will `convert pounds into grams`.
-_Deadline Saturday_
+In order to speed up development you'll be using a CSS framework: [Bootstrap 4](https://www.getbootstrap.com). While coding along, have a look through the documentation in order to get familiar with the different class names to see what they do.
-On freeCodeCamp.com please do the [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises up and until the __"Shopping List"__ exercise (there are some topics we did not cover but you can do it).
+- [Weight Converter App](https://www.youtube.com/watch?v=7l-ZAuU8TXc)
-## Step 5: Read before next lecture
+## **4. PROJECT: Grade calculator**
-_Deadline Sunday morning_
+> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
-Go trough the reading material in the [README.md](/Week1/README.md) to prepare for your next class
+In this project you'll write a `function` that calculates grades, based on the American grading system! Let's say a student did a test and they got a 60 out of 100, this `function` will:
-### How to hand in Homework:
+1. convert the score into a percentage
+2. calculate what grade corresponds with that percentage, and
+3. shows in the command line the result: the grade and the percentage
+
+In this example this is what we would expect the `function` to return in the command line:
+
+```markdown
+You got a D (60%)!
```
-• Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository.
-• Upload your homework files inside the week1 folder and write a description for this “commit”.
-• Your hyf-javascript1/week1 should now contain all your homework files.
-• Place the link to your repository folder in Trello.
+
+When writing the `function`, make use of the following grade scores:
+
+```markdown
+Grade A (90% - 100%)
+Grade B (80% - 89%)
+Grade C (70% - 79%)
+Grade D (60% - 69%)
+Grade E (50% - 59%)
+Grade F (0% - 49%)
```
-### Hint
-If you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a `.js` file and upload them to Github in a repository for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them.
+These are the requirements your project needs to fulfill:
+
+- Make a JavaScript file with a name that describes its contents
+- Use either a switch or if/else statement
+- Write at least 2 comments that explain to others what a line of code is meant to do
+- Make the return value of the function a template string, so you can insert variables!
+- Use `node` from the command line to test if your code works as expected
+
+Good luck!
+
+## **SUBMIT YOUR HOMEWORK!**
+
+After you've finished your todo list it's time to show us what you got! The homework that needs to be submitted is the following:
+
+1. JavaScript exercises
+2. PROJECT: Grade calculator
+
+Upload both to your JavaScript1 repository forked to your personal account in GitHub. Make a pull request to the [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1).
+
+> Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again.
-:star: Additional resources and review: [here](/Week1/REVIEW.md):star:
+_Deadline Saturday 23.59 CET_
diff --git a/Week2/README.md b/Week2/README.md
index 6bb3ed5c5..c9a882e9c 100644
--- a/Week2/README.md
+++ b/Week2/README.md
@@ -1,41 +1,100 @@
-# Reading material for the third lecture:
+# Reading Material JavaScript1 Week 2
+## Agenda
+
+These are the topics for week 2:
+
+1. Statements vs. Expressions
+2. Loops
+3. Control Flow
+4. Operators
+5. Conditional statement
+6. Naming conventions
+
+## 0. Video Lectures
+
+Your teacher Uday has made video lectures for this week's material. You can find them here: [Videos 11 - 20](https://www.youtube.com/playlist?list=PLVYDhqbgYpYUiqH8IxLJ5qomkEGMzes1q)
+
+
+
+## 1. Statements vs. Expressions
+
+A lot of programming is nothing different from regular human communication. When conversing with another person, we often use language in various ways: to ask questions, make statements or simply express yourself about what's going on.
+
+This is the same in programming. A difference is that it's done in abstract code. Another difference is that a programming statement is an instruction, while a programming expression leads directly to a value (and are usually different parts of a statement).
+
+To learn more about statements vs. expression, research the following resources:
+
+- [Expressions vs. Statements in JS](https://www.youtube.com/watch?v=WVyCrI1cHi8)
+- [Statements vs. Expressions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/statements_expressions.md)
+
+## 2. Loops
+
+A loop is a sequence of instructions that is continually repeated until a certain condition is fulfilled. This condition could either be a specified number or when a desired value is found or not.
+
+In programming, a loop is meant to be used in case there's a repetitive task that needs to be done.
+
+Learn more about loops here:
+
+- [JavaScript Loops](https://www.youtube.com/watch?v=s9wW2PpJsmQ)
+- [Loops](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/loops.md)
+
+## 3. Control Flow
+
+Almost all European languages are read from left to right. In Arabic and Hebrew this is the other way around: from right to left.
+
+In the language of JavaScript this goes from top to bottom, left to right. This is called the `control flow`: the order in which the computer executes statements in a script. The `control` parts refers to the ability to execute something by the computer, while the `flow` part refers to the causal chain between the execution of one action to another.
+
+> The term `flow` is a general term meaning a specific, repeatable order of actions. In your working life you'll hear the term `workflow`, which in that case refers to the different actions necessary to complete a business activity.
+
+There is one important distinction between spoken language and programming languages: in programming languages the order in which the code is read can change, depending on various `control statements` (`if`, `for/while/do-while loop` or `switch`).
+
+Learn more about control flow here:
+
+- [Introduction to Programming - Control Flow](https://www.youtube.com/watch?v=nBj2nJup8xU)
+- [Control flow](https://dev.to/mugas/control-flow-in-javascript-246l)
+
+## 4. Operators
+
+If you've ever taken a mathematics class you are familiar with symbols like `+`, `-`, `/` and `=`. These symbols are recognized by the computer and are called `operators`. They can be used to perform calculations (with numbers) or to determine whether or not something is true (more on that in the next section).
+
+Check the following resources to learn more about their importance:
+
+- [Different Types of Operators in JavaScript](https://www.youtube.com/watch?v=FZzyij43A54)
+- [Operators](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/operators.md)
+
+## 5. Conditional statement
+
+Computers only function by logical rules: whether something is true or not determines if an instructions gets executed or not. This logical process is expressed in a `conditional statement` and goes like this: if _this happens_, then _that happens_. Or in code:
+
+```js
+if () {
+ // then this will happen
+}
```
-In week three we will discuss the following topics:
-• Git work flow
-• Advanced data types [Objects]
-• Conditions
-• Statements vs Expressions
-• Loops (for/while)
-• Functions
-```
-### Here are resources that we like you to read as a preparation for the coming lecture:
+A condition is put in the `( )` and it needs to evaluate to `true` or `false` (also known as `Boolean` values). If the condition is true, then whatever is inside the `{ }` will be executed.
+
+What happens when the condition is false? For that we have the `else { }` block. If the condition is false, then whatever is inside the else will be executed:
+
+```js
+if() {
+
+} else {
+
+}
+
+```
-Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs):
- 4. Writing Conditional Code
- 5. Modular Code
- 6. Iteration: Writing Loops
- 7. More About Strings
- 8. Collections
- 11. When Things Go Wrong
+## 6. Naming conventions
-## Read
-- [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype)
+A naming convention is a rule that every developer should hold themselves to when creating variable or function names. This is important, because writing code should be done in a **readable** way: you should be able to understand what a certain variable or function does just by looking at its name.
-## From the book _A Smarter Way To Learn JavaScript_ please read:
-- 'Loops' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 18-20
-- 'Functions' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 35 - 38
-- Functions ~ http://eloquentjavascript.net/03_functions.html
-- 'Objects' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 69 - 75
-- 'Conditions' of [_A Smarter Way To Learn JavaScript_](https://github.com/Sharique-Hasan/SaylaniBatch2-JavaScript/blob/master/A%20Smarter%20Way%20to%20Learn%20JavaScript.pdf) : Chapters 10 - 14
-- Program structure ~ http://eloquentjavascript.net/02_program_structure.html
+Read about the different naming conventions for JavaScript here:
-#### Git work flow
-- Check out this video of Daan to see how we use Git Workflow to hand in Homework (from now on): https://www.youtube.com/watch?v=-o0yomUVVpU&index=2&list=PLVYDhqbgYpYUGxRdtQdYVE5Q8h3bt6SIA
+- [Naming Conventions in Programming](https://blog.jsecademy.com/naming-conventions-in-programming/)
+- [Naming conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)
-### Review
-- Go through the review of [week 1](/Week1/REVIEW.md)
-- Go through the review of [week 2](/Week2/REVIEW.md)
+## Finished?
-_Please go through the material and come to class prepared!_
+Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md).
diff --git a/Week2/REVIEW.md b/Week2/REVIEW.md
deleted file mode 100644
index 8cc7338e9..000000000
--- a/Week2/REVIEW.md
+++ /dev/null
@@ -1,234 +0,0 @@
-# REVIEW JavaScript week 2
-
-```
-This review covers:
-• Recap Logical operators
-• Typeof
-• Loops (for/while)
-• Functions
-• Advanced data types [Objects]
-• Conditions
-• Statements vs Expressions
-• Naming conventions
-```
-
-### Recap Logical operators:
-
-```js
-0 = false
-1 = true
-```
-
-#### AND `&&`
-
-| `&&` |0|1|
-|------|-|-|
-|0|0|0|
-|1|0|1|
-
-#### OR `||`
-
-| `\|\|` |0|1|
-|------|-|-|
-|0|0|1|
-|1|1|1|
-
-So you can say that false in combination with `&&` always returns true
-```js
-true && false //-> false
-false && true //-> false
-false || true //-> true
-true || false //-> true
-```
-
-### Typeof
-
-`typeof` always returns the data type in a string.
-
-So for example:
-```js
-let bar = 42;
-typeof bar //-> 'number'
-typeof typeof bar; //-> 'string'
-```
-
-So the data type of what `typeof` returns is always a string, bar on the other hand is still a number.
-
-## Objects
-
-Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties".
-
-
-```js
-let obj = {name: 'John', age: 24};
-```
-
-This object has two properties: `name` and `age`. The "value" of the property `name` is the string `'John'`. The "value" of the property `age` is the number `24`.
-
-When accessing object properties, you can use the dot-notation: `obj.name` or the bracket-notation: `obj["name"]`. Note that the latter looks a lot like the way to access array elements. However, here what's inside the bracket (called "key" for objects, instead of "index") must be a string.
-
-```js
-console.log(obj.name); // -> 'John'
-console.log(obj['name']); // -> 'John'
-```
-
-Just like with arrays, you can also use a variable to access properties, as long as these variables are strings. In this case you cannot use the dot-notation!
-
-```js
-var ageKey = 'age';
-console.log(obj[ageKey]); // -> 24
-```
-
-Remember that there is a very big difference between `obj[name]` and `obj["name"]`.
-
-> Note:
->
-> Thinking back of arrays, the length of an array can be retrieved by `arr.length`. So as mentioned before, arrays are just like other JavaScript objects. You could even write `arr['length']` to access the `length` property of the array. JavaScript will look: is what we put between brackets a number? Then it is an index and we'll look up the correct array element. If it's a string, it's a key and we will look up the corresponding property.
-
-
-## Functions
-
-A function is a reusable piece of code. Functions are *very* important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language. As mentioned above, variables can be of type function. In fact, *every function is a variable*.
-
-The following two pieces of code have the exact same result:
-
-```js
-function sum(a, b) {
- return a + b;
-}
-```
-
-and
-
-```js
-let sum = function (a, b) {
- return a + b;
-}
-```
-
-> Note
->
-> This is not entirely true, as in the second code, the function is "anonymous", i.e. it has no name. But in both cases, you can call the function like this: `sum(4, 5)`.
-
-### Parameters & arguments
-
-When writing `function sum(a, b)`, `a` and `b` are the "parameters" of the function. We say that this function has two parameters. (Sometimes, you'll see the word "arity": this function has "arity" 2, but that is something you don't have to use for now.)
-
-Now, when *calling* function sum, e.g. `var s = sum(4, 5);`, we say that the numbers `4` and `5` are the "arguments" of the function. Arguments are "passed" to the function: "we pass `4` and `5` to the function `sum`".
-
-So remember the difference between the word "parameter" and "argument". Many people confuse them, and that's not a big problem, but understanding the difference is always nice:
-
-* A parameter is the name you want to give to the variable that is available inside of the function.
-* An argument is the actual value you want to assign to the parameters when you call the function.
-
-A function that "has two parameters" is also said to "take/accept two arguments". But, sometimes you'll hear people say: "the function has two arguments" or "the function takes two parameters". While formally incorrect, you'll know what they mean.
-
-### Calling a function on something
-
-In JavaScript, you can call functions *on* something. By this, we mean that you use the dot to call the function. For instance, when we say "call method `trim` on string `s`", we mean:
-
-```js
-let s = " this is a string ";
-s.trim(); // -> "this is a string"
-```
-
-> Note
->
-> Technically, this means that the string `s` will become the `this` special variable inside of the function.
-
-However, there are functions that you don't call on anything:
-
-```js
-function sum(a, b) { return a + b; }
-sum(4, 5); // -> 9
-```
-
-Here, you call the function `sum` on nothing.
-
-Most built-in functions in JavaScript, like math functions or logging functions, also use the dot:
-
-```js
-Math.round(4.5);
-console.log("hello");
-Array.from([1, 2, 3]);
-```
-
-Indeed, these functions are also called "on" `Math`, `console`, `Array`, and so on. However, in this case, their purpose is more to group them logically, so here it's not very important to use that terminology. We'd rather say: "call the function `Math.round` with `4.5` as an argument", i.e. we include it in the full name of the methods.
-
-It's more when you think about which functions you can call "on" your own variables (strings, arrays, numbers, etc):
-
-```js
-myString.trim();
-myArray.slice();
-myNumber.toString();
-...
-```
-
-
-## Statements & expressions
-
-Most programming languages that you'll encounter in real life are called "imperative" programming languages. JavaScript is such an imperative programming language. Imperative is another word for command-like. That is, you give the computer a bunch of commands after each other. First do this, then do that, etc.
-
-These individual commands are called "statements" in imperative programming languages. You can compare them with sentences in the English language. They have a use by themselves, and do not need something else. "The man eats bread." is a full sentence, it conveys a meaning by itself. A sentence in English is always terminated by a period.
-
-Similarly, a statement in JavaScript should provide a command by itself. JavaScript-statements are (almost always) terminated by a semicolon.
-
-This is a complete statement:
-
-```js
-let s = "HackYourFuture";
-```
-
-It is a full command: declare a variable `s` and initialize it with `"HackYourFuture"`. JavaScript doesn't need any other information to know what we want. The statement is terminated with a semicolon.
-
-However, this is not a complete statement:
-
-```js
-4 + 5
-```
-
-This equals `9`, but what is JavaScript to do with it? It doesn't provide a command. You'd need to do something with it, e.g. `var x = 4 + 5;` or `callFunction(4 + 5)`. We call these parts of statements "expressions". Expressions are not terminated by semicolons. Expressions always "evaluate into a value". In our example, the expression `4 + 5` "evaluates into `9`". If expressions cannot be evaluated into a value, they are invalid. For instance, `4 +` is not a valid expression, it is incomplete, because we need something else after the plus sign.
-
-So, statements can *contain* expressions. Can expressions contain statements? No, they cannot. However, they can themselves contain expressions. Think about `4 + 5`: it contains the expressions `4` and `5`, as these both evaluate into a value: the expression `4` evaluates into the number `4`, it is a very simple expression. Similarly, `true`, `null`, `undefined` are all expressions.
-
-### Examples of expressions
-
-Here are some examples of expressions. Remember: expressions evaluate into a value, but do not provide a command:
-
-* `sum(a, b)`
-* `a`
-* `a > 4 ? "yes" : "no"`
-* `a + b`
-* `a && b || c`
-* `arr.length`
-* `obj["name"]`
-* `[1, 2, 3]`
-* `arr[1]`
-* `[1]` (this is an array with one element!)
-* `function a() { return 4; }`
-
-The last one requires a bit of explanation. If you write:
-
-```js
-function a() { return 4; }
-```
-
-by itself, this is a *statement* (a function declaration statement). However, if you write it as part of a statement, such as:
-
-```js
-let b = function a() { return 4; }
-```
-
-now it is an expression. This is an exceptional situation where something can be a statement or an expression.
-
-### Examples of not-expressions
-
-The following are not expressions:
-
-* `var` -> this is a keyword, see below
-* `var x;` -> this is a statement
-* `+` -> this is only an operator
-* `if (a > 4) { return "yes"; } else { return "no"; }`
-
-`if` is also a statement. However, it is quite a complex statement. It is also referred to as a "construct", just like `for`, `while`, `try`, etc.
-
diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md
new file mode 100644
index 000000000..50a1ce2f7
--- /dev/null
+++ b/Week3/LESSONPLAN.md
@@ -0,0 +1,126 @@
+# Lesson Plan JavaScript1 Week 3
+
+## Agenda
+
+The purpose of this class is to introduce to the student:
+
+- What is a function (ES5 only)
+- Wat is scope (global, functional, block)
+- How to combine variables, loops & functions
+
+## Core concepts
+
+FIRST HALF (12.00 - 13.30)
+
+## 1. Q&A about last week's concepts & homework
+
+- Variables
+- Basic data types (`string`, `number`, etc)
+- Compound data types (`array`, `object`)
+- Branching constructs
+ - `if..else`
+- Looping constructs
+ - `for`
+ - `for..of`
+ - `for..in`
+ - `do..while`
+- Operators (arithmetic, comparison, eg `+`, `*`, `&&`, `||`, etc).
+
+Note: You can ask students to explain a concept or summerise the last lecture themselves
+
+## 2. Function (ES5 only)
+
+### Explanation
+Functions are a way to organize your code in to re-usable chunks.
+
+> People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones.
+>
+> _-- Donald Knuth_
+
+https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/functions.md
+### Example
+Same link as Explanation
+### Exercise
+
+### Essence
+- __Reusability__: Functions can be grouped together to make a module (or library), and then modules can be imported into your application so you can build awesome apps!
+- __Abstraction__: Hide underlying details about how a piece of functionality works under the hood. You can change how things are implemented within the function without other programmers who use your function worrying aobut the exact details of how it was implemented.
+
+And the same link as Explanation
+
+SECOND HALF (14.00 - 16.00)
+
+## 3. Scope (global, functional, block)
+
+### Explanation
+Scopes define the visiblity of declarations of variables and functions.
+
+The top level outside all your functions is called the _global scope_. Values defined in the global scope are accessible from everywhere in the code. Whereas, variables defined in local scope can only be accessed and altered inside the scope they were created.
+
+- `var` and `function` declarations are visible with function scope.
+- `let` and `const` declarations are visible with block scope. A block can be seen as a set of statements enclosed in curly brackets({}).
+
+Global scope:
+
+- Can be a real useful tool or a nightmare.
+- Useful in scenarios where we want to export JS modules, use third party libraries like jQuery etc.
+- Big risk of causing namespace clashes with multiple variables with same name being created in different places.
+
+Local Scope:
+
+- Think of local scope as any new scope that is created within the global scope.
+- Each function written in JavaScript creates a new local scope.
+- Variables defined within a function aren't available outside it. They are created when a function starts and are _in a way_ destroyed/hidden when a function ends.
+
+https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/scope.md
+### Example
+
+
+```Javascript
+let villan = "Joker"; // | global scope
+ // |
+function myFunction() { // | | function scope
+ let hero = "Batman"; // | |
+ if (hero === "Batman") { // | | | block scope
+ let coHero = "Robin"; // | | |
+ console.log(hero); // | | |
+ console.log(coHero); // | | |
+ console.log(villan); // | | |
+ } // | | |
+ console.log("------") // | |
+ console.log(hero); // | |
+ console.log(coHero); // | |
+ console.log(villan); // | |
+} // | |
+ // |
+myFunction(); // |
+```
+
+And the same link as Explanation
+### Exercise
+What happens if we use the same variable name in different scopes?
+
+```Javascript
+function myFunction() {
+ let hero = "Batman";
+ if (true) {
+ let hero = "The Flash";
+ console.log(hero);
+ }
+ console.log(hero);
+}
+
+myFunction();
+```
+### Essence
+Same link as Explanation
+
+## 4. How to combine variables, loops & functions
+
+### Explanation
+### Example
+### Exercise
+https://github.com/yash-kapila/HYF-JS1-Week3/tree/master/src
+### Essence
+
+_Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
index 095b3f425..d76dc7c0e 100644
--- a/Week3/MAKEME.md
+++ b/Week3/MAKEME.md
@@ -1,184 +1,205 @@
-## Homework Week 3
+# Homework JavaScript1 Week 3
-```
-Topics discussed in class this week:
-• Git work flow
-• Advanced data types [Objects]
-• Conditions
-• Statements vs Expressions
-• Loops (for/while)
-• Functions
-```
+## **Todo list**
->[Here](/Week2/README.md) you find the readings you have to complete before the third lecture.
+1. Practice the concepts
+2. JavaScript exercises
+3. Code along
+4. PROJECT: Grade calculator
+5. [OPTIONAL] Extra resources
-## Step 0: Feedback
+## **1. Practice the concepts**
-_Deadline Monday_
+In this section you will be doing interactive exercises that will allow you to practice with the concepts you've learned about this week.
-Provide feedback to step 1 and step 3 of the homework of last week to one of your fellow students. You will be assigned to one of the assignments by the class lead of this week.
+In the first course you'll learn about functions, the structure and how they're used. They are a fundamental part of understanding programming and you should become very familiar with them!
-## Step 1: Recap/Read
+- [Codecademy: Functions ](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions)
-- Have a look at [The Secret Life of JavaScript Primitives](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/)
-- Go through the review of [last week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)
-- Go through the review of [this week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)
+In this second course you'll learn about `higher order functions`, which we'll refer to again during the [JavaScript2](https://www.github.com/HackYourFuture/JavaScript2) module. Go through it to get familiar, but don't feel like you completely have to understand it at this point.
-## Step 2: Watch
+- [Codecademy: Higher Order Functions](https://www.codecademy.com/courses/introduction-to-javascript/lessons/higher-order-functions/)
-1. If you haven't done already, watch: [What is programming](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro) Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though).
-2. Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs):
- 4. Writing Conditional Code
- 5. Modular Code
- 6. Iteration: Writing Loops
- 7. More About Strings
- 8. Collections
- 11. When Things Go Wrong
+## **2. JavaScript exercises**
-## Step 3: Rover the Robot
+> Inside of your `JavaScript1` fork and inside of the `Week3` folder, create a folder called `homework`. Inside of that folder, create a folder called js-exercises. For all the following exercises create a new .js file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be giveCompliment.js.
-Go and try out this cool game: http://hyf-robot.herokuapp.com/index.html, there are different levels, see how far you can get!
+> In each file, start off with the string 'use strict'. This will make sure the code interpreter will enforce stronger rules when looking at your code.
-## Step 4: String and Array challenges
+**Exercise 1: You are amazing, Noer!**
-_Deadline Wednesday_
+There is no better way to start your day then with a compliment!
-> For all the following exercises create a new .js file. Try to find a proper name for each file or make a small comment about what it does inside for future reference
+1. Write a function named `giveCompliment`
-*IMPORTANT NOTE*
-In each assignment write at least two `console.log` statements to verify if your code works correctly. In other words proof that you code works as expected. If you need inspiration look at the steps defined in the assignments from last week.
+- It takes 1 argument: your name
+- Inside the function define a variable that holds an array, `compliments`, with 10 strings. Each string should be a compliment, like `"great"`, `"awesome"`
+- Write code that randomly selects a compliment
+- Return a string: "You are [COMPLIMENT], [YOUR_NAME]!
-1\. **Strings!**
-1\.1 Let's consider the following string: `let myString = "hello,this,is,a,difficult,to,read,sentence"`
-1\.2 Add the string to your file and console.log it.
-1\.4 Console.log the length of `myString`.
-1\.5 The comma's make that the sentence is quite hard to read. Find a way to remove the comma's from the sting and replace them with a spaces
-1\.6 Console.log `myString` to see if you succeeded.
-
-2\. **Arrays!**
-consider the following array:
+2. Call the function three times, giving each function call the same argument: your name.
```js
-let favoriteAnimals = ['blowfish', 'capricorn', 'giraffe'];
+// Expected output
+giveCompliment('Noer'); // Returns "You are amazing, Noer!"
+giveCompliment('Noer'); // Returns "You are great, Noer!"
+giveCompliment('Noer'); // Returns "You are supersmart, Noer!"
```
-2\.1 Add a statement that adds Mauro's favorite animal (turtle) to the existing array
-2\.2 Log your new array!
-2\.3 Now add Jim's favorite animal to the array, its a 'meerkat', but make sure it will be placed after 'blowfish' and before 'capricorn'.
-2\.4 Write a console.log statement that explains in words _you think_ the new value of the array is.
-2\.5 Log your new new array!
-2\.6 Log the length of the array, add a message: "The array has a length of: "(here you should show the length of the array)
-2\.7 Jason does not like giraffes, delete this animal from the array
-2\.8 Again log your new array.
-2\.9 Now if unlike Jim, you don't like meerkats and you want to delete it from the array, but you don't know the position or the `index` of the item in the array, how can you find it?
-2\.10 Log the index of meerkat to the console. Add a message so it says: "The item you are looking for is at index: " (here you should show the index of the item)
+**Exercise 2: Dog years**
-## More JavaScript :tada:
+You know how old your dog is in human years, but what about dog years? Let's calculate it!
-1. Create a function that takes 3 arguments and returns the sum of the three arguments.
+1. Write a function named `calculateDogAge`.
-2. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example.
+- It takes 1 argument: your (fictional) puppy's age (number).
+- Calculate your dog's age based on the conversion rate of `1 human year to 7 dog years`.
+- Return a string: "Your doggie is [CALCULATED_VALUE] years old in dog years!"
-3. Create an object and a function that takes the object as a parameter and prints out all of its names and values.
+2. Call the function three times with different sets of values.
-4. Create a function named `vehicleType` that receives a color, and a code, 1 for car, 2 for motorbike. And prints "a blue motorbike" for example when called as `vehicleType("blue", 2)`
+```js
+// Expected output
+calculateDogAge(1); // Returns "Your doggie is 7 years old in dog years!"
+calculateDogAge(2); // Returns "Your doggie is 14 years old in dog years!"
+calculateDogAge(3); // Returns "Your doggie is 21 years old in dog years!"
+```
-5. Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`?
+**Exercise 3: Be your own fortune teller**
- ```js
- if (3 === 3) {
- console.log("true")
- } else {
- console.log("false")
- }
- ```
+Why pay a fortune teller when you can just program your fortune yourself?
-6. Create a function called `vehicle`, like before, but takes another parameter called age, so that `vehicle("blue", 1, 5)` prints "a blue used car"
+1. Create 4 arrays, `numChildren`, `partnerNames`, `locations` and `jobs`. Give each array 5 random string values that have to do with the name of the variable
+2. Write a function named `tellFortune`.
-7. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more.
+- It takes 4 arguments: number of children (number), partner's name (string), geographic location (string), job title (string).
+- Randomly select values from the arrays.
+- Return a string: "You will be a [JOB_TITLE] in [LOCATION], married to [PARTNER_NAME] with [NUMBER_KIDS] kids."
-8. How do you get the third element from that list?
+3. Call the function 3 times, by passing the arrays as the argument.
-9. Change the function `vehicle` to use the list of question 7. So that `vehicle("green", 3, 1)` prints "a green new caravan".
+```js
+// Expected output
+const numChildren = [...];
+const partnerNames = [...];
+const locations = [...];
+const jobs = [...];
+
+tellFortune(numChildren, partnerNames, locations, jobs); // Returns "You will be a programmer in The Netherlands, married to Layla with 3 kids."
+tellFortune(numChildren, partnerNames, locations, jobs); // Returns "You will be a farmer in France, married to Muhammed with 2 kids."
+tellFortune(numChildren, partnerNames, locations, jobs); // Returns "You will be a teacher in The United States, married to Zara with 4 kids."
+```
-10. Use the list of vehicles to write an advertisement. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.)
+**Exercise 4: Shopping at the supermarket**
-> Hint, the output should be correct English with all the punctuation in place (that's the challenge). So plurals for the vehicle types, commas followed by a single space, the word and to replace the final comma and closed off by a period.
+Let's do some grocery shopping! We're going to get some things to cook dinner with. However, you like to spend your money and always buy too many things. So when you have more than 3 items in your shopping cart the first item gets taken out.
-11. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 10?
+1. Create an array called `shoppingCart` that holds the following strings: `"bananas"` and `"milk"`
+2. Write a function named `addToShoppingCart`
-12. Create an empty object.
+- It takes 1 argument: a grocery item (string)
+- Add grocery item to `shoppingCart`. If the amount of items is more than 3 remove the first one in the array
+- Loops through the array in order to list out the items
+- Return a string: "You bought [LIST_OF_GROCERY_ITEMS]!"
-13. Create an object that contains the teachers that you have had so far for the different modules.
+3. Call the function 3 times, each time with a different string as the argument.
-14. Add a property to the object you just created that contains the languages that they have taught you.
+```js
+const shoppingCart = ['bananas', 'milk'];
-15. Write some code to test two arrays for equality using `==` and `===`. Test the following:
-
- ```js
- let x = [1,2,3];
- let y = [1,2,3];
- let z = y;
- ```
+// Expected output
+addToShoppingCart('chocolate'); // Returns "You bought bananas, milk, chocolate!"
+addToShoppingCart('waffles'); // Returns "You bought milk, chocolate, waffles!"
+addToShoppingCart('tea'); // Returns "You bought chocolate, waffles, tea!"
+```
- What do you think will happen with `x == y`, `x === y` and `z == y` and `z == x`? Prove it!
-
- > Don't cheat! Seriously - try it first.
-
+**Exercise 5: Total cost is ...**
- Check out this [Fiddle](http://jsfiddle.net/jimschubert/85M4z/). You need to open your browser’s Developer Tools to see the console output. Press the Run button in the upper right corner to run the code.
+You want to buy a couple of things from the supermarket to prepare for a party. After scanning all the items the cashier wants to give you the total price, but the machine is broken! Let's write her a `function` that does it for her instead!
- More insights from this [Stack Overflow question](http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript).
+1. Create an object named `cartForParty` with 5 properties. Each property should be a grocery item (like `beers` or `chips`) and hold a number value (like `1.75` or `0.99`)
+2. Write a function called `calculateTotalPrice`
+- It takes 1 argument: an object that contains properties that only contain number values
+- Loop through the object and add all the number values together
+- Return a string: "Total: €[TOTAL_PRICE_ITEMS]"
-16. Take a look at the following code:
+3. Call the function 1 time, giving it the object `cartForParty` as an argument
- ```js
- let o1 = { foo: 'bar' };
- let o2 = { foo: 'bar' };
- let o3 = o2;
+```js
+const cartForParty = { ... }
- ```
+// Expected output
+calculateTotalPrice(cartForParty); // Returns "Total: €10.75"
+```
- Show that changing `o2` changes `o3` (or not) and changing `o1` changes `o3`(or not).
-
- Does the order that you assign (`o3 = o2` or `o2 = o3`) matter?
+## **3. Code along**
-17. What does the following code return? (And why?)
+> Create a new GitHub repository for this project. It's a portfolio piece!
- ```js
- let bar = 42;
- typeof typeof bar;
- ```
+In this project you'll be building a simple meditation application, that will allow you to set a timer, loop a video and play a song!
-
-> ‘Coerce' means to try to change - so coercing `var x = '6'` to number means trying to change the type to number temporarily.
+You'll be working with the
+
+## 1. What is programming?
+
+Programming is giving a computer instructions written in a language it can understand, in order to solve a problem you (or the company you work for) have. We don't necessarily need computers to solve problems, but we use them because they provide several benefits:
+
+1. They are fast
+2. Cheap to use
+3. Can work 24/7 (as long as it has power)
+
+This is important to note: a computer is a `tool` we use to make our lives easier.
+
+- [What is a Computer?](https://www.youtube.com/watch?v=rRSD128KWIM)
+- [What Do Computers Do?](https://www.youtube.com/watch?v=92TaQRBwPSs)
+
+In order to use this tool, we need to talk to it in a way it understands (programming language) and give it commands on what to do (the act of programming). However, despite the power a computer has it is not very smart. It can't do anything without being told **exactly** what it needs to do to solve a problem, step-by-step. This is why we learn how to program: in order to tell the computer to do what we want it to do.
+
+Go through the following resources to learn more about what programming is:
+
+- [What is programming?](https://www.youtube.com/watch?v=3tWMQ3ZMjbg)
+- [What do programmers do?](https://www.youtube.com/watch?v=kEjCfsrotAM)
+- [Introduction into programming Playlist](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZYJC7L-r6rX6utt6wwJCyi)
+
+### Software
+
+As a software developer (synonym to 'programmer' or 'software engineer'), you will write these instructions in order to create 'software'. Look at the following video to get a better idea of what software is:
+
+- [What is software?](https://www.youtube.com/watch?v=MSA3WsGeTNI)
+
+### What is a programming language?
+
+Programming is done using a programming language. Why do we need a language to communicate with the computer? At its most basic level, a computer operates based on 0's and 1's: the 0 means 'off', and the 1 means 'on' (think of it like a light switch that either turns the light on or off).
+
+Smart people decided to make working with this easier to understand, so that a lot of people can more simply communicate with a computer. This is how the development of programming languages started: by defining a vocabulary, grammar and syntax to put more organization to the 0's and 1's, we can more simply communicate exactly what we want to computer to do.
+
+- [What is a programming language?](https://www.youtube.com/watch?v=EGQh5SZctaE)
+- [What are programming languages](https://hackr.io/blog/what-is-programming-language)
+
+There are various languages, each made to fulfill a certain need. For example, Microsoft developed a language called [C#](https://www.youtube.com/watch?v=paJUbVeKEOU) in order to make applications for computers that run a Windows operating system. The language of C# is able to easily "talk" with the preexisting software.
+
+You will be learning JavaScript, a language that has been made to "talk" to web browsers (Google Chrome, Mozilla Firefox, Safari, Internet Explorer, etc.).
+
+Read the following article to learn more about different languages and their uses:
+
+- [14 Programming Languages Explained](https://mikkegoes.com/14-programming-languages-explained/)
+
+## 1. What is web development?
+
+In HackYourFuture we focus on `web programmming` (also known as `web development`): writing code that creates websites and web applications. Look at the following video to learn about what you'll be doing:
+
+- [What does a web developer do?](https://www.youtube.com/watch?v=GEfuOMzRgXo)
+
+## Web development vs. software development
+
+The field of programming is broad. As a software developer (a general term for anyone that writes code to create software) there are several career paths you might take. The following are some of the biggest:
+
+1. **Web**. Developing websites and web applications to be accessed and used in the browser
+2. **Mobile**. This refers mostly to Android and iOS application development
+3. **Desktop**. Every application on your computer has been made by desktop developers
+4. **Data science**. Writing custom programs to extract patterns from big piles of data is what this developer does
+5. **Gaming**. Game developers work with a variety of designers, artists and testers to realize a video game
+6. **Quality Assurance**. Applications need to be tested, and these developers write tests that check for the correct working of any piece of code
+
+Read the following article to read more about different career paths:
+
+- [Software Development Career Paths](https://simpleprogrammer.com/software-development-career-paths/#title-career-developer-options)
+
+Note: once you've chosen a certain track it doesn't mean you can't try out any other! If anything, you are encouraged to explore and see what fits your taste, while building your career :)
+
+### Web development vs. web design
+
+You might have heard these terms used interchangeably. They are, however, two different things. A web developer writes code and handles the logical, technical side. A web designer decides how things are going to look and handles the creative side. The following video will explain this more clearly:
+
+[Web Developer vs. Web Designer](https://www.youtube.com/watch?v=bDtxF7qSofg)
+
+### Websites vs. web applications
+
+Before we get started with the meat of the module (which is JavaScript), we need to make a small but important distinction: are we going to make websites or web applications? For non-developers, there is no difference but for you as a developer you must know what it is that you'll be producing.
+
+The difference between a website and a web application is the difference between [Wikipedia](https://www.wikipedia.org) and [Facebook](https://wwww.facebook.com). In Facebook, the data shown changes depending on the user. If you are logged in, you'll see different things than that I will. However, on Wikipedia the information will always be the same, for both you and me.
+
+In other words, we're talking about `static`(= website) versus `dynamic` (= application) sites: a static site always has the same information and serves only to be information, while a dynamic site changes the data shown to the user depending on who it is and what their interactivity on the page is.
+
+Read the following articles to learn more about this:
+
+- [Website vs. Web Application](https://www.seguetech.com/website-vs-web-application-whats-the-difference/)
+- [Static vs. dynamic websites](https://www.youtube.com/watch?v=4sP7fp3cp24)
+
+## 3. What is JavaScript?
+
+JavaScript is a programming language. We use it to communicate with the browser, software that allows us to access the Internet and open webpages. It is essential to learn in order to become a web developer.
+
+You've already learned what HTML and CSS do. Javascript is the third part that makes the circle complete. If we liken the three to the human body, we could say that HTML provides the skeleton with all the basic content, CSS makes the skin/shape to determine the look, and JavaScript is the brain and muscles to allow for interactivity.
+
+
+
+The main use for JavaScript is to make your webpage interactive: for example, if you click a button it will open a popup. Or if you scroll over an image, it changes its color.
+
+Check the following resources to learn more about it:
+
+- [What is JavaScript?](https://www.youtube.com/watch?v=nItSSTwBvSU)
+- [What does JavaScript do and what is it used for?](https://www.youtube.com/watch?v=OSWppEa2Zac)
+
+## 4. What are variables?
+
+A `variable` is a box that contains a piece of information, to be saved for later use. You give it a name that describes what its contents are, and to also refer to it at a later point.
+
+- [Beginner Programming Concepts - What's a Variable?
+ ](https://www.youtube.com/watch?v=Jvrszgiexg0)
+
+### The keywords: let, const, var
+
+The concept of a `variable` is a central concept within programming. It's applied the same way across almost all programming languages. In JavaScript we apply it by using a special `keyword`, a word that is reserved by the language because it has a special meaning.
+
+The keywords are `var`, `let` and `const`.
+
+Read more about this in the following article:
+
+- [Variables](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md)
+
+A variable always contains a `value`: the piece of information that you want to save and refer to at a later stage. Read more about this here:
+
+- [Values](https://www.github.com/hackyourfuture/fundamentals/blob/master/fundamentals/values.md)
+
+When creating variables, it's important to think about the right name to give it. It should always reflect what "type" of data it contains and what its purpose is. You (and other developers that will read your code) should be able to read a variable name and know what its purpose is.
+
+Why do we need variables? You'll be using variables **to manipulate its content** (the value inside the variable). Why would you want to do this? For most of the time, you want to perform some kind of calculation. The most basic example is the following:
+
+```js
+const one = 1;
+const two = one + one;
```
-In week two we will discuss the following topics:
-• Intro JavaScript (What is it, where can you use it for)
-• Variables [var, let, const]
-• Basic Data types [Strings, Numbers, Arrays, Booleans]
-• Operators
-• Naming conventions
-```
-## How to get started
-1. Download and install the *LTS* version of NodeJS - https://nodejs.org/en/download/
-To test that it was installed and running properly, go to your terminal and run the command: node -v You should get the node version printed on your terminal, for example, v8.9.1
-2. Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free VSCode editor, which is supported on Windows, Mac and Linux. Please refer to our [VSCode Tips](../VSCodeTips/README.md) for more information.
+Here we have assigned to a new variable the calculation `one` plus `one`. Why have we put the end result into a new variable? It is because the result of the calculation will **not be remembered** later. Memory works differently in computers: after a calculation is finished a computer thinks its job is done. The result will not exist after, unless explicitly captured within a variable.
+
+This is something that you will learn when you start coding yourself. If you can't wait you can already look at the [homework](./MAKEME.md).
+
+## 5. What are data types?
+
+A data type is a category of data. It tells the code interpreter what kind of data it is reading so it knows how to process and optimally store it in memory.
+
+An example of this is the `Number` type. In most programming languages, when it reads the number `2` it doesn't know that it's a number. It needs to be told that the character `2` is of the `Number` data type.
+
+## 6 Basic types
+
+There are about `6 basic data types` in JavaScript:
+
+- `String`
+- `Number`
+- `Boolean`
+- `Object`
+- `Array`
+- `Function`
-## Here are resources that we like you to read as a preparation for the coming lecture:
+A data type, or data structure, is a way of organizing information. Computers need to know how to look at any piece of information, and it can interpret it only if it fits into one of the aforementioned data types.
-Please watch the following parts of the course, [Programming Foundations Fundamentals](https://www.lynda.com/Programming-Foundations-tutorials/Welcome/83603/90426-4.html) on Lynda.com (if you don't have access to Lynda yet ask Gijs):
+You can read more about them in the following article:
-Only watch the below chapters:
+- [JavaScript Data Types](https://www.tutorialrepublic.com/javascript-tutorial/javascript-data-types.php)
+- [JS Data Types](https://www.w3schools.com/js/js_datatypes.asp)
+- [Variables & Data Types](https://www.youtube.com/watch?v=Hrd3SfCCXZw)
-0. Introduction
-1. Programming Basics
-2. Core Programming Syntax
-3. Variables and Data Types
+Why do you need to know this? Again, this goes back to computers not being very smart: it needs to know **exactly** how to look at things, what to do with it and in what order.
-- Read this ~ http://speakingjs.com/es5/ch01.html read up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class)
+In JavaScript, the data types allow us to store various types of information, and perform manipulations on them. You'll learn more about them at a later stage.
-- Read the entire JavaScript Introduction at MDN~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
+## Extra resources
-- Helpful resource: http://jsbooks.revolunet.com/ (here you can find tons of free JavaScript books online)
+If you feel like you need more information to fill in the gaps of your understanding, check out the following resources to learn more about the basics of JavaScript:
-:star: You can also already go through the [review](/Week2/REVIEW.md) of the upcoming lecture. :star:
+- [Introduction to JavaScript Development](https://www.udemy.com/refactoru-intro-js)
-_Please go through the material and come to class prepared!_
+## Finished?
+Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md).
diff --git a/Week1/REVIEW.md b/Week1/REVIEW.md
deleted file mode 100644
index 31ea60ec2..000000000
--- a/Week1/REVIEW.md
+++ /dev/null
@@ -1,332 +0,0 @@
-# REVIEW JavaScript Basics week 1
-
-```
-This review covers:
-• some commands taught by Unmesh in class today
-• Intro JavaScript (What is it, where can you use it for)
-• Variables [var, let, const]
-• Basic Data types [Strings, Numbers, Arrays]
-• Operators
-```
-
-## CLI
-```
-pwd : present working directory
-ls : List files in the directory
-cd : change the directory
-touch: Create an empty file
-echo : display the string
-echo -n : Display the string without newline
-echo “something” > file : Redirect the output of echo and create file
-echo “another thing” >> file : Append the string to the file
-mkdir: make a new directory
-cd ~ : home
-cd - : previous directory
-cd .. : parent directory
-ls -a : List all files including hidden files
-cd / : change to the root directory
-cat : Concatenate the file line by line and display it on the terminal
-less: Print the big file line by line
-vim