Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lärandespår Frontend Development with Svelte - Online-utbildning med certifikat
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
Resultat
Resultat
Track content
Related courses and projects
Omdömen
Funktioner
Priser
Resultat
Resultat
Track content
Related courses and projects
Omdömen
Funktioner
Priser

Vad du kommer att lära dig

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
Välkommen till HTML och webbutveckling
Förståelse av HTML-taggar
Arbeta med HTML-attribut
Förståelse av parvisa och enkla taggar i HTML
Textmarkering
Organisera listor
Challenge: Skapa Ditt Första Webbsidesstycke
Challenge: Build a Personal Introduction Web Page
Utmaning: Designa en Filmskylt-Webbsida
Använda länkar
Lägga till knappar
Challenge: Skapa länkar till populära webbplatser
Validera din HTML-kod enligt bästa praxis
Förståelse av HTML-dokumentstruktur
Dokumenthuvudets Roll
Utmaning: Strukturera ett HTML-dokument korrekt
Lägga till bilder i HTML
Utmaning: Arbeta med bilder
Arbete med klickbara bilder, bildtexter och optimering
Skapa och strukturera tabeller i HTML
Utmaning: Designa en Funktionell HTML-Tabell
Introduktion till HTML-formulär
Grunderna i formulärskapande i HTML
Använda etiketter för bättre tillgänglighet i formulär
Enhancing Forms With Input Attributes
Utforska Olika Inmatningstyper i HTML
Challenge: Skapa Formulär med Inmatningsfält och Etiketter
Arbete med textarea-elementet för flerradig inmatning
Använda select-elementet för rullgardinsmenyer
Använda Datalist-elementet för fördefinierade inmatningsförslag
Gruppering av formelement för bättre struktur
Vad CSS Är och Varför Det Är Viktigt
Ansluta CSS till HTML
Välja Element på ett Enkelt Sätt
Formatering av Text och Färger
Lägga till hovringseffekter
Utmaning: Styla Din Första Webbsida
Textformatering för Bättre Läsbarhet
Arbeta med typsnitt och typsnittsegenskaper
Lägga till Anpassade Typsnitt
Utmaning: Förbättra Designen av en Bloggartikel
Förståelse av boxmodellen på ett praktiskt sätt
Marginaler och Utfyllnad Förklarade Enkelt
Boxstorlek och Breddkontroll
Display-egenskap: Block, Inline och Inline-block
Utmaning: Åtgärda en Trasig Layout
Varför Flexbox Finns
Styrriktning
Justera Innehåll Horisontellt
Justera Objekt Vertikalt
Arbeta med Flexobjekt
Utmaning: Skapa en Butikskortlayout med Flexbox
Utmaning: Skapa ett Vertikalt Bloggkort med Flexbox
Förståelse av Grid-Behållare och Objekt
Definiera Rader och Kolumner
Rutnätsavstånd och Justering
Bygga en Layout för Verkliga Tillämpningar
Använda Bakgrundsfärger
Använda Bakgrundsbilder
Arbeta med bilder i CSS
Skapa Effekter med Dekorativa Pseudo-element
Lägga till skuggor för djup
Utmaning: Skapa en Modern Kortkomponent
Första JavaScript-konsolapplikationen
Utmaning: Visa Viss Utdata
Utmaning: Skriva ut Flera Rader
Hantering av Tal
Utmaning: Arbeta med Tal
Utmaning: Beräkna Bilens Hastighet
Challenge: Beräkna arean av en trapezoid
Utmatning av Flera Värden
Utmaning: Meningsfull Utskrift i Konsolen
Hur Man Använder Kommentarer i JavaScript
Utmaning: Lägga till en kommentar
Fler-Radiga Kommentarer
Utmaning: Kommentera Ut Kod
Vad Är Egentligen Javascript?
Lagra Data
Utmaning: Deklarera en Variabel
Utmaning: Åtkomst till Data från en Variabel
Utmaning: Åtgärda Variabelnamn
Utmaning: Omdefiniera en Variabel
Konstanter
Utmaning: Deklarera och använda konstanter
Utföra Aritmetik på Variabler
Utmaning: Skapa en Lönekalkylator
Utmaning: Justera Lön med Bonus
Utforska Primitiva Datatyper
Utmaning: Deklarera ett booleskt värde
Hur Olika Datatyper Samverkar
Utmaning: Sammanfoga Strängar
Utmaning: Skapa Användarprofil och Aktivitetsdetaljer
Jämförelseoperatorer
Utmaning: Kontroll av Åldersbehörighet
If-Satsen
Utmaning: Väderbaserad Klädrekommendation
Utmaning: Jämn eller Udda
Nästlade Villkorssatser
The `else` Clause
Utmaning: Temperaturrådgivare
`Else If`-satsen
Utmaning: Betygskategoriserare
"Och" Logisk Operator
Utmaning: Kontrollera om ett tal är jämnt och positivt
Eller-logisk operator
Utmaning: Åtkomstkontrollsystem
Vad Är Funktioner?
Utmaning: Enkel Funktion
Utmaning: Beräkna Bilens Hastighet
Omfång
Skicka Data till Funktioner
Utmaning: Åtgärda Hastighetsfunktionen
Utmaning: Förbättra Betygskategoriseraren
Utmaning: Definiera en Sammansatt Funktion
Att Returnera Data Från Funktioner
Standardvärden
Utmaning: E-postautosvarare med standardparametrar
Vad Är Arrayer?
Utmaning: Definiera en Array
Utmaning: Indexering
Lägga Till Värden i en Array
Utmaning: Lägga till element i en array
Ta Bort Element Från en Array
Utmaning: Öva på `pop` och `shift`
Egenskapen `length`
Utmaning: Räkna Element
Metoden `Includes`
Utmaning: Söka Efter Djur i Djurparken
`For`-loopen
Utmaning: Skriva ut en Sekvens
`While`-loopen
Utmaning: Skriva ut Fibonaccisekvensen
`Do-While`-loopen
Utmaning: Slumpmässig Multipel av 7
Använda Loopar med Arrayer
Utmaning: Hitta det Genomsnittliga Priset på Varor
Sammanfattning
What Svelte Is and Why Developers Use It
How Svelte Differs from React and Vue
Setting Up a Svelte Project with Vite
Understanding the Svelte Project Structure
Understanding .svelte Files
Your First Svelte Component
Displaying Data with Curly Braces
Passing Data with Props
Default Prop Values
Scoped Component Styles
Creating Reusable Components
Reactive Variables
Reactive Statements
Two-Way Binding with bind:
Conditional Rendering with {#if}
Rendering Lists with {#each}
Handling Events
Understanding Stores
Writable Stores
Derived Stores
Store Subscriptions with $
Sharing State Across Components
Fetching Data from APIs
Loading and Error States
Search and Filtering
Working with Async Data
Svelte Transitions
Fade Fly and Slide Animations
Parent and Child Components
Slots and Component Composition
Working with Forms and Inputs
Form Validation
Submitting Form Data
Organizing a Svelte Application
Building Responsive Layouts
Building a Complete Frontend Application
Förbättra dina tekniska färdigheter!
med upp till 55% rabatt
Features:
*Tracks not included in Pro plan
500+ topprankade kurserBanbrytande AI Copilot
Personliga studieplaner40+ praktiska verkliga projekt
Ingen avbokning, innan den valda rabatterade planen är slut, godkänner jag att Codefinity automatiskt debiterar $104 var 3:e månad tills jag avbokar. Läs mer om avboknings- och återbetalningspolicyn på Prenumerationsvillkor.
Recommended Courses and Projects

kurs

Ultimate HTML

Ultimate HTML

Lär dig grunderna i HTML (HyperText Markup Language), grunden för webbutveckling. Denna nybörjarvänliga kurs täcker taggar, attribut, element och strukturering av webbsidor. Få praktiska färdigheter i att skapa rubriker, stycken, listor, bilder, länkar, formulär och tabeller. Utforska bästa praxis, optimering och webbtillgänglighet. Börja din webbutvecklingsresa med HTML.

kurs

Introduktion till JavaScript

Introduktion till JavaScript

Fördjupa dig i världens mest populära språk för front-end-utveckling – JavaScript. JavaScript är ett språk som är inbyggt i nästan alla webbläsare och kan användas för en mängd olika uppgifter. Lär dig grundläggande funktionalitet och förbered dig för utmaningar och mer avancerade programmeringstekniker.

kurs

CSS-Grunder

CSS-Grunder

Behärska grunderna i CSS, det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska centrala koncept såsom textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor.

kurs

HTML-Grunder

HTML-Grunder

Behärska grunderna i HTML för att skapa välstrukturerat och tillgängligt webbinnehåll. Lär dig att strukturera dokument med hjälp av taggar, element och attribut. Arbeta säkert med text, listor, bilder, ljud och video för att berika webbsidor. Skapa tabeller för organiserad data och formulär för användarinmatning och interaktion. Upptäck semantisk HTML för att förbättra tillgängligheten och bygga kompletta, funktionella webbplatsstrukturer från grunden.

kurs

Javascript Datastrukturer

Javascript Datastrukturer

Lär dig att arbeta säkert med data i JavaScript genom att behärska objekt och arrayer. Förstå hur du skapar, får åtkomst till och hanterar objektens egenskaper och metoder på ett effektivt sätt. Fördjupa dig i avancerade tekniker för objektmanipulation, inklusive iteration, kloning och destrukturering för renare kod. Bygg en stark grund i arbete med arrayer och lär dig att hantera, iterera och modifiera arrayelement effektivt. Behärska avancerade arraymetoder som map, filter, find och sort för att transformera och hantera data effektivt i dina applikationer.

kurs

CSS-layout, effekter och Sass

CSS-layout, effekter och Sass

Förbättra dina stilkunskaper genom att bemästra avancerade CSS-tekniker för modern webbdesign. Positionera och hantera element med precision med hjälp av avancerade positioneringsstrategier. Skapa mjuka övergångar och engagerande animationer för att förbättra användarupplevelsen. Transformera och manipulera element för dynamiska visuella effekter. Bygg responsiva designer som anpassar sig över olika enheter och effektivisera arbetsflödet med CSS-förprocessorer som Sass.

kurs

Introduction to Digital Marketing

Introduction to Digital Marketing

This comprehensive marketing course offers an in-depth journey through the fundamentals and advanced strategies of digital marketing. Explore key areas like SEO, PPC, social media, and AI while learning how to craft strategies that deliver results. Each section includes practical examples and tools to solidify your understanding. The course concludes with a hands-on project, empowering you to create and present your own comprehensive marketing plan.

kurs

JavaScript Ninja

JavaScript Ninja

Välkommen till JavaScript Ninja-kursen! Denna engagerande och interaktiva kurs är utformad för att introducera dig till grunderna i JavaScript-programmering genom ett roligt och lärorikt spel. Du kommer att guida en ninja genom olika utmaningar, använda JavaScript för att kontrollera rörelser och interagera med objekt som sushi. Börja med grunderna, lär dig navigera på kartan, plocka upp och placera sushi, och gradvis gå vidare till mer komplexa programmeringskoncept som funktioner, loops och villkorssatser. Varje kapitel erbjuder praktiska övningar för att förstärka ditt lärande, vilket kulminerar i spännande utmaningar som testar dina färdigheter. Oavsett om du är en fullständig nybörjare eller vill vässa dina kodningsförmågor, erbjuder denna kurs en omfattande och njutbar lärandeupplevelse. Gå med oss och bli en kodningsninja!

kurs

Javascriptlogik och Interaktion

Javascriptlogik och Interaktion

Behärska grundläggande JavaScript-koncept, inklusive klasser, DOM-manipulation, händelsehantering och asynkron programmering. Lär dig att skapa dynamiska och interaktiva webbapplikationer genom att hantera användarinteraktioner, hämta och visa data samt effektivt hantera asynkrona operationer. Genom en kombination av teori, praktiska utmaningar och verkliga exempel ger denna kurs dig de praktiska färdigheter som krävs för modern webbutveckling.

kurs

Introduktion till Blockkedja

Introduktion till Blockkedja

Utforska den revolutionerande världen av blockkedjeteknik och dess första och mest framträdande tillämpning, Bitcoin. Fördjupa dig i detaljerna kring hur blockkedjan fungerar, de tekniska grunderna för Bitcoin samt de bredare konsekvenserna och framtida trenderna inom detta dynamiska område. Få en heltäckande förståelse för teknologin som omformar industrier och utmanar traditionella uppfattningar om valuta och datasäkerhet.

kurs

Nätverksgrunder

Nätverksgrunder

Nätverksgrunder är en omfattande kurs utformad för nybörjare och medelavancerade deltagare som vill bygga praktiska färdigheter inom nätverk. Kursen täcker allt från grundläggande begrepp till avancerade tillämpningar och tar dig igenom viktiga ämnen såsom nätverkstyper, IP-adressering, protokoll och nätverkssäkerhet. Efter avslutad kurs kommer du att ha nödvändiga färdigheter för att felsöka, säkra och hantera nätverk effektivt, vilket ger en stabil grund för vidare specialisering inom nätverk.

kurs

Introduction to QA

Introduction to QA

In this course, the user will get an introduction on how to perform manual testing on primarily web applications. The skills aquired in this course can be used in automation testing as well.

Varför folk väljer Codefinity

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
Interaktiv kodningsmiljö

Hoppa in i vår interaktiva miljö: skriv och kör din kod med feedback i realtid och framgångsmått—lär dig genom att göra vid varje steg.

AI-driven support

Använd den inbyggda AI-assistenten för att förklara fel, föreslå lösningar eller svara på frågor om din kod—så att du förblir produktiv och aldrig fastnar.

Check your progress

Avsluta varje modul med ett snabbt quiz som ger omedelbar feedback, spårar din framsteg och säkerställer att du har bemästrat viktiga koncept.

Promote your expertise

Få ditt branschigenkända certifikat vid slutförandet och dela det på LinkedIn med ett klick—låt ditt nätverk se vad du kan göra.

Betrodd av anställda på ledande företag
och studenter från toppuniversitet

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

Full tillgång till katalogen

Ett abonnemang öppnar denna kurs och hela vår katalog av projekt och färdigheter.
Features:
500+ topprankade kurserBanbrytande AI Copilot
Personliga studieplaner40+ praktiska verkliga projekt
Ingen avbokning, innan den valda rabatterade planen är slut, godkänner jag att Codefinity automatiskt debiterar $104 var 3:e månad tills jag avbokar. Läs mer om avboknings- och återbetalningspolicyn på Prenumerationsvillkor.

Prova Codefinity med förtroende – 30-dagars pengarna-tillbaka-garanti ingår

För att välkomna dig till Codefinity erbjuder vi upp till 64% rabatt på våra kurser. Dessutom har vi en 30-dagars pengarna-tillbaka-garanti, så att du kan prova oss riskfritt.Vi ser verkligen fram emot att välkomna dig till vår plattform och är engagerade i att göra din lärandeupplevelse enkel, interaktiv och rolig.
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

Få omedelbar tillgång till 500+ kurser

Obegränsat lärande, omedelbar tillgång
Obegränsat lärande, omedelbar tillgångFå full tillgång till alla kurser och spår, inklusive videoinnehåll, quiz och djupgående material—börja lära när som helst.
Branschigenkända certifikat
Branschigenkända certifikatFå certifikat som bekräftar din expertis och stärker din karriär inom teknik, AI, data, marknadsföring och mer.
AI-assisterat lärande
AI-assisterat lärandeFå personliga tips, feedback i realtid och AI-drivna förklaringar för att påskynda din framsteg.
Ständigt expanderande: Nya kurser och karriärspår
Ständigt expanderande: Nya kurser och karriärspårHåll dig före med ständigt uppdaterade kurser, karriärkartor, utmaningar och praktiska övningstester.
Bygg färdigheter som räknas
Bygg färdigheter som räknasBehärska efterfrågade färdigheter med kurser i AI, datavetenskap, programmering, marknadsföring, automation, webbutveckling och mer.
Interaktivt och sömlöst lärande
Interaktivt och sömlöst lärandeEngagera dig med praktiska projekt, verkliga övningar och en intuitiv lärandeupplevelse — inga extra verktyg behövs.
some-alt