/
index.html
299 lines (280 loc) · 16.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Course materials and slides, taught by Liz Shaw">
<title>Liz Shaw | Course Materials and Slides</title>
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/queries.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body id="top">
<header id="home">
<nav>
<ul class="top-nav">
<li><a href="#materials">Materials</a>
</li>
<li><a href="#resources">Resources</a>
</li>
<li><a href="#contact">Get in Touch</a>
</li>
</ul>
</nav>
<section class="hero" id="hero">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center inner">
<h1 class="animated fadeInDown"><span>ANYTHING</span>.<span>CODES</span></h1>
<p class="animated fadeInUp delay-05s">Course materials and slides taught by Liz Shaw for <em>Girl
Develop It</em>, <em>Women Who Code</em>, and others.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<a href="#materials" class="learn-more-btn">View Course Materials</a>
</div>
</div>
</div>
</section>
</header>
<section class="text-center section-padding" id="materials">
<div class="container">
<div class="row">
<h1 class="arrow">Course Materials</h1>
<div class="col-md-3 wp6">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="img/materials-01.jpg" alt="Intro Materials">
<div class="overlay">
<a href="/gdi-intro-html-css" class="expand"><i class="fa fa-search"></i><br>View
Materials</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<h2>Intro to HTML & CSS</h2>
<p>This beginner-level course takes you from a blank page to a functioning website, including
writing valid HTML, adding links and images, applying CSS styles, and positioning elements.</p>
</div>
<div class="col-md-3 wp6 delay-1s">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="img/materials-03.jpg" alt="Intermediate Materials">
<div class="overlay">
<a href="/gdi-intermediate-html-css" class="expand"><i class="fa fa-search"></i><br>View
Materials</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<h2>Intermediate HTML & CSS</h2>
<p>This 8-hour class covers HTML5 and CSS3, and includes standard development practices like using
a reset stylesheet, fixed navigation menus, hero images, SVG graphics, web fonts, animations,
and responsive development.</p>
</div>
<div class="col-md-3 wp6">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="img/materials-04.jpg" alt="ES6 Materials">
<div class="overlay">
<a href="/gdi-es6-javascript" class="expand"><i class="fa fa-search"></i><br>View
Materials</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<h2>Getting Started with ES6</h2>
<p>This course will help you reformat current ES5 JavaScript code to its nice new ES6 format and
get you up and running using ES6 in practical situations. We'll also wave 'bye' to for loops
and start coding more efficiently!</p>
</div>
<div class="col-md-3 wp6">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="img/materials-05.jpg" alt="ES6 Materials">
<div class="overlay">
<a href="/wwc-boston-es6" class="expand"><i class="fa fa-search"></i><br>View
Slides</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<h2>ES6 Workshop</h2>
<p>What is ES6 and why would I want to use it? Let's cut to the chase with this 2-hour ES6 primer!
You'll see what all the fuss is about by transforming ES5 code to its much more elegant ES6
counterpart, work through activities with your peers, and be able to ask questions along the
way.</p>
</div>
</div>
</div>
</section>
<section class="resources text-center section-padding" id="resources">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="arrow">Additional Resources</h1>
<div class="resources-wrapper">
<div class="col-md-4 wp5 delay-05s">
<div class="icon">
<i class="fa fa-code shadow"></i>
</div>
<h2>Intro to HTML & CSS</h2>
<ul>
<li><a href="/gdi-intro-html-css/cheatsheets/beginners-class1.html" target="_blank">HTML:
A Beginner's Cheatsheet (Class 1)</a></li>
<li><a href="/gdi-intro-html-css/cheatsheets/beginners-class2.html" target="_blank">CSS:
A Beginner's Cheatsheet (Class 2)</a></li>
<li><a href="/gdi-intro-html-css/cheatsheets/beginners-class3.html" target="_blank">File
Paths & The Display Property (Class 3)</a></li>
<li><a href="/gdi-intro-html-css/cheatsheets/beginners-class4.html" target="_blank">Positioning
& Floating (Class 4)</a></li>
<!--<li><a href="img/resources/intermediate-css-cheatsheet.jpg" target="_blank">CSS Properties Cheatsheet</a></li>
<li><a href="img/resources/intermediate-css-shorthand.jpg" target="_blank">Shorthanding CSS Properties</a></li>-->
</ul>
</div>
<div class="col-md-4 wp5 delay-05s">
<div class="icon">
<i class="fa fa-html5 shadow"></i>
</div>
<h2>Intermediate HTML & CSS</h2>
<ul>
<li><a href="http://css3please.com/" target="_blank">CSS3 Please</a>, a playground of
fun CSS3 effects</li>
<li><a href="http://kimblim.dk/css-tests/selectors/" target="_blank">Browser support
for CSS selectors and pseudoelements</a>, plus examples of how to use each one</li>
<li><a href="https://css-tricks.com/using-flexbox/" target="_blank">Using Flexbox</a>
across different browsers</li>
</ul>
</div>
<div class="col-md-4 wp5 delay-05s">
<div class="icon">
<i class="fa fa-ellipsis-h shadow"></i>
</div>
<h2>ES6 JavaScript</h2>
<ul>
<li><a href="https://github.com/anythingcodes/gdi-es6-javascript/tree/gh-pages/resources/cheatsheets"
target="_blank">All ES6 Course Cheatsheets</a></li>
<li><a href="https://github.com/ReactTraining/react-subjects/blob/master/JavaScriptPrimer.md#let-and-const"
target="_blank">JavaScript Primer for React</a>, with some handy ES6 tricks</li>
<li><a href="https://gist.github.com/smcashman/aee5210473c37ef49817cbe28ef73b10" target="_blank">Gist
of ES6 Resources</a></li>
<li><a href="http://youmightnotneedjquery.com/" target="_blank">You Might Not Need
jQuery</a></li>
<li><a href="https://github.com/oneuijs/You-Dont-Need-jQuery" target="_blank">oneuijs/You-Dont-Need-jQuery</a></li>
<li><a href="https://plainjs.com/" target="_blank">plainJS</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="resources-wrapper">
<div class="col-md-6 wp5 delay-05s">
<div class="icon">
<i class="fa fa-laptop shadow"></i>
</div>
<h2>Developer Tools</h2>
<ul>
<li><a href="http://apps.workflower.fi/css-cheats/?name=flexbox" target="_blank">Flexbox
Cheatsheet</a></li>
<li><a href="http://codepen.io/" target="_blank">CodePen</a> and <a href="http://plnkr.co/edit/?p=preview"
target="_blank">Plunkr</a>, for previewing code</li>
<li><a href="http://html-ipsum.com/" target="_blank">HTML Ipsum</a>, <a href="http://www.lipsum.com/"
target="_blank">LipSum</a>, and <a href="http://www.fillerati.com/" target="_blank">Fillerati</a>
for placeholder <em>lorem ipsum</em> content</li>
<li><a href="http://lorempixel.com" target="_blank">Lorem Pixel</a>, <a href="http://placehold.it"
target="_blank">Placehold.It</a>, and <a href="http://placekitten.com" target="_blank">PlaceKitten</a>
for placeholder images</li>
<li><a href="http://www.freeformatter.com/html-formatter.html#ad-output" target="_blank">HTML
Beautifier</a>, for quickly organizing HTML</li>
<li><a href="http://colours.neilorangepeel.com/" target="_blank">Colours</a>, a list of
CSS color names</li>
<li><a href="https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en"
target="_blank">ColorPick EyeDropper</a>, a Chrome extension for finding the
color of something on any webpage</li>
<li>W3C's <a href="https://validator.w3.org/" target="_blank">HTML validator</a> and <a
href="https://jigsaw.w3.org/css-validator/" target="_blank">CSS validator</a></li>
<li><a href="http://csscompressor.com/" target="_blank">CSS Compressor</a> for
minifying/compressing CSS (or unminifying/decompressing it)</li>
</ul>
</div>
<div class="col-md-6 wp5 delay-05s">
<div class="icon">
<i class="fa fa-rocket shadow"></i>
</div>
<h2>Inspiration</h2>
<ul>
<li><a href="http://tympanus.net/codrops/" target="_blank">Codrops</a> - Tutorials,
templates, CSS experiments, oh my!</li>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a>, a
front end developer blog with an email newsletter. They also publish books.</li>
<li><a href="http://codepen.io/" target="_blank">CodePen</a>, for viewing others'
creative CSS and HTML experiments</li>
<li><a href="http://sidebar.io/" target="_blank">Sidebar</a>, a daily design-oriented
newsletter with some HTML/CSS tips</li>
</ul>
</div>
<div class="col-md-4 wp5 delay-05s"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
<section class="contact text-center section-padding" id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="arrow">Get In Touch</h1>
</div>
</div>
<div class="row">
<div class="contact-wrapper">
<div class="col-md-4 wp2 delay-05s animated fadeInUp col-md-offset-4">
<img src="img/liz.png" alt="Liz Shaw">
<h2>Liz Shaw</h2>
<div class="social">
<ul class="social-buttons">
<li><a href="mailto:liz@hubspot.com" class="social-btn"><i class="fa fa-envelope"></i></a></li>
<li><a href="http://linkedin.com/in/lizhelene" target="_blank" class="social-btn"><i
class="fa fa-linkedin"></i></a></li>
<li><a href="http://github.com/anythingcodes" target="_blank" class="social-btn"><i
class="fa fa-github-alt"></i></a></li>
<li><a href="http://stackoverflow.com/users/5183746/anythingcodes?tab=profile" target="_blank"
class="social-btn"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="http://twitter.com/anythingcodes" target="_blank" class="social-btn"><i
class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="supplemental">
<li>Like this site? <a href="https://github.com/anythingcodes/anythingcodes.github.io" target="_blank">Download
it.</a></li>
</ul>
</div>
<div class="col-md-6 credit">
<p>Developed by <a href="http://linkedin.com/in/lizhelene" target="_blank">Liz Shaw</a>
</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/modernizr.js"></script>
</body>
</html>