You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Week1/LESSONPLAN.md
+55-43Lines changed: 55 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,45 +13,47 @@ The purpose of this class is to introduce to the student:
13
13
14
14
## Core concepts
15
15
16
-
FIRST HALF (12.00 - 13.30)
16
+
### FIRST HALF (12.00 - 13.30)
17
17
18
-
1. The 2 types of websites: static vs. dynamic
18
+
#### 1. The 2 types of websites: static vs. dynamic
19
+
20
+
##### Explanation
21
+
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
22
+
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.
Discuss in class which claim belongs to wich type of website:
19
32
20
-
- Explanation
21
-
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
22
-
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.
Discuss in class which claim belongs to wich type of website:
31
-
32
33
Content of Web pages can not be change at runtime.
33
34
Server side languages such as PHP, Node.js are used.
34
35
Content of Web pages can be changed.
35
-
No interation with database possible.
36
+
No interation with database possible.
36
37
Interaction with database is possible
37
-
It is faster to load as compared to the other typ of website.
38
-
It is slower then staic website.
39
-
Cheaper Development costs.
38
+
It is faster to load as compared to the other typ of website.
39
+
It is slower then static website.
40
+
Lower Development costs.
40
41
Content may change everytime the page is loaded.
41
42
Feature of Content Management System.
42
-
HTML, CSS, Javascript is used for developing the website.
43
-
Same content is delivered everytime the page is loaded.
44
-
43
+
HTML, CSS, Javascript is used for developing the website.
44
+
Same content is delivered everytime the page is loaded.
45
+
46
+
##### Essence
47
+
[In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php)
45
48
46
-
-Essence
47
-
In the link is an article with (dis)advantages of both static and dynamic websites. https://www.spiderwriting.co.uk/static-dynamic.php
48
49
Static:
49
50
Advantage:
50
51
- Flexible
51
52
- Cheaper
52
53
Disadvantages:
53
54
- not updating content
54
55
- Scalability
56
+
55
57
Dynamic:
56
58
Advantage:
57
59
- Easy to pull in data on stuctured and organised way
@@ -62,36 +64,46 @@ FIRST HALF (12.00 - 13.30)
62
64
63
65
_Show examples of static and dynamic websites_
64
66
65
-
2. The pillars of web development: HTML/CSS/JavaScript
66
-
- Explanation
67
-
HTML defines what the content is.
68
-
CSS defines the appearance of the page.
69
-
JavaScript defines behavior of the page.
70
-
- Example
71
-
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/
72
-
- Exercise
73
-
74
-
- Essence
75
-
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:
67
+
#### 2. The pillars of web development: HTML/CSS/JavaScript
68
+
69
+
##### Explanation
70
+
- HTML defines what the content is.
71
+
- CSS defines the appearance of the page.
72
+
- JavaScript defines behavior of the page.
76
73
77
-
reacting to user actions such as mouse click events or key presses.
78
-
rendering complex animations
79
-
sending requests over network to servers and fetching a response
80
-
And this is where JavaScript steps in.
74
+
##### Example
75
+
- 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/
76
+
77
+
##### Exercise
81
78
79
+
##### Essence
80
+
Up until now at HackYourFuture, we have been writing websites using HTML and CSS.
81
+
Even though a website written with these two languages works just fine, it is only a static page.
82
+
83
+
These static pages can interact with a visitor only through the use of forms. Once a form is filled out and submitted,
84
+
a request is sent back to the server where a new static web page is constructed and eventually downloaded into the browser.
85
+
86
+
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.
87
+
88
+
It doesn't exhibit any dynamic behaviour like:
89
+
90
+
1. reacting to user actions such as mouse click events or key presses.
91
+
1. rendering complex animations
92
+
1. sending requests over network to servers and fetching a response
93
+
1. And this is where JavaScript steps in.
82
94
83
-
3. What are variables (const & let) & naming conventions
84
-
- Explanation
95
+
#### 3. What are variables (const & let) & naming conventions
85
96
97
+
##### Explanation
86
98
87
99
**Do Exercise**
88
100
89
-
SECOND HALF (14.00 - 16.00)
101
+
### SECOND HALF (14.00 - 16.00)
90
102
91
-
4. The basic data types (string, boolean, number, undefined, null)
103
+
#### 4. The basic data types (string, boolean, number, undefined, null)
0 commit comments