-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday1.html
371 lines (353 loc) · 17.2 KB
/
day1.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
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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/momentum.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/atom-one-dark.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Welcome to <br>Code Basics!</h1>
<h2 class="brand-teal">Intro to HTML & CSS</h2>
</section>
<section>
<h2>Course Objectives</h2>
<h4>Create, style, and deploy a basic website using HTML, CSS, and JS!</h4>
</section>
<section>
<h2>Today we'll learn about...</h2>
<ul>
<li>using the <a href="https://www.google.com/chrome/browser/desktop/index.html">Chrome browser</a> and <a href="https://glitch.com/">Glitch</a> for development</li>
<li>creating your first webpage!</li>
<li>how to create content with HTML</li>
<li>using CSS to style your content with fonts, colors, and other decorations</li>
</ul>
</section>
<section data-background-image="images/fe-components.jpg">
</section>
<!-- OVERVIEW OF TODAY'S TOPICS -->
<section>
<h3>Overview: What is HTML?</h3>
<img src="images/html-example.png">
<aside class="notes">
<p>HTML acts as the skeleton of a web page, providing its underlying structure. You can use HTML to specify parts of your
page like:</p>
<ul>
<li>header and footer</li>
<li>sections</li>
<li>text headings</li>
<li>body text</li>
<li>images</li>
<li>links</li>
<li>form inputs and buttons </li>
<li>items in a list</li>
</ul>
<p>and more. HTML is also used to indicate what elements of a web page are logically enclosed in other elements. For example,
a button that says "Submit Feedback" might belong inside a form, which is inside the same section as the heading, "Website
Feedback".</p>
<p>Look at Girl Develop It's website (https://www.girldevelopit.com) to show source</p>
</aside>
</section>
<section>
<h3>Overview: What is CSS?</h3>
<pre><code data-trim>
body {
background: darkgray;
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
.hero-image {
border: 1px solid black;
height: 100px;
width: 100%;
}
</code></pre>
<aside class="notes">
<p>HTML by itself has very little styling (has some -- give examples). CSS gives us a language to express and describe the
visual presentation of our content in a way the browser can interpret and display.</p>
</aside>
</section>
<!-- INTRO TO HTML -->
<section>
<h2>HTML</h2>
</section>
<section data-background-image="images/html-doctype.jpg">
<aside class="notes">
<p>An HTML document needs a few basic things to work:</p>
<ul>
<li> a self-closing DOCTYPE tag</li>
<li> html tags</li>
<li> head tags</li>
<li> body tags</li>
</ul>
<p>We will include almost all of the content of our website inside the body tags</p>
<p>A word about indentation and nesting -- explain the things they need to know. Elements that open first close last. </p>
</aside>
</section>
<section data-background-image="images/html-elements.jpg">
<aside class="notes">
<p>HTML elements are the building blocks of a website's structure.</p>
<p>[Show Girl Develop It website and point out elements visually. What kind of things do you see here? Break it down into
small parts.] Look at a website: we need some way to tell the browser, in code, to make these things appear on the
page. HTML is the language we use to tell the browser to do that.</p>
<p>HTML content is written using "tags".</p>
<p>Tags show the beginning and ending of an HTML element. [Use slide illustration to break down the structure of an element:
tag opening/closing; attribute/value; content.]</p>
<p>[Write some examples on whiteboard, showing the structure/syntax of a tag]</p>
</aside>
</section>
<section>
<h3>Let's build a page!</h3>
<iframe src="https://giphy.com/embed/ChpOyeacGmpQk" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
<p>
<a href="https://giphy.com/gifs/dog-computer-ChpOyeacGmpQk">via GIPHY</a>
</p>
<aside class="notes">
<p>Demo putting together a very simple page in the text editor and loading it in the browser. Ask for help from the audience
for the markup. What do we need to include?</p>
</aside>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Put together your own page! Create a new website on Glitch, then open the file called
<code>index.html</code>. Delete the text in there and try creating a page from scratch that can be rendered in the browser using DOCTYPE, head,
and body elements. Create at least one element to display text content on the page.</p>
<aside class="notes">This should take about 10 minutes</aside>
</section>
<section>
<h2>Let's look at some examples of elements</h2>
</section>
<section>
<h3>Heading Element</h3>
<p>Heading elements are for texts that mark titles of sections on your page. The numbers indicate hierarchy of content, not
size.</p>
<pre><code class="html" data-trim>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</code></pre>
<aside class="notes">Demonstrate this in the page we wrote and have loaded in the browser.</aside>
</section>
<section>
<h3>Paragraph Element</h3>
<pre><code data-trim>
<p>
Merge records dur'm startup stampede medicine the
connecter durham rescue mission, french press
house-made parrish street duke chapel 147, rolling
hills mount moriah watts-hillandale north durham.
</p>
<p>
Startup stampede blue devils blues festival main
street arm wrestling scooter nanobrew local,
artisan baked goods durham mag pizza the park
start-up nccu, watts coffee the loop third fridays
maker diy.
</p>
</code></pre>
<aside class="notes">
<p>Demo in editor and browser. You can also mention placeholder text here (this is http://durhamipsum.com/).</p>
</aside>
</section>
<section>
<h3>Link Element</h3>
<pre><code class="html" data-trim>
<a href="http://www.momentumlearn.com">Momentum Learning</a>
</code></pre>
</section>
<section data-markdown>
<textarea data-template>
## Tag attributes
All tags can have tag attributes. A tag attribute has the attribute name on the left side, an equals sign, and a value in quotation marks on the right.
* `href` is used in links. It stands for "hypertext reference."
* `class` can be used on all tags and helps with styling.
* `id` can be used on all tags and should be unique within the document.
</textarea>
</section>
<section>
<h3>List Element</h3>
<pre><code class="html" data-trim>
<ul>
<li>lions</li>
<li>tigers</li>
<li>bears</li>
</ul>
</code></pre>
</section>
<section>
<h3>Image Element</h3>
<pre><code class="html" data-trim>
<img src="https://placebear.com/400/600">
</code></pre>
<aside class="notes">
<p>Introduce the idea of a self-closing tag (detail on next slide). <img> is by far the most common. They might also
commonly see <br> or <hr> (or <img />, <br /> <hr /> -- the / character is optional).</p>
</aside>
</section>
<section data-background-image="images/self-closing-tags.jpg"></section>
<section>
<h3>CODE BREAK</h3>
<p>Add a link, an image, and a list to your page.</p>
<p>You can use an image placeholding service like
<a href="placebear.com">placebear</a> or
<a href="https://placeholdit.co/">placeholdit.co</a>, or link to a local image. </p>
<aside class="notes">
<p>Say a few words here to explain using a path to a local image in the "src" attribute instead of a URL. See
if students can figure out how to do this themselves.</p>
</aside>
</section>
<!-- INTRO TO CSS -->
<section>
<h2>CSS</h2>
</section>
<section data-background-image="images/css-diagram.jpg">
<aside class="notes">
<p>Reminder: we saw this slide earlier in the overview. CSS provides style for the content we've built with HTML</p>
<p>HTML content has meaning and structure, but lacks presentation. Analogy to writing an essay: introduction/thesis statement,
section headers, paragraphs, conclusion — and writing style is about how we present the content to the user (analogy
to tone, word choice, how formal or informal your language is in an essay).</p>
<p>Awareness of audience is how you make these decisions — this is UX/UI: page design that takes into consideration
how people will use and perceive our content.</p>
<p>As a web designer or developer, you need to put together your structure and content with consideration for what your
audience needs and expects in order to get your point across most effectively.</p>
<p>Demo writing some styles for the HTML page we're working on in the Chrome Inspector.</p>
<p>Optional: show
<a href="http://www.csszengarden.com/">CSS Zen Garden</a> to make the point that the styles change but the content doesn't have to.</p>
</aside>
</section>
<section>
<h3>Connecting CSS to HTML</h3>
<pre><code data-trim>
<link rel="stylesheet" type="text/css" href="main.css">
</code></pre>
<aside class="notes">
<p>Explain options to include it inline, embedded, or in an external sheet. To link a stylesheet, include this line of code
nested inside the `head` element of your HTML document.</p>
</aside>
<aside class="notes">Demo the different ways to include styles, spending the most time on creating and linking a stylesheet.</aside>
</section>
<section data-background-image="images/css-rules.jpg">
<aside class="notes">
<p>CSS is written in a stylesheet as a series of rules. Rules are selectors plus properties.</p>
<p>Let's look at the syntax of a css rule.</p>
</aside>
</section>
<section>
<h3>Selectors and properties</h3>
<pre><code data-trim>
.body-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
.callout {
background-color: lightgray;
border: 2px solid black;
}
.text-large {
font-size: 48px;
}
.product-section {
background-image: url('images/bicycles.jpg')
}
</code></pre>
<aside class="notes">
<h6>Spend a fair amount of time on this slide</h6>
<p>Discuss using classes as selectors (tags can be used as selectors, but we won't use them that way).</p>
<p>Demo how to do this in Glitch. Here's a project you can use to get started: https://start-styling.glitch.me</p>
<p>Write/change some styles and reload the page to demonstrate how this works.</p>
<p>Go through it slowly and repeat several times.</p>
<p>Demo several different properties applied to different elements: background-color, font-size, color, text-decoration,
height, width</p>
</aside>
</section>
<section data-markdown>
<textarea data-template>
## CSS selectors
We can apply styles to a particular part of our HTML document using _selectors_.
* `h1` - selects all `h1` elements
* `h1, h2` - selects all `h1` and `h2` elements
* `.selfie` - selects all elements with the class "selfie"
* `.sidebar a` - selects all `a` elements nested inside elements with the class "sidebar"
</textarea>
</section>
<section>
<h3>Useful CSS Properties</h3>
<ul>
<li><span class="brand-salmon bold">color</span>: the color of the text, by name or hex code</li>
<li><span class="brand-salmon bold">background-color</span>: the color of the background, by name or hex code</li>
<li><span class="brand-salmon bold">background-image</span>: an image to use for the background</li>
<li><span class="brand-salmon bold">font-size</span>: the size of the text, in pixels (px) or em-units</li>
<li><span class="brand-salmon bold">text-decoration</span>: none, underline, overline, line-through, blink</li>
<li><span class="brand-salmon bold">text-align</span>: left, right, center, justify</li>
<li><span class="brand-salmon bold">height</span>: the height of an element in px, %, or em-units</li>
<li><span class="brand-salmon bold">width</span>: the width of an element in px, %, or em-units</li>
</ul>
<aside class="notes">Demo writing styles with these properties in glitch.</aside>
</section>
<section data-markdown>
<textarea data-template>
## Colors
There is a giant list of color names you can use, but people generally use a _hex code_. A hex code is a set of three numbers between 0 and 255 in hexadecimal (base-16) format, beginning with a pound sign, like: `#FF00A7`.
The first number is the amount of red, the second the amount of green, and the third the amount of blue. `#000000` is black and `#FFFFFF` is white.
See [HTML Color Codes](http://htmlcolorcodes.com/).
</textarea>
</section>
<section>
<h3>CODE BREAK</h3>
<p>Open the stylesheet called
<code>styles.css</code> and link it to your
<code>index.html</code> page. Write some styles for your page's content, giving some thought to the type of selectors you want to use. Reload
the page to make sure your styles are applied.</p>
<p>For reference, check out
<a href="https://css-tricks.com">CSS-Tricks</a>. Among other useful articles, they have a
<a href="https://css-tricks.com/almanac/properties/">handy list of properties.</a>
</p>
</section>
<section>
<h3>Homework</h3>
<p>Create a page about you. It should have your name, a picture or avatar representing you, and some content. That could be
a list of your favorite things, info about places you have lived or visited, links to your favorite websites, or whatever
you like! Make sure you style your content, and come back with questions about what you've learned or noticed. Be ready
to demo what you did!</p>
</section>
</div>
<footer class="footer">
<img src="images/logo-main.png" alt="">
</footer>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
],
history: true
});
</script>
</body>
</html>