-
Notifications
You must be signed in to change notification settings - Fork 13
/
class07.html
280 lines (233 loc) · 11.6 KB
/
class07.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
<!doctype html>
<html lang="en">
<head>
<title>FEWD: Class 07</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/general-assembly.css" id="theme">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/zenburn.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="hero">
<h1>HELLO</h1>
<div class="opening-instructions">
<p>1) Please download <a href="../materials/class07.zip">Class 07 Starter Code</a></p>
<p>2) Move the following into your <code class="code">homework</code> directory:</p>
<p class="pad-left-lg">• <code class="code">startup-matchmaker</code></p>
<p>3) The solution to last class's lab/hw is included:</p>
<p class="pad-left-lg">• <code class="code">fashion-blog-part2-solution</code></p>
</div>
</section>
<section class="hero condensed">
<h1>Class <span class="red">#07</span></h1>
<h1>10/08/2018</h1>
<h1 class="lesson-title">Page Layout: Lab</h1>
</section>
<!-- ANNOUNCEMENTS -->
<section data-background="#FFF" class="text-left">
<div class="heading">Annoucements</div>
<p>• Final Projects:</p>
<div class="pad-left-lg">
<p>⇒ First deliverable due Monday, October 22nd</p>
<p>⇒ Two weeks away!</p>
<p>⇒ Project proposal/ideas</p>
<p>⇒ Wirefames if possible!</p>
</div>
</section>
<!-- QUESTIONS -->
<!-- <section class="title">
<h1>Questions</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Questions</div>
<div class="text-smaller">
<p class="text-smaller"><b>Q: Had trouble applpying <code class="code">:hover</code> to certain CSS selectors - does it not apply to nested selectors?</b></p>
<p class="text-smallest fragment">A: You should be able to apply <code class="code">:hover</code> to any selector (<a href="http://codepen.io/cheshireoctopus/pen/JWBxdz?editors=1100" target="_blank">ex.</a>); be sure you are targeting the <code class="code"><a></code></p>
<p class="fragment text-smaller"><b>Q: What are Less and Sass and when should they be used?</b></p>
<p class="fragment text-smallest">A: Super-sets of CSS; extend CSS w/ features the language does not natively have (ex: variables); requires a compiler to transform them back into vanilla CSS; should be used on large projects with lots of CSS</p>
<p class="fragment text-smaller"><b>Q: Determining the most efficient way to work with floated elements?</b></p>
<p class="fragment text-smallest">A: Not so crystal clear; depends on many factors - our goal is to teach you a variety of methods</p>
<p class="fragment text-smaller"><b>Q: Does coding everyday keep the Doctor away?</b></p>
<p class="fragment text-smallest">A: Yes - of course</p>
</div>
</section> -->
<!-- AGENDA -->
<section data-background="#FFF" class="text-left">
<div class="heading">Agenda</div>
<p>• <a href="#/final-project">Final project review</a></p>
<p>• <a href="#/calc"><code class="code">calc</code></a></p>
<p>• <a href="#/floats-clears-review">Floats/clears review</a></p>
<p>• <a href="#/startup-matchmaker-lab">Startup Matchmaker lab</a></p>
</section>
<section class="title" id="final-project">
<h1>Final Project</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Final Project</div>
<div class="text-smallest">
<p>• Culmination of all skills/technologies (and then some...)</p>
<p class="fragment">• Five deliverables; due weekly starting next Monday, October 16th</p>
<p class="fragment">• Watch out for scope creep!</p>
<div class="fragment">
<p>• Student Gallery: <a href="http://gallery.ga.co/" target="_blank">http://gallery.ga.co/</a></p>
<div class="pad-left-lg text-smallest">
<p>⇒ <a target="_blank" href="http://ericthelefty.github.io/fewd-37/Project/doggy.html">Trippy Dog</a></p>
<p>⇒ <a target="_blank" href="http://weeeitsmylinh.github.io/fewd-37/map-project/world-map/world.html">Find That Country</a></p>
<p>⇒ <a target="_blank" href="http://www.drinkerlyn.com/">Erlyn</a></p>
<p>⇒ <a target="_blank" href="http://murielm.github.io/fewd-34/Homework/disrupticon">Disrupticon</a></p>
</div>
</div>
</div>
</section>
<section class="title">
<h1>Fashion Blog Two Review</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Fashion Blog Two Review</div>
<p>• How did you build the <code class="code">nav</code> for Fashion Blog Two?</p>
<p>• What was the <code class="code">width</code> of each <code class="code"><a></code>?</p>
<p class="fragment">• Example: <a href="https://codepen.io/cheshireoctopus/pen/vVyyjd?editors=1100" target=_blank>CodePen</a></p>
</section>
<section class="title" id="calc">
<h1><code class="lower">calc</code></h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading"><code class="lower">calc</code></div>
<p>• <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" target="_blank">calc</a> is a function for help determining length</p>
<p>• Use simple arithmetic operators: <code class="code">+</code>, <code class="code">-</code>, etc.</p>
<pre><code>
width: calc(1080px/6 - 6px);
</code></pre>
<div class="fragment">
<p>• Can mix sizing units:</p>
<pre><code>
width: calc(50% - 100px);
</code></pre>
</div>
</section>
<!-- FLOATS REVIEW -->
<section class="title" id="floats-clears-review">
<h1>Floats/Clears Review</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Floats: Review</div>
<div class="text-smaller">
<p>• Enable advanced layout by altering a block element's "flow"</p>
<p class="fragment">• Three rules:</p>
<div class="pad-left-lg text-smaller">
<p class="fragment">1) Floated elements should be assigned a <code class="code">width</code></p>
<div class="fragment">
<p>2) Floated elements will shift left or right, until:</p>
<div class="pad-left-lg">
<p>⇒ They reach the side of their parent</p>
<p>⇒ They encounter another floating element</p>
</div>
</div>
<p class="fragment">3) Floated elements need to be cleared</p>
</div>
<p class="fragment">• <a target="_blank" href="http://codepen.io/cheshireoctopus/pen/dYQBpz?editors=110">Example</a></p>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Clears: Review</div>
<p>• How we "handle" floating elements</p>
<p>• Various approaches to clearing elements:</p>
<div class="pad-left-lg">
<p>⇒ <code class="code">clear</code> CSS property</p>
<p>⇒ <code class="code">overflow: auto;</code></p>
<p>⇒ <code class="code">clearfix</code> class</p>
</div>
<p>• The hard part is knowing which to use!</p>
</section>
<!-- <section data-background="#FFF" class="text-left">
<div class="heading">The <code class="code lower">clear</code> CSS Property</div>
<p>• <code class="code">clear</code> is a CSS property that takes:</p>
<div class="pad-left-lg">
<p>⇒ <code class="code">left</code></p>
<p>⇒ <code class="code">right</code></p>
<p>⇒ <code class="code">both</code></p>
</div>
<p>• Tells non-floating elements where floats are not allowed (left, right, both sides)</p>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Clears: <code class="code lower">overflow: hidden</code></div>
<p>• The <code class="code">overflow</code> CSS property determines what happens to content that extends beyond its parent</p>
<p class="fragment">• Takes the following values: <code class="code">visible, hidden, scroll, auto</code></p>
<p class="fragment">• If <code class="code">hidden</code> or <code class="code">auto</code> is applied to an element containing floated elements, will cause the element to extend to accompany any floating children</p>
<p class="fragment">• <a href="https://css-tricks.com/almanac/properties/o/overflow/">More info</a></p>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Clears: The Clearfix</div>
<p>• Applying <code class="code">overflow</code> may cause undesirable behavior</p>
<p>• Clearfix to the rescue:</p>
<pre><code>
.clearfix:after {
content: "";
display: table;
clear: both;
}
</code></pre>
<p>• Works on collapsed elements only!</p>
</section> -->
<section data-background="#FFF" class="text-left" id="startup-matchmaker-lab">
<div class="heading">Startup Matchmaker Lab</div>
<div class="text-smaller">
<p>• Open <code class="code">startup-matchmaker</code> in SublimeText</p>
<p>• Build what you see in <code class="code">spec.png</code></p>
<p>• Styling help can be found in <code class="code">readme.txt</code></p>
<p>• Will have to research the following CSS properties:</p>
<div class="pad-left-lg">
<p>⇒ <code class="code">background-position</code></p>
<p>⇒ <code class="code">border-radius</code> (rounded corners)</p>
<p>⇒ <code class="code">rgba</code> color values (used for opacity)</p>
</div>
</div>
</section>
<section class="title" id="font-awesome">
<h1>Font Awesome</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Font Awesome</div>
<div class="text-smaller">
<p>• <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> provides a set of free (paid) icons</p>
<p>• Easy to use; add the following to your <code class="code"><head></code>:</p>
<pre><code>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
</code></pre>
<p>• Add <a href="https://fontawesome.com/icons?d=gallery" target=_blank>icons</a> in HTML:</p>
<pre><code>
<i class="fas fa-heart"></i>
</code></pre>
</div>
</section>
<!-- THE END -->
<section class="center">
<img src="img/main/the-end.jpg">
</section>
<!-- ON DECK -->
<section data-background="#FFF" class="text-left">
<div class="heading">On Deck: #08 - Responsive Web Design</div>
<p>• <code class="code lower">box-sizing: border-box</code></p>
<p>• Responsive Web Design Overview</p>
<p>• Fluid Layout</p>
<p>• Media Queries</p>
<!-- <h4>Class #8 (of 20) - Intro to Programming/JavaScript</h4>
<p>• What is JavaScript and what can it do?</p>
<p>• How to think programatically</p>
<p>• Pseudo Code</p>
<p>• JS Basics</p> -->
</section>
<section class="center">
<h1>Exit Tickets!</h1>
</section>
</div>
</div>
<script src="js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>