Webentwicklung – Astro, Headless CMS & Infrastruktur | Andre Herrmann

Webentwicklungs-Bereiche

HTML, CSS & JavaScript

Semantisches HTML, CSS-Layouts, SCSS-Architekturen und moderne JavaScript-Patterns.

HTML
CSS
JavaScript

CMS-Systeme

Contao, TYPO3 und WordPress im Vergleich — Grundlagen, Templates und Erweiterungen.

Contao
TYPO3
WordPress

Headless & Infrastruktur

Astro, Headless CMS-Vergleiche, VPS-Setup und Serverinfrastruktur für moderne Webprojekte.

Astro
Headless
VPS

Vibe Coding

Mit KI-Code-Assistenten effizienter entwickeln — Tools, Workflow und Qualitätssicherung.

KI
Cursor
GitHub Copilot

Hardcoding – HTML, CSS & JavaScript

Semantisches HTML, moderne CSS-Layouts, SCSS-Architekturen, JavaScript-Patterns und serverseitiges PHP — die Grundlagen der Webentwicklung.

HTML – Semantische Struktur für das Web

HTML Grundlagen: Semantisches HTML, wichtige Elemente, Dokumentstruktur und Barrierefreiheit – die Basis jeder Website und Grundlage für SEO und Accessibility.

HTML
Semantisches HTML
Webentwicklung

CSS – Styling, Layout und moderne Techniken

CSS Grundlagen und moderne Techniken: Flexbox, Grid, Custom Properties, Container Queries und das Box-Modell – alles was du für professionelles Web-Styling brauchst.

CSS
Flexbox
CSS Grid

SCSS – CSS-Präprozessor für skalierbare Stylesheets

SCSS Grundlagen: Variables, Nesting, Mixins, @use/@forward und Token-Architektur – wie du mit SCSS wartbare, skalierbare CSS-Codebasen aufbaust.

SCSS
Sass
CSS Präprozessor

JavaScript – Interaktivität und Logik im Web

JavaScript Grundlagen für Webentwicklung: DOM-Manipulation, Events, async/await, Module und moderne ES6+-Features – von den Grundlagen bis zu praktischen Patterns.

JavaScript
DOM
ES6

PHP & MySQL – Serverseitige Webentwicklung

PHP und MySQL Grundlagen: Serverseitige Programmierung, Datenbankabfragen, OOP und Sicherheit – die Basis für dynamische Websites und Web-Applikationen.

PHP
MySQL
Backend

CMS-Systeme

Contao, TYPO3 und WordPress im Vergleich — Grundlagen, Templates, Erweiterungen und Einsatzszenarien für jedes Projekt.

Contao – Das deutsche Open-Source-CMS

Contao CMS Grundlagen: Was Contao auszeichnet, wie Templates funktionieren, wann es die richtige Wahl ist und wie es sich von WordPress und Typo3 unterscheidet.

Contao
CMS
Open Source

TYPO3 – Enterprise-CMS für komplexe Websites

TYPO3 Grundlagen: Was TYPO3 auszeichnet, wann es die richtige Wahl ist, wie TypoScript und Fluid-Templates funktionieren und wie es sich von anderen CMS unterscheidet.

TYPO3
Enterprise CMS
TypoScript

WordPress – Das meistgenutzte CMS der Welt

WordPress Grundlagen: Themes, Plugins, Gutenberg-Editor, WooCommerce und Sicherheit – was WordPress auszeichnet, wann es sinnvoll ist und worauf man achten sollte.

WordPress
CMS
Gutenberg

Headless & Infrastruktur

Moderne Web-Architekturen mit Astro und Headless CMS — von den Grundlagen bis zum produktiven Einsatz.

Astro – Das moderne Web-Framework für schnelle Websites

Astro erklärt: Was das Framework besonders macht, wie Islands Architecture funktioniert und warum Astro 2026 die erste Wahl für content-fokussierte Websites ist.

Astro
Web-Framework
Static Site Generator

Astro vs. Next.js – Wann welches Framework?

Astro vs. Next.js im direkten Vergleich: Performance, Developer Experience, Einsatzgebiete und Entscheidungshilfe – welches Framework für welches Projekt.

Astro
Next.js
Framework-Vergleich

Headless CMS – Funktionsweise, Vorteile und Einsatzfelder

Headless CMS erklärt: Was hinter dem Konzept steckt, wann es sich lohnt und welche Alternativen es zu klassischen CMS-Systemen wie WordPress gibt.

Headless CMS
WordPress
Strapi

Astro Content Collections – Typsichere Inhalte verwalten

Astro Content Collections erklärt: Wie du mit Zod-Schema, getCollection() und MDX strukturierte, typsichere Inhalte in Astro verwaltest und ausgibst.

Astro
Content Collections
Zod

SEO mit Astro – Schema, Sitemap und Performance optimieren

SEO mit Astro umsetzen: JSON-LD Schema, automatische Sitemap, Meta-Tags, Open Graph und Core Web Vitals – vollständige Anleitung für technisches SEO mit Astro.

Astro
SEO
JSON-LD

VPS aufsetzen – Node, PM2 und Apache Reverse Proxy konfigurieren

VPS-Setup für Node.js-Anwendungen: Wie du auf einem Linux-VPS Node installierst, Astro mit PM2 als Prozess-Manager betreibst und Apache als Reverse Proxy konfigurierst.

VPS
Node.js
PM2

Astro SSR und Hybrid Rendering – Static und Dynamic kombinieren

Astro Hybrid Rendering erklärt: Wie du mit output: server und prerender = true statische und dynamische Seiten in einem Projekt kombinierst – für maximale Performance und Flexibilität.

Astro
SSR
Hybrid Rendering

Prisma mit PostgreSQL – Datenbank-Setup und CRUD in Node.js

Prisma ORM mit PostgreSQL einrichten: Schema definieren, Migrationen durchführen, CRUD-Operationen schreiben und mit Astro SSR kombinieren – vollständige Anleitung.

Prisma
PostgreSQL
ORM

Astro Islands Architecture – React und andere Frameworks einbinden

Astro Islands erklärt: Wie du React, Vue oder Svelte als interaktive Inseln in statische Astro-Seiten einbindest – mit den richtigen client:*-Direktiven für maximale Performance.

Astro Islands
React
Vue

Headless CMS Vergleich 2026 – Strapi, Contentful, Sanity und mehr

Headless CMS Vergleich 2026: Strapi, Contentful, Sanity, Directus und Storyblok im direkten Vergleich – Funktionen, Preise, Hosting und Entscheidungshilfe.

Headless CMS
Strapi
Contentful

Vibe Coding

Mit KI-Assistenten effizienter entwickeln — von den Grundlagen über Tools und Workflow bis zu echten Praxisprojekten.

Was ist Vibe Coding? – KI-gestütztes Entwickeln erklärt

Vibe Coding erklärt: Was der Begriff bedeutet, wie KI-gestützte Entwicklung funktioniert, welche Chancen und Risiken es gibt und wie du damit startest.

Vibe Coding
KI Entwicklung
AI Coding

Vibe Coding im Deep Dive: Von Karpathys Tweet zur Produktionsrealität 2026

Was aus Andrej Karpathys 'Vibe Coding' geworden ist – Zahlen, Risiken, Tool-Landschaft und wie du KI-gestützte Entwicklung produktionsreif einsetzt.

Vibe Coding
KI-Entwicklung
Agentic Engineering

Vibe Coding Tools – Die besten KI-Entwicklungsumgebungen 2026

Vibe Coding Tools im Vergleich: Cursor, GitHub Copilot, Claude Code, Windsurf und v0 – welches Tool für welchen Anwendungsfall und wie du den Einstieg schaffst.

Vibe Coding Tools
Cursor
GitHub Copilot

Vibe Coding Workflow – Effizient mit KI entwickeln

Vibe Coding Workflow: Wie du KI-Assistenten effektiv in deinen Entwicklungs-Workflow integrierst – von der Aufgaben-Beschreibung über Iteration bis zur Qualitätssicherung.

Vibe Coding Workflow
KI Entwicklung Workflow
Prompt Engineering Code

Vibe Coding Praxisprojekte – KI-Entwicklung an echten Beispielen

Vibe Coding Praxisprojekte: Wie echte Entwicklungsprojekte mit KI-Unterstützung ablaufen – mit konkreten Beispielen, Prompts und Lessons Learned.

Vibe Coding Praxis
KI Entwicklung Beispiele
Astro KI

Häufig gestellte Fragen zur Webentwicklung

Was ist Headless CMS und wann macht es Sinn?

Ein Headless CMS trennt Content-Verwaltung vom Frontend. Das macht Sinn, wenn: mehrere Ausgabekanäle bedient werden, das Frontend-Framework frei gewählt werden soll, oder Performance und Developer Experience Priorität haben. Für einfache Websites ist ein klassisches CMS oft effizienter.

Warum Astro statt Next.js oder Nuxt?

Astro ist optimal für content-lastige Seiten: standardmäßig kein JavaScript im Browser, sehr gute Core Web Vitals, einfache Content Collections. Next.js ist besser wenn viel Interaktivität, Auth oder API-Routen gebraucht werden.

Was ist Vibe Coding?

Vibe Coding beschreibt das Entwickeln mit KI-Code-Assistenten (Cursor, GitHub Copilot, Claude) als Pair-Programming-Partner. Statt jede Zeile manuell zu schreiben, werden Anforderungen in natürlicher Sprache formuliert und KI-Vorschläge geprüft und angepasst.

Contao, TYPO3 oder WordPress – was wählen?

WordPress: größtes Ökosystem, viele Plugins, für Blogs und KMU-Websites gut. Contao: DSGVO-freundlich, technisch sauber, beliebt bei deutschen Agenturen. TYPO3: Enterprise-fähig, granulare Rechte, für komplexe Strukturen. Entscheidend: Team-Know-how und Kundenanforderungen.

Von HTML bis Headless –moderne Webprojekte.

Webentwicklungs-Bereiche

HTML, CSS & JavaScript

CMS-Systeme

Headless & Infrastruktur

Vibe Coding

Hardcoding – HTML, CSS & JavaScript

HTML – Semantische Struktur für das Web

CSS – Styling, Layout und moderne Techniken

SCSS – CSS-Präprozessor für skalierbare Stylesheets

JavaScript – Interaktivität und Logik im Web

PHP & MySQL – Serverseitige Webentwicklung

CMS-Systeme

Contao – Das deutsche Open-Source-CMS

TYPO3 – Enterprise-CMS für komplexe Websites

WordPress – Das meistgenutzte CMS der Welt

Headless & Infrastruktur

Astro – Das moderne Web-Framework für schnelle Websites

Astro vs. Next.js – Wann welches Framework?

Headless CMS – Funktionsweise, Vorteile und Einsatzfelder

Astro Content Collections – Typsichere Inhalte verwalten

SEO mit Astro – Schema, Sitemap und Performance optimieren

VPS aufsetzen – Node, PM2 und Apache Reverse Proxy konfigurieren

Astro SSR und Hybrid Rendering – Static und Dynamic kombinieren

Prisma mit PostgreSQL – Datenbank-Setup und CRUD in Node.js

Astro Islands Architecture – React und andere Frameworks einbinden

Headless CMS Vergleich 2026 – Strapi, Contentful, Sanity und mehr

Vibe Coding

Was ist Vibe Coding? – KI-gestütztes Entwickeln erklärt

Vibe Coding im Deep Dive: Von Karpathys Tweet zur Produktionsrealität 2026

Vibe Coding Tools – Die besten KI-Entwicklungsumgebungen 2026

Vibe Coding Workflow – Effizient mit KI entwickeln

Vibe Coding Praxisprojekte – KI-Entwicklung an echten Beispielen

Häufig gestellte Fragen zur Webentwicklung

Von HTML bis Headless –
moderne Webprojekte.