HTML5 e CSS3 - Desenvolvimento web Avançado
Faz parte das formações: Desenvolvedor Django Full-Stack
Instituição: TreinaWeb
Descrição
Com vídeo aula e conteúdo apostilado, nesse curso mostraremos como trabalhar com APIs, Web Storage, controle de mídias, Canvas e leitura de arquivos no HTML5, e com animações, media queries, flex box, layouts responsivos e pré-processadores no CSS3. Além de poder responder exercícios que ajudam na fixação do conteúdo.
Nesse curso, dentre várias outras coisas você aprenderá:
- Canvas e SVG;
- Drag & Drop;
- Web Storage e App Cache para Aplicações Offline;
- Leitura de Arquivos e Controle de Mídias;
- Animações e Transições;
- Layout com Flex Box;
- Layouts Responsivos e Media Queries;
- Pré Processadores CSS e HTML.
Ementa
1 - Variáveis
Introdução
Variáveis
Declaração de Variáveis
Utilizando as Variáveis
Escopo
Trabalhando com variáveis no CSS
Questionário 3 questões
2 - Pseudo Elementos
Pseudo Elementos
Pseudo Elementos
Questionário 3 questões
3 - Criando Sprites
O que são Sprites?
Criando Sprites
Trabalhando com Sprites
Criando Sprites
4 - Font Icons
Font Icons
Trabalhando com Font Icons
5 - Gradientes
Gradientes
Gradiente Linear
Gradiente Radial
Criando Gradientes com CSS
Questionário 3 questões
6 - Contadores e Guardando estados sem JavaScript
Contadores e Guardando estados sem JavaScript
Contadores
Guardando Estados
Contadores com CSS
Guardando Estados com CSS
Questionário 3 questões
7 - Transformações 2D e 3D
Transformações 2D e 3D
Transformações 2D
Transformações 3D
Transformações 2D e 3D
Questionário 3 questões
8 - Filtros
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 3 questões
9 - Transições
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 3 questões
10 - Animações
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 3 questões
11 - Media Queries
Media Queries
Media Types
Media Queries
Media Types e Media Queries
Questionário 3 questões
12 - Criando Designs Responsivos
O que é Design Responsivo?
Viewport
Unidades de Medida Relativas
Media Queries
13 - Layouts com Flex Box
Layouts com Flex Box
Propriedades do Contêiner
Propriedades dos Itens
Atalhos
Entendendo o Flex Box
Questionário 3 questões
14 - Pré Processadores CSS
O que são Pré Processadores?
Funcionalidades
Concluindo
15 - Arquitetura de Códigos - Metodologias e Práticas
Metodologias e Práticas
OOCSS
BEM
ACSS
DRY CSS
SMACSS
ITCSS
RSCSS
Questionário 3 questões
16 - HTML5 e suas APIs
O que são APIs?
JavaScript
Possibilidades
Ambiente
17 - Controle de Áudio e Vídeo
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 3 questões
18 - Drag & Drop
Drag & Drop
Arrastando Elementos
Soltando Elementos
Criação simples de Drag & Drop
Questionário 3 questões
19 - Armazenando Dados
Armazenando Dados
Cookies
WebStorage
IndexedDB
Questionário 3 questões
20 - Leitura de Arquivos
Leitura de Arquivos
Carregando Arquivos
Lendo Arquivos
Salvando Arquivos
Leitura de Arquivos de Texto
Questionário 3 questões
21 - Canvas
Canvas
Nosso primeiro Canvas
Desenhando no Canvas
Animações
Salvando Canvas como Imagem
Desenhando no Canvas
Questionário 3 questões
22 - SVG
SVG
Imagens Bitmap e Imagens Vetoriais
Vantagens e Desvantagens
Como é uma imagem em SVG?
Estilizando SVG com CSS
Questionário 3 questões
23 - Pré Processadores HTML
Pré Processadores HTML
Sintaxe mais simples
Evitando Repetições
Definindo Condições
Concluindo