forked from FrontendMasters/learning-roadmap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (161 loc) · 7.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="../_css/reset.css" />
<link rel="stylesheet" href="../_css/styles.css" />
<link rel="stylesheet" href="../_css/prism.css" />
<script src="../_js/prism.js"></script>
<title>Web Developer Tools Learning Resources - Front-End Developer Learning Roadmap</title>
</head>
<body>
<div id="menu">
<a id="backToRoadMapLink" href="/">← Front-End Developer Learning Roadmap</a>
<div id="toc"></div>
</div>
<div id="panel">
<div id="menuButton">|||</div>
<div id="betaHeader"></div>
<div id="bookPadding">
<h1>Web Developer Tools</h1>
<section class="attribution">
<p style="margin-top: 0px">
Written by
<a href="http://codylindley.com/" rel="nofollow">Cody Lindley</a>
<span id="lastMod" style="display: none">updated <span id="lastModDate"></span></span>
</p>
<h4>
<a href="https://frontendmasters.com/guides/learning-roadmap/">The Front-End Developer Roadmap</a> from
<a href="https://frontendmasters.com/">Frontend Masters</a> - Advance your skills with in-depth, modern front-end engineering courses.
</h4>
</section>
<script>
if (document.lastModified) {
document.getElementById('lastMod').style.display = 'inline';
document.getElementById('lastModDate').innerText = document.lastModified.split(' ')[0];
}
</script>
<hr />
<p><strong>Overview:</strong></p>
<p>Learning resources and tools.</p>
<!-- <hr />
<p><strong>Definitions:</strong></p>
<dl>
<dt>
Web Page
</dt>
<dd>
A document with a .html extensions that can be display in a web browser. This file can be loaded into a web browser from you local
computer or it can be sent over the internet to a web browsers using HTTP. Web pages can link to other web pages. Web pages typically
display a text, images, videos, audio, and graphical user interfaces.
</dd>
<dt>
Website
</dt>
<dd>
A group of web pages linked to each other by design.
</dd>
<dt>
Web Server
</dt>
<dd>
Aka, an "HTTP server". A device on the internet (a computer) setup to host and server web pages to other devices (computers, phones,
etc.) that request web pages using HTTP. A web server can server static files as is or dynamic files that are built upon requesting,
typically holding data from a database.
</dd>
</dl> -->
<hr />
<p><strong>Contribute content, suggestions, and fixes on github</strong>:</p>
<p>
<a href="https://github.com/FrontendMasters/learning-roadmap">https://github.com/FrontendMasters/learning-roadmap</a>
</p>
<hr />
<div id="chapter1" class="chapter">
<h2>Learning Resources</h2>
<ul>
<li>
<a href="https://frontendmasters.com/courses/chrome-dev-tools-v2/" target="_blank">Mastering Chrome Developer Tools v2</a>
<span title="Video">🎥</span> <span title="Paid">💵</span>
</li>
<li>
<a href="https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference" target="_blank"
>Command Line API Reference</a
>
</li>
<li>
<a href="https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts" target="_blank"
>Keyboard & UI Shortcuts Reference</a
>
</li>
<li>
<a href="https://developers.google.com/web/tools/chrome-devtools/#docs" target="_blank">Per-Panel Documentation</a>
</li>
<li>
<a href="https://developer.chrome.com/devtools/docs/settings" target="_blank">Configure and Customize DevTools</a>
</li>
</ul>
</div>
</div>
</div>
<script src="../_js/slideout.min.js"></script>
<script src="../_js/jquery-3.3.1.slim.min.js"></script>
<script>
// Create slide out TOC
var slideout = new Slideout({
panel: document.getElementById('panel'),
menu: document.getElementById('menu'),
padding: 356,
tolerance: 70,
});
// Create TOC dynamically from content
jQuery('.chapter').each(function (index) {
jQuery('h2', '#chapter' + (index + 1)).each(function (i) {
$(this).attr('id', index + 1);
$('#toc').append('<h5><a href="#' + (index + 1) + '">' + $(this).html() + '</a></h5>');
});
jQuery('h3', '#chapter' + (index + 1)).each(function (i) {
$(this).attr('id', index + 1 + '.' + (i + 1));
$('#toc').append('<h6><a href="#' + (index + 1) + '.' + (i + 1) + '">' + $(this).html() + '</a></h6>');
});
});
jQuery('#panel').on('click', 'a:not(.codesandboxlink a, .toolbar a)', function () {
window.open($(this).attr('href'));
return false;
});
// toggle TOC from hamburger icon
document.querySelector('#menuButton').addEventListener('click', function () {
slideout.toggle();
});
// toggle TOC on window resize
window.addEventListener('resize', resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function () {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
if (window.innerWidth > 1036) {
slideout.open();
} else {
slideout.close();
}
}
// open TOC on load if window is wide enough
window.addEventListener('load', function (event) {
if (window.innerWidth > 1036) {
slideout.open();
} else {
slideout.close();
}
});
</script>
</body>
</html>