A parte do sistema que roda dentro do navegador ou do celular de quem usa.
O que é frontend, no fundo
HTML — a estrutura da página
React — organizar em componentes reutilizáveis
Mobile — a mesma interface, em telas diferentes
00 — O QUE É FRONTEND, NO FUNDO
A parte do sistema que roda no aparelho de quem usa
Frontend é a parte de um sistema que roda diretamente no navegador ou no celular da pessoa que está usando — é tudo que ela vê na tela e consegue tocar ou clicar. Isso é diferente do backend, que roda numa máquina separada (o servidor, visto no módulo passado) e cuida da lógica e dos dados por trás das cenas. O frontend é a vitrine; o backend é o estoque e o caixa por trás dela.
Metáfora: pense numa loja física: a vitrine, as prateleiras organizadas e o vendedor que te atende são o frontend — o que você vê e interage. O estoque nos fundos, o sistema de controle de preços e o financeiro são o backend — funcionam pra loja existir, mas o cliente nunca vê diretamente.
01 — HTML
A estrutura da página, sem estilo nem comportamento ainda
HTMLé a linguagem que descreve a estrutura de uma página: o que é um título, o que é um parágrafo, o que é um botão, o que é uma imagem. Sozinho, o HTML não define cor, fonte ou animação nenhuma — é só o esqueleto, dizendo "isso aqui é um título, isso aqui é um botão". A aparência (cores, espaçamento, fontes) fica por conta de uma linguagem complementar chamada CSS, aplicada em cima dessa mesma estrutura.
Metáfora: é como a planta baixa de uma casa antes da decoração: já dá pra ver onde fica a sala, o quarto, a porta de entrada — mas ainda sem cor na parede nem móvel nenhum.
No dia a diaQuando a IA te entrega o código de uma página e você vê tags como <h1>, <p> ou <button>, é HTML — cada uma marcando o papel daquele pedaço de conteúdo.
Por que isso importaQuando um site "carrega estranho" (texto sem estilo, tudo empilhado), muitas vezes é só o HTML que chegou — o CSS ainda não terminou de carregar por cima.
reconhecer 1 — HTMLpendente
O que o HTML sozinho realmente descreve, numa página?
AA estrutura e o papel de cada parte do conteúdo (título, parágrafo, botão), sem definir aparência
BAs cores e fontes usadas no site
CA lógica que roda no servidor
02 — REACT
Organizar a interface em peças reutilizáveis
React é uma forma de construir frontend organizando a interface em componentes — peças independentes e reutilizáveis, cada uma responsável por um pedaço da tela (um cartão de produto, um menu, um botão). Em vez de escrever o HTML inteiro da página do zero toda vez, você monta a tela combinando componentes já prontos — e se o mesmo tipo de cartão aparece 20 vezes na página, é o mesmo componente reaproveitado 20 vezes, não 20 cópias escritas à mão.
Metáfora: pense em blocos de montar: em vez de esculpir a casa inteira de um bloco só, você monta com peças padronizadas (parede, janela, porta) que se repetem em vários lugares da construção. Mudar o modelo da janela numa peça só já atualiza todas as janelas que usam aquela peça.
No seu projetoNo Saindo do Zero, o "Checklist" e o "QuizBlock" que você está vendo agora são componentes React — o mesmo componente é reaproveitado em todos os módulos, só muda o conteúdo que entra nele.
Por que isso importaQuando a IA precisa mudar o visual de um botão que aparece em várias telas, ela muda o componente uma vez, e a mudança se propaga sozinha pra todo lugar que o usa.
reconhecer 2 — Reactpendente
Qual é a ideia central de organizar uma interface em componentes React?
AEscrever o HTML inteiro de cada página do zero, sem reaproveitar nada
BMontar a tela combinando peças independentes e reutilizáveis, evitando repetir a mesma estrutura várias vezes
CRodar a lógica da interface direto no banco de dados
03 — MOBILE
A mesma interface, adaptada pra telas diferentes
A mesma interface web pode ser construída de forma responsiva — adaptando sozinha o layout conforme o tamanho da tela: elementos que ficam lado a lado num computador se empilham verticalmente num celular, sem precisar de dois sites separados. Isso é diferente de um app mobile nativo (instalado pela loja de aplicativos), que é construído com outras ferramentas e roda diretamente no sistema operacional do celular, em vez de dentro de um navegador.
Metáfora: pense numa estante modular: no espaço grande da sala, os módulos ficam lado a lado; no quartinho pequeno, os mesmos módulos são reorganizados um em cima do outro. É o mesmo móvel, só a disposição que muda conforme o espaço disponível.
No seu projetoO Saindo do Zero é um PWA — um site construído de forma responsiva, que também pode ser "instalado" na tela do celular, sem passar pela loja de aplicativos.
Por que isso importaAo planejar um projeto novo com a IA, vale decidir logo no início se basta um site responsivo ou se realmente é preciso um app nativo — são caminhos técnicos diferentes, com custo e complexidade diferentes.
reconhecer 3 — mobilependente
Qual é a diferença entre um site responsivo e um app mobile nativo?
ANão existe diferença real, são a mesma coisa com nomes diferentes
BO site responsivo roda no navegador e se adapta ao tamanho da tela; o app nativo é instalado pela loja de aplicativos e roda direto no sistema operacional
CO app nativo só funciona sem internet, e o site responsivo nunca funciona offline
04 — desafio final do módulo 4:Uma empresa quer um catálogo de produtos onde: o texto e as imagens aparecem bem organizados (estrutura), o mesmo "cartão de produto" se repete para cada item do catálogo (sem reescrever o HTML pra cada um), e a tela precisa ficar boa tanto no computador quanto no celular do cliente. Quais conceitos deste módulo estão presentes nesse pedido?
desafio finalpendente
Escolha a alternativa que identifica corretamente os conceitos presentes.
ASó HTML, nada mais
BHTML (estrutura do conteúdo) + componente reutilizável ao estilo React (o cartão repetido) + layout responsivo (adaptação pra mobile)
CSó backend, o frontend não tem relação com esse pedido