-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·479 lines (439 loc) · 17.1 KB
/
index.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
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Girl Develop It ♥ Don't be shy, develop it.</title>
<meta name="description" content="Empowering women of diverse backgrounds from around the world to learn how to develop software">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal/css/reveal.min.css">
<link rel="stylesheet" href="reveal/css/theme/simple.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="reveal/lib/css/light.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'reveal/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Intro to <br/> HTML & CSS</h1>
<h3>With Girl Develop It Boulder/Denver</h3>
</section>
<section>
<h2>Introductions</h2>
<div style="width: 42%; float: left; padding: 3%;">
<h4 class="blue">Cara Jo Miller</h4>
<img src="images/carajo.jpg" stylesheete="border-radius: 50%;" alt="Cara Jo" class="no-border" />
</div>
<div style="width: 42%; float: right; padding: 3%;">
<h4 class="blue">Bree Thomas</h4>
<img src="images/bree.jpg" stylesheete="border-radius: 50%;" alt="Cara Jo" class="no-border" />
</div>
<!-- * How we got started in coding/tech. -->
<!-- * What we went to school for. -->
<!-- * What we do now. -->
</section>
<section>
<h2>Coding Rocks</h2>
<h3 class="blue">Animation, Technology, Gaming, Design, Medicine, Music, Movies, Education, and the list goes on...</h3>
<!-- * Coding is everywhere. -->
<!-- * Cool opportunities Abound and are growing!. -->
<!-- * See Google's "Made w/ Code". -->
</section>
<section>
<!-- <video class="stretch" data-autoplay src="https://www.youtube.com/watch?v=Bo11JJgj1cU"></video> -->
<iframe width="854" height="510" src="https://www.youtube.com/embed/Bo11JJgj1cU" frameborder="0" allowfullscreen></iframe>
</section>
<section>
<h2>Did You Know?</h2>
<p>Women = 57% of Workforce (yay!)</p>
<p>Women = 26% of Computing Workforce (boo!)</p>
</section>
<section>
<h2>We Need Your</h2>
<h2 class="blue">Brains!</h2>
<h2 class="blue">Creativity!</h2>
<h2 class="blue">Enthusiam!</h2>
</section>
<section>
<h2>"Girl, Develop It!"</h2>
<p>Began as a call to action to encourage women to get involved in tech, make a difference, and tip the scales in an industry with very low female representation.</p>
<!-- * What we do -->
<!-- * Why we're here -->
</section>
<section>
<h2>Today</h2>
<p>We want to introduce you to coding.</p>
<p>We want you to have fun.</p>
<p>We want you to consider the opportunities coding can have on your future.</p>
<p>Coding is a great way to change the world. :)</p>
<p>Questions are GOOD! Ask them if you get stuck!</p>
<!-- * What we do -->
<!-- * Why we're here -->
</section>
<section>
<h2>Agenda</h2>
<h3 class="blue">9:00 - 9:30 Setup</h3>
<h3 class="blue">9:30 - 10:30 HTML</h3>
<h3 class="blue">10:30 - 11:30 CSS</h3>
<h3 class="blue">11:30 - 12:00 Practice</h3>
</section>
<!-- HTML Portion of the Workshop -->
<section>
<h2>Huh? HTML?</h2>
<p>HTML is the code that allows you to build web pages.</p>
<img src="images/nailpolish.png" alt="nailpolish" class="no-border"/>
</section>
<section>
<h2>Short History</h2>
<h3> <span class = "blue">H</span>yper<span class = "blue">T</span>ext <span class = "blue">M</span>arkup <span class = "blue">L</span>anguage</li></h3>
<ul>
<li>Invented by a scientist named Tim Berners-Lee</li>
<li>For sharing papers via hypertext (text that shows on a computer display)</li>
<li>Through use of a common markup language (way to put marks on a document to denote how that piece should look)</li>
</ul>
</section>
<section>
<h2>It Looks Like</h2>
<p>If you 'view the source', you see this</p>
<img src = "images/homepage-html.png">
</section>
<section>
<h2>Let's Get Started!!</h2>
<ol>
<li>Launch your text editor and open text.html</li>
<li>Launch Chrome and open text.html</li>
<li>Make some changes to the file and save it.</li>
<li>Reload the page in Chrome and see your changes!</li>
</ol>
</section>
<section>
<h2>Totally awesome right?</h2>
<p>But it's so boring! How do I make it more readable?</p>
<img src="images/boredcat.jpeg" />
</section>
<section>
<h2>Markup, that's how!</h2>
<p>Markup is what organizes your content to make it more readable for your website visitor.</p>
<p>After all we are writing in Hyper Text <strong class="green">MARKUP</strong> Language.</p>
</section>
<section>
<h2>Let's Look at Markup</h2>
<ol>
<li>Open markup.html with your text editor.</li>
<li>Take a look at the basic markup for a site.</li>
</ol>
<img src="images/basicmarkup.png" class="no-border"/>
</section>
<section>
<h3>Tag Breakdown</h3>
<img src="images/tagbreakdown.png" alt="Tag breakdown" style="border: none; box-shadow: none;" />
</section>
<!-- <section> -->
<!-- <h3>Head Tag</h3> -->
<!-- </section> -->
<!-- <section> -->
<!-- <h3>Heading Tag</h3> -->
<!-- </section> -->
<!-- <section> -->
<!-- <h3>Body Tag</h3> -->
<!-- </section> -->
<!-- <section> -->
<!-- <h3>Paragraph Tag</h3> -->
<!-- </section> -->
<section>
<h2>HTML Elements</h2>
<p>Using HTML Elements (markup) adds structure to your content.</p>
<ul>
<li class ="fragment"><p>A paragraph is your content</p></li>
<li class = "fragment">
<div>Putting your content into an HTML tag to make it look like a paragraph is Structure</div>
<pre><code class ="html">
<p>A paragraph is your content</p>
</code></pre>
</li>
</ul>
</section>
<section>
<h2><html></h2>
<div class="left-align">
<p>The opening <code class="blue"><html></code> tag indicates the beginning of an HTML document.</p>
<p>The closing tag indicates the end.</p>
<p>Everything in between these tags is your website.</p>
</div>
</section>
<section>
<h2><head> & <body></h2>
<div class="left-align">
<p>The <code class="blue"><head></code> tag contains information about your page. This includes the title that shows up on the tab bars in the browser.</p>
<p>The <code class="blue"><body></code> tag contains everything that is shown in the browser window. Content, images, links, EVERYTHING!</p>
</section>
<section>
<h2><p></h2>
<p>The <code class="blue"><p></code> tag contains content that is broken up into paragraphs.</p>
<pre><code>
<p>Hi, welcome to BitCamp 2013! Let's make a website!</p>
</code></pre>
<p>Separating your content into paragraphs makes your content easier to read.</p>
</section>
<section>
<h2><h1> - <h6></h2>
<p>Using headings to add titles to sections of your page.</p>
<div class = "left" style = "width:40%; display: inline-block; padding-bottom: 50px;">
<pre><code class = "html">
<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>
</div>
<div class = "left" style = "width:50%; display: inline-block;">
<h1 style = "font-size: 120%">Heading 1</h1>
<h2 style = "font-size: 110%">Heading 2</h2>
<h3 style = "font-size: 105%">Heading 3</h3>
<h4 style = "font-size: 95%">Heading 4</h4>
<h5 style = "font-size: 85%">Heading 5</h5>
<h6 style = "font-size: 75%">Heading 6</h6>
</div>
<p><small>The number of the heading indicates importance, not size. The browser assigns sizes to help your website visitor see the different in importance.</small></p>
</section>
<section>
<h2><strong> & <em></h2>
<div class="left" style="width: 45%; display: inline-block;">
<p>The <code class="blue"><strong></code> tag makes the text bold.</p>
<pre><code class = "html">
<strong>I am bold</strong></code></pre>
<p><strong>I am bold</strong></p>
</div>
<div class="right" style="width: 45%; display: inline-block;">
<p>The <code class="blue"><em></code> tag makes the text italic.</p>
<pre><code class = "html">
<em>I am italic</em></code></pre>
<p><em>I am italic</em></p>
</div>
</section>
<section>
<h2>Let's Develop It!</h2>
<ol>
<li>Open up markup.html in your text editor.</li>
<li>Start editing the markup already in place.</li>
<li>Add two paragraphs under the "About Me" section.</li>
</ol>
</section>
<section>
<h2>Links</h2>
<p>Links, or anchor tags can take a user to a new page.</p>
<p>The anchor tag wraps text to make it a clickable link.</p>
<pre><code class = "html">
<a href="http://www.google.com">Google</a>
</code></pre>
<p><a href="http://www.google.com">Google</a></p>
<p>The URL, or the web address goes inside quotation marks inside the opening tag.</p>
<p>"href" stands for HyperText Reference.</p>
</section>
<section>
<h2>Images</h2>
<p>Images make everything more interesting!</p>
<p>The <code class="blue"><img></code> tag is one of the only tags that doesn't close, because it contains all the information it needs in one tag.</p>
<pre><code class = "html">
<img src="images/pup-shake.jpg" alt="Girl Develop It Logo"/>
</code></pre>
<img src="images/pup-shake.jpg" />
</section>
<section>
<h2>Let's Develop It!</h2>
<ol>
<li>Navigate the existing links in the page and return.</li>
<li>Add your own link in the middle of a paragraph or heading</li>
<li>Add one image between the About Me heading and the first paragraph</li>
</ol>
</section>
<!-- HTML Portion of the Workshop -->
<!-- Break -->
<section>
<h2>Break</h2>
<p>Let's take a quick break to stretch our legs.</p>
</section>
<!-- CSS Portion of the workshop -->
<section>
<h2>How do we make it look good?!</h2>
<p>Our page isn't really fun to look at, so let's use CSS to make it pretty.</p>
<ul>
<li>CSS is a "style sheet language" that lets you style the elements on your page.</li>
<li>CSS is works in conjunction with HTML, but is not HTML itself.</li>
</ul>
</section>
<section>
<h2>CSS: What can it do?</h2>
<p>All colored text, position, and size</p>
<img src="images/gdi-home.png" />
</section>
<section>
<h2>CSS: What does it look like?</h2>
<img src="images/homepage-css.png">
</section>
<section>
<h2>Let's add some STYLE!</h2>
<p>Add a link to your stylesheet </p>
<p>Save the file and reload it in Chrome to see if anything changes.</p>
<pre><code><head>
<title>
My Home Page
</title>
ADD THIS LINE TO YOUR HTML PAGE:
<link rel="stylesheet" href="style.css">
</head></code></pre>
</section>
<section>
<h2>CSS Overview</h2>
<p>Open up style.css and let's take a look at what's inside.</p>
</section>
<section>
<h2>The CSS Rule</h2>
<pre><code class = "html">
selector {
property: value;
}
</code></pre>
<p>A block of CSS code is a rule.</p>
<p>The rule starts with a selector.</p>
<p>It has sets of properties and values.</p>
<p>A property-value pair is a declaration.</p>
</section>
<section>
<h2>Color</h2>
<p>The color property changes the color of the text.</p>
<pre><code class = "html">
p {
color: red;
}
</code></pre>
</section>
<!-- Background color-->
<section>
<h2>Background-color</h2>
<p>The background-color property changes the color of the background.</p>
<pre><code class = "html">
body {
background-color: black;
}
</code></pre>
</section>
<section>
<h2>Standard CSS Colors</h2>
<img src="images/csscolor.png" />
</section>
<section>
<h2>Background-image</h2>
<p>The background image property allows you to use any image as a background.</p>
<pre><code class = "html">
body {
background: url(images/imagename.jpg);
}
</code></pre>
</section>
<section>
<h2>Let's Develop it!</h2>
<p>Try changing the background color of your page by applying a new color to the <code>body</code>.</p>
<p>Pick a photo from the images that starts with 'background', and see what happens when you add it to the <code>body</code></p>
</section>
<section>
<h2>Practice Code</h2>
<p><strong>Background Color</strong></p>
<pre><code>
body {
background: magenta;
}</code></pre>
<p><strong>Background Image</strong></p>
<pre><code>
body {
background: url(background6.jpg);
}</code></pre>
</section>
<section>
<h2>Font-family</h2>
<p>The font-family property defines which font is used.</p>
<pre><code class = "html">
p {
font-family: "Times New Roman";
font-family: serif;
font-family: "Arial", sans-serif;
}
</code></pre>
<p>Specific font name</p>
<p>Generic name</p>
<p>Comma-separated list</p>
</section>
<section>
<h2>Font-size</h2>
<p>The font-size property specifies the size of the font.</p>
<pre><code class = "html">
p {
font-size: 12px;
}
</code></pre>
</section>
<section>
<h2>Text Styling Practice</h2>
<ul>
<li>Experiment with at least three of the h1 properties</li>
<li>Add style rules for all headings and paragraph text</li>
<li>Try changing the backgrounds of your headings and see what happens!</li>
</ul>
</section>
<section>
<h1>THE END</h1>
</section>
</div>
<footer>
<div class="copyright">
Girl Develop It ♥ Don't be shy, develop it. -- Intro to HTML & CSS
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>