diff --git a/NEXT.md b/NEXT.md index 655ac67..af5698f 100644 --- a/NEXT.md +++ b/NEXT.md @@ -5,6 +5,8 @@ So you finished this module and are now convinced that you want to become a web In the meantime you can get a head start with the curriculum to increase your chances of completing the course by continuing to learn. Have a look at the following resources that will help build your knowledge and make the next steps a lot easier. There is no particular order in these, see what you enjoy best and remember to code as much as possible yourself! - [Responsive Web Design](https://www.freecodecamp.org/learn/2022/responsive-web-design/) - You can finish off the responsive web design course and get your first certificate! -- [The JavaScript 30 by Wes Bos](https://javascript30.com/) - JavaScript30 is a great set of tutorials that build simple frontend applications using HTML/CSS/JavaScript! -- [Code Wars](https://www.codewars.com/) - Code wars is a website where you can solve exercises and rank up! When signing up, only choose JavaScript to really focus the problems on learning to solve problems in it. You can later change it to other technologies when you get more familiar. +- [The JavaScript 30 by Wes Bos](https://javascript30.com/) - JavaScript30 is a great set of tutorials that build simple but very interesting frontend applications using HTML/CSS/JavaScript! - [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript/blob/master/readMe.md) - We have already done some of the days during this module, but it would be good to continue with the 30 Days of JavaScript course! +- [Code Wars](https://www.codewars.com/) - Once you feel comfortable with the JavaScript syntax sign up for code wars to practice. It is a website where you can solve exercises and rank up! When signing up, only choose JavaScript to really focus the problems on learning to solve problems in it. You can later change it to other technologies when you get more familiar. + +And don't forget that you can even study on the go using the [Mimo app](https://getmimo.com/)! diff --git a/README.md b/README.md index 363cd5c..dfd2148 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ # HackYourFuture start -This module is your first look at what being a developer is, and at how the HackYourFuture program works. It is part of the application process, but you are free to do this module whenever you want. By completing it, you will have a better idea of what will be expected of you throughout the 7 months of studying at HackYourFuture, so you can make an informed decision on whether you want to commit your time to getting into the tech industry. +This module is your first look at what being a developer is, and at how the HackYourFuture program works. By completing it, you will also have a better idea of what will be expected of you throughout the 7 months of studying at HackYourFuture, so you can make an informed decision on whether you want to commit your time to getting into the tech industry. -Please visit our [application page](https://www.hackyourfuture.net/apply) to learn more about the selection process at HackYourFuture. Note that our course is exclusively for refugees, and your application may be declined for non-technical reasons. If you are not sure if you are eligible, please contact us at info@hackyourfuture.net with an explanation of your situation and we will get back to you. +Before diving in, please visit our [application page](https://www.hackyourfuture.net/apply) to learn more about the selection process at HackYourFuture. Note that our course is exclusively for people with a refugee background, and your application may be declined for non-technical reasons. If you are not sure if you are eligible, please contact us at info@hackyourfuture.net with an explanation of your situation and we will get back to you. Completing this module is no guarantee to getting into the program, but it will always be a good first step into web development. + +Now let's get to the fun stuff: ## Module overview @@ -16,7 +18,7 @@ This module will handle the very basics of what is called `frontend` (as opposed In order to successfully complete this module, you will need to master the following: -- Be able to write syntactically correct `HTML` and `CSS` +- Be able to write syntactically correct `HTML`, `CSS` and `JS` - Understand what is meant by `responsive` web development - Know your way around `Visual Studio Code` - Feel comfortable working with your `browser's inspector` @@ -28,7 +30,7 @@ In order to successfully complete this module, you will need to master the follo This repository, as every repository in the HackYourFuture curriculum, consists of 2 essential parts: -1. `README`: this document contains all the required theory you need to understand. 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. +1. `README`: this document contains all the required theory you need to understand. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture volunteers. 2. `MAKEME`: this document contains the instructions for each week's practical side. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. We provide a subset of materials that touches on all the concepts we would like you to learn and do. This is enough for some, but not for others. It is up to you to define what you need more information on. If you do need more information, you can search the internet for more explanations. Luckily there is a lot of information out there, so it should not be too hard to find something that fits your learning style! diff --git a/SETUP.md b/SETUP.md index 2f8a3c3..eccbf9f 100644 --- a/SETUP.md +++ b/SETUP.md @@ -41,7 +41,23 @@ Done? This is optional, but for those who are curious: - [Cheat sheet for basics and shortcuts](https://slack.com/intl/en-nl/help/articles/201374536-Slack-keyboard-shortcuts) - [How to format your messages in Slack](https://api.slack.com/reference/surfaces/formatting) -### Where do I write my code? Inside a code editor called Visual Studio Code +### Where do I write my code? That depends... + +In the end we will all write code in Visual Studio Code, but as a beginner it can be a bit intimidating so there are many alternatives you can use for this module. In the end it is up to you to decide which way you find most comfortable. + +#### For beginners! + +##### Codepen + +[CodePen](https://www.codepen.io) is an online code editor and development environment that allows you to write and experiment with HTML, CSS, and JavaScript. It provides a live preview of the code as you type so it is great for playing around with some code when building a website. + +##### JSTutor + +[JSTutor](https://pythontutor.com/javascript.html#mode=edit) is an online code editor that also can visualise the execution of the code which will help when initially learning JavaScript. So whenever you are doing pure JavaScript work we suggest using this website. + +#### For if you already know some things + +##### Visual Studio Code ![vscode logo](./assets/vscode-logo.png) diff --git a/Week1/README.md b/Week1/README.md index 61b20f7..8ad17fb 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,6 +1,6 @@ # Reading Material Start Week 1 -> HYF is a mostly self study course and each of these weeks are here to give you an indication of what a week at HYF looks like so you can make an informed decision before applying. +> HYF is a mostly self study course and each of these weeks are here to give you an indication of what a week at HYF looks like so you can make an informed decision before applying. ## Agenda @@ -22,6 +22,8 @@ These are the topics for week 1: - How to use the inspector - Useful browser extensions +> If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! + ## 1. Introduction to HTML ### Crash course diff --git a/Week2/README.md b/Week2/README.md index 07316c4..ddb0c97 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -12,6 +12,8 @@ These are the topics for week 2: - Pseudo class selectors - Pseudo elements +> If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! + ## 1. Responsiveness By now you've had some practice with CSS. In the following sections you'll learn about some more essentials concepts in order to make sure that your webpages are responsive! In the modern age webpages are being accessed by many different devices with many different screen sizes which means that you as the developer need to write your CSS to support all those devices. diff --git a/Week3/README.md b/Week3/README.md index 3c60cb2..d7e9291 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -15,6 +15,8 @@ These are the topics for week 3: > From this week on we will be using the study book that is shared across all HackYourFuture chapters to explain the concepts rather than having the explanations here. You can click on each concept in the list above to go to the explanation! There are usually also extra reading links that you can go into if you need a little more help, but those are optional. +> If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! + ## 1. What is programming? Welcome to week 3! This week we are going to go deeper into web development by learning the programming language that the browser can understand: JavaScript! diff --git a/Week4/README.md b/Week4/README.md index 605a784..9345432 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -17,6 +17,8 @@ These are the topics for week 4: > We use the study book that is shared across all HackYourFuture chapters to explain the concepts rather than having the explanations here. You can click on each concept in the list above to go to the explanation! There are usually also extra reading links that you can go into if you need a little more help, but those are optional. +> If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! + ## 1. Functions Currently all code you have written only happens once when you run your file, but we want to write code that reacts to certain events. To do that we can define functions that allow you to group lines of code and run them whenever you want. Have a look how this works over [here](https://study.hackyourfuture.net/#/javascript/functions).