CSS3

Aprenda CSS 3 do Básico ao Avançado, Transições, Animações, FlexBox, Grid Layout, 3D, Sass e mais

Iniciantenível

20h 10mde conteúdo

5módulos

181aulas

Assinar e começar Já é assinante? Entrar

Sobre o curso

Aprenda CSS 3 do Básico ao Avançado, Transições, Animações, FlexBox, Grid Layout, 3D, Sass e mais

O que você vai aprender

Habilidades trabalhadas ao longo das aulas.

CSS
JavaScript
Lógica de Programação
Validação de Dados
Node.js
Tailwind CSS

Áreas de conhecimento

22.780 XP distribuídos entre as áreas abaixo.

Frontend93%
Backend6%
Fundamentos2%

Conteúdo do curso

5 módulos · 181 aulas

Introdução

14 aulas · 144 min

Introdução ao CSS
VídeoMaterial de apoio
6 min
Seletores
VídeoMaterial de apoio
7 min
Box Model
VídeoMaterial de apoio
11 min
Cores
VídeoMaterial de apoio
13 min
Unidades de Medida
VídeoMaterial de apoio
7 min
CSS e HTML
VídeoMaterial de apoio
13 min
Armadilhas no CSS3 [IMPORTANTE]
Vídeo
22 min
Introdução Prática ao CSS
Vídeo
14 min
Introdução ao Position
VídeoMaterial de apoio
15 min
Introdução ao Flexbox
VídeoMaterial de apoio
10 min
Valores Globais para Propriedades
VídeoMaterial de apoio
6 min
Introdução ao Grid Layout
VídeoMaterial de apoio
12 min
Combinadores de Seletor
VídeoMaterial de apoio
12 min
Questionário — Introdução
Questão
—

Flexbox Froggy

11 aulas · 29 min

Introdução ao Flexbox Froggy
Vídeo
2 min
justify-content
Vídeo
4 min
align-items
Vídeo
3 min
flex-direction
Vídeo
5 min
order
Vídeo
3 min
align-self
Vídeo
3 min
flex-wrap e flex-flow
Vídeo
3 min
align-content
Vídeo
4 min
Challenge
Vídeo
5 min
Resumo da Seção
Vídeo
2 min
Questionário — Flexbox Froggy
Questão
—

Propriedades

123 aulas · 659 min

outline-color
VídeoMaterial de apoio
3 min
outline-width
VídeoMaterial de apoio
3 min
outline-offset
VídeoMaterial de apoio
3 min
outline
VídeoMaterial de apoio
3 min
display
VídeoMaterial de apoio
31 min
Introdução da Seção Propriedades e criação do Snippet VSCode
VídeoMaterial de apoio
7 min
height
VídeoMaterial de apoio
11 min
max-height
VídeoMaterial de apoio
5 min
min-height
VídeoMaterial de apoio
6 min
width
VídeoMaterial de apoio
27 min
max-width
VídeoMaterial de apoio
5 min
min-width
VídeoMaterial de apoio
4 min
margin-top
VídeoMaterial de apoio
5 min
margin-right
VídeoMaterial de apoio
4 min
margin-bottom
VídeoMaterial de apoio
4 min
margin-left
VídeoMaterial de apoio
9 min
margin
VídeoMaterial de apoio
6 min
padding-top
VídeoMaterial de apoio
8 min
padding-right
VídeoMaterial de apoio
4 min
padding-bottom
VídeoMaterial de apoio
2 min
padding-left
VídeoMaterial de apoio
2 min
padding
VídeoMaterial de apoio
6 min
border-top-color
VídeoMaterial de apoio
8 min
border-right-color
VídeoMaterial de apoio
3 min
border-bottom-color
VídeoMaterial de apoio
3 min
border-left-color
VídeoMaterial de apoio
3 min
border-color
VídeoMaterial de apoio
2 min
border-top-style
VídeoMaterial de apoio
3 min
border-right-style
VídeoMaterial de apoio
3 min
border-bottom-style
VídeoMaterial de apoio
3 min
border-left-style
VídeoMaterial de apoio
3 min
border-style
VídeoMaterial de apoio
5 min
border-top-width
VídeoMaterial de apoio
3 min
border-right-width
VídeoMaterial de apoio
2 min
border-bottom-width
VídeoMaterial de apoio
2 min
border-left-width
VídeoMaterial de apoio
4 min
border-width
VídeoMaterial de apoio
4 min
border-top-left-radius
VídeoMaterial de apoio
5 min
border-top-right-radius
VídeoMaterial de apoio
5 min
border-bottom-right-radius
VídeoMaterial de apoio
4 min
border-bottom-left-radius
VídeoMaterial de apoio
2 min
border-radius
VídeoMaterial de apoio
14 min
border-image-source
VídeoMaterial de apoio
9 min
border-image-width
VídeoMaterial de apoio
4 min
border-image-slice
VídeoMaterial de apoio
3 min
border-image-outset
VídeoMaterial de apoio
3 min
border-image-repeat
VídeoMaterial de apoio
4 min
border-image
VídeoMaterial de apoio
4 min
border-collapse
VídeoMaterial de apoio
6 min
border-spacing
VídeoMaterial de apoio
3 min
border-top
VídeoMaterial de apoio
3 min
border-right
VídeoMaterial de apoio
4 min
border-bottom
VídeoMaterial de apoio
3 min
border-left
VídeoMaterial de apoio
3 min
border
VídeoMaterial de apoio
5 min
box-sizing
VídeoMaterial de apoio
6 min
overflow-x
VídeoMaterial de apoio
5 min
overflow-y
VídeoMaterial de apoio
4 min
overflow
VídeoMaterial de apoio
5 min
overflow-wrap
VídeoMaterial de apoio
7 min
overflow-block
VídeoMaterial de apoio
4 min
overflow-inline
VídeoMaterial de apoio
3 min
resize
VídeoMaterial de apoio
6 min
z-index
VídeoMaterial de apoio
7 min
outline-style
VídeoMaterial de apoio
6 min
flex-direction
VídeoMaterial de apoio
9 min
flex-wrap
VídeoMaterial de apoio
5 min
flex-flow
VídeoMaterial de apoio
3 min
justify-content
VídeoMaterial de apoio
5 min
align-items
VídeoMaterial de apoio
16 min
align-content
VídeoMaterial de apoio
7 min
place-content
VídeoMaterial de apoio
5 min
justify-items
VídeoMaterial de apoio
5 min
place-items
VídeoMaterial de apoio
6 min
justify-self
VídeoMaterial de apoio
5 min
flex-basis
VídeoMaterial de apoio
8 min
flex-grow
VídeoMaterial de apoio
5 min
flex-shrink
VídeoMaterial de apoio
7 min
flex
VídeoMaterial de apoio
5 min
order
VídeoMaterial de apoio
8 min
align-self
VídeoMaterial de apoio
9 min
place-self
VídeoMaterial de apoio
9 min
cursor
VídeoMaterial de apoio
27 min
background-color
VídeoMaterial de apoio
5 min
background-image
VídeoMaterial de apoio
5 min
background-size
VídeoMaterial de apoio
10 min
background-position
VídeoMaterial de apoio
13 min
background-repeat
VídeoMaterial de apoio
7 min
background-attachment
VídeoMaterial de apoio
11 min
background-clip
VídeoMaterial de apoio
9 min
background-origin
VídeoMaterial de apoio
5 min
background-blend-mode
VídeoMaterial de apoio
6 min
background
VídeoMaterial de apoio
6 min
box-shadow
VídeoMaterial de apoio
6 min
box-decoration-break
VídeoMaterial de apoio
7 min
transform
VídeoMaterial de apoio
7 min
transform-origin
VídeoMaterial de apoio
6 min
transform-style
VídeoMaterial de apoio
18 min
transform-box
VídeoMaterial de apoio
13 min
float
VídeoMaterial de apoio
5 min
clear
VídeoMaterial de apoio
6 min
list-style-type
VídeoMaterial de apoio
5 min
list-style-position
VídeoMaterial de apoio
3 min
list-style-image
VídeoMaterial de apoio
6 min
list-style
VídeoMaterial de apoio
4 min
object-fit
VídeoMaterial de apoio
9 min
object-position
VídeoMaterial de apoio
4 min
column-width
VídeoMaterial de apoio
4 min
column-count
VídeoMaterial de apoio
3 min
columns
VídeoMaterial de apoio
3 min
column-span
VídeoMaterial de apoio
4 min
column-gap
VídeoMaterial de apoio
3 min
column-fill
VídeoMaterial de apoio
4 min
column-rule-style
VídeoMaterial de apoio
4 min
column-rule-width
VídeoMaterial de apoio
3 min
column-rule-color
VídeoMaterial de apoio
3 min
column-rule
VídeoMaterial de apoio
4 min
break-before
VídeoMaterial de apoio
4 min
break-after
VídeoMaterial de apoio
3 min
break-inside
VídeoMaterial de apoio
6 min
page-break-before
VídeoMaterial de apoio
3 min
page-break-after
VídeoMaterial de apoio
2 min
Questionário — Propriedades
Questão
—

Sass

27 aulas · 353 min

Sass - CSS com Super-poderes
VídeoMaterial de apoio
10 min
Instalando e executando
VídeoMaterial de apoio
25 min
Extensão para VS Code
Vídeo
8 min
Nesting
VídeoMaterial de apoio
33 min
Variáveis
VídeoMaterial de apoio
19 min
Variáveis do Sass VS CSS3h
VídeoMaterial de apoio
8 min
Variáveis com valor padrão !default
VídeoMaterial de apoio
33 min
Variáveis Nativas e Escopo de Variáveis
VídeoMaterial de apoio
18 min
Regras de Estilo
VídeoMaterial de apoio
10 min
Regras de Estilo - @use
VídeoMaterial de apoio
18 min
Regras de Estilo - @forward
VídeoMaterial de apoio
23 min
Regras de Estilo - @import
VídeoMaterial de apoio
10 min
Regras de Estilo - @function
VídeoMaterial de apoio
16 min
Regras de Estilo - @mixin e @include
VídeoMaterial de apoio
10 min
Regras de Estilo - @extend
VídeoMaterial de apoio
18 min
Regras de Estilo - @error
VídeoMaterial de apoio
7 min
Regras de Estilo - @warn
VídeoMaterial de apoio
5 min
Regras de Estilo - @debug
VídeoMaterial de apoio
6 min
Regras de Estilo - @at-root
VídeoMaterial de apoio
14 min
Regras de Estilo - Controle de Fluxo @if e @else
VídeoMaterial de apoio
10 min
Regras de Estilo - Controle de Fluxo @each
VídeoMaterial de apoio
10 min
Regras de Estilo - Controle de Fluxo - @for
VídeoMaterial de apoio
12 min
Regras de Estilo - Controle de Fluxo - @while
VídeoMaterial de apoio
10 min
Funções Especiais
Vídeo
10 min
Modulos Nativos
VídeoMaterial de apoio
6 min
Sass CLI - Dart Sass
Vídeo
16 min
Questionário — Sass
Questão
—

Sass - Operadores

6 aulas · 25 min

Introdução aos Operadores
VídeoMaterial de apoio
2 min
Operadores - Relacional
VídeoMaterial de apoio
7 min
Operadores - Numérico
VídeoMaterial de apoio
6 min
Operadores - Buleano
VídeoMaterial de apoio
7 min
Operadores -String
VídeoMaterial de apoio
6 min
Questionário — Sass - Operadores
Questão
—

Certificado de conclusão

Ao concluir todas as aulas você recebe um certificado com código de verificação público e carga horária de 21h, pronto para o seu perfil profissional.

Assine a Hcode Class e comece hoje

Uma assinatura, acesso ilimitado a este e a todos os outros cursos da plataforma — com trilhas, provas e certificados.

Assinar e começar Já é assinante? Entrar