De 25/11 a 02/12

Black
Week

40% off

Curso avançado de CSS

para aprender do zero até animações

MATRICULE-SE

Cupom: BLACKWEEK40 já aplicado

Porque Imersão?

Um novo passo na sua carreira como desenvolvedor

Do zero até animações

Conteúdo ensinado de forma progressiva, até chegar em animações

Nada de dormir

Vídeos feitos sobre medida focados em serem curtos e objetivos

Certificado de conclusão

Após a conclusão do curso, você tem direito a um certificado bonitão

O INSTRUTOR

Olá, meu nome é Diogo Machado, desenvolvedor de software com 10 anos de experiência prática na área, em minha carreira venho ativamente desenvolvendo aplicativos, desenhando e prototipando telas sempre focado no sucesso da experiência do usuário.

Em 2018, publiquei o meu primeiro livro técnico pela editora Casa do Código, que aborda a construção de aplicativos híbridos avançados com Cordova e PhoneGap, além de contribuições que venho fazendo no meu blog e na comunidade sempre que possível.

Neste treinamento busquei unificar toda minha experiência que eu tenho relacionada a UX, CSS e as tecnologias web que é uma das minhas paixões. Você vai encontrar links e conteúdo extra no Imersão CSS que são as ferramentas que eu uso no meu dia a dia.

Este curso é voltado para quem quer ingressar no mercado de trabalho web ou para quem sente dificuldades em desenvolver com CSS que é a linguagem chave para quem quer trabalhar com componentes em famosos frameworks como Angular, React ou Vue.js.

CONTEÚDO

Aulas curtas, conteúdo progressivo e baseado nas maiores referências da linguagem.

Horas

Exemplos

Aulas

A linguagem HTML
- Bem vindo a Imersão
- História e o que é HTML
- O protocolo HTTP e a linguagem HTML
- Primeiro servidor web CERN
- Versões do HTML
- O navegador, browsers e o HTML
Ferramentas usadas no curso
- Instalando NodeJs e adicionando o browser-sync
- Escolhendo um bom navegador
- Inspecionando elementos HTML
- Inspecionando elementos HTML em outros navegadores
O que é CSS
- O que é CSS
- Versões da linguagem
- Como o navegador renderiza o CSS
- O efeito em cascata na prática
O browser
- O que é DOM
- Internet explorer, ainda é um vilão?
- Como verificar o suporte de recursos
Seletores
- Seletores básicos
- Combinadores
- Especificidade no CSS
- Especificidade na prática
- Pseudo-elementos e Pseudo-classes
Sistemas de cores
- Cores hexadecimais
- Cores RGB
- Cores RGBA
- Cores HSL
- Cores pré definidas pelo navegador
Tamanhos fixos e relativos
- O Box model
- Unidades de medida absoluta
- Metatag viewport
- EM vs REM
- Unidades de medida relativa
- VW, VH, VMIN e VMAX, novas propriedades
CSS Layout
- A propriedade display: block e inline
- Diferenças entre inline e inline-block
- Display hidden vs visibility
- A propriedade position
- Overflow do elemento
Estilizações que você precisa saber
- Trabalhando com bordas (border)
- Estilizando botões
- Seletores de estado
- O charme dos elementos arredondados com border-radius
- Estilizando listas ordenadas e não ordenadas ul ol
- Formatando tabelas
- Sombras em elementos HTML com box-shadow
- Formatando elementos de um formulário
- Estilizando um elemento radio
- Estilizando um input com ícone
Tipografia
- Escolhendo uma família de fonte
- font-face
- Tamanhos relativos e absolutos em fontes
- Line-height – Assistir aula
- text-shadow
- Usando fonte como ícones
- word-spacing e letter-spacing
Opções de alinhamento
- Alinhando componentes com float
- Flexbox - O que é flexbox, qualidades, para que serve
- Flexbox - flex-direction
- Flexbox - flex-wrap
- Flexbox - flex-flow
- Flexbox - justify-content
- Flexbox - align-items
- Flexbox - align-content
- Flexbox - order
- Flexbox - align-self
- Flexbox - Flex (flex-grow, flex-shrink, flex-basis)
- Grid Layout ^{em breve}
Efeitos 2D e 3D com CSS
- Transformações 2D
- Transform-origin e o ponto de transformação
- Propriedade transition
- Transformações 3D com perpective
- Perpective-origin e a influencia nas transformações
CSS Animations
- Microinterações
- Propriedade animation
- animation-fill-mode e animation-direction
- keyframes
- animation-iteration-count
- animation-delay
- animation-time-function – Assistir Aula
- Exemplo prático criando um loader com animation
Design responsivo
- Mobile First
- 9 princípios do design responsivo
- Media types
- Exemplo inicial de media queries
- Propriedade do media queries
- Breakpoints em media queries
- Unidades relativas e media queries
- Media queries na prática
- Ferramentas úteis para Media queries
- Imagens responsivas - Uma breve introdução
- Imagens responsivas - srcset
- Imagens responsivas - srcset (continuação)
- Imagens responsivas - tag picture
- Provendo imagens com um servidor de API (Cloudinary)
- Object-fit e Object-position
- Cases famosos que usam imagens responsivas

Presente para você
- Git, Github e deploy com Netlify