Roadmap Completo para

Aprender Desenvolvimento Web

Aprenda a construir sites e aplicações web usando apenas HTML, CSS e JavaScript puro, sem frameworks ou bibliotecas.

Níveis
3
Steps
30

Fácil

  1. Como a Web funciona

    Entenda o que é HTTP, cliente-servidor, DNS e como o navegador carrega uma página.

  2. Estrutura básica do HTML

    Tags essenciais, estrutura de um documento HTML, head e body.

  3. Tags semânticas

    header, nav, main, section, article, footer e por que usar semântica.

  4. Formulários em HTML

    input, select, textarea, labels e validação nativa do navegador.

  5. Introdução ao CSS

    Seletores, propriedades básicas e como vincular CSS ao HTML.

  6. Box Model

    margin, padding, border, width e height e como o navegador calcula o espaço dos elementos.

  7. Cores, fontes e texto

    Propriedades de tipografia, cores em HEX/RGB/HSL e Google Fonts.

  8. Flexbox

    Layout com display flex, alinhamento e distribuição de elementos.

  9. Introdução ao JavaScript

    Variáveis, tipos de dados, operadores e sintaxe básica.

  10. Estruturas de controle em JS

    if, else, switch, for, while.

Média

  1. CSS Grid

    Layout bidimensional com display grid, grid-template-columns e areas.

  2. Responsividade e Media Queries

    Design responsivo, breakpoints e mobile-first.

  3. Funções em JavaScript

    Declaração de funções, arrow functions, parâmetros e retorno.

  4. Arrays e métodos de array

    map, filter, reduce, forEach e manipulação de listas.

  5. Objetos em JavaScript

    Criação de objetos, propriedades, métodos e desestruturação.

  6. Manipulação do DOM

    querySelector, createElement, addEventListener e eventos.

  7. Formulários com JavaScript

    Validação customizada, captura de eventos de submit e inputs.

  8. LocalStorage e SessionStorage

    Armazenamento de dados no navegador sem backend.

  9. Animações em CSS

    transition, animation, keyframes e transformações.

  10. Git e GitHub

    Versionamento de código, commits, branches e pull requests.

Intermediário

  1. Assincronismo em JavaScript

    Callbacks, Promises e a fila de eventos (event loop).

  2. Async/Await

    Sintaxe moderna para lidar com código assíncrono de forma legível.

  3. Fetch API e consumo de APIs

    Requisições HTTP com fetch, tratamento de resposta e erros.

  4. JSON e manipulação de dados

    Serialização, parsing e trabalho com dados estruturados.

  5. Módulos em JavaScript

    import/export, organização de código em múltiplos arquivos.

  6. Web Components

    Custom Elements, Shadow DOM e criação de componentes reutilizáveis.

  7. Acessibilidade (a11y)

    ARIA, navegação por teclado, contraste e boas práticas de acessibilidade.

  8. Performance Web

    Lazy loading, otimização de imagens, minificação e Core Web Vitals.

  9. SEO básico

    Meta tags, Open Graph, sitemap e boas práticas para mecanismos de busca.

  10. 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.