Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.
Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top!
A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs!
On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done in a smarter, different way. In programming we call these paradigms and in this module you'll learn one such paradigm: Object-Oriented Programming!
In the following weeks we will be using a "style guide" to help you write "clean code". Because code is not only meant to be run by computers, but also to be read by humans (your colleagues, and the future version of you), it's best to make your code good. If your code is readable and nicely formatted, you're doing your colleages (and future you) a great service. The idea of a "style guide" comes from visual design, where companies often have a "visual style". For example, watch the following video to get an idea of this:
Similar to how designers have style guides for their design work, programmers often have "programming style guides". This is set of rules to follow when writing/formatting your code. The styleguide we'll be using is the one from Airbnb:
The style guide we'll be using is the one from Airbnb:
While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23.
We also have tools that can automatically check whether your code is correctly formatted according to a style guide. These tools are called "linters". We will be using the JavaScript linter called "ESLint". The following packages are already added to this repository's package.json:
The required packages you need to install before you write code according to the style guide are the following:
"eslint"
"eslint-config-airbnb-base"
"eslint-config-prettier"
"eslint-plugin-import"
"eslint-plugin-prettier"
"prettier"They are already in this repository's package.json so all you have to do now to prepare is to execute the following command at the root of this module directory:
npm installBefore you start with the homework, make sure you've made a fork of the right repository: HackYourHomework/JavaScript3). Once you've cloned it to your computer you can proceed by making GIT branches for each week. Start at the master branch and execute the following (note that they're 3 different commands):
foo@bar:~$ git branch week1-YOURNAME
foo@bar:~$ git branch week2-YOURNAME
foo@bar:~$ git branch week3-YOURNAMEThen execute git checkout week1-YOURNAME and you can get started!
If you have any questions or if something is not entirely clear ¯_(ツ)_/¯, please ask/comment on Slack!
In order to successfully complete this module you will need to master the following:
- Learn what an
Application Programming Interface(API) is - Catch up on the
history of JavaScript - Understand how to write more readable
asynchronous JavaScript - Connect with different
public APIs - Build a
Single Page Application(SPA) - Work with pre-existing code
- Learn about
Object-Oriented Programming
This repository consists of 3 essential parts:
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 weekMAKEME: 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.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!
Let's say you are just starting out with the JavaScript3 module. This is what you do...
- The week always starts on Wednesday. First thing you'll do is open the
README.mdfor that week. For the first week ofJavaScript3, that would be Week1 Reading - 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 JavaScript2 module)
- On Friday you start with the homework, found in the
MAKEME.md. For the first week ofJavaScript3, that would be Week1 Homework - You spend Friday and Saturday playing around with the exercises and write down any questions you might have
- DEADLINE 1: You'll submit any questions you might have before Saturday 23.59, in the class channel
- 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
- You spend Monday and Tuesday finalizing your homework
- 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
- 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 or ask your mentor/class on Slack!
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 Stasel Seldin: senior iOS developer!
You can find out more about him here:
Learn from Stasel in the following playlist of videos he has made for you! (Click on the image to open the link)
| Week | Topic | Reading Materials | Homework | Lesson Plan |
|---|---|---|---|---|
| 1. | Application Programming Interface (API), AJAX, Modules & Libraries | Reading W1 | Homework W1 | Lesson Plan W1 |
| 2. | Promises, Fetch API, JavaScript Versions, 'this' keyword, Arrow functions | Reading W2 | Homework W2 | Lesson Plan W1 |
| 3. | Object-Oriented Programming (OOP), ES6 Classes, Async/await, Thinking like a programmer III | Reading W3 | Homework W3 | Lesson Plan W1 |
| 4. | Final JavaScript Test | Details | - | - |
Did you finish the module? High five!
If you feel ready for the next challenge, click here to go to Node.js!
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.
