PUC Minas · Cursos de TI

Desenvolvimento de
Interfaces Web

Aprenda a construir aplicações web modernas com HTML, CSS, JavaScript e APIs REST usando o JSON Server como backend simulado. Prático, orientado a projetos e pensado para quem está começando.

10

Módulos

6

Exemplos Práticos

1

Projeto Final

Possibilidades

Tecnologias da Disciplina

</> HTML5 CSS3 & Tailwind JS JavaScript ES6+ JSON Server Fetch API Chart.js Mapbox

Por onde começar?

Explore as seções da disciplina de acordo com sua necessidade.

📚

Módulos

10 módulos com teoria, exemplos e atividades organizados por semana.

Ver módulos →

⚙️

Configurar Ambiente

Passo a passo para instalar e rodar o JSON Server localmente ou via Docker.

Configurar →

💻

Exemplos de Código

6 aplicações completas para consulta, com código comentado e demonstrações.

Ver exemplos →

🔗

Recursos

Referências bibliográficas, ferramentas, links úteis e cheat sheets.

Ver recursos →

O que você vai aprender

Uma jornada completa do zero às aplicações web dinâmicas.

Frontend

  • Estrutura semântica com HTML5
  • Layouts com Flexbox e Grid
  • Design responsivo com Tailwind CSS
  • Manipulação do DOM com JavaScript
  • Eventos e formulários interativos

Dados e APIs

  • JSON: estrutura e manipulação
  • Local Storage e Session Storage
  • Fetch API e requisições assíncronas
  • Promises e async/await
  • CRUD completo com JSON Server

Projeto e Integração

  • Autenticação e sessão de usuário
  • Integração com APIs externas
  • Gráficos com Chart.js
  • Mapas interativos com Mapbox
  • Projeto integrador em equipe
Ponto de Partida

Configure o Ambiente JSON Server

O JSON Server é o coração desta disciplina. Ele permite simular um backend completo com uma API REST totalmente funcional em minutos, sem precisar programar o servidor.

Com ele, você vai fazer requisições HTTP reais (GET, POST, PUT, DELETE) para persistir dados, exatamente como acontece em aplicações profissionais.

Guia de Configuração Completo →

// Exemplo rápido com Fetch API

fetch('http://localhost:5000/api/contatos')

.then(res => res.json())

.then(dados => {

// dados é um array de contatos

console.log(dados)

})

JSON Server rodando na porta 5000

Trilha da Disciplina

10 módulos do HTML básico ao projeto completo

Ver todos →
M01

Fundamentos HTML

Estrutura, semântica e formulários

M02

CSS e Layouts

Flexbox, Grid e responsividade

M03

JavaScript Básico

Variáveis, funções e arrays

M04

DOM e Eventos

Manipulação dinâmica de páginas

M05

JSON e Storage

Dados locais e estruturados

M06

JSON Server

Backend simulado e API REST

M07

Fetch & Async

Requisições e Promises

M08

Autenticação

Login, sessão e rotas

M09

APIs Externas

Mapas, gráficos e dados

M10

Projeto Final

Integração e apresentação

👨‍🏫

Prof. Rommel Vieira Carneiro

PUC Minas – Cursos de Tecnologia da Informação

Olá, sejam bem-vindos! Esta disciplina foi pensada para que você aprenda na prática, construindo aplicações reais com tecnologias usadas no mercado. Dúvidas? Me encontre nos links abaixo.