Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Improve lessonplan for week 1 #189

Merged
yash-kapila merged 1 commit into from
Nov 16, 2019
Merged

Improve lessonplan for week 1 #189

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 55 additions & 43 deletions Week1/LESSONPLAN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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**