![](https://www.trainning.com.br/img/modal/modal_voucher_desk_2.png)
Não vá embora!
até 12x sem juros
até 12x sem juros no cartão
Formação Desenvolvedor Front End
4 Cursos em 1 Formação
Carga horária: 84 Horas
Desenvolvendo em HTML, CSS e BOOTSTRAP - Curso Digital | Duração: 20 horas |
||
Programando em JavaScript usando NODE | Duração: 16 horas |
||
Desenvolvimento de Aplicações com AngularJS | Duração: 32 horas |
||
Programando Interfaces Usando FrameWorks Front-End React | Duração: 24 horas |
||
Formação Desenvolvedor Front End - HTML + Node + Angular + React | Você economiza: 60% | Inscreva-se agora! | R$ 2.940,00 |
No online você tem aulas digitais e interage com mentores reais ao vivo. Já no a distância, tanto o conteúdo, quanto a interação são digitais.
Objetivo do Curso de Formação Desenvolvedor Front End:
Este curso visa capacitar os participantes a se tornarem desenvolvedores front-end proficientes, adquirindo habilidades sólidas em HTML, Node.js, Angular e React. Ao final do curso, os alunos serão capazes de criar interfaces de usuário dinâmicas e responsivas, utilizando as tecnologias mais relevantes e amplamente utilizadas no mercado atual de desenvolvimento web.
Noturno
84 Horas
Curso Presencial
Curso Online ao Vivo
Idioma: Português ou Inglês
Sujeito a alteração sem aviso prévio
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
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
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) |
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
+ 300.000 alunos treinados e milhares de alunos certificados em 12 anos
+ 12 premiações nacionais e internacionais como melhor centro de treinamentos do Brasil
+ 200 cursos presenciais e remotos nas áreas de tecnologia, gorvernança e negócios
+ 300 instrutores que fazem parte do maior corpo docente de tecnologia de negócios do Brasil