CSS Web Developer
Excalidraw Data
Text Elements
CSS Web Developer
Estilizações básicas com CSS
Unidades de medida em CSS
Fundamentos do CSS
Peimeiros passos com CSS
Layouts no CSS
Posicionamentos e exibição de elementos com CSS
Flexbox no CSS
Dominando Grid Layouts no CSS
Responsividade no CSS
Refinando os estilos CSS
Pseudo Elementos
Transições e animações
Boas práticas e convenções no CSS
Iniciando com framework em CSS: Bootstrap
Seletores
Combinadores
Propriedades de dimensionamento e espaçamento
Seletor de Tags
Seletores de ID
Seletor de classes
Seletores universais
Seletores de atributo
Agrupamento de Seletores
Combinador descendente
Combinador filho
Combinador irmão
Largura e altura
Altura e largura máxima e mínima
Margin
Padding
Box Sizing
Cores
Imagens
Fundo dos elementos
Bordas
Fontes
Textos
Sombras
Outros
Unidades de medidas absolutas
Pixels físicos e lógicos
Unidades de medidas relativas
Porcentagem
EM
REM
Viewports
EX e CH
Calculando valores com CSS
Propriedade Display
Display Block
Display inline
Display inline block
Display none
Display none vs visibility hidden
Alinhamento de elementos inline
Flexbox vs Grid Layout
Propriedades de exibição
Posicionando os elementos
Position Static
Position Relative
Position Absolute
Position Fixed
Position Sticky
Z-index
Conceitos do Flexbox
Eixos do Flexbox
Direção do Flexbox
Flex-Direction
Quebra de linhas e colunas
Flex-Wrap
Alinhando no eixo principal
Justify-Content
Alinhando no eixo transversal
Align-Itens
Alinhando as linhas no container
Align-Content
Controlando os espaços com os itens
Gap
Ordenando os itens
Order
Flex-Grow
Flex-Shrink
Flex-Basis
Propriedades
Align-Self
Shorthand Flex
Conceitos do Grid Layout
Nomenclaturas do Grid
Adicionando colunas e linhas no Grid
Iniciando com o CSS Grid
Grid implícito e explícito
Tamanho mínimo e máximo das faixas
Alocando itens do Grid nas posições específicas
Áreas do Grid
Shorthand grid-template
Espaçamento dos elementos do Grid
Shorhand grid
Alinhamento do Grid
Justify-itens
Align-itens
Linha e coluna com place-itens
Justify-content
Align-content
Horizontalmente e verticalmente com place-content
Justify-self
Align-self
Horizontalmente e verticalmente com place-self
Introdução ao Design Responsivo
Layouts flexíveis - Multicolunas
Layouts flexíveis - Flexbox
Layouts flexíveis - Grid
Meta tag viewport
O que são Media Queries
Estruturas
Media Types
Media Features (recursos de mídia)
Operadores
Maneiras de usar as Media Queries
Breakpoints
Devemos sempre usar as media queries
Imagens Responsivas
Tipografias Responsivas
Mobile First
Pseudo classes
first-letter
first-line
backdrop
marker
place-holder
selection
file-selector-button
before e after
hover
active
focus
target
enable e disabled
link e visited
place-holder-shown
Checked e Indeterminate
valid e invalid, in-range e out-ofrange
required e optional
autofill
root
nth-child e nth-of-type
first-of-type e last-of-type
nth-last-child e nth-last-of-type
only-child
only-of-type
empty
is
where
not
has
translate()
rotate()
rotateX() e rotateY()
scale()
skew()
matrix()
Transformações 2D
Transformações 3D
Animações
Perspectiva
Rotacionando e movendo elementos no eixo Z
Escalando elementos de forma tridimensional
transform-origin
transform-style
Matrix3d
backface-visibility
Transições
transições e pseudo-elementos
Iniciando com animações
Definindo atraso e número de interações de uma animação
Direção da reprodução e curva de velocidade da animação
Propriedade animation-fill-mode
Pausando a animação e shorthand animation