-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
152 lines (138 loc) · 7.19 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>web engineering</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' href='exercises/static/styles/style.css'>
<link rel='stylesheet' type='text/css' href='decks/_reveal.js/plugin/highlight/tomorrow.css'>
<link rel="stylesheet" href="decks/_reveal.js/plugin/fontawesome/all.css">
<script src="static/scripts/highlight.pack.js"></script>
<script src="decks/_reveal.js/plugin/externalcode/externalcode.js"></script>
<script>
window.addEventListener('load', () => {
Externalcode.init().then(() => {
document.querySelectorAll('pre > code').forEach((block) => {
hljs.highlightBlock(block);
});
})
document.querySelectorAll('.deck iframe[loading="lazy"]').forEach((iframe) => {
const loadingDiv = document.createElement('div');
Object.assign(loadingDiv.style, {
left: "50%",
top: "50%",
width: "auto",
height: "auto",
});
loadingDiv.innerHTML = '<a href="" style="display: inline-block; transform: translateX(-50%) translateY(-50%);">Click to load slides</a>';
loadingDiv.querySelector('a').addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
iframe.src = iframe.getAttribute('data-src');
loadingDiv.remove();
});
iframe.parentElement.appendChild(loadingDiv);
});
});
</script>
</head>
<body>
<div class="content">
<h1>Webengineering</h1>
<p></p>
<h2>Topics</h2>
<h3>Introduction</h3>
<p>The introduction covers a brief overview over the topic web engineering, the organizations involved with the
internet and the web and a brief history</p>
<a href="decks/01-intro/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/01-intro/index.html" loading="lazy"></iframe>
</div>
<h3>HTML</h3>
<p>This topic covers the basics of HTML, its use, syntax, layouts and form handling</p>
<h4>Exercises</h4>
<ol>
<li id="ex-html-basic"><a href="./exercises/html/basic-structure/basic-structure.html">Basic Structure</a>
</li>
<li id="ex-html-anchor"><a href="./exercises/html/anchor-element/anchor-element.html">Anchor Element</a>
</li>
<li id="ex-html-anchor-ex"><a
href="./exercises/html/anchor-element-extern/anchor-element-extern.html">Anchor Element with
External content</a></li>
<li id="ex-html-images"><a href="./exercises/html/responsice-images/responsive-images.html">Responsive
Images</a></li>
<li id="ex-html-form"><a href="./exercises/html/formdata/formdata.html">Basic Forms</a></li>
<li id="ex-html-form-valid"><a href="./exercises/html/formdata-validation/formdata-validation.html">Form
Validation</a></li>
</ol>
<a href="decks/02-html/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/02-html/index.html" loading="lazy"></iframe>
</div>
<h3>CSS</h3>
<p>This topic covers the basics of CSS, selectors, layouts, positioning</p>
<h4>Exercises</h4>
<ol>
<li id="ex-css-basic"><a href="./exercises/css/css-basics/css-basics.html">CSS Basics</a></li>
<li id="ex-css-basic-relative"><a href="./exercises/css/css-basics-relative/css-basics-relative.html">CSS
Basics - relative sizes</a></li>
<li id="ex-css-positioning"><a href="./exercises/css/css-positioning/css-positioning.html">CSS
Positioning</a></li>
<li id="ex-css-animation"><a href="./exercises/css/css-animation/css-animation.html">CSS Animation</a></li>
<li id="ex-css-responsive"><a href="./exercises/css/css-responsive/css-responsive.html">CSS Responsive
Design</a></li>
</ol>
<a href="decks/03-css/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/03-css/index.html" loading="lazy"></iframe>
</div>
<h3>Javascript</h3>
<p>This topic covers the basics of javascript, loops, conditions, function, variables, hoisting, scope, protoype
inheritance</p>
<a href="decks/04-javascript/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/04-javascript/index.html" loading="lazy"></iframe>
</div>
<h3>DOM and Browser APIs</h3>
<p>This topic covers the basics to work with the DOM and Browser APIs</p>
<a href="decks/05-dom-and-browser-api/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/05-dom-and-browser-api/index.html" loading="lazy"></iframe>
</div>
<h3>Communication</h3>
<p>This topic covers the basics of HTTP, websockets, gRPC and WebRTC</p>
<a href="decks/06-communication/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/06-communication/index.html" loading="lazy"></iframe>
</div>
<h3>NodeJS and Backends</h3>
<p>This topic covers the basics of nodejs and npm</p>
<a href="decks/07-nodejs/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/07-nodejs/index.html" loading="lazy"></iframe>
</div>
<h3>Communication with the Browser</h3>
<p>This topic covers the basics of how to communicate with HTTP and websockets ceonnections from within the browser</p>
<a href="decks/08-communication-browser/index.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/08-communication-browser/index.html" loading="lazy"></iframe>
</div>
<h2>Interludes</h2>
<h3>F12 Debugger Tools</h3>
<a href="decks/f12.html" target="_blank"><span class="highlight"><i class="fas fa-link"></i>open
slide</span></a>
<div class="deck">
<iframe data-src="decks/f12.html" loading="lazy"></iframe>
</div>
</div>
</body>
</html>