ApostilaDesenvolvimento Web com HTML, CSS e JavaScript
sumário-
1 A estrutura dos arquivos de um projeto
-
1.1 Web site ou aplicação Web?
-
1.2 Editores e IDEs
-
2 Exercício: Baixando os arquivos do curso
-
2.1 Objetivo
-
2.2 Passo a passo com código
-
3 Introdução ao HTML
-
3.1 Exibindo informações na Web
-
3.2 Sintaxe do HTML
-
3.3 Tags HTML
-
3.4 Imagens
-
3.5 Primeira página
-
4 Exercício: Primeiros passos com HTML
-
4.1 Objetivo
-
4.2 Passo a passo com código
-
5 Estrutura de um documento HTML
-
5.1 A tag ``
-
5.2 A tag ``
-
5.3 A tag ``
-
5.4 A instrução DOCTYPE
-
6 Exercício: A Especificação HTML
-
6.1 Objetivo
-
6.2 Passo a passo com código
-
7 Estilizando com CSS
-
7.1 Sintaxe e inclusão de CSS
-
7.2 Propriedades tipográficas e fontes
-
7.3 Alinhamento e decoração de texto
-
7.4 Imagem de fundo
-
7.5 Bordas
-
7.6 Cores na Web
-
8 Exercício: Mudando o visual da nossa página
-
8.1 Objetivo
-
8.2 Passo a passo com código
-
9 Espaçamentos e dimensões
-
9.1 Dimensões
-
9.2 Espaçamentos
-
10 Exercício: Trabalhando com tamanhos e espaçamento
-
10.1 Objetivo
-
10.2 Passo a passo com código
-
11 Listas HTML
-
11.1 Listas de definição
-
11.2 Links no HTML
-
12 Exercício: Usando links e listas
-
12.1 Objetivo
-
12.2 Passo a passo com código
-
13 Seletores mais específicos e herança
-
13.1 Para saber mais: o valor inherit
-
14 Exercício: Selecionando elementos mais específicos e herança
-
14.1 Objetivo
-
14.2 Passo a passo com código
-
15 Desacoplamento com classes
-
16 Exercício: Usando classes para evitar acoplamento de estilos
-
16.1 Objetivo
-
16.2 Passo a passo com código
-
17 Elementos estruturais e semântica dos elementos
-
18 Exercício: Semantica em primeiro lugar
-
18.1 Objetivo
-
18.2 Passo a passo com código
-
19 Conhecendo padrões de CSS
-
19.1 Tipos de display
-
20 Exercício: Treinando display e nomenclatura de classes
-
20.1 Objetivo
-
20.2 Passo a passo com código
-
21 Exercício: Um pouco sobre estilização com blocos
-
21.1 Objetivo
-
21.2 Passo a passo com código
-
22 Exercício: Modificadores
-
22.1 Objetivo
-
22.2 Passo a passo com código
-
23 Unidades relativas com EM e REM
-
24 Exercício: Medidas relativas em e rem
-
24.1 Objetivo
-
24.2 Passo a passo com código
-
25 Site mobile ou mesmo site?
-
25.1 CSS media types
-
25.2 CSS3 media queries
-
25.3 Viewport
-
25.4 Responsive Web Design
-
25.5 Mobile-first
-
26 Exercício: Responsividade com viewport e unidades relativas
-
26.1 Objetivo
-
26.2 Passo a passo com código
-
27 Exercício: Responsividade com `@media`
-
27.1 Objetivo
-
27.2 Passo a passo com código
-
28 O processo de desenvolvimento de uma tela
-
28.1 Analisando o Layout
-
29 Exercício: Estrutura da página principal e o cabeçalho
-
29.1 Objetivo
-
29.2 Passo a passo com código
-
30 Estilizando o header da home
-
30.1 CSS Reset
-
30.2 Fontes Próprias
-
30.3 Modularizando Componentes com CSS Isolados
-
31 Exercício: Começando a estilizar o `header` da home
-
31.1 Objetivo
-
31.2 Passo a passo com código
-
32 Progressive Enhancement
-
32.1 Condições, opções, limitações e restrições
-
33 Exercício: Progressive Enhancement
-
33.1 Objetivo
-
33.2 Passo a passo com código
-
34 Display Flex
-
34.1 Flex Container
-
35 Exercício: Novos Layouts com Flexbox
-
35.1 Objetivo
-
35.2 Passo a passo com código
-
36 Exercício: Novos Layouts com Flexbox B
-
36.1 Objetivo
-
36.2 Passo a passo com código
-
37 Responsividade e Fallback
-
38 Exercício: Responsividade e fallback
-
38.1 Objetivo
-
38.2 Passo a passo com código
-
39 Exercício: Desafio: crie o HTML do rodapé
-
39.1 Objetivo
-
39.2 Passo a passo com código
-
40 Exercício: Conteúdo Rodapé
-
40.1 Objetivo
-
40.2 Passo a passo com código
-
41 Exercício: Espaçando o conteúdo do rodapé - os detalhes nas entrelinhas e margens
-
41.1 Objetivo
-
41.2 Passo a passo com código
-
42 Exercício: O formulário de newsletter do rodapé
-
42.1 Objetivo
-
42.2 Passo a passo com código
-
43 Exercício: Embaralhando os itens do rodapé em telas maiores com Flexbox
-
43.1 Objetivo
-
43.2 Passo a passo com código
-
44 Exercício: Rodapé em telas grandes sem sobrescrever tudo o que veio antes
-
44.1 Objetivo
-
44.2 Passo a passo com código
-
45 Exercício: O componente container
-
45.1 Objetivo
-
45.2 Passo a passo com código
-
46 Display: grid
-
46.1 grid-template-columns
-
46.2 grid-template-rows
-
47 Exercício: Conteúdo principal - a vitrine de cursos
-
47.1 Objetivo
-
47.2 Passo a passo com código
-
48 Exercício: Conteúdo Principal
-
48.1 Objetivo
-
48.2 Passo a passo com código
-
49 Exercício: Conteúdo principal (opcional) - os planos
-
49.1 Objetivo
-
49.2 Passo a passo com código
-
50 Exercício: Conteúdo Principal - os benefícios
-
50.1 Objetivo
-
50.2 Passo a passo com código
-
51 Exercício: Conteúdo Principal (opcional) - chamada youtube
-
51.1 Passo a passo com código
-
52 Exercício: Conteúdo Principal - chamada dos aplicativos
-
52.1 Objetivo
-
52.2 Passo a passo com código
-
53 Bootstrap e frameworks de CSS
-
53.1 Estilo e componentes base
-
54 Exercício: Primeiros passos com Bootstrap
-
54.1 Objetivo
-
54.2 Passo a passo com código
-
55 Exercício: Customizando o Bootstrap (opicional)
-
55.1 Objetivo
-
55.2 Passo a passo com código
-
56 Exercício: A tabela de cursos
-
56.1 Objetivo
-
56.2 Passo a passo com código
-
57 Um pouquinho da história do JavaScript
-
57.1 História
-
57.2 Características da linguagem
-
57.3 Console do navegador
-
57.4 Sintaxe básica
-
57.5 A tag script
-
57.6 JavaScript em arquivo externo
-
57.7 Mensagens no console
-
57.8 DOM: sua página no mundo JavaScript
-
57.9 querySelector
-
57.10 Elemento da página como variável
-
57.11 querySelectorAll
-
57.12 Alterações no DOM
-
57.13 Funções e os eventos do DOM
-
57.14 Funções Anônimas
-
57.15 Manipulando strings
-
57.16 Imutabilidade
-
57.17 Conversões
-
57.18 Manipulando números
-
57.19 Concatenações
-
58 Exercício: Calculando total de horas e cursos com JavaScript
-
58.1 Objetivo
-
58.2 Passo a passo com código
-
59 Propriedades CSS
-
59.1 Propriedade `font`
-
59.2 Propriedade `text`
-
59.3 Propriedade `letter-spacing`
-
59.4 Propriedade `line-height`
-
59.5 Propriedades de cor
-
59.6 Propriedade `background`
-
59.7 Propriedade `border`
-
59.8 Propriedade `vertical-align`
-
59.9 Propriedades `width` e `height`
-
59.10 Propriedade `box-sizing`
-
59.11 Propriedade `overflow`