-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
154 lines (153 loc) · 4.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RJK Textbook</title>
<script src="https://rjkerrison.co.uk/script/google-analytics.js"></script>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://rjkerrison.co.uk/styles/main.css" />
<link rel="stylesheet" href="https://rjkerrison.co.uk/styles/header.css" />
<script>
window.mainHeading = 'The RJK Textbook'
</script>
<script src="https://rjkerrison.co.uk/script/shared.js"></script>
</head>
<body>
<main>
<section>
<div class="section-inner">
<p>
This index is simple; I've spent a lot more time on the resources
below.
</p>
</div>
</section>
<section>
<h2>HTML Canvas</h2>
<div class="section-inner">
<div>
<h3>Pong</h3>
<p>
The guide through this arcade classic starts with
<a href="./games/pong-static-demo/index.html"
>a static Pong Example with HTML5 Canvas</a
>, following from which there are increasingly advanced stages of
a pong game, all the way to
<a href="./games/pong-playable-original/index.html"
>a playable Pong game</a
>.
</p>
</div>
<div>
<h3>Time</h3>
<p>
Dive into
<a href="./time/index.html">Time in JavaScript</a>
with this one-page introduction which looks at
<code>setTimeout</code>, <code>setInterval</code>, and building
stopwatches.
</p>
</div>
<div>
<h3>Special Effects</h3>
<p>
The
<a href="./canvas/prune/index.html">Loki "pruning" game</a> based
on the Marvel Studios TV series looks in depth at how complex
visual effects can be created in steps.
</p>
</div>
</div>
</section>
<section>
<h2>HTML Audio</h2>
<div class="section-inner">
<div>
<h3>
<a href="./audio/raptors/index.html"
>Learning HTML5 Audio with Velociraptors</a
>
</h3>
<p>
An introduction to the HTML5 audio element, featuring a memorable
dinosaur sound.
</p>
</div>
<div>
<h3>
<a href="./audio/controls/index.html"
>Learning how to create HTML5 Audio controls</a
>
</h3>
<p>
A more advanced guide to HTML5, looking at how to use the default
controls and provide custom functionality.
</p>
</div>
</div>
</section>
<section>
<h2>HTML Basics</h2>
<div class="section-inner">
<div>
<h3>
<a href="./intro">Intro to Code</a>
</h3>
<p>Resources for the IronHack WeCode day.</p>
</div>
<div>
<h3>
<a href="./semantic/non-semantic.html"
>Semantic and Non-Semantic HTML</a
>
</h3>
<p>
Two pages which look identical, but one is using
<a href="./semantic/semantic.html">semantic HTML</a> and the other
using <a href="./semantic/non-semantic.html">non-semantic HTML</a>
</p>
</div>
</div>
</section>
<section id="react">
<h2>
<a href="#react">React</a>
</h2>
<div class="section-inner">
<div>
<h3>
<a href="./react/">Starting with React</a>
</h3>
<p>
React is a frontend framework which speeds up the rate of
development for web applications with repeated components.
</p>
</div>
<div>
<h3>
<a href="./deployments/netlify/"
>Deploying your React project to Netlify</a
>
</h3>
<p>
When deploying a project with React JS, you need a step to build a
production-ready version of your project.
<a href="https://netlify.com/">Netlify</a> handles this step
automatically, making it a great way to host your React projects.
</p>
</div>
</div>
</section>
<section>
<div class="section-inner">
<div>
<p>Happy travels!</p>
<p>Robin</p>
</div>
</div>
</section>
</main>
</body>
</html>