added cli to html/css module

mkruijt · mkruijt · commit f3c9cf25eb6c · 2017-11-19T14:40:16.000+01:00
diff --git a/README.md b/README.md
@@ -1,24 +1,28 @@
-# HTML-CSS
+# HTML-CSS and Command Line
 
 ## Introduction
 
 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.
 
+## 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 | 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)|
+| 2. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md), 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. | [CLI](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-2.md), 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:
+## Learning goals for HTML-CSS:
 ```
 • Basic understanding of HTML and CSS
 • Know how to organize your files
@@ -33,6 +37,15 @@ Please get yourself familiar with this repository by navigating your way through
 • 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.
+• Copy, rename and move files with terminal commands.
+• 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
@@ -37,12 +37,18 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
 - [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
+
+_Deadline Monday_
+
 - 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
+
+_Deadline Saturday_
+
  - Make your own web resume:
     - One page
     - Two files: HTML and CSS
@@ -82,4 +88,3 @@ _Steps_:
 ### Fun to check out:
 [Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/)
 
-#### 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/Week1/README.md b/Week1/README.md
@@ -2,12 +2,23 @@
 
 ```
 In week two we will discuss the following topics
+• CLI
+    • To know the terminal/bash/command line for UNIX based systems.
+    • Navigate the file system without using a UI explorer.
+    • Copy, rename and move files with terminal commands. 
 • Responsive web design
 • Media queries
 • Flexbox
 • How to use the inspector
 ```
 
+### Install GitBash if you have a windows machine.
+
+If you have *Windows machines*, please follow the following link and install GitBash https://github.com/git-for-windows/git/releases/tag/v2.10.2.windows.1
+
+If you have Linux installed on your laptop or you have a MACbook, then you don’t need to do anything. See you this Sunday.
+
+
 ### 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). 
 - And read about [flexbox](https://tympanus.net/codrops/css_reference/flexbox/) 
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -4,6 +4,10 @@
 
 ### Learning goals for this week:
 ```
+ • CLI
+    • To know the terminal/bash/command line for UNIX based systems.
+    • Navigate the file system without using a UI explorer.
+    • Copy, rename and move files with terminal commands. 
  • Student presentations
  • Last week recap and questions
  • Responsive web development
@@ -16,9 +20,35 @@
 ```
 
 ## Step 1: Give feedback:
+
+_Deadline Monday_
+
 - 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.  
+- Give feedback CV assignment of one 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 CV assignment and improve it with the feedback and suggestions given by one of your classmates.  
+
+## Step 2: Command Line
+
+_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
+
+1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your JavaScript files.)
+
+```
+Write commands 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. 
+   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
+   Then append the text "hamster" to pets.txt
+    4. Then write the text "cat" to commands.txt
+   Then append the text "ls" to commands.txt
+   Then append the text "pwd" to commands.txt
+    5. Then find unique strings from these two files pets.txt and commands.txt
+   and store the unique strings in lovelyCommands.txt
+```
 
 ## Step 2: Read/do/watch
  - [Introduction to media queries](https://teamtreehouse.com/library/css3/media-queries/introduction)
@@ -35,6 +65,11 @@
  - [cssgridgarden](http://cssgridgarden.com/)
 
 ## Step 3: Assignment:
+
+_Deadline Saturday_
+
+> Use the command line to create a directory "week2" inside your hyf-html-css directory. There should already be a week1 inside that contains your homework of last week.
+
  - Grids exercise
     - Download the HTML and images in the folder Homework 2
     - You are going to write the CSS for this page
diff --git a/Week2/README.md b/Week2/README.md
@@ -2,6 +2,9 @@
 
 ```
 In week two we will discuss the following topics
+• CLI
+    • Learn output redirection, piping on the terminal.
+    • Write basic shell scripts to ease the programming life.
 • Recap
 • How to find useful resources on the web
 ```
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -4,6 +4,9 @@
 
 ### Learning goals for this week:
 ```
+ • CLI
+    • Learn output redirection, piping on the terminal.
+    • Write basic shell scripts to ease the programming life.
  • Student presentations
  • Last week recap and questions
  • How to find information on the web
@@ -20,9 +23,20 @@
       - flex-box
 
 ## Step 1: Give feedback
-> TODO
+
+_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.  
+
 
 ## Step 2: 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
@@ -37,7 +51,8 @@
 
 ```
 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.
 ```
