Primeiros passos com HTML5 + CSS3

Aprenda HTML5 e CSS3 de forma simples e descontraída criando um site responsivo do “zero”, usando apenas um editor de textos e um navegador de internet. Este curso é ponto de partida a todos que desejam aprender a desenvolver para WEB.

 

História da Internet

A história em quadrinhos abaixo explica de forma divertida como surgiu a Internet. (clique para ler)

 

 

Primeiro site da Internet:

primeiro-web-site

HTML5

O Slide abaixo explica as diferentes versões do HTML:

 

 

Aula 1 – Introdução ao HTML5

Nesta aula vamos preparar o ambiente de desenvolvimento usando apenas os recursos do próprio Windows (editor de textos e navegador de Internet) e criar nosso primeiro código em HTML5.

 

 

Aula 2 – Meta Tags, SEO, favicon

Nesta aula vou passar algumas dicas de SEO, inserir um favicon e ensinar as principais TAGs para estruturar um texto no HTML5.

 

Aula 3 – Planejamento de um site responsivo

Nesta aula vamos aprender a planejar um site com layout responsivo, conhecer as principais TAGs do HTML5 para estruturação do site e também fazer links de páginas.

 

Aula 4 – Conteúdo

Nesta aula, vamos aprender a inserir imagens, vídeo e links especiais (download, email, etc).

 

 

Aula 5 – Introdução ao CSS

Nesta aula vamos entender como funciona o CSS e começar a aplicar estilos no site.

 

 

Aula 6 – Menu e Layout Responsivo

Nesta aula vamos criar um menu e layout responsivo usando o CSS.

 

 

ATENÇÃO:
Acrescente a linha abaixo dentro do cabeçalho <head></head> de todas as páginas para o perfeito funcionamento do layout responsivo em todos os dispositivos:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
 

Referências e material extra

 

Vídeo Aula – Como usar o Zen Coding no Notepad++

Simplifique o desenvolvimento do projeto usando o Notepad++ com o plugin Zen Coding.

 

 

Como funcionam os navegadores da Web

Este vídeo explica os bastidores do funcionamento de um navegador de internet.

 

 

Acessibilidade na WEB

 

O consórcio W3C Brasil disponibiliza uma sensacional cartilha sobre acessibilidade na WEB (clique na imagem abaixo para fazer o download gratuito)

 

Design Responsivo

 

 

O site abaixo traz referências de “pontos de quebra” para desenvolvimento do Design Responsivo:

 

Cores

Clique na imagem abaixo e assista a uma sensacional animação que explica sobre o significado das cores. Clique em start e selecione a porta do meio para assistir os vídeos.

 

 

O slide abaixo explica como calcular o código hexadecimal das cores:

 

 

Box Model CSS

 

 

Tabela de conversão

 

Sites de referência: