PricingLoginStart free
Sveltejs Academy logo
HTMLNybegynnerNettNivåer A1 → C122 språk

Sveltejs Academy

Bygg raske og enkle brukergrensesnitt med moderne teknikker hos Svelte Academy. En læringssti fra CoddyKit med 41 korte kurs og 163 interaktive leksjoner, med en AI-veileder tilgjengelig døgnet rundt.

Kurs
41
Leksjoner
163
Interaktive trinn
2,114
Gratis å komme i gang
Kurs 1
GET IT ONGoogle PlayDownload on theApp Store
Kursinnhold

41 kurs i denne læringsstien

Alle kursene i læringsstien Sveltejs Academy, i læringsrekkefølge. Det første er gratis.

1

A13 leksjonerGratis

Forstå hva Svelte er, hvorfor det har en helt annen tilnærming til å bygge brukergrensesnitt enn React og Vue, og hvorfor utviklere som prøver det, ofte forelsker seg i det.

  1. 1Hva er Svelte?
  2. 2Hvorfor Svelte føles magisk
  3. 3Dette skal De bygge med Svelte
Start læringen gratis
2

A14 leksjonerPRO

Kom i gang med Svelte ved å forstå hva som skiller det fra andre rammeverk, sette opp ditt første prosjekt og utforske prosjektstrukturen og arbeidsflyten for utvikling.

  1. 1Hva er Svelte, og hvorfor kompileres det
  2. 2Opprette et prosjekt med npm create svelte
  3. 3Prosjektstruktur: src routes static
  4. +1 flere
Start læringen gratisLås opp med PRO
3

A14 leksjonerPRO

Lær å skrive Svelte-komponenter fra grunnen av, bruke reaktive variabler, interpolere uttrykk og opprette beregnede verdier med reaktive deklarasjoner.

  1. 1Strukturen til script-, template- og style-delene
  2. 2Reaktive variabler med let
  3. 3Interpolering: {expression}
  4. +1 flere
Start læringen gratisLås opp med PRO
4

A24 leksjonerPRO

Send data mellom Svelte-komponenter med props, angi standardverdier og videresend props elegant med $$props og $$restProps.

  1. 1Deklarere props med export let
  2. 2Sende props fra overordnet komponent
  3. 3Standardverdier for props
  4. +1 flere
Start læringen gratisLås opp med PRO
5

A24 leksjonerPRO

Styr hva som rendres i Svelte-malene med betingelsesblokker, iterer over tabeller med each-blokker og tving ny rendering med key-blokker.

  1. 1{#if} {#else if} {#else}
  2. 2{#each} med indeks og nøkkel
  3. 3{#key} for å tvinge frem ny gjengivelse
  4. +1 flere
Start læringen gratisLås opp med PRO
6

A24 leksjonerPRO

Håndter DOM-hendelser i Svelte, bruk hendelsesmodifikatorer for å forenkle vanlige mønstre, send egendefinerte hendelser fra underordnede komponenter og videresend hendelser oppover i treet.

  1. 1on:click on:input on:submit
  2. 2Hendelsesmodifikatorer: preventDefault stopPropagation once
  3. 3Egendefinerte hendelser med createEventDispatcher
  4. +1 flere
Start læringen gratisLås opp med PRO
7

A24 leksjonerPRO

Synkroniser skjemafelt og DOM-elementer med Svelte-variabler ved hjelp av bind:-direktiver for tekst, avmerkingsbokser, radiogrupper og elementreferanser.

  1. 1bind:value for tekstinndata
  2. 2bind:checked for avkrysningsbokser
  3. 3bind:group for grupper av radio- og avkrysningsbokser
  4. +1 flere
Start læringen gratisLås opp med PRO
8

B14 leksjonerPRO

Styr hva som skjer i hvert stadium av en Svelte-komponents liv med onMount, onDestroy, beforeUpdate, afterUpdate og verktøyet tick.

  1. 1onMount: Kjøring etter gjengivelse
  2. 2onDestroy: Opprydding
  3. 3beforeUpdate og afterUpdate
  4. +1 flere
Start læringen gratisLås opp med PRO
9

B14 leksjonerPRO

Del reaktiv tilstand mellom komponenter med Svelte sine innebygde store-primitiver, abonner på dem med $-kortformen og opprett lesbare stores med egendefinert logikk.

  1. 1Opprette en skrivbar Store
  2. 2Abonnement med $-automatisk abonnement
  3. 3Oppdatere stores: set() og update()
  4. +1 flere
Start læringen gratisLås opp med PRO
10

B14 leksjonerPRO

Sett sammen Svelte-stores ved å utlede beregnede stores fra én eller flere kilder, og bygg fullstendig egendefinerte stores som implementerer store-kontrakten.

  1. 1derived() for beregnede stores
  2. 2Mønster for egendefinerte stores med subscribe/set/update
  3. 3Readable fra Writable
  4. +1 flere
Start læringen gratisLås opp med PRO
11

B14 leksjonerPRO

Projiser innhold inn i Svelte-komponenter med standardiserte og navngitte slots, angi reserveinnhold og kontroller om slots er fylt ut.

  1. 1Standard-slots for innholdsprojisering
  2. 2Navngitte slots med slot="name"
  3. 3Reserveinnhold i slots
  4. +1 flere
Start læringen gratisLås opp med PRO
12

B14 leksjonerPRO

Animer elementer som kommer inn i og forlater DOM-en med Svelte sine innebygde overgangsdirektiver, konfigurer tidsberegning og easing, og håndter asymmetriske inn- og ut-overganger.

  1. 1transition:fade og transition:fly
  2. 2Overgangsparametere: duration delay easing
  3. 3in: og out: for asymmetriske overganger
  4. +1 flere
Start læringen gratisLås opp med PRO
13

B14 leksjonerPRO

Gå lenger enn overganger med Svelte sitt animate-direktiv for omorganisering av lister, fjæranimasjoner basert på fysikk og interpolering av tweenede verdier.

  1. 1animate:flip for omorganisering av lister
  2. 2Store-ene spring() og tweened()
  3. 3Egendefinerte easing-funksjoner
  4. +1 flere
Start læringen gratisLås opp med PRO
14

B14 leksjonerPRO

Naviger i SvelteKit sitt filbaserte rutingsystem, opprett dynamiske ruter med parametere og bruk layoutfiler til å dele brukergrensesnitt på tvers av sider.

  1. 1Filbasert ruting med +page.svelte
  2. 2Dynamiske ruteparametere: [id]
  3. 3Valgfrie parametere og rest-parametere
  4. +1 flere
Start læringen gratisLås opp med PRO
15

B14 leksjonerPRO

Last inn data for sidene dine med SvelteKit sine load-funksjoner, håndter feil på en god måte og kjør logikk som bare skal finnes på serveren i +page.server.js.

  1. 1+page.js load-funksjon
  2. 2Returnere data og bruke $page.data
  3. 3Feilhåndtering i load
  4. +1 flere
Start læringen gratisLås opp med PRO
16

B14 leksjonerPRO

Send data dypt inn i komponenttreet uten prop drilling med Svelte sitt Context API, og forstå når context bør foretrekkes fremfor stores.

  1. 1setContext() og getContext()
  2. 2Kontekst eller stores: Når bør De bruke hva
  3. 3Typet kontekst med TypeScript
  4. +1 flere
Start læringen gratisLås opp med PRO
17

B14 leksjonerPRO

Forbedre synligheten ved å angi dynamiske metakoder, OpenGraph-kort, strukturerte JSON-LD-data og kanoniske URL-er i SvelteKit.

  1. 1svelte:head for dynamiske metatagger
  2. 2OpenGraph- og Twitter Card-meta
  3. 3JSON-LD-strukturerte data i SvelteKit
  4. +1 flere
Start læringen gratisLås opp med PRO
18

B24 leksjonerPRO

Håndter innsending av HTML-skjemaer på serveren med SvelteKit-skjemahandlinger, forbedre dem trinnvis med JavaScript og returner valideringsfeil.

  1. 1+page.server.js med actions
  2. 2Direktivet use:enhance
  3. 3Progressiv forbedring av skjemaer
  4. +1 flere
Start læringen gratisLås opp med PRO
19

B24 leksjonerPRO

Bygg RESTful- og strømmende API-endepunkter i SvelteKit med +server.js-filer, håndter flere HTTP-metoder og returner typede JSON-svar.

  1. 1+server.js: GET POST PUT DELETE
  2. 2Request og RequestEvent
  3. 3Returnere JSON-responser
  4. +1 flere
Start læringen gratisLås opp med PRO
20

B24 leksjonerPRO

Fang opp og transformer hver forespørsel med SvelteKit sine server-hooks, logg feil sentralt og sett sammen flere hooks med sekvensverktøyet.

  1. 1handle()-hooken: Middleware for forespørsler
  2. 2handleError for logging av serverfeil
  3. 3init()-hooken
  4. +1 flere
Start læringen gratisLås opp med PRO
21

B24 leksjonerPRO

Gi brukerne gode opplevelser når noe går galt ved å tilpasse feilsider, skille forventede feil fra uventede og håndtere feil i nestede layouter.

  1. 1+error.svelte for egendefinerte feilsider
  2. 2Forventede og uventede feil
  3. 3Hjelpefunksjonene error() og redirect()
  4. +1 flere
Start læringen gratisLås opp med PRO
22

B24 leksjonerPRO

Fordyp forståelsen av Svelte sitt reaktive system: rekkefølgen på reaktive uttrykk, når stores bør brukes fremfor lokal tilstand og hvordan du unngår foreldede closures.

  1. 1Reaktive setninger: $:-blokk
  2. 2Reaktive avhengigheter og rekkefølge
  3. 3Når bør De bruke stores i stedet for lokal tilstand
  4. +1 flere
Start læringen gratisLås opp med PRO
23

B24 leksjonerPRO

Knytt gjenbrukbar imperativ atferd til DOM-elementer med Svelte-actions, håndter parametere og oppdateringer, og bygg praktiske actions som clickOutside og tooltip.

  1. 1Syntaks for use:-direktivet
  2. 2Action-parametere og oppdateringer
  3. 3destroy()-oppryddingsfunksjonen
  4. +1 flere
Start læringen gratisLås opp med PRO
24

B24 leksjonerPRO

Skriv egendefinerte Svelte-overgangsfunksjoner fra grunnen av, styr tidsparametere og lag morfing samt avanserte CSS- og JavaScript-styrte overganger.

  1. 1Skrive en egendefinert overgangsfunksjon
  2. 2Overgangsparametere: node duration delay
  3. 3Opprette en morphing-overgang
  4. +1 flere
Start læringen gratisLås opp med PRO
25

B24 leksjonerPRO

Animer verdier over tid med Svelte sine spring- og tweened-motion-stores, bruk interpolasjonsfunksjoner og anvend bevegelse på SVG-baner.

  1. 1spring()-storen: fysikkbasert animasjon
  2. 2tweened()-storen: varighet og easing
  3. 3Interpoleringsfunksjoner
  4. +1 flere
Start læringen gratisLås opp med PRO
26

B24 leksjonerPRO

Bli fortrolig med SvelteKit sitt avanserte layoutsystem: grupperte layouter, overstyringer på rutenivå, å gå ut av layouter og deling av data på tvers av layouthierarkiet.

  1. 1Layout-grupper med (group)
  2. 2Layout på rutenivå
  3. 3Bryte ut av en layout med +page@route
  4. +1 flere
Start læringen gratisLås opp med PRO
27

B24 leksjonerPRO

Implementer autentisering i SvelteKit med informasjonskapselbaserte økter, sikre JWT-er, rute­beskyttelse i hooks og OAuth med Lucia Auth.

  1. 1Sesjoner basert på informasjonskapsler
  2. 2JWT i HTTP-only-informasjonskapsler
  3. 3Beskyttede ruter i handle()-hooken
  4. +1 flere
Start læringen gratisLås opp med PRO
28

B24 leksjonerPRO

Distribuer SvelteKit-applikasjoner hvor som helst ved å bruke riktig adapter: statiske nettsteder, Node.js-servere, Vercel og Cloudflare Workers.

  1. 1adapter-static for statiske nettsteder
  2. 2adapter-node for Node.js-server
  3. 3adapter-vercel og adapter-cloudflare
  4. +1 flere
Start læringen gratisLås opp med PRO
29

B24 leksjonerPRO

Oppdag Svelte 5 sitt runes-system, som erstatter kompilatormagi med eksplisitte reaktive primitiver for tilstand, avledede verdier og bieffekter.

  1. 1Hvorfor runes: Forbi compiler-magien
  2. 2$state: Finkornet reaktivitet
  3. 3$derived: Deklarative beregnede verdier
  4. +1 flere
Start læringen gratisLås opp med PRO
30

B24 leksjonerPRO

Bruk $props() for typede props i komponenter og den nye snippet-syntaksen med {#snippet} og {@render} for kraftig sammensetning av innhold i Svelte 5.

  1. 1$props() for typede props
  2. 2{#snippet} og {@render}
  3. 3Sende snippets som props
  4. +1 flere
Start læringen gratisLås opp med PRO
31

B24 leksjonerPRO

Styr gjengivelsesstrategien per rute i SvelteKit: velg mellom universell og serverbasert load, forhåndsgenerer statiske sider og deaktiver SSR ved behov.

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

B24 leksjonerPRO

Skriv pålitelige enhetstester for Svelte-komponenter og stores med Vitest og @testing-library/svelte, og dekk gjengivelse, samhandling og mocking av moduler.

  1. 1Vitest-oppsett for Svelte-prosjekter
  2. 2@testing-library/svelte: render og fireEvent
  3. 3Testing av stores og reaktivitet
  4. +1 flere
Start læringen gratisLås opp med PRO
33

B24 leksjonerPRO

Skriv ende-til-ende-tester for SvelteKit-applikasjoner med Playwright, og dekk sidenavigasjon, samhandling med skjemaer og integrasjon i CI-pipelines.

  1. 1Playwright-oppsett i SvelteKit
  2. 2Skrive tester av sideinteraksjoner
  3. 3Testing av skjemaer og navigasjon
  4. +1 flere
Start læringen gratisLås opp med PRO
34

B24 leksjonerPRO

Legg til Tailwind CSS, D3.js-datavisualiseringer, Leaflet-kart og avanserte riktekstredigerere i SvelteKit-prosjekter med Svelte-actions og komponentomslag.

  1. 1Bruke Tailwind CSS med SvelteKit
  2. 2D3.js-diagrammer i Svelte
  3. 3Leaflet-kart med Svelte-actions
  4. +1 flere
Start læringen gratisLås opp med PRO
35

B24 leksjonerPRO

Sikre SvelteKit-applikasjonen mot CSRF-, XSS- og injeksjonsangrep, håndter miljøvariabler trygt og begrens hastigheten på API-ruter.

  1. 1CSRF-beskyttelse i form actions
  2. 2XSS-forebygging i {#html}
  3. 3Miljøvariabler: $env/static og $env/dynamic
  4. +1 flere
Start læringen gratisLås opp med PRO
36

C14 leksjonerPRO

Utforsk avanserte rune-mønstre i Svelte 5, blant annet rå tilstand, komplekse avledninger, manuell opprydding av effekter og migrering fra Svelte 4.

  1. 1$state.raw for ikke-reaktiv tilstand
  2. 2$derived.by for komplekse avledninger
  3. 3$effect.root for manuell opprydding
  4. +1 flere
Start læringen gratisLås opp med PRO
37

C14 leksjonerPRO

Bygg avanserte, gjenbrukbare Svelte-API-er for komponenter med render props ved hjelp av snippets, høyereordenskomponenter, Builder-mønsteret og sammensatte komponenter.

  1. 1Render props med snippets
  2. 2Higher-order components
  3. 3Builder-mønsteret for headless UI
  4. +1 flere
Start læringen gratisLås opp med PRO
38

C14 leksjonerPRO

Lever raske innledende sideinnlastinger ved å strømme promises fra load-funksjoner, utsette langsomme data og strømme fra API-ruter med ReadableStream.

  1. 1Strømming av data med promises i load
  2. 2Utsatt lasting og en Suspense-lignende brukeropplevelse
  3. 3Strømming fra serveren med +server.js
  4. +1 flere
Start læringen gratisLås opp med PRO
39

C14 leksjonerPRO

Optimaliser ytelsen i SvelteKit-apper med automatisk splitting av kode, forbedret bildehåndtering, lazy loading og verktøy for profilering.

  1. 1Code splitting og dynamiske imports
  2. 2Optimalisering av bilder med @sveltejs/enhanced-img
  3. 3Lazy loading av components
  4. +1 flere
Start læringen gratisLås opp med PRO
40

C14 leksjonerPRO

Utform store Svelte-applikasjoner med store-mønstre basert på funksjonsmoduler, eventbusser, optimistiske UI-oppdateringer og angre/gjør om med store-historikk.

  1. 1Store-arkitektur: feature-moduler
  2. 2Event bus-mønster med stores
  3. 3Optimistiske UI-oppdateringer
  4. +1 flere
Start læringen gratisLås opp med PRO
41

C14 leksjonerPRO

Kombiner alt De har lært, og bygg en produksjonsklar fullstack-app med autentisering, en database via Drizzle ORM, utrulling på Vercel og typesikkerhet fra ende til ende.

  1. 1Auth + database + API: Arkitektur
  2. 2Drizzle ORM med SvelteKit
  3. 3Distribusjon til Vercel med en database
  4. +1 flere
Start læringen gratisLås opp med PRO
CoddyKit PRO

Lås opp alle 41 kursene i denne læringsstien og alle andre læringsstier

AI-veileder, sertifiseringseksamen og sertifikat. Fungerer på web, iOS og Android.

Se alle abonnementene
Årlig$29.90 / årOmtrent $2.49 per månedBetal én gangLivstid$69.99 én gangIngen fornyelser. PRO for alltid.
Kursoversikt

Bygg ekte grensesnitt med Svelte og SvelteKit

Svelte har en grunnleggende annerledes tilnærming enn React og Vue – i stedet for å sende en kjøretid til nettleseren kompilerer det komponentene Deres til svært effektiv vanilla JavaScript under byggingen. Resultatet er mindre pakker, raskere innlasting og mindre overflødig kode. SvelteKit, det offisielle applikasjonsrammeverket, legger til filbasert ruting, servergenerering, skjema-handlinger og utrullingsadaptere, slik at De kan levere apper klare for produksjon på enhver plattform. Dette sporet dekker begge deler, fra den første komponenten til fullstack-arkitektur.

Dette lærer De

De begynner med komponentmodellen i Svelte – props, malsyntaks, betingelser, løkker og toveis databinding – før De går videre til reaktivitetssystemet, livssyklusfunksjoner og store-primitivene: writable, readable, derived og egendefinerte stores. På UI-siden arbeider De med slots, Context API, CSS-overganger, animasjoner og Svelte Motion. SvelteKit-kapitlene dekker ruting, datalasting, SSR og forhåndsgenerering, skjema-handlinger, API-ruter, hooks, feilhåndtering, avanserte layouter, autentiseringsmønstre og utrullingsadaptere. Sporet dekker også rune-systemet i Svelte 5, testing med enhetstester og Playwright E2E, integrasjon med tredjepartsbiblioteker og sikkerhetspraksis for SvelteKit.

Læringsløpet

førtien kurs går fra A1 til C1. De sju første kursene gir grunnlag i komponenter, props, hendelser og malsyntaks. B1 introduserer stores, slots, overganger samt de første SvelteKit-sidene og mønstrene for datalasting. B2 – den største delen – arbeider med skjema-handlinger, API-ruter, hooks, avansert reaktivitet, Svelte Actions, egendefinerte animasjoner, autentiseringsmønstre, adaptere, runer i Svelte 5, testing og sikkerhet. Sporet avsluttes på C1 med avanserte runer, avanserte komponentmønstre, SvelteKit-strømming, ytelsesoptimalisering, tilstandshåndtering i stor skala og en fullstack-applikasjon i SvelteKit som avsluttende prosjekt.

Slik fungerer det

Hvert kurs er delt inn i korte, fokuserte leksjoner som De fullfører i den innebygde kodeeditoren, med tilbakemeldinger i sanntid. En AI-veileder er tilgjengelig når De står fast, og hvert konsept styrkes gjennom praktiske øvelser før De går videre til neste emne.

Verktøy

Øv med AI, ikke bare les

Få mer ut av læringen med AI-drevne verktøy og funksjoner

AI-kodegeneratorGenerer kode med AIAI-feilrettingFinn og rett feil i kodenPROAI-innsiktGrundig kodeanalysePROAI-chatChat med AI-veilederenStill et superspørsmålFå svar på ekspertnivåPROOpprett leksjonAI-drevet leksjonsbyggerPROStart sertifiseringseksamenFå sertifikatet dittPROKodeeditorSkriv og kjør kodeStart utfordringTest ferdighetene dine

Slik lærer du

  1. 01

    Interaktive leksjoner

    Praktiske kodeøvelser med tilbakemelding i sanntid

  2. 02

    AI-veileder

    Få øyeblikkelig hjelp fra AI-en vår når du står fast

  3. 03

    Innebygd kodeeditor

    Skriv og kjør kode direkte i nettleseren

  4. 04

    Sertifikat

    Få et sertifikat når du fullfører kurset

Fortsett å utforske

Relaterte 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.
FAQ

Ofte stilte spørsmål

Er kurset i Sveltejs Academy gratis?

Ja. Du kan starte på kurset i Sveltejs Academy gratis og fullføre de interaktive leksjonene uten kostnad. Et valgfritt PRO-abonnement låser opp avanserte AI-verktøy og et delbart sertifikat.

Trenger jeg tidligere erfaring for å lære HTML?

Nei. Kurset begynner med det grunnleggende og går gradvis videre til mer avanserte emner, slik at du kan starte selv uten tidligere erfaring med HTML.

Hvordan lærer jeg HTML på CoddyKit?

Du lærer gjennom praksis. Korte, interaktive leksjoner kombinerer en tydelig forklaring med en praktisk kodeøvelse som kjører i sanntid, og en AI-veileder som er tilgjengelig døgnet rundt, gir deg personlig hjelp når du står fast.

Får jeg et sertifikat når jeg fullfører Sveltejs Academy?

Ja. PRO-brukere kan ta en eksamen og få et delbart fullføringssertifikat med en verifiserbar kode for kurset i Sveltejs Academy.

Kan jeg lære HTML på telefonen?

Ja. CoddyKit er tilgjengelig på nettet og som native iOS- og Android-apper, slik at du kan lære HTML på alle enheter, mens fremdriften synkroniseres mellom dem.

Hvor mye koster CoddyKit PRO?

Det første kurset i Sveltejs Academy er gratis. CoddyKit PRO gir tilgang til alle kurs: $5.90 per uke, $7.90 per måned, $29.90 per år eller $69.99 én gang for tilgang på livstid uten fornyelser.

Hvor lang tid tar det å fullføre Sveltejs Academy?

Sveltejs Academy består av 41 kurs og 163 leksjoner. De fleste leksjonene tar omtrent 5–10 minutter, så hele læringsstien tar rundt 19 timer med praktisk øving i eget tempo.

Start på Sveltejs Academy nå

Bli med tusenvis av elever som lærer programmering med AI-drevne leksjoner.

Start læringen gratisSe alle kurs