Formação Desenvolvedor Front End - HTML + Node + Angular + React

Conteúdo programático

• 1 - Desenvolvendo em HTML, CSS e BOOTSTRAP - Curso Digital
  Carga Horária: 20 horas

  Módulo 1 - O que é HTML?

  E o que é HTML5?

  A Estrutura do HTML

  Elementos HTML

  Elementos Vazios

  Sua primeira página da web

  Elementos de bloco e embutidos

  Atributos

  Títulos

  Id's e classes     

  Links

  Imagens

  Listas

  Formulários

  Como funciona um formulário HTML?

  Criando o primeiro formulário

  Agrupando com a tag fieldset

  Enviando os dados

  Caixas de texto multilinha - a tag textarea

  Radiobuttons

   

  Módulo 2 - Caixas de seleção

  Escolhas múltiplas

  Rótulos (labels) para caixas de seleção 

  Trabalhando dinamicamente com uma check box

   

  Módulo 3 - Dropdown Lists

  Noções básicas de tabelas

  Introdução aos elementos HTML5 semânticos

  Validação de formulário usando HTML5

  Como funciona a validação de HTML5   

  Usando padrões para validar endereços de e-mail

   

  Módulo 4 - O que é CSS?

  Como funciona o CSS

  Olá, mundo CSS!

  A anatomia de uma regra CSS

  Classes de elementos específicos

  Introdução ao CSS Box Model

  Elementos Inline vs. Block

  Elementos embutidos e tamanhos / margens

  Propriedade abreviada
  

  Visibilidade(Visibility) e exibição(display)

  Visibilidade x exibição

  Introdução ao posicionamento

  Introdução às cores em CSS

  Imagens de fundo

   

• 2 - Programando em JavaScript usando NODE
  Carga Horária: 16 horas

  Módulo 1 -  Introdução

  Visão Geral

  Sintaxe básica

   

  Módulo 2 - Funções

  Definição de Função     

  Chamando uma Função

  Parâmetros de Função

  A declaração return (retorno)

   

  Módulo 3 - Evento em Javascript

  O que é um evento?

  Evento onclick

   

  Módulo 4 - JavaScript - OPP (Programação Orientada a Objetos)

  Propriedades do Objeto

  Métodos de objeto

  Objetos Definidos pelo Usuário

  O operador new

  O construtor Object ()

  Definindo métodos para um objeto

   

  Módulo 5 - Node.js - Introdução

  Recursos do Node.js

  Criação de aplicativo Node.js

  O que é Callback?

  Programação Orientada a Eventos

  Como funcionam os aplicativos do Node?

   

  Módulo 6 - Emissor de evento

  Classe EventEmitter

  
  

  Módulo 7 - Node.js - Streams
  

  O que são streams?

  Piping streams

  Encadeando os Streams

  Node.js - sistema de arquivos (File System)

  Síncrono vs Assíncrono

  Abrindo um arquivo

  Flags
  

   

  Módulo 8 - Manipulando arquivos

  Node.js - Módulo Web

  Arquitetura de aplicativo da Web

  Criando um servidor web usando o Node

  Solicitação ao servidor Node.js

  Criação de cliente Web usando Node

   

  Módulo 9 - Express Framework

  Visão geral do Express

  Instalando o Express

  Primeiro web app com Express

  Request/Response (Pedido/Resposta)  

  Roteamento Básico       

  Arquivos estáticos          

  Entendendo o Express 

  Método GET

  Método POST

• 3 - Desenvolvimento de Aplicações com AngularJS
  Carga Horária: 32 horas

  Introdução Introdução ao Angular 9 Ambiente de desenvolvimento (Node.JS, TypeScript, Angular CLI) Hello, World! Criando primeiro projeto e o primeiro Componente Introdução ao TypeScript para Angular Módulos (ngModule) Templates Serviços (Services) e Injeção de dependência (DI) Dicas plugins Angular para Atom e VS Code

  Data binding Property binding + Interpolation Class e Style binding Event binding Two-way data binding Input properties Output properties Ciclo de vida (life-cycle) do Componente Acesso ao DOM e ao Template com ViewChild

  Angular CLI Angular CLI: Instalação e criação de projetos: ng new e ng serve Angular CLI: Criando components, services: ng generate Angular CLI: Usando pré-processadores (Sass, Less, Stylus) Angular CLI: ng lint, ng test, ng e2e Angular CLI: Estrutura do projeto Angular CLI: Gerando build de produção Angular CLI: instalando bibliotecas (bootstrap, jquery, materialize, lodash)

  Diretivas Introdução e tipos de diretivas no Angular 2 Diretivas: ngIf Diretivas: ngSwitch, ngSwitchCase e ngSwitchDefault Diretivas: ngFor Diretivas: sobre o * e template Diretivas: ngClass Diretivas: ngStyle Operador Elvis ng-content Criando uma diretiva de atributo: ElementRef e Renderer Diretivas: HostListener e HostBinding Diretivas: Input e Property Binding Criando uma diretiva de estrutura (ngElse)

  Serviços Introdução a Serviços Criando um serviço (Service) Injeção de Dependência (DI) + como usar um serviço em um componente Escopo de instâncias de serviços e módulos (singleton e várias instâncias) Comunicação entre componentes usando serviços (broadcast de eventos) Injetando um serviço em outro serviço

  Pipes (Filtros) Pipes (usando pipes, parâmetros e pipes aninhados) Criando um Pipe Aplicando Locale (internacionalização) nos Pipes Pipes: Criando um Pipe ?Puro? Pipes: Criando um Pipe ?Impuro? Pipes: Async (assíncrono)

  Rotas Rotas: Introdução Rotas: Configurando rotas simples Rotas: RouterLink: definindo rotas no template Rotas: Aplicando CSS em rotas ativas Rotas: Definindo e extraindo parâmetros de roteamento Rotas: Escutando mudanças nos parâmetros de roteamento Rotas Imperativas: Redirecionamento via código Rotas: Definindo e extraindo parâmetros de url (query) Rotas: Criando um módulo de rotas Criando um módulo de funcionalidade Rotas: Criando um módulo de rotas de funcionalidade Rotas Filhas Rotas Filhas: desenvolvendo as telas Rotas: Dica de Performance: Carregamento sob demanda (lazy loading) Rotas: Tela de Login e como não mostrar o Menu (NavBar) Usando Guarda de Rotas: CanActivate Usando Guarda de Rotas: CanActivateChild Usando Guarda de Rotas: CanDeactivate Usando Guarda de Rotas: CanDeactivate com Interface Genérica Usando Guarda de Rotas: Resolve: carregando dados antes da rota ser ativada Usando Guarda de Rotas: CanLoad: como não carregar o módulo sem permissão Definindo rota padrão e wildcard (rota não encontrada)

  Formulários (Template Driven) Formulários (template vs data / reativo) Introdução Formulários ? Criando o projeto inicial com Bootstrap 3 Forms (template driven) Controles ngForm, ngSubmit e ngModel Forms (template driven) Inicializando valores com ngModel (two-way data-binding) Forms (template driven) Módulos e FormsModule Forms (template driven) Aplicando validação nos campos Forms (template driven) Aplicando CSS na validação dos campos Forms (template driven) Mostrando mensagens de erro de validação Forms (template driven) Desabilitando o botão de submit para formulário inválido Forms (Dica): Verificando dados do Form no template com JSON Forms (template driven) Adicionando campos de endereço (form layout Bootstrap 3) Forms (template driven) Refatorando (simplificando) CSS e mensagens de erro Forms (template driven) Form groups (agrupando dados)

  Formulários Reativos (data-driven) Formulários reativos (data driven) Introdução Formulários reativos: Configuração (Módulo e Componente) Formulários reativos: Criando um form com código Angular Formulários reativos: Sincronizando HTML com FormGroup Formulários reativos: Fazendo submit Formulários reativos: Resetando o form Formulários reativos: Aplicando validação nos campos Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos Formulários reativos: Campos de endereço (migrando um form template driven para form reativo) Formulários reativos: Form groups (agrupando dados) Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)

• 4 - Programando Interfaces Usando FrameWorks Front-End React
  Carga Horária: 24 horas

  Módulo 1 ? Introdução

  Estrutura de um projeto React

  Configurando seu primeiro app React

  Módulo 2 - Estado (State)

  Componentes

  sem estado (stateless)

  com estado (stateFull)

  Módulo 3 ? Props

  Props padrão   

  Estado (state) e props

  Validação de props

  Módulo 4 - Component API       

  Ciclo de Vida do Componente  

  Formulários      

  Eventos

  Módulo 5 - Child Events

  Refs                     

  Keys                     

  Router (Roteador)         

  Conceito Flux

  Módulo 6 - Usando Flux

  React Hooks     

  Regras dos Hooks           

  Hooks State                      

  Hooks Effect     

  Custom Hooks 

  Built-in Hooks  

  Módulo 7 - React Map

  Componentes de high order