-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy path02-html-css-js.html
More file actions
246 lines (203 loc) · 11.1 KB
/
02-html-css-js.html
File metadata and controls
246 lines (203 loc) · 11.1 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML, CSS, and JavaScript</title>
<meta name="description" content="HTML, CSS, and JavaScript">
<meta name="author" content="Code with me, Tom Giratikanon, Sisi Wei">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Pacifico|Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/theme/default.css">
<link rel="stylesheet" href="css/codewithme.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<script>
// If the query includes 'print-pdf' we'll use the PDF print sheet
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section class="small">
<h1 class="opening special-margin" style="margin-top: 100px">HTML, CSS and JavaScript</h1>
<div class="small-logo-container disappear">
<img src="images/basic-logo-tan-bg.png"/>
<div class="copyright">© <span>2013</span></div>
</div>
<div class="notes">
<p>Notes version</p>
<p>We want to give you a quick overview of the three languages. After that, we’re going to dive into HTML, and get you started on coding. </p>
</div>
</section>
<section class="small">
<h2>The three languages</h2>
<ol>
<li class="">HTML</li>
</ol>
<div class="notes">
<p><em>To students:</em> What is HTML? What does it do? Bonus point: anyone know what HTML stands for?</p>
<p>HTML (Hyper Text Markup Language) is a language that tells a browser about the structure of your Web page.</p>
<p>What does that mean, structure? It means that different parts of your page have different purposes, and the browser needs to know which part does what.</p>
<p>It’s like taking a news story and formatting it in Wordpress or Microsoft Word: You don’t want just one long string of text. That would be unstructured. You want paragraphs, headlines, images. That’s structure.</p>
</div>
</section>
<section>
<h2>Without HTML</h2>
<p> </p><pre><code contenteditable>"Knock", by Fredric Brown
The last man on Earth was alone in a room.
Then he heard a knock in the door.</code></pre><p> </p>
<p style="text-align:left;">"Knock", by Fredric Brown
The last man on Earth was alone in a room.
Then he heard a knock on the door.</p>
</section>
<section>
<h2>What HTML looks like</h2>
<p> </p><pre><code contenteditable><h1>"Knock", by Fredric Brown</h1>
<p>The last man on Earth was alone in a room.</p>
<p>Then he heard a knock in the door.</p></code></pre><p> </p>
<h1 style="text-align:left; text-shadow: none; font-weight: bold; font-size: 40px; font-family: 'Lato', Arial, sans-serif;">"Knock", by Fredric Brown</h1>
<p style="text-align:left;">The last man on Earth was alone in a room.</p>
<p style="text-align:left;">Then he heard a knock on the door.</p>
</section>
<section>
<h2>What HTML does on a page</h2>
<p>Let's look at <a href="http://www.codewithmemiami.com/2-example/only-html.html" target="_blank">an example</a>.</p>
</section>
<section class="small">
<h2>The three languages</h2>
<ol>
<li class="">HTML</li>
<li class="fragment">CSS</li>
</ol>
<div class="notes">
<p>(press enter to show "CSS" bullet point)</p>
<p>ASK: So what do people know about CSS?</p>
<p>If you think of a Web page as a human body, HTML is the skeleton and CSS is the skin. HTML defines the structure, but CSS is what your Web page actually looks like. It’s your skin color and texture, your loving eyes, your button nose.</p>
<p>So if that's how it applies to people, then on a Web page, CSS controls the font size, and colors, and layout of your content. </p>
</div>
</section>
<section>
<h2>What CSS looks like</h2>
<p> </p><pre><code contenteditable>p {
color: blue;
}</code></pre><p> </p>
<h1 style="text-align:left; text-shadow: none; font-weight: bold; font-size: 40px; font-family: 'Lato', Arial, sans-serif;">"Knock", by Fredric Brown</h1>
<p style="color: blue; text-align:left;">The last man on Earth was alone in a room.</p>
<p style="color: blue; text-align:left;">Then he heard a knock on the door.</p>
</section>
<section>
<h2>What does CSS do on a page? </h2>
<p>Let's look at <a href="http://www.codewithmemiami.com/2-example/with-css.html" target="_blank">our tree example</a> with CSS.</p>
</section>
<section class="small">
<h2>The three languages</h2>
<ol>
<li class="">HTML</li>
<li class="">CSS</li>
<li class="fragment">JavaScript</li>
</ol>
<div class="notes">
<p>(press enter to make JavaScript show up)</p>
<p>ASK: So what do people know about JavaScript?</p>
<p>So if HTML is the skeleton and CSS is the skin, Javascript is like your muscles. Without Javascript, you would still look like a person, perhaps like a sculpture, or a painting. But it’s your muscles that allow you to live and breathe -- to walk and jump and run. It’s the same with a web page. Javascript controls all the moving elements: slideshows, tabs, animations.</p>
<p>So let's take a look at some example javascript.</p>
</div>
</section>
<section>
<h2>What JavaScript looks like</h2>
<p> </p><pre><code contenteditable>alert('Knock knock!');</code></pre><p> </p>
<h1 style="text-align:left; text-shadow: none; font-weight: bold; font-size: 40px; font-family: 'Lato', Arial, sans-serif;">"Knock", by Fredric Brown</h1>
<p class="target" style="text-align: left;">The last man on Earth was alone in a room.</p>
<p class="target" style="text-align: left;">Then he heard a knock in the door.</p>
</section>
<section data-state="alert-slide">
<h2>What JavaScript looks like</h2>
<p> </p><pre><code contenteditable>alert('Knock knock!');</code></pre><p> </p>
<h1 style="text-align:left; text-shadow: none; font-weight: bold; font-size: 40px; font-family: 'Lato', Arial, sans-serif;">"Knock", by Fredric Brown</h1>
<p class="target" style="text-align: left;">The last man on Earth was alone in a room.</p>
<p class="target" style="text-align: left;">Then he heard a knock in the door.</p>
</section>
<section>
<h2>What does JavaScript do on a page?</h2>
<p>Let's look at <a href="http://www.codewithmemiami.com/2-example/index.html" target="_blank">the tree example</a> <br/>with some JavaScript.</p>
</section>
<section class="small">
<p class="special-margin special-smaller" style="font-size: 3em; margin: 140px 0px 0px;"><a href="http://oregonlive.com" target="_blank">oregonlive.com</a></p>
<p>Let's try the inspector on this page.</p>
<div class="notes">
<p>FIRST ASK: Does anyone have questions about the three languages?</p>
<p>So what’s cool about Chrome, the browser, is that it has a tool called the inspector. And it shows you that there’s no magic to the web. Someone, somewhere, typed up the code you see. So let's take a look. </p>
<p>You guys will get to practice this in a minute, but on any page, you can just right-click on whatever you want, and click “Inspect Element.” And it’ll show you the exact HTML code used to create that. You can actually delete things from an HTML page by selecting them and then hitting ‘delete’ on your keyboard, or move them around by dragging and dropping.</p>
<p>So all of that code you just saw, were just files on a computer.</p>
</div>
</section>
<section class="small">
<h2>File structure for web pages</h2>
<img src="http://codewithmemiami.com/2-example/2-web-structure.png" />
<div class="notes">
<p>This it the file structure for our tree example. You've got:</p>
<ul>
<li>A folder that holds everything.</li>
<li>An index.html file. We'll focus on this for now.</li>
<li>Separate folders for css, javascript, and images.</li>
</ul>
<br/><br/>
<p>You can ultimately organize your files however you want. But this is the most common way to do it - and it helps other people figure out where your files are.</p>
</div>
</section>
<section>
<h2>With your mentors</h2>
<ul>
<li>Practice: <a href="http://codewithme.us/portland/exercises.html#practice-2">Setting up your first HTML file</a>.</li>
<li>Do exercise 2: <a href="http://codewithme.us/portland/exercises.html#exercise-2">Playing with the inspector</a>.</li>
</ul>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">◄</a>
<a class="right" href="#">►</a>
<a class="up" href="#">▲</a>
<a class="down" href="#">▼</a>
</aside>
<!-- Presentation progress bar -->
<div class="progress"><span></span></div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="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,
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/linear(2d)
// Optional libraries used to extend on reveal.js
dependencies: [
// { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
]
});
if (notes == false){
Reveal.addEventListener('alert-slide', function() {
alert('Knock knock!');
}, false );
}
</script>
</body>
</html>