Imagem do Curso gratuito FullStack Web com Javascript e Typescript

Curso online gratuitoFullStack Web com Javascript e Typescript

Duração do curso online: 14 horas e 22 minutos

4

EstrelaEstrelaEstrelaEstrela

(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

Descrição do curso

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, Frontend 13m
  • 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 Endpoint 17m
  • 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 Postman 17m
  • 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 fundamentais 12m
  • Aula em vídeo: #7 - Dev Web | Express com Typescript 16m
  • 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 /Filmes 17m
  • 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 / NodeJS 25m
  • 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 base 16m
  • 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 - Container 20m
  • 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ção 13m
  • 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 P1 27m
  • 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 P2 26m
  • 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 P3 26m
  • 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 P4 30m
  • 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éricas 21m
  • 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 Command 29m
  • 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 - React 1h24m
  • Exercício: O que é uma aplicação web progressiva (PWA)?
  • Aula em vídeo: #24 React useState e EventHandler 19m
  • 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 Components 23m
  • 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 v6 11m
  • 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/2 17m
  • Exercício: Qual é a finalidade principal do ORM (Object-Relational Mapping) em aplicações web?
  • Aula em vídeo: #29 - ORM DDD Repository 2/2 16m
  • 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/2 22m
  • 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/2 31m
  • 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/2 24m
  • 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/2 20m
  • 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.

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