-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
85 lines (80 loc) · 5.11 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
<!DOCTYPE html>
<html lang="de">
<head>
<!--Im <head> sind alle meta-daten zu der Webseite. Also alle Daten, die man NICHT direkt sehen kann.-->
<meta charset="UTF-8" />
<!--Dadurch können Sonderzeichen wie zb. äöü oder emojis angezeigt werden, sofern der Browser das unterstützt-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--Browserkompatibilität-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>high code workshop #1</title>
<!--Titel der Website, der im TAB angezeigt wird-->
<link rel="stylesheet" href="assets/css/style.css" />
<!--Verlinkung der main CSS-Datei-->
<link rel="stylesheet" href="assets/css/obnoxious.css" />
<!--Verlinkung der obnoxious CSS-Library-->
</head>
<body>
<!--Im <body> ist alles, was man auf der webseite sehen kann-->
<header>
<!--Header beschreibt den oberen Teil der Website, der meist die Navigation, vielleicht den Namen der Website enthält. Für die technische Funktionalität ist das nicht zwingend notwendig, aber für die Semantik ist es sehr wichtig (Stichwort SEO)-->
<h1>⛓WELCOME FELLOW FMNSTS⛓</h1>
<!--Überschrift höchsten ranges (h1). es gibt h1 - h6-->
<a class="link1 animated shakeit" href="#" target="_blank">klick mich</a
><!--<a> Elemente sind Verlinkungen. Target_blank sorgt dafür, dass der link in einem neuen Tab geöffnet wird. Wenn man aber zu keiner neuen Webseite navigiert wird einfach die Webseite von der man kommt nochmal in einem neuen tab geöffnet. Mit der Klasse (class) kann man das Element gezielt im css ansprechen (klassifizieren).-->
<a class="link2 animated intensifies" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">los jetzt</a>
</header>
<!--Hier wird das header element wieder geschlossen-->
<main>
<!--Der Hauptteil der Webseite. Also der Hauptinhalt-->
<div class="text-container">
<!--Das <div> element ist ein sogenanntes Container-Element-->
<h3>Aufgabe 1.0 HTML + CSS:</h3>
<!--Überschrift dritten ranges-->
<p>
<!--p = Paragraph, also ein Textabschnitt-->
Coding besteht zu 85% aus sich-sachen-ergoogeln. Das Grundprinzip zu verstehen ist schon die halbe Miete. Manchmal ist das größte Problem, dass man nicht genau weiß, wonach man googeln soll. Seiten wie w3schools, stack overflow und css-tricks sind immer sehr gute Anlaufstellen um anständige Antworten zu bekommen.<br />
</p>
</div>
<div class="text-container">
<h3>Hier sind noch ein paar nützliche Links:</h3>
<div class="help-wrapper">
<a class="help" href="https://htmlcolorcodes.com" target="_blank">html: color codes</a>
<a class="help" href="https://www.loremipsum.de" target="_blank">text: generator</a>
<a class="help" href="https://www.magicpattern.design/tools/css-backgrounds" target="_blank">coole hintergründe</a>
<a class="help" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">css: flexbox</a>
<a class="help" href="https://wiki.selfhtml.org/wiki/HTML/Elemente" target="_blank">html: alle elemente</a>
<a class="help" href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">css: grid</a>
<a class="help" href="https://flexboxfroggy.com/#de" target="_blank">css: flexbox froggy</a>
<a class="help" href="https://cssgridgarden.com/#de" target="_blank">css: grid garden</a>
<a class="help" href="https://css-tricks.com/centering-css-complete-guide/" target="_blank">css: centering things</a>
<a class="help" href="https://www.w3schools.com/js/default.asp" target="_blank">js: tutorial</a>
<a class="help" href="https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_variables1" target="_blank">js: übungen</a>
<a class="help" href="https://css-tricks.com/almanac/properties/m/mix-blend-mode/" target="_blank">css: effekte</a>
<a class="help" href="https://css-tricks.com/almanac/properties/b/backdrop-filter/" target="_blank">css: hintergrund effekte</a>
<a class="help" href="https://tholman.com/obnoxious/" target="_blank">css: obnoxious.css</a>
<a class="help" href="https://tholman.com/cursor-effects/" target="_blank">js: 90's cursor effects</a>
<a class="help" href="https://animate.style/" target="_blank">css: animate.css</a>
</div>
</div>
</div>
<div class="text-container">
<!--Das <div> Element ist ein sogenanntes Container-Element-->
<h3>Aufgabe 2.0 Javascript:</h3>
<!--Überschrift dritten ranges-->
<p>
<!--p = Paragraph, also ein Textabschnitt-->
Heute werden wir Javascript erkunden ... yay!<br />
Tagesziel ist es selbst eine Variable Schrift einzubinden und diese mit Javascript zu animieren. Wenn wir es schaffen binden wir danach noch eine CSS-Library ein mit der die Schrift maximal annoying wird.<br />
<b>Auf geht's!</b>
</p>
</div>
</main>
<footer>
<!--Hier könnte ein Footer sein. Klassischerweise mit Impressum, Kontakt, und so weiter.-->
</footer>
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/cursor.js"></script>
</body>
</html>