Skip to content

Commit 5cfd6d4

Browse files
author
Noer Paanakker
committed
added more content to all weeks (readings & homeworks)
1 parent 6191e5d commit 5cfd6d4

9 files changed

Lines changed: 189 additions & 361 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
> If you are following the HackYourFuture curriculum we recommend you to first take a look at the complete curriculum, which you can find [here](https://www.github.com/curriculum).
22
3+
> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/HTML-CSS/pulls).
4+
35
# Module #1 - HTML, CSS and GIT (Frontend)
46

57
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.
68

7-
The second part of this module will deal with [GIT]()
9+
You'll also be learning [GIT](https//www.github.com/hackyourfuture/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!
810

911
## Learning goals
1012

1113
In order to successfully complete this module you will need to master the following:
1214

1315
- Be able to write syntactically correct HTML and CSS
1416
- Understand what is meant by "responsive" web development
15-
- Keep in mind accessibility by developing according to the rules of ARIA
17+
- Learn about GIT and its basic usage
18+
- Become familiar with Trello and GitHub as a way to submit your homework
1619
- Explain your code by presenting what you've done
1720
- Know your way around Visual Studio Code
1821
- Feel comfortable working with your browser's inspector
@@ -31,14 +34,14 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯
3134

3235
## Planning
3336

34-
| Week | Topic | Reading Materials | Homework | Lesson Plan |
35-
| ---- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- |
36-
| 1. | HTML/CSS syntax, Document-Object Model | [Week 1 Reading](/Week1/README.md) | [Homework week 1](/Week1/MAKEME.md) | [W1 Lesson Plan](/Week1/LESSONPLAN.md) |
37-
| 2. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Week1/Lecture.md), Responsive design, media queries, developer tools | [Week 2 Reading](/Week2/README.md) | [Homework week 2](/Week2/MAKEME.md) | [W2 Lesson Plan](/Week2/LESSONPLAN.md) |
38-
| 3. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Week2/Lecture.md/), Recap, useful resources on the web | [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) | [Homework week 3](/Week3/MAKEME.md) | [W1 Lesson Plan](/Week3/LESSONPLAN.md) |
37+
| Week | Topic | Reading Materials | Homework | Lesson Plan |
38+
| ---- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- |
39+
| 1. | HTML/CSS syntax, Working with the browser | [Week 1 Reading](/Week1/README.md) | [Homework week 1](/Week1/MAKEME.md) | [W1 Lesson Plan](/Week1/LESSONPLAN.md) |
40+
| 2. | Introduction to GIT, Responsive design, developer tools | [Week 2 Reading](/Week2/README.md) | [Homework week 2](/Week2/MAKEME.md) | [W2 Lesson Plan](/Week2/LESSONPLAN.md) |
41+
| 3. | GIT branches, CSS frameworks, CSS3 animations | [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) | [Homework week 3](/Week3/MAKEME.md) | [W1 Lesson Plan](/Week3/LESSONPLAN.md) |
3942

4043
## Finished?
4144

4245
Have you finished the module? Great! Pat yourself on the back for the great work you've done.
4346

44-
> Please help us improve and share your feedback! If you find better tutorials or links, please share them by [opening a pull request](https://github.com/HackYourFuture/HTML-CSS/pulls).
47+
If you feel ready for the next challenge, click [here](https://www.github.com/hackyourfuture/javascript1) to go to **JavaScript1**!

‎Week1/MAKEME.md‎

Lines changed: 28 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,35 @@
11
# Homework HTML/CSS Week 1
22

3-
### Learning goals for this week:
3+
## Todo list
44

5-
```
6-
• The division of labor between HTML and CSS
7-
• Introduction to HTML:
8-
• Parents, children, attributes
9-
• Indentation
10-
• Semantic elements
11-
• Paragraphs, links, images, lists
12-
• Introduction to ARIA:
13-
• What is ARIA and why is it important?
14-
• Using ARIA in HTML
15-
• Validating ARIA
16-
• Introduction to CSS:
17-
• Where can we write it and what difference does that make?
18-
• Selectors (id, class, element type), properties
19-
• How to structure a CSS file
20-
• Naming things
21-
```
5+
1. Set up folder
6+
2. CSS Challenges
7+
3. Code along
8+
4. PROJECT: Digital Resume
229

23-
## Step 1: Read and watch
10+
### 1. Setup folder
2411

25-
#### How to learn effectively
12+
Before we get into coding we first have to create a folder that will hold all of our files. Follow the steps to get started:
2613

27-
Before you start check out this [video](http://www.learningscientists.org/videos/) and/or this [article](https://www.cultofpedagogy.com/learning-strategies/) about good learning practices.
14+
1. On your `Desktop`, create a folder called `HackYourFuture`. Inside this folder you will keep all your folders, files and projects during the whole of your HackYourFuture career!
15+
2. Inside this folder, create a folder called `HYF-Module1`.
16+
3.
2817

29-
#### HTML5
18+
### 2. CSS Challenges
3019

31-
Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
20+
In order to get good fast you need to practice a lot! In the following challenges you'll work with CSS, starting from the absolute basics:
3221

33-
#### CSS:
22+
-
3423

35-
- [CSS reference](http://cssreference.io/)
24+
### 3. Code along
3625

37-
## Step 2: Upload your technical assignment to GitHub
26+
A big part of learning web development is through learning by example. In the following video you'll learn how to build a
3827

39-
_Deadline Monday_
28+
### 4. PROJECT: Digital Resume
4029

41-
- Please create a repository on Github, call it `hyf-html-css`.
42-
- Inside this repository create a folder `week0`.
43-
- Use the code of the application assignment you have made(in codepen.io), copy and paste the html in a `index.html` file and the css in a `style.css` file and upload it to github in the `week0` folder.
44-
- For better instructions on how to do this please check the [how to hand in homework](#how-to-hand-in-homework) down below.
30+
Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to
4531

46-
> Don't forget, you can always revisit Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) if you are stuck and need a refresher.
47-
48-
## Step 3: Assignment
49-
50-
_Deadline Saturday_
51-
52-
In the following assignment you'll make your own online resume. Here are the requirements that need to be fulfilled:
32+
In the following assignment you'll make your own Digital Resume. Here are the requirements that need to be fulfilled:
5333

5434
- It needs to be one webpage
5535
- Your project folder should contain two files: HTML and CSS
@@ -61,53 +41,17 @@ In the following assignment you'll make your own online resume. Here are the req
6141
- Work experience
6242
- _Please do not include your current address, phone number and mail address, your CV will be hosted on Github_
6343

64-
When writing the HTML for your resume keep in mind the following:
65-
66-
- Include:
67-
- Different types of headings (`<h1>`, `<h2>`)
68-
- An unordered list (`<ul>`). In this list include the _learning strategies_ you used while studying. Also include some of the resources/references, this can be documentation/video etc., that were helpful.
69-
- Another unordered list (`<ul>`). In this list you include the most important platforms/resources where you can find all HackYourFuture related information.
70-
- an `<img>` tag (for the picture of you)
71-
- some `<p>` tags
72-
- Some CSS properties, like: `margin`, `padding`, `color`, etc.
73-
- Make sure that your page looks nice, and that your text is readable & accessible (ARIA)
74-
75-
**Before** you hand in your assignment, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and validate your files (for [HTML](https://validator.w3.org/) and for [CSS](http://jigsaw.w3.org/css-validator/))
76-
77-
### How to hand in Homework:
78-
79-
Follow these steps to properly hand in your homework:
80-
81-
1. In your newly created Github account search for the invitation from the HackYourFuture organization to you join your classes team.
82-
2. Create a new repository (name it something like hyf-html-css) make sure you select the option: initialize with README.
83-
3. Inside your new repository create a folder called "week1". If you have trouble finding out how to create a folder in Github check this [Stack Overflow question](https://stackoverflow.com/questions/18773598/creating-folders-inside-github-com-repo-without-using-git)
84-
85-
> Tip: you can also create a "week1" folder on your local computer that contains you files and upload the entire folder to Github.
86-
87-
4. Upload the files you created on your computer (step 3 of the homework) inside this folder, write a description for this “commit” (for example: "homework week1").
88-
5. Your hyf-html-css/week1 should now contain an index.html and a main.css file (and maybe a folder containing your images)
89-
6. Open the files in your folder to check if all of this worked.
90-
7. Now go to the settings of your repository:![settings overview](./assets/github_pages1.png)
91-
8. And go to _Github Pages_ select "master" instead of "none"![pages overview](./assets/github_pages2.png)
92-
9. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_.github.io/hyf-html-css/week1
93-
10. Finally, add a card with the URL to your homework in Trello.
94-
95-
### Here is an example of how your homework repository should look:
96-
97-
- https://github.com/mkruijt/HTML-CSS
98-
- In the README file there are links to the homework hosted by Github!
99-
100-
### Tools for testing accessibility:
101-
102-
Chrome: [Accessibility for developer](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb)
103-
104-
Software
44+
When writing the HTML for your resume include the following:
10545

106-
- Windows: [NVDA](https://www.nvaccess.org/)
107-
- Mac: [VoiceOver](https://www.apple.com/accessibility/mac/vision/)
46+
- Different types of headings (`<h1>`, `<h2>`)
47+
- An unordered list (`<ul>`). In this list include the _learning strategies_ you used while studying. Also include some of the resources/references, this can be documentation/video etc., that were helpful.
48+
- Another unordered list (`<ul>`). In this list you include the most important platforms/resources where you can find all HackYourFuture related information.
49+
- an `<img>` tag (for the picture of you)
50+
- some `<p>` tags
51+
- Some CSS properties, like: `margin`, `padding`, `color`, etc.
10852

109-
## Step 4: Prepare for next class
53+
## SUBMIT YOUR HOMEWORK!
11054

111-
_Deadline Sunday morning_
55+
After you've finished your todo list it's time to show us what you got! Go through the [guide](../hand-in-homework.md) to learn how to submit your homework.
11256

113-
Go through the reading material in the [README.md](/Week2/README.md) to prepare for your next class
57+
_Deadline Saturday 23.59 CET_

0 commit comments

Comments
 (0)