Aprender Svelte: Curso Code
Aprender Svelte: Curso Code — Aprenda Svelte e SvelteKit com um editor ao vivo e o código compilado ao lado
Aprender Svelte: Curso Code é um app gratuito para iOS e Android que ensina Svelte e SvelteKit no seu celular. Escreva componentes em um editor ao vivo com prévia, veja o JavaScript em que o compilador os transforma e percorra 41 cursos, do seu primeiro valor reativo a um app full-stack publicado, com um Mentor de IA ao seu lado.
- Preço
- Gratuito, upgrade para Pro
- Plataformas
- iOS e Android
- Idiomas
- 22
- Classificação etária
- 4+
- Requisitos
- iOS 15.1 ou posterior
Nada nessa tela está executando Svelte. Ela está executando o que Svelte escreveu.
A primeira lição do app mostra um componente de nove linhas ao lado do JavaScript que o compilador gerou para ele. Toque em +1 e as linhas acionadas se iluminam: uma invalidação, um valor recalculado, dois nós de texto alterados e nada mais foi tocado. Essa é a ideia por trás do framework, mostrada antes de ser explicada.
O que é
Aprender Svelte: Curso Code é um app gratuito para iOS e Android que ensina Svelte e SvelteKit por meio de 41 cursos e 163 lições, classificados do iniciante ao avançado. Ele começa com uma demonstração que mostra um componente ao lado do JavaScript compilado, depois aborda reatividade, props, stores, transições, runes do Svelte 5 e roteamento do SvelteKit, carregamento de dados, ações de formulário e publicação. Um editor ao vivo com prévia e um Mentor de IA já vêm integrados.
Dentro do app
Como ele é
O curso
O que o curso de Svelte aborda
41 cursos e 163 aulas da própria lista de cursos do app, classificados de A1 a C1 e terminando com um projeto completo de SvelteKit full-stack.
Primeiros componentes
O que é Svelte e por que ele adota uma abordagem diferente, como configurar um projeto e como escrever seu primeiro componente com variáveis reativas.
Props, templates, eventos e binding
Passagem de props, condicionais e loops each na marcação, eventos do DOM e eventos personalizados, além de binding bidirecional com diretivas bind:.
Ciclo de vida, stores e contexto
onMount e onDestroy, stores writable, readable, derived e personalizadas, slots e composição, além da Context API.
Transições, animações e actions
Diretivas de transição, a diretiva animate, actions para comportamento reutilizável do DOM, transições personalizadas e as stores de movimento spring e tweened.
Fundamentos do SvelteKit
Roteamento e páginas baseados em arquivos, funções load, layouts avançados, form actions, rotas de API, hooks do servidor e páginas de erro.
Runes do Svelte 5
Uma introdução às runes, props e snippets, runes avançadas e uma análise mais profunda de como funciona a reatividade do Svelte.
SvelteKit em produção
SSR e prerendering, streaming, performance, SEO e meta tags, segurança, padrões de autenticação, adapters e deploy.
Testes e full-stack
Testes unitários com Vitest, testes end-to-end com Playwright, bibliotecas de terceiros, gerenciamento de estado em grande escala e um app SvelteKit full-stack.
Como funciona
Como funciona uma sessão
O app é organizado em torno de um caminho que vai de um valor reativo a um app publicável, e cada etapa combina leitura com algo para executar.
Veja primeiro a saída do compilador
A demonstração inicial coloca um pequeno componente ao lado do JavaScript para o qual ele é compilado. A parte compilada foi gerada antecipadamente e vem dentro do app, então a demonstração funciona sem conexão.
Edite um componente e veja a prévia
As lições abrem um editor com abas de HTML, CSS e JavaScript e um botão de execução que renderiza o componente em uma prévia. A prévia carrega o compilador Svelte pela rede, então precisa de conexão.
Confira se ficou claro
Um quiz e desafios de programação vêm depois de cada tema, e o Mentor de IA pode explicar um conceito, sugerir um roteiro ou fazer perguntas sobre um curso. O Weekly Code Challenge acrescenta uma rodada competitiva.
O que está incluído
O que vem com o app
41
Cursos, de A1 a C1
163 lições distribuídas em 41 cursos, desde a configuração do Svelte e seu primeiro componente até stores, transições, roteamento e hooks do SvelteKit, runes do Svelte 5, testes e um projeto final full-stack.
Compilado
Componente ao lado do código compilado
A demonstração da primeira execução mostra o código-fonte e o JavaScript gerado juntos e contabiliza os nós de texto atualizados em comparação com os elementos recriados, para que o custo de uma atualização seja algo que você consegue ler na tela.
Prévia
Editor ao vivo com prévia
Escreva a marcação, os estilos e o script em abas separadas e renderize o componente no celular. A prévia usa o compilador Svelte 4.2.19, então o código escrito com as runes do Svelte 5 pode não aparecer na prévia e é melhor ser lido e acompanhado.
IA
Mentor de IA
Peça os conceitos principais de um curso, dicas para aprender mais rápido, um quiz ou um roteiro pessoal na aba de chat, ou pergunte sobre um erro que você não consegue entender.
Semanal
Weekly Code Challenge
Uma rodada de desafios recorrente para competir junto com as lições, com sequências, acompanhamento do progresso e lembretes para manter uma rotina.
Exame
Certificado de conclusão
Faça o exame final e o certificado terá seu nome — uma comprovação do trabalho realizado, não uma qualificação credenciada.
Contexto
O que é Svelte e como ele se diferencia de outras formas de criar uma interface web?
Svelte é um framework para criar interfaces de usuário no qual os componentes são compilados antecipadamente em JavaScript puro que atualiza a página diretamente, em vez de enviar um runtime grande que calcula as mudanças no navegador. Um componente é um único arquivo com marcação, estilos e script, e uma atribuição como count += 1 é suficiente para atualizar a tela. SvelteKit é o framework de aplicações criado sobre ele, adicionando roteamento baseado em arquivos, carregamento de dados no servidor, tratamento de formulários e adaptadores para publicação. Na prática, isso significa menos código repetitivo e uma distância menor entre o código e o que aparece na página para quem está aprendendo.
Reatividade em tempo de compilaçãouma atribuição é o estado
No Svelte, o compilador transforma uma atribuição comum no código que atualiza as partes afetadas da página. Uma instrução rotulada que começa com $: recalcula um valor sempre que os valores que ela lê mudam, então dados derivados não precisam de funções auxiliares.
Storesestado compartilhado entre componentes
Um store gravável armazena um valor ao qual vários componentes podem se inscrever, e adicionar o prefixo $ ao nome ativa a inscrição automática. Stores derivados e personalizados expandem esse recurso quando o estado precisa ser calculado ou encapsulado.
Runesa sintaxe do Svelte 5
Svelte 5 substitui grande parte da antiga mágica do compilador por funções explícitas, como $state, $derived e $props, além de snippets para marcação reutilizável. Os dois estilos são usados em projetos reais, por isso o app ensina o modelo original e o modelo de runes em cursos separados.
SvelteKitroteamento, dados e publicação
Um arquivo como +page.svelte se torna uma rota, uma função load busca dados antes de a página ser renderizada, ações de formulário processam envios no servidor e um adaptador empacota o resultado para um host estático, um servidor Node ou uma plataforma serverless.
Para quem é
Para quem é — e para quem não é
É uma boa opção se você
- Quer aprender Svelte ou SvelteKit em sessões curtas, em vez de cursos longos em vídeo
- Já conhece um pouco de HTML e JavaScript e quer ver o que muda com um framework compiler-first
- Tem curiosidade sobre como funcionam as atualizações reativas e prefere ler o código gerado a simplesmente confiar nele
- Quer uma trilha que chegue a roteamento, carregamento de dados, autenticação e deploy, não apenas componentes
- Gosta de perguntar ao Mentor de IA por que um trecho de código se comporta daquela maneira
Não é a ferramenta certa se você
- Quer executar código com runes do Svelte 5 na prévia, que usa o compilador Svelte 4.2.19
- Precisa criar e fazer deploy de um projeto SvelteKit completo pelo celular, algo que ainda exige um laptop
- Espera que tudo seja gratuito: o primeiro curso é gratuito e o Pro desbloqueia o restante
- Nunca viu HTML ou JavaScript e quer fazer um curso geral de programação antes de aprender um framework
Dúvidas
Perguntas frequentes
Como posso aprender Svelte pelo celular?
Escolha uma trilha que combine leitura com execução de código, porque Svelte é mais fácil de entender quando você altera um valor e observa a página responder. Aprender Svelte: Curso Code começa com uma demonstração da saída compilada e depois oferece aulas com um editor de HTML, CSS e JavaScript, uma prévia e um Mentor de IA. É gratuito para começar no iOS e no Android.
Svelte é difícil de aprender para iniciantes?
Svelte costuma ser considerado acessível porque os componentes se parecem com HTML, CSS e JavaScript comuns e uma atribuição atualiza a tela. As partes difíceis vêm depois, com stores, ciclo de vida, a divisão entre servidor e cliente do SvelteKit e a transição para as runes do Svelte 5. Aprender Svelte: Curso Code classifica seus 41 cursos de A1 a C1 para que esses temas sejam apresentados em ordem.
O que é SvelteKit e o app ensina isso?
SvelteKit é o framework de aplicação do Svelte, adicionando roteamento baseado em arquivos, carregamento de dados no servidor, form actions, hooks e adapters de deploy. Aprender Svelte: Curso Code tem cursos dedicados a roteamento e páginas do SvelteKit, carregamento de dados, form actions, rotas de API, hooks, tratamento de erros, SSR e prerendering, streaming, segurança e adapters.
O app aborda as runes do Svelte 5?
Sim. Aprender Svelte: Curso Code inclui cursos sobre uma introdução às runes, props e snippets, além de runes avançadas. A prévia do editor atualmente compila com Svelte 4.2.19, então o código com runes pode não aparecer na prévia e é melhor acompanhá-lo no texto da aula.
Posso executar código Svelte no celular?
Você pode escrever um componente no editor e renderizá-lo em uma prévia. A prévia do Aprender Svelte: Curso Code carrega o compilador Svelte para criar o componente, por isso precisa de conexão. A demonstração inicial da saída compilada é diferente: seu código compilado vem dentro do app e funciona sem conexão de rede.
O Aprender Svelte: Curso Code é gratuito?
O app é gratuito para baixar. O primeiro curso é gratuito, com uma cota diária do Mentor de IA, e o Pro desbloqueia todos os cursos, remove os anúncios e oferece Mentor de IA ilimitado. Você pode fazer aulas reais antes de decidir se quer assinar o upgrade.
Preciso saber JavaScript primeiro?
Conhecer um pouco de HTML e JavaScript facilitará os primeiros cursos, porque um componente Svelte é simplesmente essas linguagens em um único arquivo. Aprender Svelte: Curso Code começa explicando o que é Svelte e como configurá-lo, e explica cada conceito em linguagem simples, mas é um curso de framework, não um primeiro curso de programação.
Quais plataformas e linguagens são compatíveis?
Aprender Svelte: Curso Code funciona no iOS pela App Store e no Android pelo Google Play, e a interface está disponível em 22 idiomas. A classificação é 4+, portanto nada do material tem restrição de idade.
Comece agora
Compile seu primeiro componente hoje
Gratuito para começar no iOS e no Android, em 22 idiomas.
Mais da CoddyKit
Disponível em iOS e Android.