PricingLoginStart free
Sveltejs Academy logo
HTMLNybörjareWebbNivåer A1 → C122 språk

Sveltejs Academy

Bygg snabba och enkla användargränssnitt med moderna tekniker på Svelte Academy. En lärstig från CoddyKit med 41 korta kurser och 163 interaktiva lektioner, med en AI-handledare till hands dygnet runt.

Kurser
41
Lektioner
163
Interaktiva steg
2,114
Gratis att börja
Kurs 1
GET IT ONGoogle PlayDownload on theApp Store
Kursplan

41 kurser i den här lärvägen

Alla kurser i lärvägen Sveltejs Academy, i rätt ordning. Den första är gratis.

1

A13 lektionerGratis

Förstå vad Svelte är, varför det använder ett helt annat angreppssätt för att bygga användargränssnitt än React och Vue och varför utvecklare som provar det ofta blir förtjusta i det.

  1. 1Vad är Svelte?
  2. 2Varför Svelte känns magiskt
  3. 3Det här kommer du att bygga med Svelte
Börja lära dig gratis
2

A14 lektionerPRO

Kom igång med Svelte genom att förstå vad som skiljer det från andra ramverk, konfigurera Ert första projekt och utforska projektstrukturen och utvecklingsarbetsflödet.

  1. 1Vad är Svelte och varför kompileras det?
  2. 2Skapa ett projekt med npm create svelte
  3. 3Projektstruktur: src routes static
  4. +1 till
Börja lära dig gratisLås upp med PRO
3

A14 lektionerPRO

Lär Er skriva Svelte-komponenter från grunden, använda reaktiva variabler, interpolera uttryck och skapa beräknade värden med reaktiva deklarationer.

  1. 1Strukturen script template style
  2. 2Reaktiva variabler med let
  3. 3Interpolation: {expression}
  4. +1 till
Börja lära dig gratisLås upp med PRO
4

A24 lektionerPRO

Skicka data mellan Svelte-komponenter med props, ange standardvärden och vidarebefordra props elegant med $$props och $$restProps.

  1. 1Deklarera props med export let
  2. 2Skicka props från den överordnade komponenten
  3. 3Standardvärden för props
  4. +1 till
Börja lära dig gratisLås upp med PRO
5

A24 lektionerPRO

Styr vad som renderas i Era Svelte-mallar med villkorsblock, iterera över arrayer med each-block och tvinga fram omrenderingar med key-block.

  1. 1{#if} {#else if} {#else}
  2. 2{#each} med index och nyckel
  3. 3{#key} för att tvinga fram ny rendering
  4. +1 till
Börja lära dig gratisLås upp med PRO
6

A24 lektionerPRO

Hantera DOM-händelser i Svelte, använd händelsemodifierare för att förenkla vanliga mönster, skicka anpassade händelser från underordnade komponenter och vidarebefordra händelser uppåt i trädet.

  1. 1on:click on:input on:submit
  2. 2Händelsemodifierare: preventDefault stopPropagation once
  3. 3Anpassade händelser med createEventDispatcher
  4. +1 till
Börja lära dig gratisLås upp med PRO
7

A24 lektionerPRO

Synkronisera formulärfält och DOM-element med Svelte-variabler genom bind:-direktiv för text, kryssrutor, radiogrupper och elementreferenser.

  1. 1bind:value för textinmatning
  2. 2bind:checked för kryssrutor
  3. 3bind:group för radio- och kryssrutegrupper
  4. +1 till
Börja lära dig gratisLås upp med PRO
8

B14 lektionerPRO

Styr vad som händer i varje steg av en Svelte-komponents livscykel med onMount, onDestroy, beforeUpdate, afterUpdate och verktyget tick.

  1. 1onMount: körning efter rendering
  2. 2onDestroy: städning
  3. 3beforeUpdate och afterUpdate
  4. +1 till
Börja lära dig gratisLås upp med PRO
9

B14 lektionerPRO

Dela reaktivt tillstånd mellan komponenter med Sveltes inbyggda store-primitiver, prenumerera på dem med $-förkortningen och skapa läsbara stores med anpassad logik.

  1. 1Skapa en skrivbar Store
  2. 2Prenumerera med $ och automatisk prenumeration
  3. 3Uppdatera stores: set() och update()
  4. +1 till
Börja lära dig gratisLås upp med PRO
10

B14 lektionerPRO

Sätt samman Svelte-stores genom att härleda beräknade stores från en eller flera källor och bygg helt anpassade stores som implementerar store-kontraktet.

  1. 1derived() för beräknade stores
  2. 2Mönstret för anpassade stores med subscribe/set/update
  3. 3Readable från Writable
  4. +1 till
Börja lära dig gratisLås upp med PRO
11

B14 lektionerPRO

Projicera innehåll in i Svelte-komponenter med standardiserade och namngivna slots, tillhandahåll reservinnehåll och kontrollera om slots har fyllts.

  1. 1Standard-slots för innehållsprojektion
  2. 2Namngivna slots med slot="name"
  3. 3Reservinnehåll för slots
  4. +1 till
Börja lära dig gratisLås upp med PRO
12

B14 lektionerPRO

Animera element som läggs till i och tas bort från DOM:en med Sveltes inbyggda övergångsdirektiv, konfigurera tidsinställningar och easing och hantera asymmetriska in- och utövergångar.

  1. 1transition:fade och transition:fly
  2. 2Övergångsparametrar: duration delay easing
  3. 3in: och out: för asymmetriska övergångar
  4. +1 till
Börja lära dig gratisLås upp med PRO
13

B14 lektionerPRO

Gå bortom övergångar med Sveltes animate-direktiv för omordning av listor, fysikbaserade fjäderanimationer och interpolering av tweenade värden.

  1. 1animate:flip för omordning av listor
  2. 2Store-funktionerna spring() och tweened()
  3. 3Anpassade easing-funktioner
  4. +1 till
Börja lära dig gratisLås upp med PRO
14

B14 lektionerPRO

Navigera i SvelteKits filbaserade routingsystem, skapa dynamiska routes med parametrar och använd layoutfiler för att dela gränssnitt mellan sidor.

  1. 1Filbaserad routing med +page.svelte
  2. 2Dynamiska route-parametrar: [id]
  3. 3Valfria parametrar och rest-parametrar
  4. +1 till
Börja lära dig gratisLås upp med PRO
15

B14 lektionerPRO

Ladda data för Era sidor med SvelteKits load-funktioner, hantera fel på ett smidigt sätt och kör logik som endast får köras på servern i +page.server.js.

  1. 1+page.js load-funktionen
  2. 2Returnera data och använd $page.data
  3. 3Felhantering i load
  4. +1 till
Börja lära dig gratisLås upp med PRO
16

B14 lektionerPRO

Skicka data djupt in i komponentträdet utan prop drilling med Sveltes Context API och förstå när context bör föredras framför stores.

  1. 1setContext() och getContext()
  2. 2Kontext eller stores: När ska de användas?
  3. 3Typad kontext med TypeScript
  4. +1 till
Börja lära dig gratisLås upp med PRO
17

B14 lektionerPRO

Förbättra upptäckbarheten genom att ange dynamiska metataggar, OpenGraph-kort och strukturerade JSON-LD-data samt hantera kanoniska URL:er i SvelteKit.

  1. 1svelte:head för dynamiska metataggar
  2. 2OpenGraph- och Twitter Card-metadata
  3. 3JSON-LD-strukturerade data i SvelteKit
  4. +1 till
Börja lära dig gratisLås upp med PRO
18

B24 lektionerPRO

Hantera HTML-formulärinskickningar på servern med SvelteKits formuläråtgärder, förbättra dem stegvis med JavaScript och returnera valideringsfel.

  1. 1+page.server.js med actions
  2. 2Direktivet use:enhance
  3. 3Progressiv förbättring av formulär
  4. +1 till
Börja lära dig gratisLås upp med PRO
19

B24 lektionerPRO

Bygg REST- och strömmande API-slutpunkter i SvelteKit med +server.js-filer, hantera flera HTTP-metoder och returnera typsäkra JSON-svar.

  1. 1+server.js: GET POST PUT DELETE
  2. 2Request och RequestEvent
  3. 3Returnera JSON-svar
  4. +1 till
Börja lära dig gratisLås upp med PRO
20

B24 lektionerPRO

Fånga upp och transformera varje begäran med SvelteKits server-hooks, logga fel centralt och kombinera flera hooks med verktyget sequence.

  1. 1Hooken handle(): middleware för requests
  2. 2handleError för serverloggning av fel
  3. 3Hooken init()
  4. +1 till
Börja lära dig gratisLås upp med PRO
21

B24 lektionerPRO

Skapa bra användarupplevelser när något går fel genom att anpassa felsidor, skilja förväntade fel från oväntade och hantera fel i nästlade layouter.

  1. 1+error.svelte för anpassade felsidor
  2. 2Förväntade och oväntade fel
  3. 3Hjälpfunktionerna error() och redirect()
  4. +1 till
Börja lära dig gratisLås upp med PRO
22

B24 lektionerPRO

Fördjupa Er förståelse av Sveltes reaktiva system: ordningen för reaktiva instruktioner, när stores bör användas i stället för lokalt tillstånd och hur inaktuella closures undviks.

  1. 1Reaktiva satser: $:-block
  2. 2Reaktiva beroenden och ordning
  3. 3När ska stores respektive lokalt tillstånd användas?
  4. +1 till
Börja lära dig gratisLås upp med PRO
23

B24 lektionerPRO

Koppla återanvändbara imperativa beteenden till DOM-element med Svelte-actions, hantera parametrar och uppdateringar och bygg praktiska actions som clickOutside och tooltip.

  1. 1Syntax för use:-direktivet
  2. 2Action-parametrar och uppdateringar
  3. 3Städfunktionen destroy()
  4. +1 till
Börja lära dig gratisLås upp med PRO
24

B24 lektionerPRO

Skriv anpassade Svelte-övergångsfunktioner från grunden, styr tidsparametrar och skapa morphing samt avancerade CSS- respektive JavaScript-drivna övergångar.

  1. 1Skriv en anpassad övergångsfunktion
  2. 2Övergångsparametrar: node duration delay
  3. 3Skapa en transformerande övergång
  4. +1 till
Börja lära dig gratisLås upp med PRO
25

B24 lektionerPRO

Animera värden över tid med Sveltes spring- och tweened-motion-stores, använd interpoleringsfunktioner och tillämpa rörelse på SVG-sökvägar.

  1. 1spring()-storen: fysikbaserad animering
  2. 2tweened()-storen: duration och easing
  3. 3Interpolationsfunktioner
  4. +1 till
Börja lära dig gratisLås upp med PRO
26

B24 lektionerPRO

Bemästra SvelteKits avancerade layoutsystem: grupplayouter, route-nivåns åsidosättningar, hur man bryter sig ur layouter och delar data i layout-hierarkin.

  1. 1Layoutgrupper med (group)
  2. 2Layouter på route-nivå
  3. 3Bryt dig ur en layout med +page@route
  4. +1 till
Börja lära dig gratisLås upp med PRO
27

B24 lektionerPRO

Implementera autentisering i SvelteKit med cookiebaserade sessioner, säkra JWT:er, route-skydd i hooks och OAuth med Lucia Auth.

  1. 1Cookiebaserade sessioner
  2. 2JWT i HTTP-only-cookies
  3. 3Skyddade routes i handle()-hooken
  4. +1 till
Börja lära dig gratisLås upp med PRO
28

B24 lektionerPRO

Distribuera SvelteKit-applikationer var som helst genom att använda rätt adapter: statiska webbplatser, Node.js-servrar, Vercel och Cloudflare Workers.

  1. 1adapter-static för statiska webbplatser
  2. 2adapter-node för Node.js-server
  3. 3adapter-vercel och adapter-cloudflare
  4. +1 till
Börja lära dig gratisLås upp med PRO
29

B24 lektionerPRO

Upptäck Svelte 5:s runes-system, som ersätter compiler magic med explicita reaktiva primitiver för tillstånd, härledda värden och bieffekter.

  1. 1Varför runor: bortom kompilatormagin
  2. 2$state: finkornig reaktivitet
  3. 3$derived: deklarativa beräknade värden
  4. +1 till
Börja lära dig gratisLås upp med PRO
30

B24 lektionerPRO

Använd $props() för typsäkra komponentprops och den nya snippet-syntaxen med {#snippet} och {@render} för kraftfull komponentsammansättning i Svelte 5.

  1. 1$props() för typade props
  2. 2{#snippet} och {@render}
  3. 3Skicka snippets som props
  4. +1 till
Börja lära dig gratisLås upp med PRO
31

B24 lektionerPRO

Styr renderingsstrategin per route i SvelteKit: välj mellan universell och serverbaserad load, förhandsrendera statiska sidor och inaktivera SSR vid behov.

  1. 1Universal kontra server-only load
  2. 2prerender = true för statiska sidor
  3. 3ssr = false för klientbaserade sidor
  4. +1 till
Börja lära dig gratisLås upp med PRO
32

B24 lektionerPRO

Skriv tillförlitliga enhetstester för Svelte-komponenter och stores med Vitest och @testing-library/svelte och täck rendering, interaktion och modulmockning.

  1. 1Konfigurera Vitest för Svelte-projekt
  2. 2@testing-library/svelte: render och fireEvent
  3. 3Testa stores och reaktivitet
  4. +1 till
Börja lära dig gratisLås upp med PRO
33

B24 lektionerPRO

Skriv end-to-end-tester för SvelteKit-applikationer med Playwright som täcker sidnavigering, formulärinteraktioner och integrering i CI-pipelines.

  1. 1Konfigurera Playwright i SvelteKit
  2. 2Skriv tester för sidinteraktioner
  3. 3Testa formulär och navigering
  4. +1 till
Börja lära dig gratisLås upp med PRO
34

B24 lektionerPRO

Lägg till Tailwind CSS, D3.js-datavisualiseringar, Leaflet-kartor och avancerade textredigerare i SvelteKit-projekt med Svelte-actions och komponentwrappers.

  1. 1Använd Tailwind CSS med SvelteKit
  2. 2D3.js-diagram i Svelte
  3. 3Leaflet-kartor med Svelte Actions
  4. +1 till
Börja lära dig gratisLås upp med PRO
35

B24 lektionerPRO

Säkra Er SvelteKit-applikation mot CSRF-, XSS- och injektionsattacker, hantera miljövariabler säkert och begränsa anropsfrekvensen för API-routes.

  1. 1CSRF-skydd i formulär-actions
  2. 2XSS-skydd i {#html}
  3. 3Miljövariabler: $env/static och $env/dynamic
  4. +1 till
Börja lära dig gratisLås upp med PRO
36

C14 lektionerPRO

Utforska avancerade rune-mönster i Svelte 5, inklusive rått tillstånd, komplexa härledningar, manuell städning av effekter och migrering från Svelte 4.

  1. 1$state.raw för icke-reaktivt tillstånd
  2. 2$derived.by för komplexa härledningar
  3. 3$effect.root för manuell rensning
  4. +1 till
Börja lära dig gratisLås upp med PRO
37

C14 lektionerPRO

Bygg sofistikerade, återanvändbara Svelte-API:er för komponenter med render props genom snippets, högre ordningens komponenter, Builder-mönstret och sammansatta komponenter.

  1. 1Render props med snippets
  2. 2Higher-Order Components
  3. 3Builder-mönstret för headless UI
  4. +1 till
Börja lära dig gratisLås upp med PRO
38

C14 lektionerPRO

Skapa snabba initiala sidladdningar genom att strömma promises från load-funktioner, senarelägga långsamma data och strömma från API-routes med ReadableStream.

  1. 1Strömmande data med promises i load
  2. 2Fördröjd laddning och Suspense-liknande UX
  3. 3Strömma från servern med +server.js
  4. +1 till
Börja lära dig gratisLås upp med PRO
39

C14 lektionerPRO

Optimera SvelteKit-applikationers prestanda med automatisk koddelning, förbättrad bildhantering, lazy loading och profileringsverktyg.

  1. 1Koddelning och dynamiska importer
  2. 2Optimera bilder med @sveltejs/enhanced-img
  3. 3Lazy loading av komponenter
  4. +1 till
Börja lära dig gratisLås upp med PRO
40

C14 lektionerPRO

Utforma stora Svelte-applikationer med store-mönster per funktionsmodul, eventbussar, optimistiska UI-uppdateringar och ångra/gör om med store-historik.

  1. 1Store-arkitektur: funktionsmoduler
  2. 2Eventbussmönstret med stores
  3. 3Optimistiska UI-uppdateringar
  4. +1 till
Börja lära dig gratisLås upp med PRO
41

C14 lektionerPRO

Kombinera allt du har lärt dig för att bygga en produktionsklar fullstack-app med autentisering, en databas via Drizzle ORM, driftsättning på Vercel och typsäkerhet från början till slut.

  1. 1Auth + databas + API: arkitektur
  2. 2Drizzle ORM med SvelteKit
  3. 3Distribuera till Vercel med en databas
  4. +1 till
Börja lära dig gratisLås upp med PRO
CoddyKit PRO

Lås upp alla 41 kurser i den här lärvägen och alla andra lärvägar

AI-handledare, certifieringsprov och certifikat. Fungerar på webben, iOS och Android.

Se alla abonnemang
Årsvis$29.90 / årCirka $2.49 i månadenBetala en gångLivstid$69.99 en gångInga förnyelser. PRO för alltid.
Kursöversikt

Bygg riktiga gränssnitt med Svelte och SvelteKit

Svelte har ett fundamentalt annorlunda angreppssätt än React och Vue – i stället för att skicka en runtime till webbläsaren kompilerar det dina komponenter till mycket effektiv vanilla JavaScript vid byggtillfället. Resultatet blir mindre paket, snabbare laddningstider och mindre boilerplate. SvelteKit, det officiella applikationsramverket, lägger till filbaserad routing, serverrendering, formuläråtgärder och deploymentadaptrar så att du kan leverera produktionsklara appar på valfri plattform. Den här utbildningsvägen täcker båda, från den första komponenten till fullstackarkitektur.

Det här lär du dig

Du börjar med Sveltes komponentmodell – props, mallsyntax, villkor, loopar och tvåvägsbindning – och går sedan vidare till reaktivitetssystemet, livscykelfunktioner och store-primitiverna: writable, readable, derived och anpassade stores. På UI-sidan arbetar du med slots, Context API, CSS-övergångar, animationer och Svelte Motion. Kapitlen om SvelteKit täcker routing, dataladdning, SSR och förgenerering, formuläråtgärder, API-rutter, hooks, felhantering, avancerade layouter, autentiseringsmönster och deploymentadaptrar. Utbildningsvägen täcker även Svelte 5:s rune-system, testning med enhetstester och Playwright E2E, integrering av tredjepartsbibliotek och säkerhet i SvelteKit.

Utbildningsvägen

Fyrtioen kurser går från A1 till C1. De första sju kurserna etablerar grunderna: komponenter, props, händelser och mallsyntax. B1 introducerar stores, slots, övergångar samt dina första SvelteKit-sidor och mönster för dataladdning. B2 – det största blocket – går igenom formuläråtgärder, API-rutter, hooks, avancerad reaktivitet, Svelte Actions, anpassade animationer, autentiseringsmönster, adaptrar, Svelte 5-runes, testning och säkerhet. Utbildningsvägen avslutas på C1 med avancerade runes, avancerade komponentmönster, SvelteKit-strömning, prestandaoptimering, tillståndshantering i stor skala och en fullstackapplikation som slutprojekt i SvelteKit.

Så fungerar det

Varje kurs är uppdelad i korta, fokuserade lektioner som du genomför i den inbyggda kodredigeraren med feedback i realtid. En AI-handledare finns tillgänglig när du fastnar, och varje koncept förstärks med praktiska övningar innan du går vidare till nästa ämne.

Verktyg

Öva med AI – läs inte bara

Ta lärandet till nästa nivå med AI-drivna verktyg och funktioner

AI-kodgeneratorGenerera kod med AIAI-felrättningHitta och åtgärda kodfelPROAI-insiktDjupgående kodanalysPROAI-chattChatta med AI-handledarenStäll en superfrågaFå svar på expertnivåPROSkapa lektionAI-driven lektionsskaparePROPåbörja certifieringsprovetFå ditt certifikatPROKodredigerareSkriv och kör kodStarta utmaningTesta dina kunskaper

Så lär du dig

  1. 01

    Interaktiva lektioner

    Praktiska kodövningar med feedback i realtid

  2. 02

    AI-handledare

    Få omedelbar hjälp av vår AI när du kör fast

  3. 03

    Inbyggd kodredigerare

    Skriv och kör kod direkt i webbläsaren

  4. 04

    Certifikat

    Få ett certifikat när du slutför kursen

Fortsätt utforska

Relaterade lärvägar

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

Vanliga frågor

Är kursen i Sveltejs Academy gratis?

Ja. Ni kan börja kursen i Sveltejs Academy gratis och genomföra de interaktiva lektionerna utan kostnad. Med en valfri PRO-prenumeration får Ni tillgång till avancerade AI-verktyg och ett certifikat som kan delas.

Behöver jag tidigare erfarenhet för att lära mig HTML?

Nej. Kursen börjar med grunderna och går stegvis vidare till mer avancerade ämnen, så Ni kan börja även utan tidigare erfarenhet av HTML.

Hur lär jag mig HTML på CoddyKit?

Ni lär Er genom att göra. Korta interaktiva lektioner kombinerar tydliga förklaringar med praktiska kodövningar som körs i realtid, och en AI-handledare som är tillgänglig dygnet runt ger personlig hjälp när Ni kör fast.

Får jag ett certifikat när jag har slutfört Sveltejs Academy?

Ja. PRO-användare kan göra ett prov och få ett delbart intyg på att de har slutfört kursen i Sveltejs Academy, med en verifierbar kod.

Kan jag lära mig HTML i mobilen?

Ja. CoddyKit finns på webben och som inbyggda iOS- och Android-appar, så Ni kan lära Er HTML på valfri enhet och synkronisera Era framsteg mellan dem.

Vad kostar CoddyKit PRO?

Den första kursen i Sveltejs Academy är gratis. CoddyKit PRO låser upp alla kurser: $5.90 per vecka, $7.90 per månad, $29.90 per år eller $69.99 en gång för livstidsåtkomst utan förnyelser.

Hur lång tid tar det att slutföra Sveltejs Academy?

Sveltejs Academy har 41 kurser och 163 lektioner. De flesta lektioner tar cirka 5–10 minuter, så hela lärvägen motsvarar ungefär 19 timmars praktisk övning i egen takt.

Börja med Sveltejs Academy nu

Anslut Er till tusentals deltagare som lär sig programmering med AI-drivna lektioner.

Börja lära dig gratisBläddra bland alla kurser