Apostilhas da Caelum (BR)

Curso de HTML, CSS e Javascript

Índice: www.caelum.com.br/apostila-html-css-javascript/

Apostilha online: www.caelum.com.br/apostila-html-css-javascript/introducao-a-html-e-css/

Apostilhas gratuitas para download (Disponíveis em PDF, MOBI e EPUB):

www.caelum.com.br/apostilas/?utm_source=Apostila_HTML&utm_campaign=WD-43&utm_medium=referral

Ver anexos com os formatos Disponíveis em PDF, MOBI e EPUB:

Índice

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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