0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Construa interfaces de usuário rápidas e simples com técnicas modernas na Svelte Academy.

🤖 Com Inteligência Artificial📚 41 cursos👥 100.000+ alunos⭐ Classificação 4,9
Visão Geral do Curso

Construa Interfaces Reais com Svelte e SvelteKit

Svelte adota uma abordagem fundamentalmente diferente de React e Vue — em vez de enviar um runtime para o navegador, ele compila seus componentes para JavaScript vanilla altamente eficiente no tempo de compilação. O resultado são bundles menores, tempos de carregamento mais rápidos e menos boilerplate. SvelteKit, o framework oficial de aplicação, adiciona roteamento baseado em arquivos, renderização no servidor, form actions e adaptadores de deployment para que você possa lançar aplicações de nível de produção em qualquer plataforma. Este track cobre ambos, do primeiro componente através da arquitetura full-stack.

O Que Você Aprenderá

Você começará com o modelo de componentes do Svelte — props, sintaxe de template, condicionais, loops e two-way binding — depois entrará no sistema de reatividade, funções de ciclo de vida e os primitivos de store: writable, readable, derived e custom stores. No lado da UI você trabalhará com slots, Context API, CSS transitions, animations e Svelte Motion. Os capítulos do SvelteKit cobrem roteamento, carregamento de dados, SSR e prerendering, form actions, rotas de API, hooks, tratamento de erros, layouts avançados, padrões de autenticação e adaptadores de deployment. O track também cobre o sistema de runes do Svelte 5, testes com testes unitários e Playwright E2E, integração de bibliotecas de terceiros e práticas de segurança do SvelteKit.

O Caminho de Aprendizado

Quarenta e um cursos progridem de A1 até C1. Os primeiros sete cursos estabelecem os fundamentos: componentes, props, eventos e sintaxe de template. B1 introduz stores, slots, transitions e suas primeiras páginas SvelteKit e padrões de carregamento de dados. B2 — o maior bloco — trabalha através de form actions, rotas de API, hooks, reatividade avançada, Svelte Actions, animações personalizadas, padrões de autenticação, adaptadores, runes do Svelte 5, testes e segurança. O track fecha em C1 com runes avançados, padrões de componentes avançados, SvelteKit streaming, otimização de performance, gerenciamento de estado em larga escala e uma aplicação SvelteKit full-stack capstone.

Como Funciona

Cada curso é dividido em lições curtas e focadas que você completa no editor de código integrado com feedback em tempo real. Um tutor de IA está disponível sempre que você ficar preso, e cada conceito é reforçado com exercícios práticos antes de você passar para o próximo tópico.

Comece a Aprender →

Como Você Aprenderá

🎯
Aulas Interativas
Exercícios de codificação práticos com feedback em tempo real
🤖
Tutor de IA
Obtenha ajuda instantânea de nossa IA quando você ficar preso
💻
Editor Integrado
Escreva e execute código diretamente no seu navegador
🏆
Certificado
Ganhe um certificado ao concluir o curso
Currículo

41 Cursos

Todos os cursos no caminho de aprendizado Sveltejs Academy.

01

Boas-vindas ao Svelte

A13 aulas

Entenda o que é Svelte, por que ele adota uma abordagem totalmente diferente para criar interfaces em comparação com React ou Vue e por que…

02

Introdução e configuração do Svelte

A14 aulasPRO

Comece a usar Svelte entendendo o que o diferencia de outras estruturas, configurando seu primeiro projeto e explorando sua estrutura e seu…

03

Seu primeiro componente Svelte

A14 aulasPRO

Aprenda a escrever componentes Svelte do zero, usar variáveis reativas, interpolar expressões e criar valores calculados com declarações re…

04

Props e comunicação entre componentes

A24 aulasPRO

Passe dados entre componentes Svelte usando props, defina valores padrão e encaminhe props de forma elegante com $$props e $$restProps.

05

Sintaxe de modelos: condicionais e laços

A24 aulasPRO

Controle o que é renderizado nos seus modelos Svelte usando blocos condicionais, percorra matrizes com blocos each e force novas renderizaç…

06

Eventos e tratamento de eventos

A24 aulasPRO

Trate eventos do DOM no Svelte, use modificadores de eventos para simplificar padrões comuns, dispare eventos personalizados de componentes…

07

Vinculação bidirecional

A24 aulasPRO

Sincronize entradas de formulários e elementos do DOM com variáveis Svelte usando diretivas bind: para textos, caixas de seleção, grupos de…

08

Funções do ciclo de vida

B14 aulasPRO

Controle o que acontece em cada etapa do ciclo de vida de um componente Svelte com onMount, onDestroy, beforeUpdate, afterUpdate e o utilit…

09

Armazenamentos do Svelte: graváveis e legíveis

B14 aulasPRO

Compartilhe estado reativo entre componentes usando as primitivas integradas de armazenamento do Svelte, inscreva-se nelas com a abreviação…

10

Armazenamentos derivados e personalizados

B14 aulasPRO

Componha armazenamentos Svelte derivando armazenamentos calculados de uma ou mais fontes e crie armazenamentos totalmente personalizados qu…

11

Slots e composição de componentes

B14 aulasPRO

Projete conteúdo em componentes Svelte usando slots padrão e nomeados, forneça conteúdo alternativo e verifique se os slots foram preenchid…

12

Transições CSS

B14 aulasPRO

Anime elementos ao entrarem e saírem do DOM com as diretivas de transição integradas do Svelte, configure duração e suavização e trate tran…

13

Animações CSS

B14 aulasPRO

Vá além das transições com a diretiva animate do Svelte para reordenar listas, criar animações de mola baseadas em física e interpolar valo…

14

Roteamento e páginas do SvelteKit

B14 aulasPRO

Navegue pelo sistema de roteamento baseado em arquivos do SvelteKit, crie rotas dinâmicas com parâmetros e use arquivos de layout para comp…

15

Carregamento de dados no SvelteKit

B14 aulasPRO

Carregue dados para suas páginas usando as funções load do SvelteKit, trate erros com elegância e execute lógica exclusiva do servidor em +…

16

API de contexto

B14 aulasPRO

Passe dados profundamente pela árvore de componentes sem encadeamento de props usando a API de contexto do Svelte e entenda quando preferir…

17

SEO e metadados no SvelteKit

B14 aulasPRO

Melhore a capacidade de descoberta definindo meta tags dinâmicas, cartões OpenGraph, dados estruturados JSON-LD e gerenciando URLs canônica…

18

Ações de formulário do SvelteKit

B24 aulasPRO

Trate envios de formulários HTML no servidor com as ações de formulário do SvelteKit, aprimore-os progressivamente com JavaScript e retorne…

19

Rotas de API do SvelteKit

B24 aulasPRO

Crie endpoints de API RESTful e de transmissão no SvelteKit usando arquivos +server.js, trate vários métodos HTTP e retorne respostas JSON…

20

Hooks do SvelteKit

B24 aulasPRO

Intercepte e transforme cada solicitação com os hooks de servidor do SvelteKit, registre erros centralmente e componha vários hooks com o u…

21

Tratamento de erros no SvelteKit

B24 aulasPRO

Ofereça ótimas experiências aos usuários quando algo der errado personalizando páginas de erro, distinguindo erros esperados de inesperados…

22

Reatividade avançada do Svelte

B24 aulasPRO

Aprofunde sua compreensão do sistema reativo do Svelte: ordenação de declarações reativas, quando usar armazenamentos em vez de estado loca…

23

Ações do Svelte

B24 aulasPRO

Anexe comportamentos imperativos reutilizáveis a elementos do DOM com ações do Svelte, trate parâmetros e atualizações e crie ações prática…

24

Transições e animações personalizadas

B24 aulasPRO

Escreva funções de transição personalizadas do Svelte do zero, controle parâmetros de duração e crie transições de transformação e transiçõ…

25

Movimento no Svelte

B24 aulasPRO

Anime valores ao longo do tempo com os armazenamentos de movimento spring e tweened do Svelte, use funções de interpolação e aplique movime…

26

Layouts avançados do SvelteKit

B24 aulasPRO

Domine o sistema avançado de layouts do SvelteKit: agrupe layouts, substitua-os no nível das rotas, saia dos layouts e compartilhe dados pe…

27

Padrões de autenticação no SvelteKit

B24 aulasPRO

Implemente autenticação no SvelteKit usando sessões baseadas em cookies, JWTs seguros, proteção de rotas em hooks e OAuth com Lucia Auth.

28

Adaptadores e implantação do SvelteKit

B24 aulasPRO

Implante aplicações SvelteKit em qualquer lugar usando o adaptador adequado: sites estáticos, servidores Node.js, Vercel e Cloudflare Worke…

29

Svelte 5: introdução às runas

B24 aulasPRO

Descubra o sistema de runas do Svelte 5, que substitui a magia do compilador por primitivas reativas explícitas para estado, valores deriva…

30

Svelte 5: props e snippets

B24 aulasPRO

Use $props() para props tipadas de componentes e a nova sintaxe de snippets com {#snippet} e {@render} para uma composição avançada de cont…

31

SSR e pré-renderização no SvelteKit

B24 aulasPRO

Controle a estratégia de renderização por rota no SvelteKit: escolha entre carregamento universal e exclusivo do servidor, pré-renderize pá…

32

Testes do Svelte: testes unitários

B24 aulasPRO

Escreva testes unitários confiáveis para componentes e armazenamentos Svelte com Vitest e @testing-library/svelte, abrangendo renderização,…

33

Testes do Svelte: ponta a ponta com Playwright

B24 aulasPRO

Escreva testes de ponta a ponta para aplicações SvelteKit usando Playwright, abrangendo navegação entre páginas, interações com formulários…

34

Integração de bibliotecas de terceiros

B24 aulasPRO

Adicione Tailwind CSS, visualizações de dados com D3.js, mapas Leaflet e editores de rich text a projetos SvelteKit usando ações do Svelte…

35

Segurança do SvelteKit

B24 aulasPRO

Proteja sua aplicação SvelteKit contra ataques CSRF, XSS e de injeção, gerencie variáveis de ambiente com segurança e limite a taxa das rot…

36

Svelte 5: runas avançadas

C14 aulasPRO

Explore padrões avançados de runas do Svelte 5, incluindo estado bruto, derivações complexas, limpeza manual de efeitos e migração do Svelt…

37

Padrões avançados de componentes

C14 aulasPRO

Crie APIs sofisticadas e reutilizáveis de componentes Svelte usando props de renderização com snippets, componentes de ordem superior, o pa…

38

Transmissão no SvelteKit

C14 aulasPRO

Ofereça carregamentos iniciais rápidos transmitindo promessas das funções load, adiando dados lentos e transmitindo a partir de rotas de AP…

39

Desempenho do SvelteKit

C14 aulasPRO

Otimize o desempenho de aplicações SvelteKit com divisão automática de código, tratamento aprimorado de imagens, carregamento sob demanda e…

40

Gerenciamento de estado em grande escala

C14 aulasPRO

Estruture aplicações Svelte grandes com padrões de armazenamentos por módulos de recursos, barramentos de eventos, atualizações otimistas d…

41

Criando um aplicativo SvelteKit full-stack

C14 aulasPRO

Combine tudo o que aprendeu para criar um aplicativo full-stack pronto para produção, com autenticação, banco de dados por meio do Drizzle…

Perguntas Frequentes

Perguntas Frequentes

O curso Sveltejs Academy é gratuito?

Sim. Você pode começar o curso Sveltejs Academy gratuitamente e completar suas aulas interativas sem custo. Uma assinatura PRO opcional desbloqueia ferramentas avançadas de IA e um certificado compartilhável.

Preciso de experiência anterior para aprender HTML?

Não. O curso começa com os fundamentos e gradualmente passa para tópicos mais avançados, então você pode começar mesmo sem experiência anterior com HTML.

Como vou aprender HTML no CoddyKit?

Você aprende fazendo. Aulas interativas curtas combinam uma explicação clara com um exercício de codificação prático que executa em tempo real, e um tutor de IA disponível 24/7 oferece ajuda personalizada sempre que você ficar preso.

Ganho um certificado ao concluir Sveltejs Academy?

Sim. Alunos PRO podem fazer um exame e ganhar um certificado de conclusão compartilhável com um código verificável para o curso Sveltejs Academy.

Posso aprender HTML no meu celular?

Sim. CoddyKit está disponível na web e como aplicativos nativos para iOS e Android, então você pode aprender HTML em qualquer dispositivo e seu progresso sincroniza entre eles.

Comece Sveltejs Academy Agora

Junte-se a milhares de alunos dominando programação com aulas potenciadas por IA.

Começar Grátis →Ver Todos os Cursos