Curso online gratuito FullStack Web com Javascript e Typescript
Duração do curso online: 14 horas e 22 minutos
4
(3)
Construa apps web full stack do zero com JavaScript e TypeScript: APIs REST, React e boas práticas. Curso online gratuito para evoluir no front-end.
Neste curso gratuito, aprenda sobre
Diferenças e integração entre backend e frontend em aplicações web
Fundamentos de HTTP: request/response, métodos e fluxo client-server
Uso de JSON e consumo/teste de APIs com Postman/Insomnia
Criação de endpoints com Express e uso do npm no ecossistema Node.js
Princípios de API REST: recursos, rotas, status codes e GET/POST por ID
Integração Express + TypeScript: tipagem, segurança e organização do código
Noções de banco NoSQL e integração com Firebase no backend
CSS Flexbox para layouts responsivos: container, alinhamento e propriedade flex
Fetch API no frontend: GET/POST, templates HTML e manipulação de dados
CORS: por que existe e como habilitar chamadas entre origens diferentes
Clean Architecture + DDD: camadas, baixo acoplamento, interfaces e DI
Papel de controllers/commands e responsabilidades no padrão MVC
React: useState, useEffect, renderização condicional, rotas e estilos
ORM e repositórios: mapeamento objeto-relacional e configuração de persistência
Sobre o curso online gratuito
Dominar o desenvolvimento web moderno exige enxergar o produto como um todo: como o navegador conversa com o servidor, como dados circulam entre telas e APIs e como manter o código sustentável quando o projeto cresce. Neste curso online gratuito de FullStack Web com JavaScript e TypeScript, você desenvolve essa visão completa, conectando front-end e back-end com uma base prática e orientada ao mundo real.
Você começa entendendo os fundamentos que sustentam qualquer aplicação web: o funcionamento do HTTP, o ciclo de request e response e as escolhas de tecnologias mais comuns. A partir daí, avança para a construção de uma API com Node.js e Express, criando endpoints, trabalhando com JSON e aplicando os principais métodos HTTP para listar, criar e consultar recursos. Também aprende a testar chamadas de API com ferramentas usadas no dia a dia profissional, garantindo que cada rota responde corretamente antes de ligar tudo ao front-end.
Na sequência, o curso introduz TypeScript no back-end para dar mais segurança ao código, facilitar refatorações e reduzir erros em tempo de execução. Você pratica conceitos essenciais de integração com banco de dados, incluindo o uso de soluções não relacionais e a conexão de camadas de persistência por meio de repositórios. Essa etapa ganha força com temas de arquitetura, como Clean Architecture e fundamentos de DDD, ajudando você a criar sistemas menos acoplados, mais testáveis e prontos para evoluir em equipe.
No front-end, você fortalece habilidades que fazem diferença em projetos reais: criação de layouts responsivos com CSS Flexbox e consumo de APIs com Fetch, lidando com CORS, templates e atualização dinâmica da interface. Em seguida, mergulha no ecossistema de frameworks ao trabalhar com React, passando por estado e eventos, renderização condicional, estilização, rotas e consumo de API com Axios.
Por fim, você conhece práticas fundamentais de segurança e acesso, implementando autenticação e autorização com tokens (incluindo refresh token), além de explorar generics no TypeScript para construir componentes e camadas reutilizáveis. Ao concluir, você terá confiança para criar, integrar e evoluir aplicações web completas — do endpoint à interface — com um repertório atual e aplicável no mercado.
Conteúdo do curso
Aula em vídeo: #1 - Sobre o Curso, Backend, Frontend13m
Exercício: Qual dessas opções é uma característica essencial de um sistema de gerenciamento de usuários em um ambiente de desenvolvimento web?
Aula em vídeo: #2 - Dev Web | HTTP Big Picture (Request e Response)16m
Exercício: Qual é o formato de dados frequentemente utilizado para a comunicação entre o front-end e o back-end em aplicações web?
Aula em vídeo: #3 - Dev Web | HTTP Big Picture (Tecnologias)10m
Exercício: Qual das seguintes tecnologias é conhecida por ser um framework web que oferece uma estrutura completa com baterias inclusas, facilitando a implementação de aplicações web completas?
Aula em vídeo: #4 - Dev Web | Express - Primeiro Endpoint17m
Exercício: Qual é o papel do npm ao trabalhar com Node.js em um projeto?
Aula em vídeo: #5 - Dev Web | Express - JSON, GET e POST Insomnia Postman17m
Exercício: Qual ferramenta é mencionada no texto que auxilia desenvolvedores a fazer chamadas para APIs e verificar se as funcionalidades implementadas estão corretas?
Aula em vídeo: #6 - Dev Web | API REST - definições fundamentais12m
Aula em vídeo: #7 - Dev Web | Express com Typescript16m
Exercício: No contexto de desenvolvimento web com Node.js, por que é importante integrar o TypeScript em um projeto Express?
Aula em vídeo: #8 -API REST Express /Filmes17m
Exercício: Qual das opções abaixo representa corretamente o método HTTP utilizado para criar um novo recurso em uma API RESTful?
Aula em vídeo: #9 - Firebase com Express / NodeJS25m
Exercício: Qual das seguintes opções descreve melhor um banco de dados não relacional utilizado para desenvolvimento de aplicações?
Aula em vídeo: #13: Backend: API POST and GET by ID (Finalização)11m
Exercício: No contexto de integração de um sistema web com uma API, qual é o método HTTP adequado para a criação de um novo recurso, como um filme?
Aula em vídeo: #10 - CSS Flex - Intro e Layout base16m
Exercício: Qual propriedade CSS é essencial para criar layouts flexíveis e responsivos, facilitando a distribuição de espaço dentro de um contêiner e o alinhamento dos itens?
Aula em vídeo: #11- CSS Flex - Container20m
Exercício: Qual é a principal função do CSS Flex?
Aula em vídeo: #12 - CSS Flex - Align Content and Flex(prop)10m
Exercício: Qual das opções abaixo descreve corretamente o uso da propriedade CSS 'flex'?
Aula em vídeo: #14 - Frontend JS Fetch API - GET (Listar Filmes)17m
Exercício: Qual é o propósito do uso do CORS (Cross-Origin Resource Sharing) em uma aplicação web?
Aula em vídeo: #15 - Frontend JS Fetch API - GET (Listar Filmes) - Continuação13m
Exercício: Qual é a principal função de um template em HTML dentro do contexto de desenvolvimento web?
Aula em vídeo: #16 - Frontend JS Fetch API - POST (Criar Filmes)17m
Exercício: Qual das opções a seguir descreve o principal objetivo abordado no projeto discutido no texto referido?
Aula em vídeo: #17 Clean DDD Fundamentos P127m
Exercício: Com base em metodologias de desenvolvimento de software, qual é um dos principais desafios ao projetar um sistema para ser mantido e evoluir ao longo do tempo em colaboração com uma equipe?
Aula em vídeo: #18 Clean DDD Fundamentos P226m
Exercício: O que é importante considerar para minimizar o acoplamento em um projeto de software?
Aula em vídeo: #19 Clean DDD Implementac?a?o P326m
Exercício: Qual é o propósito de criar um contrato ou interface para o repositório em um projeto orientado a objetos?
Aula em vídeo: #20 Clean DDD Implementac?a?o P430m
Exercício: Qual é a principal vantagem de utilizar interfaces e injeção de dependência em uma arquitetura de software?
Aula em vídeo: #21 - Arquitetura Clean DDD Camadas Core e Periféricas21m
Exercício: Qual é a principal função da camada de aplicação em uma arquitetura de software?
Aula em vídeo: #22 Clean DDD Refatorando Rotas Controllers Command29m
Exercício: Qual é o papel principal do controlador em uma aplicação web seguindo o padrão MVC?
Aula em vídeo: #23 Live Aula FrontEnd Frameworks - React1h24m
Exercício: O que é uma aplicação web progressiva (PWA)?
Aula em vídeo: #24 React useState e EventHandler19m
Exercício: No desenvolvimento de aplicações web utilizando frameworks como React, o conceito de 'encapsulação' refere-se a:
Aula em vídeo: #25 React Renderizacao Condicional Styled Components23m
Exercício: Qual é a principal vantagem do uso de CSS Modules em projetos de front-end?
Aula em vídeo: #26 React - Rotas com React Router v611m
Exercício: Qual é o principal propósito de utilizar o componente 'Route' em uma aplicação React usando react-router-dom?
Aula em vídeo: #27 React useEffect e Axios (Consumir API Rest)32m
Exercício: Qual é a função principal da biblioteca Axios no desenvolvimento de aplicações web?
Aula em vídeo: #28 - ORM DDD Repository 1/217m
Exercício: Qual é a finalidade principal do ORM (Object-Relational Mapping) em aplicações web?
Aula em vídeo: #29 - ORM DDD Repository 2/216m
Exercício: Ao configurar a camada de persistência em um projeto que utiliza um ORM, qual das etapas a seguir é essencial para garantir a correta integração com o banco de dados?
Aula em vídeo: #30 - Backend Autenticação e Autorização 1/222m
Exercício: Qual das opções abaixo descreve corretamente o processo de autenticação em uma aplicação web?
Aula em vídeo: #31 - Backend Autenticação e Autorização 2/231m
Exercício: Qual é a função de um refresh token no processo de autenticação de sistemas web?
Aula em vídeo: #32 - Typescript Generics : Repositório DDD com Firebase Signup AppMovies 1/224m
Exercício: Qual das afirmações a seguir melhor descreve o conceito de 'generics' em programação, conforme discutido na aula?
Aula em vídeo: #33 - Typescript Generics : Repositório DDD com Firebase Signup Controller AppMovies 2/220m
Aula em vídeo: How to Build a Full Stack NFT Marketplace on Ethereum with Polygon and Next.js - [2021 Tutorial]2h21m
Este curso gratuito inclui:
14 horas e 22 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.
