-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
335 lines (317 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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- SCRIPTS -->
<script src="./script.js"></script>
<script src="https://kit.fontawesome.com/1a8bde6767.js" crossorigin="anonymous"></script>
<!-- TITLE -->
<title>Mr Ashley Ball</title>
</head>
<body>
<!-- HERO SECTION -->
<section class="hero is-info is-large">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item icon-text">
<span class="navbar-burger" data-target="navbarMenuHeroB">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroB" class="navbar-menu">
<div class="navbar-end">
<a href="https://mrash.co/" target="_blank" class="navbar-item">
By Ash
</a>
<span class="navbar-item">
<a href="https://www.hoppersroppers.org/" target="_blank" class="button is-info is-inverted">
<span class="icon">
<i class="fas fa-external-link-alt"></i>
</span>
<span><strong>Roppers</strong></span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<!--HERO BODY -->
<div class="hero-body">
<div class="container has-text-centered">
<p class="title is-1">
Roppers Computing Fundamentals
</p>
<p class="subtitle is-3">
Building a website in <span class="tag"> HTML</span> <span class="tag"> CSS</span> and <span
class="tag">JS</span>
</p>
<p class="is-light">A simple guide for fellow students from the Intro Computing Course.</p>
</div>
</div>
<!-- HERO FOOTER -->
<div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth">
<div class="container">
<ul>
<li>
<a href="#setup">
<span class="icon">
<i class="fas fa-home"></i>
</span>Setup</a>
</li>
<li>
<a href="#github">
<span class="icon">
<i class="fab fa-github"></i>
</span>GitHub</a>
</li>
<li>
<a href="#html">
<span class="icon">
<i class="fab fa-html5"></i>
</span>HTML</a>
</li>
<li>
<a href="#css">
<span class="icon">
<i class="fab fa-css3"></i>
</span>CSS</a>
</li>
<li>
<a href="#js">
<span class="icon">
<i class="fab fa-js"></i>
</span>JS</a>
</li>
<!-- <li>
<a href="#goodbye">
<span class="icon">
<i class="far fa-hand-spock"></i>
</span>Goodbye</a>
</li> -->
</ul>
</div>
</nav>
</div>
</section>
<!-- SETUP SECTION -->
<section id="setup" class="section is-medium">
<div class="container">
<span class="icon title is-4 "><i class="fas fa-home"></i></span>
<h1 class="title is-2">Setting Up Local Enviroment</h1>
<h2 class="subtitle is-4">
Choosing your local enviroment including IDE (code editor) and your file structure.
</h2>
<div class="columns">
<div class="column">
<span class="tag is-info">1. </span> Download VS Code and install it.<br> Go <a class="is-white"
href="https://code.visualstudio.com/" target="_blank">here</a>, this is your code editor or IDE as
it's simple to start with and robust enough to use
professionally.
</div>
<div class="column">
<span class="tag is-info">2. </span> Create folder structure.<br>
Either via folder explorer or VS Code, create a new folder called <span class="tag">Roppers - Build A
Website</span> and three files: <span class="tag">index.html</span> <span class="tag">styles.css</span>
<span class="tag">scripts.js</span>
</div>
<div class="column">
<span class="tag is-info">3.</span> Open code inside VS Code.<br>
Right click a blank space inside the new folder and select the <span class="tag">Open With Code</span> option.
</div>
</div>
<div class="columns">
<div class="column is-half">
<h3 class="subtitle is-5">Here's a list of <a
href="https://code.visualstudio.com/learn/get-started/extensions" target="_blank">Extensions</a> to
install:</h3>
<div class="tags">
<span class="tag">
<a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" target="_blank">1)
Beauitfy</a></span>
<span class="tag"><a
href="https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github"
target="_blank">2) GitHub Pull Requests and Issues</a></span>
<span class="tag"><a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer"
target="_blank">3) Live Server</a></span>
<span class="tag"><a
href="https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete"
target="_blank">4) Font Awesome Auto-complete & Preview</a></span>
</div>
</div>
</div>
</div>
</section>
<!-- GITHUB SECTION -->
<section id="github" class="section is-medium bg-lightgrey">
<div class="container">
<span class="icon title is-4 "><i class="fab fa-github"></i></span>
<h1 class="title is-2">Let's Integrate With GitHub</h1>
<h2 class="subtitle is-4">
In a few clicks, we'll have the most popular version control software ready to rock.
</h2>
<div class="columns">
<div class="column"><span class="tag is-info">1.</span> Create an account.<br>
Go to <a href="https://github.com">GitHub</a> and create your account and don't forget to verify email.</div>
<div class="column"><span class="tag is-info">2.</span> Create first repoisitory.<br>
In VS Code, on the right menu, find the <span class="tag">Source Control</span> and you'll see <span
class="tag">Create
Repoisitory</span>.</div>
<div class="column"><span class="tag is-info">3.</span> Add README.md file<br>
On the <span class="tag">Explorer</span> menu, create a new file and call it <span
class="tag">README.md</span>.</div>
<div class="column"><span class="tag is-info">4.</span> Commit and Push Changes. <br>
Now back to <span class="tag">Source Control</span> and write a simple <span class="tag">commit</span>
message, then under three dot menu select <span class="tag">push</span>.</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-half">
<h4 class="subtitle is-5">Learn <a href="https://lab.github.com/githubtraining/introduction-to-github"
target="_blank">GitHub</a> and don't forget to setup <a href="https://pages.github.com/"
target="_blank">GitHub
Pages.</a></h4>
</div>
</div>
</div>
</section>
<!-- HTML SECTION -->
<section id="html" class="section is-medium">
<div class="container">
<span class="icon title is-4 "><i class="fab fa-html5"></i></span>
<h1 class="title is-2">HTML: The Backbone.</h1>
<h2 class="subtitle is-4">
Let's setup the structure of the website.
</h2>
<div class="columns">
<div class="column"><span class="tag is-info">1. </span> Write a plan. <br>
Write out a small plan for your website. Even if it's a dot point list, include header, sections and footer.
</div>
<div class="column"><span class="tag is-info">2.</span> Using <a href="https://www.emmet.io/"
target="_blank">Emmet.</a> <br>
Emmet makes coding a lot faster and easier, it comes preinstalled with VS Code. Open <span
class="tag">index.html</span> and simply enter <span class="tag">!</span> and hit enter.</div>
<div class="column"><span class="tag is-info">3.</span> Link css and js files. <br>
Within the <span class="tag">head</span> tags, create a link to <span class="tag">styles.css</span> and <span
class="tag">script.js</span> files. For <a
href="https://dev.to/pauljwil/linking-to-css-and-javascript-in-an-html-file-306m" target="_blank">more
help</a>.</div>
</div>
<div class="columns">
<div class="column"><span class="tag is-info">4.</span> Link third-party css files. <br>
We'll be using <a href="https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use"
target="_blank">Font Awesome</a> and <a href="https://bulma.io/" target="_blank">Bulma</a> to style the web
page. See their docs to learn how to link files.</div>
<div class="column"><span class="tag is-info">5. </span> Create simple structure. <br>
Using your plan, in the <span class="tag">body</span> section, create the <span class="tag">section</span>
tags needed.</div>
<div class="column"></div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-half">
<h4 class="subtitle is-5">Learn HTML at <a href="https://www.w3schools.com/html/default.asp"
target="_blank">W3Schools</a>.</h4>
</div>
</div>
</div>
</section>
<!-- CSS SECTION -->
<section id="css" class="section is-medium bg-lightgrey">
<div class="container">
<span class="icon title is-4 "><i class="fab fa-css3"></i></span>
<h1 class="title is-2">CSS: The Flare.</h1>
<h2 class="subtitle is-4">
Let's make it pretty and give it some style.
</h2>
<div class="columns">
<div class="column"><span class="tag is-info">1.</span> Using Bulma. <br>
There's lot of different frameworks out there, they make styling a lot easier. Use the <a
href="https://bulma.io/documentation/overview/" target="_blank">Bulma Docs</a> to get started.</div>
<div class="column"><span class="tag is-info">2.</span> Add Bulma classes. <br>
Using Bulma Docs, add classes and sections to create desired look and structure. Take the time to learn the
class names.</div>
<div class="column"><span class="tag is-info">3.</span> Add custom classes. <br>
Edit the <span class="tag">styles.css</span> to create custom styling for sections.</div>
<div class="column"><span class="tag is-info">4.</span> Speed up the process. <br>
Continue using Emmet to create more sections with classes e.g. <span
class="tag">div.columns.div.column*3span.tag-info</span></div>
</div>
<div class="container">
<div class="columns">
<div class="column is-half">
<h4 class="subtitle is-5">Learn CSS at <a href="https://www.w3schools.com/css/default.asp"
target="_blank">W3Schools</a>.</h4>
</div>
</div>
</div>
</section>
<!-- JS SECTION -->
<section id="js" class="section is-medium">
<div class="container">
<span class="icon title is-4 "><i class="fab fa-js"></i></span>
<h1 class="title is-2">JS: The Special Sauce.</h1>
<h2 class="subtitle is-4">
</h2>
<div class="columns">
<div class="column"><span class="tag is-info">1.</span> Copy onlick script. <br>
Go <a href="https://www.w3schools.com/jsref/event_onclick.asp" target="_blank">here</a> and copy the script
code to your <span class="tag">script.js</span>.</div>
<div class="column"><span class="tag is-info">2.</span> Add onlick html. <br>
Add <span class="tag">button</span> and <span class="tag">p</span> syntax like in the example.</div>
<div class="column"><span class="tag is-info">3.</span> Confirm it's working.<br>
If everything is setup correctly, yours should do the same as the following:
<button onclick="myFunction()">Click me</button><span id="demo"></span>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-half">
<h4 class="subtitle is-5">Learn JS at <a href="https://www.w3schools.com/js/default.asp"
target="_blank">W3Schools</a>.</h4>
</div>
</div>
</div>
</div>
</section>
<!-- GOODBYE SECTION -->
<!-- <section id="goodbye" class="section is-medium bg-lightgrey ">
<div class="container">
<span class="icon title is-4 "><i class="fab fa-github"></i></span>
<h1 class="title is-2">GoodBye</h1>
<h2 class="subtitle is-4">
In a few clicks, we'll have the most popular version control software ready to rock.
</h2>
<div class="columns">
<div class="column"><span class="tag is-info">1.</span></div>
<div class="column"><span class="tag is-info">2.</span></div>
<div class="column"><span class="tag is-info">3.</span></div>
<div class="column"><span class="tag is-info">4.</span></div>
</div>
</div>
</section> -->
<footer class="footer">
<div class="content has-text-centered">
<p>
Project by <a href="https://mrash.co" target="_blank">Mr Ashley Ball</a>. <br> From <a href="https://hoppersroppers.org/" target="_blank">Roppers Academy</a>.
</p>
<a href="https://bulma.io" target="_blank">
<img src="https://bulma.io/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a>
</div>
</footer>
</body>
</html>