Como criar um login com HTML, CSS, JavaScript e Firebase Authentication?

Crie o formulário, valide os campos com JavaScript e use o Firebase Auth para autenticar e-mail e senha.

Como recuperar senha usando Firebase Authentication?

Use o método sendPasswordResetEmail para enviar ao usuário um e-mail de redefinição de senha.

Por que o Firestore pede um índice ao filtrar e ordenar transações?

Consultas com filtros e ordenação podem exigir um índice composto, que pode ser criado pelo link exibido no erro.

Imagem do Curso gratuito HTML, CSS, JavaScript e Firebase: Seja um FullStack developer

Curso online gratuito HTML, CSS, JavaScript e Firebase: Seja um FullStack developer

Name: HTML, CSS, JavaScript e Firebase: Seja um FullStack developer
Availability: InStock

Duração do curso online: 3 horas e 51 minutos

Novo

Crie apps web completos e vire FullStack: aprenda HTML, CSS, JavaScript e Firebase neste curso online gratuito, com projeto prático e certificação.

Neste curso gratuito, aprenda sobre

Estrutura de páginas e formulários com HTML (login, registro, home e transações)
Estilização com CSS e organização de estilos em arquivos globais e por página
Comportamento padrão de formulários e botões submit, e prevenção de eventos indesejados
Validação de formulários em JavaScript e habilitar/desabilitar botões por regras
Exibição condicional de mensagens de erro via CSS/JS e melhoria de UX
Refatoração: reduzir DOM queries com objetos/handlers e código mais reutilizável
Navegação e redirecionamento entre telas com JavaScript
Criação e reutilização de componente de loading para bloquear a tela em requisições
Autenticação com Firebase Auth: login, cadastro, logout e recuperação de senha
Persistência de sessão e auth guard para bloquear rotas de usuários não logados
Modelagem no Firestore (documentos/coleções) vs bancos relacionais
CRUD de transações no Firestore: listar, salvar, atualizar e remover documentos
Consultas no Firestore com filtros/ordenação e necessidade de índices compostos
Migração para arquitetura com camada de serviço e consumo de backend via API REST

Sobre o curso online gratuito

Quer sair do básico e construir uma aplicação web completa, do layout ao banco de dados? Neste curso online gratuito, você desenvolve na prática uma aplicação de controle de gastos usando HTML, CSS, JavaScript e Firebase, entendendo como as peças do Front-End e do Back-End se conectam para criar um produto funcional e pronto para evoluir.

Você começa estruturando páginas com HTML e ganhando ritmo na construção de interfaces, organizando estilos com CSS e aprendendo boas práticas para manter o projeto sustentável. Em seguida, entra no JavaScript para dar vida à experiência: validações, mensagens de erro, componentes reutilizáveis, navegação entre telas e regras que tornam a interface mais segura e agradável para o usuário. Ao longo do caminho, você treina raciocínio lógico e melhora a qualidade do código com refatorações, reduzindo repetição e tornando a manutenção mais simples.

Depois, o curso te leva ao mundo do Firebase, aplicando autenticação de usuários com e-mail e senha, recuperação de acesso, persistência de sessão e proteção de rotas para impedir que pessoas não autenticadas entrem em áreas restritas. Isso te dá uma base sólida para criar sistemas com login, logout e fluxos reais de uso, como os vistos em aplicações profissionais.

Com o Firestore, você aprende a tratar o banco de dados como um backend na nuvem: salvar, consultar, filtrar, ordenar, atualizar e remover registros, sempre considerando modelagem, índices e o impacto das queries no funcionamento do app. Você também trabalha com a renderização dinâmica de dados na interface, substituindo conteúdo fixo por informações reais vindas do banco, tornando a aplicação escalável e personalizável por usuário.

Para fechar com uma visão mais completa de FullStack, você entende a transição de um front acessando diretamente o banco para um cenário com API REST, aproximando o projeto de arquiteturas usadas no mercado. Ao concluir, você terá um projeto consistente no portfólio e uma base forte em Programação Front-End com integração a serviços de backend, pronta para avançar para vagas, freelas e novos produtos. Certificado disponível conforme a plataforma.

Conteúdo do curso

Aula em vídeo: HTML, CSS e Javascript - Criando uma aplicac?a?o completa de controle de gastos - #01 09m
Exercício: Qual combinação de tecnologias é usada na primeira versão da aplicação de controle de gastos?

Aula em vídeo: Pa?gina básica de Login só com HTML - #02 09m
Exercício: Ao criar um botão dentro de um formulário e definir type="submit", qual é o comportamento padrão ao clicar nele?
Aula em vídeo: Pa?gina básica de Login com CSS - #03 15m
Exercício: Qual é a forma correta de separar o CSS do HTML e manter os estilos funcionando na página?
Aula em vídeo: Validac?a?o da pa?gina de Login com Javascript - #04 11m
Exercício: Qual lógica define quando os botões Recuperar senha e Entrar devem ficar habilitados na tela de login?
Aula em vídeo: Mensagens de erro no formula?rio de Login com Javascript - #05 09m
Exercício: Qual alteração no CSS faz com que as mensagens de erro fiquem invisíveis ao carregar a página e só apareçam quando necessário?
Aula em vídeo: Refatorando a pa?gina de Login com Javascript - #06 08m
Exercício: Qual foi a principal melhoria feita ao criar um objeto para acessar os campos do formulário (ex.: email e senha) em vez de chamar document.getElementById repetidamente?
Aula em vídeo: Navegac?a?o de telas com Javascript - #07 07m
Exercício: Qual alteração em JavaScript permite redirecionar o usuário da tela de login para a tela Home ao clicar no botão?

Aula em vídeo: Introduc?a?o ao firebase authentication - #01 04m
Exercício: Qual é o principal papel do Firebase Authentication na aplicação de controle de gastos?
Aula em vídeo: Firebase Authentication com HTML, CSS e Javascript - #08 06m
Exercício: Ao usar Firebase Authentication com e-mail e senha no JavaScript, qual é a característica principal do retorno de signInWithEmailAndPassword?
Aula em vídeo: Fazendo LOGIN com HTML, CSS, Javascript e Firebase Auth - #09 04m
Exercício: Ao realizar login com Firebase Authentication em JavaScript, qual é a forma correta de tratar sucesso e erro para redirecionar para a Home ou exibir uma mensagem?
Aula em vídeo: Criando componente de Carregando (Loading) - #10 11m
Exercício: Qual abordagem permite criar e reutilizar um componente de loading que bloqueia a tela durante o login?
Aula em vídeo: Recuperação de senha com Firebase Authentication - #11 03m
Exercício: Ao implementar a recuperação de senha com Firebase Authentication, qual é o método usado para enviar o e-mail de redefinição?

Aula em vídeo: Criando a tela de Registro com HTML e CSS - #12 05m
Exercício: Por que mover a classe CSS form-field de index.css para global.css ajuda no projeto?
Aula em vídeo: Validac?a?o do formulário de Registro com Javascript - #13 11m
Exercício: Em uma tela de cadastro com validações em JavaScript, quando o botão Registrar deve ser habilitado?
Aula em vídeo: Registro de novo usua?rio com javascript - #14 05m
Exercício: Ao implementar o cadastro de usuário com Firebase Authentication, qual fluxo correto deve acontecer ao clicar no botão de registro?
Aula em vídeo: Mantendo a sessão do usua?rio logado com Firebase Auth - #15 04m
Exercício: Qual recurso do Firebase Authentication permite detectar mudanças no estado de login e redirecionar automaticamente o usuário para a página Home?
Aula em vídeo: Logout do usua?rio com firebase authentication - #16 05m
Exercício: Ao implementar o logout com Firebase Authentication, qual é a ação correta após o sucesso do signOut para retornar o usuário à tela de login?
Aula em vídeo: Impedindo usua?rios não logados de acessarem pa?ginas - #17 03m
Exercício: Qual é o objetivo do auth guard na aplicação com Firebase Authentication?

Aula em vídeo: Criando a tela de home com HTML e CSS - #18 08m
Exercício: Qual combinação de tags HTML é usada para criar uma lista ordenada de movimentações financeiras?
Aula em vídeo: Criando uma lista HTML com JAVASCRIPT - #19 09m
Exercício: Qual foi o principal objetivo ao substituir as transações fixas no HTML por uma renderização via JavaScript?

Aula em vídeo: Introduc?ao ao banco de dados Firestore - #2 06m
Exercício: No Firestore, qual é a principal diferença em relação a um banco de dados relacional?
Aula em vídeo: FIRESTORE como BACKEND e consulta de dados com JAVASCRIPT - #20 04m
Exercício: Ao consultar a coleção transactions no Firestore, qual atributo do snapshot contém o array de documentos retornados?
Aula em vídeo: Criando Queries e i?ndices com o banco de dados Firestore - #21 05m
Exercício: Ao filtrar transações do usuário logado e ordenar por data no Firestore, qual é o motivo do erro que pode aparecer e como resolver?

Aula em vídeo: Criando a tela de transações com HTML e CSS - #22 09m
Aula em vídeo: Validac?ao com javascript do formula?rio de criar transac?ao - #23 09m
Exercício: Qual condição deve ser verdadeira para o botão Salvar ser habilitado no formulário de transação?
Aula em vídeo: Salvar transac?ao no banco de dados firestore com javascript - #24 06m
Exercício: Ao salvar uma transação no Firestore, qual prática garante que o valor monetário seja armazenado como número (permitindo decimais) em vez de string?
Aula em vídeo: Atualizando um documento do firestore com javascript - #25 09m
Exercício: Como identificar se o usuário está criando uma nova transação ou atualizando uma existente ao abrir a tela de transação?
Aula em vídeo: Removendo documento do firestore com javascript - #26 06m
Exercício: Ao clicar no botão Remover, o clique estava levando para a tela da transação. Qual é a correção adequada para evitar que o evento suba para os elementos pais?

Aula em vídeo: Criando a camada de servic?o para acessar o backend - #27 07m
Exercício: Qual foi o principal objetivo ao criar uma camada de serviço (transactionService) para acessar o Firestore?
Aula em vídeo: API Rest - Conectando frontend e backend - #28 10m
Exercício: Qual foi a principal mudança feita para o frontend deixar de acessar diretamente o Firestore e passar a consumir o backend?

Aprenda sobreHTML

Aprenda HTML do zero com nossa seleção de cursos online gratuitos e com certificado. Domine tags, estrutura de páginas, formulários, tabelas, links, imagens e boas práticas para criar sites modernos. Encontre o curso de HTML ideal, desenvolva habilidades valorizadas no mercado e comece agora sua jornada no desenvolvimento web.

Aprenda sobreCSS

Aprenda CSS com cursos online gratuitos e com certificado, ideais para iniciantes e profissionais que desejam criar sites modernos, responsivos e atraentes. Explore conteúdos sobre seletores, cores, layouts, Flexbox, Grid, animações e boas práticas de desenvolvimento web. Escolha seu curso grátis de CSS, estude no seu ritmo e fortaleça seu currículo.

Cursos online Gratuitos sobre JavaScript

Aprenda sobreJavaScript

Aprenda JavaScript com cursos online gratuitos e com certificado para impulsionar sua carreira em desenvolvimento web. Encontre aulas para iniciantes e profissionais sobre lógica de programação, funções, objetos, DOM, eventos, APIs e frameworks. Estude no seu ritmo, desenvolva projetos práticos e conquiste novas oportunidades no mercado de tecnologia.

Aprenda sobreFirebase

Encontre cursos online gratuitos de Firebase com certificado e aprenda a criar aplicações modernas, rápidas e escaláveis. Estude banco de dados em tempo real, Firestore, autenticação, hospedagem, Cloud Functions e integração com apps web e mobile. Escolha seu curso grátis de Firebase, desenvolva projetos práticos e fortaleça seu currículo.