Módulo 2 de 7
Do Figma para a interface real
Tempo total: ~41 min
Entre o layout lindo no Figma e a interface que chega ao navegador existe uma etapa de tradução. Quando essa tradução não é bem entendida, o botão sai do lugar, a fonte muda, o espaçamento some e todo mundo acha que houve descuido.
Neste módulo, você vai abrir essa caixa-preta: entender HTML, CSS e JavaScript, reconhecer diferenças entre tipos de app e enxergar o handoff moderno com mais precisão.
Ao final deste módulo, você vai saber
- Reconhecer HTML, CSS e JavaScript e o papel de cada um
- Diferenciar app nativo, híbrido, web e PWA
- Entender como o Figma Dev Mode muda o handoff
- Explicar por que acessibilidade começa no HTML
Neste módulo
- HTML, CSS e JavaScript: o trio que dá vida ao seu layout ~3 min
- HTML: a estrutura por trás de toda tela ~4 min
- CSS: o estilo que transforma estrutura em design ~4 min
- JavaScript: quando o design ganha vida ~4 min
- Nativo, híbrido, web ou PWA? ~4 min
- Figma Dev Mode e o handoff moderno ~5 min
- Acessibilidade: não é bônus, é requisito ~10 min
- Caso real: o app que quebrou na pandemia ~3 min
- Na prática + Reflita ~4 min
← Módulo anterior: Seu dev falou 'API' e você fingiu que entendeu
Próximo módulo: Projetando para o mundo real →