Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernpfad Frontend Development with Svelte - Online-Lernen mit Zertifikat
Frontend Development with Svelte
Frontend Development with Svelte
Beginner
0.0
0 reviews
0 Learners
Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …
188
Chapters
20
Learning hours
218
Assignments
AI Assistant
Shareable Certificate
Ergebnisse
Ergebnisse
Track content
Related courses and projects
Erfahrungsberichte
Funktionen
Preise
Ergebnisse
Ergebnisse
Track content
Related courses and projects
Erfahrungsberichte
Funktionen
Preise

Was Sie lernen werden

Structure webpages using semantic HTML
Create reusable Svelte components and reactive UI elements
Fetch and display external API data
Style interfaces with CSS and Tailwind CSS
Handle forms, events, and dynamic rendering
Build responsive layouts for different screen sizes
Build interactive frontend logic with JavaScript
Work with shared state using Svelte stores
Organize modern frontend projects and reusable UI patterns.
Learning track content
Willkommen bei HTML und Webentwicklung
Verständnis Von HTML-Tags
Arbeiten mit HTML-Attributen
Verständnis von Gepaarten und Einzelnen Tags in HTML
Textauszeichnung
Listen Organisieren
Challenge: Erstellen Sie den Absatz Ihrer ersten Webseite
Challenge: Build a Personal Introduction Web Page
Challenge: Design a Movie Showcase Web Page
Verwendung von Links
Schaltflächen Hinzufügen
Challenge: Links zu beliebten Websites erstellen
Validierung Ihres HTML-Codes für Best Practices
Verständnis der HTML-Dokumentstruktur
Die Rolle des Dokumentkopfs
Challenge: Structure an HTML Document Correctly
Bilder in HTML Einfügen
Challenge: Work With Images
Arbeiten mit Klickbaren Bildern, Bildunterschriften und Optimierung
Creating and Structuring Tables in HTML
Challenge: Entwurf einer funktionalen HTML-Tabelle
Introduction to HTML Forms
Fundamentals der Formularerstellung in HTML
Verwendung von Labels für bessere Formularzugänglichkeit
Enhancing Forms With Input Attributes
Untersuchung Verschiedener Eingabetypen in HTML
Challenge: Formular mit Eingabefeldern und Beschriftungen Erstellen
Arbeiten mit dem Textarea-Element für Mehrzeilige Eingaben
Verwendung des Select-Elements für Dropdown-Menüs
Verwendung des Datalist-Elements für vordefinierte Eingabevorschläge
Gruppierung von Formularelementen für eine bessere Struktur
Was CSS Ist und Warum Es Wichtig Ist
Connecting CSS to HTML
Elemente auf Einfache Weise Auswählen
Text- und Farbgestaltung
Hinzufügen von Hover-Effekten
Herausforderung: Gestalten Sie Ihre Erste Webseite
Textformatierung für bessere Lesbarkeit
Arbeiten mit Schriftarten und Schrifteigenschaften
Benutzerdefinierte Schriftarten Hinzufügen
Herausforderung: Verbesserung des Designs eines Blogartikels
Das Box-Modell Praxisnah Verstehen
Margin und Padding Einfach Erklärt
Box-Größenbestimmung und Breitenkontrolle
Display-Eigenschaft: Block, Inline und Inline-Block
Herausforderung: Ein Fehlerhaftes Layout Beheben
Warum Flexbox Existiert
Richtungssteuerung
Horizontale Ausrichtung Von Inhalten
Elemente Vertikal Ausrichten
Arbeiten mit Flex-Elementen
Herausforderung: Erstellen Eines Shop-Karten-Layouts Mit Flexbox
Herausforderung: Erstellen Sie Eine Vertikale Blog-Karte Mit Flexbox
Verständnis von Grid-Containern und -Elementen
Definition von Zeilen und Spalten
Gitterabstände und Ausrichtung
Erstellung Eines Praxisnahen Layouts
Verwendung von Hintergrundfarben
Hintergrundbilder Anwenden
Arbeiten mit Bildern in CSS
Effekte mit dekorativen Pseudo-Elementen Erstellen
Schatten für Tiefenwirkung Hinzufügen
Herausforderung: Erstellen Einer Modernen Kartenkomponente
Erste JavaScript-Konsolenanwendung
Challenge: Showing Some Output
Herausforderung: Ausgabe Mehrerer Zeilen
Umgang mit Zahlen
Challenge: Arbeiten mit Zahlen
Herausforderung: Berechnung der Geschwindigkeit eines Autos
Challenge: Berechnung der Fläche eines Trapezes
Ausgabe Mehrerer Werte
Herausforderung: Aussagekräftige Ausgaben in der Konsole
Wie Man Kommentare in JavaScript Verwendet
Challenge: Einen Kommentar Hinzufügen
Mehrzeilige Kommentare
Herausforderung: Auskommentieren Von Code
Was ist JavaScript überhaupt?
Daten Speichern
Herausforderung: Deklaration Einer Variablen
Herausforderung: Zugriff auf Daten aus einer Variablen
Herausforderung: Korrigieren von Variablennamen
Herausforderung: Neuzuweisung Einer Variablen
Konstanten
Challenge: Deklarieren und Verwenden von Konstanten
Arithmetische Operationen mit Variablen Durchführen
Herausforderung: Erstellung eines Gehaltsrechners
Herausforderung: Anpassung des Gehalts mit einem Bonus
Untersuchung Primitiver Datentypen
Herausforderung: Deklaration eines Booleschen Werts
Wie Verschiedene Datentypen Interagieren
Herausforderung: Zeichenketten Verketten
Herausforderung: Erstellung von Benutzerprofil und Aktivitätsdetails
Vergleichsoperatoren
Herausforderung: Überprüfung der Altersberechtigung
Die `If`-Anweisung
Herausforderung: Wetterbasierter Outfit-Empfehler
Herausforderung: Gerade oder Ungerade
Verschachtelte Bedingte Anweisungen
Die `else`-Klausel
Herausforderung: Temperaturberater
Die `else if`-Klausel
Herausforderung: Notenkategorisierer
`Und` Logischer Operator
Herausforderung: Überprüfung, ob eine Zahl Gerade und Positiv Ist
Oder-Logikoperator
Herausforderung: Zugriffskontrollsystem
Was Sind Funktionen?
Herausforderung: Einfache Funktion
Herausforderung: Berechnung der Geschwindigkeit eines Autos
Gültigkeitsbereiche
Daten an Funktionen Übergeben
Herausforderung: Korrektur der Geschwindigkeitsfunktion
Herausforderung: Verbesserung des Notenkategorisierers
Herausforderung: Definition Einer Zusammengesetzten Funktion
Rückgabe von Daten aus Funktionen
Standardwerte
Herausforderung: E-Mail-Auto-Responder mit Standardparametern
Was Sind Arrays?
Herausforderung: Definition Eines Arrays
Herausforderung: Indizierung
Werte zu einem Array Hinzufügen
Herausforderung: Elemente zu einem Array Hinzufügen
Entfernen von Elementen aus einem Array
Herausforderung: Übung mit „pop“ und „shift“
Die Eigenschaft `length`
Herausforderung: Elemente Zählen
Die Methode `includes`
Herausforderung: Suche nach Tieren im Zoo
Die `for`-Schleife
Herausforderung: Eine Sequenz Ausgeben
Die `while`-Schleife
Herausforderung: Fibonacci-Folge Ausgeben
Die `do-while`-Schleife
Herausforderung: Zufälliges Vielfaches von 7
Schleifen Mit Arrays Verwenden
Herausforderung: Den Durchschnittspreis von Artikeln Ermitteln
Zusammenfassung
Steigere deine Tech-Fähigkeiten!
mit bis zu 55% Rabatt
Features:
*Tracks not included in Pro plan
500+ Top-bewertete KurseFortschrittlicher KI-Copilot
Personalisierte Lernpfade40+ praxisnahe Projekte
Ohne Kündigung, bevor der ausgewählte Rabattplan endet, akzeptiere ich, dass Codefinity automatisch belastet $104 alle 3 Monate bis ich kündige. Erfahren Sie mehr über die Stornierungs- und Rückerstattungsrichtlinien in Abonnementbedingungen.
Recommended Courses and Projects

kurs

Ultimatives HTML

Ultimatives HTML

Erlernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser einsteigerfreundliche Kurs behandelt Tags, Attribute, Elemente und die Strukturierung von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Webentwicklungsreise mit HTML.

kurs

Einführung in JavaScript

Einführung in JavaScript

Tauchen Sie ein in die Welt der beliebtesten Sprache für Frontend-Entwicklung – JavaScript. JavaScript ist eine Sprache, die in nahezu jedem Browser integriert ist und für eine Vielzahl von Aufgaben eingesetzt werden kann. Erlernen Sie die grundlegenden Funktionen und bereiten Sie sich auf Herausforderungen sowie fortgeschrittene Programmiertechniken vor.

kurs

CSS-Grundlagen

CSS-Grundlagen

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

kurs

HTML-Grundlagen

HTML-Grundlagen

Beherrschen Sie die Grundlagen von HTML, um gut strukturierte und zugängliche Webinhalte zu erstellen. Lernen Sie, wie Sie Dokumente mit Tags, Elementen und Attributen strukturieren. Arbeiten Sie sicher mit Text, Listen, Bildern, Audio und Video, um Webseiten zu bereichern. Erstellen Sie Tabellen für organisierte Daten und Formulare für Benutzereingaben und Interaktionen. Entdecken Sie semantisches HTML zur Verbesserung der Zugänglichkeit und zum Aufbau vollständiger, funktionaler Webseitenstrukturen von Grund auf.

kurs

Javascript Datenstrukturen

Javascript Datenstrukturen

Lernen Sie, sicher mit Daten in JavaScript zu arbeiten, indem Sie Objekte und Arrays beherrschen. Verstehen Sie, wie Sie Objekteigenschaften und -methoden effektiv erstellen, darauf zugreifen und verwalten. Tauchen Sie ein in fortgeschrittene Objektmanipulationstechniken, einschließlich Iteration, Klonen und Destrukturierung für einen saubereren Code. Bauen Sie eine solide Grundlage im Umgang mit Arrays auf und lernen Sie, Array-Elemente effizient zu verwalten, zu iterieren und zu modifizieren. Beherrschen Sie fortgeschrittene Array-Methoden wie map, filter, find und sort, um Daten in Ihren Anwendungen effektiv zu transformieren und zu verarbeiten.

kurs

CSS-Layout, Effekte und Sass

CSS-Layout, Effekte und Sass

Verbessern Sie Ihre Styling-Fähigkeiten durch das Beherrschen fortgeschrittener CSS-Techniken für modernes Webdesign. Positionieren und verwalten Sie Elemente präzise mit fortgeschrittenen Positionierungsstrategien. Erstellen Sie fließende Übergänge und ansprechende Animationen zur Verbesserung der Benutzererfahrung. Transformieren und manipulieren Sie Elemente für dynamische visuelle Effekte. Entwickeln Sie responsive Designs, die sich an verschiedene Geräte anpassen, und optimieren Sie Ihren Workflow mit CSS-Präprozessoren wie Sass.

kurs

Einführung in das Digitale Marketing

Einführung in das Digitale Marketing

Dieser umfassende Marketingkurs bietet eine tiefgehende Reise durch die Grundlagen und fortgeschrittenen Strategien des digitalen Marketings. Erkunden Sie Schlüsselbereiche wie SEO, PPC, soziale Medien und KI, während Sie lernen, wie man Strategien entwickelt, die Ergebnisse liefern. Jede Sektion enthält praktische Beispiele und Werkzeuge, um Ihr Verständnis zu festigen. Der Kurs endet mit einem praxisorientierten Projekt, das Sie befähigt, Ihren eigenen umfassenden Marketingplan zu erstellen und zu präsentieren.

kurs

JavaScript Ninja

JavaScript Ninja

Willkommen zum JavaScript Ninja Kurs! Dieser fesselnde und interaktive Kurs ist darauf ausgelegt, Ihnen die Grundlagen der JavaScript-Programmierung durch ein unterhaltsames und lehrreiches Spiel näherzubringen. Sie werden einen Ninja durch verschiedene Herausforderungen führen, indem Sie JavaScript verwenden, um Bewegungen zu steuern und mit Objekten wie Sushi zu interagieren. Beginnend mit den Grundlagen lernen Sie, wie man sich auf der Karte bewegt, Sushi aufnimmt und platziert und allmählich zu komplexeren Programmierkonzepten wie Funktionen, Schleifen und bedingten Anweisungen fortschreitet. Jedes Kapitel bietet praktische Übungen zur Verstärkung Ihres Lernens und gipfelt in aufregenden Herausforderungen, die Ihre Fähigkeiten testen. Egal, ob Sie ein kompletter Anfänger sind oder Ihre Programmierfähigkeiten schärfen möchten, dieser Kurs bietet ein umfassendes und unterhaltsames Lernerlebnis. Machen Sie mit und werden Sie ein Coding-Ninja!

kurs

JavaScript-Logik und Interaktion

JavaScript-Logik und Interaktion

Beherrschen Sie grundlegende JavaScript-Konzepte, einschließlich Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Lernen Sie, dynamische und interaktive Webanwendungen zu erstellen, indem Sie Benutzerinteraktionen verwalten, Daten abrufen und anzeigen sowie asynchrone Operationen effizient handhaben. Durch eine Kombination aus Theorie, praxisnahen Herausforderungen und realen Beispielen vermittelt dieser Kurs die praktischen Fähigkeiten, die für die moderne Webentwicklung erforderlich sind.

kurs

Einführung in Blockchain

Einführung in Blockchain

Erkunden Sie die revolutionäre Welt der Blockchain-Technologie und ihre erste sowie bedeutendste Anwendung, Bitcoin. Tauchen Sie ein in die Feinheiten der Funktionsweise von Blockchain, die technischen Grundlagen von Bitcoin sowie die weitreichenden Implikationen und zukünftigen Trends in diesem dynamischen Bereich. Erlangen Sie ein umfassendes Verständnis der Technologie, die Branchen transformiert und traditionelle Vorstellungen von Währung und Datensicherheit herausfordert.

kurs

Netzwerkgrundlagen

Netzwerkgrundlagen

Netzwerkgrundlagen ist ein umfassender Kurs, der für Anfänger und fortgeschrittene Lernende konzipiert wurde, die praktische Fähigkeiten im Bereich Netzwerke aufbauen möchten. Der Kurs behandelt alles von grundlegenden Konzepten bis hin zu fortgeschrittenen Anwendungen und führt durch zentrale Themen wie Netzwerkkategorien, IP-Adressierung, Protokolle und Netzwerksicherheit. Am Ende dieses Kurses verfügen Sie über essenzielle Fähigkeiten, um Netzwerke effektiv zu analysieren, abzusichern und zu verwalten, und legen damit eine solide Basis für eine weitere Spezialisierung im Bereich Netzwerke.

kurs

Einführung in Manuelles Testen & QA in der Webentwicklung

Einführung in Manuelles Testen & QA in der Webentwicklung

In diesem Kurs erhält der Benutzer eine Einführung in die manuelle Testdurchführung, hauptsächlich bei Webanwendungen. Die in diesem Kurs erworbenen Fähigkeiten können auch im automatisierten Testen eingesetzt werden.

Warum Menschen Codefinity wählen

Kwizera Mugisha

Web Developer

Kwizera Mugisha

linkedIn

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Sherry Barnes-Fox

Senior Business Analyst

Sherry Barnes-Fox

linkedIn

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Bill Wagner

Accounts Payable Specialist

Bill Wagner

linkedIn

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

Daniel Chinea

IT Support Specialist

Daniel Chinea

linkedIn

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Steve Bruening

Technology Project Manager

Steve Bruening

linkedIn

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Stephanie Chan

Project Manager

Stephanie Chan

linkedIn

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results
Interaktive Programmierumgebung

Tauche in unsere interaktive Umgebung ein: Schreibe und führe deinen Code mit Echtzeit-Feedback und Erfolgsmetriken aus—lerne bei jedem Schritt durch Praxis.

KI-gestützte Unterstützung

Nutze den integrierten KI-Assistenten, um Fehler zu erklären, Korrekturen vorzuschlagen oder Fragen zu deinem Code zu beantworten—so bleibst du produktiv und kommst nie ins Stocken.

Check your progress

Schließe jedes Modul mit einem kurzen Quiz ab, das sofortiges Feedback liefert, deinen Fortschritt verfolgt und sicherstellt, dass du die wichtigsten Konzepte beherrschst.

Promote your expertise

Erhalte dein branchenanerkanntes Zertifikat nach Abschluss und teile es mit einem Klick auf LinkedIn—lass dein Netzwerk sehen, was du kannst.

Vertraut von Mitarbeitern führender Unternehmen
und Studenten führender Universitäten

Google
Intel
Twitter
FedEx
Meta
Nike
Amazon
Microsoft
Tesla
Google
Intel
Twitter
FedEx
Meta
Nike
Amazon
Microsoft
Tesla
florida
illinois
colorado
indiana
new-york
cornell
columbia
notre-dame
florida
illinois
colorado
indiana
florida
illinois
colorado
indiana
new-york
cornell
columbia
notre-dame
florida
illinois
colorado
indiana

Zugriff auf den gesamten Katalog

Ein Abonnement eröffnet Ihnen diesen Kurs und unseren gesamten Katalog von Projekten und Fähigkeiten.
Features:
500+ Top-bewertete KurseFortschrittlicher KI-Copilot
Personalisierte Lernpfade40+ praxisnahe Projekte
Ohne Kündigung, bevor der ausgewählte Rabattplan endet, akzeptiere ich, dass Codefinity automatisch belastet $104 alle 3 Monate bis ich kündige. Erfahren Sie mehr über die Stornierungs- und Rückerstattungsrichtlinien in Abonnementbedingungen.

Probiere Codefinity mit Vertrauen aus – 30-Tage-Geld-zurück-Garantie inklusive

Um dich bei Codefinity willkommen zu heißen, bieten wir bis zu 64% Rabatt auf unsere Kurse. Außerdem haben wir eine 30-Tage-Geld-zurück-Garantie, damit du uns risikofrei ausprobieren kannst.Wir freuen uns wirklich darauf, dich auf unserer Plattform willkommen zu heißen und sind bestrebt, dein Lernerlebnis einfach, interaktiv und unterhaltsam zu gestalten.
Shield Image
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
500+ Top-Rated courses
yes
yes
Completion certificates
yes
yes
Early access to new courses
yes
yes
40+ hands-on Real-world projects
no
yes
Personalized study tracks
no
yes
Unlimited workspaces
no
yes

Sofortiger Zugriff auf 500+ Kurse

Unbegrenztes Lernen, sofortiger Zugriff
Unbegrenztes Lernen, sofortiger ZugriffErhalte vollen Zugriff auf alle Kurse und Tracks, einschließlich Videoinhalten, Quiz und ausführlichen Materialien—beginne jederzeit mit dem Lernen.
Branchenanerkannte Zertifikate
Branchenanerkannte ZertifikateErhalte Zertifikate, die deine Expertise bestätigen und deine Karriere in Tech, KI, Daten, Marketing und darüber hinaus fördern.
KI-unterstütztes Lernen
KI-unterstütztes LernenErhalte personalisierte Hinweise, Echtzeit-Feedback und KI-gestützte Erklärungen, um deinen Fortschritt zu beschleunigen.
Ständig wachsend: Neue Kurse & Karrierepfade
Ständig wachsend: Neue Kurse & KarrierepfadeBleibe mit ständig aktualisierten Kursen, Karriereplänen, Herausforderungen und praktischen Tests auf dem neuesten Stand.
Baue relevante Fähigkeiten auf
Baue relevante Fähigkeiten aufMeistere gefragte Fähigkeiten mit Kursen in KI, Datenwissenschaft, Programmierung, Marketing, Automatisierung, Webentwicklung und mehr.
Interaktives & nahtloses Lernen
Interaktives & nahtloses LernenBeteilige dich an praxisnahen Projekten, realen Übungen und einem intuitiven Lernerlebnis — keine zusätzlichen Werkzeuge erforderlich.
some-alt