0Pricing
Frontend Academy icon
HTMLFrontendWebBeginnerLevel A1 → C215 Sprachen

Frontend Academy

Entwickeln Sie visuell beeindruckende und responsive Websites mit der Frontend Development Academy. Ein CoddyKit-Lernpfad mit 41 kurzen Kursen und 163 interaktiven Lektionen – mit einem KI-Tutor rund um die Uhr an deiner Seite.

Kurse
41
Lektionen
163
Interaktive Schritte
2,186
Kostenlos starten
Kurs 1
Lehrplan

41 Kurse in diesem Pfad

Jeder Kurs im Lernpfad Frontend Academy, in Lernreihenfolge. Der erste ist kostenlos.

1

A13 LektionenKostenlos

Verstehen Sie, was Frontend-Entwickler tatsächlich tun, warum dies zu den gefragtesten und kreativsten Karrieren in der Tech-Branche gehört und wie HTML, CSS und JavaScript zusammenspielen.

2

A14 LektionenPRO

Verstehen Sie die Grundlagen des Webs: wie Browser Seiten anfordern, welche Aufgabe DNS übernimmt, wie HTTP funktioniert und was geschieht, wenn Sie eine URL eingeben. Am Ende wissen Sie genau, was e…

3

A14 LektionenPRO

Lernen Sie die Bausteine jeder Webseite kennen. Schreiben Sie gültige HTML5-Dokumente mit semantischen Elementen, strukturieren Sie Inhalte mit Überschriften und Listen, betten Sie Bilder und Links e…

4

A14 LektionenPRO

Gestalten Sie Ihr HTML sicher. Lernen Sie, wie Kaskade und Spezifität funktionieren, wenden Sie Farben und Typografie an, beherrschen Sie das Box-Modell und steuern Sie Layouts mit Display-Eigenschaf…

5

A14 LektionenPRO

Schreiben Sie Ihre ersten JavaScript-Programme. Lernen Sie, Variablen zu deklarieren, mit primitiven Datentypen zu arbeiten, Funktionen zu definieren und den Programmablauf mit Bedingungen und Schlei…

6

A14 LektionenPRO

Arbeiten Sie wie ein professioneller Frontend-Entwickler. Beherrschen Sie Chrome DevTools zum Untersuchen und Debuggen, konfigurieren Sie VSCode mit hilfreichen Erweiterungen und richten Sie Tools zu…

7

A24 LektionenPRO

Fügen Sie JavaScript Typen hinzu und erkennen Sie Fehler, bevor sie den Browser erreichen. Lernen Sie das Typsystem von TypeScript kennen, annotieren Sie Variablen und Funktionen, definieren Sie Inte…

8

A24 LektionenPRO

Machen Sie Ihr HTML mit JavaScript interaktiv. Wählen Sie Elemente aus, reagieren Sie auf Ereignisse, lesen und ändern Sie Inhalte und erstellen oder entfernen Sie Elemente dynamisch mit dem Document…

9

A24 LektionenPRO

Erstellen Sie Layouts, die auf jeder Bildschirmgröße funktionieren. Lernen Sie das viewport-Meta-Tag kennen, verwenden Sie Flexbox und Grid für fließende Layouts und schreiben Sie Media Queries nach…

10

A24 LektionenPRO

Vertiefen Sie Ihre HTML-Kenntnisse. Erstellen Sie vollständig barrierefreie Formulare mit ARIA-Attributen, nutzen Sie das gesamte Spektrum der HTML5-Eingabetypen, setzen Sie die native Validierung ei…

11

A24 LektionenPRO

Bringen Sie Ihre JavaScript-Kenntnisse mit moderner Syntax und leistungsfähigen integrierten Methoden auf das nächste Level. Verarbeiten Sie Arrays mit map, filter und reduce, destrukturieren Sie Obj…

12

A24 LektionenPRO

Setzen Sie Git effektiv als Frontend-Entwickler ein. Lernen Sie die wichtigsten Befehle zum Sichern Ihrer Arbeit, verstehen Sie Branches für die Feature-Entwicklung, pushen Sie zu GitHub und arbeiten…

13

A24 LektionenPRO

Erwecken Sie Benutzeroberflächen mit CSS-Bewegungen zum Leben. Verwenden Sie Custom Properties für wartbare Design Tokens, fügen Sie Zustandsänderungen fließende Transitions hinzu, erstellen Sie Keyf…

14

B14 LektionenPRO

Gehen Sie über die Grundlagen hinaus und meistern Sie CSS-Layouts wirklich. Erkunden Sie die Ausrichtung und den Umbruch von Flexbox im Detail, nutzen Sie CSS-Grid-Template-Areas und auto-fit, kombin…

15

B14 LektionenPRO

Verstehen Sie die moderne JavaScript-Toolchain. Verwenden Sie die Syntax von ES-Modulen, verwalten Sie Pakete mit npm, starten Sie mit Vite sofortige Entwicklungsserver und lernen Sie die Grundlagen…

16

B14 LektionenPRO

Dringen Sie tiefer in das Typsystem von TypeScript ein. Schreiben Sie wiederverwendbare generische Funktionen, verwenden Sie Utility Types zum Transformieren von Interfaces, erstellen Sie gemappte un…

17

B14 LektionenPRO

Erstellen Sie Ihre ersten React-Anwendungen. Verstehen Sie die JSX-Syntax, setzen Sie Benutzeroberflächen aus funktionalen Komponenten zusammen, übergeben Sie Daten mit Props und verwalten Sie lokale…

18

B14 LektionenPRO

Synchronisieren Sie React-Komponenten mit externen Systemen. Lernen Sie, wie useEffect funktioniert, rufen Sie beim Mounten Daten von APIs ab, zeigen Sie Lade- und Fehlerzustände an und bereinigen Si…

19

B14 LektionenPRO

Erstellen Sie Ihre ersten Vue-3-Anwendungen mit Single-File Components. Lernen Sie die Options API und zentrale Direktiven kennen sowie die Kommunikation zwischen übergeordneten und untergeordneten K…

20

B14 LektionenPRO

Erstellen Sie Benutzeroberflächen, die alle nutzen können. Verstehen Sie die Konformitätsstufen der WCAG, verwenden Sie semantisches HTML als Grundlage der Barrierefreiheit, setzen Sie ARIA-Rollen un…

21

B24 LektionenPRO

Meistern Sie asynchrones JavaScript von Grund auf. Verstehen Sie die Event Loop, wechseln Sie von Callback-Mustern zu Promises und schreiben Sie sauberen async/await-Code mit geeigneter Fehlerbehandl…

22

B24 LektionenPRO

Meistern Sie die vollständige React-Hooks-API. Teilen Sie Daten ohne Prop Drilling mit useContext, verwalten Sie komplexen State mit useReducer, optimieren Sie die Performance mit useMemo und useCall…

23

B24 LektionenPRO

Schöpfen Sie die volle Leistungsfähigkeit von Vue 3 mit der Composition API aus. Verwenden Sie ref und reactive für reaktiven State, computed und watch für abgeleitete Werte und Seiteneffekte und ers…

24

B24 LektionenPRO

Verwalten Sie den anwendungsweiten State effektiv. Lernen Sie Redux Toolkit für React, das schlanke Zustand als einfachere Alternative, Pinia für Vue und die Prinzipien kennen, mit denen Sie entschei…

25

B24 LektionenPRO

Schreiben Sie automatisierte Tests für Ihren Frontend-Code. Richten Sie Jest ein, testen Sie React-Komponenten mit Testing Library, testen Sie Vue-Komponenten und mocken Sie Module und API-Aufrufe, d…

26

B24 LektionenPRO

Schreiben Sie CSS, das mit Ihren Anforderungen wächst. Lernen Sie die BEM-Namenskonvention für vorhersehbare Selektoren kennen, kapseln Sie Styles mit CSS Modules, fügen Sie CSS mit styled-components…

27

B24 LektionenPRO

Verbinden Sie Ihr Frontend mit Backend-APIs. Verwenden Sie die native Fetch API für alle HTTP-Methoden, ergänzen Sie Axios um Interceptors und Basis-URLs, behandeln Sie HTTP-Fehler angemessen und cac…

28

B24 LektionenPRO

Erstellen Sie produktionsreife React-Anwendungen mit Next.js. Verstehen Sie sowohl den Pages Router als auch den modernen App Router, unterscheiden Sie Server- und Client-Komponenten, wählen Sie die…

29

B24 LektionenPRO

Erstellen Sie Full-Stack-Vue-Anwendungen mit Nuxt 3. Verwenden Sie dateibasierte Routen und Auto-Imports, um Boilerplate zu vermeiden, rufen Sie Serverdaten mit Composables ab, erweitern Sie die Funk…

30

B24 LektionenPRO

Verwandeln Sie Websites in appähnliche Erlebnisse. Schreiben Sie ein Web App Manifest für die Installierbarkeit, registrieren Sie Service Worker für Offline-Unterstützung, implementieren Sie Caching-…

31

B24 LektionenPRO

Erstellen Sie Benutzeroberflächen in Echtzeit. Verwenden Sie die native WebSocket API, integrieren Sie die Socket.io-Clientbibliothek, empfangen Sie Server-Sent Events für unidirektionale Datenströme…

32

B24 LektionenPRO

Meistern Sie die sich schnell weiterentwickelnde JavaScript-Toolchain. Erweitern Sie Vite mit Plugins und verwenden Sie es für SSR, verstehen Sie, wie esbuild seine Geschwindigkeit erreicht, verwalte…

33

C14 LektionenPRO

Machen Sie Ihre Websites schnell und messen Sie die Verbesserung. Verstehen Sie Core Web Vitals, führen Sie Lighthouse-Audits durch, optimieren Sie Bilder für das Web und reduzieren Sie die Größe von…

34

C14 LektionenPRO

Bringen Sie TypeScript an seine Grenzen. Erstellen Sie Typen mit Template-Literal-Types, annotieren Sie React-Komponenten und Hooks mit präzisen Generics, aktivieren Sie den Strict Mode, um unsichere…

35

C14 LektionenPRO

Schreiben Sie React-Code wie die Autoren von Bibliotheken. Erstellen Sie Compound Components auf Basis von Context, verwenden Sie Render Props und HOCs zur gemeinsamen Nutzung übergreifender Belange,…

36

C14 LektionenPRO

Meistern Sie fortgeschrittene Vue-3-Muster, die in professionellen Anwendungen zum Einsatz kommen. Teilen Sie Logik über einen Komponentenbaum hinweg mit provide/inject, laden Sie Komponenten mit Sus…

37

C14 LektionenPRO

Entwerfen Sie Frontend-Anwendungen, die für große Teams skalieren. Wenden Sie Atomic Design auf Komponentenhierarchien an, verwalten Sie mehrere Pakete mit Turborepo-Monorepos, implementieren Sie Mic…

38

C14 LektionenPRO

Erstellen und pflegen Sie eine gemeinsame Komponentenbibliothek. Dokumentieren Sie Komponenten in Storybook, definieren Sie Design Tokens mit Style Dictionary, versionieren und veröffentlichen Sie si…

39

C14 LektionenPRO

Schützen Sie Ihre Nutzer vor Bedrohungen der Websicherheit. Verhindern Sie XSS mit Output Encoding und der Content Security Policy, schützen Sie sich mit SameSite-Cookies und Tokens vor CSRF, konfigu…

40

C14 LektionenPRO

Automatisieren Sie die Auslieferung Ihres Frontends. Schreiben Sie GitHub-Actions-Workflows, die bei jedem Push Linting, Tests und Builds ausführen, deployen Sie automatisch zu Vercel, Netlify und Cl…

41

C24 LektionenPRO

Arbeiten Sie auf Senior-Level. Gehen Sie System-Design-Interviews mit frontend-spezifischen Frameworks an, fördern Sie eine gesunde Code-Review-Kultur, entwickeln Sie Junior-Entwickler durch Mentorin…

CoddyKit PRO

Schalte alle 41 Kurse in diesem und jedem anderen Pfad frei

KI-Tutor, Zertifizierungsprüfung und Zertifikat. Funktioniert im Web sowie auf iOS und Android.

Alle Tarife ansehen
Jährlich$29.90 / JahrEtwa $2.49 im MonatEinmalig bezahlenLebenslang$69.99 einmaligKeine Verlängerungen. PRO für immer.
Kursübersicht

Bauen Sie das vollständige Spektrum moderner Frontend-Entwicklung auf

Frontend-Entwicklung ist die Disziplin, Code in alles zu verwandeln, das ein Benutzer in einem Browser sieht und mit dem er interagiert — HTML-Struktur, CSS-Präsentation, JavaScript-Verhalten sowie die Frameworks und Tools, die sie im Produktionsmaßstab zusammenbinden. Dieser Kurs behandelt den vollständigen Stack: von der Art, wie das Web eine Seite bereitstellt, über das Schreiben typsicherer React- und Vue-Anwendungen bis hin zur Leistungsoptimierung und zum Deployment über eine CI/CD-Pipeline.

Was Sie lernen werden

Sie beginnen mit HTML-, CSS- und JavaScript-Grundlagen, dann gewinnen Sie Sicherheit in TypeScript, DOM und Browser APIs, responsivem Design und ES6+-Mustern einschließlich asynchroner Programmierung und Modulen. Von dort aus bewegen Sie sich zu React (Hooks, fortgeschrittene Muster, Next.js SSR) und Vue 3 (Composition API, Nuxt 3 SSR), State Management, Frontend-Testing, CSS-Architektur und Echtzeit-Schnittstellen mit WebSockets. Der Kurs endet mit Web-Performance-Optimierung, Frontend-Sicherheit, Design Systems und Frontend CI/CD und DevOps.

Der Lernpfad

Einundvierzig Kurse umfassen die Stufen A1 bis C2. Die Kurse A1 und A2 etablieren die Grundlagen — wie das Web funktioniert, semantisches Markup, CSS-Animationen, Git und TypeScript-Einführung. B1- und B2-Kurse bauen berufliche Kompetenz auf: CSS Layout Mastery, JavaScript Modules and Build Tools, React- und Vue 3-Grundlagen, API-Integration, Progressive Web Apps und Server-Side Rendering mit Next.js und Nuxt 3. Die C1-Kurse befassen sich mit Anliegen auf Senior-Ebene: Advanced TypeScript for Frontend, React Advanced Patterns, Vue Advanced Patterns, Frontend Architecture, Design Systems and Component Libraries, Frontend Security und Frontend CI/CD and DevOps. Der Kurs endet auf C2-Niveau mit Senior Frontend Engineering, das alles in produktionsreife Praxis konsolidiert.

So funktioniert es

Jeder Kurs ist in kurze, praktische Lektionen aufgeteilt, die Sie im integrierten Code-Editor mit Echtzeit-Feedback absolvieren. Ein KI-Tutor steht Ihnen zur Verfügung, wenn Sie nicht weiterkommen, und jedes Konzept wird durch Übungen gestärkt, die echtes Browser- und Framework-Verhalten widerspiegeln, anstatt konstruierte Beispiele zu verwenden.

So wirst du lernen

  1. 01

    Interaktive Lektionen

    Praktische Coding-Übungen mit Live-Feedback

  2. 02

    KI-Tutor

    Erhalte sofortige Hilfe von unserem KI-Tutor, wenn du nicht weiterkommst

  3. 03

    Integrierter Editor

    Schreibe und starte Code direkt in deinem Browser

  4. 04

    Zertifikat

    Verdiene ein Zertifikat, wenn du den Kurs abschließt

FAQ

Häufig gestellte Fragen

Ist der Frontend Academy Kurs kostenlos?

Ja. Du kannst den Frontend Academy Kurs kostenlos starten und seine interaktiven Lektionen ohne Kosten abschließen. Ein optionales PRO-Abo schaltet erweiterte KI-Tools und ein teilbares Zertifikat frei.

Brauche ich Vorkenntnisse, um HTML zu lernen?

Nein. Der Kurs beginnt mit den Grundlagen und bewegt sich schrittweise zu fortgeschritteneren Themen, sodass du auch ohne HTML-Vorkenntnisse starten kannst.

Wie lerne ich HTML auf CoddyKit?

Du lernst durch Tun. Kurze interaktive Lektionen verbinden eine klare Erklärung mit einer praktischen Coding-Übung, die in Echtzeit läuft, und ein 24/7 KI-Tutor gibt dir personalisierte Hilfe, wann immer du steckenbleibst.

Erhalte ich ein Zertifikat für den Abschluss von Frontend Academy?

Ja. PRO-Lerner können eine Prüfung ablegen und verdienen sich ein teilbares Abschlusszertifikat mit verifizierbarem Code für den Frontend Academy Kurs.

Kann ich HTML auf meinem Telefon lernen?

Ja. CoddyKit ist im Web und als native iOS- und Android-Apps verfügbar, sodass du HTML auf jedem Gerät lernen kannst und dein Fortschritt überall synchronisiert wird.

Wie viel kostet CoddyKit PRO?

Der erste Kurs im Lernpfad Frontend Academy ist kostenlos. CoddyKit PRO schaltet alle Kurse frei: $5.90 pro Woche, $7.90 pro Monat, $29.90 pro Jahr oder einmalig $69.99 für lebenslangen Zugriff ohne Verlängerungen.

Wie lange dauert es, Frontend Academy abzuschließen?

Frontend Academy umfasst 41 Kurse und 163 Lektionen. Die meisten Lektionen dauern etwa 5–10 Minuten. Für den gesamten Pfad brauchst du daher ungefähr 19 Stunden praktische Übung – in deinem eigenen Tempo.

Starte Frontend Academy jetzt

Schließe dich Tausenden von Lernenden an, die Programmierung mit KI-gestützten Lektionen beherrschen.