diff --git a/README.md b/README.md index beb0707f..15240d02 100644 --- a/README.md +++ b/README.md @@ -24,21 +24,21 @@ In order to successfully complete this module you will need to master the follow This repository consists of 2 essential parts per week: -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. +1. `README`: this document contains all the required theory you need to understand **while** working on the assignments. 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 assignments. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. ### How to study Let's say you are just starting out with the Using API's 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 `Using API's`, 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 JavaScript2 module) -3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `Using API's`, that would be [Week1 Homework](/Week1/MAKEME.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 assignments (from the JavaScript2 module) +3. On **Friday** you start with the assignments, found in the `MAKEME.md`. For the first week of `Using API's`, that would be [Week1 Assignments](/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 +7. You spend **Monday** and **Tuesday** finalizing your assignments +8. **DEADLINE 2**: You submit your assignments 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: @@ -49,10 +49,10 @@ To have a more detailed overview of the guidelines, please read [this document]( ## Planning -| Week | Topic | Reading Materials | Homework | +| Week | Topic | Reading Materials | Assignments | | ---- | ----- | ----------------- | -------- | -| 1. | Synchronous vs asynchronous, Callbacks, Promises, The Event Loop | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | -| 2. | Application Programming Interface (API), Fetch, Async/await | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | +| 1. | Synchronous vs asynchronous, Callbacks, Promises, The Event Loop | [Reading W1](/Week1/README.md) | [Assignments W1](/Week1/MAKEME.md) | +| 2. | Application Programming Interface (API), Fetch, Async/await | [Reading W2](/Week2/README.md) | [Assignments W2](/Week2/MAKEME.md) | | 3. | Individual project + Interview as test | [Project](/Week3/README.md) | ## Finished? diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 171ebb56..cb8cac16 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,17 +1,18 @@ -# Homework Using API's Week 1 +# Assignments Using API's Week 1 ## **Todo list** 1. Practice the concepts 2. Prep exercises -3. Homework exercises +3. Assignments exercises +4. Career Training 1 (If not completed yet) ## **1. Practice the concepts** This week is tough, asynchronous coding is another one of these programming things that takes awhile to get your head around. Let's start this week off with some interactive exercises! Visit the following link to get started: - [Visualising Asynchronicity](https://www.jsv9000.app/). _Note that you do not need to actually solve anything here, but you can use this visualizer to see how asynchronicity works under the hood. Very cool!_ -- [Learn JavaScript: Promises](https://www.codecademy.com/learn/learn-intermediate-javascript/modules/javascript-promises). _Note that the last exercise is not necessary, it is very complicated and something that is rarely used. You will not need to be able to do this. See it as a challenge!_ +- [Learn JavaScript: Promises](https://www.codecademy.com/courses/learn-intermediate-javascript/lessons/promises/exercises/constructing-promises). _Note that the last exercise is not necessary, it is very complicated and something that is rarely used. You will not need to be able to do this. See it as a challenge!_ - [JavaScript promises, mastering the asynchronous](https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/what-is-asynchronous-in-javascript) ## **2. Prep exercises** @@ -20,11 +21,18 @@ This week is tough, asynchronous coding is another one of these programming thin Inside your `Using API's` fork, go to the folder `Week1`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. -## **3. Homework exercises** +## **3. Assignments exercises** -This week we expect you to do the exercises in the corresponding module/week folder (Using API's / Week 1). Have a look at the [homework guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/homework-handin-guide.md) to see how to hand in your homework. +This week we expect you to do the exercises in the corresponding module/week folder (Using API's / Week 1). Have a look at the [assignments guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/hand-in-assignments-guide.md) to see how to hand in your assignments. -*NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous homework will be a part of the PR* +*NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous assignments will be a part of the PR* + +## **4. Career Training 1 (If not completed yet)** + +Remember that the Career Training 1 session is coming up (check your class channel on slack for the exact date). Before the session make sure you have: + +- Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand). +- Done the [assignments](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository. ## Done early? diff --git a/Week1/README.md b/Week1/README.md index b504e55b..4a45c1f5 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -14,8 +14,6 @@ These are the topics for week 1: - Chaining - Benefits 3. [The Event Loop](https://study.hackyourfuture.net/#/the-internet/event-loop) -4. [Career Training II (Interview preparation)](https://github.com/HackYourFuture/interviewpreparation) - ## Week goals @@ -25,9 +23,6 @@ In this module we are going to learn how to connect our applications with data s Lastly, as we now know everything about asynchronicity, we can look at the browser's [Event Loop](https://study.hackyourfuture.net/#/the-internet/event-loop) which every browser implements. This will help you understand how and when your code gets executed in the browser. This will help you decide where to link up your code with the DOM so that it does what you expect. -## Career training II (Interview preparation) -Finally it is time to continue with developing your soft skills to ace those job interviews. For that, have a look at the [interview preparation repo](https://github.com/HackYourFuture/interviewpreparation). It is a lot to get through, so you may need some time next week as well. There is no homework for this week, but there is some homework for the career training next week, you can already have a look at it if you find these things difficult. - ## Finished? Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md). diff --git a/Week1/prep-exercises/1-catwalk-promises/README.md b/Week1/prep-exercises/1-catwalk-promises/README.md index cb3063c2..ffc2b8c8 100644 --- a/Week1/prep-exercises/1-catwalk-promises/README.md +++ b/Week1/prep-exercises/1-catwalk-promises/README.md @@ -2,7 +2,7 @@ In the Browsers module you made an exercise to make a cat walk on the screen until it was halfway, then do a dance for 5 seconds after which it will continue walking until the end of the screen. In this exercise the result should be the same, but this time we want to use `Promise`s to write it in a different way. -Have a look [here](https://github.com/HackYourFuture/Homework/tree/main/2-Browsers/Week1#exercise-5-the-cat-walk) to remind yourself what the goal of the code was and then do the steps written in `index.js`. We have already provided a couple of functions for you. +Have a look [here](https://github.com/HackYourFuture/Assignments/tree/main/2-Browsers/Week1#exercise-5-the-cat-walk) to remind yourself what the goal of the code was and then do the steps written in `index.js`. We have already provided a couple of functions for you. ## Things to think about diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 90f37969..b5222824 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,11 +1,11 @@ -# Homework Using API's Week 2 +# Assignments Using API's Week 2 ## **Todo list** 1. Practice the concepts 2. Prep exercises 3. Code along -4. Homework exercises +4. Assignments exercises 5. Interview preparation 6. Extra: Code along @@ -29,15 +29,18 @@ In the following "code along" you'll be building a complete Weather App that mak - [Build a Weather App with Vanilla JavaScript Tutorial](https://www.youtube.com/watch?v=wPElVpR1rwA) -## **4. Homework exercises** +## **4. Assignments exercises** -This week we expect you to do the exercises in the corresponding module/week folder (Using API's / Week 2). Have a look at the [homework guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/homework-handin-guide.md) to see how to hand in your homework. +This week we expect you to do the exercises in the corresponding module/week folder (Using API's / Week 2). Have a look at the [assignments guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/hand-in-assignments-guide.md) to see how to hand in your assignments. -*NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous homework will be a part of the PR* +*NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous assignments will be a part of the PR* -## **5. Interview preparation** +## **5. Career Training 1 (If not completed yet)** -After reading the info on the [‘Interview Preparation’ Repo](https://github.com/HackYourFuture/interviewpreparation), make a copy of [this file](https://docs.google.com/document/u/2/d/114rTGS4eG6tpkrMAyVIdvgTrnpmkRL6ax_smkw1B0HI/copy) and submit your answers to the team [here](https://hackyourfuture.typeform.com/to/s6zYAugm). These answers will help us assess how ready you are for interviews and we will also discuss your answers in the Career Training Session II which will happen this (or next) week. More information about this session will be shared on Slack! +Remember that the Career Training 1 session is coming up (check your class channel on slack for the exact date). Before the session make sure you have: + +- Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand). +- Done the [assignments](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository. ## **6. Extra: Code along** @@ -51,4 +54,4 @@ He uses some things that will be new for you: ## Done early? -Have a look at the project for next week and start thinking of ideas. You can even start a bit already if you wish, just remember to make sure all your homework is done beforehand! +Have a look at the project for next week and start thinking of ideas. You can even start a bit already if you wish, just remember to make sure all your assignments is done beforehand! diff --git a/Week2/README.md b/Week2/README.md index 5c54dfaf..a05fd1c4 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -7,10 +7,11 @@ These are the topics for week 2: 1. [Application Programming Interface (API)](https://study.hackyourfuture.net/#/the-internet/api) - Public/private APIs - Connecting with APIs -2. [Fetch API](https://study.hackyourfuture.net/#/the-internet/fetch) -3. [Async/Await](https://study.hackyourfuture.net/#/javascript/modern-js) +2. [Fetch API](https://study.hackyourfuture.net/#/the-internet/fetch) +3. [CORS](https://study.hackyourfuture.net/#/the-internet/cors) +4. [Async/Await](https://study.hackyourfuture.net/#/javascript/modern-js) - Catching errors with try/catch -4. [Interview preparation](https://github.com/HackYourFuture/interviewpreparation) +5. [Career Training I](https://github.com/HackYourFuture/yourpersonalbrand): Not all at once! ## Week goals @@ -22,11 +23,14 @@ There are many ways to request data from an API, initially everything was done u Last week we learned about Promises and with the increased use of promises, modern JavaScript introduced some new syntax that can be used with those promises. Have a look at the section on Async/await in the modern JavaScript page of your study book [here]((https://study.hackyourfuture.net/#/javascript/modern-js)) now that you know what promises are so that you know what it does. -You will probably ask yourself now which way is best to handle asynchronous code and the answer is that there is no best way. Generally callbacks are great for simple applications, but get into callback hell if stuff gets too complicated. Promises with `.then` chains are great for more complex situations where the chaining can be very powerful, but can be a little hard to follow for people who do not have much experience with them. Using async/await makes the code look a little more synchronous again and that can make it easier to follow. It does, however, make it a little more complex to handle errors or situations where something absolutely needs to be done (a `finally` is invaluable in these situations). So, it is up to you to decide based on the situation what to use. +You will probably ask yourself now which way is best to handle asynchronous code and the answer is that there is no best way. Generally callbacks are great for simple applications, but get into callback hell if stuff gets too complicated. Promises with `.then` chains are great for more complex situations where the chaining can be very powerful, but can be a little hard to follow for people who do not have much experience with them. Using async/await makes the code look a little more synchronous again and that can make it easier to follow. It does, however, make it a little more complex to handle errors or situations where something absolutely needs to be done (a `finally` is invaluable in these situations). So, it is up to you to decide based on the situation what to use. -## Career training II (Interview preparation) -If you haven't finished all the material yet, then continue with it this week. +## Career Training I (Your personal brand) -## Finished? +Since you completed Browsers, you now have a first project to write down on your CV! You will add many more in the future, as you progress in your abilities. It is therefore time to start thinking about all of the steps required to start the job search and to get accepted to your first programming job. The first step will be handled in the Career Training I: _your personal brand_. We will cover how to present your CV, GitHub, LinkedIn, etc. to that they stand out. These are the first things employers will look at, so they convey a first impression of you and has to be great! We have compiled a big list of information about how to go about creating your personal brand in [this repo](https://github.com/HackYourFuture/yourpersonalbrand). -Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md). +### Career Training I: Planning + +You don't have to do all of this immediately. Somewhere this week you will receive a message in your cohort channel from Giuseppina to plan the Career Training I. *Before* that session, make sure to have: +- Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand). +- Done the [assignment](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository. diff --git a/Week3/README.md b/Week3/README.md index 3044ca7f..43b63a04 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -2,25 +2,27 @@ In the final week of the Using API's module you will put everything you have learned to good use and build your own single page application that is connected to an API! What you build is totally up to you. Maybe you already had an idea in your head for a while, or maybe you will get inspired by all the open API's that are available. -This is quite a big undertaking, so during the project one of the mentors for this module will be assigned to you. Feel free to ask them for help if you are stuck or unsure, but they have been instructed to not write any code for you :). +This is quite a big undertaking, so you will have a mentor assigned to you to assist you in the project. Feel free to ask them for help if you are stuck or unsure, but they have been instructed to not write any code for you :). ## Project requirements We want you to get excited and be free to build something you are passionate about, but there are some things that we need to see you have mastered. This means there are a few requirements: - The app needs to be responsive. -- The app needs to be a single page application. That means there should be only one `index.html` file and JavaScript needs to update the html using DOM manipulation. +- The app needs to be a single page application. That means there should be only one `index.html` file and JavaScript needs to update the HTML using DOM manipulation. - The app needs to interact with an API to grab data. - The app needs to have loading/error handling for the interaction with the API and needs to show this to the user, not just a `console.log`. - The app needs some user interaction such that you need to grab different data from the API. So you cannot just grab everything from the API and store it locally with one fetch. +- You are *not* allowed to do a code-along or tutorial for this project, the goal is for you to build something yourself! - Follow the [guidelines for technical assignments](https://github.com/HackYourFuture/ta_guidelines) to already practice making these for later. This will also help you not get stuck or end up with only half an application and make sure that what you have at the end is something presentable. ## Ideas There are many APIs that are open to get data from, have a look at the following lists to see if there is a topic that interests you: - [publicapi.dev](https://publicapi.dev) -- [public api repo](https://github.com/public-apis/public-apis) +- [public API repo](https://github.com/public-apis/public-apis) - [API list](https://apilist.fun/) -- [Public APIs](https://public-apis.io/) +- [Public APIs](https://publicapis.io/) +- [RapidAPI](https://rapidapi.com/hub) When looking to see if an API is suitable for you there are a couple of questions to check: 1. Is the API rated, and if so how? @@ -43,10 +45,10 @@ If you really are stuck and have no inspiration, have a chat with your project m Something like [this extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) will make it easier to work with an API. If your request returns JSON, which the API's do, it will format it nicely in your browsers so that you can easily navigate what the API is giving you. ## Final product -The final product (the repository is the product, not just the application) should be something that you can show off on your CV. So have a look at our technical assignment guidelines [here](https://github.com/HackYourFuture/ta_guidelines) and our design guidelines [here](https://github.com/HackYourFuture/design_guidelines) to see what it entails. By following those guidelines your app AND your code will look great, making it a great thing to show off to employers. You will also get into the habit of doing this with all the technical assignments you will get during your job search. +The final product (the repository is the product, not just the application) should be something that you can show off on your CV. So have a look at our technical assignment guidelines [here](https://github.com/HackYourFuture/ta_guidelines) and our design guidelines [here](https://github.com/HackYourFuture/design_guidelines) to see what it entails. By following those guidelines your app _and_ your code will look great, making it a great thing to show off to employers. You will also get into the habit of doing this with all the technical assignments you will get during your job search. ## Planning and deadlines -There are only 2 deadlines in the project, how you divide your time for the rest is up to you. +There are only two deadlines for the project; how you divide your time for the rest is up to you. ### Deadline 1: Project definition By *Thursday 18:00PM CET* (but the earlier the better) you should send a short description of what your app will be as well as the name of the company whose brand/colour palette you will be mimicking to your project mentor. @@ -73,5 +75,3 @@ _Note: following the technical assignment guidelines will also be a part of the As you are all working on the projects this week there will not be a Q&A session on Sunday. Enjoy getting practical! - - diff --git a/assets/usingapis.png b/assets/usingapis.png index 7fc585c5..ff8bb1ad 100644 Binary files a/assets/usingapis.png and b/assets/usingapis.png differ diff --git a/hand-in-assignments-guide.md b/hand-in-assignments-guide.md new file mode 100644 index 00000000..45b251df --- /dev/null +++ b/hand-in-assignments-guide.md @@ -0,0 +1,35 @@ +# How to hand in assignments + +In this module you'll submit your assignments only using GIT and GitHub. + +1. [GitHub](https://www.github.com/HackYourFuture/UsingAPIs) + +## 1. GitHub assignments guide + +HYF Video + +Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your assignments: + +ONE TIME ONLY (START OF EVERY MODULE) + +This module is slightly different as you have already done the one time setup for the assignments repo in the previous module. We will be using the same fork as we used there (`https://www.github.com/HackYourAssignment/Assignments-classXX`). + +EVERY WEEK + +1. Do a `git pull` on your main branch to get the latest version. +2. Create a new branch for each week you have assignments. For example, for the week 1 assignments for Using API's create a branch called `YOUR_NAME-w1-UsingAPIs`. Don't forget to checkout this branch after creating it. +3. Make your assignments! +4. Once you're finished, add your assignments to a commit. There will be some test and config files added by the test runner, this is expected and should be added! +5. Create the commit (`git commit`). Make the commit message meaningful, for example `finished project for assignments week1`. +6. Push the branch to your forked repository +7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is your teacher's repository, on branch master +8. Give the pull request a title in the following format: + +```markdown +Assignments week 1 +``` + +9. Submit the pull request from your forked repository branch into the `main` branch + +If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! + diff --git a/homework-handin-guide.md b/homework-handin-guide.md deleted file mode 100644 index 95f83868..00000000 --- a/homework-handin-guide.md +++ /dev/null @@ -1,35 +0,0 @@ -# How to hand in homework - -In this module you'll submit your homework only using GIT and GitHub. - -1. [GitHub](https://www.github.com/HackYourFuture/UsingAPIs) - -## 1. GitHub homework guide - -HYF Video - -Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your homework: - -ONE TIME ONLY (START OF EVERY MODULE) - -This module is slightly different as you have already done the one time setup for the homework repo in the previous module. We will be using the same fork as we used there (`https://www.github.com/HackYourHomework/Homework-classXX`). - -EVERY WEEK - -1. Do a `git pull` on your main branch to get the latest version. -2. Create a new branch for each week you have homework. For example, for the week 1 homework for Using API's create a branch called `YOUR_NAME-w1-UsingAPIs`. Don't forget to checkout this branch after creating it. -3. Make your homework! -4. Once you're finished, add your homework to a commit. There will be some test and config files added by the test runner, this is expected and should be added! -5. Create the commit (`git commit`). Make the commit message meaningful, for example `finished project for homework week1`. -6. Push the branch to your forked repository -7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is your teacher's repository, on branch master -8. Give the pull request a title in the following format: - -```markdown -Homework week 1 -``` - -9. Submit the pull request from your forked repository branch into the `main` branch - -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! - diff --git a/package.json b/package.json index 685329c3..bad9aaf5 100755 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Course content for the JavaScript3 module", "repository": "https://github.com/HackYourFuture/JavaScript3.git", "scripts": { - "lint": "eslint homework", + "lint": "eslint assignments", "test": "npm run lint" }, "author": "HackYourFuture",