Skip to content

Commit 28e2943

Browse files
rachelandrewrachelandrew
committed
Added new getting started examples
1 parent f76857a commit 28e2943

File tree

3 files changed

+212
-0
lines changed

3 files changed

+212
-0
lines changed

‎learn/getting-started/started1.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Unstyled example</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
9+
10+
<style class="editable">
11+
h1 {
12+
13+
}
14+
15+
p {
16+
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<h1>I am a level one heading</h1>
24+
25+
<p>This is a paragraph of text. In the text is a <span>span element</span>
26+
and also a <a href="http://example.com">link</a>.</p>
27+
28+
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
29+
30+
<ul>
31+
<li>Item one</li>
32+
<li>Item two</li>
33+
<li>Item <em>three</em></li>
34+
</ul>
35+
</section>
36+
37+
<textarea class="playable playable-css" style="height: 160px;">
38+
h1 {
39+
40+
}
41+
42+
p {
43+
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 250px;">
48+
<h1>I am a level one heading</h1>
49+
50+
<p>This is a paragraph of text. In the text is a <span>span element</span>
51+
and also a <a href="http://example.com">link</a>.</p>
52+
53+
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
54+
55+
<ul>
56+
<li>Item one</li>
57+
<li>Item two</li>
58+
<li>Item <em>three</em></li>
59+
</ul>
60+
</textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset">
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
67+
68+
</html>

‎learn/getting-started/started2.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Unstyled example</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
9+
10+
<style class="editable">
11+
li em {
12+
color: rebeccapurple;
13+
}
14+
15+
h1 + p {
16+
font-size: 200%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<h1>I am a level one heading</h1>
24+
25+
<p>This is a paragraph of text. In the text is a <span>span element</span>
26+
and also a <a href="http://example.com">link</a>.</p>
27+
28+
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
29+
30+
<ul>
31+
<li>Item one</li>
32+
<li>Item two</li>
33+
<li>Item <em>three</em></li>
34+
</ul>
35+
</section>
36+
37+
<textarea class="playable playable-css" style="height: 160px;">
38+
li em {
39+
color: rebeccapurple;
40+
}
41+
42+
h1 + p {
43+
font-size: 200%;
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 250px;">
48+
<h1>I am a level one heading</h1>
49+
50+
<p>This is a paragraph of text. In the text is a <span>span element</span>
51+
and also a <a href="http://example.com">link</a>.</p>
52+
53+
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
54+
55+
<ul>
56+
<li>Item one</li>
57+
<li>Item two</li>
58+
<li>Item <em>three</em></li>
59+
</ul>
60+
</textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset">
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
67+
68+
</html>

‎learn/getting-started/started3.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Unstyled example</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
9+
10+
<style class="editable">
11+
a:link {
12+
color: pink;
13+
}
14+
15+
a:visited {
16+
color: green;
17+
}
18+
19+
a:hover {
20+
text-decoration: none;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<section class="preview">
27+
<h1>I am a level one heading</h1>
28+
29+
<p>This is a paragraph of text. In the text is a <span>span element</span>
30+
and also a <a href="http://example.com">link</a>.</p>
31+
32+
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
33+
34+
<ul>
35+
<li>Item one</li>
36+
<li>Item two</li>
37+
<li>Item <em>three</em></li>
38+
</ul>
39+
</section>
40+
41+
<textarea class="playable playable-css" style="height: 200px;">
42+
a:link {
43+
color: pink;
44+
}
45+
46+
a:visited {
47+
color: green;
48+
}
49+
50+
a:hover {
51+
text-decoration: none;
52+
}
53+
</textarea>
54+
55+
<textarea class="playable playable-html" style="height: 250px;">
56+
<h1>I am a level one heading</h1>
57+
58+
<p>This is a paragraph of text. In the text is a <span>span element</span>
59+
and also a <a href="http://example.com">link</a>.</p>
60+
61+
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
62+
63+
<ul>
64+
<li>Item one</li>
65+
<li>Item two</li>
66+
<li>Item <em>three</em></li>
67+
</ul>
68+
</textarea>
69+
70+
<div class="playable-buttons">
71+
<input id="reset" type="button" value="Reset">
72+
</div>
73+
</body>
74+
<script src="../playable.js"></script>
75+
76+
</html>

0 commit comments

Comments
 (0)