Merge branch 'master' into improve-lessonplan-3

Author: NoerGitKat

README.md

@@ -11,51 +11,73 @@ In this module you'll make a start into wonderful world of programming. We will
 
 You'll be learning two main things:
 
-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.
+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.
 
-   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**.
+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**.
 
-2. How to think like a programmer
-   In one sentence this means: **knowing how to solve problems computationally**. 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.
+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.
 
-   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**.
+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/v10.16.0/node-v10.16.0-x64.msi)
-- For Mac, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0.pkg)
-- For Linux, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz)
+-   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 `v10.14.2` or higher.
+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)
 
 ## 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 buildingblocks of JavaScript
-- Correctly write and use variables, functions and loops
-- Understand the control flow
-- Think like a programmer
+-   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
 
-This repository consists of 3 parts:
+This repository consists of 3 essential parts:
 
-1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.
-2. `Homework`: this document contains the instructions for each week's homework.
-3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
+1. `README`: this document contains all the required theory you need to understand **before** class. It's also meant as a reference to understand what you're doing while you're coding.
+2. `MAKEME`: this document contains the instructions for each week's homework.
+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!
 
-After your first class you should start with checking the `reading materials` for that week. So, for the first time that is the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.
+**Before** the first class of the module you should start off with the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After your first class, you can get started with the [Week 1 Homework](/Week1/MAKEME.md).
 
 If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
 

Week1/LESSONPLAN.md

@@ -34,42 +34,18 @@ Examples the two different kind of websites
 
 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
-
-
-    It is faster to load as compared to the other type of website.
-
-
-    It is slower then static website.
-
-
-
-    Lower Development costs.
-
-
-
-    Content may change everytime the page is loaded.
-
-
-    Feature of Content Management System.
-
-
-    HTML, CSS, Javascript is used for developing the website.
-
-
-    Same content is delivered everytime the page is loaded.
+- 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
 
@@ -88,7 +64,7 @@ Discuss in class which claim belongs to which type of website:
           - Easy to pull in data on stuctured and organised way
           - Content management system
         Disadvantage:
-          - Design is more fixed, becasue the pages are more of a template
+          - Design is more fixed, because the pages are more of a template
           - Costs
 
 ## 2. The pillars of web development: HTML/CSS/JavaScript
@@ -130,10 +106,9 @@ A big disadvantage of web pages like this is that the only way that a visitor ha
 It doesn't exhibit any dynamic behavior like:
 
 1. reacting to user actions such as mouse click events or key presses.
-1. rendering complex animations
-1. sending requests over network to servers and fetching a response
-1. and this is where JavaScript steps in.
-   <<<<<<< HEAD
+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
 
@@ -173,8 +148,10 @@ console.log(age);
 
 ```javascript
 // Variable Initialization
-var firstName = 'Marco';
-let lastName = 'Borsato';
+
+var firstName = "Yash";
+let lastName = "Kapila";
+
 const age = 29;
 
 console.log(firstName);
@@ -183,15 +160,15 @@ console.log(age);
 ```
 
 ```javascript
-var firstName = 'Tom';
-let lastName = 'Hanks';
+var firstName = "Tom";
+let lastName = "Hanks";
 
 console.log(firstName);
 console.log(lastName);
 
-// Assigning a different value to variables
-firstName = 'Katy';
-lastName = 'Perry';
+// Assigning variables to a different value
+firstName = "Hanks";
+lastName = "Tom";
 
 console.log(firstName);
 console.log(lastName);
@@ -201,12 +178,13 @@ console.log(lastName);
 
 1. Create 2 variables using the `let` keyword
 
-   1. make 1 variable contain your first name
-   1. the second variable should have no value assigned
+   - make 1 variable contain your first name
+   - the second variable should have no value assigned
 
 1. Make 2 variables using the `const` keyword
-   1. the first variable should contain the town/city you currently stay at
-   1. come up with name and a value for the second variable yourself
+   - the first variable should contain the city you currently stay at
+   - come up with name and a value for the second variable yourself
+
 
 ### Essence
 
@@ -246,6 +224,7 @@ Whenever you declare a variable (using `let`), but you don't set a value, the va
 
 ### 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

Week1/MAKEME.md

@@ -26,9 +26,11 @@ In the following exercises you'll learn how to use different JavaScript concepts
 
 **Exercise 1: Hello world!**
 
-Write a statement, using the `console.log()` function. Give it a string as an argument. The string should contain the message "Hello world!".
+Write a statement, using the `console.log()` function. It should fulfill the following requirements:
 
-Write 10 statements like these, but in different languages.
+- 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:
 
@@ -38,38 +40,44 @@ Ciao, mondo! // Italian
 Hola, mundo! // Spanish
 ```
 
-Using the command line, navigate to your `js-exercises` folder and type in the following to test your code:
+Finished? Using the command line, navigate to your `js-exercises` folder and type in the following to test your code:
 
-```
-node FILENAME.js
+```console
+foo@bar:~$ node FILENAME.js
 ```
 
-It should show the message `Hello world!` in 10 different languages.
+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');
+console.log('I'm awesome'!;
 ```
 
-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. **Correct the mistake**.
+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).
 
-Hint: the SyntaxError message will give you some indication of what the error _might_ be, but figure out yourself how to correct it!
+- **Correct the mistake**.
 
-When done right, it should show the message `I'm awesome`.
+> 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 value) yet.
-2.  Add a `console.log` statement that explains in words _what you think_ the value of `x` is, like in this example.
+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`.
+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**
 
@@ -86,7 +94,7 @@ Follow the steps. Make sure that each step is written on the line after.
 
 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.
+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`.
@@ -115,7 +123,14 @@ Follow the steps. Make sure that each step is written on the line after.
 
 **Exercise 8: Type checker**
 
-Write a program that checks the data types of two variables and logs to the console `SAME TYPE` if they are the same type. If they are different types log `Not the same...`.
+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
@@ -142,14 +157,16 @@ if (...) {
 
 **Exercise 9: Log the remainder**
 
-For each of these, write in comments what the answer is followed by how you came to that conclusion
+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
 
@@ -163,19 +180,23 @@ console.log('The length of the array is...' + ...);
 
 ## **3. Code along**
 
+> Create a new GitHub repository for this project. It's a portfolio piece!
+
 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.
 
-You'll first write the HTML and CSS, to provide structure and style to the page. When doing so, keep notice of 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?
+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?
 
 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!
 
 - [Calculator](https://www.youtube.com/watch?v=6v4vBXL-qkY)
 
 ## **SUBMIT YOUR HOMEWORK!**
 
-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 forked repository (a copy from the original, which in this case is the [JavaScript1](https://www.github.com/HackYourFuture/JavaScript1) repository) using GIT.
+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.
+
+Go over to [HackYourHomework/JavaScript1](https://www.github.com/HackYourHomework/JavaScript1). Notice how it's **HackYourHomework**, a repository meant to submit the homework!
 
-Take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done.
+Then take a look at the following [guide](../hand-in-homework-guide.md) to see to set everything up.
 
 The homework that needs to be submitted is the following: