-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (226 loc) · 12.6 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
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>ModernWeb Project #1</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,300italic,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="top-container">
<header class="clearfix">
<h1 class="header-title"><a href="#">The Factory</a></h1>
<nav class="header-nav">
<ul class="header-nav-list">
<li><a href="#">Description</a></li>
<li><a href="#">colearners</a></li>
<li><a href="#">instructor</a></li>
<li><a href="#">sign up</a></li>
</ul>
</nav>
</header>
<section>
<h1 class="banner-title">Modern Web</h1>
<p class="banner-text">
Starting <time datetime="2015-09-14 18:00"><abbr title="September">Sept.</abbr> 2015</time>
</p>
<i class="fa fa-code code-icon"></i>
</section>
</div>
<section class="intro clearfix">
<p class="intro-text">HTML and CSS are only part of the picture. The modern front-end developer will also need to be versed in version control, task automators, preprocessors, frameworks, the command line, and more.</p>
<h1 class="goals-header">Course Goals</h1>
<ul class="goals-list">
<li>
<h2 class="goals-list-subheader">Semantic HTML</h2>
<p class="goals-list-text">You'll learn how to structure your pages using the minimum elements necessary. With an eye on semantics, you'll also learn how new HTML5 elements describe a page's structure more clearly and concisely to the browser and assistive technologies.</p>
</li>
<li>
<h2 class="goals-list-subheader">CSS</h2>
<p class="goals-list-text">CSS3 and modern browsers have given us a whole new set of tools. You'll learn some best practices for writing CSS and how to mindfully take advantage of new properties to create beautiful layouts.</p>
</li>
<li>
<h2 class="goals-list-subheader">SASS</h2>
<p class="goals-list-text">You'll learn why front-end developers love CSS preproccesors like SASS. By extending CSS with familiar programming mainstays like variables, functions, and equations, SASS has reinvented the workflow of writing CSS.</p>
</li>
<li>
<h2 class="goals-list-subheader">Responsive Design</h2>
<p class="goals-list-text">The goal of responsive design is to provide the best experience on every device. We'll discuss the best way to set breakpoints and how to make sure your images look great and load fast.</p>
</li>
<li>
<h2 class="goals-list-subheader">Javascript / jQuery</h2>
<p class="goals-list-text">You'll learn how javascript and jquery can provide necessary interaction for your sites and what frameworks and libraries are essential tools for the modern front-end developer.</p>
</li>
<li>
<h2 class="goals-list-subheader">Version Control & Task Automators</h2>
<p class="goals-list-text">Get up and running with Git. You'll learn how to integrate version control into your workflow and how to contribute to a code repository. You'll also learn the power of task automators.</p>
</li>
</ul>
</section>
<section class="colearners clearfix">
<h1 class="colearners-header">Meet the Colearners</h1>
<ul class="colearners-list">
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Adam Osman" />
<h2 class="colearner-name">Adam Osman</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Amelie MacDonald" />
<h2 class="colearner-name">Amelie MacDonald</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Andrew Bentzen" />
<h2 class="colearner-name">Andrew Bentzen</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Brent Forwood" />
<h2 class="colearner-name">Brent Forwood</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Chris Hashley" />
<h2 class="colearner-name">Chris Hashley</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Frances Close" />
<h2 class="colearner-name">Frances Close</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Jon Neill" />
<h2 class="colearner-name">Jon Neill</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Leanna Pelham" />
<h2 class="colearner-name">Leanna Pelham</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Pam Henson" />
<h2 class="colearner-name">Pam Henson</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Sam Scholtens" />
<h2 class="colearner-name">Sam Scholtens</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Sarah Sipple" />
<h2 class="colearner-name">Sarah Sipple</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
<li>
<img src="http://jeremyabrahams.github.io/mw-project-1/img/colearner-f1.jpg" alt="A photo of Tyler Wayner" />
<h2 class="colearner-name">Tyler Wayner</h2>
<ul class="social-icons">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="linkedin" href="#">LinkedIn</a></li>
</ul>
</li>
</ul>
</section>
<article class="instructor clearfix">
<img src="" alt="A photo of Jeremy Abrahams" />
<h1 class="instructor-header">Meet the Instructor</h1>
<h2 class="instructor-name">Jeremy Abrahams</h2>
<p class="instructor-company">Mighty in the Midwest</p>
<p class="instructor-description">Design and Front-End Development are a huge part of my life. Some of my other passions include music, my record collection, typography, UX, local craft beer and food, and most of all, my wife. I'm a previous coLearning graduate and full-time developer
at Mighty.</p>
</article>
<figure class="blockquote">
<blockquote>
<p class="quote">"The ability to learn in-person from an expert instructor as well as work alonside other peers in the area is invaluable."</p>
</blockquote>
<figcaption class="quoted">Adam Delong <span class="quoted-details">coLearner and graduate of <a class="quoted-details-link" href="#">Intro to Ruby</a></span></figcaption>
</figure>
<div class="footer-container">
<section class="course-details">
<h1 class="course-details-header">Course Details</h1>
<a class="signup-btn" href="#">Sign Up</a>
<p class="course-details-date">Sept 14-Nov 30th
<span class="course-details-time">Every Mon 6pm - 8:30pm</span></p>
<dl>
<dt>Orientation:</dt>
<dd>Sept 9th</dd>
<dt>Graduation:</dt>
<dd>Dec 9th</dd>
<dt class="class-size">Class size:</dt>
<dd class="class-size">20 students</dd>
<dt>Cost:</dt>
<dd>$800</dd>
</dl>
</section>
<footer class="footer">
<h1 class="footer-title">The Factory</h1>
<p class="footer-address">38 Fulton S. West, Suite 400 <span class="footer-address-2">Grand Rapids, MI 49503</span></p>
</footer>
</div>
</body>
</html>