extend overviewpage to javascript until dom-api

src/content/dhbw/de/web-engineering-i.mdx

@@ -71,7 +71,7 @@ Grundsätzlich findet man in der folgenden Präsentation:
 
 <Card to="/slides/html/02-tags" color="blue">Zu den Slides</Card>
 <div class="mb-1" />
-<Card to="#" color="rose">Programmieraufgabe</Card>
+<Card to="/tasks/html-1" color="rose">Programmieraufgabe</Card>
 <div class="mb-1" />
 <Card to="#" color="green">Cheat-Sheet</Card>
 <Spacer />
@@ -82,7 +82,7 @@ Moderne Webinhalte bestehen nicht nur aus Texten. Nachdem wir uns überwiegend m
 
 <Card to="/slides/html/03-images" color="blue">Zu den Slides</Card>
 <div class="mb-1" />
-<Card to="#" color="rose">Programmieraufgabe</Card>
+<Card to="/tasks/html-3" color="rose">Programmieraufgabe</Card>
 <div class="mb-1" />
 <Card to="#" color="green">Cheat-Sheet</Card>
 <Spacer />
@@ -94,7 +94,7 @@ Wir schauen uns an, wie Links eigentlich aufgebaut sind und wie man seine Dateie
 
 <Card to="/slides/html/04-linking-between-documents" color="blue">Zu den Slides</Card>
 <div class="mb-1" />
-<Card to="#" color="rose">Programmieraufgabe</Card>
+<Card to="/tasks/html-2" color="rose">Programmieraufgabe</Card>
 <div class="mb-1" />
 <Card to="#" color="green">Cheat-Sheet</Card>
 <Spacer />
@@ -114,7 +114,7 @@ Im letzten Abschnitt der HTML-Reihe widmen wir uns den ersten *Interaktiven* Ele
 
 <Card to="/slides/html/06-forms" color="blue">Zu den Slides</Card>
 <div class="mb-1" />
-<Card to="#" color="rose">Programmieraufgabe</Card>
+<Card to="/tasks/html-5" color="rose">Programmieraufgabe</Card>
 <div class="mb-1" />
 <Card to="#" color="green">Cheat-Sheet</Card>
 <Spacer />
@@ -140,6 +140,7 @@ Im weiteren Verlauf des Slidedecks schauen wir uns die Möglichkeiten an, wie ma
 Alle vorgestellten Style's in Bezug auf Abstände werden mit der neueren "Inline-Block" Syntax beschrieben.
 
 <Card to="/slides/css/01-basic-styles" color="blue">Zu den Slides</Card>
+<Spacer />
 
 ### # CSS - Mehr zu Selektoren
 
@@ -147,6 +148,7 @@ Neben den _einfachen_ Selektoren `.`, `#`, der Element-Syntax und der Selektor f
 Diese sind auch immer wieder notwendig, insbesondere bei großen Projekten mit vielen Elementen und der Möglichkeit das Styles "spillen" (sich also auf Elemente auswirken, bei denen wir das nicht beabsichtig haben.)
 
 <Card to="/slides/css/02-selectors-advanced" color="blue">Zu den Slides</Card>
+<spacer />
 
 ### # CSS - Layout-Techniken und das Box-Model
 
@@ -155,10 +157,53 @@ Nun beschäftigen wir uns mit etwas, mit dem wir schon öfters Berührung hatten
 Als darauffolgende Inhalte werden wir uns mit den verschiedenen Layouting-Systemen in CSS auseinander setzten. Dabei schauen wir uns besonders die CSS-Flexbox und das CSS-Grid genauer an.
 
 <Card to="/slides/css/03-layout-and-box-model" color="blue">Zu den Slides</Card>
+<Spacer />
 
 ### # CSS - Mehr Styles (aber nun "Fancy")
 
 Alles für das tägliche arbeiten mit CSS haben wir nun gelernt: Wir können einfache Styles auf Elemente anwenden und auch erste Layouts generieren um Inhalte auf der Website zu strukturieren.
 In den folgende Slides schauen wir uns nun weitere Möglichkeiten an, Inhalte "hervorstechen zu lassen".
 
-<Card to="/slides/css/04-advanced-styles" color="blue">Zu den Slides</Card> 
+<Card to="/slides/css/04-advanced-styles" color="blue">Zu den Slides</Card> 
+<Spacer />
+
+## JavaScript
+Nun kommen wir zu dem, was wahrscheinlich schon viele erwarten: JavaScript. Über den Verlauf der nächsten Slide-Decks lernen wir die Sprache und essentielle Application Programming Interfaces (APIs) kennen.
+Zum Schluss werden wir uns auch den ersten Schritt in die moderne Web-Entwicklung wagen indem wir mit dem ersten Framework arbeiten werden: `AlpineJS`.
+
+### # JS - Intro
+Was ist JavaScript, was macht die Sprache aus? Wir setzen uns mit npm und NodeJS auseinander und initialisieren unser erstes Projekt damit. Weiterhin schauen wir uns die erste Ausgabe-Arten an, wie Variablen definiert werden und welche einfachen Datentypen es gibt.
+
+<Card to="/slides/javascript/00-intro" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Control Flow
+Ein kurzer und schneller Einstieg in die Thematik Control Flows in JavaScript (If-Else, Switch-Case, Loops).
+
+<Card to="/slides/javascript/01-control-flow" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Komplexe Datentypen
+Wir schauen uns an, warum JavaScript als Programmiersprache so _mächtig_ ist: Komplexe Datentypen wie Objekte und Arrays, wie diese Funktionieren und Methoden um mit diesen Strukturen zu arbeiten.
+
+<Card to="/slides/javascript/02-complex-datatypes" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Funktionen
+Wir setzten uns mit Funktionen in JavaScript auseinander und was es überhaupt mit dem _Scope_ auf sich hat.
+
+<Card to="/slides/javascript/03-functions" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Erweiterte Funktionalitäten auf komplexen Datentypen
+Wir schauen uns an, was die Features "Destructuring", "Spread-Operator" und "Rest-Paramter" sind.
+
+<Card to="/slides/javascript/04-advanced-methodics" color="blue">Zu den Slides</Card>
+<Spacer />
+
+### # JS - Document Object Model (API)
+Wir kennen jetzt die Grundzüge der Programmiersprache JavaScript. Als nächstes schauen wir uns das an, was wir tagtäglich als Webentwickler machen werden: Das HTML-Dokument manipulieren.
+JavaScript liefert uns dafür im Web-Browser eine spezielle Schnittstelle an: die DOM-API.
+
+<Card to="/slides/javascript/05-dom" color="blue">Zu den Slides</Card>
+<Spacer />