-
Notifications
You must be signed in to change notification settings - Fork 0
/
class5.html
440 lines (401 loc) · 14 KB
/
class5.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Girl Develop It - Intro to HTML + CSS, Class 5</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>Intermediate CSS/HTML</h3>
<p>
<small>Session 5</small>
</p>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Common Applications</h1>
</section>
<section>
<h3>Common Applications</h3>
<p>HTML & CSS are awesome, right?</p>
<p>But how do people use them
<span class="green">really?</span>
<p>Here's a few things we'll be covering today:</p>
<ul>
<li class="fragment">CSS Resets (how to make your life easier</li>
<li class="fragment">Fixed vs. Fluid Width layouts.</li>
<li class="fragment">Horizontal & fixed navigation.</li>
<li class="fragment">Custom font-faces</li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Standard Practices</h1>
</section>
<section>
<aside>
Talk about how these items are standards that almost every site uses.
</aside>
<h3>Standard Practices</h3>
<ul>
<li class="fragment">Reset CSS files</li>
<li class="fragment">Standard widths and sizes</li>
<li class="fragment">Containers for layout</li>
</ul>
</section>
<section>
<h3>Reset CSS</h3>
<p>Even though HTML is the structure and CSS is the design, some HTML elements have default styles</p>
<p>Different browsers display these things differently. A reset gets rid of these inconsistencies.</p>
<p class="fragment">
<strong>Examples include:</strong>
</p>
<ul class="fragment">
<li>Bulleted lists like this one have standard bullets</li>
<li>Paragraphs & headings have default padding</li>
<li>Links are blue and underlined</li>
</ul>
</section>
<section>
<h3>Reset CSS</h3>
<div>
Most elements:
<pre><code class = "html">
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
</code></pre>
</div>
<div>
Lists:
<pre><code class = "html">
list-style: none;
</code></pre>
</div>
</section>
<section>
<h3>Reset CSS</h3>
<p>Instead of typing all this out - copy it from here: <a href="https://marksheet.io/css/reset.css" target="_blank">https://marksheet.io/css/reset.css</a></p>
</section>
<section>
<h2>Develop It!</h2>
<ol>
<li>Visit this URL: <a href="https://marksheet.io/css/reset.css" target="_blank">https://marksheet.io/css/reset.css</a>
<li>Save this file to your css or styles directory. (In your browser do File > Save As)
<li>Link your new reset.css file in your head BEFORE your styles.css file. Remember the cascade!
<li>Don't forget to include it on all your pages if you have made multiple html files.
</ol>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Fixed vs. <br/>Fluid Width pages</h1>
</section>
<section>
<h3>Fixed vs. Fluid Width pages</h3>
<p>
<strong class="blue">Fixed</strong>
</p>
<ul>
<li>Fixed websites have a set width for the wrapper, usually 960px to 1024px.</li>
<li>The elements inside the wrapper have a set width, or percentage of the wrapper width.</li>
<li>No matter the screensize, the user always sees the same size site.</li>
</ul>
</section>
<section>
<h3>Fixed vs. Fluid Width pages</h3>
<p>
<strong class="blue">Fluid</strong>
</p>
<ul>
<li>Also referred to as a liquid layout.</li>
<li>Majority of the components, including the wrapper, have percentages for their widths.</li>
<li>The layout adjusts for the width of the user's screen resolution.</li>
<li>Sounds like a responsive site right!? More on that later.</li>
</ul>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Containers</h1>
</section>
<section>
<h3>Fixed Container</h3>
<p>Wrappers are a good way to center content if the screen width is wider than your content.</p>
<pre><code class = "html">
.container {
width: 1440px;
margin: 0 auto; /* center content in the viewport */
}
</code></pre>
<P>The container will be 1440px wide and centered on the screen if the viewport (browser window) is larger than 1440px.</P>
</section>
<section>
<h3>Fluid Container</h3>
<p>Wrappers are a good way to center content if the screen width is wider than your content.</p>
<pre><code class = "html">
.container {
width: 80%;
margin: 0 auto; /* center content in the viewport */
}
</code></pre>
<P>The container will be 80% of the viewport (browser window) and centered within it.</P>
</section>
<section>
<h3>Let's develop it!</h3>
<p>Let's add a container to our page so we can center things more easily.</p>
<p>Decide if you want it to be a fluid container (percentage) or fixed (pixels).</p>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Horizontal Fixed Nav</h1>
</section>
<section>
<h3>All the cool kids are doing it</h3>
<ul>
<li>Horizontal fixed-to-top nav allows users to have access to navigational elements at all times</li>
<li>All the rage these days</li>
<li>Be careful - screen heights vary, and it reduces the amount of content visible on smaller screens</li>
</ul>
</section>
<section>
<h3>Fixed Nav: HTML</h3>
<p>Let's include it in a header, since we know we'll be grouping related content here.</p>
<pre><code class="xml">
<header>
<nav>
<ul>
<li><a href="#home">My Home</a></li>
<li><a href="#diet">My Diet</a></li>
<li><a href="#pattern">Stripes</a></li>
</ul>
</nav>
</header>
</code></pre>
</section>
<section>
<h3>Fixed Nav: CSS</h3>
<p>Remember, using fixed position is like using absolute position, except that it's fixed to the viewport, not the containing element.</p>
<p>We also have to define a width for it, and its location.</p>
<pre><code class="css">
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}</code></pre>
</section>
<section>
<h3>Fixed Nav: CSS</h3>
<p>Because we've fixed the nav to the top of the viewport, we need to bump the content of the
<code>body</code> down to be visible to the user.</p>
<p>This should be the same, or more than, the height of the navigation bar.</p>
<pre><code class="css">
body {
padding-top: 70px;
}
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}</code></pre>
</section>
<section>
<h3>Fixed Nav: CSS</h3>
<p>Now we need to get those list items next to each other instead of stacked.</p>
<p>Let's float them to the left and add some padding to the links so they have a large clickable area.</p>
<pre><code class="css">nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}
nav li {
float: left;
width: auto;
}
nav li a {
padding: 25px 10px;
display: block;
}
</code></pre>
</section>
<section>
<h3>Fixed Nav: Container</h3>
<p>Let's align our links and navigation content by adding a container around the items.</p>
<pre><code class="css">
<div class="container">
CONTENT OF NAV
</div>
</code></pre>
<p>Now wherever we use
<code>.container</code> in our HTML we will have our content centered. </p>
</section>
<section>
<h2>Let's develop it!</h2>
<p>Let's make a Horizontal fixed navigation.</p>
</section>
<section data-background="#f05b62">
<h1 style="color: #fafafa;">Custom Fonts</h1>
</section>
<section>
<h3>@font-face</h3>
<p>The world of HTML has progressed beyond Times New Roman and Arial</p>
<p class="green">Yay!</p>
<p>How do we use new and cool fonts?</p>
</section>
<section>
<h3>Class, meet Google Web Fonts</h3>
<p>Google has hundreds of free, open-source fonts that have been optimized for the web, and ready for us to use!</p>
<p>The service runs on Google's servers which are fast, reliable and tested. Google provides this service free of charge.</p>
</section>
<section data-background="#f05b62">
<h2 style="color: #fafafa;"><a href="http://www.google.com/fonts" style="color: #fafafa;" target="_blank">www.google.com/fonts</a>
</h2>
</section>
<!-- Fonts-->
<section>
<h3>@font-face</h3>
<p>Let's check out Lato for the body and Bree Serif for the headlines</p>
<p>You can use any font you'd like!</p>
<img src="images/lato.png" alt="lato" style="width: 40%; float: left;" />
<img src="images/bree.png" alt="bree" style="width: 40%; float: right;" />
</section>
<section>
<h3>Using Google Fonts in 3 steps!</h3>
<ol>
<li>Search the hundreds of font families, then add them to your collection.</li>
<li>Compare and refine the collection - think about what styles you NEED.</li>
<li>Grab the code that Google prepares for you and add it to your site!</li>
</ol>
<pre><code class = "html">
@import url(http://fonts.googleapis.com/
css?family=Lato:300,400,700,300italic,400italic|Bree+Serif);
</code></pre>
<a href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|Bree+Serif" target="_blank">What does that do?</a>
</section>
<section>
<h3>Integrating into the CSS</h3>
<pre><code class = "html">
body{
font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bree Serif', serif;
}
</code></pre>
</section>
<section>
<h3>Develop It!</h3>
<p>Pick some fonts for your site using Google Fonts.</p>
<p>Adjust the
<code>font-size</code> and
<code>line-height</code> to refine your fonts.</p>
</section>
<!-- Flow -->
<!-- Thank you! -->
<section data-background="#f05b62">
<h1 style="color: #fafafa;">See you on Thursday!</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>