From fa05f105af6336e1dffbd3ab7ebbe516d39fc4cb Mon Sep 17 00:00:00 2001 From: Gijs C Date: Thu, 9 Aug 2018 08:33:15 +0200 Subject: [PATCH 001/143] small update regarding clarity There were a few "to reads", that aer basically a page with 20+ links to very specific projects not covered (or website to learn how to code that we don't specifically use in the course), I made it clear that this is just for future reference, not direct reading material for this week --- Week1/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week1/README.md b/Week1/README.md index 920a524..09ce965 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -26,8 +26,8 @@ In week one we will discuss the following topics ### 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/) + * From Part II. have a look at: [Self Directed Learning](https://www.frontendhandbook.com/learning/self-direct-learning.html), read the definitions of HTML and CSS here (use the rest of the links for later reference) [Learn HTML/CSS](https://frontendmasters.com/books/front-end-handbook/2017/learning/html-css.html) + * Read(important!) [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? From b31e41d0e713b76d953df0221c8a37eb7b770e8e Mon Sep 17 00:00:00 2001 From: Gijs C Date: Thu, 9 Aug 2018 08:58:50 +0200 Subject: [PATCH 002/143] small update for clarity --- Week1/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index fc30379..673b739 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -42,7 +42,7 @@ _Deadline Monday_ - Please create a repository on Github, call it `hyf-html-css`. - Inside this repository create a folder `week0`. -- Use the code of the application assignment you have made, 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. +- 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. - For better instructions on how to do this please check the [how to hand in homework](#how-to-hand-in-homework) down below. - In Trello, you are assigned to one of the cards of your fellow students (in the _your class number_ 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. From 05450a456cae9d2a3a69dd7dca737060018dd606 Mon Sep 17 00:00:00 2001 From: Wouter Kleijn <37488847+wouterkleijn@users.noreply.github.com> Date: Mon, 19 Nov 2018 21:06:53 +0100 Subject: [PATCH 003/143] Update MakeMEmd Fixed the link --- Week2/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index b155b6e..b94c0f6 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -31,7 +31,7 @@ _Deadline Monday_ _Deadline Tuesday_ ->We covered a bit of command line usage in the first class and got a program running which is great. If you need a refresher for the command line please have a look here: https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md +>We covered a bit of command line usage in the first class and got a program running which is great. If you need a refresher for the command line please have a look here: https://github.com/HackYourFuture/CommandLine/blob/master/Week1/Lecture.md ``` 1. Research how to create a hidden file and how to display it using ls command. From a98db5c6ca7426a371f3e5d9ff2f5c19c4d02607 Mon Sep 17 00:00:00 2001 From: Gijs C Date: Thu, 22 Nov 2018 14:55:51 +0100 Subject: [PATCH 004/143] fixed dead link --- Week2/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week2/README.md b/Week2/README.md index f01196f..c55d4e2 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -23,7 +23,7 @@ If you have Linux installed on your laptop or you have a MACbook, then you don ### Read about CLI -Go to the [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md) repoistory to prepare for you first commandline class! +Go to the [CLI](https://github.com/HackYourFuture/CommandLine/) repoistory to prepare for you first commandline class! ### Here are resources that we like you to read as a preparation for the coming lecture: - Start reading about media queries here: [Introduction to Media Queries](https://varvy.com/mobile/media-queries.html). From 1a11026db9f5c2ad6e93b9860de67eb88f263b0b Mon Sep 17 00:00:00 2001 From: Gijs C Date: Thu, 22 Nov 2018 14:59:46 +0100 Subject: [PATCH 005/143] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fc00349..2092e6e 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,8 @@ So since this is your first module, what can you expect the next three weeks? | Week | Topic | Read | Homework | | ---- | ----- | ---- |----------| | 1. | DOM, HTML/CSS syntax | [Week 1 Reading](/Week1/README.md) | [Homework week 1](/Week1/MAKEME.md) | -| 2. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md), Responsive design, media queries, developer tools | [Week 2 Reading](/Week2/README.md) | [Homework week 2](/Week2/MAKEME.md) | -| 3. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.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) | +| 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) | +| 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) | 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 e96c1279c06b5769f7075e44c969880f19c5943c Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Thu, 22 Nov 2018 16:07:23 +0100 Subject: [PATCH 006/143] fixed internal links to Lecture.md --- Week3/MAKEME.md | 55 ++++++++++++++++++++++++------------------------- Week3/README.md | 5 +++-- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 028e14c..8d9b5c7 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,8 +1,9 @@ ## Homework Week 3 ->[Here](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) you find the readings you have to complete before your first JavaScript lecture +> [Here](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) you find the readings you have to complete before your first JavaScript lecture ### Learning goals for this week: + ``` • CLI • Learn output redirection, piping on the terminal. @@ -14,13 +15,14 @@ ``` ### 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 web page - - CSS transitions - - CSS animations with keyframes - - SVG - - Drop down menu in CSS - - flex-box + +- 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 web page + - CSS transitions + - CSS animations with keyframes + - SVG + - Drop down menu in CSS + - flex-box ## Step 1: Give feedback @@ -28,8 +30,7 @@ _Deadline Monday_ - In Trello you are added to one of the cards of your fellow students. - Give feedback on the drone assignment and the command line homework 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 drone assignment and command line homework and improve it with the feedback and suggestions given by one of your classmates. - +- Revisit you own drone assignment and command line homework and improve it with the feedback and suggestions given by one of your classmates. ## Step 2: Command Line @@ -37,8 +38,8 @@ _Deadline Wednesday_ ``` Write ONE shell script to do following: -1. create a directory. Enter a directory. Create an empty file named blank. -2. Then write the content "Hello" five times to the file greetings.txt. +1. create a directory. Enter a directory. Create an empty file named blank. +2. Then write the content "Hello" five times to the file greetings.txt. Then copy the file greetings.txt and paste its contents into 1.txt, 2.txt, 3.txt, 4.txt and 5.txt. 3. Then write the text "cat" to pets.txt Then append the text "dog" to pets.txt @@ -50,31 +51,29 @@ Write ONE shell script to do following: and store the unique strings in lovelyCommands.txt ``` -For and overview of the commands we learned in class please take a look at the overview of the [second lecture](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md). If you need a refresher you can of course also go over the commands of the [first lecture](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md) - +For and overview of the commands we learned in class please take a look at the overview of the [second lecture](https://github.com/HackYourFuture/CommandLine/blob/master/Week2/Lecture.md/). If you need a refresher you can of course also go over the commands of the [first lecture](https://github.com/HackYourFuture/CommandLine/blob/master/Week1/Lecture.md/) ## Step 3: Assignment _Deadline Saturday_ -> Use the command line to create a directory "week3" inside your "hyf-html-css" directory. There should already be a "week1" and "week2" inside that contains your homework of the last weeks. - - - Remake an existing responsive website: choose one of the following - - https://www.rijksoverheid.nl - - http://www.awwwards.com - - https://www.bostonglobe.com - - https://www.thinkwithgoogle.com - - http://muumilaakso.tampere.fi/en/ - - http://incredibletypes.com - - 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 +> Use the command line to create a directory "week3" inside your "hyf-html-css" directory. There should already be a "week1" and "week2" inside that contains your homework of the last weeks. +- Remake an existing responsive website: choose one of the following + - https://www.rijksoverheid.nl + - http://www.awwwards.com + - https://www.bostonglobe.com + - https://www.thinkwithgoogle.com + - http://muumilaakso.tampere.fi/en/ + - http://incredibletypes.com + - 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 ``` How to hand in your homework: -• Upload your homework in your Github repository. -• Make sure to create a new folder "week3" first. +• Upload your homework in your Github repository. +• Make sure to create a new folder "week3" first. • Your hyf-html-css/week3 should now contain an index.html and a main.css file (and the images folder) • Place the link to your repository in Trello. ``` diff --git a/Week3/README.md b/Week3/README.md index 0e0899e..fb8c74b 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -8,10 +8,11 @@ In week three we will discuss the following topics • Recap • How to find useful resources on the web ``` -Read the following links: + +Read the following links: - [CSS tricks ](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) -- [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md) +- [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Week2/Lecture.md/) - Bookmark the sites/resources that you used that where most useful for you the last two weeks. _Please go through the material and come to class prepared!_ From 40941fe0dfe31587b1fcef39df4983e6b22bc607 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Mon, 26 Nov 2018 16:35:35 +0100 Subject: [PATCH 007/143] Removed task of 'student feedback' --- README.md | 28 +++++++++--------- Week1/MAKEME.md | 58 +++++++++++++++++++++---------------- Week2/MAKEME.md | 76 +++++++++++++++++++++++-------------------------- Week3/MAKEME.md | 10 +------ 4 files changed, 83 insertions(+), 89 deletions(-) diff --git a/README.md b/README.md index 2092e6e..baee45c 100644 --- a/README.md +++ b/README.md @@ -4,39 +4,41 @@ 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. As well as the _accessibility_ part of it, by adpoting ARIA (Accessible Rich Internet Applications) as part of our dicipline. ARIA defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. 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. +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. As well as the _accessibility_ part of it, by adopting ARIA (Accessible Rich Internet Applications) as part of our dicipline. ARIA defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. Last but not least we will spend time practicing some soft skills that are important for becoming a good developer. These include: presenting and explaining your work, and finding documentation on the web. -## Command line +## Command line The command line (cli, shell) is the interface between you (the user) and the operating system which interprets your commands and allows the computer to respond to your command. In this module you will be introduced to the command line, in this module we will mainly use it to navigate our file system and creating files. Throughout the entire program you will have to use these skills and build on top of it. 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/MAKEME.md) | -| 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) | -| 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) | -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! +| Week | Topic | Read | Homework | +| ---- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ----------------------------------- | +| 1. | DOM, HTML/CSS syntax | [Week 1 Reading](/Week1/README.md) | [Homework week 1](/Week1/MAKEME.md) | +| 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) | +| 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) | + +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 HTML-CSS: + ``` • Basic understanding of HTML and CSS • Know how to organize your files -• Know your way around your text editor +• Know your way around your text editor • Feel comfortable working with the inspector • Properly indent your code -• Properly naming classes, id's +• 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 ``` ## Learning goals for CLI + ``` • To know the terminal/bash/command line for UNIX based systems. • Navigate the file system without using a UI explorer. @@ -44,7 +46,3 @@ Please get yourself familiar with this repository by navigating your way through • Learn output redirection, piping on the terminal. • Write basic shell scripts to ease the programming life. ``` - - - - diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 2faa98c..5644de8 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,8 +1,9 @@ ## Homework Week 1 ->[Here](/Week2/README.md) you find the readings you have to complete before the second lecture. +> [Here](/Week2/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 • Introduction to HTML: @@ -24,19 +25,23 @@ ``` ## 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 + 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: Give feedback +## Step 2: Upload to GitHub _Deadline Monday_ @@ -44,8 +49,6 @@ _Deadline Monday_ - Inside this repository create a folder `week0`. - 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. - For better instructions on how to do this please check the [how to hand in homework](#how-to-hand-in-homework) down below. -- In Trello, you are assigned to one of the cards of your fellow students (in the _your class number_ 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 @@ -53,32 +56,35 @@ _Deadline Monday_ _Deadline Saturday_ - - Make your own web resume: - - One page - - Two files: HTML and CSS - - Include the following: - - Your personal info - - A picture - - A few lines about who you are - - Education - - Work experience - - *Please do not include your current address, phone number and mail address, your CV will be hosted on Github* - - Include the following: - - Different types of headings (`

`, `

`) - - A list (`