├── .DS_Store ├── assets ├── github-logo.png ├── slack-logo.png └── vscode-logo.png ├── NEXT.md ├── Week4 ├── MAKEME.md └── README.md ├── Week1 ├── MAKEME.md └── README.md ├── Week3 ├── README.md └── MAKEME.md ├── Week2 ├── MAKEME.md └── README.md ├── README.md └── SETUP.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackYourFuture/explore/HEAD/.DS_Store -------------------------------------------------------------------------------- /assets/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackYourFuture/explore/HEAD/assets/github-logo.png -------------------------------------------------------------------------------- /assets/slack-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackYourFuture/explore/HEAD/assets/slack-logo.png -------------------------------------------------------------------------------- /assets/vscode-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackYourFuture/explore/HEAD/assets/vscode-logo.png -------------------------------------------------------------------------------- /NEXT.md: -------------------------------------------------------------------------------- 1 | # What's next? 2 | 3 | So you finished this module and are now convinced that you want to become a web developer. That's great to hear! Apply to the next class at [our site](https://www.hackyourfuture.net/apply) if you haven't already. 4 | 5 | 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! 6 | 7 | - [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! 8 | - [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! 9 | - [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! 10 | - [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. 11 | 12 | And don't forget that you can even study on the go using the [Mimo app](https://getmimo.com/)! 13 | -------------------------------------------------------------------------------- /Week4/MAKEME.md: -------------------------------------------------------------------------------- 1 | # Exercises Week 4 2 | 3 | ## Todo list 4 | 5 | 1. 30 days of JavaScript 6 | 2. Exercises 7 | 8 | ### 1. 30 days of JavaScript 9 | 10 | So you will notice that we are skipping Loops here. We opt to skip this for now as you will most likely not need it for the final assignment when applying to HYF. It is the last big building block of JavaScript though and if you want to go a little further then have a look at it! We will go through it in the main curriculum at any rate. 11 | 12 | - [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript/blob/master/readMe.md). Do day 7 and 8. 13 | 14 | ### 2. Exercises 15 | 16 | In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems. 17 | 18 | - [Learn-js](https://www.learn-js.org/). Do the following `Learn the basics` exercises: 19 | - Objects 20 | - Functions 21 | - [Codecademy: Introduction to Functions](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions/exercises/intro-to-functions). 22 | - [jshero.net](https://www.jshero.net/en/success.html). Do exercises #6-#46 23 | - [Making webpages interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js) 24 | - [w3schools](https://www.w3schools.com/js/exercise_js.asp). Do the JS Functions, JS Events, JS HTML DOM exercises. 25 | 26 | The above should give you some good practice again. If you have extra time and want to continue practicing, have a look at the following: 27 | 28 | - [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). You can choose whichever ones you feel are challenging enough. 29 | 30 | ## Finished? 31 | 32 | Are you finished with going through the exercises? Well done, you have now gone through all of the materials in the starter repository of HYF!!! You should be proud of yourself as this is not easy. 33 | 34 | We hope you enjoyed the module and have a better idea of what web development is all about. If you are now excited to become a web developer then look at our [website](https://www.hackyourfuture.net/apply) when the next class application closes. 35 | 36 | In the meantime you can continue learning by looking at our [what's next section](../NEXT.md). 37 | -------------------------------------------------------------------------------- /Week4/README.md: -------------------------------------------------------------------------------- 1 | # Reading Material Start Week 4 2 | 3 | ## Agenda 4 | 5 | These are the topics for week 4: 6 | 7 | 1. [Functions](https://study.hackyourfuture.net/#/javascript/functions) 8 | 2. [The Document-Object Model (DOM)?](https://study.hackyourfuture.net/#/the-internet/dom) 9 | - JavaScript and the browser 10 | - The DOM 11 | - The Critical Rendering Path 12 | - Traversing the DOM 13 | 3. [What is DOM Manipulation?](https://study.hackyourfuture.net/#/the-internet/dom-manipulation) 14 | - Manipulating elements 15 | - Browser events 16 | - Event listeners and handlers 17 | 18 | > 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. 19 | 20 | > If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! 21 | 22 | ## 1. Functions 23 | 24 | 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). 25 | 26 | ## 2. The Document-Object Model (DOM) 27 | 28 | As upcoming web developers we want to work in the browser. An important thing to know about coding and browsers is that JavaScript the only language is that all browsers understand. That is where JavaScript started and the reason why we teach it. The way JavaScript interacts with the webpage is via the Document-Object Model, so let's first learn about what that is [here](https://study.hackyourfuture.net/#/the-internet/dom) 29 | 30 | ## 3. DOM Manipulation 31 | 32 | Now that we know what the DOM is, we want to learn about how to manipulate it using the JavaScript so that we can actually affect the page with our code. This is called DOM manipulation and you can read all about it over [here](https://study.hackyourfuture.net/#/the-internet/dom-manipulation) 33 | 34 | ## Finished? 35 | 36 | Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click [here](./MAKEME.md). 37 | -------------------------------------------------------------------------------- /Week1/MAKEME.md: -------------------------------------------------------------------------------- 1 | # Exercises Week 1 2 | 3 | ## Todo list 4 | 5 | 1. Web design course 6 | 2. CSS challenges 7 | 3. Code along 8 | 4. Challenges 9 | 10 | ### **1. Web design course** 11 | 12 | FreeCodeCamp is a great learning resource and it has a [free course on Responsive Web Design](https://www.freecodecamp.org/learn/2022/responsive-web-design/) that takes you through building bigger webpages in the right way. For this week, try to do the following: 13 | 14 | - Learn HTML by Building a Cat Photo App 15 | - Learn Basic CSS by Building a Cafe Menu 16 | - Learn CSS Colors by Building a Set of Colored Markers 17 | 18 | ### **2. CSS Challenges** 19 | 20 | In order to improve you need to practice a lot! In the following challenges you'll work with CSS and solve challenges that you may encounter whenever you are building a webpage: 21 | 22 | - [CSS Challenges](https://en.wikiversity.org/wiki/Web_Design/CSS_challenges): Solve challenge #1 to #6. 23 | 24 | ### **3. Code along** 25 | 26 | A big part of learning web development is through learning by example. In the following video you'll learn how to build a simple website, using basic HTML & CSS. 27 | 28 | > The way to learn best from code alongs is to type out the code yourself while watching. Afterwards, try to add a couple of features to the end result to really have the learnings set in. Have a look at this [article](https://www.freecodecamp.org/news/how-to-learn-from-coding-tutorials-and-avoid-tutorial-hell/) that explains the pitfalls of using code alongs from the perspective of a learner. 29 | 30 | - [Simple website](https://www.youtube.com/watch?v=pOwLCTkypUs) 31 | 32 | ### **4. Challenges** 33 | 34 | The following challenges require you to combine your HTML and CSS knowledge to make a webpage. The instructions here are more requirements than a very defined exercise which is closer to what developers do! These are probably too much for one week, but try to do as many of them as you can as each of the numbered challenges are ones we feel add something to your knowledge! 35 | 36 | - [Codecademy Challenges](https://www.codecademy.com/resources/blog/html-and-css-code-challenges-for-beginners/): Challenge #2, #4, #5, #8 37 | 38 | ## Extra options 39 | 40 | The above is your todo list, but sometimes they do not match up well with the way you learn. Sometimes it goes too fast or sometimes the teacher in a video does not explain it in the way to make it click. That's why we also provide extra options here for you to look at if you are struggling to understand what is happening: 41 | 42 | - [Mimo app](https://getmimo.com/) - If you are on the go a lot this is a great app to have on your phone to keep practicing. Choose the Web development path and get it out whenever you need to wait somewhere! 43 | 44 | ## Finished? 45 | 46 | Are you finished with going through the exercises? Well done!!! If you feel ready to go to the next week, click [here](../Week2/README.md). 47 | -------------------------------------------------------------------------------- /Week3/README.md: -------------------------------------------------------------------------------- 1 | # Reading Material Start Week 3 2 | 3 | ## Agenda 4 | 5 | These are the topics for week 3: 6 | 7 | 1. [What is programming?](https://study.hackyourfuture.net/#/programming/README) 8 | 2. The basic building blocks 9 | - [What are variables?](https://study.hackyourfuture.net/#/javascript/variables) 10 | - [What are values?](https://study.hackyourfuture.net/#/javascript/values) 11 | - [Statements vs. Expressions](https://study.hackyourfuture.net/#/javascript/statements-vs-expressions) 12 | - [Operators](https://study.hackyourfuture.net/#/javascript/operators) 13 | 3. [Conditional statements](https://study.hackyourfuture.net/#/javascript/conditional-statements) 14 | 4. [Debuggers](https://study.hackyourfuture.net/#/tools/debuggers) 15 | 16 | > 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. 17 | 18 | > If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! 19 | 20 | ## 1. What is programming? 21 | 22 | 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! 23 | 24 | We want to first take a little bit of a broader look at what programming is in general before we dive into JavaScript. Have a look [here](https://study.hackyourfuture.net/#/programming/README) 25 | 26 | ## 2. The basic building blocks 27 | 28 | The most basic building blocks of programming are variables/values and operators. They allow you to create something, manipulate it and then store it somewhere. Have a look at the following articles to go over the basics of this: 29 | 30 | - [What are variables?](https://study.hackyourfuture.net/#/javascript/variables) 31 | - [What are values?](https://study.hackyourfuture.net/#/javascript/values) 32 | - [Statements vs. Expressions](https://study.hackyourfuture.net/#/javascript/statements-vs-expressions) 33 | - [Operators](https://study.hackyourfuture.net/#/javascript/operators) 34 | 35 | ## 3. Conditional statements 36 | 37 | Using the basic building blocks you can already do quite a few things, but you cannot really add any kind of logic. It cannot really respond to anything that is happening, which is the main thing that makes code so powerful! So let's learn about conditional statements [here](https://study.hackyourfuture.net/#/javascript/conditional-statements) 38 | 39 | ## 4. Debuggers 40 | 41 | Now that you are about to get practical and start writing your own code it is important to cover the topic of debuggers as they allow you to step through your code. Have a look at some tools that you can use to look under the hood of your code in the section about [debuggers](https://study.hackyourfuture.net/#/tools/debuggers). You won't understand everything of what's there yet, but debugging is so important we want you to look at it early. Revisit it often to learn the rest. 42 | 43 | ## Finished? 44 | 45 | Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click [here](./MAKEME.md). 46 | -------------------------------------------------------------------------------- /Week3/MAKEME.md: -------------------------------------------------------------------------------- 1 | # Exercises Week 3 2 | 3 | Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself. This week's practical side is all about doing smaller exercises that will cement your understanding of programming. You could say we are building the foundation. 4 | 5 | ## Todo list 6 | 7 | 1. 30 days of JavaScript 8 | 2. Exercises 9 | 10 | ### Note: JS Tutor 11 | 12 | Programming is hard and it is going to feel like you don't fully understand what is happening for awhile. The way to try to get a handle on it is to practice, practice, practice. You want to keep experimenting and trying things out. 13 | 14 | A good place to practice coding is in the [JS Tutor](http://pythontutor.com/javascript.html#mode=edit) website. You can enter code there and step through it so you can see what is happening behind the scenes. So keep putting code in there and analyse what happens, it will help you understand! 15 | 16 | ### 1. 30 days of JavaScript 17 | 18 | There is an amazing open repository that teaches JavaScript in 30 days. Don't worry, you don't have to do it all this week but you will see us refer to it more often throughout this and next week as well as during the main curriculum. It is a great thing to keep working on in between this module and whenever you get into one of the HYF classes. 19 | 20 | - [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript/blob/master/readMe.md). Do day 1, 2, 3, 4 and 5. 21 | 22 | > Note: Day 1 will explain how to install Node.js, Visual Studio Code and how to run code in your browser. These, plus the JS Tutor link above are many different ways of running your code. Find the one you are most comfortable with! 23 | 24 | ### 2. Exercises 25 | 26 | In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems. 27 | 28 | - [Learn-js](https://www.learn-js.org/). Do the following `Learn the basics` exercises: 29 | - Hello, World! 30 | - Variables and Types 31 | - Arrays 32 | - Manipulating Arrays 33 | - Operators 34 | - Conditions 35 | - [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do the exercises (#1 to #7). 36 | - [jshero.net](https://www.jshero.net/en/success.html). Do the first 5 exercises. 37 | - [w3schools](https://www.w3schools.com/js/exercise_js.asp). Do the JS Variables, JS Operators, JS Data Types, JS Objects, JS Arrays, JS Array Methods and JS Array Sort exercises. 38 | 39 | The above should give you a nice basis. If you have extra time and are still a little unsure, have a look at the following: 40 | 41 | - [Programiz: JAvascript](https://www.programiz.com/javascript/get-started). This getting started tutorial goes through the basics and provides a lot of examples! 42 | - [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). You can choose whichever ones you feel are challenging enough. 43 | 44 | 45 | ## Finished? 46 | 47 | Are you finished with going through the exercises? Well done!!! If you feel ready to go to the next week, click [here](../Week4/README.md). 48 | -------------------------------------------------------------------------------- /Week2/MAKEME.md: -------------------------------------------------------------------------------- 1 | # Exercises Week 2 2 | 3 | ## Todo list 4 | 5 | 1. Web design course 6 | 2. Responsive design challenges 7 | 3. Code Along 8 | 4. Optional: Flexbox/Grid games 9 | 5. Challenge: Copy a professional website 10 | 11 | ### **1. Web design course** 12 | 13 | FreeCodeCamp is a great learning resource and it has a [free course on Responsive Web Design](https://www.freecodecamp.org/learn/2022/responsive-web-design/) that takes you through building bigger webpages in the right way. For this week, try to do the following: 14 | 15 | - Learn the CSS Box Model by Building a Rothko Painting 16 | - Learn CSS Flexbox by Building a Photo Gallery 17 | - Learn More About CSS Pseudo Selectors by Building a Balance Sheet 18 | - Learn Responsive Web Design by Building a Piano 19 | - Learn CSS Grid by Building a Magazine 20 | 21 | ### 2. Responsive design challenges 22 | 23 | Making websites that are `responsive` to a variety of device sizes (in other words, that still "look good" on any device), has become the standard way of building websites. You have to learn how to do this too. It's not as intimating as it might seem; you're **not** going to build a separate page for literally every device size out there. 24 | 25 | Instead, you'll be applying certain CSS rules only to certain device sizes: the average desktop (1024px and more), the average tablet (between 600px and 1024px) and the average mobile device (600px and below). 26 | 27 | In the following mini-course you'll get some practice in doing this: 28 | 29 | - [Responsive Web Design Challenges](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/) 30 | 31 | ### 3. Code along 32 | 33 | In the following video you'll be rebuilding a responsive HTML5 website. Put your focus on how the structure of the page is built: First HTML to provide structure & content, and then the CSS. Look at the HTML tags used and the names given to classes. 34 | 35 | - [Build A Responsive Website With HTML & CSS Tutorial](https://www.youtube.com/watch?v=ZeDP-rzOnAA) 36 | 37 | ### 4. Optional: Flexbox/Grid games 38 | 39 | If you like learning in a fun way there are quite a few games on the internet that teach you the way flexbox/grid works: 40 | 41 | - [Flexbox Froggy](https://flexboxfroggy.com/) 42 | - [Flexbox Defense](http://www.flexboxdefense.com/) 43 | - [Flexbox Adventure](https://codingfantasy.com/games/flexboxadventure) 44 | - [Grid Garden](https://cssgridgarden.com/) 45 | - [Grid attack](https://codingfantasy.com/games/css-grid-attack) 46 | 47 | This is optional to get a better feel for flexbox/grid and how they work, if you feel comfortable with building pages using these technology then these games will not add much so you can skip it. It is still fun though! 48 | 49 | ### 5. Challenge: Copy a professional website 50 | 51 | With the knowledge you have we now challenge you to rebuild `the landing page` of an existing responsive website. You will then see how professional websites are built. Then you can be very proud that you can already make a beautiful webpage from an example after just 2 weeks! Here are some good options to copy: 52 | 53 | - [Codecademy](https://www.codecademy.com/) 54 | - [Uber](https://www.uber.com/nl/en/) 55 | - [Adyen](https://www.adyen.com/) 56 | - [Patreon](https://www.patreon.com/) 57 | - [Coursera](https://www.coursera.org/) 58 | - [Triodos](https://www.triodos.nl/) 59 | 60 | You don't have to build everything, but include the following requirements: 61 | 62 | - Design-wise it should be similar so the fonts, icons, text, etc. should look the same as the original 63 | - Only rebuild the homepage (which should include a navigation bar, footer, the landing section and at least 2 other sections. Challenge yourself by picking the ones you think are hardest to build!) 64 | - Remember to write your CSS in an external stylesheet 65 | - You will have to make use of `flexbox`, you will see that it is one of the main ways websites are responsive 66 | - Download the assets (images, other forms of media) through the original webpage, or use your own if it is not possible! 67 | - Use media queries for both tablet and mobile (This might be the same for the website you're making) 68 | 69 | Don't worry about the interactions with the page at this moment, we will be going into how that works later. For now it is important to focus on the look of the page! 70 | 71 | ## Finished? 72 | 73 | Are you finished with going through the exercises? Well done!!! If you feel ready to go to the next week, click [here](../Week3/README.md). 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HackYourFuture explore 2 | 3 | The explore 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. 4 | 5 | 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. 6 | 7 | Now let's get to the fun stuff: 8 | 9 | ## Module overview 10 | 11 | Welcome to the wonderful world of web development! In this module, you will learn the basic building blocks of the web: HTML, CSS and JS. HTML gives us the power to add text, images and videos to a page. CSS gives us the power to organize these parts and make it look nice. JS gives us the power to perform logical operations, to react to what the user is doing. 12 | 13 | Think of it like this: if a webpage were a person, the HTML would be the skeleton, the CSS the skin and clothing and the JS the brain! 14 | 15 | This module will handle the very basics of what is called `frontend` (as opposed to `backend` which we will handle later in the HackYourFuture curriculum). What is frontend? It's another word for the presentational part of a piece of software. In terms of web development, we're talking about "what you see" when you go to any website. 16 | 17 | ### Learning Goals 18 | 19 | In order to successfully complete this module, you will need to master the following: 20 | 21 | - Be able to write syntactically correct `HTML`, `CSS` and `JS` 22 | - Understand what is meant by `responsive` web development 23 | - Know your way around `Visual Studio Code` 24 | - Feel comfortable working with your `browser's inspector` 25 | - Know what we mean with `variables`, `operators`, `objects` and `arrays` in `JavaScript` 26 | - Understand what the `DOM` is 27 | - Use the basics of `DOM Manipulation` 28 | 29 | ### Repository content 30 | 31 | This repository, as every repository in the HackYourFuture curriculum, consists of 2 essential parts: 32 | 33 | 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. 34 | 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. 35 | 36 | 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! 37 | 38 | ## Planning 39 | 40 | | Week | Topic | Reading Materials | Exercises | 41 | | ---- | -------------------------------- | ------------------------------ | -------------------------------- | 42 | | 1. | HTML/CSS syntax | [W1 Reading](/Week1/README.md) | [W1 Exercises](/Week1/MAKEME.md) | 43 | | 2. | HTML/CSS: Responsive design | [W2 Reading](/Week2/README.md) | [W2 Exercises](/Week2/MAKEME.md) | 44 | | 3. | JS: Variables, Operators, Arrays | [W3 Reading](/Week3/README.md) | [W3 Exercises](/Week3/MAKEME.md) | 45 | | 4. | JS: Functions, DOM Manipulation | [W4 Reading](/Week4/README.md) | [W4 Exercises](/Week4/MAKEME.md) | 46 | 47 | ## Finished? 48 | 49 | Have you finished the module? Great! Pat yourself on the back for the great work you've done. Remember to keep studying while you wait for a class to start, as it will help you further down the line. Future you will thank you! To know what to do, have a look at the list at the [next steps](./NEXT.md). 50 | 51 | _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 :)_ 52 | -------------------------------------------------------------------------------- /SETUP.md: -------------------------------------------------------------------------------- 1 | # Setting up your environment 2 | 3 | Hi new applicant, welcome to the tryout module of HackYourFuture! Here we will explain how to set up all the tools that you will need for this module as well as the main curriculum should you get accepted. 4 | 5 | ## Agenda 6 | 7 | We'll discuss the following points: 8 | 9 | - How do I communicate with everybody? Use communication tool [Slack](https://www.slack.com) 10 | - Where do I write my code? Inside a code editor called [Visual Studio Code](https://code.visualstudio.com/) 11 | 12 | ### How do I communicate with everybody? Use Slack 13 | 14 | ![slack logo](./assets/slack-logo.png) 15 | 16 | Slack is an application that allows us to communicate with others through (video) chat and is really easy to use. It's used in a lot of tech companies so in order for you to get familiar we're going to use it as well! You will get an invitation to our Slack workspace as a guest as soon as this module officially starts so you have access to the help channel to ask questions if you need it. Of course you are free to already start this module on your own before then. 17 | 18 | Please download the app for on your computer: 19 | 20 | - [macOS](https://slack.com/downloads/mac) 21 | - [Windows](https://slack.com/downloads/windows) 22 | - [Linux](https://slack.com/downloads/linux) 23 | 24 | And if you really can't go without your phone, you can also get it for mobile: 25 | 26 | - [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) 27 | - [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) 28 | 29 | When it's all installed it's time to get into it! First try out the demo: 30 | 31 | - [Slack Demo](https://slackdemo.com/) 32 | 33 | Important things to note is to: 34 | 35 | - Make use of _threads_ to isolate discussions. You can do this by hovering over the message you want to reply to and clicking on `reply in thread`. 36 | - When pasting your code, format it to make it easier to read by using the ` ``` your code ``` ` syntax. Note that this is the backtick key, not the single quote key. 37 | - You will have access to our slack for a limited time while you go through the module 38 | 39 | Done? This is optional, but for those who are curious: 40 | 41 | - [Cheat sheet for basics and shortcuts](https://slack.com/intl/en-nl/help/articles/201374536-Slack-keyboard-shortcuts) 42 | - [How to format your messages in Slack](https://api.slack.com/reference/surfaces/formatting) 43 | 44 | ### Where do I write my code? That depends... 45 | 46 | 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. 47 | 48 | #### For beginners! 49 | 50 | ##### Codepen 51 | 52 | [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. 53 | 54 | ##### JSTutor 55 | 56 | [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. 57 | 58 | #### For if you already know some things 59 | 60 | ##### Visual Studio Code 61 | 62 | ![vscode logo](./assets/vscode-logo.png) 63 | 64 | Technically speaking, you can write code for the web in any application that allows you to write and save plain text files (such as Notepad or TextEdit). However a code editor is a tool specifically designed for editing code. Depending on the programming language, the code editor highlights special keywords, gives suggestions to some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well. 65 | 66 | While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as developers easier. In [this video](https://www.youtube.com/watch?v=ORrELERGIHs&t=324s) you'll get a great introduction on all the features. His code is python, so don't worry about understanding the code, it is about how to navigate the visual studio code environment. 67 | 68 | Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. Click the following link to download it: 69 | 70 | - [Visual Studio Code](https://code.visualstudio.com/) 71 | 72 | #### Improving our code editor 73 | 74 | We can always improve what we have, including our code editor! We can add `extensions` to make our programming life much easier. The most important extension to have is Prettier as it formats your code automatically to the way that pretty much every professional developer formats their code. This is the first part of `clean code` that is extremely important but not very exciting so we will keep reminding you throughout the curriculum ;). 75 | 76 | It is best to have Prettier set up that it formats your code whenever you save a file so that you don't have to remember to do this. Follow [this](https://www.codereadability.com/automated-code-formatting-with-prettier/) article to get that set up. 77 | 78 | For more specific information on how to setup your editor: 79 | 80 | - [VSCode Tips](https://github.com/HackYourFuture/fundamentals/tree/master/VSCodeTips) 81 | 82 | ## Finished? 83 | 84 | Are you finished with setting up? Nice job!!! If you feel ready to start with your journey into web development, click [here](./Week1/README.md). 85 | -------------------------------------------------------------------------------- /Week2/README.md: -------------------------------------------------------------------------------- 1 | # Reading Material Start Week 2 2 | 3 | ## Agenda 4 | 5 | These are the topics for week 2: 6 | 7 | 1. Responsiveness 8 | - Flexible organizing with flexbox 9 | - Using the grid layout 10 | - Responsive design with media queries 11 | 2. Advanced CSS 12 | - Pseudo class selectors 13 | - Pseudo elements 14 | 15 | > If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! 16 | 17 | ## 1. Responsiveness 18 | 19 | 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. 20 | 21 | ### Flexible organizing with flexbox 22 | 23 | CSS is used to order and style HTML elements. A big part of this is organising elements in a visually attractive way. This can be done using `flexbox`. 24 | 25 | What it does is helping you to think according to `grid-based web design`: elements are not randomly placed on the page, but are neatly organised along a grid. 26 | 27 | Read the following to learn more about 'grid-based web design': 28 | 29 | - [Introduction to grids in web design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521) 30 | - [Grid Systems in Web & UI Design](https://www.youtube.com/watch?v=n_V_aLqYPI0) 31 | 32 | Once you understand this way of thinking you'll know why it makes sense to use `flexbox`. 33 | 34 | In order to make use of it we have to access it through the `display` CSS property: 35 | 36 | ```css 37 | display: flex; 38 | ``` 39 | 40 | This will give us the `flexbox`-specific properties, so we can develop clean and organised CSS. Check the following links to understand how this is done: 41 | 42 | - [CSS Flexbox in 100 Seconds](https://www.youtube.com/watch?v=K74l26pE4YA) 43 | - [What is Flexbox and Why to Learn it](https://www.youtube.com/watch?v=CXSwNIPsyTs) 44 | - [CSS Flexbox Course](https://www.youtube.com/watch?v=-Wlt8NRtOpo) 45 | 46 | ### Using the grid layout 47 | 48 | The most recent addition to the css toolkit for organising your layout is using `display: grid`. Where every other layout always goes from top to bottom, grid allows you to create a two-dimensional layout. 49 | 50 | The complete guide to grid by css-tricks is the go to guide, read it here: 51 | 52 | - [CSS-tricks complete guide to grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 53 | 54 | ### Responsive design with media queries 55 | 56 | Nowadays people use different devices to access websites: desktops, tablets and mobile phones of all different sizes. Responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size of the viewer. It prevents that images are larger than the screen width, so visitors on mobile devices will see a visually attractive website as well 57 | 58 | For more information about responsive design, check this article: [Modern Responsive Design](https://css-tricks.com/responsive-layouts-fewer-media-queries/). 59 | 60 | The primary way of making a responsive website is by writing custom CSS code that makes it so. This can be done using `media queries`: CSS instructions that only apply to certain screen sizes. 61 | 62 | Learn more about media queries here: 63 | 64 | - [Introduction to Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries). 65 | - [Learn CSS Media Query in 7 Minutes](https://www.youtube.com/watch?v=yU7jJ3NbPdA) 66 | 67 | ### Layouts 68 | 69 | Now that you know about all the tools at your disposal it is time to look at how to create layouts, which are the most basic design of your app/website. It is important to always do this step first as any changes in the layout will affect all of the other parts in the website, whereas the smaller parts do not affect the overall layout. 70 | 71 | Learn more about them here: 72 | 73 | - [The fundamentals of css layouts](https://www.youtube.com/watch?v=yMEjLBKyvEg) 74 | 75 | ## 2. Advanced CSS 76 | 77 | Now that we have covered everything that you will probably use with every webpage it is time to go over some advanced CSS that you will need to use in some more specific use cases. 78 | 79 | ### Pseudo class selectors 80 | 81 | Every HTML element can be in different states. The default state is when an element is untouched, you already know how to style for this as that is the default styling. 82 | 83 | ```css 84 | button { 85 | background-color: white; 86 | } 87 | ``` 88 | 89 | There are times when a user interacts with an element. For example: clicking a button that opens another page. As frontend developers we need to give the user feedback on that particular action. When they place the mouse on top of the button it lights up (we call this a `hover state`). We need to write instructions for that to happen: 90 | 91 | ```css 92 | button:hover { 93 | background-color: blue; 94 | } 95 | ``` 96 | 97 | Like the hover state there are others as well: `click`, `focus`, `visited`, and more. For most of these element states we have special selectors that allow you to change the styling. Read the following article to learn about them. Once you have done that, try them out for yourself! 98 | 99 | - [Pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/) 100 | 101 | ### Pseudo elements 102 | 103 | Next to pseudo class selectors there is also something called pseudo elements. This is a way that css can insert 'HTML elements' before or after what you are selecting which allows you to do some very powerful things without having to write any JavaScript (which we will learn about next week)! To do this you can write the following code: 104 | 105 | ```css 106 | .required::after { 107 | content: '*'; 108 | } 109 | ``` 110 | 111 | This is an `::after` element which means that the html element will be placed directly after the HTML element. Conversely, you can use the `::before` element to place it directly before the element you targeted with your css. In this case any HTML element that has the css class `required` assigned to it will get an extra HTML element after it with the star. Have a look at the following video that goes into this and explains the use case that this css code solves: 112 | 113 | - [CSS Pseudo Elements in 8 minutes](https://www.youtube.com/watch?v=OtBpgtqrjyo) 114 | 115 | It may be a little unclear now what the real difference is between these two. The following video goes over that to get it clear in your mind: 116 | 117 | - [Pseudo-Classes vs Pseudo-Elements in CSS](https://www.youtube.com/watch?v=0VDx1570X3U) 118 | 119 | ## Finished? 120 | 121 | Are you finished with going through the materials? Nice job!!! If you feel ready to get practical, click [here](./MAKEME.md). 122 | -------------------------------------------------------------------------------- /Week1/README.md: -------------------------------------------------------------------------------- 1 | # Reading Material Start Week 1 2 | 3 | > 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. 4 | 5 | ## Agenda 6 | 7 | These are the topics for week 1: 8 | 9 | 1. Introduction to HTML: 10 | - Crash course 11 | - The most commonly used tags 12 | - Semantic HTML 13 | 2. Introduction to CSS: 14 | - Crash course 15 | - Where to write it? 16 | - The box model 17 | - The cascading effect 18 | - Specificity 19 | 3. Working with the browsers 20 | - What is a web browser? 21 | - Choosing the right web browser 22 | - How to use the inspector 23 | - Useful browser extensions 24 | 25 | > If you haven't yet, make sure to follow the [setup guide](../SETUP.md) to have everything set up! 26 | 27 | ## 1. Introduction to HTML 28 | 29 | ### Crash course 30 | 31 | HTML is the foundation of web development. It is an acronym for **HyperText Markup Language**. It is used to structure content on a webpage. What do we mean by content? Plain text, images, videos, links to other websites, etc. The structure gives content meaning by defining that content as, for example, headings, paragraphs, or images. 32 | 33 | In order to learn HTML properly it's important to know what is is. Go through the following resources to learn more about it: 34 | 35 | - [HTML5 Basics - History of HTML](https://www.youtube.com/watch?v=NzzGt7EmXVw) 36 | - [HTML Crash Course](https://www.youtube.com/watch?v=UB1O30fR-EE) 37 | 38 | ### The most commonly used tags 39 | 40 | If at any point you came to believe you would have to learn a whole list of tags by heart in order to write great HTML, you are in luck: that's not needed. 41 | 42 | The most important thing to know is that the tags are used to **structure content**, or in other words: to decide how each part is organized in order to more easily understand what the page is trying to communicate. 43 | 44 | It's useful to memorize this list, but don't feel like you have to learn and memorize _every_ HTML tag. Once you understand the basics, you can easily look up which tag you need. 45 | 46 | Check out the following article to find a list of the most commonly used tags: [The Most Commonly Used Tags](https://www.geeksforgeeks.org/most-commonly-used-tags-in-html/) 47 | 48 | ## Semantic HTML 49 | 50 | Semantic HTML are HTML tags that introduce meaning to the web page rather than just presentation. For example, a `

` tag indicates that the enclosed text is a paragraph. A `