From a2f66b49e8f2d98d3f34030144feec6d00de4d15 Mon Sep 17 00:00:00 2001 From: Wilgert Velinga Date: Mon, 11 Nov 2019 20:57:36 +0100 Subject: [PATCH] Improve lessonplan for week 1 This commit improves the markdown of the lessonplan. --- Week1/LESSONPLAN.md | 98 +++++++++++++++++++++++++-------------------- 1 file changed, 55 insertions(+), 43 deletions(-) diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index e546c2cb4..d9abe094f 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -13,38 +13,39 @@ 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 @@ -52,6 +53,7 @@ FIRST HALF (12.00 - 13.30) 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**