-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (194 loc) · 10.1 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
<!DOCTYPE HTML><html><head>
<title>Free Coding Lessons: Foundations of Web Design</title><meta charset="utf8"><link rel="stylesheet" href="/_modulo/modulo-build-xxjpf8n3.css" /></head><body>
<div class="Page-container Page--landing">
<slot>
<div class="shiny-top">
<h1>Free Coding Lessons</h1>
<p><tt><a href="https://FreeCodingLessons.com">FreeCodingLessons.com | High Quality Learning Resources, Free Forever</a></tt></p>
<p class="intro-text">Learn to code by taking our free,
<strong>self-paced mini-bootcamp</strong> courses, or attend a free
<strong>online or local event</strong>.</p>
</div>
<div class="course-tile-wrapper">
<div class="course-tile">
<img alt="Foundations of Web Design" title="Foundations of Web Design" src="/static/images/foundations_logo_temp.png">
<div class="course-callout course-callout--highlight">
New to coding? <strong style="color: var(--bluey) !important">Start here!</strong>
</div>
<p>
<a class="Btn--callToAction" href="/foundations/" style="background-color: var(--bluey) !important">Start Now</a>
<label class="helper-text">
Full Mini-Bootcamp<br>
Build Websites<br>
10+ hours, <strong>no sign-up</strong>
</label>
</p>
</div>
<div class="course-tile">
<img alt="Ramping Up with Modulo logo" title="Ramping Up with Modulo" src="/static/images/modulo_ramping_up_notebook_logo_cropped.jpg" class="course-tile--shading">
<p>
<a class="Btn--callToAction" href="https://modulojs.org/tutorial/ramping-up/">Tutorial »</a>
<label class="helper-text">
Build Web Components<br>
Launch JAMStack Apps<br>
10+ hours, <strong>no sign-up</strong>
</label>
</p>
</div>
<div class="course-tile">
<img alt="Hack & Learn" title="Hack & Learn" src="/static/images/hack_and_learn.jpeg">
<h4>Hack & Learn</h4>
<div class="course-callout">
<img src="/static/images/california_small.png">
<strong>San Francisco Bay Area</strong>
</div>
<p>
<a class="Btn--callToAction" href="https://meetup.com/Hack-and-Learn/">Meet-Up »</a>
<label class="helper-text">
Attend our free in-person sessions in <strong>Oakland, California</strong>
</label>
</p>
</div>
</div>
<h3>Build your own website and begin your coding journey today!</h3>
<div class="wide-splash">
<h2>
<big>?</big><br>
Frequently<br>
Asked<br>
Questions
</h2>
<aside class="questions">
<h3>Why should I learn to code?</h3>
<p>I get asked this a lot. The typical answer is that designing
websites can be a fun and rewarding experience, not to mention a
useful career skill.
But I think a lot of people want to know what they can
<em>build</em>. Read on to learn about the potential for new
skills, and browse the designs you'll be building along the
way!</p>
<!--<h4>Project → <br />showcase</h4>-->
</aside>
<aside class="why-aside">
<div>
<h3>Create your own e-commerce store or business page.</h3>
<p>» Ever wish you could finally kiss your
sluggish <strong>Wix or Squarespace page</strong>
goodbye?</p>
<p>» Learn how to build storefront pages,
websites for local businesses, author profiles,
artist profiles, contracting firms, accounting firms,
and more. Learn to integrate with
<strong>Etsy</strong>, <strong>Shopify</strong>, and
others.</p>
</div>
<div>
<img src="/__screenshot/foundations/1.3/solutions/project_3.html.png">
<a href="/foundations/1.3/">1.3 - Project 3</a>
</div>
<div>
<img src="/__screenshot/foundations/3.1/solutions/sols4.html.png">
<a href="/foundations/3.1/">3.1 - Activity 4</a>
</div>
<div>
<h3>Indulge your creative side!</h3>
<p>» Want to finally <strong>ditch social
media</strong> and learn to express yourself directly on the web?</p>
<p>» Build band pages, artist profiles, personal pages,
artistic blogs and personal writing spots. Most
importantly, <strong>do it yourself</strong> so you
have 100% control.</p>
</div>
<div>
<img src="/__screenshot/foundations/1.2/solutions/solution4.html.png">
<a href="/foundations/1.3/">1.2 - Activity 4</a>
</div>
<div>
<img src="/__screenshot/foundations/1.3/solutions/project_4.html.png">
<a href="/foundations/1.3/">1.3 - Project 4</a>
</div>
<div>
<h3>Gain design chops and try a new career.</h3>
<p>» After completion, your new HTML and CSS skill will
equip you to look for contract work or even entry-level roles
in Web Content Publishing and Web Design
(<a href="https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm">US median salary: $78k</a>)</p>
<p>» Although salaried engineering positions (<a href="https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm">$109k/yr</a>)
require learning more advanced topics than found here,
<em>Foundations</em> introduces concepts such as
<em>Templating</em>, <em>Libraries</em>, <em>APIs</em>, and
<em>re-usable Web Components</em>, so it can be a good "prep
course" before continuing with a computer science or full stack
bootcamp program.</p>
</div>
<div>
<img src="/__screenshot/foundations/2.3/solutions/project1/shop.html.png">
<a href="/foundations/2.3/">2.3 - Project 1</a>
</div>
<div>
<img src="/__screenshot/foundations/1.3/solutions/project_1.html.png">
<a href="/foundations/1.3/">1.3 - Project 1</a>
</div>
</aside>
</div>
<div class="wide-splash">
<h2><big>?</big></h2>
<aside class="questions">
<h3>Who made <em>Foundations of Web Design</em>?</h3>
<p><em>Foundations of Web Design</em> was originally
developed by <a href="https://michaelb.org">Michael
B.</a>, an instructor at <a href="http://kickstartcoding.com/">Kickstart Coding</a>,
and creator of the <a href="https://modulojs.org/">Modulo.js mini-framework</a>.
</p><h3>Why is it free?</h3>
The curriculum is free forever because it's under a free license.
Read the letter from the instructor for the rationale!<p></p>
</aside>
<div style="background: WhiteSmoke; padding: 20px; font-family: serif; text-align: justify">
<p>Thanks for considering my course! Let me introduce why I created it.</p>
<p>For over seven years I have lead instruction and developed curriculum for
"coding bootcamp" training programs in the San Francisco Bay Area. Throughout
this time the instructors and students I worked with were frustrated at the
lack of high-quality, open access, no-nonsense coding curriculum. Instead,
search engine results turns up endless pages of content hidden behind paywalls,
cluttered with messy ads and flashy animations, and out-dated instructions that
slow down beginners trying to build websites or break into the tech industry.
The very worst part is that this "clutter" problem is the most acute at the
foundational stages of learning, making learning to code sometimes feel like
navigating a noisy, chaotic, carnival-like maze!</p>
<p>I designed <em>Foundations of Web Design</em> to fill in this gap. I want it
to be a fun, useful, and immediately useful web design course. Most
importantly, I am releasing it free forever under a free/libre open source
license. A dependable learning resource that's accessible to self-teach, while
teaching powerful skills that provide results in both work and personal
projects. I hope that both absolute beginners, and even intermediate learners
looking to fill in gaps, will be empowered by taking this course to build cool,
creative, expressive, modern, and useful websites and web applications. I can't
wait to see what you will all build based on this!</p>
<pre>See you in class!
- Michael</pre>
</div>
</div>
</slot>
</div>
<footer class="Page-footer">
© 2023 Michael Bethencourt
%
<a href="https://modulojs.org/" title="Made with Modulo.js">
A Modulo.js Course
</a>
%
<a href="https://kickstartcoding.com/" title="Hosted by Kickstart Coding">
In-person sessions by Kickstart Coding
</a>
</footer>
<script src="/_modulo/modulo-build-xxq3ede7.js"></script><script>window.moduloBuild && modulo.start(window.moduloBuild);
modulo.assets.require("configuration");
modulo.assets.require("library1_configuration");
modulo.assets.require("library_Page");
modulo.assets.require("library_LandingPage");
modulo.assets.require("library_TabCarousel");
modulo.assets.require("library1_Markdown");
modulo.assets.require("library1_SlideShow");
modulo.assets.require("library1_Slide");
modulo.assets.require("library1_LessonPage");
modulo.assets.require("library1_LessonNav");</script></body></html>