• Presencial
  • Training

Especializado Front-End Web Developer

  • Últimas Vagas

Um Front-End Developer é um programador que codifica o código de front-end de um site e passa por converter ficheiros de design de sites em HTML, JavaScript (JS) e / ou código CSS.

O domínio de uma série de tecnologias associadas à função de Front-End Developer permite uma melhor visibilidade e uma melhor experiência de utilizador possibilitando assim a construção de um site mais acessível a partir da correta interpretação do briefing, do planeamento, elaboração básica de wireframes, da marcação semântica do código e da construção de elementos interativos.

É o profissional responsável por garantir que o front-end visual de um site esteja livre de erros e se pareça exatamente como foi projetado e que tenha a mesma visibilidade em diferentes computadores e sistemas operativos.

Cursos relacionados

Destinatários

Todos os interessados em iniciar ou consolidar uma atividade profissional como Front-end Web Developers.

Pré-requisitos

Gosto e apetência pela área de desenvolvimento.

Não existem pré-requisitos técnicos muito específicos para a inscrição neste curso, o programa foi projetado e desenvolvido para englobar vários perfis de alunos.

Objetivos

O curso Especializado Front-End Web Developer, pretende dotar os formandos de todos os conhecimentos teóricos e competências necessários para ingressar no mercado de trabalho e assumir uma atividade profissional ligada a competências  com tecnologias de front-end. Serão criadas bases sólidas para trabalhar com e solucionar problemas de desenvolvimento de Front-end.

Metodologia

Os cursos Professional desenvolvem-se com graus de exigência extremamente elevados – tanto em carga horária como pela parte prática – o que obriga a uma total disponibilidade, do formando, para o correto acompanhamento das matérias leccionadas, bem como dos projetos a realizar.

Programa

  • Fundamentos de UI/UX para Developers (9h)
  • HTML5 (21h)
  • CSS3 (27h)
  • Workshop: SASS (9h)
  • Workshop: Responsive Web Design (12h)
  • Fundamentos de Programação (com Javascript) (15h)
  • Javascript (54h)
  • Frontend frameworks – Angular (18h)
  • Frontend frameworks – React (18h)
  • Workshop: GIT (9h)
  • Projeto (18h)

Fundamentos de Web Development

  • Protocolos de comunicação na web
  • Tecnologias e ferramentas front-end e back-end
  • Gestão de projectos web
  • Domínios e alojamento de sites

Metodologias Agile para Gestão de Projetos

  • Metodologias Processo de Design Digital
  • Processos de desenvolvimento de produtos (Agile, Lean e Waterfall)
  • Conceito de MVP (Minimum Viable Product)
  • Processo de design (etapas)
  • The Design Sprint (Google Product Design Sprint)
  • Manifesto Ágil, Valores e Princípios Ágeis

Workshop: Scrum

  • Manifesto Ágil
  • Raízes do SCRUM
  • Visão geral Framework SCRUM
  • Papéis e Responsabilidades: PO, SM e Time
  • Artefatos do SCRUM
  • Eventos
  • Implementação
  • Métricas

Fundamentos de UI/UX para Developers

  • Introdução ao Ux & Ui
  • Multi-screen & Responsive Challenges
  • UX/UI and development
  • Arquitetura de informação
  • Design Patterns & Componentes
  • Wireframing & Prototipagem
  • Assets for development

HTML5

  • Estrutura de uma página HTML
  • Elementos e atributos
  • Elementos de texto
  • Listas
  • Hiperligações
  • Imagens
  • Tabelas
  • Formulários
  • Elementos multimédia
  • Elementos estruturais do HTML5

CSS3

  • Evolução das CSS
  • Utilizar CSS em páginas Web
  • Selectores CSS
  • Unidades
  • Trabalhar com cores
  • Vendor prefixes
  • Formatação de texto
  • Tipografia
  • Backgrounds e gradientes
  • Borders e sombras
  • Box model
  • Layout de páginas
  • Novos métodos de layout em CSS3
  • Propriedades para tabelas e formulários
  • Criação de elementos de navegação
  • CSS sprites e elementos interactivos
  • Transforms, transitions e animations
  • Frameworks front-end – Bootstrap

Workshop: SASS

  • Preprocessing
  • Variáveis
  • Nesting
  • Partials
  • Modules
  • Mixins
  • Extend & Inheritance
  • Operadores

Workshop: Responsive Web Design

  • Princípios básicos do responsive
  • Responsive websites vs. Mobile website vs. Mobile app
  • Introdução ao processo de desenvolvimento
  • Html + CSS3 principios básicos
  • Media queries
  • Fix and fluid Layouts
  • Adaptive and responsive web design
  • Responsive design
  • Frameworks
  • Projeto Prático

Fundamentos de Programação (com Javascript)

  • Paradigmas de Programação (Object Oriented, Imperative e Functional Programming,…)
  • Processo de desenvolvimento de um algoritmo (programa) (Utilização de pseudo-código e fluxogramas)
  • Tipos de Dados numa linguagem de programação (Variáveis, constantes, …)
  • Operadores e cálculos numa linguagem de programação
  • Controle da execução de um programa com recurso a estruturas de decisão e repetição

Javascript

  • Introdução, história e evolução dos vários standards da linguagem
  • Breve introdução á historia de desenvolvimento da linguagem, e a sua evolução até aos dias de hoje.
  • Conceitos / Instruções Básicas em javascript
    • Expressões
    • Comentários
    • Variáveis e constantes
    • Operadores
  • Tipos de dados primitivos em Javascript
    • Numbers, Strings, Boolean, null, undefined
  • Estruturas de decisão e repetição em javascript
    • Estruturas de decisão no controle do fluxo de um programa: (If, if/else, switch)
    • Estruturas de repetição: (For, While, Do/While)
  • Tipos de dados Complexos, Arrays, Objectos, Funções e Built-In Objects
    • Utilização de Arrays
    • Criação de Objectos, propriedades e métodos
    • Conceito de Função, funções com parâmetros
    • Funções anónimas e IIFE (Imediate Invoked Function Expression)
    • Funções “construtoras” de Objectos
    • Conceito de “Scope” de uma variável, varáveis locais e globais, diferenças em ES6 com let e const
    • Built-In Objects em JS
  • Browser Object Model (BOM)
  • Document Object Model (DOM)
  • Global Objects (Number, String, Boolean, Undefined, Null, Object, Math, Date, …)
  • Conceito e manipulação do DOM (Document Object Model) numa aplicação web
    • Como o Browser interpreta o HTML e cria um Objecto (DOM), representativo dos elementos da página
    • Tipos de elementos(Nodes) do DOM (Document, Element, Attributes e TextNodes)
    • Processo e Conceito de manipulação do DOM
    • Metodos para selecionar um elemento(node) ou uma coleção de elementos(nodelist) do DOM (Live e static methods)
    • Propriedades e métodos para percorrer o DOM
    • Alterar conteúdos de elementos do DOM
    • Inserir, mover ou eliminar elementos do DOM
    • Manipulação de atributos de elementos do DOM
    • Trabalhar com Eventos em Javascript
  • Conceito de interactividade com Eventos em JS
  • Categorias (tipos) de Eventos em JS
  • Definição de Eventos em JS (HTML event handler’s, Event Handler’s, DOM
  • EventListeners)
  • Conceito de Event Flow e suas fases em JS (Capturing, targeting e bubbling)
  • Conceito de Event Object em JS
  • Delegação de Eventos em JS
  • Introdução à especificação ES6
  • Evolução do standard de javascript e novas especificações ES6, ES7 e ES8
  • Utilização de “Transpilers” como o BabelJS para a compilação de ES6 em “Vanilla Javascript” standard (ES5)
  • Variáveis e parâmetros em ES6 (let e const, Destructuring, Default Parameters, Classes, Rest e Spread operators, multiline e template strings,…)
  • Arrow functions, Iterators, e outros conceitos de Functional programming
  • Novos métodos de manipulação de Arrays e Objectos (map, reduce, Object.Assign(), …)
  • AJAX e JSON com Javascript (ES6)
    • Conceito de Ajax com JS (requests e responses)
    • Tipos de dados numa comunicação assíncrona com o servidor
    • Conceito de Promises (ES6)
    • Utilização da “Fetch API” para chamadas assíncronas.
    • Gestão de erros em Javascript
    • Filtrar, Ordenar e pesquisar numa estrutura de dados em JS
    • Introdução e utilização de algumas API’s de HTML5 (LocalStorage, SessionStorage, Geolocation, …)

Front End Framworks – Angular

  • Introdução, Ambiente de Desenvolvimento:
    • Breve introdução ao ECMAScript, novas funcionalidades da especificação ES6 (Classes, fat Arrow functions, spread e rest operators, destructuring, …)
    • Breve introdução à sintaxe do Typescript
    • Gestão de “packages, librarias e frameworks” de Javascript com npm (ou yarn)
  • Introdução ao Angular
    • Enquadramento da utilização da framework Angular para desenvolvimento Web
    • Abordagem e explicação genérica sobre a framework
    • Utilização de Angular CLI como ferramenta para gerir, e desenvolver projetos em Angular
    • Conceitos de compilação JIT (Just in Time) e AoT (ahead of time)
    • Demonstração practica da estrutura de uma aplicação em Angular
  • Elementos estruturais de uma Aplicação em Angular
    • Components
    • Services
    • Directives
    • Pipes
    • Modules
    • Conceito de Data-Binding em Angular
  • Navegação entre componentes de uma Aplicação – Rounting
    • Conceitos básicos de “Routing”
    • Implementação de “Routing” e modulos que compõem uma estrutura de navegação
    • Passagem de “Data” em “Routing”
    • Conceito de “Child Routes”
  • Dependency Injection em Angular
    • Introdução ao Padrão de Desenho : “Dependency Injection”
    • “Injectors” e “Providers”, “injectar” um serviço, utilização do HttpClient.
    • Reactive programming em Angular, com Observables
  • Estratégia de comunicação entre componentes
    • Criar “loosely-coupled” components (@Input e @output properties)
    • Como passar dados entre componentes hierarquicamente relacionadas
    • Utilização do Padrão de Desenho “Mediator” através de DI de serviços
    • “Change Detection” em Angular e métodos “lifecycle” de uma componente
  • Introdução a API Forms do Angular
    • Template-driven forms em Angular
    • Reactive forms em Angular
    • Utilizar o FormBuilder
    • Validação de Forms com Validators Built-in
  • Interacção com servidores através do HttpClient
    • Introdução ao Modulo HttpClient
    • Interacção com webserver em “node” e Typescript
    • Efetuar chamadas para o servidor
    • Reactive Extensions (NGRX) em Angular

Front End Frameworks – REACT

  • Build Workflow
  • Componentes
  • JSX
  • Restrições JSX
  • State
  • Handling Events
  • Two Way Binding
  • Lists, keys & mapping
  • Components Lifecycle
  • React Hooks
  • Ajax in React
  • Axios
  • Forms and Form Validation
  • Redux
  • Redux Advanced
  • Deploying React project
  • NEXT.js

Workshop: GIT

  • Instalação e configuração de Servidor GIT
  • Instação de Cliente GIT
  • Criar uma equipa
  • Criar um projecto
  • Configurar repositório
  • Criar um branch a partir de master
  • Commit
  • Revert
  • Merge
  • Deploy

Projeto

Inscreva-se

Dados Pessoais

Dados para faturação

   Os seus dados pessoais são recolhidos em conformidade com o Regulamento Geral de Proteção de Dados (RGPD).Consente que os seus dados sejam utilizados, nos termos da nossa Politica de Privacidade, para o contacto/envio de:

   Ações de informação, de marketing de produtos e serviços, como campanhas e eventos?

Para mais informações, consulte a Política de Privacidade do Grupo Rumos. Pode retirar o seu consentimento a qualquer momento, através do botão “Cancelar subscrição” ou “Unsubscribe” que estão presentes em cada comunicação enviada, bem como exercer os direitos descritos na política de privacidade

Especializado Front-End Web Developer

  • Datas
    08 Mar a 31 Jul 2019
    Lisboa
  • Horário
    Pós-laboral
    2ª, 4ª e 6ª, das 18h30 às 21h30
  • Nº Horas
    210
  • Preço
    2850€

Especializado Front-End Web Developer

Área

Dados

Como chegou até nós

Os seus dados pessoais são recolhidos em conformidade com o Regulamento Geral de Proteção de Dados (RGPD).

Consente que os seus dados sejam utilizados, nos termos da nossa Politica de Privacidade, para o contacto/envio de:

Ações de informação, de marketing de produtos e serviços, como campanhas e eventos?

Para mais informações, consulte a Política de Privacidade do Grupo Rumos.
pode retirar o seu consentimento a qualquer momento através do botão Cancelar subscrição ou Unsubscribe que estão presentes em cada comunicação enviada, bem como exercer os direitos descritos na politica de privacidade