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

  • Videoaulas
  • Visualizar Projeto
  • Baixar arquivos

Projeto Prático 02

  • Visualizar
  • Baixar arquivos