-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
79 lines (65 loc) · 3.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
<!doctype html>
<html>
<head>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>Hacker Challenge</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="help-section">
<div class="help-blurb">
<p>This is the help button. Click the ? if you need help finding the answer in normal mode.</p>
</div>
<a class="help-button">?</a>
</div>
<div class="main">
<section>
<h1>
<a href="/">Hacker Challenge</a>
</h1>
<p>Use your web inspector to hack your way through a series of challenges.</p>
<p>The web inspector is a hidden panel available in all web browsers that allows you to navigate through elements on a page and temporarily change them.</p>
<p>In Google Chrome, you can open your web inspector by right clicking in the browser window and clicking the last option, <strong>"Inspect"</strong>.</p>
</section>
<section>
<h2>Useful Inspector Tabs</h2>
<ul>
<li>
<p>Once open, you will immediately see the HTML for the page you're looking at. This is the <strong>"Elements"</strong> tab. Use this area to expand, collapse, and temporarily edit the HTML sections to have a look around.</p>
</li>
<li>
<p>Under <strong>"Elements"</strong>, on the right side, you will see a <em>Styles</em> panel. Use this area to see and temporarily edit the CSS styles on the page.</p>
</li>
<li>
<p>The next tab over is the <strong>"Console"</strong> tab. This shows the logs and errors of the JavaScript that's being rendered on the page. You will see validation, tips, and hints here.</p>
</li>
<li>
<p><strong>"Sources"</strong> is the next tab over. It'll tell you what files are being loaded into the browser for that page. Here you should see our HTML, JavaScript, and CSS.</p>
</li>
<li>
<p>If you skip over a few tabs, the last tab we will be using is the <strong>"Application"</strong> tab. Here we will be working with the <strong>"Local Storage"</strong> area, which shows any data that our website has saved to your browser.</p>
</li>
</ul>
</section>
<section>
<h2>Modes</h2>
<p>There are 2 modes of the hacker challenge.</p>
<ul>
<li>
The <strong>normal</strong> challenge mode provides <strong>optional</strong> hints. It has <strong>no timer</strong>.
</li>
<li>
The <strong>hard</strong> mode challenge provides <strong>no hints</strong>. It also <strong>has a timer</strong>, and you're limited to 60 minutes.
</li>
</ul>
</section>
<section>
<a class="button-style-link" href="challenges/normal/aardvark.html">Start <em>normal</em> challenge mode</a>
<a class="button-style-link" href="challenges/hard/aardvark.html">Start <em>hard</em> challenge mode</a>
</section>
</div>
<script src="scripts/index.js"></script>
<script src="scripts/global.js"></script>
</body>
</html>