HTMX do básico ao avançado com projetos from Udemy

Seja bem-vindo ao curso de HTMX.

Você aprenderá do básico ao avançado da biblioteca, e criará projetos completos em conjunto com outras tecnologias.

Não é necessário qualquer conhecimento prévio em HTMX, apenas em

Iniciaremos entendendo o porque utilizar HTMX, diferenças entre HTMX e SPA e criaremos nosso primeiro projeto.

Ao longo do curso você terá seções teóricas destinadas a entender todo o funcionamento do HTMX, que são:

- Conceitos fundamentais;

- Tipos de carregamento com HTMX;

- Eventos com HTMX;

O curso conta também com dois projetos, um sendo mais simples que ensina a integrar HTMX com outras tecnologias e dar o primeiro passo em um projeto profissional com a tecnologia, que é um Gerenciador de Tarefas, a stack deste projeto é: HTMX, Bootstrap, Express e Sequelize.

Já o segundo é um projeto mais robusto com autenticação, upload de arquivos e regras de negócios mais complexas. O que cria também uma imersão maior no HTMX, a stack do projeto é: HTMX, Tailwind, EJS, Express, Multer e outros recursos.

No fim do curso você estará apto a criar projetos completos utilizando HTMX; além disso, você também conseguirá dar manutenção em projetos que contam com a tecnologia.

Está pronto para aprender HTMX do básico ao avançado? Te espero no curso.

What's inside

Learning objectives

Utilizar plenamente o htmx para interações com o back-end
Requisições http com htmx
Troca de elementos e eventos do htmx

Integração do htmx com diversas tecnologias (tailwind, bootstrap, apis e mais)
Criação de projetos completos com htmx
Trabalhar com json no htmx

Utilizar plenamente o htmx para interações com o back-end
Requisições http com htmx
Troca de elementos e eventos do htmx
Integração do htmx com diversas tecnologias (tailwind, bootstrap, apis e mais)
Criação de projetos completos com htmx
Trabalhar com json no htmx

Syllabus

Introdução

Apresentação do curso

O que é HTMX?

HTMX vs SPA

Quando usar HTMX?

Sobre a Hypermedia API

Preparando o ambiente para o HTMX

Hello World com HTMX

Sobre os arquivos do curso

Arquivos do curso

Slides do curso

Networking de alunos

Link para a Comunidade Hora de Codar

Indicações de livros

Conclusão da seção

Como aprender programação mais rápido e ter sucesso na carreira

Teste para saber sua dificuldade com programação

Conceitos fundamentais

Requisição HTTP Post com HTMX

PUT e DELETE com HTMX

Gatilhos de eventos

Personalizando triggers

Filtros de click

Eventos especiais

Polling com HTMX

Indicador de progresso

Enviando dados por formulário

Confirmação para ações críticas

Upload de arquivos

Sincronizando requisições

Cancelando requisições

Carregamento com HTMX

Introdução da seção

hx-target com classe

Troca de conteúdo com hx-swap

Explorando o hx-swap

Swap com OOB

Subset da resposta

Conhecendo o hx-params e hx-vals

Trabalhando com JSON no HTMX

Lazy loading com HTMX

O que falta para você ser um Programador?

Você ainda não é Dev Júnior?

Projeto Gerenciador de Tarefas (HTMX, Bootstrap, Express, Sequelize)

Apresentação do projeto

Setup inicial

Cadastro de usuário com HTMX

Criando form de adição de tarefas

Inserindo tarefas no banco

Exibindo tarefas

Atualizando lista em tempo real

Template de tarefa

Excluindo tarefas

Alterando status da tarefa

Criando formulário de edição

Concluindo o projeto

Eventos com HTMX

Evento de carregamento de página

Eventos antes e depois do swap de conteúdo

Ação antes e depois de um request

Eventos após um erro no servidor

Interceptando requisições

Logger no HTMX

Avançando em formulários

Eventos customizados

Projeto File Sharer (HTMX, Tailwind, EJS, Express, Multer e mais)

Criando models

Criando a primeira página

Estruturando o layout

Estruturad e rotas para autenticação

Autenticação de usuário

Exibindo flash messages

Middleware de proteção de páginas

Finalizando home

Págna de administração de arquivos

Upload de arquivo

Exibindo arquivos dinamicamente

Excluindo arquivos

Exibindo mensagem de exclusão

Tela de todos os arquivos de usuários do sistema

Conclusão

Fechamento e próximos passos

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Integrates HTMX with technologies like Bootstrap, Tailwind, Express, and Sequelize, which are commonly used in web development stacks

Covers fundamental concepts, loading types, and events, providing a comprehensive understanding of HTMX functionality

Teaches how to work with JSON in HTMX, which is essential for modern web applications that rely on APIs for data exchange

Uses older versions of Bootstrap, which may require learners to adapt code to newer versions or consider alternative frameworks

Requires familiarity with HTML, CSS, and JavaScript, which may exclude absolute beginners from fully benefiting from the course

Develops skills to create and maintain complete projects using HTMX, which is valuable for professional web development roles

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 básico ao avançado com projetos with these activities:

Revisar Fundamentos de HTML e CSS

Show steps

Refrescar seus conhecimentos em HTML e CSS garante uma base sólida para entender como o HTMX manipula o DOM e interage com o front-end.

Browse courses on HTML

Show steps

Revisar a estrutura básica de um documento HTML.
Praticar a estilização de elementos com CSS.
Explorar seletores CSS e o modelo de caixa (box model).

Ler 'HTMX Up and Running'

Show steps

Complementar o aprendizado com um livro especializado em HTMX, aprofundando os conceitos e técnicas apresentadas no curso.

View Putting Knowledge to Work on Amazon

Show steps

Ler os capítulos iniciais sobre os fundamentos do HTMX.
Experimentar os exemplos de código fornecidos no livro.
Anotar dúvidas e procurar esclarecimentos em fóruns ou comunidades online.

Praticar Requisições HTTP com HTMX

Show steps

Reforçar o entendimento de como o HTMX realiza requisições HTTP, praticando diferentes tipos de requisições e manipulações de dados.

Browse courses on HTMX

Show steps

Criar um servidor simples para receber requisições HTTP.
Implementar diferentes tipos de requisições (GET, POST, PUT, DELETE) usando HTMX.
Manipular os dados recebidos no servidor e retornar respostas adequadas.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Criar um Pequeno Projeto de Lista de Tarefas com HTMX

Show steps

Aplicar os conhecimentos adquiridos no curso criando um projeto prático que envolva a manipulação de elementos HTML e a interação com o servidor.

Show steps

Definir a estrutura HTML básica da lista de tarefas.
Implementar a funcionalidade de adicionar novas tarefas usando HTMX.
Permitir a edição e exclusão de tarefas existentes.
Adicionar persistência de dados usando armazenamento local ou um backend simples.

Escrever um Artigo sobre um Caso de Uso do HTMX

Show steps

Consolidar o aprendizado escrevendo sobre um caso de uso específico do HTMX, explicando os benefícios e desafios da sua aplicação.

Show steps

Escolher um caso de uso interessante do HTMX.
Pesquisar e reunir informações relevantes sobre o caso de uso.
Escrever um artigo claro e conciso explicando o caso de uso e seus benefícios.
Publicar o artigo em um blog pessoal ou plataforma de artigos online.

Consultar 'Hypermedia Systems'

Show steps

Expandir o conhecimento sobre hipermídia, entendendo os princípios teóricos que fundamentam o HTMX.

View Putting Knowledge to Work on Amazon

Show steps

Ler a introdução e os capítulos que abordam os princípios de hipermídia.
Relacionar os conceitos apresentados no livro com as funcionalidades do HTMX.
Refletir sobre como os princípios de hipermídia podem ser aplicados em projetos web modernos.

Contribuir para um Projeto Open Source que Utilize HTMX

Show steps

Aprofundar o conhecimento e ganhar experiência prática contribuindo para um projeto open source que utilize HTMX.

Show steps

Encontrar um projeto open source que utilize HTMX e que seja do seu interesse.
Analisar o código do projeto e identificar áreas onde você pode contribuir.
Contribuir com correções de bugs, novas funcionalidades ou documentação.
Submeter suas contribuições e participar da comunidade do projeto.

Career center

Learners who complete HTMX do básico ao avançado com projetos will develop knowledge and skills that may be useful to these careers:

Desenvolvedor Front-End

Um desenvolvedor front-end é responsável por construir a interface do usuário de websites e aplicações web, e este curso de HTMX é muito pertinente para essa função. Especificamente, este curso que aborda HTMX do básico ao avançado, ensinando a criar interações dinâmicas com o back-end, ajudará um futuro desenvolvedor front-end a aprimorar suas habilidades. O conhecimento em requisições HTTP, tratamento de eventos e a integração com diversas tecnologias, como as abordadas neste curso, são essenciais para um desenvolvedor front-end. Os projetos práticos desenvolvidos no curso, como o gerenciador de tarefas e o compartilhador de arquivos, oferecem experiência com HTMX em cenários reais, preparando o profissional para o mercado de trabalho.

See salaries and explore the career path for Desenvolvedor Front-End

Desenvolvedor Web

O trabalho de um desenvolvedor web engloba a criação e manutenção de websites e aplicações web, tanto no front-end quanto no back-end, tornando o aprendizado de HTMX crucial. Este curso, que se aprofunda em HTMX, desde os conceitos fundamentais até a criação de projetos completos, ajuda um aspirante a desenvolvedor web a dominar as interações com o back-end e a manipulação de elementos da página. A capacidade de trabalhar com requisições HTTP, eventos, JSON e integrar HTMX com outras tecnologias, como visto no curso, são habilidades essenciais para um desenvolvedor web. Os projetos práticos do curso, que incluem gerenciamento de tarefas e compartilhamento de arquivos, oferecem uma experiência completa no desenvolvimento web, preparando para os desafios da profissão.

See salaries and explore the career path for Desenvolvedor Web

Instrutor de Desenvolvimento Web

Um instrutor de desenvolvimento web ensina os fundamentos e as práticas de desenvolvimento web para aspirantes e profissionais da área. Este curso de HTMX é relevante para um instrutor, pois fornece um conhecimento profundo sobre uma tecnologia específica usada no desenvolvimento web front-end. O instrutor pode usar este conhecimento para criar materiais de ensino e projetos práticos para seus alunos. A experiência com requisições HTTP, tratamento de eventos e a integração com outras tecnologias, como abordadas no curso, são indispensáveis para um instrutor. O conteúdo deste curso, com seus projetos práticos, pode fornecer material útil para um instrutor de desenvolvimento web.

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

Engenheiro de Software

Um engenheiro de software projeta, desenvolve e mantém sistemas de software, incluindo aplicações web, e este curso de HTMX pode ser útil. Este curso ensina a construir interfaces dinâmicas que interagem com o back-end, o que é importante no papel de um engenheiro de software. Os engenheiros de software usam essas habilidades para implementar funcionalidades complexas e garantir a qualidade do software. As habilidades de requisições HTTP, eventos e integração com outras tecnologias, abordadas neste curso, são essenciais para o desenvolvimento web. Além disso, os projetos práticos, como o gerenciador de tarefas e o compartilhador de arquivos, oferecem uma experiência completa no ciclo de vida de desenvolvimento de software.

See salaries and explore the career path for Engenheiro de Software

Consultor de Desenvolvimento Web

Um consultor de desenvolvimento web auxilia empresas na criação e otimização de seus websites e aplicações web, tornando este curso de HTMX relevante. Este curso, ao fornecer uma compreensão profunda do HTMX, desde os conceitos fundamentais até a criação de projetos completos, capacita o consultor a recomendar a melhor abordagem para seus clientes. O consultor pode usar o conhecimento sobre requisições HTTP, tratamento de eventos e integração com outras tecnologias, como visto no curso, para orientar suas decisões. Os projetos práticos podem oferecer um portfólio de exemplos para apresentar aos clientes.

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

Especialista em Integração de Sistemas

Um especialista em integração de sistemas é responsável por conectar diferentes sistemas de software para que eles funcionem juntos. Este curso de HTMX pode ser útil na integração de aplicações web com outros sistemas. Este curso pode ajudar o especialista em integração a entender como HTMX pode ser usado para criar interfaces web que se comunicam com diferentes APIs e bancos de dados. O conhecimento em requisições HTTP e a integração com outras tecnologias, como abordada no curso, são essenciais neste papel. Além disso, os projetos práticos, como o gerenciador de tarefas e o compartilhador de arquivos, demonstram como integrar HTMX com outros componentes de software, que é a competência central do especialista em integração.

See salaries and explore the career path for Especialista em Integração de Sistemas

Arquiteto de Software

Um arquiteto de software define a estrutura e o design de sistemas de software, e a compreensão de HTMX pode ser útil para esse papel. Ele usa essas habilidades para planejar a arquitetura de aplicações web, garantindo que elas sejam escaláveis e fáceis de manter. Este curso pode ajudá-lo a entender como HTMX pode ser integrado à arquitetura de software e como pode melhorar a comunicação entre o front-end e o back-end. O conhecimento em requisições HTTP, eventos e a integração com tecnologias diversas, abordado neste curso, contribui para o desenvolvimento de uma arquitetura robusta e eficiente. Os projetos práticos do curso fornecem uma base para entender a aplicação de sistemas de software complexos.

See salaries and explore the career path for Arquiteto de Software

Analista de Sistemas

Um analista de sistemas trabalha para melhorar os sistemas de software de uma empresa, incluindo aplicações web. Este curso de HTMX pode ser útil para um analista que precisa entender o funcionamento de aplicações web e a interação entre o front-end e o back-end. As habilidades adquiridas neste curso podem ajudar o analista a identificar gargalos e oportunidades de melhorias em aplicações web. O conhecimento sobre requisições HTTP e a integração com diversas tecnologias, abordado no curso, são cruciais para analisar problemas e propor soluções eficazes. Os projetos práticos do curso fornecem uma base sólida para entender o desenvolvimento e o funcionamento de sistemas web.

See salaries and explore the career path for Analista de Sistemas

Desenvolvedor Back-End

Um desenvolvedor back-end se concentra na lógica do servidor, bancos de dados e APIs, e o conhecimento de HTMX pode ser útil para entender como o front-end interage com o back-end. Este curso, que se aprofunda em HTMX com foco no front-end, auxilia um desenvolvedor back-end a entender melhor como as ações do usuário e as requisições são processadas. O conhecimento em requisições HTTP, que é fundamental também no back-end, e a integração com outras tecnologias, como abordado no curso, ajudam o desenvolvedor back-end a criar APIs mais eficazes e eficientes. Os projetos do curso, um gerenciador de tarefas e um compartilhador de arquivos, fornecem um contexto prático de como o front-end interage com o back-end.

See salaries and explore the career path for Desenvolvedor Back-End

Consultor de Tecnología

Um consultor de tecnologia assessora empresas na adoção de tecnologias e otimização de processos. Este curso de HTMX pode ser útil ao familiarizar o consultor com as capacidades de HTMX na construção de aplicações web. O consultor usa essa compreensão para recomendar soluções adequadas às necessidades de seus clientes. Este curso pode ajudar o consultor a entender os benefícios do HTMX na criação de aplicações web dinâmicas e interativas, e como ele pode ser integrado com outras tecnologias. O conhecimento em requisições HTTP e a integração com diversas tecnologias podem ajudar o consultor a tomar decisões informadas sobre a infraestrutura de TI de seus clientes. Os projetos práticos do curso demonstram como o HTMX funciona na prática.

See salaries and explore the career path for Consultor de Tecnología

Analista de Qualidade de Software

Um analista de qualidade de software testa e verifica a qualidade de softwares, incluindo aplicações web. Este curso de HTMX pode ser útil ao dar ao analista uma compreensão do funcionamento das aplicações web. Ao entender como a tecnologia HTMX funciona, e como o front-end interage com o back-end, o analista pode criar casos de testes mais eficazes. O conhecimento em requisições HTTP e o tratamento de eventos podem auxiliar na identificação de erros e vulnerabilidades. Este curso, com seus projetos práticos, pode dar ao analista um entendimento maior sobre o funcionamento de aplicações web. É vantajoso que o analista esteja familiarizado com o curso.

See salaries and explore the career path for Analista de Qualidade de Software

Gerente de Projetos de TI

Um gerente de projetos de TI é responsável por planejar, executar e coordenar projetos de tecnologia, incluindo o desenvolvimento de aplicações web. Embora este curso de HTMX seja mais focado em desenvolvimento, ele pode ser útil para que um gerente de projetos de TI compreenda as nuances e desafios do desenvolvimento web. O conhecimento em tecnologias como HTMX, requisições HTTP, tratamento de eventos e integração com outras tecnologias, pode ajudar o gerente de projetos a garantir que as equipes de desenvolvimento sigam os objetivos do projeto. Os projetos práticos do curso podem dar ao gerente de projetos uma ideia do tempo e dos recursos necessários para projetos semelhantes.

See salaries and explore the career path for Gerente de Projetos de TI

Especialista em Experiência do Usuário

Um especialista em experiência do usuário se concentra em tornar a interação do usuário com um software ou aplicação mais agradável e eficiente. Este curso de HTMX pode ser útil para que um profissional da área compreenda como as interfaces web são construídas e como elas interagem com o back-end. Este curso, ao abordar requisições HTTP e tratamento de eventos, ajudará um especialista em experiência do usuário a otimizar o fluxo de interações com o usuário. O especialista também pode usar esse conhecimento para tomar decisões sobre o design da interface. O conhecimento de tecnologias de desenvolvimento web como HTMX contribui para que o especialista em experiência do usuário aprimore projetos em geral.

See salaries and explore the career path for Especialista em Experiência do Usuário

Designer de Interface

Um designer de interface cria a aparência e o layout de um produto digital, e um entendimento de HTMX pode ser útil para projetar websites e aplicações web com interatividade. Este curso aborda a criação de interfaces dinâmicas e interativas, o que aumenta a capacidade de um designer de interface. Ao conhecer o HTMX, o designer poderá entender melhor como os elementos da interface reagem às ações do usuário e como as informações são carregadas de forma dinâmica. Este curso, ao abordar requisições HTTP e o tratamento de eventos, ajuda o designer a criar interfaces que proporcionam uma experiência de usuário mais fluida. Esse curso possibilita que um designer de interface compreenda a relação entre design e funcionalidade.

See salaries and explore the career path for Designer de Interface

Analista de Dados

Um analista de dados interpreta dados para ajudar empresas a tomar decisões, e o conhecimento em HTMX pode ser útil para apresentar dados em aplicações web. Ao entender como HTMX funciona, um analista de dados pode criar painéis e visualizações de dados que interagem dinamicamente com o usuário. Este curso pode ajudar o analista a entender como os dados podem ser carregados de maneira eficiente em aplicações web. O conhecimento em requisições HTTP e o uso de JSON, como visto no curso, são úteis para a manipulação e apresentação de dados. Este curso pode ser uma ferramenta de aprimoramento para analistas que desejam criar interfaces interativas para apresentar resultados de suas análises.

See salaries and explore the career path for Analista de Dados

HTMX do básico ao avançado com projetos

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses