svelte kursbild

Schaffe in kürzester Zeit den praktischen Einstieg in die Webentwicklung mit Svelte

... und lerne, wie du mithilfe von JavaScript und dem Svelte Framework eigene Webanwendungen programmieren kannst, um deine eigenen Ideen umzusetzen und zeitgleich deinen persönlichen Wert auf dem Arbeitsmarkt drastisch zu steigern.

Laufzeit des Kurses

ca. 6,5 Stunden

Benötigte Vorkenntnisse

HTML/CSS/JavaScript Grundkenntnisse

Mithilfe des JavaScript Frameworks Svelte hast du die Möglichkeit, schnell und einfach deine eigenen dynamischen Webseiten und Webanwendungen zu erstellen.

Kurzgesagt: Svelte ist das Richtige für dich, wenn du dich für die schlanke Frontend-Entwicklung interessierst!

Im Kurs wirst du die Entwicklung einer Svelte Webseite von der ersten Zeile bis zum veröffentlichten Projekt Schritt-für-Schritt erklärt bekommen, sodass du danach in der Lage bist, deine eigenen Svelte Webanwendungen problemlos umzusetzen.

Genauer gesagt wirst du lernen:

  • Was die Svelte Template Syntax ist
  • Wie das Routing der Webseite funktioniert
  • Wie man eigene Komponenten erstellt
  • Wie man die Seite mithilfe von CSS stylt
  • Wie man Nutzereingaben verarbeitet und vieles mehr...

All diese Kenntnisse wirst du im Anschluss "hands-on" mithilfe eines umfassenden Praxisprojekts vertiefen, denn wir programmieren eine reale und funktionsfähige Svelte Webanwendung, nämlich ein Aufgaben-Dashboard.

Wenn du also den Quereinstieg in die Programmierung planst, deine bereits bestehenden Programmier-Kenntnisse für einen neuen Job oder ein Job-Interview ausbauen möchtest, oder dich einfach nur hobbymäßig mit der Webentwicklung befassen möchtest, dann ist dieser Kurs perfekt für dich geeignet!

Inhaltsverzeichnis des Kurses

Modul 1: Einleitung

svelte modul 1

In diesem Modul erhältst du eine detaillierte Einführung in diesen Kurs. Du wirst dabei lernen, was Svelte ist und wie der Kurs grundsätzlich aufgebaut ist.

Diese Lektionen erwarten dich:

  • [Text] Kursübersicht und Voraussetzungen
  • [Video 1] Svelte Frontend Entwicklung
  • [Video 2] Aufbau des Kurses
  • [Video 3] Was ist Svelte?

Modul 2: Installation und Einrichtung

svelte modul 2

In diesem Modul werden wir gemeinsam alle notwendigen Installationen Schritt-für-Schritt durchführen, sodass du den Kurs problemlos durcharbeiten kannst.

Diese Lektionen erwarten dich:

  • [Video 1] Voraussetzungen
  • [Video 2] Installation unter Windows
  • [Video 3] Installation unter Linux

Modul 3: Erste Schritte mit Svelte

svelte modul 3

In diesem Modul wirst du die ersten Schritte mit Svelte machen. Du wirst dabei lernen, wie die Svelte Projektstruktur aussieht und was Svelte Komponenten sind.

Diese Lektionen erwarten dich:

  • [Video 1] Svelte Projektstruktur
  • [Video 2] Svelte Komponenten

Modul 4: Syntax und Grundfunktionen

svelte modul 4

In diesem Modul wirst du alle notwendigen Svelte Grundlagen von Beginn an kennenlernen. Dadurch wirst du dazu befähigt, dass wir im nächsten Modul gemeinsam eine komplette und voll funktionsfähige Svelte Webanwendung umsetzen können. 

Diese Lektionen erwarten dich:

  • [Video 1] Syntax und Variablen
  • [Video 2] Styling und globales CSS
  • [Video 3] Komponenten
  • [Video 4] If-Else Bedingungen
  • [Video 5] For-Each Schleifen
  • [Video 6] Fehlerbehebung (Debugging)
  • [Video 7] Benutzereingaben
  • [Video 8] Eingabe Typen und Binding
  • [Video 9] Reaktivität
  • [Video 10] Props
  • [Video 11] Slots
  • [Video 12] Events: Event Handling
  • [Video 13] Events: Event Weiterleitung
  • [Video 14] Events: Event Modifier
  • [Video 15] State Management (Stores)
  • [Video 16] Zwischenfazit

Modul 5: Praxisprojekt: Aufgaben-Dashboard

svelte modul 5

In diesem Modul werden wir gemeinsam eine reale Svelte Webanwendung umsetzen. Wir entwickeln eine Aufgaben-Dashboard Webanwendung. Das Projekt wird dich dazu befähigen, dass du zukünftig auch eigene Webanwendungen mit Svelte umsetzen kannst.

Diese Lektionen erwarten dich:

  • [Video 1] Projektvorstellung
  • [Video 2] Projekt Setup
  • [Video 3] CSS Frontend
  • [Video 4] Aufgaben anlegen
  • [Video 5] Lokaler Speicher
  • [Video 6] Formulare
  • [Video 7] Aufgabenverwaltung
  • [Video 8] Transitions
  • [Video 9] Routing
  • [Video 10] Custom Event Dispatcher
  • [Video 11] Daten sortieren
  • [Video 12] Veröffentlichung (Deployment)
  • [Video 13] Schlusswort

Modul 6: Bonus

svelte modul 6

In diesem abschließenden Modul wirst du noch einige Bonus-Inhalte erhalten.

Diese Lektionen erwarten dich:

  • [Video 1] Svelte Storm
  • [Video 2] Svelte in Electron