05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

VER PLANOS

APOSTILA

DESENVOLVIMENTO 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 ``
[Link] 1/10
05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

5.4 A instrução DOCTYPE

VER PLANOS
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
[Link] 2/10
05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

15 Desacoplamento com classes

16 Exercício: Usando classes para evitar acoplamento de estilos VER PLANOS
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
[Link] 3/10
05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

27 Exercício: Responsividade com `@media`

27.1 Objetivo VER PLANOS
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

[Link] 4/10
05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

38 Exercício: Responsividade e fallback

38.1 Objetivo VER PLANOS
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
[Link] 5/10
05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

48 Exercício: Conteúdo Principal

48.1 Objetivo VER PLANOS
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
[Link] 6/10
05/06/2026, 20:06 Desenvolvimento Web com HTML, CSS e JavaScript | Alura

57.6 JavaScript em arquivo externo

57.7 Mensagens no console VER PLANOS
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`

Nossas redes e apps

[Link] 7/10