finished lesson plan w3, fixed some typos

Noer Paanakker · Noer Paanakker · commit 10f8cbc6ff02 · 2019-06-17T14:46:14.000+02:00
diff --git a/README.md b/README.md
@@ -46,8 +46,8 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯
 | Week | Topic                                                  | Reading Materials                                                                      | Homework                        | Lesson Plan                            |
 | ---- | ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------- |
 | 1.   | Command Line Interface basics, HTML/CSS syntax         | [W1 Reading](/Week1/README.md)                                                         | [W1 Homework](/Week1/MAKEME.md) | [W1 Lesson Plan](/Week1/LESSONPLAN.md) |
-| 2.   | Introduction to GIT, Responsive design                 | [W2 Reading](/Week2/README.md)                                                         | [W1 Homework](/Week2/MAKEME.md) | [W2 Lesson Plan](/Week2/LESSONPLAN.md) |
-| 3.   | GIT branches, CSS frameworks, Working with the browser | [W3 Reading](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) | [W1 Homework](/Week3/MAKEME.md) | [W3 Lesson Plan](/Week3/LESSONPLAN.md) |
+| 2.   | Introduction to GIT, Responsive design                 | [W2 Reading](/Week2/README.md)                                                         | [W2 Homework](/Week2/MAKEME.md) | [W2 Lesson Plan](/Week2/LESSONPLAN.md) |
+| 3.   | GIT branches, CSS frameworks, Working with the browser | [W3 Reading](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/README.md) | [W3 Homework](/Week3/MAKEME.md) | [W3 Lesson Plan](/Week3/LESSONPLAN.md) |
 
 ## Finished?
 
diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md
@@ -6,50 +6,50 @@ The purpose of this class is to introduce to the student (1) the basics of worki
 
 FIRST HALF:
 
--   Command line interface basics
+- Command line interface basics
 
 SECOND HALF:
 
--   Difference `<head>` and `<body>`
--   Semantic HTML5
--   The box model
+- Difference `<head>` and `<body>`
+- Semantic HTML5
+- The box model
 
 ### Core concepts
 
 FIRST HALF (12.00 - 13.30)
 
 1. **Command line interface basics**
 
--   The command line interface (CLI) is a way to navigate your computer by issuing direct commands
--   Desktop application icons are visual shortcuts
--   Commonly used commands
+- The command line interface (CLI) is a way to navigate your computer by issuing direct commands
+- Desktop application icons are visual shortcuts
+- Commonly used commands
 
 _Show students the most commonly used commands (`ls`, `pwd`, `cd`, `echo`, `cat`, `mkdir`, `touch`, `head`, `tail`)_
 
 SECOND HALF (14.00 - 16.00)
 
 2. **Difference `<head>` and `<body>`**
 
--   The `<head>` holds all the page's meta-data: information about the complete webpage
+- The `<head>` holds all the page's meta-data: information about the complete webpage
 
 _Show examples of what the `<head>` could hold and why: `<title>`, `<link>`, `<meta>`_
 
--   The `<body>` holds all the elements that will be displayed in the browser
+- The `<body>` holds all the elements that will be displayed in the browser
 
 _Show examples of commonly used HTML tags: `<h1>`, `<a href="#">`, `<div>`_
 
 3. **Semantic HTML5**
 
--   In theory a page can be constructed using only `<div>`s
--   Semantic tags make the code more comprehensible
--   It helps organize the page
+- In theory a page can be constructed using only `<div>`s
+- Semantic tags make the code more comprehensible
+- It helps organize the page
 
 _Show examples of semantic HTML: `<header>`, `<footer>`, `<section>`_
 
 4. **The box model**
 
--   Everything is a box
--   The "box" refers to the attributes universal to every element: `margin`, `padding`, border`
--   Every element pushes against one another
+- Everything is a box
+- The "box" refers to the attributes universal to every element: `margin`, `padding`, border`
+- Every element pushes against one another
 
 _Show example of the box model by using the browser inspector on various elements_
diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md
@@ -54,7 +54,7 @@ _Ask students to create an SSH key, link it to their account and clone the repo_
 
 SECOND HALF (14.00 - 16.00)
 
-1. **Grid-based thinking and Flexbox**
+2. **Grid-based thinking and Flexbox**
 
 - Thinking in grids
 
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -19,6 +19,10 @@ The next exercise is a short interactive course, that will take you through the
 
 - [Learn GIT](https://www.codecademy.com/learn/learn-git)
 
+The final exercise is a mini-course of Git and GitHub. Go through it and try to code along:
+
+- [How to Use GIT and GitHub](https://eu.udacity.com/course/how-to-use-git-and-github--ud775)
+
 ### 2. Responsive design challenges
 
 Making websites that are `responsive` to a variety of device sizes (in other words, that still "look good" on any device), has become the standard way of building. You have to learn how to do this to. However, fear not because it's not as intimating as it might seem; you're not going to build a separete page for literally every device size out there.
diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md
@@ -16,16 +16,42 @@ The purpose of this class is to introduce to the student
 
 FIRST HALF (12.00 - 13.30)
 
+1. **What is GIT branching?**
+
 - A branch is an experiment, a possible way your project can evolve.
 - It usually contains code for a `feature`
 - A `feature` is a piece of functionality that you want to add to your software. For example, the news feed/liking option/friending ability in Facebook
 - The `master` branch contains all the latest stable code
 - The `development` branch serves as a copy of `master`, that can be experimented with
 
-_Create a repository and initialize GIT. Show the use of `git branch`, `git checkout -b`, _
+_Create a repository and initialize GIT. Show the use of `git branch`, `git checkout -b`, ``_
 
 SECOND HALF (14.00 - 16.00)
 
-2.
+2. **What is a CSS framework?**
+
+- A software framework is prewritten code that provides generic functionality and a structure to build applications with
+- Analogy of pot of ingredients (see [example](./README.md) at section 2)
+- CSS frameworks allow for faster development
+
+_Show various CSS frameworks: [MaterializeCSS](https://materializecss.com/), [Bootstrap](https://getbootstrap.com/), [Foundation](https://foundation.zurb.com/)_
+
+- Pros and cons of framework
+  - PRO: Speeds up your development
+  - PRO: Enables cross-browser functionality
+  - PRO: Are usually maintained by a community of developers
+  - CON: It takes time to learn a framework
+  - CON: Lack of understanding the underlying CSS
+
+_Give students an exercise to rebuild a button and navbar with custom CSS_
+
+_Make a couple of html components with a CSS framework you're comfortable with (preferably MaterializeCSS): a button, navbar, tabs and accordion_
+
+- Pros and cons of custom CSS
+  - PRO: Satisfies your specific needs
+  - PRO: Total control over the direction of CSS
+  - PRO: Creates a unique look
+  - CON: Have to maintain own code
+  - CON: You have to make sure it works cross-browser
 
-[[[[[TO BE CONTINUED!!!!!!!!!]]]]]
+_Start discussion when it's appropriate to use framework or custom_
