0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Bauen Sie schnelle und einfache Benutzeroberflächen mit modernen Techniken in der Svelte Academy.

🤖 KI-Gesteuert📚 41 Kurse👥 100.000+ Lernende⭐ 4,9 Bewertung
Kursübersicht

Echte Oberflächen mit Svelte und SvelteKit erstellen

Svelte verfolgt einen grundlegend anderen Ansatz als React und Vue — statt eine Runtime in den Browser zu versenden, kompiliert es Ihre Komponenten zur Build-Zeit zu hocheffizientem Vanilla JavaScript. Das Ergebnis sind kleinere Bundles, schnellere Ladezeiten und weniger Boilerplate. SvelteKit, das offizielle Anwendungsframework, fügt dateibasiertes Routing, serverseitiges Rendering, Form Actions und Deployment Adapter hinzu, damit Sie produktionsreife Apps auf jeder Plattform ausliefern können. Dieser Kurs behandelt beide von der ersten Komponente bis hin zur Full-Stack-Architektur.

Was Sie lernen werden

Sie beginnen mit Sveltes Komponentenmodell — Props, Template-Syntax, Bedingungen, Schleifen und Two-Way Binding — und wechseln dann zum Reaktivitätssystem, Lifecycle Functions und den Store Primitives: writable, readable, derived und custom stores. Auf der UI-Seite arbeiten Sie mit Slots, der Context API, CSS Transitions, Animationen und Svelte Motion. Die SvelteKit-Kapitel behandeln Routing, Data Loading, SSR und Prerendering, Form Actions, API Routes, Hooks, Error Handling, erweiterte Layouts, Auth Patterns und Deployment Adapter. Der Kurs behandelt auch Sveltes Rune System, Testing mit Unit Tests und Playwright E2E, Integration von Drittanbieter-Bibliotheken und SvelteKit Security Practices.

Der Lernpfad

Einundvierzig Kurse führen von A1 bis C1. Die ersten sieben Kurse vermitteln die Grundlagen: Komponenten, Props, Events und Template-Syntax. B1 führt Stores, Slots, Transitions und Ihre ersten SvelteKit-Seiten sowie Data-Loading-Patterns ein. B2 — der größte Block — behandelt Form Actions, API Routes, Hooks, erweiterte Reaktivität, Svelte Actions, Custom Animations, Auth Patterns, Adapter, Sveltes Rune System, Testing und Security. Der Kurs endet auf C1 mit erweiterten Runes, erweiterten Komponentenmustern, SvelteKit Streaming, Performance-Optimierung, umfangreicher State Management und einer Capstone Full-Stack SvelteKit-Anwendung.

Wie es funktioniert

Jeder Kurs ist in kurze, fokussierte Lektionen unterteilt, die Sie im integrierten Code-Editor mit Echtzeit-Feedback absolvieren. Ein AI Tutor steht Ihnen jederzeit zur Verfügung, wenn Sie nicht weiterkommen, und jedes Konzept wird mit praktischen Übungen gefestigt, bevor Sie zum nächsten Thema übergehen.

Lernen starten →

So wirst du lernen

🎯
Interaktive Lektionen
Praktische Coding-Übungen mit Live-Feedback
🤖
KI-Tutor
Erhalte sofortige Hilfe von unserem KI-Tutor, wenn du nicht weiterkommst
💻
Integrierter Editor
Schreibe und starte Code direkt in deinem Browser
🏆
Zertifikat
Verdiene ein Zertifikat, wenn du den Kurs abschließt
Lehrplan

41 Kurse

Alle Kurse im Sveltejs Academy Lernpfad.

01

Willkommen bei Svelte

A13 Lektionen

Verstehen Sie, was Svelte ist, warum es beim Erstellen von UIs einen völlig anderen Ansatz als React oder Vue verfolgt und weshalb Entwickl…

02

Svelte: Einführung und Einrichtung

A14 LektionenPRO

Legen Sie mit Svelte los: Verstehen Sie, was Svelte von anderen Frameworks unterscheidet, richten Sie Ihr erstes Projekt ein und erkunden S…

03

Ihre erste Svelte-Komponente

A14 LektionenPRO

Lernen Sie, Svelte-Komponenten von Grund auf zu schreiben, reaktive Variablen zu verwenden, Ausdrücke zu interpolieren und mit reaktiven De…

04

Props und Kommunikation zwischen Komponenten

A24 LektionenPRO

Übergeben Sie Daten mit Props zwischen Svelte-Komponenten, legen Sie Standardwerte fest und leiten Sie Props elegant mit $$props und $$rest…

05

Template-Syntax: Bedingungen und Schleifen

A24 LektionenPRO

Steuern Sie mit Conditional Blocks, was in Ihren Svelte-Templates gerendert wird, durchlaufen Sie Arrays mit Each Blocks und erzwingen Sie…

06

Events und Event-Handling

A24 LektionenPRO

Behandeln Sie DOM-Events in Svelte, vereinfachen Sie gängige Muster mit Event-Modifikatoren, senden Sie eigene Events aus untergeordneten K…

07

Zwei-Wege-Binding

A24 LektionenPRO

Synchronisieren Sie Formulareingaben und DOM-Elemente mit Svelte-Variablen mithilfe von bind:-Direktiven für Textfelder, Checkboxen, Radiog…

08

Lifecycle-Funktionen

B14 LektionenPRO

Steuern Sie mit onMount, onDestroy, beforeUpdate, afterUpdate und dem Dienstprogramm tick, was in jeder Phase des Lebenszyklus einer Svelte…

09

Svelte Stores: Writable und Readable

B14 LektionenPRO

Teilen Sie reaktiven Zustand zwischen Komponenten mit Sveltes integrierten Store-Grundtypen, abonnieren Sie sie mit der $-Kurzschreibweise…

10

Abgeleitete und benutzerdefinierte Stores

B14 LektionenPRO

Kombinieren Sie Svelte Stores, indem Sie berechnete Stores aus einer oder mehreren Quellen ableiten, und erstellen Sie vollständig eigene S…

11

Slots und Komponentenzusammensetzung

B14 LektionenPRO

Projizieren Sie Inhalte mit Default- und benannten Slots in Svelte-Komponenten, stellen Sie Fallback-Inhalte bereit und prüfen Sie, ob Slot…

12

CSS-Transitions

B14 LektionenPRO

Animieren Sie Elemente beim Ein- und Austritt aus dem DOM mit Sveltes integrierten Transition-Direktiven, konfigurieren Sie Dauer und Easin…

13

CSS-Animationen

B14 LektionenPRO

Gehen Sie mit Sveltes animate-Direktive über Transitions hinaus: für das Neuanordnen von Listen, physikbasierte Spring-Animationen und die…

14

SvelteKit-Routing und Seiten

B14 LektionenPRO

Navigieren Sie durch SvelteKits dateibasiertes Routing-System, erstellen Sie dynamische Routen mit Parametern und verwenden Sie Layout-Date…

15

SvelteKit-Datenladen

B14 LektionenPRO

Laden Sie mit SvelteKits load-Funktionen Daten für Ihre Seiten, behandeln Sie Fehler elegant und führen Sie serverexklusive Logik in +page.…

16

Context API

B14 LektionenPRO

Übergeben Sie mit Sveltes Context API Daten tief in den Komponentenbaum, ohne Props durchreichen zu müssen, und erfahren Sie, wann Context…

17

SvelteKit-SEO und Meta-Daten

B14 LektionenPRO

Verbessern Sie die Auffindbarkeit, indem Sie dynamische Meta-Tags, OpenGraph-Karten und strukturierte JSON-LD-Daten festlegen und kanonisch…

18

SvelteKit-Form Actions

B24 LektionenPRO

Verarbeiten Sie HTML-Formularübermittlungen auf dem Server mit SvelteKit Form Actions, verbessern Sie sie schrittweise mit JavaScript und g…

19

SvelteKit-API-Routen

B24 LektionenPRO

Erstellen Sie REST- und Streaming-API-Endpunkte in SvelteKit mit +server.js-Dateien, behandeln Sie mehrere HTTP-Methoden und geben Sie typi…

20

SvelteKit-Hooks

B24 LektionenPRO

Fangen Sie mit SvelteKits Server-Hooks jede Anfrage ab und transformieren Sie sie, protokollieren Sie Fehler zentral und kombinieren Sie me…

21

SvelteKit-Fehlerbehandlung

B24 LektionenPRO

Sorgen Sie bei Fehlern für eine gute Nutzererfahrung, indem Sie Fehlerseiten anpassen, erwartete von unerwarteten Fehlern unterscheiden und…

22

Fortgeschrittene Svelte-Reaktivität

B24 LektionenPRO

Vertiefen Sie Ihr Verständnis von Sveltes reaktivem System: die Reihenfolge reaktiver Anweisungen, der Einsatz von Stores statt lokalem Zus…

23

Svelte Actions

B24 LektionenPRO

Versehen Sie DOM-Elemente mit Svelte Actions mit wiederverwendbarem imperativem Verhalten, behandeln Sie Parameter und Aktualisierungen und…

24

Benutzerdefinierte Transitions und Animationen

B24 LektionenPRO

Schreiben Sie eigene Svelte-Transition-Funktionen von Grund auf, steuern Sie Zeitparameter und erstellen Sie Morphing- sowie fortgeschritte…

25

Svelte Motion

B24 LektionenPRO

Animieren Sie Werte über die Zeit mit Sveltes Spring- und Tweened-Motion-Stores, verwenden Sie Interpolationsfunktionen und wenden Sie Moti…

26

SvelteKit-Layouts: Fortgeschrittene Themen

B24 LektionenPRO

Beherrschen Sie SvelteKits fortgeschrittenes Layout-System: Gruppenlayouts, Überschreibungen auf Routenebene, das Verlassen von Layouts und…

27

SvelteKit-Authentifizierungsmuster

B24 LektionenPRO

Implementieren Sie Authentifizierung in SvelteKit mit cookie-basierten Sitzungen, sicheren JWTs, Routenschutz in Hooks und OAuth mit Lucia…

28

SvelteKit-Adapter und Deployment

B24 LektionenPRO

Stellen Sie SvelteKit-Anwendungen mit dem passenden Adapter überall bereit: als statische Websites, auf Node.js-Servern, auf Vercel oder in…

29

Svelte 5: Einführung in Runes

B24 LektionenPRO

Entdecken Sie Svelte 5s Runes-System, das Compiler-Magie durch explizite reaktive Grundelemente für Zustand, abgeleitete Werte und Seitenef…

30

Svelte 5: Props und Snippets

B24 LektionenPRO

Verwenden Sie $props() für typisierte Component-Props und die neue Snippet-Syntax mit {#snippet} und {@render} für eine leistungsfähige Inh…

31

SvelteKit-SSR und Prerendering

B24 LektionenPRO

Steuern Sie die Rendering-Strategie pro Route in SvelteKit: Wählen Sie zwischen universellem und serverexklusivem Laden, prerendern Sie sta…

32

Svelte testen: Unit-Tests

B24 LektionenPRO

Schreiben Sie mit Vitest und @testing-library/svelte zuverlässige Unit-Tests für Svelte-Komponenten und Stores und testen Sie Rendering, In…

33

Svelte testen: E2E mit Playwright

B24 LektionenPRO

Schreiben Sie mit Playwright End-to-End-Tests für SvelteKit-Anwendungen, die Seitennavigation, Formularinteraktionen und die Integration in…

34

Integration von Bibliotheken von Drittanbietern

B24 LektionenPRO

Integrieren Sie Tailwind CSS, D3.js-Datenvisualisierungen, Leaflet-Karten und Rich-Text-Editoren mit Svelte Actions und Komponenten-Wrapper…

35

SvelteKit-Sicherheit

B24 LektionenPRO

Schützen Sie Ihre SvelteKit-Anwendung vor CSRF-, XSS- und Injection-Angriffen, verwalten Sie Umgebungsvariablen sicher und begrenzen Sie di…

36

Svelte 5: Fortgeschrittene Runes

C14 LektionenPRO

Erkunden Sie fortgeschrittene Svelte-5-Runes-Muster, darunter Raw State, komplexe Ableitungen, manuelles Aufräumen von Effekten und die Mig…

37

Fortgeschrittene Komponenten-Muster

C14 LektionenPRO

Erstellen Sie anspruchsvolle, wiederverwendbare Svelte-Komponenten-APIs mit Render Props über Snippets, Higher-Order Components, dem Builde…

38

SvelteKit-Streaming

C14 LektionenPRO

Ermöglichen Sie schnelle anfängliche Seitenladezeiten, indem Sie Promises aus Load-Funktionen streamen, langsame Daten zurückstellen und mi…

39

SvelteKit-Performance

C14 LektionenPRO

Optimieren Sie die Performance von SvelteKit-Anwendungen mit automatischem Code-Splitting, verbesserter Bildverarbeitung, Lazy Loading und…

40

State-Management im großen Maßstab

C14 LektionenPRO

Strukturieren Sie große Svelte-Anwendungen mit Store-Mustern für Feature-Module, Event-Bussen, optimistischen UI-Aktualisierungen sowie Und…

41

Eine Full-Stack-SvelteKit-App entwickeln

C14 LektionenPRO

Kombinieren Sie alles, was Sie gelernt haben, und entwickeln Sie eine produktionsreife Full-Stack-App mit Authentifizierung, einer Datenban…

FAQ

Häufig gestellte Fragen

Ist der Sveltejs Academy Kurs kostenlos?

Ja. Du kannst den Sveltejs 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 Sveltejs Academy?

Ja. PRO-Lerner können eine Prüfung ablegen und verdienen sich ein teilbares Abschlusszertifikat mit verifizierbarem Code für den Sveltejs 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.

Starte Sveltejs Academy jetzt

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

Kostenlos starten →Alle Kurse ansehen