🗺️ HackYourFuture explore
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.
Before diving in, please visit our application page 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 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.
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!
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.
Learning Goals In order to successfully complete this module, you will need to master the following:
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 Know what we mean with variables, operators, objects and arrays in JavaScript Understand what the DOM is Use the basics of DOM Manipulation Repository content This repository, as every repository in the HackYourFuture curriculum, consists of 2 essential parts:
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. 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!
+++ title=“HackYourFuture explore” description="" emoji="🗺️" time=5 +++
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.
Before diving in, please visit our application page 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 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.
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!
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.
Learning Goals In order to successfully complete this module, you will need to master the following:
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 Know what we mean with variables, operators, objects and arrays in JavaScript Understand what the DOM is Use the basics of DOM Manipulation Repository content This repository, as every repository in the HackYourFuture curriculum, consists of 2 essential parts:
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. 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!
Added a line to test
👋 How to plan
Planning Week Topic Reading Materials Exercises
HTML/CSS syntax W1 Reading W1 Exercises
HTML/CSS: Responsive design W2 Reading W2 Exercises
JS: Variables, Operators, Arrays W3 Reading W3 Exercises
JS: Functions, DOM Manipulation W4 Reading W4 Exercises
Finished? 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!
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 :)
🗨 How do I communicate with everybody? Use Slack
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.
Please download the app for on your computer:
And if you really can’t go without your phone, you can also get it for mobile:
When it’s all installed it’s time to get into it! First try out the demo:
Important things to note is to:
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.
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.
You will have access to our slack for a limited time while you go through the module
Done? This is optional, but for those who are curious:
Cheat sheet for basics and shortcuts How to format your messages in Slack
✅ 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 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 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
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.
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 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.
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:
Visual Studio Code Improving our code editor 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 ;).
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 article to get that set up.
For more specific information on how to setup your editor:
VSCode Tips Finished? Are you finished with setting up? Nice job!!! If you feel ready to start with your journey into web development, click here.