diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md
new file mode 100644
index 0000000..89e9ba2
--- /dev/null
+++ b/slides/dhbw/01_web_eng.md
@@ -0,0 +1,418 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2025"
+title: Web Engineering
+---
+
+
+
+
+
+
+
+
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2025**
+
+---
+
+
+
+# Willkommen!
+
+## 1. Sitzung: 09.05.2025
+
+---
+
+# Wer bist du, was machst du?
+
+- B.Sc. Wirtschaftsinformatik (Leibniz-FH Hannover)
+- Angestellt bei PONS Langenscheidt GmbH in Stuttgart
+- Honorardozent und Berater
+
+**Bisherige Vorlesungen (DHBW/Leibniz-FH):**
+- Social Engineering, Mobile Medien, Web Eng
+
+---
+
+# Vorlesungsplan
+
+| Sitzung | Datum | Thema |
+|---------|-------|-------|
+| 1 | 09.05. | Formalia, Kennenlernen, Internet 101 |
+| 2 | 16.05. | HTML und CSS (Frameworks) |
+| 3 | 23.05. | JS (Frameworks) und npm |
+| 4 | 30.05. | nodeJS: Scripting, Running and Building |
+| 5 | 06.06. | Express API, CRUD und "Middlewares" |
+| 6 | 13.06. | Testing (unit, integration, end-to-end) |
+| 7 | 20.06. | TypeScript |
+| 8 | 27.06. | Docker, Proxies and DBs |
+| 9 | 04.07. | Präsentationen |
+
+---
+
+# Prüfungsleistung
+
+**LN** – Lernnachweis (50%)
+- Projekte / Hausaufgaben
+- Präsentation
+
+---
+
+# Internet 101 – Zeitleiste
+
+| Jahr | Ereignis |
+|------|----------|
+| 1966 | ARPANET |
+| 1969 | RFCs |
+| 1986 | IETF |
+| 1992 | Internet Society |
+| 1974 | TCP/IP und HTTP(S) |
+| 1987 | Domain Names und DNS |
+| 1993 | "Erster" Browser: Mosaic |
+| 1994 | W3C (HTML, XML, CSS, SVG, WCAG etc.) |
+| 1995 | ECMAScript (JS) |
+| 2006/08 | V8 JS Runtime Engine |
+| Heute | 1,3 Mio. km Unterseekabel |
+
+---
+
+# Internet 101 – Browser Request
+
+```
+Browser Server
+ | |
+ |-- GET /products -------------->|
+ |<-- HTTP 200 + index.html -----|
+ | |
+ |-- GET /script.js ------------->|
+ |<-- HTTP 200 + script.js ------|
+ | |
+ |-- GET /api/products ---------->|
+ |<-- HTTP 200 + JSON ------------|
+```
+
+---
+
+
+
+
+
+
+
+---
+
+# HTTP – Hypertext Transfer Protocol
+
+**Request:**
+```
+GET /products HTTP/1.1
+Host: localhost:8080
+```
+
+**Response:**
+```
+HTTP/1.1 200 OK
+Content-Type: application/json
+
+[{"id": 1, "name": "Produkt A"}, ...]
+```
+
+---
+
+# Entwicklungsumgebung
+
+**Tools:**
+- Node.js + npm
+- VS Code
+- Git
+- Chrome DevTools
+
+---
+
+# Versionierung mit Git
+
+```bash
+git init
+git add .
+git commit -m "initial commit"
+git remote add origin https://github.com/user/repo.git
+git push -u origin main
+```
+
+---
+
+
+
+
+
+# HTML – Hypertext Markup Language
+
+---
+
+# HTML Grundlagen
+
+```html
+
+
+
+
+ Meine Seite
+
+
+ Überschrift
+ Textabsatz
+
+
+```
+
+---
+
+# Semantisches HTML
+
+```html
+
+
+
+
+
+
+
+
+```
+
+---
+
+# HTML – Tabellen und Listen
+
+```html
+
+
+ | Name | Preis |
|---|
+
+
+ | Produkt A | 29,99 € |
+
+
+
+
+```
+
+---
+
+
+
+
+
+# CSS – Cascading Style Sheets
+
+---
+
+# CSS Grundlagen
+
+```css
+/* Element */
+body { font-family: Arial, sans-serif; }
+
+/* Klasse */
+.button { background: #005f8a; color: white; }
+
+/* ID */
+#header { height: 60px; }
+
+/* Attribut */
+input[type="text"] { border: 1px solid #ccc; }
+```
+
+---
+
+# CSS Layout – Flexbox
+
+```css
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+```
+
+---
+
+# CSS Layout – Grid
+
+```css
+.grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+}
+```
+
+---
+
+# CSS – Box Model
+
+```css
+.box {
+ margin: 10px;
+ border: 2px solid #005f8a;
+ padding: 20px;
+ width: 200px;
+ box-sizing: border-box;
+}
+```
+
+---
+
+# CSS Responsive
+
+```css
+@media (max-width: 768px) {
+ .grid {
+ grid-template-columns: 1fr;
+ }
+}
+```
+
+---
+
+
+
+
+
+# JavaScript
+
+---
+
+# JavaScript Grundlagen
+
+```javascript
+// Variablen
+let name = "Welt";
+const alter = 25;
+
+// Funktionen
+function gruss(name) {
+ return `Hallo, ${name}!`;
+}
+
+// Arrow Functions
+const add = (a, b) => a + b;
+
+// Arrays
+const arr = [1, 2, 3];
+arr.map(x => x * 2); // [2, 4, 6]
+```
+
+---
+
+# DOM Manipulation
+
+```javascript
+// Element auswählen
+const title = document.querySelector('h1');
+
+// Inhalt ändern
+title.textContent = 'Neue Überschrift';
+
+// Event Listener
+button.addEventListener('click', () => {
+ alert('Geklickt!');
+});
+```
+
+---
+
+# Fetch API
+
+```javascript
+fetch('/api/products')
+ .then(res => res.json())
+ .then(data => {
+ console.log(data);
+ })
+ .catch(err => console.error(err));
+```
+
+---
+
+# Async/Await
+
+```javascript
+async function loadProducts() {
+ try {
+ const res = await fetch('/api/products');
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Fehler:', err);
+ }
+}
+```
+
+---
+
+
+
+
+
+
+
+---
+
+# Fragen?
+
+1. Was ist der Unterschied zwischen `let` und `const`?
+2. Wie funktioniert `fetch()`?
+3. Was macht `box-sizing: border-box`?
\ No newline at end of file
diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md
new file mode 100644
index 0000000..fa5f78d
--- /dev/null
+++ b/slides/dhbw/02_css_extended.md
@@ -0,0 +1,266 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2025"
+---
+
+
+
+
+
+
+
+# CSS: Extended
+
+---
+
+# CSS Selectors – Tag, Class, ID, Attribute
+
+```css
+/* Tag */
+p { color: #333; }
+
+/* Class */
+.button { background: blue; }
+
+/* ID */
+#header { height: 60px; }
+
+/* Attribute */
+input[type="text"] { border: 1px solid #ccc; }
+input[disabled] { background: #eee; }
+```
+
+---
+
+# CSS Selectors – Attribut-Selektoren
+
+```css
+/* presence */
+[disabled] { opacity: 0.5; }
+
+/* exact value */
+[type="email"] { border-color: blue; }
+
+/* contains word */
+[class~="btn"] { cursor: pointer; }
+
+/* starts with */
+[href^="https"] { color: green; }
+
+/* ends with */
+[src$=".png"] { border: 1px solid #ccc; }
+
+/* contains substring */
+[class*="icon"] { padding-left: 20px; }
+```
+
+---
+
+# CSS Combinators
+
+```css
+/* Child (direkt) */
+div > p { margin: 0; }
+
+/* Descendant (Nachkomme) */
+div p { margin: 0; }
+
+/* Next Sibling */
+h1 + p { font-size: 1.2em; }
+
+/* Subsequent Sibling */
+h1 ~ p { color: #666; }
+
+/* Selector List */
+h1, h2, h3 { font-weight: bold; }
+```
+
+---
+
+# Pseudo Classes
+
+```css
+/* User Interaction */
+:hover { color: red; }
+:active { background: blue; }
+:focus { outline: 2px solid orange; }
+
+/* Structure */
+:first-child { margin-left: 0; }
+:last-child { margin-right: 0; }
+:nth-child(odd) { background: #f9f9f9; }
+
+/* Links */
+:visited { color: purple; }
+:link { color: blue; }
+```
+
+---
+
+# Pseudo Classes – More
+
+```css
+/* Form States */
+:valid { border-color: green; }
+:invalid { border-color: red; }
+:placeholder-shown { color: #999; }
+
+/* Content */
+:before { content: "→ "; }
+:after { content: " [Wichtig]"; }
+:first-letter { font-size: 2em; }
+:first-line { font-weight: bold; }
+
+/* NOT */
+:not(.disabled) { pointer-events: auto; }
+:not(:last-child) { border-bottom: 1px solid #ccc; }
+```
+
+---
+
+# Shorthand Properties
+
+```css
+/* margin: top right bottom left */
+margin: 10px 20px 10px 20px;
+
+/* centering */
+margin: 0 auto;
+
+/* padding same */
+padding: 20px;
+
+/* border: width style color */
+border: 1px solid #333;
+
+/* background: color image position/size repeat */
+background: #fff url(logo.png) 0 0 no-repeat;
+
+/* font: style variant weight size/line-height family */
+font: italic normal bold 16px/1.5 Arial, sans-serif;
+```
+
+---
+
+# Flexbox Shorthands
+
+```css
+/* flex: grow shrink basis */
+flex: 1 0 auto;
+
+/* place-items: align-items justify-items */
+place-items: center stretch;
+
+/* place-content: align-content justify-content */
+place-content: space-between center;
+
+/* gap: row-gap column-gap */
+gap: 20px 40px;
+```
+
+---
+
+# CSS Custom Properties (Variables)
+
+```css
+:root {
+ --primary-color: #005f8a;
+ --spacing: 20px;
+ --radius: 8px;
+}
+
+.button {
+ background: var(--primary-color);
+ padding: var(--spacing);
+ border-radius: var(--radius);
+}
+```
+
+---
+
+# CSS Functions
+
+```css
+/* calc */
+width: calc(100% - 40px);
+
+/* min/max/clamp */
+width: min(100%, 600px);
+font-size: clamp(14px, 2vw, 20px);
+
+/* var with fallback */
+color: var(--text-color, #333);
+
+/* rgb/rgba/hsl/hsla */
+color: hsl(200, 100%, 50%);
+background: rgba(0, 0, 0, 0.5);
+```
+
+---
+
+# Transition & Animation
+
+```css
+/* transition: property duration timing-function */
+transition: all 0.3s ease-in-out;
+transition: background 0.2s, transform 0.1s;
+
+/* animation */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.fade-in {
+ animation: fadeIn 0.5s ease-out;
+}
+```
+
+---
+
+# Fragen?
+
+1. Was bedeutet `div > p` vs `div p`?
+2. Wann nutzt du `nth-child(even)`?
+3. Warum `--variable` statt direkt `#fff`?
\ No newline at end of file
diff --git a/slides/dhbw/03_nodejs_basics.md b/slides/dhbw/03_nodejs_basics.md
new file mode 100644
index 0000000..de85129
--- /dev/null
+++ b/slides/dhbw/03_nodejs_basics.md
@@ -0,0 +1,228 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2025"
+---
+
+
+
+
+
+
+
+# Node.js – Scripting, Running and Building
+
+---
+
+# Node.js – Was ist das?
+
+- JavaScript Runtime (V8 Engine)
+- Server-side JavaScript
+- npm Package Manager
+- Ideal für: APIs, CLI Tools, Automation
+
+---
+
+
+
+
+
+
+
+---
+
+# node --check und node -e
+
+```bash
+# Syntax check only
+node --check script.js
+
+# One-liner
+node -e "console.log('Hallo Welt')"
+```
+
+---
+
+# node -e Beispiele
+
+```bash
+# String
+node -e "console.log('Hello ' + process.argv[2])" Welt
+
+# File reading
+node -e "console.log(require('fs').readFileSync('data.json'))"
+
+# JSON parsen
+node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'
+```
+
+---
+
+# require() – Module laden
+
+```javascript
+// Eigene Datei
+const utils = require('./utils');
+
+// npm Modul
+const express = require('express');
+
+// Built-in
+const fs = require('fs');
+const path = require('path');
+```
+
+---
+
+# __dirname und __filename
+
+```javascript
+// Aktuelles Verzeichnis (Node.js)
+console.log(__dirname); // /home/user/project/src
+console.log(__filename); // /home/user/project/src/app.js
+
+// Pfad joinen
+const configPath = path.join(__dirname, '..', 'config.json');
+```
+
+---
+
+# HTTP Server mit Node.js (Built-in)
+
+```javascript
+const http = require('http');
+
+const server = http.createServer((req, res) => {
+ res.writeHead(200, { 'Content-Type': 'text/html' });
+ res.end('Hallo Welt!
');
+});
+
+server.listen(3000, () => {
+ console.log('Server läuft auf Port 3000');
+});
+```
+
+---
+
+# fs – Dateien lesen/schreiben
+
+```javascript
+const fs = require('fs');
+
+// Async
+fs.readFile('data.json', 'utf8', (err, data) => {
+ if (err) throw err;
+ console.log(JSON.parse(data));
+});
+
+// Sync
+const content = fs.readFileSync('data.json', 'utf8');
+
+// Write
+fs.writeFile('output.txt', 'Hallo Welt', (err) => {
+ if (err) throw err;
+});
+```
+
+---
+
+# package.json – Das Herzstück
+
+```json
+{
+ "name": "mein-projekt",
+ "version": "1.0.0",
+ "main": "index.js",
+ "scripts": {
+ "start": "node index.js",
+ "dev": "node --watch index.js",
+ "test": "node --test"
+ },
+ "dependencies": {
+ "express": "^4.18.0"
+ },
+ "devDependencies": {
+ "nodemon": "^3.0.0"
+ }
+}
+```
+
+---
+
+# npm Scripts
+
+```bash
+# npm run