PricingLoginStart free
Sveltejs Academy logo
HTMLBegynderWebNiveauer A1 → C122 sprog

Sveltejs Academy

Byg hurtige og enkle brugerflader med moderne teknikker på Svelte Academy. Et læringsforløb på CoddyKit med 41 korte kurser og 163 interaktive lektioner – med en AI-vejleder ved din side døgnet rundt.

Kurser
41
Lektioner
163
Interaktive trin
2,114
Gratis at komme i gang
Kursus 1
GET IT ONGoogle PlayDownload on theApp Store
Kursusindhold

41 kurser på denne sti

Alle kurser på Sveltejs Academy-stien i læringsrækkefølge. Det første kursus er gratis.

1

A13 lektionerGratis

Forstå, hvad Svelte er, hvorfor det anvender en helt anden tilgang til opbygning af brugergrænseflader end React eller Vue, og hvorfor udviklere, der prøver det, ofte forelsker sig i det.

  1. 1Hvad er Svelte?
  2. 2Hvorfor Svelte føles som magi
  3. 3Det bygger De med Svelte
Start gratis
2

A14 lektionerPRO

Kom godt i gang med Svelte ved at forstå, hvad der adskiller det fra andre frameworks, opsætte Deres første projekt og udforske projektstrukturen og udviklingsarbejdsgangen.

  1. 1Hvad er Svelte, og hvorfor kompilerer det
  2. 2Opret et projekt med npm create svelte
  3. 3Projektstruktur: src routes static
  4. +1 flere
Start gratisLås op med PRO
3

A14 lektionerPRO

Lær at skrive Svelte-komponenter fra bunden, bruge reaktive variabler, interpolere udtryk og oprette beregnede værdier med reaktive deklarationer.

  1. 1Strukturen i script-, template- og style-sektionerne
  2. 2Reaktive variabler med let
  3. 3Interpolation: {expression}
  4. +1 flere
Start gratisLås op med PRO
4

A24 lektionerPRO

Send data mellem Svelte-komponenter med props, angiv standardværdier, og videresend props elegant med $$props og $$restProps.

  1. 1Deklarér props med export let
  2. 2Send props fra den overordnede komponent
  3. 3Standardværdier for props
  4. +1 flere
Start gratisLås op med PRO
5

A24 lektionerPRO

Styr, hvad der rendrer i Deres Svelte-skabeloner, med conditional blocks, iterér over arrays med each blocks, og fremtving nye rendringer med key blocks.

  1. 1{#if} {#else if} {#else}
  2. 2{#each} med indeks og nøgle
  3. 3{#key} til at fremtvinge ny gengivelse
  4. +1 flere
Start gratisLås op med PRO
6

A24 lektionerPRO

Håndtér DOM-events i Svelte, brug event modifiers til at forenkle almindelige mønstre, afsend brugerdefinerede events fra underkomponenter, og videresend events op gennem træet.

  1. 1on:click on:input on:submit
  2. 2Eventmodifikatorer: preventDefault stopPropagation once
  3. 3Brugerdefinerede events med createEventDispatcher
  4. +1 flere
Start gratisLås op med PRO
7

A24 lektionerPRO

Synkronisér formularfelter og DOM-elementer med Svelte-variabler ved hjælp af bind:-direktiver til tekst, afkrydsningsfelter, radiogrupper og elementreferencer.

  1. 1bind:value til tekstinput
  2. 2bind:checked til afkrydsningsfelter
  3. 3bind:group til radio- og afkrydsningsgrupper
  4. +1 flere
Start gratisLås op med PRO
8

B14 lektionerPRO

Styr, hvad der sker på hvert trin i en Svelte-komponents livscyklus med onMount, onDestroy, beforeUpdate, afterUpdate og tick-værktøjet.

  1. 1onMount: Kørsel efter gengivelse
  2. 2onDestroy: Oprydning
  3. 3beforeUpdate og afterUpdate
  4. +1 flere
Start gratisLås op med PRO
9

B14 lektionerPRO

Del reaktiv tilstand på tværs af komponenter med Svelte's indbyggede store-primitiver, abonnér på dem med $-forkortelsen, og opret readable stores med brugerdefineret logik.

  1. 1Opret et writable Store
  2. 2Abonnér med $ automatisk abonnement
  3. 3Opdatering af stores: set() og update()
  4. +1 flere
Start gratisLås op med PRO
10

B14 lektionerPRO

Sammensæt Svelte-stores ved at udlede beregnede stores fra én eller flere kilder, og opbyg helt brugerdefinerede stores, der implementerer store-kontrakten.

  1. 1derived() til beregnede stores
  2. 2Mønster for brugerdefinerede stores med subscribe/set/update
  3. 3Readable fra writable
  4. +1 flere
Start gratisLås op med PRO
11

B14 lektionerPRO

Indsæt indhold i Svelte-komponenter med default- og navngivne slots, angiv fallback-indhold, og kontrollér, om slots er udfyldt.

  1. 1Standard-slots til indholdsprojektion
  2. 2Navngivne slots med slot="name"
  3. 3Fallback-indhold i slots
  4. +1 flere
Start gratisLås op med PRO
12

B14 lektionerPRO

Animér elementer, der kommer ind i eller forlader DOM'en, med Svelte's indbyggede transition-direktiver, konfigurér timing og easing, og håndtér asymmetriske in/out-overgange.

  1. 1transition:fade og transition:fly
  2. 2Overgangsparametre: duration delay easing
  3. 3in: og out: til asymmetriske overgange
  4. +1 flere
Start gratisLås op med PRO
13

B14 lektionerPRO

Gå videre end overgange med Svelte's animate-direktiv til omarrangering af lister, fysikbaserede spring-animationer og interpolation af tweenede værdier.

  1. 1animate:flip til omarrangering af lister
  2. 2spring()- og tweened()-stores
  3. 3Brugerdefinerede easing-funktioner
  4. +1 flere
Start gratisLås op med PRO
14

B14 lektionerPRO

Navigér i SvelteKits filbaserede routingsystem, opret dynamiske routes med parametre, og brug layoutfiler til at dele UI på tværs af sider.

  1. 1Filbaseret routing med +page.svelte
  2. 2Dynamiske route-parametre: [id]
  3. 3Valgfrie parametre og rest-parametre
  4. +1 flere
Start gratisLås op med PRO
15

B14 lektionerPRO

Indlæs data til Deres sider med SvelteKits load-funktioner, håndtér fejl elegant, og kør servereksklusiv logik i +page.server.js.

  1. 1+page.js load-funktionen
  2. 2Returnér data, og brug $page.data
  3. 3Fejlhåndtering i load
  4. +1 flere
Start gratisLås op med PRO
16

B14 lektionerPRO

Send data dybt ind i komponenttræet uden prop drilling med Svelte's Context API, og forstå, hvornår context bør foretrækkes frem for stores.

  1. 1setContext() og getContext()
  2. 2Kontekst eller stores: Hvornår skal de bruges
  3. 3Typet kontekst med TypeScript
  4. +1 flere
Start gratisLås op med PRO
17

B14 lektionerPRO

Forbedr synligheden ved at angive dynamiske metatags, OpenGraph-kort og strukturerede JSON-LD-data samt håndtere canonical-URL'er i SvelteKit.

  1. 1svelte:head til dynamiske metatags
  2. 2OpenGraph- og Twitter Card-meta
  3. 3JSON-LD-strukturerede data i SvelteKit
  4. +1 flere
Start gratisLås op med PRO
18

B24 lektionerPRO

Håndtér HTML-formularindsendelser på serveren med SvelteKit form actions, forbedr dem gradvist med JavaScript, og returnér valideringsfejl.

  1. 1+page.server.js med actions
  2. 2Direktivet use:enhance
  3. 3Progressiv forbedring af formularer
  4. +1 flere
Start gratisLås op med PRO
19

B24 lektionerPRO

Opbyg RESTful- og streaming-API-endpoints i SvelteKit med +server.js-filer, håndtér flere HTTP-metoder, og returnér typede JSON-svar.

  1. 1+server.js: GET POST PUT DELETE
  2. 2Request og RequestEvent
  3. 3Returnér JSON-svar
  4. +1 flere
Start gratisLås op med PRO
20

B24 lektionerPRO

Opfang og transformér hver request med SvelteKits server-hooks, log fejl centralt, og sammensæt flere hooks med sequence-værktøjet.

  1. 1handle()-hooket: Middleware til requests
  2. 2handleError til logning af serverfejl
  3. 3init()-hooket
  4. +1 flere
Start gratisLås op med PRO
21

B24 lektionerPRO

Skab gode brugeroplevelser, når noget går galt, ved at tilpasse fejlsider, skelne mellem forventede og uventede fejl og håndtere fejl i indlejrede layouts.

  1. 1+error.svelte til brugerdefinerede fejlsider
  2. 2Forventede og uventede fejl
  3. 3Hjælpefunktionerne error() og redirect()
  4. +1 flere
Start gratisLås op med PRO
22

B24 lektionerPRO

Uddyb Deres forståelse af Svelte's reaktive system: rækkefølgen af reaktive statements, hvornår stores bør bruges frem for lokal tilstand, og hvordan stale closures undgås.

  1. 1Reaktive statements: $:-blok
  2. 2Reaktive afhængigheder og rækkefølge
  3. 3Hvornår skal stores bruges frem for lokal state
  4. +1 flere
Start gratisLås op med PRO
23

B24 lektionerPRO

Tilknyt genanvendelig imperativ adfærd til DOM-elementer med Svelte-actions, håndtér parametre og opdateringer, og opbyg praktiske actions som clickOutside og tooltip.

  1. 1Syntaks for use:-direktivet
  2. 2Action-parametre og opdateringer
  3. 3destroy()-oprydningsfunktionen
  4. +1 flere
Start gratisLås op med PRO
24

B24 lektionerPRO

Skriv brugerdefinerede Svelte-transition-funktioner fra bunden, styr timingparametre, og opret morphing samt avancerede CSS- kontra JS-drevne overgange.

  1. 1Skriv en brugerdefineret overgangsfunktion
  2. 2Overgangsparametre: node duration delay
  3. 3Opret en morphing-overgang
  4. +1 flere
Start gratisLås op med PRO
25

B24 lektionerPRO

Animér værdier over tid med Svelte's spring- og tweened motion-stores, brug interpolationsfunktioner, og anvend motion på SVG-stier.

  1. 1spring()-storet: Fysikbaseret animation
  2. 2tweened()-storet: Varighed og easing
  3. 3Interpolationsfunktioner
  4. +1 flere
Start gratisLås op med PRO
26

B24 lektionerPRO

Bliv fortrolig med SvelteKits avancerede layoutsystem: gruppelayouts, route-niveau-overrides, udtræden af layouts og deling af data på tværs af layout-hierarkiet.

  1. 1Layoutgrupper med (group)
  2. 2Layouts på routeniveau
  3. 3Bryde ud af et layout med +page@route
  4. +1 flere
Start gratisLås op med PRO
27

B24 lektionerPRO

Implementér authentication i SvelteKit med cookie-baserede sessioner, sikre JWT'er, route-beskyttelse i hooks og OAuth med Lucia Auth.

  1. 1Cookiebaserede sessioner
  2. 2JWT'er i HTTP-only-cookies
  3. 3Beskyttede routes i handle()-hooket
  4. +1 flere
Start gratisLås op med PRO
28

B24 lektionerPRO

Udrul SvelteKit-applikationer overalt med den rette adapter: statiske sites, Node.js-servere, Vercel og Cloudflare Workers.

  1. 1adapter-static til statiske websites
  2. 2adapter-node til Node.js-serveren
  3. 3adapter-vercel og adapter-cloudflare
  4. +1 flere
Start gratisLås op med PRO
29

B24 lektionerPRO

Udforsk Svelte 5's runes-system, der erstatter compilermagi med eksplicitte reaktive primitiver til tilstand, afledte værdier og sideeffekter.

  1. 1Hvorfor runes: Ud over compilerens magi
  2. 2$state: Finkornet reaktivitet
  3. 3$derived: Deklarative beregnede værdier
  4. +1 flere
Start gratisLås op med PRO
30

B24 lektionerPRO

Brug $props() til typede komponentprops og den nye snippetsyntaks med {#snippet} og {@render} til effektiv indholdssammensætning i Svelte 5.

  1. 1$props() til typede props
  2. 2{#snippet} og {@render}
  3. 3Videregivelse af snippets som props
  4. +1 flere
Start gratisLås op med PRO
31

B24 lektionerPRO

Styr renderingsstrategien pr. route i SvelteKit: vælg mellem universal og servereksklusiv load, prerender statiske sider, og deaktivér SSR efter behov.

  1. 1Universal kontra server-only load
  2. 2prerender = true til statiske sider
  3. 3ssr = false til klient-only-sider
  4. +1 flere
Start gratisLås op med PRO
32

B24 lektionerPRO

Skriv pålidelige enhedstests til Svelte-komponenter og stores med Vitest og @testing-library/svelte, der dækker rendering, interaktion og mocking af moduler.

  1. 1Opsætning af Vitest til Svelte-projekter
  2. 2@testing-library/svelte: render og fireEvent
  3. 3Test af stores og reaktivitet
  4. +1 flere
Start gratisLås op med PRO
33

B24 lektionerPRO

Skriv end-to-end-tests til SvelteKit-applikationer med Playwright, der dækker sidenavigation, formularinteraktioner og integration i CI-pipelines.

  1. 1Opsætning af Playwright i SvelteKit
  2. 2Skrivning af tests af sideinteraktioner
  3. 3Test af formularer og navigation
  4. +1 flere
Start gratisLås op med PRO
34

B24 lektionerPRO

Tilføj Tailwind CSS, D3.js-datavisualiseringer, Leaflet-kort og avancerede rich text-editors til SvelteKit-projekter med Svelte-actions og komponentwrappere.

  1. 1Brug af Tailwind CSS med SvelteKit
  2. 2D3.js-diagrammer i Svelte
  3. 3Leaflet-kort med Svelte actions
  4. +1 flere
Start gratisLås op med PRO
35

B24 lektionerPRO

Hærd Deres SvelteKit-applikation mod CSRF-, XSS- og injection-angreb, håndtér miljøvariabler sikkert, og begræns hastigheden på API-routes.

  1. 1CSRF-beskyttelse i formular-actions
  2. 2XSS-forebyggelse i {#html}
  3. 3Miljøvariabler: $env/static og $env/dynamic
  4. +1 flere
Start gratisLås op med PRO
36

C14 lektionerPRO

Udforsk avancerede Svelte 5-rune-mønstre, herunder rå tilstand, komplekse afledninger, manuel oprydning af effekter og migrering fra Svelte 4.

  1. 1$state.raw til ikke-reaktiv state
  2. 2$derived.by til komplekse afledninger
  3. 3$effect.root til manuel oprydning
  4. +1 flere
Start gratisLås op med PRO
37

C14 lektionerPRO

Opbyg avancerede, genanvendelige Svelte-komponent-API'er med render props via snippets, higher-order-komponenter, builder-mønsteret og compound-komponenter.

  1. 1Render props med snippets
  2. 2Higher-Order Components
  3. 3Builder-mønstret til headless UI
  4. +1 flere
Start gratisLås op med PRO
38

C14 lektionerPRO

Lever hurtige indledende sideindlæsninger ved at streame promises fra load-funktioner, udskyde langsomme data og streame fra API-routes med ReadableStream.

  1. 1Streaming af data med promises i load
  2. 2Udskudt indlæsning og Suspense-lignende UX
  3. 3Streaming fra serveren med +server.js
  4. +1 flere
Start gratisLås op med PRO
39

C14 lektionerPRO

Optimér SvelteKit-appens ydeevne med automatisk code splitting, forbedret billedhåndtering, lazy loading og værktøjer til profilering.

  1. 1Code splitting og dynamiske imports
  2. 2Optimering af billeder med @sveltejs/enhanced-img
  3. 3Lazy loading af komponenter
  4. +1 flere
Start gratisLås op med PRO
40

C14 lektionerPRO

Arkitektér store Svelte-applikationer med store-mønstre baseret på feature-moduler, event buses, optimistiske UI-opdateringer samt undo/redo med store-historik.

  1. 1Store-arkitektur: Feature-moduler
  2. 2Event bus-mønstret med stores
  3. 3Optimistiske UI-opdateringer
  4. +1 flere
Start gratisLås op med PRO
41

C14 lektionerPRO

Kombinér alt det, De har lært, for at opbygge en produktionsklar full-stack-app med autentificering, en database via Drizzle ORM, deployment på Vercel og typesikkerhed fra ende til anden.

  1. 1Auth + database + API: Arkitektur
  2. 2Drizzle ORM med SvelteKit
  3. 3Deployment til Vercel med en database
  4. +1 flere
Start gratisLås op med PRO
CoddyKit PRO

Lås op for alle 41 kurser på denne sti og alle kurser på alle andre stier

AI-vejleder, certificeringseksamen og certifikat. Fungerer på web, iOS og Android.

Se alle abonnementer
Årligt$29.90 / årCa. $2.49 om månedenBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for altid.
Kursusoversigt

Byg rigtige brugerflader med Svelte og SvelteKit

Svelte har en grundlæggende anderledes tilgang end React og Vue — i stedet for at sende en runtime til browseren kompilerer det dine komponenter til yderst effektiv vanilla JavaScript på byggetidspunktet. Resultatet er mindre bundles, hurtigere indlæsningstider og mindre boilerplate. SvelteKit, det officielle applikationsframework, tilføjer filbaseret routing, serverrendering, formularhandlinger og udrulningsadaptere, så du kan sende applikationer i produktionskvalitet ud på enhver platform. Dette læringsforløb dækker begge dele, fra den første komponent til fuldstackarkitektur.

Det lærer du

Du begynder med Sveltes komponentmodel — props, templatesyntaks, betingelser, løkker og tovejsbinding — og går derefter videre til reaktivitetssystemet, livscyklusfunktioner og store-primitiverne: writable, readable, derived og brugerdefinerede stores. På brugerfladesiden arbejder du med slots, Context API, CSS-overgange, animationer og Svelte Motion. Kapitlerne om SvelteKit dækker routing, dataindlæsning, SSR og forudrendering, formularhandlinger, API-ruter, hooks, fejlhåndtering, avancerede layouts, mønstre til godkendelse og udrulningsadaptere. Læringsforløbet dækker også Svelte 5's rune-system, testning med enhedstest og Playwright E2E, integration af tredjepartsbiblioteker og sikkerhedspraksis i SvelteKit.

Læringsforløbet

41 kurser bevæger sig fra A1 til C1. De første syv kurser etablerer grundlaget: komponenter, props, hændelser og templatesyntaks. B1 introducerer stores, slots, overgange samt dine første SvelteKit-sider og mønstre til indlæsning af data. B2 — den største blok — arbejder med formularhandlinger, API-ruter, hooks, avanceret reaktivitet, Svelte Actions, brugerdefinerede animationer, mønstre til godkendelse, adaptere, Svelte 5-runer, testning og sikkerhed. Læringsforløbet slutter på C1 med avancerede runer, avancerede komponentmønstre, streaming i SvelteKit, optimering af ydeevne, tilstandshåndtering i stor skala og en afsluttende fuldstackapplikation i SvelteKit.

Sådan fungerer det

Hvert kursus er opdelt i korte, fokuserede lektioner, som du gennemfører i den indbyggede kodeeditor med feedback i realtid. En AI-underviser er tilgængelig, når du går i stå, og hvert begreb styrkes med praktiske øvelser, før du går videre til næste emne.

Værktøjer

Øv dig med AI – læs ikke bare

Få mere ud af din læring med AI-drevne værktøjer og funktioner

AI-kodegeneratorGenerér kode med AIAI-fejlretningFind og ret fejl i kodePROAI-indsigtDybdegående kodeanalysePROAI-chatChat med en AI-underviserStil et superspørgsmålFå svar på ekspertniveauPROOpret lektionAI-drevet værktøj til at oprette lektionerPROStart certificeringseksamenFå dit certifikatPROKodeeditorSkriv og kør kodeStart udfordringAfprøv dine færdigheder

Sådan lærer du

  1. 01

    Interaktive lektioner

    Praktiske kodeøvelser med feedback i realtid

  2. 02

    AI-underviser

    Få øjeblikkelig hjælp fra vores AI, når du sidder fast

  3. 03

    Indbygget editor

    Skriv og kør kode direkte i din browser

  4. 04

    Certifikat

    Få et certifikat, når du gennemfører kurset

Udforsk videre

Relaterede læringsstier

Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.React Academy logoReact AcademyMaster ReactJS to build dynamic user interfaces with ReactJS Academy.
Ofte stillede spørgsmål

Ofte stillede spørgsmål

Er Sveltejs Academy-kurset gratis?

Ja. Du kan begynde på Sveltejs Academy-kurset gratis og gennemføre de interaktive lektioner uden omkostninger. Et valgfrit PRO-abonnement giver adgang til avancerede AI-værktøjer og et certifikat, der kan deles.

Skal jeg have erfaring på forhånd for at lære HTML?

Nej. Kurset begynder med det grundlæggende og bevæger sig gradvist videre til mere avancerede emner, så du kan starte uden tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer ved at øve dig. Korte interaktive lektioner kombinerer en tydelig forklaring med en praktisk kodeøvelse, der kører i realtid, og en AI-vejleder, der er tilgængelig døgnet rundt, hjælper dig personligt, når du sidder fast.

Får jeg et certifikat, når jeg gennemfører Sveltejs Academy?

Ja. PRO-brugere kan tage en eksamen og få et certifikat for gennemførelse af Sveltejs Academy-kurset, som kan deles og indeholder en verificerbar kode.

Kan jeg lære HTML på min telefon?

Ja. CoddyKit er tilgængeligt på nettet og som indbyggede iOS- og Android-apps, så du kan lære HTML på enhver enhed, og dine fremskridt synkroniseres på tværs af dem.

Hvad koster CoddyKit PRO?

Det første kursus på Sveltejs Academy-stien er gratis. CoddyKit PRO giver adgang til alle kurser: $5.90 om ugen, $7.90 om måneden, $29.90 om året eller $69.99 én gang for livstidsadgang uden fornyelser.

Hvor lang tid tager det at gennemføre Sveltejs Academy?

Sveltejs Academy har 41 kurser og 163 lektioner. De fleste lektioner tager cirka 5–10 minutter, så hele stien kræver omkring 19 timers praktisk øvelse i dit eget tempo.

Start på Sveltejs Academy nu

Slut dig til tusindvis af kursister, der mestrer programmering med AI-drevne lektioner.

Start gratisSe alle kurser