Schritt 1
Lernpfad
Frontend-Entwickler-Roadmap
Kostenlose Kurse in der Reihenfolge, in der ein Frontend-Entwickler sie wirklich braucht: HTML für die Struktur, CSS für das Layout, JavaScript für das Verhalten, TypeScript für Typsicherheit, React und Next.js für echte Anwendungen, Git zum Ausliefern und acht Projekte als Beweis. Jede Lektion läuft in deinem Browser, und jeder Kurs vor dem Projektschritt endet mit einem kostenlosen Zertifikat.
698,051+ codders in diesen Kursen eingeschrieben
804 Lektionen823 Aufgaben3,184 Quizfragen
- Anfängerfreundlich
KI-gestützte Coding-Hilfe
Praktische, interaktive Lektionen
Audio-Erzählung in jeder Lektion
Quizfragen zum Wissenstest
13 kostenlose Zertifikate entlang des Pfads
Der Frontend-Entwickler-Pfad, Schritt für Schritt
Jeder Schritt ist ein bestehender Coddy-Kurs. Geh sie der Reihe nach durch oder spring direkt zu dem, der dir fehlt - dein Fortschritt wird so oder so pro Kurs gespeichert.
- 1
- 2Schritt 2
CSS: Layout und GestaltungEigene Seite
Diesen Schritt startenStartenSelektoren, das Boxmodell, Farben und Typografie, dann Flexbox, Grid, responsive Layouts, Transitions und Animation über zwei Abschnitte. Das ist der Schritt, in dem eine Seite anfängt, wie die Seiten auszusehen, die du täglich benutzt.StartenEigene Seite2 Abschnitte, der Reihe nach - 3Schritt 3
JavaScript, die ganze SpracheEigene Seite
Diesen Schritt startenStartenGrundlagen, Logik und Kontrollfluss, dann Objekte und Klassen, in drei Abschnitten. Frontend-Arbeit ist JavaScript-Arbeit; jedes Framework nach diesem Schritt ist nur eine Art, sie zu organisieren, und es ist nur lesbar, wenn die Sprache es ist.StartenEigene Seite3 Abschnitte, der Reihe nach - 4Schritt 4
JavaScript im BrowserEigene Seite
Diesen Schritt startenStartenDas DOM, Events, Daten laden und interaktive Seiten ganz ohne Framework bauen, danach praktische Frontend-Muster. Hier werden HTML, CSS und JavaScript zu einer Sache: einer Seite, die auf die Person reagiert, die sie benutzt.StartenEigene Seite2 Abschnitte, der Reihe nach - 5Schritt 5
TypeScriptEigene Seite
Diesen Schritt startenStartenTypen, Interfaces, Generics und die Fehlermeldungen des Compilers als Werkzeug. Nahezu jede professionelle React-Codebasis ist TypeScript, deshalb steht es direkt vor dem Framework und nicht als Nachgedanke am Ende.StartenEigene Seite - 6Schritt 6
React und Next.jsEigene Seite
Diesen Schritt startenStartenKomponenten, Props, State, Hooks und Rendering, dann Next.js für Routing, Datenladen und echte Anwendungen. Das Framework, das die meisten Frontend-Stellen verlangen - gelehrt nach der Sprache, in der es geschrieben ist.StartenEigene Seite2 Abschnitte, der Reihe nach - 7Schritt 7
Git und VersionskontrolleEigene Seite
Diesen Schritt startenStartenCommits, Branches, Merges, Konflikte auflösen und Remotes. Jeder Frontend-Job und jedes Portfolio-Projekt lebt in einem Git-Repository; es hier zu lernen heißt, dass die Projekte im nächsten Schritt so ausgeliefert werden wie in echter Arbeit.StartenEigene Seite - 8Schritt 8
Projekte: bau nach, was du kennst
Diesen Schritt startenStartenÜbungen zu Flexbox und Selektoren, Praxis mit dem DOM und Array-Methoden, danach echte Umsetzungen: eine Coddy-Profilkarte, eine Instagram-Seite, eine Netflix-Anmeldeseite und ein Bild-Slider. Jede davon ist ein Portfolio-Stück, das ein Recruiter öffnen kann.Starten8 Kurse, der Reihe nach- CSS Flexbox - Der komplette KursNur html15 Lektionen
- CSS SelectorsNur html15 Lektionen
- JavaScript DOM-MethodenNur html13 Lektionen
- Array-Methoden in JavaScriptNur javascript18 Lektionen
- Coddy Profilkarten-Klon | Front-end-ProjektNur html26 Lektionen24 Aufgaben1 Projekt
- Instagram-Clone | Front-End-ProjektNur html16 Lektionen14 Aufgaben1 Projekt
- Netflix-Anmeldeseite-Klon | Front-end-ProjektNur html19 Lektionen18 Aufgaben1 Projekt
- Slider | Front-end-ProjektNur html23 Lektionen22 Aufgaben1 Projekt
Das bekommst du
Alles, was du zum Programmierenlernen nutzt
Lernen durch Tun
Schreibe echten Code, frage Datenbanken ab, erstelle Websites und meistere KI-Prompts. Unsere interaktiven Lektionen decken alle Fähigkeiten ab, die moderne Entwickler brauchen.
playground.js
Code-Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Eingabe
"Alex"
Ausgabe
"Hello, Coddy! Alex"
Baue deine Serie auf
Bleib konsequent und sieh zu, wie dein Fortschritt wächst! Verfolge deine tägliche Programmiergewohnheit, schütze deine Serie mit Einfrieroptionen und verdiene Belohnungen für jeden Tag.
12 Tage Serie
Komm morgen zurück, um deine Serie zu halten!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Doppelt oder Nichts
Tag 5 von 7
Serie Einfrieren
2 left
Überall coden
Nimm deine Programmierreise mit! Keine Einrichtung, keine Downloads: einfach öffnen und loslegen. Verfügbar auf iOS, Android und Web mit 4,9-Sterne-Bewertungen.
7
250
5
Variablen
FORTSETZEN
4.9
Bewertung
Du bist nicht allein
Tritt auf globalen Bestenlisten an, lade Freunde ein, um Belohnungen zu verdienen, und feiert gemeinsam eure Erfolge. Programmieren macht mit Freunden mehr Spaß!
Herausforderer-LigaTop 7 steigen auf
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
AufstiegszoneJeder Lernweg, alles dabei
Lies, höre, teste dich, frag die KI oder schlage nach, was du schon gelernt hast. Jede Lektion passt sich dir an.
Einführung in Variablen
Audio
Eine Variable ist ein benannter Container, der einen Wert speichert, auf den du später im Programm verweisen kannst.
In Python erstellst du eine, indem du den Namen, ein Gleichheitszeichen und dann den Wert schreibst.
Der Wert kann sich ändern - eine neue Zuweisung verweist den Namen einfach auf einen neuen Wert.
1xSarah
Werde zertifiziert
Verdiene Zertifikate für jeden abgeschlossenen Kurs. Füge sie deinem LinkedIn-Profil und Lebenslauf hinzu, um Arbeitgebern deine Programmierkenntnisse zu zeigen.
AbschlusszertifikatHiermit wird bestätigt, dassMax Mustermannerfolgreich abgeschlossen hatPython-Grundlagen
Python-Grundlagen
DatumJan. 2026
Zu LinkedIn hinzufügenWarum Frontend-Entwicklung mit Coddy lernen
- Du siehst die Seite, die du baust. Jede HTML-, CSS- und JavaScript-Lektion wird direkt neben deinem Code live im Browser gerendert - ein falscher Selektor oder ein kaputtes Flexbox-Layout fällt in derselben Sekunde auf, in der du es schreibst, und nicht auf einem Screenshot am Ende.
- Die richtige Reihenfolge, und kein übersprungenes JavaScript. Die meisten Frontend-Kurse hetzen von HTML direkt zu einem Framework; dieser Pfad gibt JavaScript drei volle Abschnitte vor React, denn ein Framework ist erst lesbar, wenn die Sprache darunter es ist.
- KI-Hinweise, die dein Markup und deinen Code lesen. Wenn ein Layout zerfällt oder eine Komponente nicht rendert, schaut Bugsy sich an, was du geschrieben hast, und schiebt dich in Richtung Lösung, ohne sie zu verraten.
- Projekte, die ein Recruiter öffnen kann. Der letzte Schritt sind acht echte Umsetzungen - Klone von Seiten, die du längst kennst -, jede ein teilbares Portfolio-Stück, dazu ein kostenloses Zertifikat für jeden Kurs der ersten sieben Schritte.
Häufige Fragen zum Weg in die Frontend-Entwicklung
Wie werde ich Frontend-Entwickler?
Lerne HTML, CSS und JavaScript gut genug, um aus einer leeren Datei eine Seite zu bauen, nimm TypeScript und ein Framework dazu (React ist die sichere Wahl), lerne Git und baue dann drei oder vier echte Projekte ohne Tutorial und stelle sie online. Genau das ist dieser Pfad, in genau dieser Reihenfolge. Die Projekte zählen mehr als die Zertifikate: Ein Frontend-Portfolio ist das Einzige, was eine Personalverantwortliche in dreißig Sekunden beurteilen kann.
Soll ich zuerst HTML, CSS oder JavaScript lernen?
Zuerst HTML, dann CSS, dann JavaScript - und gib JavaScript die meiste Zeit. Mit HTML fühlt man sich nach ein paar Wochen wohl, mit CSS nach etwa einem Monat; JavaScript ist eine vollwertige Programmiersprache und die Stelle, an der die meisten autodidaktischen Frontend-Entwickler abkürzen. Dieser Pfad gibt ihr drei Abschnitte plus einen Abschnitt zum DOM, bevor überhaupt ein Framework auftaucht.
Brauche ich TypeScript als Frontend-Entwickler?
Für einen Job fast immer: Die große Mehrheit professioneller React- und Next.js-Codebasen ist in TypeScript geschrieben, und eine Stellenanzeige mit „JavaScript“ meint in der Praxis meist TypeScript. Es ist ein kurzer Schritt, sobald JavaScript sitzt - deshalb steht es hier direkt vor React und nicht am Ende.
React, Vue oder Angular: Welches Framework soll ich lernen?
React, sofern eine konkrete Stelle, die du willst, nichts anderes verlangt. Es hat mit großem Abstand die meisten Stellenausschreibungen und das größte Ökosystem, und Next.js darauf ist das, womit die meisten neuen Produktivseiten gebaut werden. Die Ideen - Komponenten, State, Props, Rendering - lassen sich später in ein bis zwei Wochen auf Vue und Angular übertragen. Dieser Pfad lehrt React und Next.js.
Wie lange dauert es, Frontend-Entwicklung zu lernen?
Etwa sechs bis neun Monate bei einer Stunde am Tag bis zum Junior-Niveau mit Portfolio. Auf diesem Pfad brauchen HTML und CSS zusammen sechs bis acht Wochen, JavaScript zwei bis drei Monate, TypeScript zwei Wochen, React und Next.js sechs Wochen, und der Projektschritt dauert so lange, wie du weiterbaust. Die Zahl, die zählt, sind fertige Projekte, nicht fertige Lektionen.
Deckt dieser Pfad Testing, Barrierefreiheit oder State-Management ab?
Nicht als eigene Kurse, und wir sagen das lieber, als die Seite aufzublähen. Semantisches Markup, die Grundlage barrierefreier Seiten, gehört zum HTML-Schritt, und Reacts eigenes State-Handling wird behandelt; ein Testing-Kurs, tiefere Arbeit an Barrierefreiheit und eine State-Bibliothek stehen auf der Curriculum-Roadmap und kommen als neue Schritte in diesen Pfad, sobald sie erscheinen.
Bekomme ich allein mit kostenlosen Kursen einen Frontend-Job?
Ja, wenn die Kurse ein Portfolio hervorbringen - genau deshalb endet dieser Pfad mit acht Projekten. Arbeitgeber prüfen eine Seite, die du gebaut hast und die sie öffnen können, eine Git-Historie, die zeigt, dass du sie gebaut hast, und ein Gespräch, in dem du ein Layout und eine Komponente erklären kannst. Alle drei kommen aus diesem Pfad; keines davon erfordert ein kostenpflichtiges Bootcamp.
