0Pricing
Sveltejs Academy logo
HTMLPrincipianteWebLivelli A1 → C115 lingue

Sveltejs Academy

Costruisci interfacce utente veloci e semplici con tecniche moderne presso Svelte Academy. Un percorso di apprendimento CoddyKit con 41 corsi brevi e 163 lezioni interattive, con un tutor IA disponibile 24/7 al tuo fianco.

Corsi
41
Lezioni
163
Passaggi interattivi
2,114
Gratis per iniziare
Corso 1
GET IT ONGoogle PlayDownload on theApp Store
Curriculum

41 corsi in questo percorso

Ogni corso del percorso Sveltejs Academy, in ordine di apprendimento. Il primo è gratuito.

1

A13 lezioniGratis

Capisca cos'è Svelte, perché adotta un approccio completamente diverso da React o Vue per creare interfacce utente e perché gli sviluppatori che lo provano tendono a innamorarsene.

  1. 1Che cos'è Svelte?
  2. 2Perché Svelte sembra magico
  3. 3Cosa costruirà con Svelte
Inizia a imparare gratis
2

A14 lezioniPRO

Inizi a utilizzare Svelte comprendendo cosa lo distingue dagli altri framework, configuri il primo progetto ed esplori la struttura del progetto e il workflow di sviluppo.

  1. 1Che cos'è Svelte e perché compila
  2. 2Creazione di un progetto con npm create svelte
  3. 3Struttura del progetto: src routes static
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
3

A14 lezioniPRO

Impari a scrivere componenti Svelte da zero, utilizzare variabili reattive, interpolare espressioni e creare valori calcolati con le dichiarazioni reattive.

  1. 1Struttura di script, template e style
  2. 2Variabili reattive con let
  3. 3Interpolazione: {expression}
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
4

A24 lezioniPRO

Passi dati tra i componenti Svelte tramite props, imposti valori predefiniti e inoltri elegantemente le props con $$props e $$restProps.

  1. 1Dichiarazione delle props con export let
  2. 2Passaggio delle props dal genitore
  3. 3Valori predefiniti delle props
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
5

A24 lezioniPRO

Controlli cosa viene renderizzato nei template Svelte con i blocchi condizionali, iteri sugli array con i blocchi each e forzi il re-rendering con i blocchi key.

  1. 1{#if} {#else if} {#else}
  2. 2{#each} con indice e chiave
  3. 3{#key} per forzare il nuovo rendering
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
6

A24 lezioniPRO

Gestisca gli eventi DOM in Svelte, utilizzi i modificatori degli eventi per semplificare i pattern comuni, invii eventi personalizzati dai componenti figli e li inoltri lungo l’albero.

  1. 1on:click on:input on:submit
  2. 2Modificatori degli eventi: preventDefault stopPropagation once
  3. 3Eventi personalizzati con createEventDispatcher
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
7

A24 lezioniPRO

Sincronizzi gli input dei form e gli elementi DOM con le variabili Svelte usando le direttive bind: per testo, checkbox, gruppi di radio button e riferimenti agli elementi.

  1. 1bind:value per gli input di testo
  2. 2bind:checked per le caselle di spunta
  3. 3bind:group per gruppi di radio button e checkbox
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
8

B14 lezioniPRO

Controlli cosa accade in ogni fase del ciclo di vita di un componente Svelte con onMount, onDestroy, beforeUpdate, afterUpdate e l’utility tick.

  1. 1onMount: esecuzione dopo il rendering
  2. 2onDestroy: pulizia
  3. 3beforeUpdate e afterUpdate
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
9

B14 lezioniPRO

Condivida lo stato reattivo tra i componenti utilizzando le primitive store integrate in Svelte, si iscriva con la sintassi abbreviata $ e crei store readable con logica personalizzata.

  1. 1Creazione di uno store writable
  2. 2Sottoscrizione con l'auto-sottoscrizione $
  3. 3Aggiornamento degli store: set() e update()
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
10

B14 lezioniPRO

Componi gli store Svelte derivando store calcolati da una o più sorgenti e costruisca store completamente personalizzati che implementano il contratto degli store.

  1. 1derived() per gli store calcolati
  2. 2Pattern di store personalizzato con subscribe/set/update
  3. 3Readable a partire da Writable
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
11

B14 lezioniPRO

Proietti contenuti nei componenti Svelte utilizzando slot predefiniti e denominati, fornisca contenuti di fallback e verifichi se gli slot sono stati valorizzati.

  1. 1Slot predefiniti per la proiezione dei contenuti
  2. 2Slot denominati con slot="name"
  3. 3Contenuto alternativo degli slot
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
12

B14 lezioniPRO

Animi gli elementi mentre entrano ed escono dal DOM con le direttive di transizione integrate in Svelte, configuri durata ed easing e gestisca transizioni in/out asimmetriche.

  1. 1transition:fade e transition:fly
  2. 2Parametri delle transizioni: duration delay easing
  3. 3in: e out: per transizioni asimmetriche
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
13

B14 lezioniPRO

Vada oltre le transizioni con la direttiva animate di Svelte per riordinare liste, creare animazioni spring basate sulla fisica e interpolare valori tweened.

  1. 1animate:flip per il riordinamento delle liste
  2. 2Gli store spring() e tweened()
  3. 3Funzioni easing personalizzate
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
14

B14 lezioniPRO

Esplori il routing basato sui file di SvelteKit, crei route dinamiche con parametri e utilizzi i file di layout per condividere l’interfaccia tra le pagine.

  1. 1Routing basato sui file con +page.svelte
  2. 2Parametri dinamici delle route: [id]
  3. 3Parametri opzionali e rest
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
15

B14 lezioniPRO

Carichi i dati delle pagine con le funzioni load di SvelteKit, gestisca con eleganza gli errori ed esegua la logica riservata al server in +page.server.js.

  1. 1Funzione load di +page.js
  2. 2Restituzione dei dati e utilizzo di $page.data
  3. 3Gestione degli errori in load
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
16

B14 lezioniPRO

Passi dati in profondità nell’albero dei componenti senza prop drilling con la Context API di Svelte e comprenda quando preferire il context agli store.

  1. 1setContext() e getContext()
  2. 2Contesto e store: quando utilizzare ciascuno
  3. 3Contesto tipizzato con TypeScript
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
17

B14 lezioniPRO

Migliori la reperibilità impostando meta tag dinamici, card OpenGraph e dati strutturati JSON-LD e gestendo gli URL canonici in SvelteKit.

  1. 1svelte:head per meta tag dinamici
  2. 2Meta tag OpenGraph e Twitter Card
  3. 3Dati strutturati JSON-LD in SvelteKit
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
18

B24 lezioniPRO

Gestisca sul server l’invio dei form HTML con le form actions di SvelteKit, le migliori progressivamente con JavaScript e restituisca gli errori di validazione.

  1. 1+page.server.js con le actions
  2. 2La direttiva use:enhance
  3. 3Progressive enhancement dei form
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
19

B24 lezioniPRO

Costruisca endpoint API RESTful e streaming in SvelteKit usando i file +server.js, gestisca più metodi HTTP e restituisca risposte JSON tipizzate.

  1. 1+server.js: GET POST PUT DELETE
  2. 2Request e RequestEvent
  3. 3Restituzione di risposte JSON
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
20

B24 lezioniPRO

Intercetti e trasformi ogni richiesta con gli hook server di SvelteKit, registri centralmente gli errori e componga più hook con l’utility sequence.

  1. 1L'hook handle(): middleware per le richieste
  2. 2handleError per la registrazione degli errori del server
  3. 3L'hook init()
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
21

B24 lezioniPRO

Offra un’esperienza utente eccellente quando qualcosa va storto personalizzando le pagine di errore, distinguendo gli errori previsti da quelli imprevisti e gestendo gli errori nei layout annidati.

  1. 1+error.svelte per pagine di errore personalizzate
  2. 2Errori previsti e imprevisti
  3. 3Helper error() e redirect()
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
22

B24 lezioniPRO

Approfondisca il sistema reattivo di Svelte: ordine delle dichiarazioni reattive, scelta tra store e stato locale ed evitamento delle closure obsolete.

  1. 1Istruzioni reattive: blocco $:
  2. 2Dipendenze reattive e ordinamento
  3. 3Quando utilizzare gli store invece dello stato locale
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
23

B24 lezioniPRO

Colleghi comportamenti imperativi riutilizzabili agli elementi DOM con le actions di Svelte, gestisca parametri e aggiornamenti e costruisca actions pratiche come clickOutside e tooltip.

  1. 1Sintassi della direttiva use:
  2. 2Parametri e aggiornamenti delle actions
  3. 3La funzione di pulizia destroy()
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
24

B24 lezioniPRO

Scriva da zero funzioni di transizione personalizzate in Svelte, controlli i parametri temporali e crei morphing e transizioni avanzate basate su CSS o JavaScript.

  1. 1Scrittura di una funzione di transizione personalizzata
  2. 2Parametri delle transizioni: node duration delay
  3. 3Creazione di una transizione morphing
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
25

B24 lezioniPRO

Animi i valori nel tempo con gli store di movimento spring e tweened di Svelte, utilizzi funzioni di interpolazione e applichi il movimento ai tracciati SVG.

  1. 1Lo store spring(): animazione basata sulla fisica
  2. 2Lo store tweened(): durata ed easing
  3. 3Funzioni di interpolazione
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
26

B24 lezioniPRO

Padroneggi il sistema avanzato dei layout di SvelteKit: layout raggruppati, override a livello di route, uscita dai layout e condivisione dei dati nella gerarchia dei layout.

  1. 1Gruppi di layout con (group)
  2. 2Layout a livello di route
  3. 3Uscire da un layout con +page@route
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
27

B24 lezioniPRO

Implementi l’autenticazione in SvelteKit con sessioni basate su cookie, JWT sicuri, protezione delle route negli hook e OAuth con Lucia Auth.

  1. 1Sessioni basate sui cookie
  2. 2JWT nei cookie HTTP-only
  3. 3Route protette nell'hook handle()
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
28

B24 lezioniPRO

Esegua il deployment delle applicazioni SvelteKit ovunque utilizzando l’adapter appropriato: siti statici, server Node.js, Vercel e Cloudflare Workers.

  1. 1adapter-static per siti statici
  2. 2adapter-node per il server Node.js
  3. 3adapter-vercel e adapter-cloudflare
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
29

B24 lezioniPRO

Scopra il sistema delle rune di Svelte 5, che sostituisce la magia del compilatore con primitive reattive esplicite per stato, valori derivati ed effetti collaterali.

  1. 1Perché le Runes: oltre la magia del compilatore
  2. 2$state: reattività granulare
  3. 3$derived: valori calcolati dichiarativi
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
30

B24 lezioniPRO

Utilizzi $props() per props tipizzate dei componenti e la nuova sintassi degli snippet con {#snippet} e {@render} per una potente composizione dei contenuti in Svelte 5.

  1. 1$props() per props tipizzate
  2. 2{#snippet} e {@render}
  3. 3Passaggio degli snippet come props
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
31

B24 lezioniPRO

Controlli la strategia di rendering per ogni route in SvelteKit: scelga tra load universale e solo server, esegua il prerendering delle pagine statiche e disabiliti SSR quando necessario.

  1. 1load universale e solo server
  2. 2prerender = true per le pagine statiche
  3. 3ssr = false per le pagine solo client
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
32

B24 lezioniPRO

Scriva unit test affidabili per componenti e store Svelte con Vitest e @testing-library/svelte, verificando rendering, interazioni e mocking dei moduli.

  1. 1Configurazione di Vitest per progetti Svelte
  2. 2@testing-library/svelte: render e fireEvent
  3. 3Test degli store e della reattività
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
33

B24 lezioniPRO

Scriva test end-to-end per applicazioni SvelteKit con Playwright, verificando navigazione tra pagine, interazioni con i form e integrazione nella pipeline CI.

  1. 1Configurazione di Playwright in SvelteKit
  2. 2Scrittura di test per le interazioni delle pagine
  3. 3Test di moduli e navigazione
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
34

B24 lezioniPRO

Aggiunga Tailwind CSS, visualizzazioni dati con D3.js, mappe Leaflet ed editor rich text ai progetti SvelteKit usando actions Svelte e wrapper di componenti.

  1. 1Uso di Tailwind CSS con SvelteKit
  2. 2Grafici D3.js in Svelte
  3. 3Mappe Leaflet con le actions Svelte
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
35

B24 lezioniPRO

Renda più sicura l’applicazione SvelteKit contro attacchi CSRF, XSS e injection, gestisca in sicurezza le variabili d’ambiente e limiti la frequenza delle richieste alle route API.

  1. 1Protezione CSRF nelle actions dei moduli
  2. 2Prevenzione XSS in {#html}
  3. 3Variabili d'ambiente: $env/static e $env/dynamic
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
36

C14 lezioniPRO

Esplori i pattern avanzati delle rune di Svelte 5, tra cui stato raw, derivazioni complesse, pulizia manuale degli effetti e migrazione da Svelte 4.

  1. 1$state.raw per lo stato non reattivo
  2. 2$derived.by per derivazioni complesse
  3. 3$effect.root per la pulizia manuale
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
37

C14 lezioniPRO

Costruisca API Svelte sofisticate e riutilizzabili utilizzando render props con snippet, componenti di ordine superiore, il builder pattern e componenti composti.

  1. 1Render props con gli snippet
  2. 2Componenti higher-order
  3. 3Il pattern Builder per Headless UI
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
38

C14 lezioniPRO

Offra caricamenti iniziali rapidi trasmettendo in streaming le promise dalle funzioni load, posticipando i dati lenti e trasmettendo dagli endpoint API con ReadableStream.

  1. 1Streaming dei dati con le Promise in load
  2. 2Caricamento differito e UX simile a Suspense
  3. 3Streaming dal server con +server.js
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
39

C14 lezioniPRO

Ottimizzi le prestazioni delle app SvelteKit con code splitting automatico, gestione avanzata delle immagini, caricamento differito e strumenti di profiling.

  1. 1Code splitting e import dinamici
  2. 2Ottimizzazione delle immagini con @sveltejs/enhanced-img
  3. 3Caricamento differito dei componenti
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
40

C14 lezioniPRO

Progetti applicazioni Svelte di grandi dimensioni con pattern store basati su feature module, event bus, aggiornamenti UI ottimistici e undo/redo con la cronologia degli store.

  1. 1Architettura degli store: moduli delle funzionalità
  2. 2Pattern Event Bus con gli store
  3. 3Aggiornamenti ottimistici dell'interfaccia
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
41

C14 lezioniPRO

Mettete insieme tutto ciò che avete imparato per creare un'app full-stack pronta per la produzione, con autenticazione, database tramite Drizzle ORM, distribuzione su Vercel e sicurezza dei tipi end-…

  1. 1Auth + Database + API: architettura
  2. 2Drizzle ORM con SvelteKit
  3. 3Distribuzione su Vercel con un database
  4. +1 altri
Inizia a imparare gratisSblocca con PRO
CoddyKit PRO

Sblocca tutti i 41 corsi di questo percorso e di ogni altro percorso

Tutor IA, esame di certificazione e certificato. Funziona sul web, su iOS e Android.

Scopri tutti i piani
Annuale$29.90 / annoCirca $2.49 al mesePaga una voltaA vita$69.99 una voltaNessun rinnovo. PRO per sempre.
Panoramica del Corso

Costruisci Interfacce Reali con Svelte e SvelteKit

Svelte adotta un approccio fondamentalmente diverso da React e Vue — invece di spedire un runtime al browser, compila i tuoi componenti in JavaScript vanilla altamente efficiente al momento della build. Il risultato è bundle più piccoli, tempi di caricamento più veloci e meno boilerplate. SvelteKit, il framework ufficiale, aggiunge routing basato su file, server-side rendering, form actions e deployment adapter così puoi lanciare app di livello produttivo su qualsiasi piattaforma. Questo percorso copre entrambi, dal primo componente fino all'architettura full-stack.

Cosa Imparerai

Inizierai con il modello di componenti di Svelte — props, template syntax, conditionals, loops e two-way binding — poi passerai al sistema di reattività, alle lifecycle functions e ai store primitives: writable, readable, derived e custom stores. Sul lato UI lavorerai con slots, Context API, CSS transitions, animations e Svelte Motion. I capitoli di SvelteKit coprono routing, data loading, SSR e prerendering, form actions, API routes, hooks, error handling, advanced layouts, auth patterns e deployment adapter. Il percorso copre anche il rune system di Svelte 5, testing con unit tests e Playwright E2E, integrazione di librerie di terze parti e security practices di SvelteKit.

Il Percorso di Apprendimento

Quarantuno corsi progrediscono da A1 attraverso C1. I primi sette corsi stabiliscono le fondamenta: components, props, events e template syntax. B1 introduce stores, slots, transitions e le tue prime pagine SvelteKit e data-loading patterns. B2 — il blocco più grande — elabora form actions, API routes, hooks, advanced reactivity, Svelte Actions, custom animations, auth patterns, adapter, Svelte 5 runes, testing e security. Il percorso si conclude a C1 con advanced runes, advanced component patterns, SvelteKit streaming, performance optimization, large-scale state management e un'applicazione SvelteKit full-stack capstone.

Come Funziona

Ogni corso è diviso in lezioni brevi e focalizzate che completi nell'editor di codice integrato con feedback in tempo reale. Un tutor AI è disponibile ogni volta che rimani bloccato, e ogni concetto è rafforzato con esercizi pratici prima di passare all'argomento successivo.

Strumenti

Fai pratica con l'IA, non limitarti a leggere

Potenzia il tuo apprendimento con strumenti e funzionalità alimentate da IA

Generatore di Codice IAGenera codice con IACorrezione Bug IATrova e correggi errori di codicePROAnalisi IAAnalisi approfondita del codicePROChat IAChatta con il tuo tutor IAFai una Super DomandaOttieni risposte a livello espertoPROCrea LezioneGeneratore di lezioni alimentato da IAPROInizia l'Esame di CertificazioneOttieni il tuo certificatoPROEditor di CodiceScrivi ed esegui il codiceInizia la SfidaMetti alla prova le tue abilità

Come Imparerai

  1. 01

    Lezioni Interattive

    Esercizi di codifica pratici con feedback in tempo reale

  2. 02

    Tutor IA

    Ricevi aiuto istantaneo dalla nostra IA quando sei bloccato

  3. 03

    Editor Integrato

    Scrivi ed esegui il codice direttamente nel tuo browser

  4. 04

    Certificato

    Guadagna un certificato al completamento del corso

Continua a esplorare

Percorsi di apprendimento correlati

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

Domande Frequenti

Il corso Sveltejs Academy è gratuito?

Sì. Puoi iniziare il corso Sveltejs Academy gratuitamente e completare le sue lezioni interattive senza costi. Un abbonamento PRO opzionale sblocca strumenti IA avanzati e un certificato condivisibile.

Serve esperienza precedente per imparare HTML?

No. Il corso inizia con i fondamenti e prosegue gradualmente verso argomenti più avanzati, quindi puoi iniziare anche senza alcuna esperienza precedente in HTML.

Come imparerò HTML su CoddyKit?

Impari facendo. Brevi lezioni interattive abbinano una spiegazione chiara a un esercizio di codifica pratico che gira in tempo reale, e un tutor IA disponibile 24/7 offre aiuto personalizzato quando rimani bloccato.

Ricevo un certificato per il completamento di Sveltejs Academy?

Sì. Gli studenti PRO possono sostenere un esame e guadagnare un certificato condivisibile di completamento con un codice verificabile per il corso Sveltejs Academy.

Posso imparare HTML dal mio telefono?

Sì. CoddyKit è disponibile sul web e come app native iOS e Android, quindi puoi imparare HTML su qualsiasi dispositivo e i tuoi progressi si sincronizzano tra loro.

Quanto costa CoddyKit PRO?

Il primo corso di Sveltejs Academy è gratuito. CoddyKit PRO sblocca ogni corso: $5.90 a settimana, $7.90 al mese, $29.90 all'anno oppure $69.99 una volta, per un accesso a vita senza rinnovi.

Quanto tempo serve per completare Sveltejs Academy?

Sveltejs Academy comprende 41 corsi e 163 lezioni. La maggior parte delle lezioni richiede circa 5–10 minuti, quindi l'intero percorso richiede circa 19 ore di pratica concreta, al tuo ritmo.

Inizia Sveltejs Academy Ora

Unisciti a migliaia di studenti che imparano la programmazione con lezioni potenziate dall'IA.

Inizia a imparare gratisSfoglia Tutti i Corsi