Guia de HTML5, CSS3 e JavaScript

Módulo 01 - HTML5 Básico

• Início de Html

  • Boas vindas
  • Conhecendo o site
  • Primeiras Aulas
  • Material de Apoio

• Imagens

  • Extensões de imagens
  • Direitos Autorais
  • Tamanho das Imagens
  • Tag para Imagens
  • Atalhos e Boas Práticas
  • Favicon

• Tags Semânticas no HTML5

  • Voltar ao topo
  • Introdução
  • Tags Semânticas e Não Semânticas
  • Elementos do Head
  • Tag title
  • Metatags
  • Elementos do Body
  • Tags de Menor Valor

• Formatação de texto Html

  • Negrito
  • Itálico
  • Marca texto
  • Sublinhado
  • Tachado
  • Texto sobrescrito
  • Texto subescrito
  • Texto pequeno
  • Código fonte
  • Texto pré-formatado
  • Citação simples
  • Citação completa
  • Abreviações
  • Texto invertido

• Listas

  • Listas não ordenadas
  • Adicionando estilo "Type"
  • Listas ordenadas
  • Adicionando estilo "Type"
  • Iniciando em outra ordem "Start"
  • Iniciando em ordem inversa
  • Mesclando listas
  • Lista de definições
  • Adicionando estilo "Type"
  • Listas ordenadas
  • Adicionando estilo "Type"
  • Iniciando em outra ordem "Start"
  • Iniciando em ordem inversa
  • Mesclando listas
  • Lista de definições

• Links em HTML5

  • Introdução aos Links
  • Atributos da Tag <a>
  • Atributo Target
  • Atributo Rel
  • Atributo Download
  • Links Internos
  • Links para Contatos
  • Links Dentro de Páginas

• Imagens, Áudios e Vídeos no HTML5

  • Imagens Flexíveis
  • Introdução
  • Tag picture
  • Tag source media type
  • Tag Figure e figcaption
  • Exemplo Figure e figcaption
  • Imagens Responsivas com CSS
  • Estilos Imagens Responsivas
  • Centralização de Imagens
  • Áudios no HTML5
  • Direitos Autorais de Áudios
  • Adicionando Áudios no HTML
  • Usando Múltiplos Formatos de Áudio
  • Vídeos
  • Direitos Autorais de Vídeos
  • Principais Formatos de Vídeos para HTML
  • Hospedagem de Vídeos no Próprio Site
  • Tag Video
  • Principais Atributos da Tag Video

Módulo 02 - CSS3 Básico

• CSS3 Style

  • Estilo CSS3 Inline
  • Estilo CSS3 Interno
  • Estilo CSS3 Externo
    • Criando o Link CSS
  • Hierarquia de Estilos CSS3

• Cores

  • Representação de Cores
  • Por nomes das cores em inglês
  • Por código RGB ou RGBA
  • Hexadecimal
  • HSLA
  • Psicologia das Cores
  • Harmonização de Cores
  • Ferramenta para descobrir cores

• Tipografia e Fontes no CSS

  • Introdução à Tipografia
  • Fontes Serifadas
  • Fontes Sans-Serif
  • Fontes Monoespaçadas
  • Fontes Script
  • Fontes Display
  • Combinações Seguras de Fontes
  • Unidades de Medida no CSS3
  • Line Height (altura da linha)
  • Compatibilidade de Fontes em Navegadores
  • Google Fonts
  • Estilos de Fontes no CSS
  • Variação de Fontes
  • Transformação de Texto
  • Shorthand de Fontes
  • Alinhamento de Texto
  • Sombras em Texto
  • Detectando Fontes

• Seletores CSS

  • ID
  • Classe
  • Pseudo-classes
  • Pseudo-elementos
  • Hierarquia CSS

• Modelo de Caixas

  • Introdução
  • Width
  • Height
  • Padding
  • Border
  • Outline
  • Margin
  • Ferramenta de Desenvolvedor
  • Shorthand
  • Sombras
  • Bordas Decoradas

Módulo 03 CSS3 Intermediário e GitHub

• Git e GitHub

  • Git
  • GitHub
  • Criando novas versões
  • Modificar de privado para público e vice-versa
  • Como apagar repositório local
  • Como apagar repositório remoto
  • GitHub Pages
  • Hospedagem gratuita
  • Hospedar vários projetos
  • Clonando projeto no GitHub

• Background

  • Background com Imagens
  • Background-repeat
  • Background-position
  • Background-size
  • Background-attachment
  • Shorthand de Background
  • Background-origin
  • Background-clip
  • Background com Degradê
  • Linear Gradient
  • Radial Gradient
  • Ocupação por Percentagem
  • Efeito Parallax

• Projeto Cordel

• Tabelas

  • Introdução
  • Estilos para Tabelas
  • Aplicando Bordas em Tabelas
  • Style border-collapse
  • Alinhamentos em tabela
  • Efeito Zebrado
  • Fixar Cabeçalho
  • Tabela Responsiva
  • Mesclagem de células
  • Tabela Semântica
  • Scope
  • Tag para Colunas
  • Atributo para col

• Escreva Html 50% mais Rápido

  • Elementos Aninhados
  • Inserindo Texto no Elemento
  • Elementos no Mesmo Nível
  • Adicionando Classes
  • Adicionando IDs
  • Criando Listas
  • Multiplicando com Subelementos
  • Criando Vários IDs
  • Adicionando Comentários
  • Elementos com Subelementos no Mesmo Nível
  • Adicionando Atributos aos Elementos

Módulo 04 - CSS Avançado

• iframe

  • Introdução ao Iframe
  • Exemplo de Uso
  • Navegação no Iframe
  • Inicialização do Iframe
  • Segurança
  • Melhores Utilidades do Iframe
  • Observações
  • Desvantagens do Uso de Iframe

• CSS calc()

  • Função calc()
  • Operadores suportados
  • Sintaxe
  • Variáveis em CSS

• Media Queries

  • Introdução
  • media="screen"
  • Modo tudo em uma folha de CSS
  • Conceito Mobile First
  • Tipical Device Breakpoint

• Propriedade - Position

  • Display inline-block
  • Position Static
  • Position Relative
  • Position: absolute;
  • Position fixed
  • Position Sticky

• Propriedade - Float

  • Float
  • Clear

• Prorpiedade Transform

  • Transform: Translate
  • Transform: Scale
  • Transform: Rotate
  • Transform: Origin
  • Transform: Skew
  • Usando mais de uma Transform
  • Transform: Matrix