diff --git a/README.md b/README.md index 1e4a67b20..5e3f75cff 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,7 @@ -> If you are following the HackYourFuture curriculum we recommend you to start with module 1: [HTML/CSS/GIT](https://github.com/HackYourFuture/HTML-CSS). To get a complete overview of the HackYourFuture curriculum first, click [here](https://github.com/HackYourFuture/curriculum). - -> Please help us improve and share your feedback! If you find better tutorials -> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript1/pulls). - -# Module #2 - JavaScript 1: Programming Basics (Frontend) - -![JavaScript1](./assets/javascript1.png) +# DEPRECATED - JavaScript 1 +This module has been replace with the JavaScript module, find it [here](https://github.com/HackYourFuture/JavaScript) +``` 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! You'll be learning two main things: @@ -25,9 +20,9 @@ This should be your mindset when you're learning how to think : **I'm learning h 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) +- 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: @@ -49,45 +44,78 @@ Here are the steps to get started: 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 +`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` +- 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 **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. +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! -**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). +### 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: + +![Weekflow](assets/weekflow.png) + +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) -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! +HYF Video ## Planning -| Week | Topic | Reading Materials | Homework | Lesson Plan | -| ---- | --------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- | -| 1. | What is JavaScript?, Variables, Data Structures & Naming Conventions | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | -| 2. | Statements vs. Expressions, Control flow, Loops, Operators, Conditional statement | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W2](/Week1/LESSONPLAN.md) | -| 3. | Functions, Thinking like a programmer I, How JavaScript relates to HTML/CSS | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W3](/Week3/LESSONPLAN.md) | +| 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? @@ -97,4 +125,4 @@ If you feel ready for the next challenge, click [here](https://www.github.com/Ha _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 :)_ -Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.``` diff --git a/Week1/README.md b/Week1/README.md index 7ac369d63..bbcac17ac 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -18,6 +18,12 @@ These are the topics for week 1: 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) + +HYF Video + ## 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: diff --git a/Week2/README.md b/Week2/README.md index 015b4eee5..c9a882e9c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -11,6 +11,12 @@ These are the topics for week 2: 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) + +HYF Video + ## 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. diff --git a/Week3/README.md b/Week3/README.md index e1fff4b39..ce6e13694 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -8,6 +8,12 @@ These are the topics for week 3: 2. Thinking like a programmer I 3. How JavaScript relates to HTML & CSS +## 0. Video Lectures + +This week you'll get to know another experienced teacher, that you'll learn from more closely in the next module. His name is Wilgert Velinga, and he'll teach you all about `functions` and `scope`: [Videos 21 - 25] + +HYF Video + ## 1. Functions In programming, we often use code to perform a specific task multiple times. Instead of rewriting the same code, we can group a block of code together and associate it with one task. This is useful, because then we can reuse that block of code whenever we need to perform the task again. @@ -16,7 +22,7 @@ In JavaScript, we call these blocks of code `functions`. They are written like t ```js function multiplyTwoNumbers(number1, number2) { - return number1 * number2; + return number1 * number2; } ``` @@ -54,10 +60,10 @@ You should see it like this: a function is like a `tool` in the tool box. Only, Go over the following materials to learn more about the how and why of functions: -- [Introduction to Functions](https://www.youtube.com/watch?v=4LklwbSP--4) -- [What is a function in programming?](https://www.youtube.com/watch?v=QcCnfAxGpgg) -- [JavaScript Functions](https://www.youtube.com/watch?v=R8SjM4DKK80) -- [Functions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/functions.md) +- [Introduction to Functions](https://www.youtube.com/watch?v=4LklwbSP--4) +- [What is a function in programming?](https://www.youtube.com/watch?v=QcCnfAxGpgg) +- [JavaScript Functions](https://www.youtube.com/watch?v=R8SjM4DKK80) +- [Functions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/functions.md) ## 2. Thinking like a programmer I @@ -72,10 +78,10 @@ The second skill, problem solving, is the most important one. If you get good at Take a look at the following resources to learn more about problem solving as applied to programming: -- [How to THINK like a programmer](https://www.youtube.com/watch?v=NNazO2tMHno) -- [Problem-Solving for Developers](https://www.youtube.com/watch?v=UFc-RPbq8kg) -- [Lessons in problem solving](https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/) -- [Computational thinking](https://www.youtube.com/watch?v=qbnTZCj0ugI) +- [How to THINK like a programmer](https://www.youtube.com/watch?v=NNazO2tMHno) +- [Problem-Solving for Developers](https://www.youtube.com/watch?v=UFc-RPbq8kg) +- [Lessons in problem solving](https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/) +- [Computational thinking](https://www.youtube.com/watch?v=qbnTZCj0ugI) ## 3. How JavaScript relates to HTML & CSS @@ -83,9 +89,9 @@ Consider the following analogy. The human body needs 3 essential parts in order This is exactly how HTML, CSS and JavaScript relate to each other: -- HTML is used to put the structure of a website together -- CSS acts like the skin and makeup for the HTML. CSS improves the colors and layout of a website structure built with HTML -- JavaScript is a full-on programming language that adds interactivity and functionality to a website +- HTML is used to put the structure of a website together +- CSS acts like the skin and makeup for the HTML. CSS improves the colors and layout of a website structure built with HTML +- JavaScript is a full-on programming language that adds interactivity and functionality to a website Each technology has their own file type: `.html`, `.css` and `.js`. The HTML file is always the base, the other files (whether CSS or JavaScript) are then referenced to inside of this HTML file. HTML is the base, because that's the first file a browser will render. That's just how browsers work! @@ -105,7 +111,7 @@ It's better practice to reference inside of the ``. This is because the bi Check the following article to learn more about this: -- [The Relationship Between HTML, CSS and JavaScript Explained by Building A City](https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/) +- [The Relationship Between HTML, CSS and JavaScript Explained by Building A City](https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/) ## Finished? diff --git a/assets/week1-uday.png b/assets/week1-uday.png new file mode 100644 index 000000000..93f88c63b Binary files /dev/null and b/assets/week1-uday.png differ diff --git a/assets/weekflow.png b/assets/weekflow.png new file mode 100644 index 000000000..9da097126 Binary files /dev/null and b/assets/weekflow.png differ