Analogia: A estrutura, paredes, cômodos e rótulos de uma casa.

2. CSS — A Pele (Apresentação e Layout)

Cascading Style Sheets definem como o conteúdo parece.

• Propriedades: `color`, `font-family`, `font-size`, `background`, `margin`, `padding`, `border`, `display` (flex, grid, block).
• Seletores: Alvejam elementos por tag (`p`), classe (`.button`), ID (`#hero`), atributo (`[type="submit"]`), estado (`:hover`, `:focus`).
• Design Responsivo: Media queries (`@media (max-width: 768px)`) adaptam layout para mobile/desktop.
• Animações: `@keyframes`, `transition`, `transform`.

Analogia: Tinta, papel de parede, arranjo móveis, iluminação — identidade visual.

3. JavaScript — Os Músculos (Comportamento e Interatividade)

JS faz a página fazer coisas.

• Manipulação DOM: Cria, modifica, deleta elementos HTML dinamicamente (`document.createElement`, `element.classList.toggle`).
• Tratamento de Eventos: Responde a cliques, scrolls, teclas, toque (`addEventListener('click', ...)`).
• Operações Assíncronas: Busca dados de APIs (`fetch()`, `async/await`), atualiza UI sem reload (AJAX/SPA).
• Lógica e Estado: Variáveis, loops, condicionais, módulos, frameworks (React, Vue, Svelte).

Analogia: Elétrica, hidráulica, sistemas smart-home — tornando a casa funcional.

Como Trabalham Juntos

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <!-- CSS --> </head> <body> <button id="btn" class="primary">Click Me</button> <!-- HTML --> <script src="app.js"></script> <!-- JS --> </body> </html> 

Browser parseia HTML → constrói DOM → aplica CSS → executa JS. JS pode então modificar DOM/CSS ao vivo.

Adições Modernas

• WebAssembly (Wasm): Rode C++/Rust/Go no browser velocidade near-native.
• Web Components: Elementos HTML customizados reutilizáveis (``).
• Progressive Web Apps (PWA): Offline, instalável, push notifications via Service Workers (JS).

Dominar o trio — HTML semântico, CSS moderno (Grid/Flex/Container Queries), e fundamentos vanilla JS — é a base de todo desenvolvimento web.