From 53b681461f761e2d0c7e6bfd718070c9c9ffba2e Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 1 Mar 2017 15:03:27 +0100 Subject: [PATCH 001/216] fix spelling --- README.md | 8 ++++---- Week1/README.md | 6 +++--- Week2/README.md | 14 +++++++------- Week3/README.md | 4 ++-- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 71afdd0..fc1f2e2 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,11 @@ Also we will go into the DOM and file structure. There will be time spent on why * Basic understanding of HTML5 and CSS (DOM, semantic elements) * Know how to organize your files * Know your way around your text editor -* Feel comfortble working with the console -* Proberly indent your code +* Feel comfortable working with the console +* Properly indent your code * Properly naming classes, id's * Responsive mobile first development -* Know "good" and "bad" pratices when it comes to HTML +* Know "good" and "bad" practices when it comes to HTML * Get an understanding of what good resources are on the web -* Give recieve/feedback from/on fellow students +* Give receive/feedback from/on fellow students * Presenting and explaining your work to others diff --git a/Week1/README.md b/Week1/README.md index d67afe8..2a4686c 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,7 +1,7 @@ ## Weekly Deliverables: * Understand the DOM structure * Get a feeling for HTML syntax - * Get familiair with your text editor + * Get familiar with your text editor * Basic understanding of CSS syntax * Linking to external files * Structuring your files @@ -18,7 +18,7 @@ * How Web Browsers Work ### Exercises: - * Khan Academy: Into to HTML/CSS: Making webpages + * Khan Academy: Into to HTML/CSS: Making web pages ### Assignment: @@ -36,7 +36,7 @@ * A list (ul) * img * p - * Some css properties: margin, padding + * Some CSS properties: margin, padding * Make sure that you page looks nice, and that your text is readable * upload in a zip * BEFORE you hand it in, read the Style guide and check your files (you can also use the HTML validator ). diff --git a/Week2/README.md b/Week2/README.md index 74c86f4..30b0ab7 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -13,7 +13,7 @@ * Introduction to media queries * More about media queries * HTML syntax - * Article about mulitiple ways to select classes and id's + * Article about multiple ways to select classes and id's * Read about nice color combinations ### Exercises: @@ -21,16 +21,16 @@ ### Assignment: * Grids exercise - * Download the html and images in the folder Homework3 - * You are going to write the css for this page - * You are not allowed to change the html - * The page contains two grids: the first one should work using floats, the second using flexbox. Be careful not to mix the two! + * Download the HTML and images in the folder Homework 2 + * You are going to write the CSS for this page + * You are not allowed to change the HTML + * The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two! * We want the grid to look as follows: * On mobile phones: a two column grid, with the exception that the first item spans the full width - * On tablets: a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then afther the first two items we have three columns) + * On tablets: a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns) * On desktops: a four column grid, with the exception that the first item spans two columns. * There should be some space between the grid items - * Make the page look beautiful by adding some more css! Some tips: + * Make the page look beautiful by adding some more CSS! Some tips: * How about some nice colors, fonts, hover styles? * According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different. * BEFORE you hand it in, read the Style guide again and check your files diff --git a/Week3/README.md b/Week3/README.md index 5cbacf8..e58a73d 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -10,11 +10,11 @@ ## In class: * Task: find some info about a certain topic in groups of 2, present to each other - * Choose one of the following subjects, look up how it works and implement it in a webpage + * Choose one of the following subjects, look up how it works and implement it in a web page * CSS transitions * CSS animations with keyframes * SVG - * Dropdown menu in CSS + * Drop down menu in CSS * flex-box ## Homework From 209e1f19f7b8bbc633c57dd2eb007d752602da36 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 1 Mar 2017 17:09:42 +0100 Subject: [PATCH 002/216] added planning --- README.md | 19 ++++++++++++++++--- Week1/README.md | 4 ++-- Week2/README.md | 2 +- Week3/README.md | 2 +- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fc1f2e2..bf04e36 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,20 @@ # HTML-CSS ## Introduction -In this module you will learn to write and understand basic HTML(5) and CSS syntax. -Also we will go into the DOM and file structure. There will be time spent on why and how you use different programming languages (like CSS and HTML). When it comes to CSS you should understand how CSS decides which rules are applied, also you should have an understanding what is meant by elements and attributes. Making responsive websites is an important part of front-end programming. You will learn how to make your websites responsive by using media queries using a “mobile first” approach. Also you will get familiar with developer tools that help make this process easier. During this entire module you’ll (learn to) work in a text editor. It’s expected from you that your code is properly styled using the style guide for HTML/CSS. You’ll be introduced to the inspector that helps you debug and understand your code better. +> In this module will introduce the basic concepts of HTML5 and CSS. We spend time getting you familiar with your text editor and handy developer tools. After this we will focus on responsive web development. Making responsive websites is an important part of front-end programming. You will learn how to make your websites responsive by using media queries using a “mobile first” approach. Last but not least we will spend time practicing some soft skills that we think are important for becoming a good developer. These include: give and receive feedback to your fellow students, presenting and explaining your work. +So since this is your first module, what can you expect the next three weeks? -## Module Deliverables: +## Planning for Current Class +| Week | Topic | Read | Homework | +| ---- | ----- | ---- |----------| +| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](week1/README.md) | [Homework week 1] (week1/README.md) | +| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](week2/README.md) | [Homework week 2] (week2/README.md) | +| 3. | Recap, useful resources on the web| [Week 3 Reading](week3/README.md) | [Homework week 3] (week3/README.md) | + +Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack! + +## Learing goals for this module: * Basic understanding of HTML5 and CSS (DOM, semantic elements) * Know how to organize your files * Know your way around your text editor @@ -17,3 +26,7 @@ Also we will go into the DOM and file structure. There will be time spent on why * Get an understanding of what good resources are on the web * Give receive/feedback from/on fellow students * Presenting and explaining your work to others + + + + diff --git a/Week1/README.md b/Week1/README.md index 2a4686c..c3380b6 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,8 +1,8 @@ -## Weekly Deliverables: +##Learning goals for this week: * Understand the DOM structure * Get a feeling for HTML syntax - * Get familiar with your text editor * Basic understanding of CSS syntax + * Get familiar with your text editor * Linking to external files * Structuring your files diff --git a/Week2/README.md b/Week2/README.md index 30b0ab7..9852caa 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,4 +1,4 @@ -## Weekly Deliverables: +## Learning goals for this week: * Understand the HTML structure * CSS (id's, classes, selectors and attributes) * Tips and tricks diff --git a/Week3/README.md b/Week3/README.md index e58a73d..c68aaa5 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,4 +1,4 @@ -## Weekly Deliverables: +## Learning goals for this week: * Presentations of students website remakes * Repeat topics of last two weeks: * Understand why/ how to use which language From 61637d0c90d2cd1aa5367335b3cf607678901987 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 6 Mar 2017 13:49:35 +0100 Subject: [PATCH 003/216] added week0 --- README.md | 9 +++++---- Week0/README.md | 42 ++++++++++++++++++++++++++++++++++++++++++ Week1/README.md | 8 -------- 3 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 Week0/README.md diff --git a/README.md b/README.md index bf04e36..7537d7c 100644 --- a/README.md +++ b/README.md @@ -8,13 +8,14 @@ So since this is your first module, what can you expect the next three weeks? ## Planning for Current Class | Week | Topic | Read | Homework | | ---- | ----- | ---- |----------| -| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](week1/README.md) | [Homework week 1] (week1/README.md) | -| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](week2/README.md) | [Homework week 2] (week2/README.md) | -| 3. | Recap, useful resources on the web| [Week 3 Reading](week3/README.md) | [Homework week 3] (week3/README.md) | +|0.|Prepare for first session|[Week 0 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|[Homework week 0](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)| +| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | [Homework week 1] (https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | +| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | [Homework week 2] (https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | +| 3. | Recap, useful resources on the web| [Week 3 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | [Homework week 3] (https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack! -## Learing goals for this module: +## Learning goals for this module: * Basic understanding of HTML5 and CSS (DOM, semantic elements) * Know how to organize your files * Know your way around your text editor diff --git a/Week0/README.md b/Week0/README.md new file mode 100644 index 0000000..2268e97 --- /dev/null +++ b/Week0/README.md @@ -0,0 +1,42 @@ +###Hello new class! + +>Before you come to your first session at HackYourFuture please go through this document, read, watch and check if you are ready to start your HackYourFuture adventure! + +### Read these Chapters from the Front-end Handbook + * What Is a Front-End Developer? + * Part I. The Front-End Practice + * Read (lesson 1: building your first web page)[http://learn.shayhowe.com/html-css/building-your-first-web-page/] + +>Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. + +### Watch these videos: + * How the Internet Works in 5 Minutes + * How Web Browsers Work + +###Check double check: + +###Are you signed up for: + +- Slack +- Trello +- KhanAcademy (join the class you've been invited to) +- Udacity + +###Do you have a basic understanding of the following tools: + +- Slack +- Trello +- Our Github repository + +>If the answer to this is 'no', don't panic, you can always ask help in Slack, but before you do, please first try and see if you can find some information about the above tools yourself. + +###Do you have a text editor installed? + +Any of the ones listed below is fine. +- [Brackets](http://brackets.io) +- [Atom] (https://atom.io/) +- [Visual studio](https://code.visualstudio.com/) +- [Spacemacs](http://spacemacs.org/) +- [Sublime (not free)](https://www.sublimetext.com/) + +If you have no experience or preference when it comes to working with text editor just install Brackets, you can always switch to another editor later on in the program. \ No newline at end of file diff --git a/Week1/README.md b/Week1/README.md index c3380b6..ae4241c 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -9,14 +9,6 @@ ## Homework -### Read these Chapters from the Front-end Handbook - * What Is a Front-End Developer? - * Part I. The Front-End Practice - -### Watch these videos: - * How the Internet Works in 5 Minutes - * How Web Browsers Work - ### Exercises: * Khan Academy: Into to HTML/CSS: Making web pages From e3173e1c6736f40bd895721508d7c289b39b853e Mon Sep 17 00:00:00 2001 From: Thom van Gessel Date: Sun, 12 Mar 2017 11:33:10 +0100 Subject: [PATCH 004/216] Updated learning goals and course description --- README.md | 16 ++++++++++------ Week1/README.md | 22 +++++++++++++++------- Week2/README.md | 14 ++++++++------ Week3/README.md | 9 +++------ 4 files changed, 36 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 7537d7c..fe8a001 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,11 @@ # HTML-CSS ## Introduction -> In this module will introduce the basic concepts of HTML5 and CSS. We spend time getting you familiar with your text editor and handy developer tools. After this we will focus on responsive web development. Making responsive websites is an important part of front-end programming. You will learn how to make your websites responsive by using media queries using a “mobile first” approach. Last but not least we will spend time practicing some soft skills that we think are important for becoming a good developer. These include: give and receive feedback to your fellow students, presenting and explaining your work. + +In this module you will learn HTML and CSS. HTML is the language in which you define the structure of the content of your pages (e.g. headings, paragraphs, links and images). CSS is used to write down how everything should look (e.g. font sizes, colors and positions). While learning the basics of these two languages, you will also get familiar with text editors and the developer tools of your browser. + +We will focus on _responsive_ web development: you will learn how to make your website adapt to the size of the screen, using the _mobile first_ approach. Last but not least we will spend time practicing some soft skills that are important for becoming a good developer. These include: giving feedback to your colleagues, presenting and explaining your work, and finding documentation on the web. + So since this is your first module, what can you expect the next three weeks? @@ -16,15 +20,15 @@ So since this is your first module, what can you expect the next three weeks? Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack! ## Learning goals for this module: -* Basic understanding of HTML5 and CSS (DOM, semantic elements) +* Basic understanding of HTML and CSS * Know how to organize your files * Know your way around your text editor -* Feel comfortable working with the console +* Feel comfortable working with the inspector * Properly indent your code * Properly naming classes, id's -* Responsive mobile first development -* Know "good" and "bad" practices when it comes to HTML -* Get an understanding of what good resources are on the web +* Responsive, _mobile first_ development +* Know good and bad practices when it comes to HTML +* Get an understanding of where to find information on the web * Give receive/feedback from/on fellow students * Presenting and explaining your work to others diff --git a/Week1/README.md b/Week1/README.md index ae4241c..aee5473 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,10 +1,18 @@ ##Learning goals for this week: - * Understand the DOM structure - * Get a feeling for HTML syntax - * Basic understanding of CSS syntax - * Get familiar with your text editor - * Linking to external files - * Structuring your files + * The division of labour between HTML and CSS + * Introduction to HTML: + * Parents, children, attributes + * Indentation + * Semantic elements + * Paragraphs, links, images, lists + * Introduction to CSS: + * Where can we write it and what difference does that make? + * Selectors (id, class, element type), properties + * How to structure a CSS file + * Naming things + * External files: relative and absolute paths + * Getting to know your text editor + ## Homework @@ -34,7 +42,7 @@ * BEFORE you hand it in, read the Style guide and check your files (you can also use the HTML validator ). ### Assignment: - * Next week we will talk about responsive web design and using media queries start reading about this subject here Introduction to Media Queries. And take a look at this website here you can find examples of responsive design. + * Next week we will talk about responsive web design and using media queries. Start reading about this subject here Introduction to Media Queries. And take a look at this website here you can find examples of responsive design. ### Helpful links: diff --git a/Week2/README.md b/Week2/README.md index 9852caa..5f5ad36 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,11 +1,13 @@ ## Learning goals for this week: - * Understand the HTML structure - * CSS (id's, classes, selectors and attributes) - * Tips and tricks - * Understand the basics of Media queries - * Understand why/ how to use which language + * Student presentations + * Last week recap and questions + * Responsive web development + * Relative measurements (%, (r)em, vw) + * Media queries + * Positioning (absolute, relative, fixed) + * Floating and clearing + * Flexbox * How to work with the inspector - * Resume presentations ## Homework diff --git a/Week3/README.md b/Week3/README.md index c68aaa5..bc319e9 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,11 +1,8 @@ ## Learning goals for this week: - * Presentations of students website remakes - * Repeat topics of last two weeks: - * Understand why/ how to use which language - * Media-queries - * DOM - * File structure, external links + * Student presentations + * Last week recap and questions * How to find information on the web + * How to rebuild an existing responsive page (getting started with this week's homework exercise) ## In class: From 87f2106aaabb065485e36fe9a8168354a40fc8cb Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Sun, 19 Mar 2017 18:01:52 +0100 Subject: [PATCH 005/216] corrected headers --- Week0/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Week0/README.md b/Week0/README.md index 2268e97..0e20719 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -1,4 +1,4 @@ -###Hello new class! +### Hello new class! >Before you come to your first session at HackYourFuture please go through this document, read, watch and check if you are ready to start your HackYourFuture adventure! @@ -13,16 +13,16 @@ * How the Internet Works in 5 Minutes * How Web Browsers Work -###Check double check: +### Check double check: -###Are you signed up for: +### Are you signed up for: - Slack - Trello - KhanAcademy (join the class you've been invited to) - Udacity -###Do you have a basic understanding of the following tools: +### Do you have a basic understanding of the following tools: - Slack - Trello @@ -30,7 +30,7 @@ >If the answer to this is 'no', don't panic, you can always ask help in Slack, but before you do, please first try and see if you can find some information about the above tools yourself. -###Do you have a text editor installed? +### Do you have a text editor installed? Any of the ones listed below is fine. - [Brackets](http://brackets.io) @@ -39,4 +39,4 @@ Any of the ones listed below is fine. - [Spacemacs](http://spacemacs.org/) - [Sublime (not free)](https://www.sublimetext.com/) -If you have no experience or preference when it comes to working with text editor just install Brackets, you can always switch to another editor later on in the program. \ No newline at end of file +If you have no experience or preference when it comes to working with text editor just install Brackets, you can always switch to another editor later on in the program. From 834da23f859d4878735d74b6d50da2087140a4d6 Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Sun, 19 Mar 2017 18:02:46 +0100 Subject: [PATCH 006/216] corrected headers --- Week1/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/README.md b/Week1/README.md index aee5473..a0857bd 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,4 +1,4 @@ -##Learning goals for this week: +## Learning goals for this week: * The division of labour between HTML and CSS * Introduction to HTML: * Parents, children, attributes From ab8b70c30c118bd97942cf31ea517d0d929a0dc8 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 20 Mar 2017 13:48:03 +0100 Subject: [PATCH 007/216] updated homework links --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fe8a001..68a8c6c 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ So since this is your first module, what can you expect the next three weeks? | Week | Topic | Read | Homework | | ---- | ----- | ---- |----------| |0.|Prepare for first session|[Week 0 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|[Homework week 0](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)| -| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | [Homework week 1] (https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | -| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | [Homework week 2] (https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | -| 3. | Recap, useful resources on the web| [Week 3 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | [Homework week 3] (https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | +| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | [Homework week 1](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | +| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | +| 3. | Recap, useful resources on the web| [Week 3 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack! From 2f67fd7c2773a3ee2ea24570595b68b8d356ec72 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 8 May 2017 15:54:03 +0200 Subject: [PATCH 008/216] update class10 :muscle: --- Week0/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Week0/README.md b/Week0/README.md index 0e20719..26d7319 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -40,3 +40,6 @@ Any of the ones listed below is fine. - [Sublime (not free)](https://www.sublimetext.com/) If you have no experience or preference when it comes to working with text editor just install Brackets, you can always switch to another editor later on in the program. + +### Curriculum +Don't forget to take a look at the [HackYourFuture curriculum](https://github.com/HackYourFuture/curriculum). Go through it and make sure you have an idea of what you will learn at HackYourFuture :muscle: From af892f7d09e0cae7499cd7e2c3b66cd5d514e145 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 8 May 2017 15:55:05 +0200 Subject: [PATCH 009/216] broken link fix --- Week0/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week0/README.md b/Week0/README.md index 26d7319..aed4f2b 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -34,7 +34,7 @@ Any of the ones listed below is fine. - [Brackets](http://brackets.io) -- [Atom] (https://atom.io/) +- [Atom](https://atom.io/) - [Visual studio](https://code.visualstudio.com/) - [Spacemacs](http://spacemacs.org/) - [Sublime (not free)](https://www.sublimetext.com/) From 5a0de985a08ca643677e5c75bb550aa1b989e7c5 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 8 May 2017 15:56:00 +0200 Subject: [PATCH 010/216] broken link fix --- Week0/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week0/README.md b/Week0/README.md index aed4f2b..3bc760b 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -5,7 +5,7 @@ ### Read these Chapters from the Front-end Handbook * What Is a Front-End Developer? * Part I. The Front-End Practice - * Read (lesson 1: building your first web page)[http://learn.shayhowe.com/html-css/building-your-first-web-page/] + * Read [lesson 1: building your first web page](http://learn.shayhowe.com/html-css/building-your-first-web-page/) >Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. From cb535acb841ed03659f665ee090f1587d9147208 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 21 May 2017 12:52:51 +0200 Subject: [PATCH 011/216] update --- Week1/README.md | 17 +++++++++-------- Week2/README.md | 14 +++++++------- Week3/README.md | 2 +- 3 files changed, 17 insertions(+), 16 deletions(-) diff --git a/Week1/README.md b/Week1/README.md index a0857bd..f43d8bb 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,5 +1,5 @@ ## Learning goals for this week: - * The division of labour between HTML and CSS + * The division of labor between HTML and CSS * Introduction to HTML: * Parents, children, attributes * Indentation @@ -14,11 +14,10 @@ * Getting to know your text editor - -## Homework +## Homework Week 1 ### Exercises: - * Khan Academy: Into to HTML/CSS: Making web pages + * Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) ### Assignment: @@ -39,12 +38,14 @@ * Some CSS properties: margin, padding * Make sure that you page looks nice, and that your text is readable * upload in a zip - * BEFORE you hand it in, read the Style guide and check your files (you can also use the HTML validator ). + * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and check your files (you can also use the [HTML validator](https://validator.w3.org)). ### Assignment: - * Next week we will talk about responsive web design and using media queries. Start reading about this subject here Introduction to Media Queries. And take a look at this website here you can find examples of responsive design. + * Next week we will talk about responsive web design and using media queries. Start reading about this subject here [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). And take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. +## Fun to check out: +[Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/) ### Helpful links: - * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction - * https://css-tricks.com/almanac/properties/ + * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) + * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) diff --git a/Week2/README.md b/Week2/README.md index 5f5ad36..973750c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -12,14 +12,14 @@ ## Homework ### Read: - * Introduction to media queries - * More about media queries - * HTML syntax - * Article about multiple ways to select classes and id's - * Read about nice color combinations + * [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction) + * [More about media queries](https://css-tricks.com/css-media-queries/) + * [HTML syntax](http://www.w3schools.com/html/html5_syntax.asp) + * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) + * [Read about nice color combinations](http://www.colorcombos.com/index.html) ### Exercises: - * Udacity: Responsive web design fundamentals + * Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) ### Assignment: * Grids exercise @@ -35,7 +35,7 @@ * Make the page look beautiful by adding some more CSS! Some tips: * How about some nice colors, fonts, hover styles? * According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different. - * BEFORE you hand it in, read the Style guide again and check your files + * BEFORE you hand it in, read [the Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files ## Extra extra: diff --git a/Week3/README.md b/Week3/README.md index bc319e9..75a393b 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -26,5 +26,5 @@ * http://incredibletypes.com * http://thenextweb.com * It should have an external CSS file - * BEFORE you hand it in, read the Style guide again and check your files + * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files From 41ee7be26ec90bca69e2df1639b73484f332a89c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 21 May 2017 15:52:12 +0200 Subject: [PATCH 012/216] update class10 --- README.md | 6 ++-- Week1/MAKEME.md | 53 ++++++++++++++++++++++++++++++++++ Week1/README.md | 52 ++------------------------------- Week2/MAKEME.md | 46 +++++++++++++++++++++++++++++ Week2/README.md | 45 ++--------------------------- Week3/{README.md => MAKEME.md} | 1 - 6 files changed, 106 insertions(+), 97 deletions(-) create mode 100644 Week1/MAKEME.md create mode 100644 Week2/MAKEME.md rename Week3/{README.md => MAKEME.md} (99%) diff --git a/README.md b/README.md index 68a8c6c..dad0d24 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ So since this is your first module, what can you expect the next three weeks? | Week | Topic | Read | Homework | | ---- | ----- | ---- |----------| |0.|Prepare for first session|[Week 0 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|[Homework week 0](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)| -| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | [Homework week 1](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1) | -| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2) | -| 3. | Recap, useful resources on the web| [Week 3 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3) | +| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/README.md) | [Homework week 1](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/MAKEME.md) | +| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/README.md) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/MAKEME.md) | +| 3. | Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3/MAKEME.md) | Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack! diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md new file mode 100644 index 0000000..742f43c --- /dev/null +++ b/Week1/MAKEME.md @@ -0,0 +1,53 @@ +# Homework week 1 + +## Learning goals for this week: + * The division of labor between HTML and CSS + * Introduction to HTML: + * Parents, children, attributes + * Indentation + * Semantic elements + * Paragraphs, links, images, lists + * Introduction to CSS: + * Where can we write it and what difference does that make? + * Selectors (id, class, element type), properties + * How to structure a CSS file + * Naming things + * External files: relative and absolute paths + * Getting to know your text editor + + +## Homework Week 1 + +### Good learning practices +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]. + +### Exercises: + * Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) + + +### Assignment: + * Make your own web resume: + * One page + * Two files: HTML and CSS + * Include the following: + * Your personal info (name, place of birth, etc.) + * A picture + * A few lines about who you are + * Education + * Work experience + * Include the following: + * Different types of headings (h1, h2) + * A list (ul). In this list include the _learning strategies_ you used making your resume. Also include some of the resources/references, this can be documentation/video etc, that where helpful. + * img + * p + * Some CSS properties: margin, padding + * Make sure that you page looks nice, and that your text is readable + * upload in a zip + * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and check your files (you can also use the [HTML validator](https://validator.w3.org)). + +## Fun to check out: +[Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/) + +### Helpful links: + * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) + * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) diff --git a/Week1/README.md b/Week1/README.md index f43d8bb..c81dbf1 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,51 +1,3 @@ -## Learning goals for this week: - * The division of labor between HTML and CSS - * Introduction to HTML: - * Parents, children, attributes - * Indentation - * Semantic elements - * Paragraphs, links, images, lists - * Introduction to CSS: - * Where can we write it and what difference does that make? - * Selectors (id, class, element type), properties - * How to structure a CSS file - * Naming things - * External files: relative and absolute paths - * Getting to know your text editor - +# Readings for the second lecture -## Homework Week 1 - -### Exercises: - * Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) - - -### Assignment: - * Make your own web resume: - * One page - * Two files: HTML and CSS - * Include the following: - * Your personal info (name, place of birth, etc.) - * A picture - * A few lines about who you are - * Education - * Work experience - * Include the following: - * Different types of headings (h1, h2) - * A list (ul) - * img - * p - * Some CSS properties: margin, padding - * Make sure that you page looks nice, and that your text is readable - * upload in a zip - * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and check your files (you can also use the [HTML validator](https://validator.w3.org)). - -### Assignment: - * Next week we will talk about responsive web design and using media queries. Start reading about this subject here [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). And take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. - -## Fun to check out: -[Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/) - -### Helpful links: - * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) - * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) +Next week we will talk about responsive web design and using media queries. Start reading about this subject here [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). And take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md new file mode 100644 index 0000000..8c7bafe --- /dev/null +++ b/Week2/MAKEME.md @@ -0,0 +1,46 @@ +# Homework week 2 + +## Learning goals for this week: + * Student presentations + * Last week recap and questions + * Responsive web development + * Relative measurements (%, (r)em, vw) + * Media queries + * Positioning (absolute, relative, fixed) + * Floating and clearing + * Flexbox + * How to work with the inspector + +## Homework + +### Read: + * [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction) + * [More about media queries](https://css-tricks.com/css-media-queries/) + * [HTML syntax](http://www.w3schools.com/html/html5_syntax.asp) + * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) + * [Read about nice color combinations](http://www.colorcombos.com/index.html) + +### Exercises: + * Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) + +### Assignment: + * Grids exercise + * Download the HTML and images in the folder Homework 2 + * You are going to write the CSS for this page + * You are not allowed to change the HTML + * The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two! + * We want the grid to look as follows: + * On mobile phones: a two column grid, with the exception that the first item spans the full width + * On tablets: a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns) + * On desktops: a four column grid, with the exception that the first item spans two columns. + * There should be some space between the grid items + * Make the page look beautiful by adding some more CSS! Some tips: + * How about some nice colors, fonts, hover styles? + * According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different. + * BEFORE you hand it in, read [the Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files + +## Extra extra: + +* Make a page including: + * An animation using CSS keyframes + * An SVG diff --git a/Week2/README.md b/Week2/README.md index 973750c..f847038 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,44 +1,3 @@ -## Learning goals for this week: - * Student presentations - * Last week recap and questions - * Responsive web development - * Relative measurements (%, (r)em, vw) - * Media queries - * Positioning (absolute, relative, fixed) - * Floating and clearing - * Flexbox - * How to work with the inspector +# Readings for the third lecture: -## Homework - -### Read: - * [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction) - * [More about media queries](https://css-tricks.com/css-media-queries/) - * [HTML syntax](http://www.w3schools.com/html/html5_syntax.asp) - * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) - * [Read about nice color combinations](http://www.colorcombos.com/index.html) - -### Exercises: - * Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) - -### Assignment: - * Grids exercise - * Download the HTML and images in the folder Homework 2 - * You are going to write the CSS for this page - * You are not allowed to change the HTML - * The page contains two grids: the first one should work using floats, the second using flex box. Be careful not to mix the two! - * We want the grid to look as follows: - * On mobile phones: a two column grid, with the exception that the first item spans the full width - * On tablets: a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then after the first two items we have three columns) - * On desktops: a four column grid, with the exception that the first item spans two columns. - * There should be some space between the grid items - * Make the page look beautiful by adding some more CSS! Some tips: - * How about some nice colors, fonts, hover styles? - * According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different. - * BEFORE you hand it in, read [the Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files - -## Extra extra: - -* Make a page including: - * An animation using CSS keyframes - * An SVG +TBA \ No newline at end of file diff --git a/Week3/README.md b/Week3/MAKEME.md similarity index 99% rename from Week3/README.md rename to Week3/MAKEME.md index 75a393b..042660a 100644 --- a/Week3/README.md +++ b/Week3/MAKEME.md @@ -27,4 +27,3 @@ * http://thenextweb.com * It should have an external CSS file * BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) again and check your files - From b55da90271bdafd68a356ac1ffe733fbc2daaf36 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 21 May 2017 15:54:17 +0200 Subject: [PATCH 013/216] updat class10 --- Week1/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 742f43c..44e9c06 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -19,7 +19,7 @@ ## Homework Week 1 ### Good learning practices -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]. +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. ### Exercises: * Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) From ceef8e1305a7d8281cbb040b5b963ea52de5eaaf Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 24 May 2017 11:37:09 +0200 Subject: [PATCH 014/216] added some fun links --- .gitignore | 2 ++ Week2/MAKEME.md | 4 ++++ 2 files changed, 6 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..04ed6ad --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +*/.DS_Store \ No newline at end of file diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 8c7bafe..d7a5e9d 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -20,6 +20,10 @@ * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) * [Read about nice color combinations](http://www.colorcombos.com/index.html) +#### Super fun flexbox practice + * [flexboxfroggy](https://flexboxfroggy.com/) + * [cssgridgarden](http://cssgridgarden.com/) + ### Exercises: * Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) From 9c6d0b2720326d82b645b5abc75eb47a1b58ef8a Mon Sep 17 00:00:00 2001 From: Ariadne Gomes Date: Sat, 27 May 2017 09:59:38 +0200 Subject: [PATCH 015/216] update fun links description --- .gitignore | 1 + Week2/MAKEME.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 04ed6ad..dbf2432 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ +.idea .DS_Store */.DS_Store \ No newline at end of file diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index d7a5e9d..b35edf6 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -20,7 +20,7 @@ * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) * [Read about nice color combinations](http://www.colorcombos.com/index.html) -#### Super fun flexbox practice +#### Super fun flexbox and grid practice * [flexboxfroggy](https://flexboxfroggy.com/) * [cssgridgarden](http://cssgridgarden.com/) From 4c4c7ab6a2db2f8ac1b57d88de582343a44f8c29 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 25 Jul 2017 13:55:51 +0200 Subject: [PATCH 016/216] update class11 --- README.md | 2 +- Week0/README.md | 31 +++++++++++++++++++++++-------- Week1/MAKEME.md | 28 +++++++++++++++++++--------- Week2/MAKEME.md | 10 ++++++++-- 4 files changed, 51 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index dad0d24..bec6ecb 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ So since this is your first module, what can you expect the next three weeks? ## Planning for Current Class | Week | Topic | Read | Homework | | ---- | ----- | ---- |----------| -|0.|Prepare for first session|[Week 0 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|[Homework week 0](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)| +|0.|Prepare for first session|[Pre-reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|-| | 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/README.md) | [Homework week 1](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/MAKEME.md) | | 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/README.md) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/MAKEME.md) | | 3. | Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3/MAKEME.md) | diff --git a/Week0/README.md b/Week0/README.md index 3bc760b..d10befc 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -2,25 +2,40 @@ >Before you come to your first session at HackYourFuture please go through this document, read, watch and check if you are ready to start your HackYourFuture adventure! -### Read these Chapters from the Front-end Handbook - * What Is a Front-End Developer? - * Part I. The Front-End Practice +### Read these Chapters from the [Front-end Handbook](https://www.frontendhandbook.com) + * [What Is a Front-End Developer?](https://frontendmasters.com/books/front-end-handbook/2017/what-is-a-FD.html) + * [Part I. The Front-End Practice](https://frontendmasters.com/books/front-end-handbook/2017/practice.html) + * From Part II. read: [Self Directed Learning](https://www.frontendhandbook.com/learning/self-direct-learning.html), also read [Learn HTML/CSS](https://frontendmasters.com/books/front-end-handbook/2017/learning/html-css.html) * Read [lesson 1: building your first web page](http://learn.shayhowe.com/html-css/building-your-first-web-page/) +### After you finish reading ask yourself the following questions: + * What is a Front-End Developer? + * What is A web browser? + * Wat are considered as Front-End Dev Skills? + * What are good references/resources to use to learn on your own? (have you bookmarked them??) + * What is the difference between HTML and CSS? + * What are HTML elements, tags, and attributes? + * How do you setup up the structure of your first web page? + * What are CSS selectors, properties, and values? + * How do you work with CSS selectors? + * How do you reference CSS in your HTML? + * Why would you use CSS resets? + >Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material. ### Watch these videos: * How the Internet Works in 5 Minutes * How Web Browsers Work +### Add a card in Trello: +* In Trello, create a card with your name (there is an example in there) and add the link to your CodePen that contains you application assignment. + ### Check double check: ### Are you signed up for: - Slack - Trello -- KhanAcademy (join the class you've been invited to) -- Udacity ### Do you have a basic understanding of the following tools: @@ -28,18 +43,18 @@ - Trello - Our Github repository ->If the answer to this is 'no', don't panic, you can always ask help in Slack, but before you do, please first try and see if you can find some information about the above tools yourself. +>If the answer to this is 'no', don't panic, you can always ask help in Slack, but before you do, please first try and see if you can find some information about the above tools yourself (hint: ask Google first). ### Do you have a text editor installed? Any of the ones listed below is fine. +- [Visual studio](https://code.visualstudio.com/) - [Brackets](http://brackets.io) - [Atom](https://atom.io/) -- [Visual studio](https://code.visualstudio.com/) - [Spacemacs](http://spacemacs.org/) - [Sublime (not free)](https://www.sublimetext.com/) -If you have no experience or preference when it comes to working with text editor just install Brackets, you can always switch to another editor later on in the program. +If you have no experience or preference when it comes to working with text editor just install Visual studio, you can always switch to another editor later on in the program. ### Curriculum Don't forget to take a look at the [HackYourFuture curriculum](https://github.com/HackYourFuture/curriculum). Go through it and make sure you have an idea of what you will learn at HackYourFuture :muscle: diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 44e9c06..5d4291f 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,4 +1,6 @@ -# Homework week 1 +# Week 1 + +[Here](https://github.com/HackYourFuture/HTML-CSS/blob/master/Week1/README.md) you find the readings you have to complete before the second lecture. ## Learning goals for this week: * The division of labor between HTML and CSS @@ -14,17 +16,27 @@ * Naming things * External files: relative and absolute paths * Getting to know your text editor - -## Homework Week 1 +# Homework Week 1 +## Step 1. ### Good learning practices 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. -### Exercises: - * Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) - +### HTML5 +Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) + +### CSS: +* [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) +* [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) + +## Step 2. +* In Trello, you are assigned to one of the cards of your fellow students (in the Class11 Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them. +* revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates. + +> 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 reminder +## Step 3. ### Assignment: * Make your own web resume: * One page @@ -48,6 +60,4 @@ Before you start check out this [video](http://www.learningscientists.org/videos ## Fun to check out: [Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/) -### Helpful links: - * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) - * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) +## Last but not least, when you are done with the homework check the learning goals at the top of this document. Go through each of them and check if you understand what is written there. Try formulating them into questions and answer your own questions (for example: Wat does it mean when you say that there is a division of labor between HTML and CSS? Why is there a division of labor between HTML and CSS?). If you need help with this, first ask Google, than ask in Slack. diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index b35edf6..1e0175b 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,4 +1,6 @@ -# Homework week 2 +# Week 2 + +[Here](https://github.com/HackYourFuture/HTML-CSS/blob/master/Week2/README.md) you find the readings you have to complete before the second lecture. ## Learning goals for this week: * Student presentations @@ -11,8 +13,9 @@ * Flexbox * How to work with the inspector -## Homework +# Homework +## Step 1. ### Read: * [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction) * [More about media queries](https://css-tricks.com/css-media-queries/) @@ -20,6 +23,7 @@ * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) * [Read about nice color combinations](http://www.colorcombos.com/index.html) +## Step 2. #### Super fun flexbox and grid practice * [flexboxfroggy](https://flexboxfroggy.com/) * [cssgridgarden](http://cssgridgarden.com/) @@ -27,6 +31,8 @@ ### Exercises: * Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) + +## Step 3. ### Assignment: * Grids exercise * Download the HTML and images in the folder Homework 2 From 90647fb81131c136fea50db7824904d5a20011d2 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 30 Jul 2017 15:08:57 +0200 Subject: [PATCH 017/216] update class11 --- README.md | 2 +- Week1/MAKEME.md | 4 ++++ Week1/README.md | 2 +- Week2/README.md | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bec6ecb..a2f3535 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ So since this is your first module, what can you expect the next three weeks? | 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/README.md) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/MAKEME.md) | | 3. | Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3/MAKEME.md) | -Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\_(ツ)_/¯, please ask/comment on Slack! +Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\\\_(ツ)_/¯, please ask/comment on Slack! ## Learning goals for this module: * Basic understanding of HTML and CSS diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 5d4291f..aa5a322 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -27,8 +27,11 @@ Before you start check out this [video](http://www.learningscientists.org/videos Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) ### CSS: +* [CSS reference](http://cssreference.io/) * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) +* [MDN - CSS box model]https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model + ## Step 2. * In Trello, you are assigned to one of the cards of your fellow students (in the Class11 Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them. @@ -50,6 +53,7 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 * Include the following: * Different types of headings (h1, h2) * A list (ul). In this list include the _learning strategies_ you used making your resume. Also include some of the resources/references, this can be documentation/video etc, that where helpful. + * Another list (ul). In this list you include the most important platforms/resources where you can find all hyf related information. * img * p * Some CSS properties: margin, padding diff --git a/Week1/README.md b/Week1/README.md index c81dbf1..75a771d 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,3 +1,3 @@ # Readings for the second lecture -Next week we will talk about responsive web design and using media queries. Start reading about this subject here [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). And take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. +Next week we will talk about responsive web design and using media queries. Start reading about this subject here [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). And read about [flexbox](https://tympanus.net/codrops/css_reference/flexbox/And) take a look at this [website](http://mediaqueri.es) here you can find examples of responsive design. diff --git a/Week2/README.md b/Week2/README.md index f847038..b61b4c7 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,3 +1,3 @@ # Readings for the third lecture: -TBA \ No newline at end of file +* [CSS tricks ]https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) \ No newline at end of file From c4f990100ef6c5f793bf0c53d29ad40e6e9f4a10 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 31 Jul 2017 11:07:09 +0200 Subject: [PATCH 018/216] fix link --- Week1/MAKEME.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index aa5a322..63e5cbd 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -30,8 +30,7 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 * [CSS reference](http://cssreference.io/) * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) -* [MDN - CSS box model]https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model - +* [MDN - CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) ## Step 2. * In Trello, you are assigned to one of the cards of your fellow students (in the Class11 Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them. From 5ca8bde8c0c7cd62093380e48a3b52f90f17ba1a Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 31 Jul 2017 16:10:10 +0200 Subject: [PATCH 019/216] updated responsive course --- Week1/MAKEME.md | 1 + Week2/MAKEME.md | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 63e5cbd..a621588 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -36,6 +36,7 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 * In Trello, you are assigned to one of the cards of your fellow students (in the Class11 Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them. * revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates. + > 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 reminder ## Step 3. diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 1e0175b..3f2cb34 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -24,14 +24,13 @@ * [Read about nice color combinations](http://www.colorcombos.com/index.html) ## Step 2. +### Exercises: + * CodeAcedemy: [Learn Responsive Design](https://www.codecademy.com/learn/learn-responsive-design) + #### Super fun flexbox and grid practice * [flexboxfroggy](https://flexboxfroggy.com/) * [cssgridgarden](http://cssgridgarden.com/) -### Exercises: - * Udacity: [Responsive web design fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) - - ## Step 3. ### Assignment: * Grids exercise @@ -51,6 +50,6 @@ ## Extra extra: -* Make a page including: +* Add one of the following to your page: * An animation using CSS keyframes * An SVG From 6864c9504c364d508e378c36c0aee9c94488b8ba Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 6 Aug 2017 16:28:24 +0200 Subject: [PATCH 020/216] update class11 --- Week2/MAKEME.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 3f2cb34..3efca64 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -16,6 +16,14 @@ # Homework ## Step 1. + +### Give feedback on one of your fellow students CV pages +* In Trello you are added to one of the cards of your fellow students. +* Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them. +* revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates. + +## Step 2. + ### Read: * [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction) * [More about media queries](https://css-tricks.com/css-media-queries/) @@ -23,7 +31,6 @@ * [Article about multiple ways to select classes and id's](https://css-tricks.com/multiple-class-id-selectors) * [Read about nice color combinations](http://www.colorcombos.com/index.html) -## Step 2. ### Exercises: * CodeAcedemy: [Learn Responsive Design](https://www.codecademy.com/learn/learn-responsive-design) From d29f898ca0a8bebc3dc674c817014cd6dbe7ebdc Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 6 Sep 2017 15:19:22 +0200 Subject: [PATCH 021/216] added slack and trello references --- Week0/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Week0/README.md b/Week0/README.md index d10befc..f1474e5 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -30,6 +30,16 @@ ### Add a card in Trello: * In Trello, create a card with your name (there is an example in there) and add the link to your CodePen that contains you application assignment. + +### Install the Slack Apps on your: +- Mobile: [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) or [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) +- Desktop: [OSX](https://slack.com/downloads/osx) or [Windows](https://slack.com/downloads/windows) + +### Read: +- About Slack: [Cheat sheet for basics and shortcuts](https://get.slack.help/hc/en-us/articles/217626358-Cheat-sheet-for-basics-and-shortcuts) +- How to format your messages in Slack: [Using Slack](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages) +- Take the Trello [tour](https://trello.com/tour) + ### Check double check: ### Are you signed up for: From 1618b56d5e38c831d347b926a144b0a0b47654fc Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 12 Sep 2017 15:57:42 +0200 Subject: [PATCH 022/216] added format review and info about handing in homework --- README.md | 34 +++++++++++----------- Week0/README.md | 10 +++---- Week1/MAKEME.md | 50 ++++++++++++++++++++------------- Week1/README.md | 16 +++++++++-- Week1/REVIEW.md | 19 +++++++++++++ Week1/assets/github_pages1.png | Bin 0 -> 131286 bytes Week1/assets/github_pages2.png | Bin 0 -> 257866 bytes Week2/MAKEME.md | 26 ++++++++--------- Week2/README.md | 13 +++++++-- Week2/REVIEW.md | 13 +++++++++ Week3/MAKEME.md | 17 +++++++---- Week3/REVIEW.md | 7 +++++ 12 files changed, 141 insertions(+), 64 deletions(-) create mode 100644 Week1/REVIEW.md create mode 100644 Week1/assets/github_pages1.png create mode 100644 Week1/assets/github_pages2.png create mode 100644 Week2/REVIEW.md create mode 100644 Week3/REVIEW.md diff --git a/README.md b/README.md index a2f3535..638bc13 100644 --- a/README.md +++ b/README.md @@ -10,27 +10,27 @@ We will focus on _responsive_ web development: you will learn how to make your w So since this is your first module, what can you expect the next three weeks? ## Planning for Current Class -| Week | Topic | Read | Homework | -| ---- | ----- | ---- |----------| -|0.|Prepare for first session|[Pre-reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|-| -| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/README.md) | [Homework week 1](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/MAKEME.md) | -| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/README.md) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/MAKEME.md) | -| 3. | Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3/MAKEME.md) | +| Week | Topic | Read | Homework | Review | +| ---- | ----- | ---- |----------|--------| +|0.|Prepare for first session|[Pre-reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week0)|-|-| +| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/README.md) | [Homework week 1](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/MAKEME.md) |[Review](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1/REVIEW.md)| +| 2. | Responsive design, media queries, developer tools | [Week 2 Reading](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/README.md) | [Homework week 2](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/MAKEME.md) ||[Review](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week2/REVIEW.md)| +| 3. | Recap, useful resources on the web| [JavaScript Intro](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0) | [Homework week 3](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3/MAKEME.md) ||[Review](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week3/REVIEW.md)| Please get yourself familiar with this repository by navigating your way through the different README files. Kind note: make sure to read assignment requirements properly for handing them in, in the end this saves both you and your teacher a lot of time. If you have any questions or something is not entirely clear ¯\\\_(ツ)_/¯, please ask/comment on Slack! ## Learning goals for this module: -* Basic understanding of HTML and CSS -* Know how to organize your files -* Know your way around your text editor -* Feel comfortable working with the inspector -* Properly indent your code -* Properly naming classes, id's -* Responsive, _mobile first_ development -* Know good and bad practices when it comes to HTML -* Get an understanding of where to find information on the web -* Give receive/feedback from/on fellow students -* Presenting and explaining your work to others +• Basic understanding of HTML and CSS +• Know how to organize your files +• Know your way around your text editor +• Feel comfortable working with the inspector +• Properly indent your code +• Properly naming classes, id's +• Responsive, _mobile first_ development +• Know good and bad practices when it comes to HTML +• Get an understanding of where to find information on the web +• Give receive/feedback from/on fellow students +• Presenting and explaining your work to others diff --git a/Week0/README.md b/Week0/README.md index f1474e5..fb8ea3f 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -30,7 +30,6 @@ ### Add a card in Trello: * In Trello, create a card with your name (there is an example in there) and add the link to your CodePen that contains you application assignment. - ### Install the Slack Apps on your: - Mobile: [App store](https://itunes.apple.com/nl/app/slack/id803453959?mt=12) or [Google Play](https://play.google.com/store/apps/details?id=com.Slack&hl=nl) - Desktop: [OSX](https://slack.com/downloads/osx) or [Windows](https://slack.com/downloads/windows) @@ -46,12 +45,13 @@ - Slack - Trello +- Github -### Do you have a basic understanding of the following tools: +### Did you do the following?: -- Slack -- Trello -- Our Github repository +- Write an "hallo :hand:" in Slack? +- Did you add a card to Trello with your name and added the link to your application assignment (CodePen)? +- Did you create a Github account? >If the answer to this is 'no', don't panic, you can always ask help in Slack, but before you do, please first try and see if you can find some information about the above tools yourself (hint: ask Google first). diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index a621588..b892a95 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,8 +1,8 @@ -# Week 1 +## Homework Week 1 [Here](https://github.com/HackYourFuture/HTML-CSS/blob/master/Week1/README.md) you find the readings you have to complete before the second lecture. -## Learning goals for this week: +### Learning goals for this week: * The division of labor between HTML and CSS * Introduction to HTML: * Parents, children, attributes @@ -17,30 +17,26 @@ * External files: relative and absolute paths * Getting to know your text editor -# Homework Week 1 - -## Step 1. -### Good learning practices +### Step 1: Read and watch +#### Good learning practices 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. -### HTML5 +#### HTML5 Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) -### CSS: +#### CSS: * [CSS reference](http://cssreference.io/) * [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) * [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/) * [MDN - CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) -## Step 2. +### Step 2: Give feedback * In Trello, you are assigned to one of the cards of your fellow students (in the Class11 Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them. * revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates. - > 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 reminder -## Step 3. -### Assignment: +### Step 3: Assignment * Make your own web resume: * One page * Two files: HTML and CSS @@ -51,16 +47,32 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 * Education * Work experience * Include the following: - * Different types of headings (h1, h2) - * A list (ul). In this list include the _learning strategies_ you used making your resume. Also include some of the resources/references, this can be documentation/video etc, that where helpful. - * Another list (ul). In this list you include the most important platforms/resources where you can find all hyf related information. - * img - * p - * Some CSS properties: margin, padding + * Different types of headings (`

`, `

`) + * A list (`