Formação Front-end

Curso Web Apps Responsivas com JavaScript e jQuery

  • 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
08/09 a 17/09 Manhã (9h às 13h) Brasília
05/10 a 16/10 Noturno (18h às 22h) Rio de Janeiro Turma Nova! Bairro: Centro.
24/10 a 14/11 Sábado (9h às 17h) Brasília
09/11 a 19/11 Manhã (9h às 13h) Brasília

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. A magia dos editores de texto
  2. Instalando plugins em casa
  3. Exercício: Editores de texto e o emmet
  4. Developer Tools
  5. Desacoplando CSS do HTML
  6. Exercício: Preparando o terreno para os cartões do mural
  7. Exercício: Os cartões e o container
  8. Responsividade e Mobile First
  9. Flexbox e Progressive Enhancement
  10. Exercício: Developer tools e o modo responsivo
  11. Exercício: Os cartões e o tal do layout responsivo

As funcionalidades, o JavaScript e o CSS

  1. Opção para mudar o layout
  2. Javascript, a linguagem do navegador
  3. ClassList API
  4. Relembrando Eventos JavaScript
  5. Mais sobre flexbox
  6. Exercício: Alterando visualização dos cartões com JS
  7. Acessando atributos no DOM
  8. Atributos customizados no DOM
  9. Relembrando setTimeout
  10. CSS3 Transitions
  11. Exercício: Removendo cartões com Data-Attributes
  12. jQuery
  13. Conhecendo o jQuery
  14. Eventos
  15. Navegação no DOM com jQuery
  16. Modificando o DOM com jQuery
  17. Funções mais comuns do jQuery
  18. Construindo elementos com jQuery
  19. Exercício: Adicionando cartões com jQuery
  20. Expressão Regular em JavaScript
  21. Exercício: Notas mais poderosas com Expressões Regulares
  22. Medidas flexíveis: em
  23. Alinhamento com flexbox
  24. O forEach do ES5
  25. Exercício: Melhorando vizualização dos cartões
  26. Mais funções do jQuery
  27. 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. Use strict
  11. 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.