WEB104 · Interfaces responsivas e frameworks front-end
Sobre o curso
Crie interfaces que funcionam em qualquer tela com CSS mobile-first e construa-as como componentes reutilizáveis com React e Vite. Você vai transformar uma página estática em uma pequena aplicação baseada em componentes, com estado e dados.
Para quem é
Quem domina os fundamentos de HTML, CSS e JavaScript e quer construir front-ends modernos e fáceis de manter.
Pré-requisitos
Ter concluído o WEB103 ou estar à vontade com funções, arrays, DOM e fetch em JavaScript.
O que você será capaz de fazer
- Construir layouts mobile-first com media queries, unidades fluidas e imagens responsivas.
- Dividir uma interface em componentes React que recebem dados por props.
- Gerenciar estado interativo e efeitos colaterais com useState e useEffect.
- Criar, executar e gerar o build de um projeto front-end com Vite e npm, comparando os principais frameworks.
Aulas
- Aula 1 · Design responsivo e mobile-first
- Aula 2 · Componentes e fundamentos de React
- Aula 3 · Estado, efeitos e ferramentas de front-end
- Aula 4 · Laboratório e atividade
Laboratório: Reconstrua uma página de agendamento como aplicação React
Você vai criar um projeto React com Vite, dividir uma página de agendamento em componentes e adicionar estado para escolher serviço e horário. Vai carregar os serviços de um arquivo JSON, testar o layout em três larguras de tela e gerar o build de produção.
Ferramentas gratuitas: Node.js LTS, npm e Vite (gratuitos) no seu computador, VS Code e o modo dispositivo do DevTools; ou o plano gratuito do StackBlitz no navegador
Atividade avaliada
Construa um front-end responsivo em React para um pequeno negócio de serviços, como um salão de beleza ou uma oficina de bicicletas. Ele deve listar serviços carregados de JSON, permitir escolher um serviço e um horário disponível, mostrar um painel de resumo e validar um formulário curto de contato antes de exibir a confirmação. O layout precisa funcionar em 360, 768 e 1280 pixels de largura. Envie o repositório e três capturas de tela, uma por largura.
| Critério | Peso | Como é um trabalho excelente |
|---|---|---|
| Layout responsivo | 25% | O CSS mobile-first funciona bem nas três larguras, sem rolagem horizontal e com texto legível. |
| Design de componentes | 30% | Os componentes são pequenos, bem nomeados, recebem dados por props e evitam marcação duplicada. |
| Estado e fluxo de dados | 25% | O estado fica no componente certo, os dados carregam com estados de carregamento e erro, e o formulário valida as entradas. |
| Organização do projeto | 20% | O build roda sem avisos, há um README com instruções e a estrutura de pastas faz sentido. |
Peça de portfólio
Uma interface de agendamento em React, responsiva e baseada em componentes, com repositório organizado e capturas em três larguras.
Próximo passo
Continue com WEB105 · Desenvolvimento back-end e APIs com Node.js · 8 horas · R$ 80,00
Conteúdo do curso
WEB104 · Interfaces responsivas e frameworks front-end (6 h)
-
Aula 1 · Design responsivo e mobile-first
-
Aula 2 · Componentes e fundamentos de React
-
Aula 3 · Estado, efeitos e ferramentas de front-end
-
Aula 4 · Laboratório e atividade
-
WEB104 Avaliação · Interfaces responsivas e frameworks front-end