HTML 5 e CSS 3

Guia Completo

HTML - Primeiro Contato
- Preparando o Ambiente
  
  Editor Visual Studio Code
  
  Servidor Apache
- HTML - Conceitos Iniciais
  
  O que é HTML
  
  O que é um elemento
  
  O que é um atributo
  
  Como inserir comentários
- Estrutura de um documento HTML
  
  Declaração:
  !DOCTYPE
  
  Tags:
  HTML, HEAD, BODY, TITLE
  
  Atributo:
  meta-charset
HTML Básico
- Parágrafo. Quebra de Linha
  
  Tags:
  <P>, <BR/>, <PRE>
- Cabeçalhos
  
  Tags:
  <h1>...<h6>
- Formatação de strings
  
  Tags:
  <strong>,<i>,<u>,<mark>
- Âncoras e Hiperlinks
  
  Tag:
  <a>
- Imagens
  
  Tags:
  <img>, <picture>, <figure>
  
  Conceito:
  Tipos de imagem
- Atributos Globais
  
  Atributos:
  acesskey, hidden, title
- Audio, Vídeo, Youtube
  
  Tags:
  <audio>,<video> e <iframe>
CSS Básico
- Bordas e Espaçamento
  
  Propriedades:
  border, margin, padding
- Unidades de Medidas CSS
  
  Conceitos:
  unidades de medida CSS(px, em, rem, vh, vw, vmin, vmax), resolução imagens.
- Estilos para textos
  
  Propriedades:
  font-size, font-family, font-weight, font-style, line-height, text-decoration, text-transform, text-ident
- Estilos de fundo
  
  Propriedades:
  background-image, background-position, background-color, background-repeat, background-attachment, background-orign, background-clip, background-size
Controlar, Entender e Aperfeiçoar o Lay-out
- HTML Semântico
  
  Tags:
  <div>, <span>, <header>, <section> <aside>, <article>, <nav>, <main>, <footer>
- Listas e Colunas
  
  Tags:
  <ul>, <ol>, <li>
  
  Propriedades:
  list-style-image, list-style-type, list-style-position, column_count, column_gap, column_-span, column_fill, column_rule
- A propriedade Display
  
  Propriedades:
  display:block, display:in-line; display:inline-block
- Alinhamento de Elementos
  
  Propriedades:
  text-align: center; vertical-align:middle
- Controlando o fluxo
  
  Propriedades:
  float, clear
- FLEXBOX
  
  Propriedades:
  display:flex, flex-direction, flex-wrap, align-itens, justify-content, flex-flow
Formulários e Tabelas
- Formulários - Introdução
  
  Tags:
  form, imput, label, button
  
  Atributos:
  placeholder,required, maxlength, pattern, title
- Novos tipos de input HTML 5
  
  Input type:
  date, datetimelocal, month, time, week, color, email, tel, search, range, number, url
- Demais campos de formulário
  
  Campos:
  Textarea, checkbox, radio, select
- Tabelas
  
  Tags:
  table, tr, td, th, thead, tbody, tfoot, colspan, rowspan
Conhecendo um pouco mais o HTML 5
- Conhecendo um pouco da História
  1991 até os dias de hoje
- HTML 5 - Visão Geral
  Tecnologias que compõem o HTML 5
- HTML 4 X HTML 5
  Algumas diferenças de codificação
- Algoritmo Outline
  Como as estruturas se relacionam entre sí
CSS 3 - Aprofundamento
- Seletores avançados do CSS
  
  Seletores:
  x + y {}, x > y {}, x ~ y {}
  
  Pseudo-classes:
  :nth-child(), :nth-last-child()
  
  Pseudo-elementos:
  ::before, ::after
- Animações com transition e Animation
  
  Propriedades de "transitions":
  transition, transition-property, transition-duration, transition-timing-function, transition-delay
  
  Propriedades de "animation":
  @keyframes, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction
- Trabalhando com variáveis

Criado por:
Malcon Toledo

Projeto Prático 01

Projeto Prático 02