Curso Web Apps Responsivas com JavaScript e jQuery

FD9E034F-C706-472D-ABA4-310433A703E5 Created with sketchtool. 32 horas/aula
Veja as próximas turmas

O que você vai fazer

Para quem é esse curso?

Este curso é para quem já possui uma boa base de front-end e quer começar a se aprofundar no maravilhoso mundo do JavaScript e do jQuery.

Para aproveitar melhor o curso recomendamos que você tenha conhecimento em

Curso Desenvolvimento Web com HTML, CSS e JavaScript

Conheça todos os cursos que fazem parte da Formação Front-end

Conheça a formação

Conteúdo detalhado do curso WD-47

    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. Exercício: Manipulando o DOM
  5. Desacoplando o Javascript do CSS
  6. Relembrando Eventos JavaScript
  7. Exercício: Alterando visualização dos cartões com JS
  8. Javascript onde?
  9. Funções anônimas
  10. Exercício: Colocando javascript no seu devido lugar
  11. Ouvindo eventos em vários elementos
  12. Usando a estrutura do DOM ao nosso favor
  13. Desacoplando nosso código da estrutura
  14. Removendo Elementos do DOM e relembrando setTimeout
  15. CSS3 Transitions
  16. 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 a 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 Debounce 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

O que os alunos falam

Rogerio Pio Nunes

Professores muito bons e atenciosos, atendem as solicitações para tirar dúvidas, dão conselhos de mercado. Excelente!

Laura Nardi Leamari

Aprender de maneira clara e direta sobre todo o assunto, com maneiras diferentes também de como é passado pela apostila. Foram passadas diferentes inf...

Lucas Ap Oliveira da Silva

Parece estranho mas o que se aprende nos cursos da Caelum é simplesmente o que vai diferenciar você de um outro profissional, seguir boas práticas, se...

Próximas turmas

Selecione a cidade e os períodos de sua preferência

Qual cidade você pode ir?
Quais períodos você prefere?
Ver turmas encontradas

Nós encontramos essas turmas:

Não achou a turma ideal pra você? Consulte outras turmas e horários.

Entre em contato
Fale com a gente!

Não encontrou o curso que procura? Conheça a Alura, a plataforma online da Caelum

Conheça a Alura