If you are following the HackYourFuture curriculum we recommend you to first take a look at the complete curriculum, which you can find here.
Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.
Welcome to the wonderful world of web development! In this module you will learn the basic building blocks of the web: HTML and CSS. 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. Think of it like this: if a webpage were a person, the HTML would be the skeleton and CSS the skin and clothing.
You'll also be learning GIT, software that will allow you to save your folders and files in case they accidentally get deleted or end up corrupt. It can do much more and you'll learn all about that starting from week 2!
In order to successfully complete this module you will need to master the following:
- Be able to write syntactically correct HTML and CSS
- Understand what is meant by "responsive" web development
- Learn about GIT and its basic usage
- Become familiar with Trello and GitHub as a way to submit your homework
- Explain your code by presenting what you've done
- Know your way around Visual Studio Code
- Feel comfortable working with your browser's inspector
This repository consists of 3 essential parts:
Reading materials: this document contains all the required theory you need to know while you're coding. It's meant as both study material and as a reference to understand what you're doing.Homework: this document contains the instructions for each week's homework.Lesson Plans: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
After your first class you should start off with checking the reading materials for that week. At the beginning that would be the Week 1 Reading. Study all the concepts and try to get the gist of everything. After, you can get started with the homework for that week.
If you have any questions or if something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack!
| Week | Topic | Reading Materials | Homework | Lesson Plan |
|---|---|---|---|---|
| 1. | HTML/CSS syntax, Working with the browser | Week 1 Reading | Homework week 1 | W1 Lesson Plan |
| 2. | Introduction to GIT, Responsive design, developer tools | Week 2 Reading | Homework week 2 | W2 Lesson Plan |
| 3. | GIT branches, CSS frameworks, CSS3 animations | JavaScript Intro | Homework week 3 | W1 Lesson Plan |
Have you finished the module? Great! Pat yourself on the back for the great work you've done.
If you feel ready for the next challenge, click here to go to JavaScript1!