Formação Front-end

Curso Desenvolvimento Web com HTML, CSS e JavaScript

  • HTML com foco em semântica, boas práticas, SEO e acessibilidade;
  • CSS além das propriedades básicas, com foco em código reusável, desacoplado e flexível;
  • Interatividade com JavaScript, incluindo uso de jQuery e plugins;
  • Tudo com as novidades do HTML 5 e CSS 3;
  • Páginas prontas para mobile com design responsivo;
  • Bootstrap, framework front-end famoso no mercado;
  • Performance de front-end para uma página rápida;
  • Integração com back-end com servidor PHP;
  • Aprender tagzinha HTML é fácil; mas aprender as boas práticas de uma Web flexível e robusta é o diferencial no mercado.

Sobre o curso WD-43

Um curso para quem quer dominar as melhores técnicas de desenvolvimento Web. Voltado ao programador de interfaces preocupado com a semântica perfeita, estilos CSS poderosos e JavaScript correto e funcional. Um curso dedicado a criar interfaces Web com experiência rica do usuário, estruturação correta e otimizações.

O conteúdo do curso aborda o domínio de HTML, incluindo alguns exemplos do novo HTML 5. Além, claro, de tirar o máximo proveito de CSS, também já conhecendo algumas das novas possíbilidades do CSS 3. Tudo com tableless, código semântico outras boas práticas e técnicas avançadas.

Também é necessário ao programador de interface/web master um bom conhecimento de programação JavaScript. Por isso, o curso aborda tópicos como linguagem JavaScript, manipulação dos elementos da página e enriquecimento da experiência do usuário com jQuery. Para completar, tópicos de design responsivo para mobile, Twitter Bootstrap e otimizações para melhorar a velocidade de carregamento da página.

O curso complementa também programadores experientes que pretendem melhorar suas técnicas no client-side, além de preparar novos profissionais que estão iniciando com programação server-side e pretendem ter uma visão mais completa de como desenvolver sistemas para Web. Para estudar a importante integração client / server, o curso aborda uma introdução a PHP, com foco no programador front-end.

Veja também a ementa detalhada do curso.

Pré-requisitos

Curso Lógica de Programação com JavaScript ou conhecimento equivalente: lógica de programação e conhecimento básico de desenvolvimento Web, como funciona a Internet e o navegador, o que são páginas Web, HTML e CSS.

40 horas aula

A opinião de quem fez

Gostei muito da experiência e recomendaria o curso para quem me perguntasse sobre indicações.

André Felipe Hiroaki Kato

Gostei muito do curso, com esse curso dispertou minha vontade de fazer outros treinamentos, no futuro próximo pretendo me inscrever.

Marcelo Alencar Damacena

Fiquei surpresa desde de primeira dia de aula, se soubesse do profissionalismo da caelum já teria feito o curso bem antes.

Ângela Pereira da Cunha

Próximas turmas

Data Período Cidade Comentário
10/10 a 21/10 Noturno (19h às 23h) São Paulo
15/10 a 12/11 Sábado (9h às 17h) Rio de Janeiro Inscrições abertas!
15/10 a 12/11 Sábado (9h às 17h) São Paulo
17/10 a 21/10 Integral (9h às 17h) Brasília Desconto especial+Curso online+Camiseta Caelum - Desconto até o dia 03 de Outubro
24/10 a 28/10 Integral (9h às 17h) São Paulo
05/12 a 16/12 Manhã (9h às 13h) Brasília
02/01 a 13/01 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 - o complexo mundo do front-end

  1. O curso e os exercícios
  2. O projeto de e-commerce
  3. Tirando dúvidas com instrutor
  4. Tirando dúvidas online no GUJ
  5. Bibliografia
  6. Para onde ir depois?

Introdução a HTML e CSS

  1. Exibindo informações na Web
  2. Sintaxe do HTML
  3. Estrutura de um documento HTML
  4. Tags HTML
  5. Imagens
  6. A estrutura dos arquivos de um projeto
  7. Editores e IDEs
  8. Primeira página
  9. Exercício: primeiros passos com HTML
  10. Estilizando com CSS
  11. Sintaxe e inclusão de CSS
  12. Propriedades tipográficas e fontes
  13. Alinhamento e decoração de texto
  14. Imagem de fundo
  15. Bordas
  16. Exercício: primeiros passos com CSS
  17. Cores na Web
  18. Listas HTML
  19. Espaçamento e margem
  20. Exercícios: listas e margens
  21. Links HTML
  22. Exercícios: links
  23. Elementos estruturais
  24. CSS: Seletores de ID e filho
  25. Fluxo do documento e float
  26. Exercícios: seletores CSS e flutuação de elementos
  27. O futuro e presente da Web com o HTML5

HTML semântico e posicionamento no CSS

  1. O processo de desenvolvimento de uma tela
  2. O projeto Mirror Fashion
  3. Analisando o Layout
  4. HTML semântico
  5. Pensando no header
  6. Estilização com classes
  7. Exercícios: header semântico
  8. CSS Reset
  9. Block vs Inline
  10. Exercícios: reset e display
  11. Position: static, relative, absolute
  12. Exercícios: posicionamento
  13. Para saber mais: suporte HTML5 no Internet Explorer antigo
  14. Exercícios opcionais

Mais HTML e CSS

  1. Analisando o miolo da página
  2. Formulários
  3. Posicionamento com float e clear
  4. Decoração de texto com CSS
  5. Cascata e herança no CSS
  6. Para saber mais: o valor inherit
  7. Exercícios: menu e destaque
  8. Display inline-block
  9. Exercícios: painéis flutuantes
  10. Seletores de atributo do CSS3
  11. Rodapé
  12. Substituição por Imagem
  13. Estilização e posicionamento do rodapé
  14. Exercícios: rodapé
  15. Exercícios opcionais

CSS Avançado

  1. Seletores avançados
  2. Pseudo-classes
  3. Pseudo elementos
  4. Exercícios: seletores e pseudo-classes
  5. Exercícios opcionais
  6. CSS3: border-radius
  7. CSS3: text-shadow
  8. CSS3: box-shadow
  9. Opacidade e RGBA
  10. Prefixos
  11. CSS3: Gradientes
  12. Progressive Enhancement
  13. Exercícios: visual CSS3
  14. CSS3 Transitions
  15. CSS3 Transforms
  16. Exercícios: CSS3 transform e transition
  17. Para saber mais: especificidade de seletores CSS

Web para dispositivos móveis

  1. Site mobile ou mesmo site?
  2. CSS media types
  3. CSS3 media queries
  4. Viewport
  5. Exercícios: adaptações para mobile
  6. Responsive Web Design
  7. Mobile-first
  8. Exercícios opcionais: versão tablet

Introdução a PHP

  1. Libertando o HTML de suas limitações
  2. Como funciona um servidor HTTP
  3. Como funciona o PHP no servidor
  4. Para saber mais: instalação do PHP em casa
  5. Exercícios: executando o PHP
  6. Reaproveitamento de código com include
  7. Exercícios: include
  8. Para saber mais: ainda mais flexibilidade com variáveis
  9. Exercícios opcionais: variáveis em PHP

Progressive enhancement e mobile-first

  1. Formulário de compra
  2. Exercício: formulário da página de produto
  3. Design mobile-first
  4. Progressive enhancement
  5. Box model e box-sizing
  6. Exercícios: página de produto
  7. Evoluindo o design para desktop
  8. Media queries de conteúdo
  9. Exercícios: responsive design
  10. HTML5 Input range
  11. Exercícios: seletor de tamanho
  12. Tabelas
  13. Exercícios: detalhes
  14. Exercícios opcionais: fundo
  15. Discussão em aula: importância do Progressive Enhancement na Web atual

PHP: parâmetros e páginas dinâmicas

  1. Submissão do formulário
  2. Parâmetros com PHP
  3. Listas de definição no HTML
  4. Exercícios: checkout da compra
  5. Exercícios opcionais

Bootstrap e formulários HTML5

  1. Bootstrap e frameworks de CSS
  2. Estilo e componentes base
  3. A página de checkout da Mirror Fashion
  4. Exercício opcional: início do checkout sem PHP
  5. Exercícios: página de checkout
  6. Formulários a fundo
  7. Novos componentes do HTML5
  8. Novos atributos HTML5 em elementos de formulário
  9. Ícones com glyphicons
  10. Exercícios: formulários
  11. Validação HTML5
  12. Para saber mais: controlando as validações HTML5
  13. Exercícios: validação com HTML5
  14. Grid responsivo do Bootstrap
  15. Exercícios: grids
  16. Para saber mais: componentes JS do Bootstrap
  17. Exercícios opcionais: navbar e JavaScript
  18. Para saber mais: outros frameworks CSS
  19. Discussão em aula: os problemas do Bootstrap e quando não usá-lo

JavaScript e interatividade na Web

  1. Características da linguagem
  2. A tag script
  3. Console do navegador
  4. Sintaxe básica
  5. Operadores
  6. Tipos de dados
  7. Exercícios opcionais: fixação de sintaxe
  8. Exercícios: formatando um número
  9. Comparações
  10. Blocos condicionais
  11. Funções
  12. Exercícios: tornando nosso formatador reutilizável
  13. Interatividade na Web
  14. Exercício: Calculando o total da compra
  15. Array
  16. Blocos de Repetição
  17. Funções temporais
  18. Exercício opcional: banner rotativo
  19. Para saber mais: vários callbacks no mesmo elemento

jQuery

  1. jQuery - A função $
  2. jQuery Selectors
  3. Filtros customizados e por DOM
  4. Utilitário de iteração do jQuery
  5. Características de execução
  6. Mais produtos na home
  7. Exercícios: jQuery na home
  8. O elemento output do HTML5
  9. Exercícios: mostrando tamanho do produto com jQuery
  10. Plugins jQuery
  11. Exercícios: plugin
  12. Exercícios opcionais

Integrações com serviços Web

  1. Web 2.0 e integrações
  2. iframes
  3. Vídeo embutido com YouTube
  4. Exercícios: iframe
  5. Exercício opcional: Google Maps
  6. Fontes customizadas com @font-face
  7. Serviços de web fonts
  8. Exercícios: Google Web Fonts

Apêndice - Otimizações de front-end

  1. HTML e HTTP - Como funciona a World Wide Web?
  2. Princípios de programação distribuída
  3. Ferramentas de diagnóstico - YSlow e PageSpeed
  4. Compressão e minificação de CSS e JavaScript
  5. Compressão de imagens
  6. Diminuir o número de requests
  7. Juntar arquivos CSS e JS
  8. Image Sprites
  9. Para saber mais
  10. Exercícios: otimizações Web

Apêndice - LESS

  1. Variáveis
  2. Contas
  3. Hierarquia
  4. Funções de cores e palhetas automáticas
  5. Reaproveitamento com mixins
  6. Executando o LESS
  7. Para saber mais: recursos avançados e alternativas
  8. Exercícios: LESS

Apêndice - PHP: Banco de dados e SQL

  1. MySQL e phpMyAdmin
  2. Para saber mais: instalação do MySQL em casa
  3. Buscas no MySQL com PHP
  4. Refinando as buscas com WHERE
  5. Exercícios: phpMyAdmin
  6. Exercícios: PHP com MySQL
  7. Busca de muitos resultados
  8. Ordenação dos resultados
  9. Exercícios: mais buscas com PHP
  10. Exercícios opcionais

Apêndice - Subindo sua aplicação no cloud

  1. Como escolher um provedor
  2. O Jelastic Cloud Locaweb
  3. Criando a conta
  4. Importando dados no MySQL
  5. Preparando o projeto
  6. Enviando o projeto e inicializando servidor

Apêndice - Mais integrações com serviços Web

  1. Botão de curtir do Facebook
  2. Exercícios: Facebook
  3. Para saber mais: Twitter
  4. Para saber mais: Google+
  5. Exercícios opcionais: Twitter e Google+


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