-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathnotes-en.html
More file actions
254 lines (187 loc) · 13.6 KB
/
notes-en.html
File metadata and controls
254 lines (187 loc) · 13.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Canada Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<main>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Teachers Learning Code: HTML & CSS for Educators
##Instructor Notes
* <a href="#slide2" target="_self">Notes for full day (6 hour) workshop</a>
* <a href="#slide3" target="_self">Notes for 2 hour visit</a>
</script>
</section>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Teachers Learning Code: HTML & CSS for Educators
##Instructor Notes
##6 hours
<br>
#Resources
* Do the Robot [lesson plan](https://www.canadalearningcode.ca/lessons/do-the-robot/)
* Source Whisperer [lesson plan](https://www.canadalearningcode.ca/lessons/source-whisperer/)
* Superhero Profiles [lesson plan](https://www.canadalearningcode.ca/lessons/superhero-profiles/)
* Innovation Website [lesson plan](https://www.canadalearningcode.ca/lessons/innovation-website/)
* Digital Toolbox: [Quickstart Guide](https://www.canadalearningcode.ca/wp-content/uploads/teacher-quick-start-guide.pdf)
<br>
#Schedule
* <strong>Introduction (30 min)</strong>: Coders' Code, Learning Goals, Do the Robot (Unplugged), What is Code, Why Teach Coding.
* <strong>Intro to HTML (15 min)</strong>: What is HTML, Why learn HTML, HTML basics.
* <strong>Source Whisperer (Unplugged) (15 min)</strong>: Activity, Solution.
* <strong>Example Lesson Plan (1 hour)</strong>: Introduction, Code-Along, Activity.
* <strong>Lunch (30 min)</strong>: This is the estimated time, but you can break for lunch whenever it arrives.
* <strong>Intro to CSS (10 min)</strong>: What is CSS, How it compares, How it works.
* <strong>Example Lesson Plan (2 hours)</strong>: Introduction, Getting started/setting up, Activity, Reflection.
* <strong>Assessement (15 min)</strong>: Considerations, Strategies.
* <strong>Lesson Planning (1 hour)</strong>: Suggested approaches, Work session, Demos (Show and Tell).
* <strong>Stretch Goals (if time) </strong>: Debugging activity, Erase All Kittens game.
* <strong>Next Steps (5 min)</strong>: Ideas, Sharing, Closing.
<br>
#Contingency
* Use a text editor: [atom.io](https://atom.io)
* Starter projects are included in the learner download files.
* Use Atom to open and edit **index.html** and **style.css** files.
* Save your changes, then open **index.html** in your browser to view the website.
<br>
#Specific Examples + Instructions
##Do the Robot (slide 8)
Follow the Do the Robot [lesson plan](https://www.canadalearningcode.ca/lessons/do-the-robot/), including the extensions. Recommended tasks: High-five, Jumping Jack
##What is HTML? (slide 15)
Yes, HTML is a coding language. We are giving instructions to the browser to tell it how to display the website.
<br>No, HTML is not a programming language. We aren't using programming concepts like loops, variables, functions, etc. (yet!)
##Why Learn HTML? (slide 16)
House analogy = the html is like the structure/walls/furniture, the css is the design/paint/accessories, and the javascript is the functionality (like the alarm/security system). Also use the body analogy (bones, clothes, personality) if that works better for the crowd.
##Source Whisperer (slide 21-24)
See the Source Whisperer [lesson plan](https://www.canadalearningcode.ca/lessons/source-whisperer/) for reference.
##Superhero Profiles (slide 25-32)
Use the Superhero Profiles [lesson plan](https://www.canadalearningcode.ca/lessons/superhero-profiles/") (and included solution sheet) to facilitate this activity.
##Create an Account (slide 29)
It might take a few minutes for learners to verify their accounts. They have the option of not creating an account, but will not be able to save their projects.
##Setting up Glitch (slide 30)
Glitch is a free online tool (and community!) that we can use to create and share websites.
<br><br>These setup steps are optional, but highly recommended as they will make learners' lives a lot easier as they build their websites!
##What's the Difference (slide 36)
This is the exact same website! One with css and the other with the stylesheet removed.
##What Does CSS Look Like? (slide 37)
Draw attention to the types of brackets used. Point out the colons and semi-colons. Ask: What do you think this code will do? (A: All paragraph text will turn red)
##Rules (slide 39)
Encourage learners to type into the text area to see their css code applied to the paragraph below. Try `background-color` or use other styles found on css.cool - see the next slide.
##Innovation Website (slide 41-49)
Use the Innovation Website [lesson plan](https://www.canadalearningcode.ca/lessons/innovation-website/) (and included solution sheet) to facilitate this activity.
##Creating Your Website (slide 48)
Walk learners through these steps using the [solution sheet](http://bit.ly/innovation-website-glitch).
<br>Some learners will choose to use their digital copy of the solution sheet to work ahead, which is totally fine.
##Assessment Considerations (slide 52)
Have learners use these points for discussion in their table groups. Use the example of a lesson plan from today, or another lesson they have in mind. Loop back after 5 minutes to share with the class.
##Lesson Planning (slide 55)
Give learners 45 minutes to lesson plan either on their own or in pairs. You may want to move learners based off of grade levels or subject areas so that they can collaborate with educators of a similar focus.
##Show and Tell (slide 56)
Save time for volunteers to share what they are working on (doesn't need to be finished!)
##Stretch Goal: Debugging (slides 57-58)
If you have time! Discuss what a "bug" is in coding (an issue or problem in our code). Demonstrate these strategies in an example project if possible.
<br><br>Pair Programming = when learners pair up and take turns rotating between the two roles of "driver" and "navigator" - where the driver uses the mouse and keyboard, and the navigator gives verbal instructions. We can catch bugs more quickly with two people working on the same project!
##Stretch Goal: Erase All Kittens (slide 59)
If you have time! This game is a fun activity for students to play if they complete an assignment early in class (e.g.). Educators will need to create an account to access the free demo.
##Next Steps (slide 61)
Encourage learners to write their next step on a post-it note and stick it on a wall before leaving.
</script>
</section>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Teachers Learning Code: HTML & CSS for Educators
##Instructor Notes
##2 hours
<br>
#Resources
* Do the Robot [lesson plan](https://www.canadalearningcode.ca/lessons/do-the-robot/)
* Tourism Website (with Glitch) [lesson plan](https://www.canadalearningcode.ca/lessons/tourism-website-with-glitch/)
* Digital Toolbox: [Quickstart Guide](https://www.canadalearningcode.ca/wp-content/uploads/teacher-quick-start-guide.pdf)
<br>
#Schedule
* <strong>Introduction (30 min)</strong>: Coders' Code, Learning Goals, Do the Robot (Unplugged), What is Code, Why Teach Coding.
* <strong>Intro to HTML (15 min)</strong>: What is HTML, Why learn HTML, HTML basics.
* <strong>Example Lesson Plan (30 min)</strong>: Introduction, Code-Along, Activity (stop after Step 7: Add an Image).
* <strong>Intro to CSS (10 min)</strong>: What is CSS, How it compares, How it works.
* <strong>Lesson continued (20 min)</strong>: Activity (Step 8: Change the Styles), Reflection.
* <strong>Assessement (10 min)</strong>: Strategies.
* <strong>Stretch Goals (if time) </strong>: Debugging activity, Erase All Kittens game.
* <strong>Next Steps (5 min)</strong>: Ideas, Sharing, Closing.
<br>
#Contingency
* Use a text editor: [atom.io](https://atom.io)
* Starter projects are included in the learner download files.
* Use Atom to open and edit **index.html** and **style.css** files.
* Save your changes, then open **index.html** in your browser to view the website.
<br>
#Specific Examples + Instructions
##Do the Robot (slide 8)
Follow the Do the Robot [lesson plan](https://www.canadalearningcode.ca/lessons/do-the-robot/), including the extensions. Recommended tasks: High-five, Jumping Jack
##What is HTML? (slide 15)
Yes, HTML is a coding language. We are giving instructions to the browser to tell it how to display the website.
<br>No, HTML is not a programming language. We aren't using programming concepts like loops, variables, functions, etc. (yet!)
##Why Learn HTML? (slide 16)
House analogy = the html is like the structure/walls/furniture, the css is the design/paint/accessories, and the javascript is the functionality (like the alarm/security system). Also use the body analogy (bones, clothes, personality) if that works better for the crowd.
##Tourism Website (slide 21-28)
Use the Tourism Website (with Glitch) [lesson plan](https://www.canadalearningcode.ca/lessons/tourism-website-with-glitch/) (and included solution sheet) to facilitate this activity. Stop after Step 7: Add an Image.
##Create an Account (slide 25)
It might take a few minutes for learners to verify their accounts. They have the option of not creating an account, but will not be able to save their projects.
##Setting up Glitch (slide 26)
Glitch is a free online tool (and community!) that we can use to create and share websites.
<br><br>These setup steps are optional, but highly recommended as they will make learners' lives a lot easier as they build their websites!
##Creating Your Website (slide 27)
Walk learners through these steps using the solution sheet.
<br>Some learners will choose to use their digital copy of the solution sheet to work ahead, which is totally fine.
##What's the Difference (slide 32)
This is the exact same website! One with css and the other with the stylesheet removed.
##What Does CSS Look Like? (slide 33)
Draw attention to the types of brackets used. Point out the colons and semi-colons. Ask: What do you think this code will do? (A: All paragraph text will turn red)
##Rules (slide 35)
Encourage learners to type into the text area to see their css code applied to the paragraph below. Try `background-color` or use other styles found on css.cool - see the next slide.
##Styling Your Website (slide 37)
Walk learners through "Step 8: Change the Styles" using the solution sheet.
##Stretch Goal: Debugging (slides 42-43)
If you have time! Discuss what a "bug" is in coding (an issue or problem in our code). Demonstrate these strategies in an example project if possible.
<br><br>Pair Programming = when learners pair up and take turns rotating between the two roles of "driver" and "navigator" - where the driver uses the mouse and keyboard, and the navigator gives verbal instructions. We can catch bugs more quickly with two people working on the same project!
##Stretch Goal: Erase All Kittens (slide 44)
If you have time! This game is a fun activity for students to play if they complete an assignment early in class (e.g.). Educators will need to create an account to access the free demo.
##Next Steps (slide 46)
Encourage learners to write their next step on a post-it note and stick it on a wall before leaving.
</script>
</section>
</main><!-- cls main section -->
<script src="framework/scripts/jquery-1.11.0.min.js"></script>
<script src="framework/scripts/slideshow.js"></script>
<!-- Uncomment the plugins you need -->
<script src="framework/scripts/plugins/css-edit.js"></script>
<script src="framework/scripts/plugins/css-snippets.js"></script>
<script src="framework/scripts/plugins/css-controls.js"></script>
<!-- <script src="plugins/code-highlight.js"></script>-->
<script src="framework/scripts/plugins/markdown/marked.js"></script>
<script src="framework/scripts/plugins/markdown/markdown.js"></script>
<script src="framework/scripts/plugins/highlight/highlight-8.4.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="framework/scripts/llc.js"></script>
<script>
var slideshow = new SlideShow();
// Grabs all the .snippet elements
var snippets = document.querySelectorAll('.snippet');
for(var i=0; i<snippets.length; i++) {
new CSSSnippet(snippets[i]);
}
</script>
</body>
</html>