Componentes Web personalizados e Stencil.js: Crie elementos HTML reutilizáveis — PickAClass
3.7 (7) ⏱ 3 h 📚 30 aulas

Componentes Web personalizados e Stencil.js: Crie elementos HTML reutilizáveis

Crie tags HTML personalizadas, reutilizáveis e independentes de plataforma usando APIs de navegador nativas e Stencil.js para agilizar seu fluxo de trabalho de desenvolvimento da Web em qualquer estrutura moderna.

  • 💬 Instrutor de IA
    Pergunte sobre qualquer aula e receba uma resposta clara na hora, quando quiser.
  • 🕐 Comece quando quiser
    Sem horários nem prazos: aprenda no seu ritmo, quando quiser.
  • 🌐 Em português
    Aulas, tarefas e certificado: tudo totalmente no seu idioma.

Sobre este curso

As tags HTML padrão são altamente funcionais, mas os layouts da Web modernos geralmente exigem elementos de interface especializados, como guias personalizadas, modais ou gavetas laterais que não existem nativamente, tornando o código da interface do usuário altamente reutilizável em diferentes projetos e configurações. Neste curso baseado em texto, você fará a transição de escrever marcação padrão para projetar seus próprios elementos personalizados robustos e encapsulados.Você entenderá como aproveitar as tecnologias nativas do navegador junto com o Stencil.js para compilar componentes altamente eficientes e compatíveis com padrões que funcionam perfeitamente em JavaScript ou em qualquer estrutura importante. O que você vai aprender: - Entenda as especificações fundamentais dos componentes da Web nativos, incluindo elementos personalizados, Shadow DOM e modelos HTML. - Crie tags personalizadas totalmente encapsuladas e isoladas por estilo que não entrem em conflito com o resto do CSS do seu aplicativo. - Gerencie o estado do componente, passe dados por meio de atributos e comunique alterações usando eventos personalizados. - Implemente as melhores práticas de acessibilidade, incluindo funções ARIA e gerenciamento de foco, para garantir que seus elementos personalizados sejam utilizáveis por todos. - Aproveite o Stencil.js para acelerar o desenvolvimento com TypeScript, JSX e vinculação de dados reativos eficiente. - Integre e implante seus elementos personalizados em qualquer aplicativo ou estrutura da web moderna. Você começará explorando as definições principais e as APIs nativas que alimentam elementos personalizados antes de passar para fluxos de trabalho avançados com Stencil.js.Através de explicações claras e fragmentos de código práticos, você aprenderá a estruturar, estilizar e enviar componentes prontos para produção. Este curso é projetado para desenvolvedores e designers da web que desejam criar interfaces de usuário modulares; familiaridade básica com HTML, CSS e JavaScript introdutório é tudo o que você precisa para começar. Comece a ler hoje para dominar o futuro do desenvolvimento web modular.

O que você vai receber

  • 📜 Certificado de conclusão
    Adicione ao seu perfil do LinkedIn
  • 💬 Tutor AI pessoal
    Travou em uma aula? Pergunte ao seu tutor integrado qualquer coisa, a qualquer hora.
  • ♾️ Acesso vitalício
    Volte quando quiser, sem expirar
  • 📱 Celular ou computador
    Funciona em qualquer dispositivo
  • 💸 Reembolso em 14 dias
    Sem perguntas
  • Curto e focado
    3 h de conteúdo prático

Certificado de conclusão

Cada curso que você conclui na PickAClass emite uma credencial como esta — original, com seu próprio código, verificável por URL e detalhada sobre o que foi de fato demonstrado.

P
PickAClass
Perfil de habilidades · verificável
Documento
Certificado de Maestria
Isto certifica que
Nome Sobrenome
demonstrou com sucesso o domínio de
Componentes Web personalizados e Stencil.js: Crie elementos HTML reutilizáveis
Habilidades demonstradas
Análise de padrões comportamentais
Fundamental
1.2 h
Estruturas de arquitetura de decisão
Proficiente
1.4 h
Design de testes A/B
Proficiente
1.7 h
Redação comportamental
Avançado
1.9 h
P
PickAClass — Nome Sobrenome
Componentes Web personalizados e Stencil.js: Crie elementos HTML reutilizáveis
Página 2 de 2
Detalhe de desempenho
Resumo do curso
Aulas concluídas 14 / 14
Questões de prática 26 / 28
Tarefas enviadas 4 (méd. 4.5 / 5)
Projeto final Avaliado — 4.6 / 5
Prática total 6.2 h
Benchmark de desempenho
Posição na coorte Top 12% de 1,625
Tempo até concluir 11 dias (mediana: 22)
Pontuação de domínio 91 / 100
Pontuação das questões de prática 94%
Verificação de habilidade Trilha de habilidade verificada
Verifique esta credencial
pickaclass.com/certificates/PCC-2026-X4F7-AP19
Emitido sob os padrões acadêmicos da PickAClass. Os níveis de habilidade refletem o desempenho avaliado frente à rubrica de competências do curso. É uma credencial original desta plataforma.

Avaliações (7)

Stefan Pretorius ZA Aluno verificado
★ 4 · 25 julho 2026

Conteúdo sólido aqui. Enquanto alguns dos módulos poderiam ter sido mais detalhados, o valor geral e a aplicabilidade são altos.

Leonardo De Luca IT
★ 3 · 15 julho 2026

Conteúdo sólido e apresentado de forma clara. Eu apreciei as aplicações do mundo real mostradas.Poderia ter usado mais algumas oportunidades de prática.

Ana Silva PT Aluno verificado
★ 5 · 6 julho 2026

Estou tão feliz por ter tomado isso. A maneira como os conceitos foram divididos tornou-o super acessível.

Romain Michel MC Aluno verificado
★ 3 · 30 junho 2026

É uma introdução decente, mas poderia se beneficiar de exemplos mais diversos e um fluxo ligeiramente melhor entre os módulos.

Despina Nikolaidou GR
★ 4 · 11 junho 2026

Machine Translated Gostei muito do fluxo disso. Os exemplos estavam no local e me ajudaram a entender o material rapidamente.

Noah Johnson AU Aluno verificado
★ 4 · 8 junho 2026

Curso: Visual Studio Code Translated by Recurso fantástico! Os exemplos foram super claros e realmente ajudaram a solidificar os conceitos.

Emma Ruiz UY Aluno verificado
★ 3 · 5 junho 2026

Achei útil para uma atualização.Não tenho certeza que seria o melhor ponto de partida para um iniciante completo, tbh.

Escrever uma avaliação

Pediremos para fazer login após enviar — o rascunho fica salvo.

Outros também fizeram

Perguntas frequentes

O que preciso para fazer este curso? +

Só um celular ou computador com internet. Sem instalações nem hardware especial.

Como faço para pagar? +

Com cartão via Stripe. Não guardamos dados do cartão — o Stripe processa com segurança.

Posso pedir reembolso? +

Sim — reembolso integral em 14 dias, sem perguntas.

Por quanto tempo terei acesso? +

Para sempre. Uma vez comprado, o curso é seu para revisar quando quiser.

Vou receber um certificado? +

Sim. Ao concluir, você recebe um certificado que pode adicionar ao seu perfil do LinkedIn.

Feito para profissionais em
Tecnologia Design Finanças Marketing Saúde Educação Hotelaria Indústria