Einstieg ins Frontend

Das Framework ist der letzte Schritt, nicht der erste

Wer Kaskade, DOM und Zustand versteht, wechselt zwischen React, Angular und Vue in Wochen. Wer damit anfängt, bleibt an jeder Abweichung vom Tutorial hängen.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Seit 1997 am Markt Kleine Gruppen Präsenz und Live-Online Zertifizierte Trainer
Worum es geht

Das Framework verdeckt genau das, was im Job gebraucht wird

Einstiegswege ins Frontend führen fast immer über ein Framework, weil dort nach zwei Stunden etwas Sichtbares entsteht. Das ist verführerisch und es funktioniert, solange die Aufgabe der Vorlage ähnelt. Die Abweichung kommt zuverlässig: ein Formular, das mit der Tastatur bedienbar sein muss, eine Liste, die bei zehntausend Einträgen ruckelt, ein Layout, das im Browser eines Kunden anders bricht.

An dieser Stelle hilft kein weiteres Framework-Kapitel, sondern Wissen darüber, wie der Browser arbeitet: was die Kaskade aus zwei widersprüchlichen Regeln macht, warum ein Element den Fokus verliert, wann der Browser neu berechnet und was ein await im Ereignisablauf tatsächlich bedeutet. Wer das überspringt, entwickelt nach Gefühl und kann Fehler nicht eingrenzen, sondern nur umgehen.

Im Bewerbungsgespräch fällt das schnell auf, weil dort selten nach Framework-Befehlen gefragt wird. Gefragt wird, warum ein Element nicht klickbar ist, was du gegen eine langsame Seite tust und wie du prüfst, ob eine Oberfläche ohne Maus bedienbar bleibt. Das sind Grundlagenfragen in Framework-Kleidung.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt
Schritt für Schritt

Der Weg in sechs Schritten

Jede Stufe zahlt auf die nächste ein. Wer eine überspringt, merkt es nicht sofort, sondern erst bei der ersten Aufgabe, die von der Vorlage abweicht.

  1. 1

    HTML als Struktur begreifen

    Überschriftenebenen, Listen, Tabellen für Daten, Formularfelder mit zugehöriger Beschriftung, Bereiche wie Navigation und Hauptinhalt. Bau eine Seite und bedien sie ausschließlich mit der Tastatur. Alles, was du dabei nicht erreichst, ist ein Fehler in der Struktur und nicht im Aussehen.

    Geschafft, wenn: deine Seite ist ohne Maus vollständig bedienbar

  2. 2

    CSS mit System statt mit Versuchen

    Kaskade und Spezifität zuerst, danach Flexbox für Reihen und Spalten, Grid für Flächen, eigene Eigenschaften für wiederkehrende Werte und ein Ansatz für verschiedene Bildschirmbreiten. Nimm eine bestehende Seite und bau ihr Layout ohne feste Pixelbreiten nach.

    Geschafft, wenn: du sagst vorher, welche von zwei Regeln gewinnt

  3. 3

    JavaScript im Browser

    Den DOM verändern, Ereignisse behandeln, Daten mit fetch holen, Module benutzen und verstehen, was mit dem Rest der Funktion nach einem await passiert. Bau eine kleine Anwendung ohne Framework, damit du siehst, welche Arbeit dir ein Framework später abnimmt.

    Geschafft, wenn: eine Anwendung mit Daten aus dem Netz läuft ohne fremde Bibliothek

  4. 4

    TypeScript dazunehmen

    Typen für Daten aus Schnittstellen, Typen für Eigenschaften von Komponenten, und die Erkenntnis, dass die meisten Fehler im Frontend Verwechslungen zwischen erwarteter und tatsächlicher Datenform sind. Angular setzt TypeScript ohnehin voraus, im React- und Vue-Umfeld ist es der übliche Standard.

    Geschafft, wenn: dein Werkzeug meldet den Fehler, bevor du die Seite öffnest

  5. 5

    Ein Framework begründet wählen

    React ist der breiteste Arbeitsmarkt und eine Bibliothek, um die du dir dein Umfeld selbst zusammenstellst. Angular liefert ein vollständiges Gerüst mit festen Vorgaben und ist in großen, langlebigen Anwendungen zu Hause. Vue.js hat den sanftesten Einstieg und ist bei Agenturen und kleineren Teams verbreitet. Bau in einem davon ein Projekt zu Ende, statt drei anzufangen.

    Geschafft, wenn: du begründest deine Wahl mit Arbeitsmarkt und Projektgröße

  6. 6

    Barrierefreiheit und Geschwindigkeit als Abnahme

    Prüf mit der Tastatur, mit einem Vorleseprogramm und mit einem Messwerkzeug im Browser. Für viele Angebote an Verbraucher gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz, das sich auf die europäische Norm und damit auf die WCAG-Kriterien stützt. Wer das im Bewerbungsgespräch erklären kann, hebt sich deutlich ab.

    Geschafft, wenn: du benennst zu einer Seite drei konkrete Mängel und ihre Behebung

Sechs Stufen von der ersten Seite zum Framework

  1. 01 HTML als Bedeutung lesen, nicht als Gestaltungswerkzeug.
  2. 02 CSS mit Kaskade, Flexbox und Grid statt mit Zufallswerten.
  3. 03 JavaScript im Browser: DOM, Ereignisse und asynchrone Daten.
  4. 04 TypeScript, damit Fehler beim Schreiben statt beim Klicken auffallen.
  5. 05 Ein Framework begründet wählen und darin ein Projekt bauen.
  6. 06 Barrierefreiheit und Geschwindigkeit als Abnahmekriterien prüfen.
Was du mitnimmst

Was du am Ende dieses Wegs kannst

Frontend ist die Schicht, an der Nutzung, Zugänglichkeit und Geschwindigkeit zusammenkommen. Die folgenden Punkte sind das, was davon in jeder Stelle vorkommt, unabhängig vom eingesetzten Werkzeug.

Struktur vor Gestaltung

Du baust Seiten aus den Elementen, die ihre Bedeutung tragen, beschriftest Formularfelder richtig und bekommst Tastaturbedienung und Vorlesbarkeit damit größtenteils geschenkt.

CSS ohne Ratespiel

Du erklärst, welche von zwei Regeln gewinnt und warum, baust Layouts mit Flexbox und Grid statt mit Abstandshilfen und arbeitest mit eigenen Eigenschaften statt mit kopierten Zahlen.

Zustand im Griff

Du weißt, wo eine Information leben soll, wann sie von oben kommt und wann sie gemeinsam genutzt wird, und erkennst, warum eine Oberfläche gerade nicht neu zeichnet.

Asynchrones sauber behandeln

Du lädst Daten, zeigst Ladezustände und Fehlerfälle statt einer leeren Fläche und brichst Anfragen ab, die niemanden mehr interessieren.

Barrierefreiheit als Anforderung

Du prüfst eine Oberfläche mit der Tastatur, kennst die Kriterien nach WCAG in der Stufe AA und weißt, welche Anbieter das seit dem Barrierefreiheitsstärkungsgesetz erfüllen müssen.

Geschwindigkeit messen statt schätzen

Du misst Ladezeit und Reaktion mit den Werkzeugen des Browsers, erkennst zu große Bilder und blockierende Skripte und kannst begründen, welche Verbesserung sich wirklich lohnt.

KI-generiertDieses Bild wurde mit KI erzeugt · Yves Hoppe / KI / cmt

Was im Alltag tatsächlich anfällt

Der Entwurf kommt in den meisten Häusern fertig aus einem Gestaltungswerkzeug, und genau dort hört die einfache Arbeit auf. Was im Entwurf fehlt, ist alles außer dem Normalfall: der Ladezustand, die leere Liste, der Fehler aus der Schnittstelle, der zu lange Name, die abgeschnittene Überschrift auf einem schmalen Gerät, die Meldung nach einem abgelehnten Formular.

Ein zweiter Anteil ist die Abstimmung mit dem Backend. Welche Felder liefert die Schnittstelle wirklich, was passiert bei einem Zeitüberschreitungsfehler, wer prüft die Eingaben, und wie sieht die Antwort aus, wenn keine Berechtigung vorliegt. Frontend-Arbeit ist zu einem guten Teil Verhandlung über Datenformen.

Falsch erwartet wird die Nähe zum Design. Gestaltung ist ein eigener Beruf, und wer ins Frontend geht, weil er gern gestaltet, landet bei Zuständen, Zugänglichkeit und Ladezeiten. Umgekehrt hilft ein Auge für Details sehr wohl, vor allem beim Umsetzen von Abständen, Schriftgrößen und Übergängen.

Die drei Frameworks nüchtern eingeordnet

React ist keine vollständige Lösung, sondern eine Bibliothek für die Oberfläche. Routing, Datenabruf und Formularlogik wählst du dazu, und genau das macht den Einstieg unübersichtlich, weil zwei React-Projekte sehr verschieden aussehen können. Dafür ist der Arbeitsmarkt der breiteste, und wer React kann, findet in fast jeder Stadt Stellen.

Angular bringt alles mit: Routing, Formulare, Datenabruf, Werkzeugkette und eine feste Ordnerstruktur. Das erzeugt Aufwand am Anfang und zahlt sich in großen Anwendungen aus, an denen viele Jahre gearbeitet wird, weil ein neues Teammitglied sich sofort zurechtfindet. Der Einsatz konzentriert sich entsprechend auf größere Unternehmen und langlebige Fachanwendungen.

Vue.js sitzt dazwischen und hat den sanftesten Einstieg, weil Vorlage, Logik und Gestaltung einer Komponente in einer Datei zusammenliegen. Verbreitet ist es bei Agenturen, in kleineren Produktteams und in Projekten, die aus einer bestehenden Seite herausgewachsen sind. Wer es kann, hat weniger Stellen zur Auswahl als mit React, aber selten Konkurrenz.

Der Weg hinein und was zählt statt Zertifikaten

Formal führen zwei Wege hinein: die Ausbildung zum Fachinformatiker für Anwendungsentwicklung und der Quereinstieg aus Gestaltung, Medien oder Redaktion. Der zweite ist im Frontend häufiger als in anderen Entwicklungsberufen, weil ein Teil der Arbeit sichtbar ist und sich damit belegen lässt.

Zertifikate spielen kaum eine Rolle. Was zählt, sind Seiten, die man aufrufen kann, und der Blick in den Quelltext dahinter. Zwei bis drei kleine, fertige Projekte sagen mehr als zehn angefangene, und ein Projekt, das mit der Tastatur bedienbar ist und schnell lädt, sagt mehr als eines mit aufwendigen Animationen.

Ein Unterscheidungsmerkmal, das in Bewerbungen selten auftaucht und im Gespräch fast immer ankommt: Barrierefreiheit erklären können. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für einen Teil der Angebote an Verbraucher, und in vielen Häusern sucht gerade jemand nach einer Person, die weiß, was das für die eigene Oberfläche bedeutet.

Woran sich zwei Leute mit gleicher Berufsdauer unterscheiden

Der erste Unterschied ist der Umgang mit Zuständen. Die eine plant vorher, welche Information wo lebt, der andere schiebt sie später durch immer mehr Ebenen weiter. Nach zwei Jahren hat die eine Komponenten, die sich einzeln testen lassen, und der andere eine Anwendung, in der jede Änderung an drei Stellen Wirkung zeigt.

Der zweite Unterschied ist die Bereitschaft, Messwerkzeuge zu öffnen. Wer Ladezeit, Bildgrößen und blockierende Skripte misst, argumentiert im Team mit Zahlen und bekommt Zeit für Verbesserungen. Wer schätzt, diskutiert über Geschmack und verliert.

Der dritte Unterschied ist die Nähe zum Nutzen. Frontend ist die Schicht, an der Menschen scheitern, und wer einmal jemandem beim Ausfüllen eines eigenen Formulars zugesehen hat, baut das nächste anders. Diese Erfahrung ersetzt viel Theorie über Bedienbarkeit.

Wohin es von hier weitergeht

Der breiteste Weg führt in Richtung Fullstack, weil viele Teams nicht mehr streng trennen und die Arbeit an der Schnittstelle ohnehin von beiden Seiten kommt. Wer dorthin will, lernt als Nächstes eine Serversprache, Datenbanken und die Frage, wo Eingaben geprüft werden.

Zwei Spezialisierungen sind gefragt und dünn besetzt: Barrierefreiheit, weil die rechtlichen Anforderungen jetzt greifen und viele Häuser niemanden mit dieser Kenntnis haben, und Design-Systeme, also der Aufbau wiederverwendbarer Bausteine für mehrere Anwendungen. Beides führt schnell zu einer Rolle mit Entscheidungsspielraum.

Zu den Zahlen weiter unten gehört ein Vorbehalt, der auf keiner Ratgeberseite steht: Die amtliche Klassifikation kennt keine eigene Berufsgattung für Frontend. Was du siehst, ist Softwareentwicklung insgesamt, und daraus lässt sich nicht ablesen, ob Erfahrung mit React anders bezahlt wird als Erfahrung mit Java.

Dazu passende Kurse

Wer den Unterbau geordnet lernen will, findet in den Kurse zu HTML, CSS und JavaScript genau diese Reihenfolge samt Frameworks obendrauf.

Wenn dir das Programmieren selbst noch fehlt, gehören die Grundlagen der Programmierung als Unterbau vor jeden Framework-Kurs.

Was verdient man

Die amtlichen Zahlen zu dieser Rolle

Die Klassifikation der Berufe kennt keine eigene Gattung für Frontend, deshalb stehen hier die Werte für Softwareentwicklung insgesamt, und sie sagen nichts darüber aus, ob Erfahrung mit React anders bezahlt wird als Erfahrung mit Java. Fachkraft und Spezialist sind zwei Anforderungsniveaus, also zwei Zuschnitte von Stellen, und keine Stufen deiner Berufserfahrung. Es sind Bruttomonatswerte für Vollzeit ohne Sonderzahlungen, Weihnachts- und Urlaubsgeld fehlen darin, dein Jahresverdienst liegt also über dem Zwölffachen. Der Median trägt weiter als der Durchschnitt, den einzelne Spitzenverdienste nach oben ziehen.

Amtliche Medianverdienste, April 2025

Brutto im Monat

Statistisches Bundesamt, Verdiensterhebung. Vollzeit, ohne Sonderzahlungen. Die Hälfte der Beschäftigten verdient weniger als der Median, die andere Hälfte mehr.

Softwareentwicklung Fachkraft 4.201 €

KldB 43412, Durchschnitt 4.608 €, gerundet rund 50.000 € im Jahr ohne Sonderzahlungen

Softwareentwicklung Spezialist 5.986 €

KldB 43413, Durchschnitt 6.238 €, gerundet rund 72.000 € im Jahr ohne Sonderzahlungen

02k4k6k
  • Vollzeitbeschäftigte, Bruttomonatsverdienst ohne Sonderzahlungen. Weihnachts- und Urlaubsgeld, Prämien und Boni sind nicht enthalten, der Jahresverdienst liegt also über dem Zwölffachen.
  • Das Anforderungsniveau beschreibt den Zuschnitt der Stelle, nicht die Berufserfahrung. Fachkraft, Spezialist und Experte sagen etwas über die Komplexität der Tätigkeit aus, nicht über Dienstjahre.
  • Die Erhebung geht regional nur bis auf die Bundeslandebene. Für einzelne Städte gibt es keine amtlichen Zahlen, weil der Zufallsfehler zu groß wäre.

Quelle: Statistischer Bericht Verdienste , Statistisches Bundesamt (Destatis). Den eigenen Fall prüfst du im Entgeltatlas der Bundesagentur für Arbeit . Beachte dort: Entgelte oberhalb der Beitragsbemessungsgrenze sind der Statistik nicht bekannt, bei gut bezahlten IT-Rollen steht deshalb nur eine Untergrenze.

Wissen prüfen

Wie sicher bist du beim Thema wirklich?

Lesen fühlt sich schnell nach Können an. Ein kurzer Test zeigt dir, was davon schon sitzt und wo sich ein Kurs lohnt. Kostenlos, ohne Anmeldung, mit einer Erklärung zu jeder Antwort.

Der passende Lernpfad

Wenn du nicht nur ein Thema abhaken, sondern eine Rolle ausfüllen willst, zeigt dir der Lernpfad die Kurse in der Reihenfolge, in der sie aufeinander aufbauen.

Karrierepfad

Dein Weg zum React Entwickler

Moderne Web-Produkte werden heute mit React gebaut. Wer es sauber beherrscht, arbeitet an echten Web-Anwendungen – nicht an Spielwiesen.
 

Dieser Karrierepfad führt dich gezielt von den Grundlagen über Architektur und Design bis hin zu professionellen React-Frontends, wie sie in produktiven Teams erwartet werden. Starte einfach durch!

Ein sehr gutes, praxisorientiertes und nachhaltiges Seminar. So sollte es immer sein. Vielen Dank.
LimeSurvey - Anwendertraining Teil 1 (Grundlagen)
Ein sehr guter und verständlicher Überblick über die Grundlagen im Umgang mit BricsCAD.
BricsCAD 2D Schulung Grundkurs
Alle meine Erwartungen wurden erfüllt und ich habe mich sehr gut aufgenommen gefühlt, jede Frage wurden Probleme direkt beseitigt.
BricsCAD 3D Schulung - Grundlagen

Häufige Fragen

Muss ich gestalten können?
Nein, aber du musst einen Entwurf lesen können. In den meisten Teams kommt die Gestaltung aus einem eigenen Beruf, und deine Aufgabe ist die Umsetzung inklusive aller Fälle, die im Entwurf fehlen. Ein Auge für Abstände, Schriftgrößen und Zustände hilft trotzdem, weil du sonst bei jeder Lücke nachfragen musst.
Welches Framework soll ich lernen?
Das, was in den Stellen deiner Region steht, und zwar erst nach den Grundlagen. React bietet die meisten Stellen, Angular ist in großen Fachanwendungen zu Hause, Vue.js bei Agenturen und kleineren Teams. Der Wechsel zwischen ihnen kostet Wochen, wenn HTML, CSS, JavaScript und TypeScript sitzen, und Monate, wenn nicht.
Brauche ich TypeScript wirklich?
In Angular ist es gesetzt, in React- und Vue-Projekten inzwischen der Normalfall, und in Stellenanzeigen steht es entsprechend oft. Der Nutzen zeigt sich nicht am ersten Tag, sondern bei der ersten Änderung an einer Schnittstelle: Der Übersetzer zeigt dir alle Stellen, die davon betroffen sind, statt dass du sie einzeln beim Klicken findest.
Wie wichtig ist Barrierefreiheit für eine Bewerbung?
Deutlich wichtiger als noch vor wenigen Jahren, weil seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz für einen Teil der Angebote an Verbraucher gilt. Wer im Gespräch erklären kann, wie er eine Oberfläche mit der Tastatur prüft und was die Stufe AA verlangt, unterscheidet sich sofort von Bewerbungen, die nur Frameworks aufzählen.

Passt thematisch dazu

Welches Framework am Ende auf dem Tisch liegt, entscheidet meistens das Team und nicht du allein, deshalb lohnt der Blick darauf, woran ein Team die Wahl zwischen React, Vue, Angular und Svelte festmacht .

Weil Tastaturbedienung und Kontraste mit dem Barrierefreiheitsstärkungsgesetz für viele Angebote verbindlich geworden sind, gehören die Anforderungen der WCAG-Stufe AA an eine Website früh in die Planung und nicht in die Nachbesserung.

Persönlich für dich da

Deine Ansprechpartner

Du bist dir nicht sicher, welcher Kurs oder welches Level zu dir passt? Wir beraten dich persönlich und kostenlos.

Yves Hoppe

Yves Hoppe

Weiterbildung & Beratung

Hilft dir, aus dem IT-Berufe-Programm den passenden Kurs für deinen Stand zu finden.

Norbert Jansen

Norbert Jansen

Beratung & Inhouse

Plant mit dir Inhouse-Trainings, die auf eure Abläufe und euren Datenbestand zugeschnitten sind.

Erst der Unterbau, dann das Werkzeug

Bei cmt gehst du HTML, CSS und JavaScript in der Reihenfolge durch, in der sie aufeinander aufbauen, und entscheidest dich danach mit Gründen für React, Angular oder Vue.js.