-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
271 lines (242 loc) · 14.2 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
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Getting familiar with Arduino</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="/assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><a id = "title_link" href="/" ><img src="/images/logo.svg"/></a></span>
<h1>Getting familiar with Arduino</h1>
<p>Launch youself into the world of Arduino<br /> and Processing.</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#lessons">Lessons</a></li>
<li><a href="#aims">Aims</a></li>
<li><a href="#aboutLessons">Structure</a></li>
<li><a href="#references">References</a></li>
<!-- <li><a href="#cta">List of lessons</a></li> -->
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>What can you learn with this course?</h2>
</header>
<p>Welcome to our series of tutorials that will help get started on your journey through the incredible Arduino world. These introductory guides are intended for those of you who are looking into studying computer science, electrical
engineering or similar fields, as well as those curious about what the Arduino is and does. </p>
<p>You will learn <b>step-by-step</b> how to build some basic <b>circuits</b> and <b>program</b> the <b>Arduino</b> to control them.</p>
<!-- style="background-color: #3498db" -->
<ul class="actions">
<li><a href="/LED" class="button special" style="background-color: #e74c3c">First lesson</a></li>
</ul>
</div>
<span class="image"><img src="images/student.png" alt="" /></span>
</div>
</section>
<!-- First Section -->
<section id="lessons" class="main special">
<header class="major">
<h2>Lessons</h2>
</header>
<ul class="features">
<li>
<span class="icon major style1 fa-lightbulb-o"></span>
<h3>LED</h3>
<p>Blink a LED</p>
<a href="/LED" class="button special fit" style="background-color: #3498db">Learn!</a>
</li>
<li>
<span class="icon major style2 fa-cogs"></span>
<h3>Servo</h3>
<p>Turn a servo motor</p>
<a href="/Servo" class="button special fit" style="background-color: #3498db">Learn!</a>
</li>
<li>
<span class="icon major style3 fa-wifi"></span>
<h3>Ultrasonic</h3>
<p>Measure distance with sound</p>
<a href="/Ultrasonic" class="button special fit" style="background-color: #3498db">Learn!</a>
</li>
<li>
<span class="icon major style4 fa-send"></span>
<h3>Serial</h3>
<p>Send data to computer</p>
<a href="/Serial" class="button special fit" style="background-color: #3498db">Learn!</a>
</li>
<li>
<span class="icon major style5 fa-diamond"></span>
<h3>Radar</h3>
<p>Combine knowledge to build a radar</p>
<a href="/Radar" class="button special fit" style="background-color: #3498db">Learn!</a>
</li>
</ul>
<!-- <footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer> -->
</section>
<section id="aims" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>Aims and Objectives</h2>
</header>
<p><b>Why learn Arduino?</b></p>
<ul>
<li>Many cool projects. Links: <a href="http://playground.arduino.cc/Projects/Ideas">one</a>, <a href="https://www.hackster.io/arduino/projects">two</a>.</li>
<li>Great introduction to electronics and programming</li>
</ul>
<p>This course is aimed at school students aged 15-18 with some prior programming experience who want to start using the Arduino platform or are looking into applying for computer science, electronics or similar fields as they would
get a general idea of what to expect from the course. The lessons provide an introduction to Arduino circuits and programming. We explain how to create a few basic projects and encourage the readers to build something creative
on top of the learned material. To build the projects, you will need an Arduino kit with some basic components (breadboard, jumper wires, ...). </p>
<p>We hope that the readers will be encouraged to learn more about these topics after completing this course. </p>
<p><i>STEM</i> stands for science, technology, engineering, and mathematics. STEM education enables innovation which leads to new products which improve our society and economy. The Arduino platform offers an introduction to the world
of engineering and programming. We hope that this course motivates some students to consider learning more about STEM subjects.</p>
</div>
</div>
</section>
<section id="aboutLessons" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>How are the lessons structured?</h2>
</header>
<p> The tutorials will be each split into 2 sections, the first one will help you set up the circuit and the second will teach you how to program the arduino board to control the elements of the circuit.</p>
<p>The exercise and challenge in the end is to build something on top of things learned in the lesson. You will have to find out yourself how to do certain things.</p>
<p>You should have a basic understanding of programming concepts before you start, so if you are very new to the world of programming, we recommend you follow the following series:</p>
<ul>
<li><a href="http://www.learn-c.org" target="_blank">C language basics</a></li>
<li><a href="https://www.khanacademy.org/computing/computer-programming/programming" target="_blank">Drawing with programming</a></li>
</ul>
</div>
</div>
</section>
<section id="references" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>For those of you who want to learn more</h2>
</header>
<p>
The following section contains links and references for those of you who would like to expand your knowledge beyond what is contained in these tutorials. The references include the main pages for arduino and processing, some additional websites with electronics
tutorials as well as some videos for those of you who prefer learning through watching.
</p>
<ul>
<li><a href="https://www.arduino.cc" target="_blank">Arduino home page</a>: The official Arduino page that contains useful documentation and official resources</li>
<li><a href="https://processing.org" target="_blank">Processing home page</a>: The official Processing page that contains useful documentation and official resources</li>
<li><a href="http://www.instructables.com/tag/type-id/category-technology/channel-arduino/" target="_blank">Instructables</a>: Do it Yourself tutorials made by the community</li>
<li><a href="https://learn.sparkfun.com" target="_blank">Sparkfun</a>: General electronics and other Arduino text-based tutorials</li>
<li><a href="https://www.youtube.com/user/shiffman/playlists" target="_blank">Daniel Shiffman Youtube</a>: Great videos on processing and general programming</li>
<li><a href="https://www.youtube.com/playlist?list=PLGLfVvz_LVvTVx-OeaqONkqFVpXvFBNR- " target="_blank">Electronics Tutorials</a>: A series of videos on electronics by Derek Banas</li>
<li><a href="https://google.co.uk" target="_blank">Google</a>: Never forget the power of Google - it is the programmer's most powerful tool since many of the problems you will encounter will have been solved by someone else </li>
</ul>
</div>
</div>
</section>
<!-- Second Section -->
<!-- <section id="second" class="main special">
<header class="major">
<h2>Ipsum consequat</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br /> posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
</header>
<ul class="statistics">
<li class="style1">
<span class="icon fa-code-fork"></span>
<strong>5,120</strong> Etiam
</li>
<li class="style2">
<span class="icon fa-folder-open-o"></span>
<strong>8,192</strong> Magna
</li>
<li class="style3">
<span class="icon fa-signal"></span>
<strong>2,048</strong> Tempus
</li>
<li class="style4">
<span class="icon fa-laptop"></span>
<strong>4,096</strong> Aliquam
</li>
<li class="style5">
<span class="icon fa-diamond"></span>
<strong>1,024</strong> Nullam
</li>
</ul>
<p class="content">Nam elementum nisl et mi a commodo porttitor. Morbi sit amet nisl eu arcu faucibus hendrerit vel a risus. Nam a orci mi, elementum ac arcu sit amet, fermentum pellentesque et purus. Integer maximus varius lorem, sed convallis diam accumsan sed. Etiam
porttitor placerat sapien, sed eleifend a enim pulvinar faucibus semper quis ut arcu. Ut non nisl a mollis est efficitur vestibulum. Integer eget purus nec nulla mattis et accumsan ut magna libero. Morbi auctor iaculis porttitor. Sed ut magna ac
risus et hendrerit scelerisque. Praesent eleifend lacus in lectus aliquam porta. Cras eu ornare dui curabitur lacinia.</p>
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
</section> -->
<!-- Get Started -->
<!-- <section id="cta" class="main special">
<header class="major">
<h2>Congue imperdiet</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br /> posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
</header>
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button special">Get Started</a></li>
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
</section> -->
</div>
<!-- Footer -->
<footer id="footer">
<section>
<h2>About us</h2>
<p>Created by Nadim and David</p>
<ul class="actions">
<li><a href="/about" class="button">Learn More</a></li>
</ul>
</section>
<section>
<h2>Contact us</h2>
<dl class="alt">
<dt>Email</dt>
<dd><a href="#">[email protected]</a></dd>
<dd><a href="#">[email protected]</a></dd>
</dl>
<ul class="icons">
<!-- <li><a href="#" class="icon fa-github alt"><span class="label">GitHub</span></a></li> -->
</ul>
</section>
<p class="copyright">© N&D. <br> Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY.</a><br> Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>