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
    1. 16 Exercício: Usando classes para evitar acoplamento de estilos
      1. 16.1 Objetivo
      2. 16.2 Passo a passo com código
    2. 17 Elementos estruturais e semântica dos elementos
      1. 18 Exercício: Semantica em primeiro lugar
        1. 18.1 Objetivo
        2. 18.2 Passo a passo com código
      2. 19 Conhecendo padrões de CSS
        1. 19.1 Tipos de display
      3. 20 Exercício: Treinando display e nomenclatura de classes
        1. 20.1 Objetivo
        2. 20.2 Passo a passo com código
      4. 21 Exercício: Um pouco sobre estilização com blocos
        1. 21.1 Objetivo
        2. 21.2 Passo a passo com código
      5. 22 Exercício: Modificadores
        1. 22.1 Objetivo
        2. 22.2 Passo a passo com código
      6. 23 Unidades relativas com EM e REM
        1. 24 Exercício: Medidas relativas em e rem
          1. 24.1 Objetivo
          2. 24.2 Passo a passo com código
        2. 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
        3. 26 Exercício: Responsividade com viewport e unidades relativas
          1. 26.1 Objetivo
          2. 26.2 Passo a passo com código
        4. 27 Exercício: Responsividade com `@media`
          1. 27.1 Objetivo
          2. 27.2 Passo a passo com código
        5. 28 O processo de desenvolvimento de uma tela
          1. 28.1 Analisando o Layout
        6. 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
        7. 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
        8. 31 Exercício: Começando a estilizar o `header` da home
          1. 31.1 Objetivo
          2. 31.2 Passo a passo com código
        9. 32 Progressive Enhancement
          1. 32.1 Condições, opções, limitações e restrições
        10. 33 Exercício: Progressive Enhancement
          1. 33.1 Objetivo
          2. 33.2 Passo a passo com código
        11. 34 Display Flex
          1. 34.1 Flex Container
        12. 35 Exercício: Novos Layouts com Flexbox
          1. 35.1 Objetivo
          2. 35.2 Passo a passo com código
        13. 36 Exercício: Novos Layouts com Flexbox B
          1. 36.1 Objetivo
          2. 36.2 Passo a passo com código
        14. 37 Responsividade e Fallback
          1. 38 Exercício: Responsividade e fallback
            1. 38.1 Objetivo
            2. 38.2 Passo a passo com código
          2. 39 Exercício: Desafio: crie o HTML do rodapé
            1. 39.1 Objetivo
            2. 39.2 Passo a passo com código
          3. 40 Exercício: Conteúdo Rodapé
            1. 40.1 Objetivo
            2. 40.2 Passo a passo com código
          4. 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
          5. 42 Exercício: O formulário de newsletter do rodapé
            1. 42.1 Objetivo
            2. 42.2 Passo a passo com código
          6. 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
          7. 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
          8. 45 Exercício: O componente container
            1. 45.1 Objetivo
            2. 45.2 Passo a passo com código
          9. 46 Display: grid
            1. 46.1 grid-template-columns
            2. 46.2 grid-template-rows
          10. 47 Exercício: Conteúdo principal - a vitrine de cursos
            1. 47.1 Objetivo
            2. 47.2 Passo a passo com código
          11. 48 Exercício: Conteúdo Principal
            1. 48.1 Objetivo
            2. 48.2 Passo a passo com código
          12. 49 Exercício: Conteúdo principal (opcional) - os planos
            1. 49.1 Objetivo
            2. 49.2 Passo a passo com código
          13. 50 Exercício: Conteúdo Principal - os benefícios
            1. 50.1 Objetivo
            2. 50.2 Passo a passo com código
          14. 51 Exercício: Conteúdo Principal (opcional) - chamada youtube
            1. 51.1 Passo a passo com código
          15. 52 Exercício: Conteúdo Principal - chamada dos aplicativos
            1. 52.1 Objetivo
            2. 52.2 Passo a passo com código
          16. 53 Bootstrap e frameworks de CSS
            1. 53.1 Estilo e componentes base
          17. 54 Exercício: Primeiros passos com Bootstrap
            1. 54.1 Objetivo
            2. 54.2 Passo a passo com código
          18. 55 Exercício: Customizando o Bootstrap (opicional)
            1. 55.1 Objetivo
            2. 55.2 Passo a passo com código
          19. 56 Exercício: A tabela de cursos
            1. 56.1 Objetivo
            2. 56.2 Passo a passo com código
          20. 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
          21. 58 Exercício: Calculando total de horas e cursos com JavaScript
            1. 58.1 Objetivo
            2. 58.2 Passo a passo com código
          22. 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`