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.
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
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.
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.
Apostila (disponível junto com o repositório)
- 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)
- 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
- 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
- Arrays
- Funções
- Objetos
- Eventos
- Document Object Model
- Cookies (em inglês)
- HTML, CSS
- Javascript
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.