HTMX Do zero ao profissional com projetos reais from Udemy

Bem-vindo(a) ao curso mais completo e prático de HTMX, onde você vai aprender a dominar essa tecnologia, desde os fundamentos básicos até a integração com tecnologias avançadas para o desenvolvimento de projetos web completos. Este curso é perfeito para quem deseja não apenas entender HTMX, mas aplicá-lo em cenários reais de desenvolvimento, construindo sites dinâmicos e sistemas web completos.

O que você vai aprender:

Dominar o HTMX: Comece do absoluto zero, entendendo como o HTMX simplifica a criação de interações ricas na web sem a necessidade de JavaScript complexo.
Projetos Práticos: Através de uma série de projetos práticos, você vai aplicar o conhecimento adquirido para construir componentes web interativos, formulários dinâmicos, requisições http com API e muito mais.
Integração Profissional com Backend: Aprenda técnicas avançadas para integrar suas aplicações HTMX com um backend profissional, garantindo escalabilidade e manutenibilidade.
Autenticação com Token JWT: Implemente sistemas de autenticação seguros usando tokens JWT, essenciais para a criação de sistemas web seguros.
Integração com TailwindCSS: Vai aprender a desenvolver projetos aplicando HTMX + tailwindcss para estilizar suas aplicações de forma eficiente com TailwindCSS, criando interfaces modernas e responsivas com facilidade.

Para quem é este curso:

Este curso é ideal para qualquer pessoa interessada em desenvolvimento web, evoluir sua carreira com o HTMX que está crescendo cada vez mais no mercado. Se você quer construir sites e sistemas web reativos e profissionais com o mínimo de esforço e máxima eficácia, este curso é para você.

Não perca a oportunidade de aprender HTMX com um curso que coloca a prática em primeiro lugar. Construa uma base sólida e avance para criar projetos web completos e profissionais com HTMX, Node.js, Express, Tailwind

Vejo você aqui dentro da turma.

What's inside

Learning objectives

Dominar do zero o htmx
Criar sites, sistemas web completos com htmx

Dominar ciclo de vida, requisições http, manipular interatividade com htmx
Usa o htmx para frontend e como integrar com um backend completo

Dominar do zero o htmx
Criar sites, sistemas web completos com htmx
Dominar ciclo de vida, requisições http, manipular interatividade com htmx
Usa o htmx para frontend e como integrar com um backend completo

Syllabus

Começando sua jornada

O que é o HTMX

Configurando ambiente

Conhecendo como funciona o HTMX

Conhecendo HTMX

Conhecendo hx-get e target

Conhecendo hx-trigger

Criando e configurando express

Consumindo api com hx-get

Criando evento loading

Revisando aprendizado

Conhecendo swap

Evoluindo hx-trigger once e delay

Evento trigger from

Eventos especiais

Recado importante

Avançando com HTMX

Aplicando hx-vals em requisições

Abortando requisições

Manipulando json via client

Manipulando eventos carregamento

Interceptando erros

Interceptando requisições

Manipulando formulários

Enviando requisições com hx-post

Conhecendo hx-put

Conhecendo hx-delete e aplicando select

Criando select em cascata

Criando evento input

Projeto DevClientes

Conhecendo projeto

Criando projeto

Configurando tailwindcss

Configurando banco de dados

Criando formulários

Cadastrando no banco de dados

Melhorando efeito toast

Listando funcionarios

Ajustando dados ao cadastrar

Deletando funcionario

Editar cliente

Salvando alterações

Criando pesquisa em realtime

Projeto sistema links

Configurando views

Configurando sequelize orm

Criando rota register

Criando formulário login

Gerando token JWT

Redirecionando pagina logado

Protegendo rota admin

Rota login

Logout do usuário

Formulário cadastrar links

Cadastrando link na api

Buscando dados do banco

Deletando do banco

Criando alertas de erro

Criando página home

Criando username de cada usuário

Página link personalizada

Finalizando projeto

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Focuses on HTMX, a technology that simplifies web interactions without complex JavaScript, which is beneficial for developers aiming for efficient coding practices

Integrates HTMX with TailwindCSS, which allows developers to efficiently style applications with modern and responsive interfaces

Covers authentication using JWT tokens, which is essential for creating secure web systems and managing user access effectively

Requires prior knowledge of backend development to integrate HTMX applications with a professional backend, which may require additional learning for frontend-focused developers

Emphasizes practical projects, including building interactive web components and dynamic forms, which provides hands-on experience for immediate application

Teaches integration with Node.js and Express, which are valuable technologies for building scalable and maintainable web applications

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in HTMX Do zero ao profissional com projetos reais with these activities:

Revisar Fundamentos de HTML, CSS e JavaScript

Show steps

Refresque seus conhecimentos básicos de HTML, CSS e JavaScript para entender melhor como o HTMX simplifica o desenvolvimento web.

Browse courses on HTML

Show steps

Revise a estrutura básica de um documento HTML.
Relembre os principais seletores e propriedades do CSS.
Pratique a manipulação do DOM com JavaScript.

Referência: 'Tailwind CSS: Official Documentation'

Show steps

Consulte a documentação oficial do Tailwind CSS para aprender a estilizar suas aplicações HTMX de forma eficiente.

View Putting Knowledge to Work on Amazon

Show steps

Explore as diferentes classes utilitárias do Tailwind CSS.
Aprenda a personalizar a configuração do Tailwind CSS.
Aplique as classes utilitárias aos seus componentes HTMX.

Leitura: 'HTMX - Web Development Done Right'

Show steps

Aprofunde seus conhecimentos sobre HTMX com um livro que explora seus conceitos e aplicações em detalhes.

View Putting Knowledge to Work on Amazon

Show steps

Leia os capítulos introdutórios sobre a filosofia do HTMX.
Analise os exemplos de código e experimente implementá-los.
Reflita sobre como os conceitos do livro se aplicam aos projetos do curso.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Praticar a criação de componentes reutilizáveis com HTMX

Show steps

Desenvolva vários componentes web reutilizáveis com HTMX, como botões, formulários e modais, para aprimorar suas habilidades de design e desenvolvimento.

Show steps

Identifique componentes comuns em interfaces web.
Crie templates HTMX para cada componente.
Utilize atributos HTMX para adicionar interatividade.
Teste e refine os componentes para garantir a reutilização.

Projeto: Criar um CRUD simples com HTMX e um Backend em Node.js

Show steps

Aplique seus conhecimentos de HTMX e Node.js para construir um sistema CRUD completo, reforçando a integração entre frontend e backend.

Show steps

Configure um servidor Node.js com Express.
Crie as rotas da API para as operações CRUD.
Implemente a interface do usuário com HTMX para interagir com a API.
Adicione validação de dados e tratamento de erros.

Criar um tutorial em vídeo sobre um tópico específico de HTMX

Show steps

Grave um vídeo explicando um conceito específico do HTMX, como hx-get, hx-post ou a integração com TailwindCSS, para consolidar seu aprendizado e compartilhar conhecimento.

Show steps

Escolha um tópico específico do HTMX para abordar.
Prepare um roteiro com exemplos práticos e explicações claras.
Grave o vídeo e edite-o para garantir a qualidade.
Publique o vídeo em uma plataforma como YouTube ou Vimeo.

Contribuir para um projeto open source que usa HTMX

Show steps

Encontre um projeto open source que utilize HTMX e contribua com código, documentação ou testes para aprimorar suas habilidades e colaborar com a comunidade.

Show steps

Pesquise projetos open source que utilizam HTMX.
Identifique um problema ou funcionalidade que você possa contribuir.
Crie um pull request com suas alterações.
Responda aos comentários e revise seu código.

Career center

Learners who complete HTMX Do zero ao profissional com projetos reais will develop knowledge and skills that may be useful to these careers:

Desenvolvedor Web Frontend

Um Desenvolvedor Web Frontend cria a interface com a qual os usuários interagem, e o domínio de HTMX é crucial para desenvolver interfaces dinâmicas e reativas sem a complexidade do JavaScript tradicional. Este curso ensina a usar HTMX para construir componentes web interativos e manipular requisições HTTP, habilidades essenciais para este papel. A integração com TailwindCSS, também abordada no curso, permite que o profissional crie interfaces modernas, responsivas e estilizadas de maneira eficiente, essencial em um fluxo de trabalho de desenvolvimento moderno. Este curso, com seu foco em projetos práticos, te prepara para o mundo real de desenvolvimento web front-end.

See salaries and explore the career path for Desenvolvedor Web Frontend

Desenvolvedor Web Full Stack

Um Desenvolvedor Web Full Stack trabalha tanto na interface do usuário quanto na lógica do servidor e este curso oferece uma visão valiosa de como construir páginas da web com HTMX, e como integrar isso com um backend. O curso abrange desde os fundamentos do HTMX até a criação de sistemas de autenticação usando JWTs, essencial para aplicações full stack. Além disso, a integração com Node.js e Express, juntamente com a criação de APIs, são habilidades vitais para qualquer desenvolvedor full stack. Ao dominar HTMX, você pode criar interfaces dinâmicas, sem excessiva dependência de scripts do lado do cliente, o que é uma vantagem para um desenvolvedor full stack.

See salaries and explore the career path for Desenvolvedor Web Full Stack

Engenheiro de Software

Engenheiros de Software são responsáveis por projetar, desenvolver e manter sistemas de software, e dominar HTMX para construção de interface web pode ser altamente relevante. Este curso oferece uma base sólida em como HTMX simplifica a construção de interfaces ricas e interativas, facilitando o desenvolvimento de aplicações web mais eficientes. O conhecimento sobre requisições HTTP, manipulação de formulários e a integração com o backend, todos abordados no curso, são essenciais para um engenheiro de software. A capacidade de trabalhar com projetos práticos e aplicar HTMX em cenários reais permite que você desenvolva um portfólio relevante e um entendimento prático de engenharia de software voltada para web.

See salaries and explore the career path for Engenheiro de Software

Especialista em Aplicações Web

Um Especialista em Aplicações Web precisa ter conhecimento de todas as partes do ciclo de desenvolvimento web; este curso oferece um profundo conhecimento sobre como HTMX pode ser usado para construir aplicações web dinâmicas e interativas, sem a necessidade de um JavaScript muito complexo. O curso não só ensina os fundamentos do HTMX, mas também como integrá-lo com um backend profissional, incluindo autenticação JWT, o que é crucial para aplicações web seguras. Como especialista em aplicações web, este curso irá te ajudar a aprimorar suas habilidades, expandindo sua visão de como construir melhores produtos web.

See salaries and explore the career path for Especialista em Aplicações Web

Consultor de Tecnologia Web

Consultores de tecnologia web orientam empresas sobre como construir sistemas web, e o conhecimento de HTMX permite recomendar soluções que podem simplificar o desenvolvimento de interfaces web dinâmicas, sem recorrer a frameworks JavaScript mais pesados. Este curso te proporciona uma compreensão prática de como construir aplicações web do zero até a implantação, com HTMX, Node.js, Express e TailwindCSS, que são tecnologias frequentemente usadas em projetos modernos. Ao entender o HTMX, um consultor pode fornecer recomendações mais informadas e eficazes para seus clientes, otimizando o desenvolvimento de seus sistemas web.

See salaries and explore the career path for Consultor de Tecnologia Web

Arquiteto de Software

Arquitetos de Software projetam a estrutura de sistemas complexos. Este curso pode ser útil para entender como HTMX simplifica a construção de interfaces web, sem necessidade de JS complexo. Além disso, este curso aborda a integração com backend, a criação de autenticação com JWT, e a integração com TailwindCSS, componentes importantes para um arquiteto de software ao projetar uma aplicação. O conhecimento prático adquirido através de projetos reais neste curso pode ajudar na tomada de decisões de arquitetura, ao escolher tecnologias para diferentes projetos.

See salaries and explore the career path for Arquiteto de Software

Desenvolvedor de APIs

Um Desenvolvedor de APIs cria e mantém as interfaces que permitem que diferentes softwares se comuniquem. Embora este curso se concentre mais no frontend com HTMX, ele abrange a integração com o backend usando Node.js e Express, bem como a criação de APIs. É possível aprender o fluxo das requisições HTTP e como HTMX faz chamadas para um backend, o que é fundamental para um desenvolvedor de API. A familiaridade com o envio de dados para o backend, a manipulação de respostas e a autenticação com JWTs contribuem para um conhecimento que pode ser relevante para construção de uma API moderna.

See salaries and explore the career path for Desenvolvedor de APIs

Professor de Desenvolvimento Web

Um Professor de Desenvolvimento Web precisa ter conhecimento profundo sobre tecnologias web. Este curso cobre HTMX do zero até projetos completos, então ele poderia ser um material relevante para um professor ao criar aulas e projetos práticos para seus alunos. A capacidade de explicar como HTMX simplifica a criação de interações ricas, como usar autenticação JWT e como integrar HTMX com um backend são habilidades valiosas para um professor de desenvolvimento web. Este curso pode ajudar o professor a se atualizar e oferecer uma abordagem moderna para seus alunos.

See salaries and explore the career path for Professor de Desenvolvimento Web

Analista de Sistemas

Um Analista de Sistemas avalia e melhora sistemas de informação, e para isso precisa compreender como os sistemas funcionam do ponto de vista técnico. Este curso ensina como construir aplicações web com HTMX, desde a construção da interface do usuário até a integração com o backend. Ao analisar um sistema, o analista pode usar o conhecimento que este curso traz sobre requisições HTTP, manipulação de dados, e autenticação para entender o fluxo de dados e a estrutura do software. Este curso pode ser útil para analisar o design e o funcionamento de aplicações web.

See salaries and explore the career path for Analista de Sistemas

Designer de Interface de Usuário

Um Designer de Interface de Usuário projeta como os usuários interagem com aplicações web. O curso oferece conhecimento sobre como HTMX cria interfaces dinâmicas e interativas. A integração com TailwindCSS também ajuda a criar interfaces responsivas e modernas; aprender como HTMX e CSS interagem pode trazer uma vantagem a um designer de interface que deseja entender a construção real de um produto web. Conhecer as limitações e capacidades do HTMX pode ajudar um designer a fazer designs mais pragmáticos e eficientes.

See salaries and explore the career path for Designer de Interface de Usuário

Gerente de Produto Digital

Um Gerente de Produto Digital precisa entender como os produtos digitais funcionam, incluindo o aspecto técnico. Embora este curso seja focado em desenvolvimento web com HTMX, ele pode proporcionar uma compreensão das tecnologias usadas no desenvolvimento de aplicações web. O gerente de produto pode usar este conhecimento para se comunicar melhor com equipes de desenvolvimento e tomar decisões mais informadas sobre as funcionalidades e o design do produto. Este curso pode ser útil para entender melhor o ciclo de vida do desenvolvimento web.

See salaries and explore the career path for Gerente de Produto Digital

Testador de Software

Testadores de Software garantem a qualidade das aplicações, e o curso oferece conhecimento sobre como HTMX é usado para criar interfaces web. O participante do curso ganha experiência prática com projetos web e o teste de interações, formulários e requisições HTTP. A familiaridade com o ciclo de vida do desenvolvimento web e dos componentes de uma aplicação, pode ajudar testadores a entender melhor como a aplicação funciona para realizar testes mais profundos e eficazes. Este conhecimento pode ser um complemento valioso em uma carreira de teste de software.

See salaries and explore the career path for Testador de Software

Analista de negocios

Um Analista de Negócios avalia e propõe melhorias para processos de negócios, e este curso pode ser útil para compreender a implementação de processos automatizados. O curso oferece uma visão prática de como sistemas web são desenvolvidos e como interagem com dados, e este conhecimento técnico pode trazer maior confiança na análise de processos digitais. Entender o ciclo de desenvolvimento web pode ajudar o analista de negócios a entender o tempo de projeto de certos processos e como a automação pode ser implementada por meio de tais sistemas.

See salaries and explore the career path for Analista de negocios

Administrador de Banco de Dados

Um Administrador de Banco de Dados gerencia a infraestrutura de dados. Embora este curso seja focado em desenvolvimento web, ele envolve a integração com um banco de dados usando Sequelize ORM. Ao entender como os dados são manipulados e acessados pela aplicação usando HTMX, um administrador pode ter um melhor entendimento do ciclo de desenvolvimento web. Este curso pode ser um complemento interessante, pois um administrador de banco de dados pode precisar entender diferentes tecnologias de interface, e essa pode ser uma delas.

See salaries and explore the career path for Administrador de Banco de Dados

Escritor Técnico

Um Escritor Técnico cria documentações e manuais sobre produtos de software. Este curso oferece um conhecimento prático sobre como HTMX é usado para construir interfaces web, e como interage com APIs. Este conhecimento, junto com a experiência em projetos práticos, pode ser útil para um escritor técnico que precisa detalhar o funcionamento de aplicações web. A experiência também permite a compreensão do fluxo de desenvolvimento, permitindo que o escritor explique componentes, requisições e autenticação com mais profundidade.

See salaries and explore the career path for Escritor Técnico

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in HTMX Do zero ao profissional com projetos reais.

Putting Knowledge to Work

Save

Este livro oferece uma visão aprofundada do HTMX, explorando seus princípios e melhores práticas. Ele complementa o curso, fornecendo exemplos práticos e estudos de caso que ilustram o poder do HTMX no desenvolvimento web moderno. É uma leitura valiosa para quem busca dominar o HTMX e construir aplicações web eficientes e escaláveis. Este livro é útil como leitura adicional para expandir o conhecimento.

Putting Knowledge to Work

Paperback

Check price

Putting Knowledge to Work

Kindle Edition

Check price

HTMX Do zero ao profissional com projetos reais

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses