Início / Módulos

📚 Módulos da Disciplina

10 módulos organizados em uma jornada progressiva: do HTML básico até o projeto final completo.

Progresso geral:

0 / 10
Em andamento Concluído Próximo Pendente
M01

Fundamentos HTML

Semana 1–2 · Introdução ao desenvolvimento web

Em andamento

Tópicos

  • ▸Estrutura básica de uma página HTML
  • ▸Tags semânticas: header, nav, main, footer
  • ▸Títulos, parágrafos, listas e links
  • ▸Imagens e mídia
  • ▸Formulários e campos de entrada
  • ▸Tabelas de dados

Atividades

  • ✓Criar página de perfil pessoal
  • ✓Estruturar cardápio de restaurante
  • ○Formulário de cadastro

Exemplo Rápido

html 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Minha Página</title>
</head>
<body>
  <h1>Olá, Mundo!</h1>
  <p>Meu primeiro HTML.</p>
</body>
</html>
M02

CSS e Layouts

Semana 3–4 · Estilização e design responsivo

Em andamento

Tópicos

  • ▸Seletores e especificidade
  • ▸Box Model (margin, border, padding)
  • ▸Flexbox: alinhamento e distribuição
  • ▸CSS Grid: layouts bidimensionais
  • ▸Media Queries e responsividade
  • ▸Tailwind CSS via CDN

Atividades

  • ○Layout de galeria com Grid
  • ○Barra de navegação responsiva
  • ○Landing page com Tailwind

Exemplo Rápido

css
/* Flexbox centralizado */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Grid de 3 colunas */
.grid-3 {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 1rem;
}
M03

JavaScript Básico

Semana 5–6 · Lógica de programação no browser

Próximo

Tópicos

  • ▸Variáveis: var, let, const
  • ▸Tipos de dados e operadores
  • ▸Condicionais (if, switch)
  • ▸Loops (for, while, forEach)
  • ▸Funções e arrow functions
  • ▸Arrays e objetos literais

Atividades

  • ○Calculadora simples
  • ○Manipulação de array de produtos
  • ○Quiz de perguntas e respostas

Exemplo Rápido

js
// Arrow function + filter + map
const produtos = [
  { nome: 'Livro', preco: 45 },
  { nome: 'Caneta', preco: 5 },
  { nome: 'Caderno', preco: 30 }
];

const caros = produtos
  .filter(p => p.preco > 10)
  .map(p => p.nome);

console.log(caros);
// ['Livro', 'Caderno']
M04

DOM e Eventos

Semana 7 · Interatividade com JavaScript

Pendente

Tópicos

  • ▸Seleção de elementos (querySelector)
  • ▸Leitura e escrita de propriedades
  • ▸Criação e remoção de elementos
  • ▸addEventListener e tipos de eventos
  • ▸Formulários: captura e validação
  • ▸Event delegation

Atividades

  • ○Lista de tarefas (To-Do) dinâmica
  • ○Validação de formulário em tempo real
  • ○Galeria de imagens com filtros

Exemplo Rápido

js
// Criar elemento e adicionar ao DOM
function adicionarItem(texto) {
  const li = document.createElement('li');
  li.textContent = texto;

  li.addEventListener('click', () => {
    li.classList.toggle('concluido');
  });

  document.querySelector('#lista')
    .appendChild(li);
}

adicionarItem('Estudar HTML');
M05

JSON e Storage

Semana 8 · Dados no browser

Pendente

Tópicos

  • ▸Formato JSON: sintaxe e regras
  • ▸JSON.stringify e JSON.parse
  • ▸localStorage: persistência local
  • ▸sessionStorage: dados de sessão
  • ▸Diferenças e casos de uso

Atividades

  • ○Carrinho de compras com localStorage
  • ○Preferências de tema salvas

Exemplo Rápido

js
// Salvar e recuperar do localStorage
const usuario = {
  nome: 'Ana',
  email: 'ana@email.com'
};

// Salvar (converte para string)
localStorage.setItem(
  'usuario',
  JSON.stringify(usuario)
);

// Recuperar (converte de volta)
const salvo = JSON.parse(
  localStorage.getItem('usuario')
);
console.log(salvo.nome); // 'Ana'
M06

JSON Server e API REST

Semana 9 · Backend simulado

Pendente

Tópicos

  • ▸Conceito de API REST
  • ▸Verbos HTTP (GET, POST, PUT, DELETE)
  • ▸Instalação e configuração do JSON Server
  • ▸Estruturação do db.json
  • ▸Filtros, busca e paginação
  • ▸Relacionamento entre coleções

Atividades

  • ○Configurar JSON Server do zero
  • ○Testar endpoints com Insomnia/Postman
  • ○CRUD de produtos via terminal
M07

Fetch API e Programação Assíncrona

Semana 10 · Comunicação com servidores

Pendente

Tópicos

  • ▸Promises: then/catch/finally
  • ▸async/await
  • ▸Fetch API completa (options)
  • ▸Tratamento de erros (try/catch)
  • ▸Loading states na UI
  • ▸Promise.all para múltiplas requisições

Atividades

  • ○CRUD completo de contatos
  • ○Barra de pesquisa com debounce
  • ○Indicador de carregamento (skeleton)

Exemplo Rápido

js
// async/await com tratamento
async function carregarDados() {
  const loading = document
    .getElementById('loading');
  loading.style.display = 'block';

  try {
    const r = await fetch(
      '/api/contatos'
    );
    if (!r.ok) throw new Error(r.status);
    const dados = await r.json();
    renderizar(dados);
  } catch (e) {
    mostrarErro(e.message);
  } finally {
    loading.style.display = 'none';
  }
}
M08

Autenticação de Usuários

Semana 11 · Login e sessão

Pendente

Tópicos

  • ▸Fluxo de autenticação web
  • ▸Login com JSON Server (/usuarios)
  • ▸sessionStorage para manter sessão
  • ▸Proteção de páginas (redirect)
  • ▸Registro de novo usuário
  • ▸Logout e limpeza de sessão

Atividades

  • ○Implementar tela de login
  • ○Proteger rota de cadastro
  • ○Exibir nome do usuário logado
M09

Integração com APIs Externas

Semana 12 · Mapas, gráficos e dados públicos

Pendente

Tópicos

  • ▸O que são APIs públicas
  • ▸Autenticação por API Key
  • ▸Mapbox: mapas interativos
  • ▸Chart.js: gráficos de dados
  • ▸Integração de dados do JSON Server com APIs externas

Atividades

  • ○Mapa de locais favoritos
  • ○Dashboard com gráfico de despesas
M10

Projeto Final Integrador

Semanas 13–16 · Consolidação e apresentação

Projeto em Equipe

Requisitos Mínimos do Projeto

  • ✓Aplicação multi-página com HTML semântico
  • ✓Design responsivo com CSS / Tailwind
  • ✓Backend com JSON Server (mín. 3 coleções)
  • ✓CRUD completo de pelo menos 1 entidade
  • ✓Autenticação de usuários (login/registro)
  • ✓Uma funcionalidade com API externa ou biblioteca

Cronograma

Semana 13 Definição do tema e estrutura do db.json
Semana 14 Frontend: páginas e CRUD básico
Semana 15 Login, autenticação e polimento
Semana 16 Apresentação final 🎉
⚙️ Configurar Ambiente JSON Server 💻 Ver Exemplos de Código