forked from m4hi2/weeks-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
abstract-outline.html
181 lines (147 loc) · 7.37 KB
/
abstract-outline.html
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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Outline for St. Chad's web basics course</title>
<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy|Alfa+Slab+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="prism/prism.css">
</head>
<body>
<hgroup>
<h1>Outline for St. Chad's web basics course</h1>
<h2>Chris Mills, October 2013</h2>
</hgroup>
<main>
<p>The following document provides scope and basic structure for a ten hour (one hour per week) course to be taught to 10-11 year olds at St Chad's school. This is a pilot course, aimed at gauging interest in technology/programming/web development in primary school children and hopefully leading to more structured learning and curricula of this type in the Saddleworth area.</p>
<p><strong>Title: It's my Web! (Understanding how the web works, and how to change it)</strong></p>
<h2>Scope</h2>
<p>The Web is a good place to begin learning about how technology works, and fundamental ICT concepts such as programming. It is ubiquitous and familiar, easy to learn compared to other programming platforms, and there is a lot of help available due to the web's largely free and open nature. This course will aim to teach children some background information on how the web works and why the web is so interesting, the basic fundamentals of HTML (the language used to structure data on the Web), CSS basics (the language used to style and layout the Web), possibly then moving on to some JavaScript (the web's main programming/logic language) if there is time.</p>
<p>There certainly isn't time in 10 hours to teach anything in any great depth, but here we will aim to give children what they need to produce a simple web page that can be presented via the school web site. Because the ability level of the children is likely to vary quite a bit, we will provide some advanced questions/exercises for any children that are finding the basic course level too easy and want to stretch themselves.</p>
<h2>Structure</h2>
<p>What follows is a course structure, broken up week by week.</p>
<h3>Week 1</h3>
<ul>
<li>Short presentation: what the web is, and why it is so interesting</li>
<li>How does the web work? Taught using interactive games (cards, lego?)
<ul>
<li>Basic client/server interactions</li>
<li>HTTP</li>
<li>Client-side versus server-side technologies</li>
<li>Web standards - HTML, CSS and JavaScript</li>
</ul>
</li>
<li>Open source, view source, hackable web</li>
<li>A look round the web, using Xray goggles. Lets hack the St. Chad's web site! (ok, not permanently.)</li>
</ul>
<h3>Week 2</h3>
<ul>
<li>Using Mozilla's Thimble tool to write some simple web pages</li>
<li>Getting every child logged in (do we need to create official school accounts for this purpose?)</li>
<li>A tour of the tool</li>
<li>Remixing other people's makes.</li>
<li>Choosing a project to build (I'll provide a few templates to get started from, e.g. diary page, band fan site, newsletter, holiday journal. Any others to suggest that might help with their schoolwork?)</li>
</ul>
<h3>Week 3</h3>
<ul>
<li>Getting started with HTML</li>
<li>The anatomy of an HTML element (compare markup to systems they'll have already used, like Microsoft word, or PDFs)</li>
<li>HTML head and body (what are they for, what do they contain?)</li>
<li>Page title</li>
<li>Headings and paragraphs</li>
<li>Lists</li>
<li>emphasis, quotations</li>
<li>Block versus inline elements</li>
</ul>
<h3>Week 4</h3>
<ul>
<li>HTML Images
<ul>
<li>Finding images to use (should I bother mentioning copyright at this stage?)</li>
<li>Including an image in your page</li>
<li>Sizing</li>
<li>Titles and alt text</li>
<li>Note on web accessibility, show youtube screen reader video</li>
</ul>
</li>
<li>HTML Links
<ul>
<li>Linking to other resources on the web (even images!)</li>
<li>Adding links to your page</li>
</ul>
</li>
<li>Other stuff in HTML that I should mention for completeness, but which are boring: forms, tables</li>
</ul>
<h3>Week 5</h3>
<ul>
<li>Starting on CSS</li>
<li>Anatomy of a CSS ruleset</li>
<li>Where does the CSS go? (talk mainly about internal, but also explain external and inline)</li>
<li>Element selectors</li>
<li>Other types of selectors</li>
<li>Some basic properties to play with: color, background-color, font-size, padding, border, box-shadow, text-shadow, border-radius, linear gradient (advanced)</li>
</ul>
<h3>Week 6</h3>
<ul>
<li>Width and height (max- and min- ?)</li>
<li>The box model
<ul>
<li>How is HTML laid out on a page?</li>
<li>Content, margin, padding, borders</li>
<li>Margin collapse</li>
</ul>
</li>
<li>Background images</li>
</ul>
<h3>Week 7</h3>
<ul>
<li>CSS layout</li>
<li>Floats</li>
<li>2 column layout</li>
<li>Positioning (for advanced students)</li>
</ul>
<h3>Week 8</h3>
<ul>
<li>Free week for carrying on with project?</li>
<li>Optional advanced topics for really advanced students (media queries, animation, link states)</li>
</ul>
<h3>Week 9</h3>
<ul>
<li>Free week for carrying on with project?</li>
<li>Optional advanced topics for really advanced students (JavaScript basics?)</li>
</ul>
<h3>Week 10</h3>
<ul>
<li>How do you become a web developer?</li>
<li>You don't need a degree, you just need interest and passion</li>
<li>What tools do you need?
<ul>
<li>Web browsers</li>
<li>Code editor</li>
<li>Graphics editor</li>
<li>Server space</li>
<li>A file structure</li>
</ul>
</li>
</ul>
<h2>About Chris</h2>
<p>Chris Mills is a technical writer and web technologist with a passion for open learning and education, currently working for Mozilla, creators of the Firefox web browser. His oldest two children — Gabriel and Elva — are flourishing at St. Chads, while his youngest — Freida — keeps him entertained at home.</p>
<h2>Further resources</h2>
<p>Some links to further teaching resources that may help to teach, or will at least provide inspiration.</p>
<ul>
<li><a href="http://www.w3.org/community/webed/wiki/Main_Page">Web standards curriculum</a></li>
<li><a href="https://mozlearning.etherpad.mozilla.org/DesigningForWeb">Designing For Web Etherpad</a></li>
<li><a href="https://webmaker.org/en-US">Webmaker home</a></li>
<li><a href="https://webmaker.org/teach">Webmaker: let's teach the Web!</a></li>
<li><a href="https://support.mozilla.org/en-US/kb/pro-tips-webmaker-teaching-kits">Pro tips on Webmaker teaching kits</a></li>
<li><a href="https://mozteach.makes.org/thimble/xray-goggles-teaching-kit">Xray Goggles teaching kit</a></li>
<li><a href="https://www.codeclub.org.uk/">Code Club</a></li>
<li><a href="http://www.codecademy.com/">Codecademy</a></li>
<li><a href="https://www.khanacademy.org/">Khan academy</a></li>
</ul>
</main>
<hr>
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. Share it, make it better, use it for good.</p>
</body>
<script src="prism/prism.js"></script>
</html>