Roadmap de Desenvolvimento Web
Aprenda a construir sites e aplicações web usando apenas HTML, CSS e JavaScript puro, sem frameworks ou bibliotecas.
Projetos relacionados:
Projetos de Programação- Níveis
- 3
- Etapas
- 30
- Concluídos
- 0
Seu progresso
Essa seção atualiza em tempo real. Clique numa etapa e marque como concluída pra ver a barra avançar.
Essa seção atualiza em tempo real. Clique numa etapa e marque como concluída pra ver a barra avançar.
Fácil
-
Como a Web funciona
Entenda o que é HTTP, cliente-servidor, DNS e como o navegador carrega uma página.
-
Estrutura básica do HTML
Tags essenciais, estrutura de um documento HTML, head e body.
-
Tags semânticas
header, nav, main, section, article, footer e por que usar semântica.
-
Formulários em HTML
input, select, textarea, labels e validação nativa do navegador.
-
Introdução ao CSS
Seletores, propriedades básicas e como vincular CSS ao HTML.
-
Box Model
margin, padding, border, width e height e como o navegador calcula o espaço dos elementos.
-
Cores, fontes e texto
Propriedades de tipografia, cores em HEX/RGB/HSL e Google Fonts.
-
Flexbox
Layout com display flex, alinhamento e distribuição de elementos.
-
Introdução ao JavaScript
Variáveis, tipos de dados, operadores e sintaxe básica.
-
Estruturas de controle em JS
if, else, switch, for, while.
Projeto Fácil Programação
Este projeto foi montado com base no nível de conhecimento que você já conquistou até aqui, e recomendamos que você o faça para reforçar o que aprendeu na prática.
Crie uma interface e validação de carga para o bonde de uma estação
Média
-
CSS Grid
Layout bidimensional com display grid, grid-template-columns e areas.
-
Responsividade e Media Queries
Design responsivo, breakpoints e mobile-first.
-
Funções em JavaScript
Declaração de funções, arrow functions, parâmetros e retorno.
-
Arrays e métodos de array
map, filter, reduce, forEach e manipulação de listas.
-
Objetos em JavaScript
Criação de objetos, propriedades, métodos e desestruturação.
-
Manipulação do DOM
querySelector, createElement, addEventListener e eventos.
-
Formulários com JavaScript
Validação customizada, captura de eventos de submit e inputs.
-
LocalStorage e SessionStorage
Armazenamento de dados no navegador sem backend.
-
Animações em CSS
transition, animation, keyframes e transformações.
-
Git e GitHub
Versionamento de código, commits, branches e pull requests.
Intermediário
-
Assincronismo em JavaScript
Callbacks, Promises e a fila de eventos (event loop).
-
Async/Await
Sintaxe moderna para lidar com código assíncrono de forma legível.
-
Fetch API e consumo de APIs
Requisições HTTP com fetch, tratamento de resposta e erros.
-
JSON e manipulação de dados
Serialização, parsing e trabalho com dados estruturados.
-
Módulos em JavaScript
import/export, organização de código em múltiplos arquivos.
-
Web Components
Custom Elements, Shadow DOM e criação de componentes reutilizáveis.
-
Acessibilidade (a11y)
ARIA, navegação por teclado, contraste e boas práticas de acessibilidade.
-
Performance Web
Lazy loading, otimização de imagens, minificação e Core Web Vitals.
-
SEO básico
Meta tags, Open Graph, sitemap e boas práticas para mecanismos de busca.
-
Deploy de sites estáticos
Publicando seu projeto em Vercel, Netlify ou GitHub Pages.
Como estudar este roadmap
Siga os passos na ordem sugerida, mas pule sem culpa qualquer um que você já domine. Pra cada etapa, pesquise no Google, assista vídeos no YouTube, consulte a documentação oficial ou peça ajuda a uma IA. O importante é dominar o assunto antes de seguir pro próximo. Não existe prazo: vá no seu ritmo.
Perguntas frequentes sobre o roadmap de Desenvolvimento Web
Preciso ter experiência prévia pra começar?
Não. O roadmap começa do nível Fácil e evolui aos poucos. Se você já domina o tópico, pule o tópico direto.
Preciso seguir os níveis e tópicos na ordem exata?
Não é obrigatório. A ordem é uma sugestão, pule qualquer assunto que você já domine, se achar necessário.
Esse roadmap é gratuito?
Sim, totalmente gratuito e sem cadastro.
Onde eu estudo o conteúdo de cada step?
Use Google, YouTube, documentações oficiais ou uma IA como apoio, até dominar o assunto completamente.
Posts relacionados a Desenvolvimento Web
-
Box Model no CSS: o que é e como funciona
Aprenda o que é o Box Model no CSS e como content, padding, border, margin e box-sizing controlam o tamanho e o espaçamento dos elementos.
Ler artigo -
Lógica de Programação: o que é e como começar do zero
Entenda a lógica de programação e aprenda a desenvolver seu raciocínio para programar.
Ler artigo -
Como aprender a programar do zero: O caminho prático sem enrolação
Quer entrar na área de tecnologia ou mudar de carreira e não sabe por onde começar? Descubra os passos reais para aprender programação sem frustração e fugir do inferno dos tutoriais.
Ler artigo
Comentários
0Participe da conversa
Faça login com sua conta para deixar dúvidas, sugestões e trocar ideias com outros estudantes.
Nenhum comentário ainda. Seja o primeiro a participar da discussão!