Curso de HTML5 e CSS3 - Desenvolvimento web Avançado

Conteúdo programático

1. Variáveis

   Vamos ver como utilizar variáveis no CSS para reaproveitar o seu valor em vários lugares

   7 aulas
   • Introdução
   • Variáveis
   • Declaração de Variáveis
   • Utilizando as Variáveis
   • Escopo
   • Trabalhando com variáveis no CSS
   • Questionário

2. Pseudo Elementos

   O que são Pseudo Elementos e como criá-los?

   3 aulas
   • Pseudo Elementos
   • Pseudo Elementos
   • Questionário

3. Criando Sprites

   O que são Sprites e por que utilizar?

   4 aulas
   • O que são Sprites?
   • Criando Sprites
   • Trabalhando com Sprites
   • Criando Sprites

4. Font Icons

   Aprenda a melhor maneira de se utilizar ícones em suas páginas

   2 aulas
   • Font Icons
   • Trabalhando com Font Icons

5. Gradientes

   Vamos ver como é simples a criação de gradientes no CSS

   5 aulas
   • Gradientes
   • Gradiente Linear
   • Gradiente Radial
   • Criando Gradientes com CSS
   • Questionário

6. Contadores e Guardando estados sem JavaScript

   Veremos nessa aula como criar contadores e como guardar certos estados apenas com CSS

   6 aulas
   • Contadores e Guardando estados sem JavaScript
   • Contadores
   • Guardando Estados
   • Contadores com CSS
   • Guardando Estados com CSS
   • Questionário

7. Transformações 2D e 3D

   Vamos aprender a utilizar as funções de transformações 2D e 3D em nossos elementos

   5 aulas
   • Transformações 2D e 3D
   • Transformações 2D
   • Transformações 3D
   • Transformações 2D e 3D
   • Questionário

8. Filtros

   Vamos conhecer os filtros que o CSS disponibiliza, igual aos filtros presentes em softwares de edição de imagem

   14 aulas
   • Filtros
   • blur(px)
   • brightness(%)
   • contrast(%)
   • drop-shadows(posição_horizontal posição_vertical dispersão cor)
   • grayscale(%)
   • hue-rotate(ângulo)
   • invert(%)
   • opacity(%)
   • saturate(%)
   • sepia(%)
   • CSSgram
   • Filtros de Imagens
   • Questionário

9. Transições

   Vamos ver como criar transições para os nossos elementos

   8 aulas
   • Transições
   • A importância das transições
   • Nossa primeira transição
   • Transições com JavaScript
   • Curva da Velocidade da Transição
   • Propriedades de Transição
   • Criando Transições
   • Questionário

10. Animações

    Vamos ver como é simples criar animações com CSS

    7 aulas
    • Animações
    • Criando uma Animação
    • Animações com várias mudanças
    • Propriedades de Animação
    • Interagindo com JavaScript
    • Criando Animações
    • Questionário

11. Media Queries

    O que são Media Queries e como utilizá-los

    5 aulas
    • Media Queries
    • Media Types
    • Media Queries
    • Media Types e Media Queries
    • Questionário

12. Criando Designs Responsivos

    Vamos aprender algo muito importante para a web moderna: layouts que funcionam em qualquer tamanho de tela

    4 aulas
    • O que é Design Responsivo?
    • Viewport
    • Unidades de Medida Relativas
    • Media Queries

13. Layouts com Flex Box

    Vamos ver como utilizar o Flex Box para criar nossos layouts de forma simples sem o uso de tabelas ou grids

    6 aulas
    • Layouts com Flex Box
    • Propriedades do Contêiner
    • Propriedades dos Itens
    • Atalhos
    • Entendendo o Flex Box
    • Questionário

14. Pré Processadores CSS

    Vamos conhecer o que são Pré Processadores e as vantagens de utilizá-los em nossos projetos.

    3 aulas
    • O que são Pré Processadores?
    • Funcionalidades
    • Concluindo

15. Arquitetura de Códigos - Metodologias e Práticas

    Aprenda a deixar o seu código mais organizado.

    9 aulas
    • Metodologias e Práticas
    • OOCSS
    • BEM
    • ACSS
    • DRY CSS
    • SMACSS
    • ITCSS
    • RSCSS
    • Questionário

16. HTML5 e suas APIs

    Saiba o que são as APIs presentes no HTML5

    4 aulas
    • O que são APIs?
    • JavaScript
    • Possibilidades
    • Ambiente

17. Controle de Áudio e Vídeo

    Aprenderemos como controlar mídias e a criar um pequeno player de vídeo

    8 aulas
    • Controle de Áudio e Vídeo
    • Criando o elemento
    • Propriedades
    • Métodos
    • Eventos
    • Controlando a Mídia
    • Trabalhando com APIs de mídia
    • Questionário

18. Drag & Drop

    Vamos ver como é simples a criação do efeito Drag & Drop, muito utilizado para melhorar a experiência do usuário

    5 aulas
    • Drag & Drop
    • Arrastando Elementos
    • Soltando Elementos
    • Criação simples de Drag & Drop
    • Questionário

19. App Cache - Aplicações Offline

    Vamos ver como fazer para nossas páginas continuarem acessíveis mesmo quando o usuário estiver sem conexão com a Internet

    7 aulas
    • App Cache - Aplicações Offline
    • Cache Manifest
    • Iniciando o armazenamento de cache
    • Atualizando o Cache
    • Eventos do AppCache
    • Criando aplicações offline
    • Questionário

20. Armazenando Dados

    Aprenda a armazenar dados para utilizá-los em sua página

    5 aulas
    • Armazenando Dados
    • Cookies
    • WebStorage
    • IndexedDB
    • Questionário

21. Leitura de Arquivos

    Vamos ver como é possível uma página web ler arquivos do usuário e ver as várias possibilidades que podemos ter com isso

    6 aulas
    • Leitura de Arquivos
    • Carregando Arquivos
    • Lendo Arquivos
    • Salvando Arquivos
    • Leitura de Arquivos de Texto
    • Questionário

22. Canvas

    Vamos conhecer o Canvas, elemento que nos permite desenhar, criar animações e até mesmo criar jogos para nossas páginas

    7 aulas
    • Canvas
    • Nosso primeiro Canvas
    • Desenhando no Canvas
    • Animações
    • Salvando Canvas como Imagem
    • Desenhando no Canvas
    • Questionário

23. SVG

    Aprenda o que são Imagens Vetoriais, suas vantagens e o que é SVG

    6 aulas
    • SVG
    • Imagens Bitmap e Imagens Vetoriais
    • Vantagens e Desvantagens
    • Como é uma imagem em SVG?
    • Estilizando SVG com CSS
    • Questionário

24. Pré Processadores HTML

    Vamos ver o que são Pré Processadores HTML e suas vantagens para nossos projetos

    5 aulas
    • Pré Processadores HTML
    • Sintaxe mais simples
    • Evitando Repetições
    • Definindo Condições
    • Concluindo

25. Web Components

    Vamos conhecer os Web Components, seus conceitos e aprender a reutilizar elementos HTML em nossas páginas

    8 aulas
    • O que são Web Components?
    • Templates
    • Shadow DOM
    • Custom Elements
    • Pontos de Inserção
    • Imports
    • Criando nossos próprios componentes
    • Questionário

26. Projeto Final

    Projeto final do curso.

    2 aulas
    • Projeto
    • Resolução