> module: sem-02
> tema: interface web — layout
> status: online
> coffee loaded ✓
Material da Semana 02 da trilha do Coffee & Code, o clube de tecnologia da PUCPR.
Na Semana 01 você planejou. Nesta semana você constrói. Aquele protótipo do Figma é uma representação da interface — não é a interface. Um arquivo do Figma não roda no navegador de ninguém.
A Semana 02 existe para fechar essa distância: pegar o que foi decidido e transformar em HTML e CSS reais. No fim da semana você abre as suas três telas no navegador, redimensiona a janela até o tamanho de um celular, e nada quebra.
👉 docs/00-comece-aqui.md — leia este primeiro. Ele explica o caminho da semana e como estudar.
Depois, siga os módulos na ordem:
| # | Módulo | Sobre |
|---|---|---|
| 01 | Como a web funciona | Navegador, servidor, e o papel de HTML/CSS/JS |
| 02 | HTML | Estrutura: tags, elementos, pai/filho/irmão |
| 03 | HTML semântico e formulários | Significado no markup e o formulário de Login |
| 04 | CSS | Seletores, cascade, conectando CSS ao HTML |
| 05 | Box Model e unidades | border-box, padding, margin, px/rem/%/vh |
| 06 | Flexbox | Eixos, alinhamento, distribuição |
| 07 | Grid | Linhas, colunas, fr — e quando não usar Flexbox |
| 08 | Responsividade | Viewport, breakpoints, mobile-first |
| 09 | Do Figma para o código | Decompondo uma tela antes de codificar |
| 10 | Tailwind | Utility-first CSS com Tailwind v4 |
| 11 | Design System no código | Tokens do Figma como CSS Custom Properties |
| 12 | Acessibilidade | Contraste, foco, navegação por teclado |
| 13 | Componentização e temas | Componentes reutilizáveis, tema claro/escuro |
| 14 | Projeto guiado | Construindo as três telas, do início ao fim |
E, para consultar quando precisar:
- 💻 Exemplo executável — as três telas em HTML/CSS puro, para consulta
- 🎯 Desafios — opcionais, para ir além do pedido
- ✅ Entregável — checklist final antes de fechar a semana
A pasta docs/example/ tem uma implementação de referência das três telas, em HTML e CSS puro. Baixe o repositório e abra o index-semana02.html no navegador para navegar entre elas.
É material de consulta, não gabarito. O seu projeto tem as suas próprias telas, decididas na Semana 01 — o exemplo serve para você ver uma solução possível quando travar, não para copiar.
Ao final da Semana 02, o repositório do seu projeto (não este aqui) deve ter as três telas do seu protótipo implementadas:
login.html
dashboard.html
perfil.html
css/
└── styles.css ← compartilhado pelas três
As três páginas precisam abrir sem erros, usar HTML semântico, compartilhar o mesmo CSS construído sobre os tokens do seu design system, e funcionar de ~375px até ~1200px sem rolagem horizontal.
O checklist completo está em docs/entregavel.md.
A beleza não é o critério. Estrutura simples com HTML semântico correto, CSS organizado em variáveis e responsividade funcional vale mais, nesta semana, do que um visual elaborado com
<div>no lugar de<button>e que quebra no celular.
Projetos de quem entregou a Semana 02. Quer entregar o seu? Veja como entregar.
| Pessoa | Projeto | Sobre | Links |
|---|---|---|---|
| @gorfofnf | — | Login, cadastro, dashboard com cursos de engenharia e perfil, com Tailwind | repositório próprio |
| Guilherme Barbosa | Shelf Hub | Biblioteca pessoal de filmes, séries, livros, jogos e outros conteúdos | pasta · Figma · ver telas |
| Luis Medina | Estom | Monitoramento de preços de produtos online | pasta · Figma · ver telas |
| Mikhail Kalinin | Online Learning Platform | Plataforma de cursos online que conecta professores e alunos | pasta · ver telas |
| Rodrigo Fagnani | FixAqui | Conecta clientes a profissionais de pequenos serviços | pasta · Figma · ver telas |
Para evitar ansiedade desnecessária: nada de backend, banco de dados ou autenticação real. JavaScript funcional não é esperado. Tailwind é opcional — CSS puro é uma entrega igualmente válida. E não se espera fidelidade pixel a pixel ao Figma: pequenos ajustes ao migrar de um design estático para HTML/CSS real são normais.
Todos os módulos usam o mesmo projeto fictício da Semana 01: o Buscador de Grupos de Estudo, uma plataforma para estudantes encontrarem colegas estudando a mesma matéria. Se você tem um projeto próprio, o raciocínio de cada módulo se aplica da mesma forma — só troque o nome.
O Coffee & Code é 100% online. Cada módulo foi escrito para ser autossuficiente: você estuda no seu ritmo, pode avançar mais rápido, voltar em semanas anteriores e consultar o material durante o projeto.
Os encontros semanais, também online, existem para tirar dúvidas, revisar conceitos, programar junto e mostrar o que você produziu — não para dar aula:
- 🗓️ quarta-feira — 20h00 às 21h30
- 🗓️ sábado — 10h00 às 11h30
Os dois trabalham o mesmo conteúdo. Escolha o que couber melhor na sua semana, e não precisa ficar o horário inteiro na call.
Chega no encontro ou no Discord com uma pergunta específica. "travei em X, já tentei Y" costuma ser resolvido muito mais rápido do que "não entendi nada do módulo Z".
E lembra: não saber alguma coisa não é problema. Saber pesquisar faz parte da área.
Todos os diagramas usados nos módulos estão em docs/assets/, em formato SVG editável.
HTTP 418 — I'm a teapot
> ready to code