Frontend lernen & üben
Frontend lernen & üben — Frontend-Entwicklung von HTML bis React mit Live-Vorschau
Frontend lernen & üben ist eine kostenlose iOS- und Android-App für Anfänger, Designer und Quereinsteiger, die Webentwickler werden möchten. HTML, CSS und JavaScript stehen in einem Live-Editor nebeneinander, während die Seite darunter bei jeder Eingabe aktualisiert wird. 41 Kurse und 163 kurze Lektionen führen dich vom ersten Tag über responsive Layouts und TypeScript bis zu React und Vue – mit 20 geführten Projekten, Debugging-Missionen und einem KI-Mentor für den Fehler, den du einfach nicht findest.
- Preis
- Kostenlos, Pro-Upgrade
- Plattformen
- iOS und Android
- Sprachen
- 22
- Altersfreigabe
- 4+
- Erfordert
- iOS 15.1 oder neuer
Ändere eine Zeile und sieh zu, wie sich die Seite verändert.
Der Editor zeigt HTML-, CSS- und JavaScript-Bereiche nebeneinander mit einer Live-Vorschau darunter. So lernst du Markup, Styling und Verhalten als eine gemeinsame Seite statt als drei getrennte Themen.
Was es ist
Frontend lernen & üben ist eine kostenlose iOS- und Android-App, die dir Frontend-Entwicklung beibringt – also den Teil einer Website, den Menschen sehen und bedienen –, und dafür einen Live-Editor für HTML, CSS und JavaScript auf dem Smartphone nutzt. Die App bietet 41 Kurse und 163 Lektionen auf Lernstufen vom Anfänger- bis zum Senior-Level und behandelt die Grundlagen des Webs, responsive Layouts, JavaScript und das DOM, TypeScript, React, Vue, Testing, Barrierefreiheit und Performance. Dazu kommen geführte Projekte, Debugging-Missionen, Interviewfragen und ein KI-Mentor.
In der App
So sieht es aus
Der Kurs
Das behandelt der Frontend-Kurs
41 Kurse und 163 Lektionen aus der kurseigenen Liste der App: vom ersten HTML-Tag bis zur Frontend-Architektur und Engineering auf Senior-Level.
Das Web und die drei Grundlagen
Willkommen in der Frontend-Entwicklung, So funktioniert das Web, HTML-Grundlagen, CSS-Grundlagen und JavaScript-Grundlagen.
Layout und Responsive Design
Grundlagen des Responsive Designs, HTML-Formulare und semantisches Markup, CSS-Layout auf Expertenniveau sowie CSS-Variablen, Übergänge und Animationen.
JavaScript im Browser
Das DOM und Browser-APIs, Arrays, Objekte und ES6+, asynchrone Programmierung sowie JavaScript-Module und Build-Tools.
Arbeitsabläufe und Tools
Entwicklertools und Arbeitsabläufe, Git und kollaborative Arbeitsabläufe sowie moderne Frontend-Tools.
TypeScript
Einführung in TypeScript, vertiefte Kenntnisse zu Types und Interfaces sowie fortgeschrittenes TypeScript für das Frontend.
React und Vue
React-Grundlagen, useEffect und Datenabfragen, fortgeschrittene Hooks und Patterns, anschließend Vue 3-Grundlagen, die Composition API und fortgeschrittene Vue-Patterns.
Daten, Rendering und Echtzeit
State Management, API-Integration und REST, serverseitiges Rendering mit Next.js und Nuxt 3, Progressive Web Apps sowie WebSockets und Frontend in Echtzeit.
Qualität und Architektur
Barrierefreiheit, Frontend-Testing, Optimierung der Web-Performance, Frontend-Sicherheit, CSS-Architektur, Design-Systeme, Frontend-CI/CD und Frontend-Engineering auf Senior-Level.
So funktioniert es
So lernst du damit
Die Reihenfolge der App folgt der Reihenfolge des Handwerks: Baue zuerst eine Seite, bringe sie dann zum Reagieren und lerne anschließend die Werkzeuge, mit denen du sie skalierst.
Beginne mit dem kostenlosen ersten Kurs
Welcome to Frontend Development eröffnet dir den Lernweg, und der Live-Editor ist von Anfang an kostenlos. Jede Lektion besteht aus einer wenige Minuten langen Erklärung und anschließend einer Aufgabe, die du verändern und ausführen kannst.
Bearbeite einen Bereich und lies die Vorschau
Ändere das HTML, CSS oder JavaScript, und die Vorschau darunter wird entsprechend aktualisiert. Neue Projekte können mit einer HTML-, React-, Vue-, Angular-, Node- oder TypeScript-Vorlage gestartet werden.
Baue Projekte und behebe echte Fehler
In 20 geführten Projekten erstellst du Schritt für Schritt eine Rezeptseite, ein Kontaktformular, ein Kartenraster, eine Navbar und eine Datentabelle. In 15 Debugging-Missionen bekommst du fehlerhafte Seiten zur Reparatur.
Was steckt drin
Das bietet die App
41
Kurse vom Anfänger- bis zum Senior-Level
163 Lektionen auf den Stufen A1 bis C2 – von der Funktionsweise des Webs und den HTML-Grundlagen bis zu TypeScript, React, Vue 3, State Management, serverseitigem Rendering mit Next.js und Nuxt 3 sowie Progressive Web Apps.
Live
Editor mit Sofortvorschau
HTML-, CSS- und JavaScript-Bereiche mit einer Vorschau darunter, sodass jede Änderung sofort sichtbar wird. Starte neue Projekte mit Vorlagen für verschiedene Frameworks.
15
Debugging-Missionen
Missionen mit echten Frontend-Problemen: ein Layout, das bei 375 Pixeln zerbricht, ein Bild, das die Seite verlangsamt, ein Formular, das niemand per Tastatur erreichen kann, ein Memory Leak in einer Komponente und ein Test, der lokal erfolgreich ist, aber in CI fehlschlägt.
20
Geführte Projekte
Kleine Projekte, die Schritt für Schritt erklärt werden, etwa eine Rezeptseite, ein Kontaktformular, ein Kartenraster, eine Navbar und eine Datentabelle.
KI
KI-Mentor und Playground
Frage nach einem Fehler, einer Lektion oder deinem eigenen Code oder beschreibe im KI-Playground eine Seite und sieh zu, wie der Code geschrieben wird. Kostenlose Nutzer erhalten drei KI-Fragen pro Tag.
50
Interviewfragen mit Antworten
50 Interviewfragen mit Antworten für Frontend- und Webentwickler sowie ein Spickzettel mit 83 Einträgen zu Syntax und Mustern und eine Sammlung kurzer Beispiele, die du öffnen und bearbeiten kannst.
Hintergrund
Was lernt ein Frontend-Entwickler eigentlich – und in welcher Reihenfolge?
Ein Frontend-Entwickler erstellt das, was im Browser läuft: die Struktur einer Seite, ihr Aussehen auf jeder Bildschirmgröße und ihre Reaktion auf Klicks, Eingaben und Scrollbewegungen. Die sinnvolle Reihenfolge lautet: zuerst die Struktur (HTML), dann die Darstellung (CSS), danach das Verhalten (JavaScript) und erst anschließend die Werkzeuge für größere Projekte: TypeScript, ein Framework wie React oder Vue, Testing und ein Build-Schritt. Wer vor den drei Grundlagen direkt mit einem Framework beginnt, bleibt als Anfänger am häufigsten stecken, weil ein Framework einfaches JavaScript und das DOM größtenteils hinter seiner eigenen Syntax verbirgt.
Semantisches HTMLBedeutung vor Aussehen
Wenn du eine Überschrift, Liste, Formularbeschriftung oder Schaltfläche danach auswählst, was der Inhalt ist, statt danach, wie er aussehen soll, können Screenreader, Suchmaschinen und Tastaturen damit arbeiten. Außerdem ist das die günstigste Möglichkeit, die Barrierefreiheit jeder Seite zu verbessern.
Responsive LayoutsEine Seite, jeder Bildschirm
Flexbox, Grid und Media Queries ermöglichen es einem einzigen Layout, sich von einem schmalen Smartphone bis zu einem breiten Monitor neu anzuordnen. Wenn du früh bei einer kleinen Breite wie 375 Pixel testest, erkennst du Layout-Fehler, deren Behebung später mühsam wäre.
Das DOMDie Seite als lebendiges Objekt
Der Browser wandelt HTML in einen Baum aus Objekten um, den JavaScript lesen und verändern kann. Jedes Framework ist letztlich eine komfortable Möglichkeit, diesen Baum zu aktualisieren. Wenn du ihn verstehst, kannst du auch React und Vue viel leichter nachvollziehen.
Core Web Vitals und PerformanceGeschwindigkeit, die man spürt
Eine Seite fühlt sich langsam an, wenn sie spät ein großes, nicht optimiertes Bild lädt oder sich während des Ladens verschiebt – selbst wenn der Code korrekt ist. Performance ist eine Fähigkeit, die erst bei echten Seiten und echten Bildern wirklich sichtbar wird.
Passend
Für wen es geeignet ist – und für wen nicht
Es passt zu dir, wenn du
- Du möchtest Webentwickler werden und fängst bei null an
- Du bist Designer und möchtest die von dir entworfenen Seiten umsetzen
- Du kennst etwas HTML und CSS und möchtest JavaScript, TypeScript, React oder Vue dazulernen
- Du bereitest dich auf dein erstes Frontend-Interview vor und möchtest Fragen mit Antworten
- Du siehst lieber, wie sich eine Seite während der Eingabe verändert, als lange Erklärungen zu lesen
Du bist hier nicht richtig, wenn du
- Du musst eine große Website mit mehreren Dateien erstellen und bereitstellen – dafür brauchst du weiterhin einen Laptop und einen vollwertigen Editor
- Du erwartest, dass alles kostenlos ist: Der erste Kurs, das erste Projekt, zwei Debugging-Missionen und der Editor sind kostenlos, und Pro schaltet den Rest frei
- Du möchtest einen Backend- oder Datenbankkurs, denn dieser Lernpfad dreht sich um das, was im Browser läuft
- Du arbeitest bereits als Senior Frontend Engineer und möchtest eher ein Nachschlagewerk als Lektionen
Fragen
Häufig gestellte Fragen
Was ist Frontend-Entwicklung?
Frontend-Entwicklung bedeutet, den Teil einer Website oder Web-App zu erstellen, der im Browser läuft: die Struktur mit HTML, das Aussehen mit CSS und das Verhalten mit JavaScript – plus die darauf aufbauenden Frameworks und Tools. Frontend lernen & üben vermittelt diesen Stack in genau dieser Reihenfolge und bietet eine Live-Vorschau, sodass jede Änderung sofort sichtbar ist.
Kann ich Frontend-Entwicklung auf meinem Smartphone lernen?
Die Grundlagen und die ersten Seiten kannst du gut auf einem Smartphone lernen, weil HTML, CSS und JavaScript klein genug sind, um sie in kurzen Lerneinheiten zu bearbeiten, und die Vorschau das Ergebnis sofort zeigt. Die App zeigt die drei Bereiche und eine Live-Vorschau auf dem Bildschirm an. Ein Laptop ist angenehmer, sobald du ein größeres Projekt mit vielen Dateien verwaltest, aber zum Einstieg brauchst du ihn nicht.
Für wen ist der Lernpfad geeignet und womit sollte ein kompletter Anfänger beginnen?
Er eignet sich für komplette Anfänger, Designer, die ihre Entwürfe umsetzen möchten, Entwickler mit Grundkenntnissen in HTML und CSS sowie Quereinsteiger, die sich auf ihren ersten Job im Frontend vorbereiten. Beginne damit, zu verstehen, wie das Web funktioniert, und lerne einfaches HTML, dann CSS und anschließend JavaScript. Frontend lernen & üben folgt dieser Reihenfolge und startet mit dem kostenlosen Kurs Willkommen in der Frontend-Entwicklung.
Vermittelt die App React und Vue?
Ja. Nach HTML, CSS, JavaScript und TypeScript bietet die App React-Kurse zu Grundlagen, useEffect und Datenabfragen sowie zu fortgeschrittenen Hooks und Patterns. Außerdem gibt es Vue 3-Kurse zu den Grundlagen, zur Composition API und zu fortgeschrittenen Patterns. Zusätzlich werden State Management und serverseitiges Rendering mit Next.js und Nuxt 3 behandelt.
Muss ich TypeScript lernen?
Für die Erstellung deiner ersten Seite ist TypeScript nicht erforderlich. Die meisten professionellen React- und Vue-Codebasen verwenden es jedoch, daher lohnt es sich, TypeScript nach den JavaScript-Grundlagen zu lernen. Die App führt mit einem Kurs zu den ersten Types in TypeScript ein, bietet einen vertiefenden Kurs zu Types und Interfaces sowie einen fortgeschrittenen Kurs zu Frontend-Patterns.
Wie funktionieren die Debugging-Missionen?
Jede der 15 Debugging-Missionen enthält eine fehlerhafte Seite oder Komponente, die ein echtes Frontend-Problem widerspiegelt – etwa ein Layout, das bei 375 Pixeln kaputtgeht, ein Formular, das sich nicht per Tastatur bedienen lässt, ein Memory Leak in einer Komponente oder einen Test, der nur in CI fehlschlägt. Deine Aufgabe ist es, den Fehler zu beheben. Zwei Missionen sind kostenlos.
Kann die App mich auf ein Vorstellungsgespräch als Frontend-Entwickler vorbereiten?
Sie kann dich beim fachlichen Wissen unterstützen. Frontend lernen & üben enthält 50 Interviewfragen mit Antworten, einen Spickzettel mit 83 Einträgen zu Syntax und Patterns sowie Kurse zu Testing, Performance, Barrierefreiheit und Architektur – Themen, auf die sich Interviews nach den Grundlagen häufig konzentrieren. Die App ersetzt jedoch nicht den Aufbau eines Portfolios mit eigenen Projekten.
Wie lange dauert es, Frontend-Entwicklung zu lernen?
Wer täglich ein wenig übt, kann als Anfänger meist innerhalb weniger Wochen einfache responsive Seiten erstellen. Sicherer Umgang mit JavaScript und einem Framework dauert dagegen Monate. Die App teilt den Lernpfad in jeweils wenige Minuten lange Lektionen auf und bietet Streaks und Erinnerungen, sodass du durch regelmäßige kurze Lerneinheiten vorankommst statt durch einen einzigen langen Lernblock.
Ist Frontend lernen & üben kostenlos?
Die App kann kostenlos im App Store und bei Google Play heruntergeladen werden. Der erste Kurs, das erste geführte Projekt, zwei Debugging-Missionen und der Code-Editor sind kostenlos, außerdem stehen dir täglich drei Fragen an den AI-Mentor zur Verfügung. Die kostenlose Version zeigt Werbung an. Pro schaltet alle Kurse, sämtliche Projekte und Missionen, die Zertifikatsprüfung und unbegrenzte AI frei und entfernt die Werbung.
Welche Plattformen und Sprachen werden unterstützt, und ist die App im App Store dieselbe?
Frontend lernen & üben läuft auf iOS über den App Store und auf Android über Google Play, ist in 22 Sprachen verfügbar und hat eine Altersfreigabe ab 4 Jahren. Der Eintrag im App Store trägt den Titel Learn Frontend Development, der Eintrag bei Google Play Frontend lernen & üben – es handelt sich jedoch um dieselbe App. Nach bestandener Abschlussprüfung erhältst du ein Abschlusszertifikat.
Loslegen
Erstelle noch heute deine erste Webseite
Kostenlos auf iOS und Android starten – in 22 Sprachen.
Mehr von CoddyKit
Verfügbar auf iOS.