Fundamentos de UX/UI 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
• Html5 + CSS3 princípios básicos
• Media queries
• Fix and fluid Layouts
• Adaptive and responsive web design
• Responsive design
• Frameworks

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
  • Métodos 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

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
• Forms and Form Validation
• Redux
• Redux Advanced
• Deploying React project

Workshop: GIT

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

Pitstop

Projeto: Front-End