-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
239 lines (226 loc) · 12.3 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
---
layout: default
title: "Web development tutorials & videos"
desc: "A complete and logical web development series of tutorials and videos for graphic designers."
priority: 1
hasCourseNav: true
---
{% include icons-topics.html %}
{% include course-nav.html %}
<header class="header header-home" role="banner">
<div class="grid grid-bottom wrapper gutter-1-2">
<div class="title-wrap unit [ xs-1 s-1 m-1-2 l-1-2 ]">
<svg viewBox="0 0 182 86" width="130" class="push-1-2">
<path fill="#d1fff5" stroke-width="0" d="M22.298 64.3V2H2.124v81.88h40.347V64.3H22.298z"/>
<path fill="#d1fff5" stroke-width="0" d="M84.242 2h-56.96v19.58h18.393v62.3h20.173v-62.3h18.394V2z"/>
<path fill="#d1fff5" stroke-width="0" d="M116.163 85.067c6.764 0 13.647-2.255 17.8-7.714 4.153 5.459 11.036 7.714 17.8 7.714 13.884 0 28.361-9.494 28.361-32.04V2h-20.173v51.027c0 9.493-3.204 12.46-7.951 12.46-4.746 0-7.95-2.967-7.95-12.46V2h-20.174v51.027c0 9.493-3.204 12.46-7.95 12.46-4.747 0-7.951-2.967-7.951-12.46V2H87.802v51.027c0 22.546 14.477 32.04 28.361 32.04z"/>
</svg>
<h1 class="title" tabindex="0">Learn the Web</h1>
</div>
<div class="blurb-wrap unit [ xs-1 s-1 m-1-2 l-1-2 ]">
<p class="blurb intro zetta push">Web development tutorials, videos <span title="and">&</span> code samples for graphic designers.</p>
<nav role="navigation">
<a class="btn btn-light exa" href="/topics/">
<i class="icon i-24 push-r-1-4"><svg><use xlink:href="#icon-nav"></use></svg></i>
<span class="icon-label">Explore the topics</span>
</a>
</nav>
</div>
</div>
</header>
<main role="main">
<section>
<div class="wrapper gutter-1-2 pad-t-2 pad-b-2 random">
<h2 class="exa" tabindex="0">Learning code doesn’t have to be confounding.</h2>
<p class="tera intro brand-dark"><strong>There are too many topics and too many tutorials online. It’s hard to figure you which are up-to-date and even harder to figure out what order to follow them.</strong></p>
<p class="tera intro push-0"><i>Learn the Web</i>, is a structured, curated, living guide to web development for graphic designers—presenting the information in a logical, targeted order that goes from a basic mobile-friendly webpage to a complex multi-screen interactive website.</p>
</div>
</section>
<hr>
<section>
<div class="wrapper gutter-1-2 pad-t pad-b-2 text-center">
<h2 class="visually-hidden">Video introduction</h2>
<div class="video-placeholder" data-video-id="c26Wbq99Ebw">
<a class="block embed embed-16by9" href="https://youtu.be/c26Wbq99Ebw" rel="external" aria-label="Press to watch a quick intro to Learn the Web">
<img class="embed-item" src="/images/channel-intro-video.jpg" alt="Press to watch a quick intro to Learn the Web">
<p class="video-intro font-alt tera text-center max-length">Watch a quick introduction to Learn the Web</p>
</a>
</div>
<div class="pad-t">
<a class="btn btn-light giga" href="/topics/">See all the videos & tutorials</a>
</div>
</div>
</section>
<section class="section-lightest">
<div class="gutter-1-2 pad-t-2 pad-b-2">
<h2 class="text-center exa" tabindex="0">Easy to follow.</h2>
<p class="text-center text-chunk">Start with the set up and work your way through the numbered courses, following the topic order. Finish with some ideas of what to learn next.</p>
<ol class="topics list-group-inline push-0">
<li class="push-1-2">
<a class="topic-heading pad-t-1-2 pad-b-1-2 gutter link-box link-box-no-mark" href="/courses/web-design-1/">
<i class="icon i-48 push-1-2">
<svg><use xlink:href="#icon-topic-1"/></svg>
</i>
<span class="mega topic-heading-text">Web Design 1</span>
</a>
</li>
<li class="push-1-2">
<a class="topic-heading pad-t-1-2 pad-b-1-2 gutter link-box link-box-no-mark" href="/courses/web-design-2/">
<i class="icon i-48 push-1-2">
<svg><use xlink:href="#icon-topic-2"/></svg>
</i>
<span class="mega topic-heading-text">Web Design 2</span>
</a>
</li>
</ol>
</div>
</section>
<section class="section-light">
<div class="wrapper grid gutter-1-2 pad-t-2 pad-b-2">
<div class="open unit [ xs-1 s-1 m-2-3 l-2-3 ]">
<h2 class="zetta" tabindex="0">Sometimes it’s fun & games!</h2>
<p>There are lots of activities, quizzes, exercises & games to test the knowledge you’ve learned—or even explore and master new tools.</p>
<a class="btn btn-ghost mega" href="/activities/">
<i class="icon i-24 push-r-1-4"><svg><use xlink:href="#icon-activities"></use></svg></i>
<span class="icon-label">See all the activities</span>
</a>
</div>
<div class="courses unit [ xs-1 s-1 m-1-3 l-1-3 ] pad-t-1-2">
<ol class="list-group text-left push-0">
<li class="push-r-1-2 push-1-4">
<a class="link-box link-box-no-mark icon-link" href="https://activities.learntheweb.courses/keyboard-commander/">
<img class="icon i-32 push-r-1-4" src="https://activities.learntheweb.courses/keyboard-commander/icon.svg" alt="">
<span class="icon-label">Keyboard Commander</span>
</a>
</li>
<li class="push-r-1-2 push-1-4">
<a class="link-box link-box-no-mark icon-link" href="https://activities.learntheweb.courses/dev-tool-dynamo/">
<img class="icon i-32 push-r-1-4" src="https://activities.learntheweb.courses/dev-tool-dynamo/icon.svg" alt="">
<span class="icon-label">Dev Tool Dynamo</span>
</a>
</li>
<li class="push-r-1-2 push-1-4">
<a class="link-box link-box-no-mark icon-link" href="https://activities.learntheweb.courses/ingenious-indentor/">
<img class="icon i-32 push-r-1-4" src="https://activities.learntheweb.courses/ingenious-indentor/icon.svg" alt="">
<span class="icon-label">Ingenious Indentor</span>
</a>
</li>
<li class="push-r-1-2 push">
<a class="link-box link-box-no-mark icon-link" href="https://activities.learntheweb.courses/url-explorer/">
<img class="icon i-32 push-r-1-4" src="https://activities.learntheweb.courses/url-explorer/icon.svg" alt="">
<span class="icon-label">URL Explorer</span>
</a>
</li>
<li class="push-r-1-2 push-1-4">
<a class="link-box link-box-no-mark icon-link" href="/activities/">
<span class="icon i-32 push-r-1-4 text-center"><i class="icon i-24"><svg><use xlink:href="#icon-activities"></use></svg></i></span>
<strong class="icon-label">And many more…</strong>
</a>
</li>
</ol>
</div>
</div>
</section>
<section class="section-muted">
<div class="wrapper grid gutter-1-2 pad-t-2 pad-b-2">
<div class="open unit [ xs-1 s-1 m-2-3 l-2-3 ]">
<h2 class="zetta" tabindex="0">The power of open.</h2>
<p class="mega"><strong>We believe in the power of open source—especially in education.</strong></p>
<p>All of our curriculum for the web development courses is freely available for any teacher to fork, modify & improve for their program.</p>
<a class="btn btn-ghost btn-muted mega" href="/courses/">
<i class="icon i-24 push-r-1-4"><svg><use xlink:href="#icon-courses"></use></svg></i>
<span class="icon-label">Explore all the courses</span>
</a>
</div>
<div class="courses unit [ xs-1 s-1 m-1-3 l-1-3 ] pad-t-1-2">
<hr class="courses-hr">
<h3 class="giga" tabindex="0">
<i class="icon courses-icon"><svg><use xlink:href="#icon-github"></use></svg></i>
Open curriculum
</h3>
<ol class="list-group-inline courses-list push-1-4">
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdesign-1" aria-label="Web Design 1 curriculum">
<span class="icon-label">Web Design 1</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdesign-2" aria-label="Web Design 2 curriculum">
<span class="icon-label">Web Design 2</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
</ol>
<div class="gutter pad-b-1-4">
<hr class="hr-medium push-1-2">
</div>
<ol class="list-group-inline courses-list push-1-4">
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-1" aria-label="Web Dev 1 curriculum">
<span class="icon-label">Web Dev 1</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-2" aria-label="Web Dev 2 curriculum">
<span class="icon-label">Web Dev 2</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-3/" aria-label="Web Dev 3 curriculum">
<span class="icon-label">Web Dev 3</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-4" aria-label="Web Dev 4 curriculum">
<span class="icon-label">Web Dev 4</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-5" aria-label="Web Dev 5 curriculum">
<span class="icon-label">Web Dev 5</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-6" aria-label="Web Dev 6 curriculum">
<span class="icon-label">Web Dev 6</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
</ol>
<div class="gutter pad-b-1-4">
<hr class="hr-medium push-1-2">
</div>
<ul class="list-group-inline courses-list push-0">
<li>
<a class="link-btn link-box link-box-no-mark" href="https://github.com/ltw-webdev-javascript" aria-label="JavaScript curriculum">
<span class="icon-label">JavaScript</span>
<i class="icon i-20 i-shift-right"><svg><use xlink:href="#icon-right"></use></svg></i>
</a>
</li>
</ul>
</div>
</div>
</section>
{% include markbot.html %}
<section class="section-dark">
<div class="wrapper grid grid-stretch gutter-1-4 pad-t-2 pad-b-2">
<div class="unit [ xs-1 s-2-3 m-2-3 l-2-3 ] gutter-1-4">
<h2 class="zetta" tabindex="0">Professor of the Open Web.</h2>
<p class="bio push-1-2">The tutorials, videos & curriculum were hand-crafted & curated by Thomas J Bradley, a web development professor.</p>
<ul class="">
<li><a href="http://thomasjbradley.ca/" rel="author">thomasjbradley.ca</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div class="photo unit [ xs-1 s-1-3 m-1-3 l-1-3 ] gutter-1-4" style="background-image:url(/images/thomasjbradley.jpg);">
<a class="photo-copyright" href="https://elizabethandjane.ca" rel="external">© elizabeth&jane photography</a>
</div>
</div>
</section>
</main>