FRONTEND-MASTERY-PFAD

Ein professioneller Weg durch Frontend Engineering – ohne Lernen zu einem Rennen zu machen.

Diese Karte zeigt dir Abhängigkeiten, Tiefe und Kontext. Nutze sie als Navigationssystem: folge ihr vollständig, steige auf deinem aktuellen Niveau ein oder bearbeite Algorithmen parallel.

08Stufen

04Wissenssäulen

∞dein eigenes Tempo

EINSTIEGSPUNKT

Starte dort, wo dein Verständnis wirklich steht

Du musst nicht bei Stufe 01 beginnen, wenn sich die Voraussetzungen bereits selbstverständlich anfühlen.

Von den Grundlagen aus starten

Mit JavaScript Core beginnen

Ideal, wenn Scope, Closures, Prototypen, asynchrones Verhalten oder Browser-APIs noch nicht durchgehend sicher sitzen.

Bei Stufe 01 beginnen →Sicher in JavaScript

Beim React-Mentalmodell einsteigen

Nutze diesen Einstieg, wenn du Closures, Promises, den Event Loop, Objekte und Module bereits ohne größere Schwierigkeiten erklären kannst.

Bei Stufe 03 beginnen →Du entwickelst bereits React-Apps

Weiter zu Architektur und Next.js

Wähle diesen Einstieg, wenn Render-Zyklen, Effects, Refs, Context, Composition sowie Server-/Client-Grenzen bereits klar sind.

Bei Stufe 05 beginnen →

ABHÄNGIGKEITSKARTE

Wie die Teile voneinander abhängen

01JavaScript-Kern→02Runtime & Browser→03React-Modell→04React-Architektur→05Next.js

parallel nach den JavaScript-Grundlagen

06 DSA-Grundlagen→07 DSA-Muster

08Die Ebenen verbindenSprache ↔ Framework ↔ Architektur ↔ Algorithmen

DER LERNWEG

Acht Stufen, jede mit einem Grund

Die Anzahl der Sitzungen zeigt nur den ungefähren Umfang. Bleib länger dort, wo die Ideen nützlich oder interessant sind.

SPRACHGRUNDLAGEN4–6 entspannte Leseeinheiten

JavaScript Core — verstehen, was die Sprache tatsächlich tut

Baue ein verlässliches Mentalmodell für Werte, Scope, Funktionen, Objekte, Prototypen, Coercion und Module auf, bevor Framework-Komplexität dazukommt.

WARUM DIES HIER KOMMT

React und Next.js bauen ständig auf JavaScript-Verhalten auf. Ist diese Schicht unklar, wirken Framework-Regeln willkürlich.

In dieser Reihenfolge lesen

01Scope, lexikalische Umgebung & ClosuresKern↗02this, call/apply/bind & Funktionsformen↗03Objekte, Prototypen & Vererbung↗04Typen, Gleichheit, Coercion & Immutability↗05Module, Destructuring & moderne Syntax↗

Wenn diese Stufe klar ist

Du kannst erklären, warum sich JavaScript auf eine bestimmte Weise verhält – nicht nur, was ausgegeben wird.

Du kannst unbekannten Code lesen, ohne bei Scope, Referenzen oder Object Lookup raten zu müssen.

JavaScript-Bibliothek öffnen →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

RUNTIME & BROWSER3–5 entspannte Leseeinheiten

Asynchrones JavaScript — Zeit, Tasks und Browser verstehen

Gehe von Syntax zu Runtime-Verhalten über: Event Loop, Promises, async/await, Netzwerk, DOM, Storage, Fehler und Performance.

WARUM DIES HIER KOMMT

Die schwierigsten Frontend-Bugs sind häufig Timing-, Lifecycle-, Netzwerk- oder Browser-State-Probleme und keine Syntaxfehler.

In dieser Reihenfolge lesen

01Event Loop, Call Stack & Queueswesentlich↗02Promises, Microtasks & async/await↗03Fetch, AbortController & Fehlerbehandlung↗04DOM, Events & Browser Storage↗05Performance, Speicher & Debouncing↗

Wenn diese Stufe klar ist

Du kannst asynchronen Code in Ausführungsreihenfolge verfolgen und Microtasks von Tasks unterscheiden.

Du erkennst Browser-Themen wie Abbruch, Cleanup, Storage, Event Propagation und Performance-Kosten.

↳

Optionaler Abstecher: Code-Reading-Notizen

Nutze die kuratierten JavaScript-Notizen, wenn du zwischen langen Repository-Antworten kürzere, ausgewählte Erklärungen möchtest.

Async- & Browser-Themen lesen →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

REACT-MENTALMODELL4–6 entspannte Leseeinheiten

React-Grundlagen — in Render, State und Composition denken

Lerne React als Rendering-Modell statt als Sammlung von Hooks. Beginne mit Komponenten, State, Identität, Render/Commit, Events und Composition.

WARUM DIES HIER KOMMT

Wenn das Render-Modell klar ist, wirken Hooks nicht mehr wie isolierte Regeln, sondern wie vorhersehbare Werkzeuge.

In dieser Reihenfolge lesen

01Komponenten, JSX, Props & StateGrundlage↗02Render, Commit, Identität & Keys↗03Events, kontrollierte Inputs & Lifting State↗04Composition, Children & wiederverwendbare UI↗05Virtual DOM, Reconciliation & Fiber↗

Wenn diese Stufe klar ist

Du kannst erklären, was einen Render auslöst und was React zwischen Rendern beibehält oder zurücksetzt.

Du kannst Komponenten-Grenzen und State Ownership anhand des Datenflusses statt aus Gewohnheit wählen.

React-Bibliothek öffnen →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

REACT-ARCHITEKTUR5–7 entspannte Leseeinheiten

React in der Praxis — Effects, Refs, Context, Performance und moderne Grenzen

Vertiefe Synchronisierung, Escape Hatches, Shared State, Memoization, Suspense, Server Components, Routing, Testing und Legacy Context.

WARUM DIES HIER KOMMT

Hier wird produktives React zur Architekturfrage: Die richtige Grenze ist meist wichtiger als noch eine API zu kennen.

In dieser Reihenfolge lesen

01Effects als Synchronisierung, nicht als Event Handlerwichtig↗02Refs, Reducer & Custom Hooks↗03Context, State Libraries & Data Ownership↗04Memoization und Performance-Trade-offs↗05Suspense, Server Components & modernes React↗06Testing, Accessibility & Error Boundaries↗

Wenn diese Stufe klar ist

Du kannst erkennen, wann ein Effect nötig ist – und wann Derived State oder ein Event Handler besser passt.

Du kannst Performance- und State-Management-Entscheidungen als Trade-offs diskutieren statt mit pauschalen Regeln.

↳

Mit Hooks & Projektmustern üben

Wechsle in der React-Bibliothek zu Custom Hooks oder Project Patterns, wenn du sehen möchtest, wie Ideen im Code zusammenspielen.

Fortgeschrittenes React erkunden →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

NEXT.JS-ARCHITEKTUR4–6 entspannte Leseeinheiten

Next.js — zuerst die Server-/Client-Grenze verstehen, dann APIs lernen

Lerne den App Router über Architektur: Layouts, React Server Components, Client-Grenzen, Route Handlers, Server Actions, Caching, Streaming, Metadata und Rendering-Entscheidungen.

WARUM DIES HIER KOMMT

Die meiste Next.js-Verwirrung entsteht, wenn Browser-, React-, Server-, Cache- und Request-Time-Aspekte vermischt werden. Diese Stufe trennt die Ebenen.

In dieser Reihenfolge lesen

01App Router, Layouts, Templates & Route GroupsArchitektur↗02RSC und die Client-Grenze↗03Server Actions vs. Route Handlers↗04Caching, Revalidation & Datenaktualität↗05Streaming, Suspense & Rendering-Strategie↗06Metadata, Sicherheit & Produktionsaspekte↗

Wenn diese Stufe klar ist

Du kannst entscheiden, wo Code laufen sollte, und erklären, warum diese Grenze wichtig ist.

Du kannst statische, dynamische, gecachte, gestreamte und Mutation-Flows vergleichen, ohne sie als unabhängige Features zu behandeln.

Next.js-Notizen öffnen →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

DSA-GRUNDLAGE — PARALLELER PFADFortlaufendes paralleles Lesen

Datenstrukturen & Kernalgorithmen — den Werkzeugkasten aufbauen

Sobald sich die JavaScript-Grundlagen sicher anfühlen, starte diesen Pfad parallel. Beginne mit Datenstrukturen, Suche, Sortierung, Rekursion, Hashing und Komplexität.

WARUM DIES HIER KOMMT

Algorithmen werden leichter, wenn du sie als Entscheidungen über Repräsentation und Trade-offs siehst – nicht als Rätsel zum Auswendiglernen.

In dieser Reihenfolge lesen

01Big-O und praktische KomplexitätGrundlage↗02Arrays, Linked Lists, Stacks & Queues↗03Hash Tables, Sets & Cache-Strukturen↗04Binary Search und Suchmuster↗05Sortierfamilien und Trade-offs↗06Rekursion, Divide-and-Conquer & grundlegende Trees↗

Wenn diese Stufe klar ist

Du kannst eine Struktur anhand von Zugriff, Einfügen, Ordnung und Speicherbedarf auswählen.

Du kannst einen Algorithmus mit Invarianten, Schritten und Komplexität erklären statt mit auswendig gelerntem Code.

Algorithmen-Bibliothek öffnen →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

TIEFERE DSA-MUSTERSchrittweise erkunden; regelmäßig zurückkehren

Trees, Graphen, Dynamic Programming und Problemfamilien

Gehe von einzelnen Algorithmen zu wiederverwendbaren Mustern über: Traversal, Shortest Paths, Connectivity, Greedy, Backtracking, Memoization und Dynamic Programming.

WARUM DIES HIER KOMMT

Fortgeschrittene Probleme werden beherrschbar, wenn du zuerst die Problemfamilie und danach den konkreten Algorithmus erkennst.

In dieser Reihenfolge lesen

01DFS, BFS & Traversal-Muster↗02Dijkstra, Bellman-Ford & kürzeste WegeGraphen↗03Union-Find, MST & Connectivity↗04Backtracking und Suchräume↗05Dynamic Programming & Memoization↗06Klassische Probleme: LCS, Knapsack, Max Subarray↗

Wenn diese Stufe klar ist

Du kannst Graph-, Greedy-, Backtracking- und DP-Problemformen erkennen, bevor du Code schreibst.

Du kannst mehrere gültige Lösungen vergleichen und erklären, warum eine davon für bestimmte Constraints besser passt.

Fortgeschrittene Algorithmen erkunden →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

KONSOLIDIERUNGKehre zurück, wenn du wieder den größeren Zusammenhang sehen möchtest

Die Ebenen verbinden — Ideen durch echte Frontend-Entscheidungen erneut betrachten

Es gibt keine Abschlussprüfung. Nutze diese Stufe, um Themen wieder aufzugreifen, die sich jetzt verbinden: Closures mit Hooks, Event Loop mit Effects, Caching mit Next.js, Trees mit UI und Komplexität mit Performance.

WARUM DIES HIER KOMMT

Meisterschaft entsteht durch Verbindungen. Ein Konzept bleibt dauerhaft, wenn du es aus Sprach-, Framework-, Architektur- und Algorithmus-Perspektive sehen kannst.

In dieser Reihenfolge lesen

01Closure ↔ Hooks und Callbacks↗02Event Loop ↔ Effects und UI-Timing↗03Caching ↔ Datenaktualität und Next.js↗04Trees ↔ Komponenten-/UI-Strukturen↗05Komplexität ↔ Frontend-Performance↗

Wenn diese Stufe klar ist

Du kannst zwischen niedrigstufigem JavaScript-Verhalten und hochstufiger Anwendungsarchitektur wechseln.

Du hast eine Karte, mit der du schwache oder interessante Bereiche erneut besuchen kannst, ohne den ganzen Weg neu zu starten.

Alle Frontend-Notizen durchsuchen →Lies langsam. Geh weiter, wenn die Idee zusammenhängend wirkt.

EIN RUHIGER LERNZYKLUS

Ein hilfreicher Rhythmus für jedes Thema

Kein Zeitplan – nur eine Methode, passives Scrollen und überladene Lernsitzungen zu vermeiden.

Das mentale Modell lesen

Beginne mit einem Konzept und seiner vollständigen Antwort. Optimiere nicht auf Menge.

Den Code untersuchen

Lies ein kleines Beispiel Zeile für Zeile und verbinde jede Zeile mit dem Konzept.

Ein benachbartes Konzept verbinden

Folge einem verwandten Thema, damit die Idee Teil eines Netzwerks und keine isolierte Tatsache wird.

Später zurückkehren

Erneutes Lesen nach einer Pause ist sinnvoll. Du musst ein Regal nicht in einem Durchgang abschließen.

TIEFENLEITFADEN

Wie tief solltest du lesen?

Kern

Verstehe das mentale Modell und erkläre es mit einem kleinen Beispiel.

Anwendungstiefe

Kenne typische Trade-offs, Edge Cases und wie das Thema in echtem Code auftaucht.

Vertiefen

Lies Interna oder fortgeschrittene Varianten, wenn das Thema für deine Arbeit oder Neugier relevant ist.

DIE KARTE BEHALTEN, DEN DRUCK LOSLASSEN

Das Ziel ist nicht, den Weg abzuschließen. Das Ziel ist, die Ebenen miteinander zu verbinden.

Kehre zu dieser Seite zurück, wenn du den Überblick verlierst. Wähle die nächste klare Abhängigkeit, lies ein wenig und folge dann der Verbindung, die sinnvoll ist.

Mit JavaScript beginnen Zurück zum Leseraum