Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Inspecionar Layout Adaptativo | Design Responsivo em CSS
Técnicas Avançadas de CSS

bookDesafio: Inspecionar Layout Adaptativo

Tarefa

Avaliar a responsividade e adaptabilidade do site que apresenta informações sobre diferentes alimentos. A página está atualmente projetada para ser responsiva na primeira parte e adaptativa na segunda parte. Existem 4 pontos de breakpoint a serem considerados:

  • 300px: Smartphones pequenos.
  • 480px: Smartphones grandes.
  • 720px: Tablets.
  • 1200px: Desktops.

Abra a página em uma nova janela utilizando o botão "Abrir visualização em nova janela" no canto inferior esquerdo do sandbox. Altere a largura do viewport e observe as diferenças no layout e nos estilos em cada breakpoint.

Nota

Se precisar de ajuda sobre como proceder, há instruções em uma gravação abaixo do sandbox.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 6. Capítulo 5

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.04

bookDesafio: Inspecionar Layout Adaptativo

Deslize para mostrar o menu

Tarefa

Avaliar a responsividade e adaptabilidade do site que apresenta informações sobre diferentes alimentos. A página está atualmente projetada para ser responsiva na primeira parte e adaptativa na segunda parte. Existem 4 pontos de breakpoint a serem considerados:

  • 300px: Smartphones pequenos.
  • 480px: Smartphones grandes.
  • 720px: Tablets.
  • 1200px: Desktops.

Abra a página em uma nova janela utilizando o botão "Abrir visualização em nova janela" no canto inferior esquerdo do sandbox. Altere a largura do viewport e observe as diferenças no layout e nos estilos em cada breakpoint.

Nota

Se precisar de ajuda sobre como proceder, há instruções em uma gravação abaixo do sandbox.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 6. Capítulo 5
some-alt