🔰 Módulo 1 – Fundamentos da Web
Objetivo: Entender como a web funciona e criar sua primeira página estática.
URL: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content
📌 Tópicos:
O que é Frontend e Backend?
- Como funciona a Web (Cliente x Servidor)
- Estrutura de arquivos de um site
- Introdução ao HTML
- Estrutura básica (<!DOCTYPE html>, <head>, <body>)
- Tags de texto, listas, imagens, links, tabelas e formulários
- Primeiros exercícios: currículo pessoal em HTML
🎨 Módulo 2 – Estilizando com CSS
Objetivo: Aprender a deixar o site bonito, responsivo e organizado.
📌 Tópicos:
- Seletores, classes e IDs
- Propriedades básicas: cor, espaçamento, fontes, bordas
- Display, position, flexbox e grid
- Media queries (responsividade)
- Organização de estilos (inline, interno, externo)
- Introdução ao TailwindCSS ou Bootstrap (opcional)
- Projeto prático: landing page simples com HTML + CSS
⚙️ Módulo 3 – Interatividade com JavaScript
Objetivo: Entender lógica de programação e tornar o site interativo.
📌 Tópicos:
- Sintaxe e variáveis (let, const)
- Operadores e estruturas de decisão
- Laços de repetição
- Funções e eventos do DOM
- Manipulação de elementos com document.querySelector, addEventListener
- Validação de formulários
- Projeto prático: página com formulário interativo (ex: calculadora ou validador de idade)
🧱 Módulo 4 – Organização de Projetos e Primeiros Frameworks
Objetivo: Aprender a organizar melhor os arquivos e começar com ferramentas modernas.
📌 Tópicos:
- Estrutura de pastas (assets, components, pages)
- Introdução ao Git e GitHub (versão inicial)
- Hospedagem com Vercel ou GitHub Pages
- Conceito de SPA
- Introdução ao React (estrutura básica, componentes, props, JSX)
- Projeto prático: mini portfólio com React
🧩 Extras importantes (durante ou após os módulos)
- Acessibilidade e boas práticas
- SEO básico para frontend
- Responsividade e design mobile-first
- Princípios de UI/UX simples
- Comunidades para iniciantes: Discord, Dev.to, LinkedIn
📌 Dica final:
Não pule etapas. Dominar bem HTML + CSS + lógica com JavaScript vai te fazer crescer muito mais rápido quando for aprender React ou entrar em um projeto real.
Objetivo: Entender como a web funciona e criar sua primeira página estática.
URL: https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content
📌 Tópicos:
O que é Frontend e Backend?
- Como funciona a Web (Cliente x Servidor)
- Estrutura de arquivos de um site
- Introdução ao HTML
- Estrutura básica (<!DOCTYPE html>, <head>, <body>)
- Tags de texto, listas, imagens, links, tabelas e formulários
- Primeiros exercícios: currículo pessoal em HTML
🎨 Módulo 2 – Estilizando com CSS
Objetivo: Aprender a deixar o site bonito, responsivo e organizado.
📌 Tópicos:
- Seletores, classes e IDs
- Propriedades básicas: cor, espaçamento, fontes, bordas
- Display, position, flexbox e grid
- Media queries (responsividade)
- Organização de estilos (inline, interno, externo)
- Introdução ao TailwindCSS ou Bootstrap (opcional)
- Projeto prático: landing page simples com HTML + CSS
⚙️ Módulo 3 – Interatividade com JavaScript
Objetivo: Entender lógica de programação e tornar o site interativo.
📌 Tópicos:
- Sintaxe e variáveis (let, const)
- Operadores e estruturas de decisão
- Laços de repetição
- Funções e eventos do DOM
- Manipulação de elementos com document.querySelector, addEventListener
- Validação de formulários
- Projeto prático: página com formulário interativo (ex: calculadora ou validador de idade)
🧱 Módulo 4 – Organização de Projetos e Primeiros Frameworks
Objetivo: Aprender a organizar melhor os arquivos e começar com ferramentas modernas.
📌 Tópicos:
- Estrutura de pastas (assets, components, pages)
- Introdução ao Git e GitHub (versão inicial)
- Hospedagem com Vercel ou GitHub Pages
- Conceito de SPA
- Introdução ao React (estrutura básica, componentes, props, JSX)
- Projeto prático: mini portfólio com React
🧩 Extras importantes (durante ou após os módulos)
- Acessibilidade e boas práticas
- SEO básico para frontend
- Responsividade e design mobile-first
- Princípios de UI/UX simples
- Comunidades para iniciantes: Discord, Dev.to, LinkedIn
📌 Dica final:
Não pule etapas. Dominar bem HTML + CSS + lógica com JavaScript vai te fazer crescer muito mais rápido quando for aprender React ou entrar em um projeto real.