Curso
CSS: Media Queries
Neste curso você vai aprender a usar media queries para adaptar o layout de uma página a diferentes larguras de janela do navegador. Você vai definir condições, criar breakpoints e reorganizar elementos para que o conteúdo funcione bem em qualquer tamanho de tela.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
10 horas
(10 aulas)
Aula 1 - O que é um site responsivo
Nesta aula você vai entender o que é design responsivo, por que ele é necessário e como ele se diferencia do que você construiu até agora.
Aula 2 - Viewport
Nesta aula você vai entender o que é o viewport e por que ele é o primeiro passo para que uma página se adapte corretamente a diferentes tamanhos de tela.
Aula 3 - CSS Reset
Nesta aula você vai entender por que o CSS Reset é necessário antes de qualquer adaptação responsiva.
Aula 4 - Valores relativos
Nesta aula você vai entender por que valores relativos são necessários na construção de um layout responsivo.
Aula 5 - Flexbox na responsividade
Nesta aula você vai entender por que o Flexbox é necessário na construção de um layout responsivo.
Aula 6 - Media queries
Nesta aula você vai entender como o CSS permite definir estilos diferentes para tamanhos de tela diferentes.
Aula 7 - Media features
Nesta aula você vai entender o que são media features e como elas definem o comportamento de uma media query.
Aula 8 - Breakpoints
Nesta aula você vai entender o que é um breakpoint, de onde vêm os valores usados nas media queries e como organizar múltiplos breakpoints no mesmo arquivo CSS.
Aula 9 - Operadores
Nesta aula você vai aprender a combinar, alternar e inverter condições, ampliando o controle sobre quando cada media query entra em ação.
Aula 10 - Mobile First
Nesta aula você vai entender o que é a abordagem mobile first, como ela se diferencia do desktop first e como reescrever o CSS de uma página aplicando essa inversão de ponto de partida.
Veja outros cursos de HTML e CSS
Sites Responsivos: Exemplos Práticos
HTML Semântico
Aumentando sua produtividade com templates e IA