Was ist Webentwicklung? Wie Frontend und Backend aus einem Entwurf eine Website machen

Webentwicklung macht aus dem Entwurf einer Website Code. Das Frontend ist der Teil, den Besucher sehen und bedienen: HTML legt Aufbau und Bedeutung der Inhalte fest, CSS das Aussehen und JavaScript das Verhalten. Das Backend läuft auf dem Server, prüft und speichert Daten und entscheidet, welche Inhalte der Browser bekommt. Wie die Website aussehen und was sie tun soll, klärt vorher das Webdesign.

Frontend nennt man den Code, der im Browser der Besucher läuft. Er kümmert sich um Aussehen und Verhalten der Seite: Aufbau und Gestaltung, Navigation und Formulare. Auch die Prüfung eines Formulars vor dem Absenden gehört dazu. Geschrieben wird das Frontend in HTML, CSS und JavaScript.

Besucher nutzen verschiedene Browser, und nicht jeder unterstützt jede Funktion gleich. Ein Teil der Frontend-Arbeit besteht darin, mit diesen Unterschieden sauber umzugehen.

Zwei Beispiele aus Projekten von Coday: Auf der Website von Batherm wählen Besucher im Anfrageformular die Leistung aus, um die es geht. Der Fliesen-Konfigurator von Fliesenverlegung Tezgel berechnet Materialbedarf und Verschnitt und bereitet damit die Anfrage an den Betrieb vor. Was Besucher dabei ausfüllen, auswählen und als Ergebnis sehen, ist Frontend.

Klickt jemand auf einen Link oder schickt ein Formular ab, sendet der Browser eine Anfrage an einen Webserver, und der Server antwortet. Für eine einfache Website genügt ein Webserver, der fertige Dateien so ausliefert, wie sie gespeichert sind; jede Anfrage nach einer Seite bekommt denselben Inhalt. Sollen Inhalte aus einer Datenbank kommen oder Daten gespeichert werden, läuft dafür eigener Code auf dem Server. Diesen Teil nennt man serverseitige Programmierung oder Backend.

Das Backend prüft gesendete Daten und Anfragen, liest und speichert Daten in einer Datenbank und schickt dem Browser die passende Antwort.

Auch Texte und Bilder können getrennt vom Code liegen, in einem Redaktionssystem. Ein Headless CMS trennt dabei, wo Inhalte gespeichert sind, davon, wo sie angezeigt werden. Sanity arbeitet so: Es speichert Inhalte als strukturierte Daten, die eine Website abfragen und anzeigen kann. Bei codayweb.de liegen die Seiten und die Terminbuchung für das Erstgespräch in einem Projekt mit Next.js; die Serverfunktionen laufen in der Region Frankfurt.

Webentwickler schreiben ihren Code meist mit Frameworks. Das sind Sammlungen von fertigem Code für häufige Aufgaben, die die Arbeit vereinfachen und beschleunigen. Drei Werkzeuge, mit denen Coday arbeitet:

• React ist eine Bibliothek für Benutzeroberflächen. Sie baut Oberflächen aus einzelnen Bausteinen, den Komponenten, etwa einem Knopf oder einem Vorschaubild, und setzt sie zu Seiten zusammen.
• Next.js ist ein Framework auf Basis von React für Webanwendungen mit Frontend und Backend. Im App Router sind Seiten und Layouts standardmäßig Server Components: Sie holen Daten und erzeugen Teile der Oberfläche auf dem Server. Für Interaktion im Browser kommen Client Components hinzu.
• Tailwind CSS ist ein CSS-Framework mit kleinen Klassen wie flex oder text-center, die direkt im HTML zu einem Design kombiniert werden.

Mit Next.js, React und Tailwind ist codayweb.de gebaut. Auch die Websites von Batherm, Talia Boutique und Fliesenverlegung Tezgel laufen mit Next.js. Ein festes Paket ist das nicht: Die Website von Memo BauT ist eine React-App, gebaut mit Vite und Tailwind, ohne Next.js. Vite ist ein Build-Werkzeug; es bringt einen Server für die Entwicklung mit und bündelt den Code für die Auslieferung.

Webdesign kommt vor dem Code. Es klärt, welche Inhalte die Website zeigt, was sie tun soll, wie sie aussieht und welche Farben und Schriften sie verwendet. Meist beginnt diese Arbeit mit groben Skizzen auf Papier, später folgen digitale Entwürfe. In Teams sind oft Grafikdesigner beteiligt, die das Aussehen gestalten, und UX-Designer, die sich darum kümmern, wie Menschen die Website erleben und bedienen. Webentwicklung setzt den Entwurf dann in Code um, im Frontend und im Backend.

Ganz scharf ist die Grenze nicht: Digitale Entwürfe entstehen in Grafikprogrammen oder schon mit Webtechniken. Bei Coday liegen beide Teile in einer Hand. Der Inhaber gestaltet die Website und programmiert sie selbst, von den ersten Entwürfen bis zum fertigen Code.

Viele Wörter aus diesem Beitrag erklärt das Glossar von Coday in eigenen Einträgen, darunter Next.js, Tailwind CSS, TypeScript, Headless CMS und Sanity.

Bei Coday programmiert der Inhaber, Umutcan Emre Tezgel, Websites und Webanwendungen selbst, mit Next.js, React und TypeScript. Bei Bedarf bindet er das Redaktionssystem Sanity an; dort liegen Inhalte in festen Feldern, die Sie selbst bearbeiten können. Bestehende Systeme wie ein Kalender, ein Shop oder ein CRM lassen sich anbinden, wenn sie eine dokumentierte Schnittstelle haben. Nach einem kostenlosen Erstgespräch erhalten Sie ein Angebot mit verbindlichem Festpreis, und bei Projektabschluss bekommen Sie den Quellcode.

Was ist Webentwicklung?

Webentwicklung ist die Arbeit, die aus dem Entwurf einer Website Code macht. Sie umfasst das Frontend, also alles, was Besucher sehen und bedienen, und das Backend auf dem Server, das Daten prüft und speichert und entscheidet, welche Inhalte der Browser bekommt.

Was ist der Unterschied zwischen Frontend und Backend?

Das Frontend läuft im Browser und kümmert sich um Aussehen und Verhalten der Seite. Das Backend läuft auf dem Server und entscheidet, welche Inhalte der Browser bekommt: Es prüft gesendete Daten, liest und speichert sie in einer Datenbank und schickt die passende Antwort zurück.

Was ist der Unterschied zwischen Webdesign und Webentwicklung?

Webdesign plant vor dem Code, was die Website zeigt, wie sie aussieht und wie Besucher sie bedienen. Webentwicklung setzt diesen Entwurf in Code um, im Frontend und im Backend. Bei Coday macht der Inhaber beides selbst.

Im kostenlosen Erstgespräch klären Sie mit dem Inhaber, was Ihre Website können soll. Sie sprechen dabei mit dem, der bei Coday den Code schreibt.

Alle Quellen abgerufen am 21.10.2026.

• MDN Web Docs (Mozilla): Introduction to the server side (öffnet in neuem Tab)
• MDN Web Docs (Mozilla): What is a web server? (öffnet in neuem Tab)
• MDN Web Docs (Mozilla): HTML: HyperText Markup Language (öffnet in neuem Tab)
• MDN Web Docs (Mozilla): What will your website look like? (öffnet in neuem Tab)
• React (Meta Platforms): Startseite (öffnet in neuem Tab)
• Next.js (Vercel): Next.js Docs, Startseite der Dokumentation (öffnet in neuem Tab)
• Next.js (Vercel): Server and Client Components (öffnet in neuem Tab)
• Tailwind CSS (Tailwind Labs): Startseite (öffnet in neuem Tab)
• Vite: Getting Started (öffnet in neuem Tab)
• Sanity: What is a Headless CMS? (öffnet in neuem Tab)
• Sanity: Content Lake (Datastore) (öffnet in neuem Tab)

Angaben zu Coday und zu den Referenzen stammen von den Seiten Webentwicklung, Webdesign und Terminbuchung und von den Referenzseiten auf codayweb.de. Das Anfrageformular von Batherm ist auf batherm.de/kontakt (öffnet in neuem Tab) zu sehen (abgerufen am 21.10.2026).