Responsividade
O que significa "responsividade" em um site?
É quando a página se adapta a diferentes tamanhos de tela (celular, tablet, computador).
Para que serve o Flexbox?
Para alinhar e organizar itens em linha ou coluna de forma automática.
O que é uma pseudoclasse? Dê um exemplo.
É um estado especial de um elemento. Ex.: :hover muda o estilo quando o mouse passa em cima.
O que é a store no Redux?
É o local central que guarda todos os dados (estado) da aplicação.
Um cliente clica no botão “Adicionar ao carrinho” em uma loja virtual. Essa informação precisa ser registrada no sistema e aparecer na tela imediatamente.
👉 Pergunta: Qual parte do Redux é responsável por guardar e centralizar esse dado para toda a aplicação?
Store
Por que é importante projetar pensando em Mobile-First?
Porque a maioria das pessoas acessa pelo celular primeiro.
Quando é melhor usar CSS Grid em vez de Flexbox?
Quando o layout precisa de várias linhas e colunas (estrutura bidimensional).
O que é um pseudoelemento? Dê um exemplo.
É uma parte extra criada no CSS sem mudar o HTML. Ex.: ::before ou ::after.
Defina em uma frase o que é uma action.
É um objeto/mensagem que descreve uma mudança, como “adicionar item”.
O usuário pede para remover um item do carrinho. Uma função do Redux pega o estado atual, aplica a mudança e devolve o novo estado atualizado.
👉 Pergunta: Que parte do Redux aplica a mudança de estado baseada na action recebida?
Reducer
Escreva um exemplo de media query que aplique regras apenas em telas a partir de 768px.
@media (min-width: 768px) {
/* regras */
}
Escreva a propriedade CSS que centraliza itens em um container flex:
display: flex; justify-content: center;
Quando você usa :hover em um site, o que acontece?
muda a cor ou o estilo de um botão quando o usuário passa o mouse.
O que faz um reducer?
Recebe o estado atual + a action e devolve um novo estado atualizado.
O aplicativo precisa buscar uma lista de produtos em uma API externa antes de mostrar na tela. Para isso, o Redux precisa lidar com uma ação assíncrona que só depois enviará os dados para o store.
👉 Pergunta: Qual ferramenta do Redux usamos para lidar com essa operação assíncrona?
Thunk
Como você define duas colunas iguais usando Grid (propriedade curta)?
grid-template-columns: 1fr 1fr;
Para que serve ::before em CSS?
Para inserir um conteúdo ou detalhe visual antes de um elemento.
Para que serve o thunk no fluxo do Redux?
Para lidar com ações assíncronas, como buscar dados de uma API antes de atualizar o estado.
Sempre que o usuário finaliza uma compra, além de registrar no sistema, é preciso enviar um e-mail de confirmação, registrar no histórico e notificar o setor de entrega.
👉 Pergunta: Quando temos várias tarefas coordenadas após uma ação, qual ferramenta do Redux é mais indicada?
O que faz a propriedade gap em um container Grid?
Define o espaço entre colunas e linhas.
Qual é a diferença sintática entre uma pseudoclasse e um pseudoelemento?
Pseudoclasse usa um dois-pontos (:hover) e pseudoelemento usa dois (::before).
Quando usar uma saga em vez de um thunk?
Quando os efeitos assíncronos são complexos, precisam ser coordenados ou podem ser cancelados.
Quando o usuário clica em “Login”, o Redux precisa saber o que aconteceu e que tipo de mudança precisa ser feita. Para isso, é enviada uma descrição do evento que depois será tratada pelo reducer.
👉 Pergunta: Qual é o nome do objeto que descreve esse pedido de mudança?
Action