-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
69 lines (49 loc) · 2.74 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
<!doctype html>
<head>
<title>Curriculum — JavaScript for web pages</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<h1>Curriculum: JavaScript for web pages</h1>
<p><a href="index_de.html">Auf Deutsch »</a></p>
<p><strong><em>Please note: The curriculum is a bit outdated as it contains animations implemented with JavaScript that would rather be implemented with CSS today. It used to be part 2 (day 2) of the <a href="http://opentechschool.github.io/js-beginners-1">JavaScript for absolute beginners workshop</a> but is not actively being used any more.</em></strong></p>
<p>The internet is powered with magic, or — as we like to call it —
JavaScript.</p>
<p>Today, our goal is to learn how JavaScript can create and edit the
content and appearance of a web page. When we use our awesome
JavaScript power to change the content or its appearance, we can make
text, shapes and pictures appear, disappear and move around. The
content is HTML, and the appearance is described in CSS.</p>
<aside><p>Nerdy details: HTML stands for HyperText Markup Language and
CSS stands for Cascading Style Sheets, but no one ever says that, and
the long names don’t really matter. Dirty trick: make one of the
coaches try and explain what those names mean.</p></aside>
<h2>Tools</h2>
<p>We will be using the Google Chrome browser again today, to take
advantage of the console again, but today we will also be using more
features of the Developer Tools.</p>
<p>Yesterday, we wrote all our programs directly in the web browser.
Today, we will be writing a program using a text editor.</p>
<p>Code is just text, so any text editor will work, but most
programmers prefer to use a code editor. Code editors have extra
features, and make coding a lot more fun.</p>
<p>We will be using Sublime Text 2. If you don’t already have it
installed, get it here:</p>
<ul>
<li><a href="http://www.sublimetext.com/2" target=_blank>Download Sublime Text 2</a></li>
</ul>
<h2>Project</h2>
<p>Over the course of the day, we will create a photo gallery. But
before we do, we will play around with HTML and CSS so you can
see how combined they make The Whole Internet, pretty much.<p>
<h2>Resources</h2>
<p>Keep your <a href="http://marijnhaverbeke.nl/js-cheatsheet.html"
target=_blank>JavaScript cheat sheet</a> open in a tab in your
browser, and use it to look up the precise notation for something
whenever you forget.</p>
<p>Our coaches are also always happy to answer questions. If at any
point you feel confused or stuck, get our attention, and we will do
our very best to un-confuse you.</p>
<h2>Let’s go</h2>
<p><a href="page1.html">→ To the first page</a>.</p>