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.
663,032+ codders in diesen Kursen eingeschrieben
804 Lektionen681 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 Lektionen
- Instagram-Clone | Front-End-ProjektNur html16 Lektionen
- Netflix-Anmeldeseiten-Klon | Front-end-ProjektNur html19 Lektionen1 Aufgaben
- Slider | Front-end-ProjektNur html23 Lektionen1 Aufgaben
Das bekommst du
Alles, was du zum Programmierenlernen nutzt
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
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
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to LinkedInWarum 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.
