-
Notifications
You must be signed in to change notification settings - Fork 0
/
class4.html
executable file
·454 lines (415 loc) · 24.6 KB
/
class4.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Girl Develop It - Intro to HTML + CSS, Class 4</title>
<meta name="description" content="Girl Develop It's Intro to HTML and CSS course, customized by Liz Shaw">
<meta name="author" content="Liz Shaw">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor-->
<link rel="stylesheet" href="lib/css/dark.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.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 = 'css/print/pdf.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- Code Your Own Website -->
<section>
<h2>HTML / CSS 4wk series</h2>
<img src="img/circle-gdi-logo.png" alt="GDI Logo" />
<h3>CSS Positioning</h3>
<p>
<small>Session 4</small>
</p>
</section>
<!-- Flow -->
<section>
<h3>Normal Flow vs. Out of Flow</h3>
<p class="fragment blue">Normal Flow</p>
<p class="fragment">The typical way a browser positions an element in respect to elements around it<br /><span class="fragment">» An element without any CSS positioning applied is considered <span class="green">in normal flow</span></p>
<p class="fragment blue"><br />Out of Flow</p>
<p class="fragment">When an element's default position is overridden, the element is considered <span class="green">out of flow</span></p>
</section>
<!-- Normal Flow -->
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Normal Flow</h1>
</section>
<!-- Static -->
<section>
<h3>Property: <em>position</em></h3>
<p class="blue">The Default <em>static</em> Position</p>
<pre><code class="css">
selector {
position: static;
}
</code></pre>
<p class="fragment"><br />The default <em>position</em> property's value for <span class="green">all</span> HTML elements (block-level, inline, etc.) is <span class="orange">static</p>
<p class="fragment">Static elements are <span class="green">in normal flow</span></p>
<p class="fragment">Usually you wouldn't specify <span class="orange">position: static;</span> since it is the default position of every element</p>
</section>
<section>
<h3>Property: <em>position</em></h3>
<p class="blue">The Default <em>static</em> Position</p>
<p class="fragment" style="font-size:90%;">So far, every element we've worked with has been <span class="orange">static</span></p>
<div class="fragment" style="font-size:80%">
<div style="width:50%;float:left">
<p><img src="img/blockinline.png" alt="Block and inline elements, statically positioned" /></p>
</div>
<div style="float:right;width:50%">
<h4>Block-Level Elements:</h4>
<p><p><br /><div><br /><section><br /><main><br /><aside><br /><h1> </p>
<h4>Inline Elements:</h4>
<p><span><br /><em><br /><strong><br /><a><br /><img></p>
</div>
</div>
</section>
<!-- Limitations -->
<!--<section>
<h3>Limitations of Static Positioning</h3>
<p class="fragment"><span class="green">All</span> static elements (block-level, inline, etc.) recognize the boundaries of their neighbors and <span class="green">do not overlap other elements</span></p>
<p class="fragment">Static elements ignore <span class="orange">top</span>, <span class="orange">bottom</span>, <span class="orange">right</span>, <span class="orange">left</span>, and <span class="orange">z-index</span> properties</p>
<pre class="fragment"><code class="css">
selector {
display: block;
top: 500px;
bottom: 20px;
right: 400px;
left: 20px;
z-index: 2;
/* since this block-level element is
position: static;
by default, the above values won't
do anything! */
}
</code></pre>
</section>-->
<!-- Out of Flow -->
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Out of Flow</h1>
</section>
<!-- Relative -->
<section>
<h3>Relative Positioning</h3>
<p class="fragment">To move an element relative to where it ordinarily would rest in normal flow, use <span class="green">relative positioning</span></p>
<pre class="fragment"><code class="css">
selector {
position: relative;
}
</code></pre>
</section>
<section>
<h3>Relative Positioning</h3>
<p class="fragment">Use the <span class="orange">top</span>, <span class="orange">bottom</span>, <span class="orange">right</span>, and <span class="orange">left</span> properties to set the location</p>
<p class="fragment">These values position the element <span class="green">relative to where it would be normally</span></p>
<p class="fragment">An empty area shows where the element once was, when the element was in normal flow</p>
<p class="fragment">Unlike static elements, a relative element can <span class="green">overlap other elements</span></p>
<div class="fragment"><p data-height="185" data-theme-id="0" data-slug-hash="QjQPVj" data-default-tab="result" data-user="anythingcodes" class='codepen'>See the Pen <a href='http://codepen.io/anythingcodes/pen/QjQPVj/'>Relative Positioning</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
</div>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/yYjMvL" target="_blank">View result of above CodePen »</a></p>
</section>
<!--<section>
<h3>Relative Positioning</h3>
<p class="blue">Other Features</p>
<p class="fragment">Often used to <span class="green">limit the positioning scope</span> of descendants, usually for <span class="orange">absolute</span>ly-positioned descendants</p>
</section>-->
<!-- Absolute -->
<section>
<h3>Absolute Positioning</h3>
<pre class="fragment"><code class="css">
selector {
position: absolute;
}
</code></pre>
<p class="fragment">When you specify <em>position: absolute;</em> the element is removed from the document and placed exactly where you tell it to go</p>
<p class="fragment">Nothing shows where the element once was, when the element was in normal flow</p>
<p class="fragment">Unlike static elements, an absolute element can <span class="green">overlap other elements</span></p>
</section>
<section>
<h3>Absolute Positioning</h3>
<p class="blue">Setting the Location</p>
<p class="fragment">Use the <span class="orange">top</span>, <span class="orange">bottom</span>, <span class="orange">right</span>, and <span class="orange">left</span> properties to set the location</p>
<p class="fragment">By default, an absolute element's location is <span class="green">relative to the window</span> (the <html> element)</p>
<p class="fragment">If the absolute element is within a non-static element, its location will be <span class="green">relative to the closest non-static element</span></p>
</section>
<section>
<h3>Absolute Positioning</h3>
<p data-height="284" data-theme-id="0" data-slug-hash="epVoXR" data-default-tab="result" data-user="anythingcodes" class='codepen fragment'>See the Pen <a href='http://codepen.io/anythingcodes/pen/epVoXR/'>Absolute Positioning</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/xwjqYq" target="_blank">View result of above CodePen »</a></p>
</section>
<section>
<h3>Absolute Positioning</h3>
<p class="blue">How to limit an absolute element's scope</p>
<div class="fragment">
<p>We can corral an absolute element inside any non-static (e.g. <span class="green">relative</span>) element</p>
<p><img src="img/positioning-banner-concept.png" alt="Limiting the scope" /></p>
</div>
</section>
<section>
<h3>Absolute Positioning</h3>
<p class="blue">How to limit an absolute element's scope</p>
<div class="fragment"><p data-height="351" data-theme-id="0" data-slug-hash="KdowRV" data-default-tab="result" data-user="anythingcodes" class='codepen'>See the Pen <a href='http://codepen.io/anythingcodes/pen/KdowRV/'>Limiting an Absolute Element's Scope</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p></div>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/meLWXK" target="_blank">View result of above CodePen »</a></p>
</section>
<!-- Z-Index -->
<section>
<h3>Z-Index</h3>
<p class="fragment">Non-static elements can overlap</p>
<p class="fragment">You can change the order of overlapping with <span class="blue">z-index</span></p>
<p class="fragment">The element with the highest z-index goes on top</p>
<p class="fragment"><small>z-index only works on non-static elements (such as <span class="green">relative</span> or <span class="green">absolute</span>)</small></p>
<div class="fragment">
<pre><code class="html css">
.bottom {
position: absolute; /* absolute is a non-static position */
bottom: 10px;
left: 60px;
background-color: lightcoral;
}
.top {
position: absolute; /* absolute is a non-static position */
bottom: 15px;
left: 60px;
background-color: lightseagreen;
z-index: 2;
}
</code></pre>
<div style="position: absolute; bottom: -20px; left:60px;
background-color: lightcoral; color:black"> Bottom </div>
<div style="position: absolute; bottom: -15px; left:60px;
background-color: lightseagreen; z-index: 2; "> Top </div>
</div>
</section>
<section>
<h3>Z-Index</h3>
<p class="blue">An Example</p>
<p data-height="268" data-theme-id="0" data-slug-hash="MaVYNm" data-default-tab="result" data-user="anythingcodes" class='codepen'>See the Pen <a href='http://codepen.io/anythingcodes/pen/MaVYNm/'>Z-Index - Before</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/KdRWoP" target="_blank">View result of above CodePen »</a></p>
</section>
<!-- Let's Develop It! -->
<section>
<h2>Let's Develop It!</h2>
<p>Let's use relative and absolute positioning to style our site's banner section</p>
<p><img src="img/project-banner.jpg" alt="The design's banner section" /></p>
</section>
<section>
<h3>Property: <em>float</em></h3>
<pre><code class="css">selector {
float: left;
float: right;
}</code></pre>
<p class="fragment"><br />The <span class="blue">float</span> property shifts an element to the <span class="green">left</span> or <span class="green">right</span> on the current line, taking it out of normal flow</p>
<p class="fragment">When an element is floated, <span class="orange">subsequent elements wrap around it</span></p>
<p class="fragment"><img src="img/floating.png" alt="A floating example" /></p>
</section>
<section>
<h3>Property: <em>float</em></h3>
<p class="blue">An Example</p>
<p data-height="295" data-theme-id="0" data-slug-hash="vNROXq" data-default-tab="result" data-user="anythingcodes" class='codepen'>See the Pen <a href='http://codepen.io/anythingcodes/pen/vNROXq/'>Float - Before</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/RWypMy" target="_blank">View result of above CodePen »</a></p>
</section>
<section>
<h3>Property: <em>float</em></h3>
<p class="blue">Using <em>float</em> in Layouts</p>
<p class="fragment">Use <em>float</em> on block-level elements (<span class="orange"><aside></span>, <span class="orange"><main></span>, <span class="orange"><div></span>, etc.) to make page layouts</p>
<p class="fragment">Always <span class="green">set a width</span> on floated block-level elements used in layouts</p>
<p class="fragment"><img src="img/example-float-column.png" alt="Setting a width on floated layout elements" /></p>
</section>
<section>
<h3>Property: <em>float</em></h3>
<p class="blue">Example: Using <em>float</em> in Layouts</p>
<p data-height="182" data-theme-id="0" data-slug-hash="JYLdyw" data-default-tab="result" data-user="anythingcodes" class='codepen'>See the Pen <a href='http://codepen.io/anythingcodes/pen/JYLdyw/'>Float in Layouts - Before</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/qOYrYj" target="_blank">View result of above CodePen »</a></p>
</section>
<!-- Clearing -->
<section>
<h3>Property: <em>clear</em></h3>
<pre><code class="css">selector {
clear: left;
clear: right;
clear: both;
}</code></pre>
<p class="fragment"><br />The <span class="blue">clear</span> property is used exclusively on elements surrounding floated elements</p>
<p class="fragment">It tells the element on which side (<span class="orange">left</span>, <span class="orange">right</span>, or <span class="orange">both</span>) floated elements <strong>cannot</strong> appear</p>
<div class="fragment"><p data-height="205" data-theme-id="0" data-slug-hash="jbzbbx" data-default-tab="result" data-user="anythingcodes" class='codepen'>See the Pen <a href='http://codepen.io/anythingcodes/pen/jbzbbx/'>Float with Text - Before</a> by Liz Shaw (<a href='http://codepen.io/anythingcodes'>@anythingcodes</a>) on <a href='http://codepen.io'>CodePen</a>.</p></div>
<p class="fragment"><a href="http://codepen.io/anythingcodes/pen/pjVeKo" target="_blank">View result of above CodePen »</a></p>
</section>
<!-- Let's Develop It! -->
<section>
<h2>Let's Develop It!</h2>
<p>Let's use floating to style our site's portfolio section</p>
<p><img src="img/project-portfolio.jpg" alt="The design's banner section" /></p>
</section>
<!-- Questions -->
<section>
<h1>Questions</h1>
<div class="blue" style="font-size:1200%; height:100%; margin-top:20%">?
<div class="clear"></div>
</div>
</section>
<!-- Getting Your Site Online -->
<section>
<section data-background="#00A9B4">
<h3 style="color: #fafafa;">Bonus Material:</h3>
<h1 style="color: #fafafa;"><br />Getting Your Site Online</h1>
<p style="color:#fafafa;">Press the down arrow or spacebar to view</p>
</section>
<section>
<h3>Method 1: GitHub</h3>
<p class="fragment"><a href="http://github.com" target="_blank">GitHub</a> is <span class="orange">free</span> and a great intro to <span class="orange">version control</span></p>
<p class="fragment">A <span class="orange">version control system</span> records changes to a file or set of files over time so that you can keep track of changes and roll back to previous revisions</p>
<p class="fragment blue">Almost every web agency uses a version control system</p>
</section>
<!-- GitHub -->
<section>
<h3>Method 1: GitHub</h3>
<ol style="font-size:85%;line-height:1.3;">
<li class="fragment">Create an account on <a href="http://github.com" target="_blank">GitHub.com</a></li>
<li class="fragment"><a href="https://desktop.github.com/" target="_blank">Download GitHub Desktop</a>, then open it and login</li>
<li class="fragment"><img src="img/GitHub-add-repository.png" alt="Adding a repository" style="float:right;max-width:50%;"/>Click the plus sign and, under the <em>Add</em> tab, browse to the <span class="orange">project</span> folder you used for this class</li>
<li class="fragment">An error message will display; click <span class="blue">create a repository</span></li>
<li class="fragment"><img src="img/GitHub-create.png" alt="The create repo screen" style="float:right;max-width:50%;" />Change the <em>Name</em> to <span class="orange"><em>yourusername</em>.github.io</span> (substitute <em>yourusername</em> with your GitHub username)</li>
<li class="fragment">Click <span class="blue">Create repository</span> (Don't worry about changing <em>Local path</em> or <em>Git ignore</em>)</li>
</ol>
</section>
<section>
<h3>Method 1: GitHub</h3>
<ol style="font-size:80%;line-height:1.3;" start="7">
<li class="fragment">Click <em>Changes</em>, where you should see a list of project files.</li>
<li class="fragment">Enter a <em>Summary</em> and click <span class="blue">Commit to master</span><br /><img src="img/GitHub-commit.png" alt="Committing changes to GitHub"/></li>
</ol>
</section>
<section>
<h3>Method 1: GitHub</h3>
<ol style="font-size:80%;line-height:1.3;" start="9">
<li class="fragment"><img src="img/GitHub-publish-screen.png" alt="The publish menu" style="float:right;max-width:50%;" />Click <em>Publish</em> at the top, making sure <em>Name</em> is in the correct format (<span class="orange"><em>yourusername</em>.github.io</span>, except with your username)</li>
<li class="fragment">Within a few minutes, your site will be live at <span class="blue">http://<em>yourusername</em>.github.io</span> (substituting your GitHub username for <em>yourusername</em>). Check it out!</li>
<li class="fragment">Any time you make changes to your project files, open GitHub Desktop, <em>Commit</em> (step 8) and then click the <img src="img/GitHub-sync.png" style="border:none;box-shadow:none;margin:0;" /> button to publish your changes.</li>
</ol>
<div class="fragment" style="font-size:75%;line-height:1.3;">
<p class="blue">More info:</p>
<p><a href="https://pages.github.com/" target="_blank">GitHub Documentation »</a></p>
<p><a href="https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/" target="_blank">Setting up a domain (like http://girldevelopit.com) with GitHub »</a></p>
</div>
</section>
<!-- Method 2: Hosting -->
<section>
<h3>Method 2: Hosting + Domain</h3>
<p class="fragment">There are two paid services involved:</p>
<ol style="font-size:80%;line-height:1.3;">
<li class="fragment"><span class="blue fragment">Web Hosting</span><span class="fragment">: A computer (a.k.a. server) where your site's files are located, which is visible to the outside world using a browser</span>
<ul>
<li class="fragment">To publish changes to your site, you upload individual files from your computer to the server using a <span class="green">File Transfer Protocol (FTP) program</span> such as <a href="https://filezilla-project.org/download.php?type=client" target="_blank">Filezilla</a></li>
<li class="fragment">The web hosting company will give you FTP info</li>
</ul>
</li>
<li class="fragment"><span class="blue fragment">Domain Name</span><span class="fragment">: The name you type in to the browser (e.g. girldevelopit.com)</span>
<ul>
<li class="fragment">Buying a domain is often called <span class="green">registering</span>, so companies that sell domain names are often called <span class="green">Domain Name Registrars</span></li>
</ul>
</li>
</ol>
</section>
<section>
<h3>Method 2: Hosting + Domain</h3>
<p class="fragment">You can buy <span class="blue">hosting</span> from one company and <span class="blue">a domain name</span> from another, but it's usually less of a hassle to buy both from the same company</p>
<p class="fragment">I use <a href="https://www.1and1.com/web-hosting" target="_blank">1&1's Starter package</a>, since it includes hosting and one domain name</p>
<p class="fragment"><br />When it comes to <span class="blue">hosting</span>, <span class="green"><strong>don't be fooled by the extra bells and whistles</strong></span> — if you aren't sure what something is, you probably don't need it</p>
</section>
<section>
<h3>Method 2: Hosting + Domains</h3>
<p class="orange fragment">Why are there two separate services?</p>
<p class="fragment">First, your files need to be stored on a <span class="blue">web host</span>, which is a computer (a.k.a. server)</p>
<p class="fragment">When you <span class="blue">register a domain</span>, it doesn't 'point' to the server where your files are located</p>
<p class="fragment">This is why your web host may give you a <span class="green">Domain Name System (or DNS)</span> address, which is the IP address of the computer (a.k.a. server) where your files are located</p>
<p class="fragment">The <span class="green">Domain Name System (DNS)</span> is a huge list that links your domain name (e.g. girldevelopit.com) to where your files are located (using the <span class="green">IP address</span> of the server where your files are located)</p>
</section>
</section>
<!-- Thank you! -->
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Thank you all!</h1>
</section>
</div>
<footer>
<div class="copyright">
HTML & CSS 4wk Series <span class="red">♥</span> Boulder/Denver |
<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="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,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [{
src: 'lib/js/classList.js',
condition: function() {
return !document.body.classList;
}
}, {
src: 'plugin/markdown/marked.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/markdown/markdown.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/highlight/highlight.js',
async: true,
condition: function() {
return !!document.querySelector('pre code');
},
callback: function() {
hljs.initHighlightingOnLoad();
}
}, {
src: 'plugin/zoom-js/zoom.js',
async: true
}, {
src: 'plugin/notes/notes.js',
async: true
}, {
src: 'plugin/accessibility-helper/js/accessibility-helper.js',
async: true,
condition: function() {
return !!document.body.classList;
}
}]
});
</script>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</body>
</html>