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 servidor com PHP e banco de dados;
  • 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 e bancos de dados, com foco no programador front-end.

Veja também a ementa detalhada do curso.

Pré-requisitos

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.

40horas aula

A opinião de quem fez

O conhecimento do instrutor. Ótima explicação. Adquiri experiência conforme ele montava as aulas, explicando passo a passo o objetivo, para que serve todos os detalhes, e isso fez com que pudéssemos praticar juntos com instrutor. Acredito que na lousa é melhor para aprender.

Thais Gallardo Caro de Moraes

O curso surpreendeu pela quantidade e qualidade do conteúdo, ministrado com dinâmica e praticidade, estimulando a interação do aluno.

Valdomiro Guilherme dos Reis Junior

Bom, curso ótimo, só coisas boas a falar, com certeza vou indicar para todos. Valeu muito o investimento.

Arthur Willian Ferreira Brito

Próximas turmas

DataPeríodoCidadeComentário
08/09 a 12/09Integral (9h às 17h)Rio de Janeiro Vagas esgotadas.
27/09 a 25/10Sábado (9h às 17h)Rio de Janeiro Inscrições abertas
29/09 a 10/10Noturno (19h às 23h)São Paulo
06/10 a 10/10Integral (9h às 17h)São Paulo
18/10 a 15/11Sábado (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 - 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. 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. Para saber mais: suporte HTML5 no Internet Explorer antigo
  16. Exercícios opcionais

JavaScript e interatividade na Web

  1. Introdução ao JavaScript
  2. Console do navegador
  3. Sintaxe básica
  4. Exercícios opcionais: fixação de sintaxe
  5. Interatividade na Web
  6. Exercício: validação na busca com JS
  7. Funções temporais
  8. Exercício: banner rotativo
  9. Para saber mais: sugestão para o desafio de pause/play
  10. Para saber mais: vários callbacks no mesmo elemento

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 bancos de dados

  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
  6. Banco de dados e SQL
  7. MySQL e phpMyAdmin
  8. Para saber mais: instalação do MySQL em casa
  9. Buscas no MySQL com PHP
  10. Refinando as buscas com WHERE
  11. Exercícios: phpMyAdmin
  12. Exercícios: PHP com MySQL
  13. Busca de muitos resultados
  14. Ordenação dos resultados
  15. Exercícios: mais buscas com PHP
  16. 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

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 - 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.