Módulo 2 · 9 de 9

Na prática + Reflita

Leitura: ~4 min

Na Prática

Esse exercício leva 10 minutos e vai mudar a forma como você vê qualquer site.

Se você estiver só no celular, faça uma versão simplificada: abra um site que você usa bastante, escolha um botão, um card e um menu, e anote no bloco de notas quais partes parecem ser estrutura (HTML), aparência (CSS) e comportamento (JavaScript). O ganho aqui é treinar o olhar, não abrir código.

  1. Abra o site que você mais usa no dia a dia (pode ser o Google, o Instagram web, ou qualquer outro).
  2. Clique com o botão direito em qualquer elemento da página e selecione "Inspecionar" (ou pressione F12).
  3. No painel que abrir, você vai ver o HTML à esquerda, a estrutura da página, com tags como <div>, <button>, <img>.
  4. À direita (ou abaixo), você verá o CSS : as propriedades visuais aplicadas. Procure por padding, margin, font-size, color.
  5. Agora o desafio: tente mudar uma cor. Clique no valor de uma propriedade color ou background-color e digite um novo valor HEX. A mudança aparece na hora (e desaparece quando você recarrega a página, não se preocupe, não vai quebrar nada).

Parabéns, você acabou de editar CSS ao vivo. Essa ferramenta, o DevTools, é a ponte mais direta entre o seu mundo visual e o código. Da próxima vez que um dev disser que "não dá para fazer" algo no CSS, você vai poder abrir o DevTools e investigar por conta própria.

Reflita

Da próxima vez que você abrir o Figma para desenhar uma interface, pare um momento e se pergunte: o que vai acontecer com cada elemento que estou criando quando ele virar código? Aquele auto layout vai ser um flexbox? Aquela animação de transição entre telas, o dev vai conseguir reproduzir com CSS ou vai precisar de JavaScript? Esse componente já existe na biblioteca de componentes prontos que o time usa, ou eles vão ter que construir do zero?

E mais: o que acontece quando essa tela falha? Quando o servidor demora, quando a conexão cai, quando o dado não carrega? Você projetou para isso?

Pensar nisso não é fazer o trabalho do dev. É fazer melhor o seu.