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

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

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

Descrição do curso

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?

Este curso gratuito inclui:

3 horas e 51 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso