webEssentials

Esse repositório contém conteúdo relativo a construção de páginas Web com HTML, CSS e Javascript.

O conteúdo se baseia primariamente sobre o MDN e W3 Schools, mas outros materiais poderão ser usados.

Roadmap

O roadmap apresenta uma visão geral dos conceitos que serão aprendidos neste curso.

flowchart TD
    A["Diferença entre<br>Web e Internet"]
    B["Introdução ao Protocolo<br>HTTP e linguagem HTML"]
    
    A --> B
    B --> HTML

    subgraph HTML[HTML]
        direction TB
        C1["head e body"]
        C2["tags do header"]
        C3["tags do body"]
        C4["SEO, acessibilidade e containers<br>(div, header, main)"]

        C1 --> C2
        C2 --> C3
        C3 --> C4
        
    end

    subgraph CV["Controle de Versão"]
        direction TB
        D1["Introdução<br>ao git"]
        D2["Introdução<br>ao GitHub"]
        D3["Github Pages"]

        D1 --> D2
        D2 --> D3
    end

    B --> CV

    subgraph CSS["CSS"]
        direction TB
        E1["Introdução<br>ao CSS"]
        E2["customização de tag,<br>classe, id e pseudoclasse"]
        E3["importação de CSS<br>inline, interna e externa"]
        E4["precedência"]
        E5["box model"]
        E6["flexbox e layout responsivo"]
        
        E1 --> E2
        E2 --> E3
        E3 --> E4
        E4 --> E5
        E5 --> E6
    end

    HTML --> CSS

    subgraph JS["Javascript"]
        direction TB
        F1["Introdução ao Javascript"]
        F2["importação de Javascript<br>interno e externo"]
        F3["sintaxe"]
        F4["funções e eventos"]
        F5["formulários em HTML com Javascript"]
        F6["Document Object Model"]
        F7["cookies e localStorage"]

        F1 --> F2
        F2 --> F3
        F3 --> F4
        F4 --> F5
        F5 --> F6
        F6 --> F7
    end

    CSS --> JS

Conteúdo original

A seção de conteúdo original possui material elaborado pelo professor Henry Cagnini para essa disciplina. Ele não deve ser abordado como a totalidade do conhecimento sobre o assunto, mas sim como assuntos pontuais para os quais uma maior atenção deve ser dada durante o aprendizado.

O conteúdo original pode ser encontrado no diretório Capítulos.

Conteúdo externo

Essa seção organiza o conhecimento que será visto na disciplina, a partir de fontes externas. Novamente, não deve ser considerado a totalidade do material sobre o assunto, mas sim como um fio condutor do que será visto.

• Fundamentos Web
• Design de sites
• HTTP
• HTML
• CSS
• Javascript
• Execícios
• Outros recursos

Fundamentos Web

Apostila (disponível junto com o repositório)

• Como tudo começou (pp. 15-20)

Design de sites

• Princípios fundamentais de web design
• Heurísticas de Nielsen

HTTP

• Visão geral
• HTTP, HTML e protocolo REST

HTML

• Introdução
• Metadados do cabeçalho
• Elementos textuais
• Hyperlinks
• Mais sobre elementos textuais
• Organizando estruturalmente a página
• Tabelas em HTML (em inglês)
• Formulários (em inglês)
  • Todos os tipos de formulário (em inglẽs)
  • Todos os tipos de input (em inglẽs)

CSS

• O que é CSS?
• Começando com CSS
• Como o CSS é estruturado
• Como o CSS funciona
• Estilizando texto (em inglês)
• Estilizando listas
• Estilizando links (em inglês)
• Fontes da Web (em inglês)
• Cascata e herança
• O modelo em caixa (MDN, em inglês)
• O modelo em caixa (W3 schools, em inglês)
• Seletores em CSS
• Outros tópicos sobre CSS

Javascript

• O que é Javascript?
• Pensando em Javascript
• O que deu errado? Solução de problemas
• Variáveis
• Números e operadores
• Condicionais: if, else
• Laços de repetição
• Strings
  • Básico
  • Métodos úteis
• Arrays
• Funções
  • Construindo uma função
  • Retorno de valores de uma função
• Objetos
• Eventos
  • Adicionando eventos
• Document Object Model

Exercícios

• HTML, CSS
  • Vai dar namoro em HTML
  • Vai dar namoro em CSS
  • Reproduzir site do Bing em HTML + CSS
  • Exercício do Box model com Cavaleiros do Zodíaco
• Javascript
  • Exercícios sobre funções
  • Botões
    • Gabarito
  • Document Object Model
    • Gabarito
  • Desenhando um labirinto com Javascript
    • Animando o Pacman
  • Event Listener
    • Gabarito
  • Arrays
  • Strings
  • Cookies
    • Gabarito

Outros recursos

Abaixo estão outros recursos que podem lhe auxiliar a aprender desenvolvimento Web. Apesar deste não ser o conteúdo que será cobrado em provas e trabalhos, ele pode ajudar e muito no seu aprendizado do conteúdo.

• Hora do Código: Minecraft (em inglês)
• Fundação Bradesco
• Grasshopper
• Ferramenta para construção de layouts em HTML