Apostila

Desenvolvimento Web com HTML, CSS e JavaScript

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