Desenvolvimento Web Moderno, Semântica Estrutural, Flexbox, CSS Grid, Acessibilidade e Performance

🧭 Visão Geral do Módulo

O Módulo 04 capacita o estudante na criação de páginas web e aplicações front-end profissionais utilizando os mais recentes padrões da W3C. A trilha abrange desde a estruturação semântica em HTML5 e acessibilidade até layouts avançados com Flexbox, CSS Grid, Container Queries, Variáveis CSS, Metodologia BEM e animações performáticas.

flowchart TD
    M4["Módulo 04: HTML5 e CSS3 Moderno (Padrão Ouro • 20 Capítulos)"]

    M4 --> B1["🧱 Bloco 1: Fundamentos da Web & HTML5 Semântico\n(Capítulos 01 a 04)"]
    M4 --> B2["🎨 Bloco 2: Fundamentos do CSS3, Cascata & Box Model\n(Capítulos 05 a 08)"]
    M4 --> B3["📐 Bloco 3: Layouts Modernos: Flexbox & CSS Grid\n(Capítulos 09 a 12)"]
    M4 --> B4["⚡ Bloco 4: CSS Avançado, Variáveis & Arquitetura\n(Capítulos 13 a 16)"]
    M4 --> B5["🚀 Bloco 5: Animações, Performance & Boas Práticas\n(Capítulos 17 a 20)"]

    style M4 fill:#263238,stroke:#eceff1,stroke-width:2px,color:#fff
    style B1 fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style B2 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style B3 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style B4 fill:#fce4ec,stroke:#e91e63,stroke-width:1.5px
    style B5 fill:#ede7f6,stroke:#673ab7,stroke-width:1.5px

🏛️ Matriz Curricular (20 Capítulos • 5 Blocos Temáticos)

🧱 Bloco 1: Fundamentos da Web & HTML5 Semântico

| Cap. | Tópico Principal | Teoria | Exercícios | Exemplos | Slides | Quiz | | :—: | :— | :—: | :—: | :—: | :—: | :—: | | 01 | Estrutura Web e HTML5 Semântico | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 02 | Textos, Links, Mídias e Tabelas | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 03 | Formulários Modernos e Validações HTML5 | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 04 | Acessibilidade Web e Semântica Estrutural | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz |

🎨 Bloco 2: Fundamentos do CSS3, Cascata & Box Model

| Cap. | Tópico Principal | Teoria | Exercícios | Exemplos | Slides | Quiz | | :—: | :— | :—: | :—: | :—: | :—: | :—: | | 05 | Seletores, Cascata, Especificidade e Herança | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 06 | Box Model, Padding, Border, Margin e Display | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 07 | Posicionamento CSS e Fluxo de Documento | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 08 | Tipografia, Cores, Sombras e Gradientes | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz |

📐 Bloco 3: Layouts Modernos: Flexbox & CSS Grid

| Cap. | Tópico Principal | Teoria | Exercícios | Exemplos | Slides | Quiz | | :—: | :— | :—: | :—: | :—: | :—: | :—: | | 09 | Layout Unidimensional com Flexbox | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 10 | Layout Bidimensional com CSS Grid | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 11 | Design Responsivo e Mobile-First | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 12 | Layout Inteligente: Subgrid e Container Queries | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz |

⚡ Bloco 4: CSS Avançado, Variáveis & Arquitetura

| Cap. | Tópico Principal | Teoria | Exercícios | Exemplos | Slides | Quiz | | :—: | :— | :—: | :—: | :—: | :—: | :—: | | 13 | Custom Properties, Variáveis CSS e Temas | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 14 | Metodologias CSS: BEM e CSS Modular | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 15 | Pseudo-classes e Pseudo-elementos Modernos | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 16 | Pré-processadores: Sass, SCSS e PostCSS | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz |

🚀 Bloco 5: Animações, Performance & Boas Práticas

| Cap. | Tópico Principal | Teoria | Exercícios | Exemplos | Slides | Quiz | | :—: | :— | :—: | :—: | :—: | :—: | :—: | | 17 | Transições, Transformações 2D/3D e Filtros | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 18 | Animações Avançadas com Keyframes | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 19 | Otimização de Performance Web e Core Web Vitals | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz | | 20 | Projeto Integrador: Landing Page Responsiva | 📖 Teoria | 🧩 Prática | 💻 Código | 📊 Slides | 🧠 Quiz |

🗂️ Acesso Rápido aos Índices Setoriais

⬅️ Módulo Anterior: UI/UX & Design Início do Portal Próximo Módulo: JavaScript Moderno ➡️