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 JavaScripts corretos e funcionais. 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, 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 para mobile 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.

Esse curso faz parte da Formação Web junto com o WD-47.

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.

Posts relacionados no blog

Sobre o curso - o complexo mundo do front-end

1. O curso e os exercícios
2. O projeto de ecommerce
3. Tirando dúvidas
4. Bibliografia
5. 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. Estilizando com CSS
6. Imagens
7. A estrutura dos arquivos de um projeto
8. Editores e IDEs
9. Primeira página
10. Exercícios: primeiros passos com HTML
11. Listas HTML
12. Espaçamento e margem
13. Exercícios: listas e margens
14. Links HTML
15. Exercícios: links
16. Elementos estruturais
17. CSS: Seletores de ID e filho
18. Exercícios: seletores CSS
19. Fluxo do documento e float
20. Exercícios: flutuação de elementos
21. O futuro e presente da Web com o HTML5

Avançando no HTML e CSS

1. O processo de desenvolvimento de uma tela
2. O projeto MirrorFashion
3. Analisando o Layout
4. HTML semântico
5. Pensando no header
6. Substituição por Imagem
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. Mais CSS
5. Cascata e herança
6. Exercícios: menu e destaque
7. Display inline-block
8. Exercícios: painéis flutuantes
9. Seletores de atributo do CSS3
10. Rodapé
11. Exercícios: rodapé
12. Para saber mais: suporte HTML5 no Internet Explorer antigo
13. 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. Exibindo conteúdo com JS
8. Exercício: mais conteúdo com JS
9. Funções temporais
10. Exercício: banner rotativo
11. 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. Progressive Enhancement
12. Exercícios: visual CSS3
13. CSS3 Transitions
14. CSS3 Transforms
15. Exercícios: CSS3 transform e transition
16. Exercícios opcionais
17. Para saber mais: especificidade de seletores CSS

Formulários HTML

1. Novos componentes do HTML5
2. Exercícios: formulário de contato
3. CSS3: Gradientes
4. Exercícios: estilização do formulário
5. Novos atributos em elementos de formulário
6. Validação HTML5
7. Exercícios: HTML5 e CSS3 no formulário
8. Exercícios opcionais
9. Para saber mais: controlando as validações HTML5

jQuery

1. Produtos da loja
2. Exercícios: página de produtos
3. Iniciando o uso do jQuery - A funcão $
4. jQuery Selectors
5. Filtros customizados e por DOM
6. Utilitário de iteração do jQuery
7. Características de execução
8. Exercícios: escolhendo a cor com jQuery
9. Exercícios opcionais
10. jQueryUI e outros plugins
11. Exercícios: abas com jQuery UI
12. Tabelas
13. Exercícios opcionais

Integrações com serviços Web

1. Web 2.0 e integrações
2. iframes
3. Mapa embutido com Google Maps
4. Exercícios: Google Maps
5. Botão de curtir do Facebook
6. OpenGraph e web semântica
7. Exercícios: Facebook
8. Exercícios: OpenGraph
9. Para saber mais: Twitter
10. Para saber mais: Google+
11. Exercícios opcionais
12. Para saber mais: microformatos
13. Fontes customizadas com @font-face
14. Serviços de web fonts
15. Exercícios: Google Web Fonts

Web para dispositivos móveis

1. Site mobile ou mesmo site?
2. CSS media types
3. CSS3 media queries
4. Viewport
5. Ícone para home screen
6. Exercícios: mobile site
7. Exercícios opcionais

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 opcionais: otimizações

Apêndice - Referência CSS

1. Formatação de backgrounds
2. Margens e centralização
3. Bordas e Outlines
4. Formatação de Texto e Fontes
5. Alinhamento e decoração de texto
6. Display
7. Posicionando elementos
8. Float
9. Flutuação e o fluxo do documento
10. Propriedade Clear
11. Para saber mais: CSS Media

Apêndice - Referência sobre HTML

1. Anatomia de um documento HTML
2. DOCTYPEs
3. Elementos obrigatórios
4. Tags e estruturas do HTML
5. Tags de conteúdo
6. Tag de recurso
7. Parágrafos
8. Títulos
9. Listas
10. Divisões
11. Links e Bookmarks
12. Marcações de ênfase
13. Marcação de atributo
14. Meta tags e configurações do documento
15. Caracteres especiais e Entidades HTML