Merge pull request HackYourFuture#189 from HackYourFuture/improve-week1-lessonplan

yash-kapila · web-flow · commit effbfbb530d6 · 2019-11-16T12:18:52.000+01:00
Improve lessonplan for week 1
diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md
@@ -13,45 +13,47 @@ The purpose of this class is to introduce to the student:
 
 ## Core concepts
 
-FIRST HALF (12.00 - 13.30)
+### FIRST HALF (12.00 - 13.30)
 
-1. The 2 types of websites: static vs. dynamic
+#### 1. The 2 types of websites: static vs. dynamic
+
+##### Explanation
+Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS 
+Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code.
+
+##### Example
+Examples the two different kind of websites
+- Static: https://www.atlassian.com/time-wasting-at-work-infographic
+- Dynamic: https://www.facebook.com/
+
+
+##### Exercise
+Discuss in class which claim belongs to wich type of website:
 
- - Explanation
-  Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS 
-  Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code.
-  
-  - Example
-    Examples the two different kind of websites
-  Static: https://www.atlassian.com/time-wasting-at-work-infographic
-  Dynamic: https://www.facebook.com/
-  
-  -Exercise
-    Discuss in class which claim belongs to wich type of website:
-    
     Content of Web pages can not be change at runtime.
     Server side languages such as PHP, Node.js are used.
     Content of Web pages can be changed.
-    No interation with database possible.	
+    No interation with database possible.
     Interaction with database is possible
-    It is faster to load as compared to the other typ of website.	
-    It is slower then staic website.
-    Cheaper Development costs.
+    It is faster to load as compared to the other typ of website.
+    It is slower then static website.
+    Lower Development costs.
     Content may change everytime the page is loaded.
     Feature of Content Management System.
-    HTML, CSS, Javascript is used for developing the website.	
-    Same content is delivered everytime the page is loaded.	
-
+    HTML, CSS, Javascript is used for developing the website.
+    Same content is delivered everytime the page is loaded.
+  
+##### Essence
+[In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php)     
   
-  -Essence
-    In the link is an article with (dis)advantages of both static and dynamic websites.     https://www.spiderwriting.co.uk/static-dynamic.php
       Static: 
         Advantage:
           - Flexible
           - Cheaper
         Disadvantages:
           - not updating content
           - Scalability
+          
       Dynamic:
         Advantage:
           - Easy to pull in data on stuctured and organised way 
@@ -62,36 +64,46 @@ FIRST HALF (12.00 - 13.30)
 
 _Show examples of static and dynamic websites_
 
-2. The pillars of web development: HTML/CSS/JavaScript
-  - Explanation
-  HTML defines what the content is.
-  CSS defines the appearance of the page.
-  JavaScript defines behavior of the page.
-  - Example
-    An example about relationship between HTML, CSS and Javascript using a methaphor of building a city: https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/
-  - Exercise
-  
-  - Essence
-  Up until now at HackYourFuture, we have been writing websites using HTML and CSS. Even though a website written with these two languages works just fine, it is only a static page. These static pages can interact with a visitor only through the use of forms. Once a form is filled out and submitted, a request is sent back to the server where a new static web page is constructed and eventually downloaded into the browser. The big disadavantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load. It doesn't exhibit any dynamic behaviour like:
+#### 2. The pillars of web development: HTML/CSS/JavaScript
+
+##### Explanation
+- HTML defines what the content is.
+- CSS defines the appearance of the page.
+- JavaScript defines behavior of the page.
 
-reacting to user actions such as mouse click events or key presses.
-rendering complex animations
-sending requests over network to servers and fetching a response
-And this is where JavaScript steps in.
+##### Example
+- An example about relationship between HTML, CSS and Javascript using a methaphor of building a city: https://blog.codeanalogies.com/2018/05/09/the-relationship-between-html-css-and-javascript-explained/
+
+##### Exercise
   
+##### Essence
+Up until now at HackYourFuture, we have been writing websites using HTML and CSS. 
+Even though a website written with these two languages works just fine, it is only a static page.
+
+These static pages can interact with a visitor only through the use of forms. Once a form is filled out and submitted, 
+a request is sent back to the server where a new static web page is constructed and eventually downloaded into the browser. 
+
+The big disadavantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load. 
+
+It doesn't exhibit any dynamic behaviour like:
+
+1. reacting to user actions such as mouse click events or key presses.
+1. rendering complex animations
+1. sending requests over network to servers and fetching a response
+1. And this is where JavaScript steps in.
   
-3. What are variables (const & let) & naming conventions
-  - Explanation
+#### 3. What are variables (const & let) & naming conventions
 
+##### Explanation
 
 **Do Exercise**
 
-SECOND HALF (14.00 - 16.00)
+### SECOND HALF (14.00 - 16.00)
 
-4. The basic data types (string, boolean, number, undefined, null)
+#### 4. The basic data types (string, boolean, number, undefined, null)
 
 **Do Exercise**
 
-5. The compound data types (object, array)
+#### 5. The compound data types (object, array)
 
 **Do Exercise**
