public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dhbw: neuer kurs technik I — 4 kapitel + demo assets

Browse Source
This commit is contained in:
Michael Czechowski
2026-05-04 20:05:46 +02:00
parent 5c419c9ed1
commit 841a7ced76
19 changed files with 1967 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
slides/dhbw/assets/demos/js-frameworks-overview.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript Frameworks – Übersicht</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
}
html, body { margin: 0; padding: 0; background: #fff; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 24px 28px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
h1 { margin: 0 0 4px; font-size: 1.45rem; text-align: center; }
.sub { color: var(--muted); margin-bottom: 24px; font-size: 0.88rem; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.col {
border-radius: 12px; padding: 18px 12px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.col.active { outline: 2px solid var(--dark); outline-offset: 2px; }
.col-title {
font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--dark); text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.12); padding-bottom: 8px; margin-bottom: 2px;
}
.items { display: flex; flex-direction: column; gap: 6px; }
.item {
display: flex; align-items: center; gap: 7px;
font-size: 0.82rem; font-weight: 600;
}
.item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.item .note { font-size: 0.7rem; font-weight: 400; color: var(--muted); display: block; }
.css-col { background: #f1f5f9; }
.fe-col { background: #fce7f3; }
.render-col { background: #ede9fe; }
.build-col { background: #dbeafe; }
.be-col { background: #d1fae5; }
</style>
</head>
<body>
<h1>JavaScript Frameworks – Übersicht</h1>
<p class="sub">Kategorien des modernen JS-Ökosystems</p>
<div class="grid">
<div class="col css-col">
<div class="col-title">CSS Frameworks</div>
<div class="items">
<div class="item"><div class="dot" style="background:#38bdf8"></div><span>Tailwind CSS<span class="note">Utility-first</span></span></div>
<div class="item"><div class="dot" style="background:#7c3aed"></div><span>Bootstrap<span class="note">Komponenten</span></span></div>
<div class="item"><div class="dot" style="background:#e879f9"></div><span>Pico CSS<span class="note">Classless</span></span></div>
<div class="item"><div class="dot" style="background:#f97316"></div><span>UnoCSS<span class="note">Atomic</span></span></div>
</div>
</div>
<div class="col fe-col">
<div class="col-title">Frontend Frameworks</div>
<div class="items">
<div class="item"><div class="dot" style="background:#61dafb"></div><span>React<span class="note">Meta / Virtual DOM</span></span></div>
<div class="item"><div class="dot" style="background:#ff3e00"></div><span>Svelte<span class="note">Compiler-based</span></span></div>
<div class="item"><div class="dot" style="background:#42b883"></div><span>Vue<span class="note">Progressive</span></span></div>
<div class="item"><div class="dot" style="background:#dd0031"></div><span>Angular<span class="note">Google / Full</span></span></div>
</div>
</div>
<div class="col render-col">
<div class="col-title">Rendering Frameworks</div>
<div class="items">
<div class="item"><div class="dot" style="background:#000"></div><span>Next.js<span class="note">React / SSR</span></span></div>
<div class="item"><div class="dot" style="background:#ff3e00"></div><span>SvelteKit<span class="note">Svelte / SSR</span></span></div>
<div class="item"><div class="dot" style="background:#42b883"></div><span>Nuxt<span class="note">Vue / SSR</span></span></div>
<div class="item"><div class="dot" style="background:#ff5d01"></div><span>Astro<span class="note">Islands Arch.</span></span></div>
<div class="item"><div class="dot" style="background:#0ea5e9"></div><span>Gatsby<span class="note">React / SSG</span></span></div>
</div>
</div>
<div class="col build-col">
<div class="col-title">Build Tools &amp; Bundler</div>
<div class="items">
<div class="item"><div class="dot" style="background:#646cff"></div><span>Vite<span class="note">Dev-Server / HMR</span></span></div>
<div class="item"><div class="dot" style="background:#2b3a42"></div><span>Webpack<span class="note">Bundler</span></span></div>
<div class="item"><div class="dot" style="background:#f9b640"></div><span>esbuild<span class="note">Go / ultra-fast</span></span></div>
<div class="item"><div class="dot" style="background:#3178c6"></div><span>tsc<span class="note">TypeScript</span></span></div>
<div class="item"><div class="dot" style="background:#cc3534"></div><span>Rollup<span class="note">Libraries</span></span></div>
</div>
</div>
<div class="col be-col active">
<div class="col-title">Backend Frameworks</div>
<div class="items">
<div class="item"><div class="dot" style="background:#68a063"></div><span>Express<span class="note">Minimal / de-facto</span></span></div>
<div class="item"><div class="dot" style="background:#3178c6"></div><span>Fastify<span class="note">Performant</span></span></div>
<div class="item"><div class="dot" style="background:#5a45ff"></div><span>AdonisJS<span class="note">Full-stack</span></span></div>
<div class="item"><div class="dot" style="background:#e11d48"></div><span>NestJS<span class="note">Angular-style</span></span></div>
<div class="item"><div class="dot" style="background:#000"></div><span>Hono<span class="note">Edge-ready</span></span></div>
</div>
</div>
</div>
</body>
</html>