Formação Front-end

Curso Web Apps Responsivas com JavaScript e jQuery

Conteúdo detalhado
  • Linguagem JavaScript em detalhes;
  • Orientação a objetos, modularização e organização de código;
  • Uso do jQuery e suas facilidades;
  • Sites adaptados pra mobile, com suporte a eventos touch;
  • Páginas dinâmicas com AJAX, incluindo JSONP e CORS;
  • Build e otimização com Gulp.js;
  • Persistência e sincronização de dados;
  • CSS moderno com flexbox, animações e mais;
  • Curso de JavaScript completo pra você dominar a programação JS.

Sobre o curso WD-47

Um curso de programação front-end para quem busca melhorar a interação dos usuários nas suas aplicações Web. São abordados tópicos da linguagem JavaScript e como ela interage com o navegador para criar funcionalidades complexas no cliente. Tudo focando em uma aplicação completa mobile e responsiva.

Durante o curso, abordamos desde JavaScript puro usando APIs direto no navegador até o uso de jQuery e suas facilidades. Focamos bastante em tópicos essenciais para um sistema de qualidade, como uso de módulos e outros padrões de organização de código.

O projeto desenvolvido possui recursos de persistência com JavaScript, sincronização dos dados, chamadas JSONP e CORS. Usamos CSS moderno com flexbox, animações e outras novidades. Com Gulp, automatizamos o build da aplicação.

Veja também a ementa detalhada do curso.

Pré-requisitos

Curso Desenvolvimento Web com HTML, CSS e JavaScript ou conhecimento equivalente. E conhecimento de programação em alguma linguagem (como Java, Ruby, PHP, C#).

32 horas aula

A opinião de quem fez

Gostei muito do curso e espero voltar o mais breve possível.

Ednei Neto, Caelum RJ

A Caelum é uma instituição realmente fantástica. Pude comprovar isso. A infraestrutura e a didática do professor é nota 10. Fiz o curso de Front-end Avançado e gostei bastante. Pretendo fazer um curso de Java que é o ponto forte da Empresa

Dheyfesson Pinheiro, Caelum Brasília

Já havia feito vários cursos em outras escolas, porém aqui, especialmente com a maneira com que o curso é conduzido, consegui assimilar tudo o que precisava para por em prática em meus projetos.

Claudemir Lima

Próximas turmas

Data Período Cidade Comentário
22/10 a 12/11 Sábado (9h às 17h) São Paulo Inscrições abertas!!!
24/10 a 04/11 Manhã (9h às 13h) Brasília Desconto especial+Curso online+Camiseta Caelum - Desconto até o dia 03 de Outubro
24/10 a 03/11 Noturno (19h às 23h) São Paulo Turma promocional
31/10 a 04/11 Integral (9h às 17h) São Paulo Inscrições abertas!!!
19/11 a 10/12 Sábado (9h às 17h) Rio de Janeiro Inscrições abertas!
05/12 a 15/12 Noturno (19h às 23h) Brasília
07/01 a 28/01 Sábado (9h às 17h) São Paulo
16/01 a 27/01 Manhã (9h às 13h) Brasília
16/01 a 19/01 Integral (9h às 17h) São Paulo

Não achou a turma ideal pra você? Entre em contato e consulte outras turmas e horários.

Fale com a gente.

Dúvidas, reservas ou um papo com um instrutor?

Conteúdo detalhado

Sobre o curso

  1. Os exercícios
  2. O projeto
  3. Tirando dúvidas

Começando um projeto front-end como um profissional

  1. Escrevendo código em menos tempo
  2. Exercício: Iniciando o projeto com o emmet
  3. Developer Tools
  4. Desacoplando CSS do HTML
  5. Exercício: Preparando o terreno para os cartões do mural
  6. Exercício: Os cartões e o container
  7. Design Responsivo
  8. Exercício: Developer tools e o modo responsivo
  9. Mobile First
  10. Progressive Enhancement
  11. Flexbox e o Progressive Enhancement
  12. Exercício: Os cartões e o tal do layout responsivo

As funcionalidades, o JavaScript e o CSS

  1. Flexbox: alterando a direção
  2. Javascript, a linguagem do navegador
  3. DOM: sua página no mundo JavaScript
  4. Desacoplando o Javascript do CSS
  5. Relembrando Eventos JavaScript
  6. Funções anônimas
  7. Exercício: Alterando visualização dos cartões com JS
  8. Ouvindo eventos em vários elementos
  9. Usando a estrutura do DOM ao nosso favor
  10. Desacoplando nosso código da estrutura
  11. Relembrando setTimeout
  12. CSS3 Transitions
  13. Exercício: Removendo cartões com Data-Attributes

jQuery

  1. Conhecendo o jQuery
  2. Eventos
  3. Navegação no DOM com jQuery
  4. Modificando o DOM com jQuery
  5. Funções mais comuns do jQuery
  6. Construindo elementos com jQuery
  7. Exercício: Adicionando cartões com jQuery

Dando poderes ao conteúdo

  1. Transformando textos em outros textos
  2. String.replace()
  3. Expressão Regular em JavaScript
  4. Exercício: Cartões mais poderosos com Expressões Regulares
  5. Medidas relativas: em
  6. Alinhamento com flexbox
  7. O forEach do ES5
  8. Exercício: Melhorando vizualização dos cartões
  9. Mais funções do jQuery
  10. Expressões regulares dinâmicas
  11. Exercício: Buscando cartões com jQuery

AJAX e a vida assíncrona

  1. AJAX com jQuery
  2. JSON - JavaScript Object Notation
  3. $.getJSON
  4. Exercício: Pegando as instruções com AJAX e JSON
  5. Same origin policy e CORS
  6. Exercício: Salvando os cartões com AJAX
  7. Same origin policy e JSONP
  8. Exercício: Carregando o mural quando a página carrega

Melhorando nosso app com boas práticas de código

  1. O problema dos escopos em JavaScript
  2. IIFE: Immediately Invoked Function Expressions
  3. Exercício: Protegendo o nome de usuário com uma IIFE
  4. Organização de arquivos JavaScript
  5. Exercício: Organizando nosso código em arquivos e IIFE's
  6. Módulos em JavaScript
  7. Exercício: Adição e criação de cartões com módulos
  8. Módulo com objetos
  9. Exercício: Organizando nosso módulo com objetos
  10. Dependências com IIFE
  11. Use strict
  12. Exercício: Dependências com IIFE
  13. Exercício: Javascript mais restrito com use strict

O Poder dos Eventos

  1. Acoplamento de código
  2. Eventos customizados
  3. Exercício: Melhorando a sincronização com Eventos Customizados
  4. ContentEditable
  5. Elementos interativos e o foco
  6. Exercício: Acrescentando a opção de edição do cartão
  7. Eventos e performance do site
  8. Exercício (opcional): Edição do cartão e o Throttle pattern
  9. Delegação de eventos
  10. Exercício: Delegação de eventos na troca de cores

Apêndice - Automatização de Tarefas

  1. Um pouco sobre Node.js
  2. Instalando Gulp
  3. Gulpfile e Tasks
  4. Exercício: Instalando Gulp e a primeira task
  5. Prefixos automáticos
  6. Copiando arquivos
  7. Exercício: Copy e o Autoprefixador
  8. Dependências em tasks e a task Default
  9. Exercício: Melhorando nossas tasks
  10. Gulp watch
  11. Exercício: Automatizando a automatização com watch

Apêndice - Descomplicando o CSS com SASS

  1. Pré-processadores CSS
  2. SASS
  3. Compilando SASS com Gulp
  4. Exercícios: Nesting e SASS com Gulp
  5. Reaproveitamento com mixins
  6. Exercícios: Isolando código em mixins
  7. Discussão em aula: Preciso mesmo de um pré-processador? Quando o CSS é o suficiente?


* Os apêndices listados são conteúdos adicionais que não fazem parte do curso regular.