Pular para conteúdo

HTML5 e CSS3 🌐

"A web é feita de estrutura e estilo — HTML dá o esqueleto, CSS dá a vida." — Provérbio Dev

🧭 Atalhos Rápidos

  • Aulas --- 16 aulas completas organizadas em 4 módulos práticos. Ver Trilha

  • Slides --- Slides interativos em Reveal.js para acompanhar cada aula. Acessar Slides

  • Quizzes --- Teste seus conhecimentos com quizzes interativos. Fazer Quizzes

  • Projetos --- Projetos práticos para construir seu portfólio. Ver Projetos

  • Exercícios --- Pratique com exercícios focados em código real. Praticar Agora

  • Setups --- Guias de instalação e configuração do ambiente. Configurar Ambiente

🗺️ Mapa da Jornada

O curso está estruturado para levar você do zero à construção e publicação de páginas web responsivas:

  • Módulo 1 – Fundamentos de HTML: Introdução à Web, documento HTML mínimo, estrutura e semântica, textos e links.
  • Módulo 2 – Mídia e Formulários: Imagens e SVG, tabelas, formulários e o primeiro projeto HTML completo.
  • Módulo 3 – Fundamentos de CSS: Introdução ao CSS, box model, display e posicionamento, Flexbox.
  • Módulo 4 – Layout Avançado: Grid Layout, responsividade, animações e transições, e o projeto final com deploy.

💡 Dicas de Sucesso

  1. Valide seu HTML: uma estrutura semântica correta evita bugs de estilo antes mesmo de eles acontecerem.
  2. Aprenda o Box Model de verdade: é a base de todo layout em CSS — domine antes de partir para Flexbox e Grid.
  3. Teste em telas diferentes: responsividade não é opcional — abra o DevTools e simule mobile desde a primeira aula.

Pronto para começar? Ir para Aula 01

Plano de Ensino 🧭

Curso: Programação Web I
Público-alvo: Estudantes de ADS, Ciência da Computação e Desenvolvedores de Software
Carga Horária: 20 Aulas (80 Horas Teórico-Práticas)

🎯 1. Objetivos do Curso

  • Compreender os fundamentos conceituais e arquiteturais de Programação Web I.
  • Aplicar padrões de projeto, sintaxe moderna e boas práticas da indústria.
  • Desenvolver soluções completas através de exercícios práticos e desafios de projeto.

📚 2. Cronograma de Aulas (Matriz de 20 Semanas)

Aula Tema Central Atividades e Entregas
01 Introdução à Web Teoria, Prática Guiada, Quiz e Exercícios
02 Documento HTML Mínimo ️ Teoria, Prática Guiada, Quiz e Exercícios
03 Estrutura e Semântica Teoria, Prática Guiada, Quiz e Exercícios
04 Textos e Links Teoria, Prática Guiada, Quiz e Exercícios
05 Imagens e SVG ️ Teoria, Prática Guiada, Quiz e Exercícios
06 Tabelas Teoria, Prática Guiada, Quiz e Exercícios
07 Formulários Teoria, Prática Guiada, Quiz e Exercícios
08 Projeto HTML ️ Teoria, Prática Guiada, Quiz e Exercícios
09 Introdução ao CSS ️ Teoria, Prática Guiada, Quiz e Exercícios
10 Box Model Teoria, Prática Guiada, Quiz e Exercícios
11 Display e Posicionamento Teoria, Prática Guiada, Quiz e Exercícios
12 Flexbox Teoria, Prática Guiada, Quiz e Exercícios
13 Grid Layout Teoria, Prática Guiada, Quiz e Exercícios
14 Responsividade Teoria, Prática Guiada, Quiz e Exercícios
15 Animações e Transições Teoria, Prática Guiada, Quiz e Exercícios
16 Projeto Final + Deploy Teoria, Prática Guiada, Quiz e Exercícios
17 Layouts Avançados com CSS Grid Nível 2 e Subgrid Teoria, Prática Guiada, Quiz e Exercícios
18 Animações CSS de Alta Performance e Transformações 3D Teoria, Prática Guiada, Quiz e Exercícios
19 Otimização de Performance Web e Critical CSS Teoria, Prática Guiada, Quiz e Exercícios
20 Projeto Capstone: Portal Web Autônomo Responsivo Teoria, Prática Guiada, Quiz e Exercícios

🧠 3. Metodologia de Ensino

  • Teoria Fundamentada: Aulas com conceitos detalhados, diagramas arquiteturais e sintaxe de referência.
  • Ciclo Teoria ⇄ Prática: Cada aula conta com Quiz Interativo (10 questões) para validação imediata, Lista de Exercícios Sanfonados (com Gabarito Explicado) e Desafio de Projeto Prático.
  • Laboratório Contínuo: Ambientes configurados passo a passo na seção de Setups da plataforma.

💼 4. Competências e Perfil Desenvolvido

  • Dominar as ferramentas e fluxos de desenvolvimento de Programação Web I.
  • Resolver problemas técnicos de alta complexidade com código limpo e performático.
  • Construir portfólio prático com 20 projetos aplicados.

📊 5. Critérios de Avaliação

  • 20 Listas de Exercícios: Resolução individual dividida em Básico, Intermediário e Desafio.
  • 20 Quizzes Interativos: Validação formativa com feedback imediato via JavaScript.
  • 20 Desafios de Projetos: Aplicações práticas consolidando o aprendizado de cada unidade.

Aulas

Aula 01 - Introdução à Web 🌐

Objetivo

Objetivo: Compreender os fundamentos de como a internet funciona, a relação entre cliente e servidor, e preparar o seu ambiente de desenvolvimento profissional.

1. Como a Internet Funciona? 🌍

Muitas vezes pensamos na internet como uma "nuvem" mágica, mas na verdade ela é uma infraestrutura gigantesca de cabos e servidores conectados ao redor do mundo.

🔌 O Modelo Cliente x Servidor

Toda interação na web acontece seguindo este modelo básico:

  1. Cliente: É você (ou melhor, o seu navegador). Você faz uma Requisição (Request).
  2. Servidor: É um computador potente que "serve" o site. Ele envia uma Resposta (Response).

Note

Imagine que você está em um restaurante. Você é o cliente, o garçom leva o seu pedido (requisição) para a cozinha (servidor), que então devolve o seu prato (resposta).

📊 Fluxo de Requisição

sequenceDiagram
    participant C as Cliente (Navegador)
    participant S as Servidor (Host)

    C->>S: Requisição HTTP (Quero o site x.com)
    S-->>C: Resposta HTTP (Aqui está o HTML/CSS/JS)
    Note over C: O navegador renderiza a página

2. Navegadores Modernos 🧭

O navegador (Browser) é a ferramenta que traduz o código que escrevemos em interfaces visuais bonitas.

  • Google Chrome: O mais utilizado, excelente motor V8.
  • Firefox: Focado em privacidade e padrões abertos.
  • Edge: Baseado em Chromium (mesmo motor do Chrome).
  • Safari: Padrão da Apple, focado em performance energética.

3. DevTools: O Superpoder do Desenvolvedor 🛠️

Todo navegador moderno possui ferramentas de desenvolvedor integradas. Com elas, podemos inspecionar, editar e depurar sites em tempo real.

Como abrir?

  • Windows/Linux: F12 ou Ctrl + Shift + I
  • Mac: Cmd + Option + I

Important

A aba Elements permite ver o HTML/CSS de qualquer site na internet. É a melhor forma de aprender observando o que já existe!

4. Estrutura de Projeto 📂

Um projeto web bem organizado é o primeiro passo para um código limpo.

$ mkdir meu-primeiro-site
$ cd meu-primeiro-site
$ touch index.html estilo.css script.js
$ ls
index.html
estilo.css
script.js

Tip

Sempre use nomes de arquivos em letras minúsculas, sem espaços e sem acentos para evitar problemas de compatibilidade nos servidores.

5. Mini-Projeto: Explorando a Web 🚀

Sua missão hoje é puramente investigativa:

  1. Abra o site do Google.
  2. Abra o DevTools (F12).
  3. Use a ferramenta de seleção (ícone de seta no canto superior esquerdo do DevTools) e clique no logo do Google.
  4. Tente alterar o texto de algum botão ou cor na aba Elements. (Não se preocupe, você não quebrou o Google, as mudanças são apenas locais!).

6. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre Cliente e Servidor?
  2. O que acontece quando você digita uma URL no navegador e aperta Enter?

Intermediários

  1. Cite 3 navegadores modernos e o motivo de termos ferramentas de desenvolvedor neles.
  2. Por que é recomendado usar nomes de arquivos sem espaços na web?

Desafio 🧠

  1. Pesquise o que significa a sigla HTTP e qual o seu papel fundamental na comunicação web.

Próxima Aula: Vamos criar o nosso primeiro Documento HTML Mínimo! 🏗️

Aula 02 - Documento HTML Mínimo 🏗️

Objetivo

Objetivo: Entender a estrutura base de todo site moderno e escrever as suas primeiras linhas de código HTML5, compreendendo o papel de cada tag fundamental.

1. O que é HTML? 🤔

HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto).

  • Não é uma linguagem de programação: Ela não tem lógica de "se" ou "faça enquanto".
  • É uma linguagem de marcação: Ela usa "etiquetas" (tags) para dizer ao navegador o que cada parte do conteúdo é (um título, um parágrafo, uma imagem).

2. A Anatomia de uma Tag 🦴

A maioria das tags HTML funciona como "recipientes" com uma abertura e um fechamento:

<p class="texto-bonito">Olá, Mundo!</p>
  • <p>: Tag de abertura.
  • class="texto-bonito": Atributo (dá informações extras à tag).
  • Olá, Mundo!: Conteúdo.
  • </p>: Tag de fechamento (notou a barra /?).

3. A Estrutura Básica (O Boilerplate) 📜

Todo arquivo HTML deve começar com uma estrutura padrão. Imagine que é o "esqueleto" do site.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Site</title>
</head>
<body>
    <h1>Olá, Web!</h1>
    <p>Este é o meu primeiro documento HTML5.</p>
</body>
</html>

🧩 Entendendo as Partes:

  • <!DOCTYPE html>: Avisa o navegador que estamos usando a versão mais recente (HTML5).
  • <html lang="pt-br">: O elemento raiz que envolve tudo. O atributo lang ajuda os buscadores e tradutores.
  • <head> (Cabeça): Contém Metadados (informações para o navegador e Google, não aparecem na página).
  • <body> (Corpo): É onde fica tudo o que o usuário vê no site.

4. Metadados Essenciais 🧠

Dentro do <head>, temos informações cruciais:

  1. <meta charset="UTF-8">: Garante que acentos (á, õ) e emojis apareçam corretamente.
  2. <meta name="viewport" ...>: Crucial para que o site funcione bem em celulares (Responsividade).
  3. <title>: O texto que aparece na aba do navegador.

5. Prática: Criando sua Primeira Página 🚀

Vamos colocar a mão na massa usando o terminal e o VS Code:

$ mkdir aula-02
$ cd aula-02
$ touch index.html
$ code index.html

[!DICA] No VS Code, digite ! e aperte Tab dentro de um arquivo .html. Ele vai gerar toda a estrutura básica para você automaticamente! Isso se chama Emmet.

6. Mini-Projeto: Perfil Pessoal 👤

  1. Crie um arquivo chamado index.html.
  2. Gere a estrutura básica.
  3. No <body>, use uma tag <h1> para o seu nome.
  4. Use uma tag <p> para escrever uma breve descrição sobre você.
  5. Abra o arquivo no seu navegador (clique duplo no arquivo).

7. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre as tags <head> e <body>?
  2. Para que serve o atributo lang na tag <html>?

Intermediários

  1. O que acontece se esquecermos de fechar uma tag, como o <title>?
  2. Explique a função do meta charset="UTF-8".

Desafio 🧠

  1. Pesquise e cite 2 tags HTML que não precisam de fechamento (tags auto-contidas).

Próxima Aula: Vamos aprender a organizar o conteúdo com Estrutura e Semântica! 🧱

Aula 03 - Estrutura e Semântica 🧱

Objetivo

Objetivo: Compreender a importância do HTML Semântico para SEO e acessibilidade, e aprender a utilizar as tags corretas para cada parte da estrutura de uma página web moderna.

1. O que é HTML Semântico? 🧐

Semântica é o estudo do significado. No HTML, usar tags semânticas significa escolher etiquetas que descrevem claramente o que o conteúdo é, não apenas como ele deve parecer.

  • Antigamente (Não Semântico): Usava-se <div> para tudo. O Google e leitores de tela ficavam "cegos".
  • Hoje (Semântico): Usamos tags como <header>, <nav> e <footer>.

[!DICA] Um site semântico é muito melhor ranqueado no Google e é acessível para pessoas que usam leitores de tela.

2. As Tags de Estrutura Principal 🏗️

Imagine a estrutura de um jornal ou blog:

  1. <header>: O cabeçalho da página ou de uma seção. Geralmente contém o logo e o título principal.
  2. <nav>: Define um conjunto de links de navegação (o menu).
  3. <main>: O conteúdo principal e exclusivo da página. Só deve haver um por página!
  4. <footer>: O rodapé. Contém informações de copyright, contato e links secundários.

📊 Mapa Semântico

graph TD
    BODY[body] --> HEADER[header - Logo/Menu]
    BODY --> MAIN[main - Conteúdo Único]
    BODY --> FOOTER[footer - Info/Rodapé]
    MAIN --> SECTION[section - Bloco de Assunto]
    SECTION --> ARTICLE[article - Conteúdo Independente]
    HEADER --> NAV[nav - Links de Navegação]

3. Entendendo Section e Article 📰

Muitas pessoas confundem essas duas:

  • <section>: Representa um agrupamento genérico de conteúdo, normalmente com um título. Ex: "Sobre nós", "Nossos Serviços".
  • <article>: Representa uma composição independente e auto-contida. Se você puder "recortar" esse conteúdo e publicar em outro lugar e ele ainda fizer sentido, use <article>. Ex: Um post de blog, um comentário, um card de produto.

4. Hierarquia de Títulos (h1 a h6) 🔝

Os títulos não servem para aumentar o tamanho da letra (isso é tarefa do CSS!). Eles definem a importância da informação.

  • <h1>: O assunto principal da página (use apenas UM por página).
  • <h2> a <h6>: Subtítulos em ordem decrescente de importância.

Important

Nunca pule níveis! Não passe de um <h1> direto para um <h3>. Siga a escada lógica.

5. Prática: Organizando o Código 🚀

Vamos estruturar um layout profissional no terminal:

$ mkdir aula-03
$ cd aula-03
$ touch index.html
$ # Vamos abrir o arquivo e criar a estrutura semântica básica...

Exemplo de Estrutura Correta:

<body>
    <header>
        <h1>Meu Blog Tech</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Posts</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Destaques</h2>
            <article>
                <h3>O Poder do HTML5</h3>
                <p>Neste post, exploramos a semântica...</p>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 - Desenvolvido com ❤️</p>
    </footer>
</body>

6. Mini-Projeto: Estrututra de Notícias 📰

  1. Crie um documento HTML completo.
  2. Adicione um <header> com o nome de um portal de notícias.
  3. Crie um <main> com duas <section>.
  4. Dentro de cada seção, coloque um <article> com um título <h3> e um parágrafo.
  5. Finalize com um <footer>.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a tag usada para definir o menu de navegação?
  2. Quantas vezes devemos usar a tag <h1> em uma única página?

Intermediários

  1. Explique a principal diferença entre a tag <section> e a tag <article>.
  2. Por que usar <div> para tudo é considerado uma má prática hoje em dia?

Desafio 🧠

  1. Pesquise sobre a tag <aside>. Em que situações ela deve ser utilizada em um layout semântico?

Próxima Aula: Vamos aprender a trabalhar com Textos e Links! 🔗

Aula 04 - Textos e Links 🔗

Objetivo

Objetivo: Aprender a organizar informações textuais utilizando listas e parágrafos, e dominar a criação de hyperlinks para conectar páginas e sites externos.

1. Organizando Textos 📝

O HTML oferece tags específicas para dar significado ao texto corrido.

  • <p> (Parágrafo): Usado para blocos de texto. O navegador adiciona automaticamente um espaço (margem) entre um parágrafo e outro.
  • <br> (Quebra de linha): Uma tag auto-contida (<br>) usada para pular linha dentro de um mesmo parágrafo. Use com moderação!

2. Listas: Ordenadas e Não Ordenadas 📋

As listas são fundamentais para organizar itens, menus e instruções.

🔹 Lista Não Ordenada (<ul>)

Usada quando a ordem dos itens não importa (exibe "bolinhas"). * <ul>: Unordered List (Lista Não Ordenada). * <li>: List Item (Item da Lista).

<ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>

🔢 Lista Ordenada (<ol>)

Usada quando a sequência é importante (exibe números). * <ol>: Ordered List (Lista Ordenada).

<ol>
    <li>Ligar o computador</li>
    <li>Abrir o editor</li>
    <li>Escrever o código</li>
</ol>

A tag <a> (Anchor/Âncora) é o que torna a internet uma "teia" conectada.

<a href="https://www.google.com" target="_blank">Ir para o Google</a>
  • href: O atributo mais importante. Define o destino (URL).
  • target="_blank": Abre o link em uma nova aba. Se omitido, abre na mesma aba.
  1. Externos: Apontam para outros sites (precisam do https://).
  2. Internos: Apontam para outras páginas do seu próprio projeto.
<a href="sobre.html">Saber mais sobre mim</a>

5. Visualizando com Mermaid 📊

graph LR
    A[Página Home] -- href='contato.html' --> B[Página Contato]
    A -- href='https://github.com' --> C[Site Externo]

6. Prática: Menu de Navegação 🚀

Vamos criar um menu funcional no terminal:

$ touch index.html contato.html
$ # No index.html, adicione:
$ <ul>
$   <li><a href="index.html">Início</a></li>
$   <li><a href="contato.html">Contato</a></li>
$ </ul>

Important

Nunca use espaços nos nomes dos arquivos que serão linkados! meu projeto.html vai quebrar o link. Use meu-projeto.html.

7. Mini-Projeto: Favoritos da Web ⭐

  1. Crie uma página HTML estruturada.
  2. Adicione um título <h1> "Meus Sites Favoritos".
  3. Crie uma lista não ordenada com 3 itens.
  4. Cada item da lista deve conter um link (<a>) para um site diferente, abrindo em uma nova aba.
  5. Adicione um parágrafo abaixo da lista explicando por que você gosta desses sites.

8. Exercícios Progressivos 📝

Básicos

  1. Qual o atributo obrigatório da tag <a> para que o link funcione?
  2. Qual a diferença visual entre <ul> e <ol>?

Intermediários

  1. Como fazer para um link abrir em uma aba separada do navegador?
  2. Crie o código de uma lista ordenada com os 3 passos para fazer um café.

Desafio 🧠

  1. É possível transformar uma imagem em um link? Como você faria isso (tente imaginar a estrutura das tags)?

Próxima Aula: Vamos dar vida ao site com Imagens e SVG! 🖼️

Aula 05 - Imagens e SVG 🖼️

Objetivo

Objetivo: Aprender a inserir conteúdos visuais de forma otimizada utilizando a tag <img> e compreender os benefícios dos gráficos vetoriais (SVG).

1. A Tag de Imagem 📷

Diferente das tags de texto, a tag <img> é auto-contida (não tem fechamento) e depende de atributos para funcionar.

Anatomia básica:

<img src="foto.jpg" alt="Descrição da imagem">
  • src (Source): O caminho para o arquivo da imagem.
  • alt (Alternative Text): O texto que descreve a imagem para cegos e motores de busca. Obrigatório!

2. Formatos de Imagem na Web 📂

Escolher o formato certo garante que o seu site carregue rápido.

Formato Tipo Uso Recomendado
JPG Raster Fotos com muitas cores e detalhes.
PNG Raster Imagens que precisam de transparência.
WebP Raster Formato moderno, super leve (Google).
SVG Vetor Logos, ícones e ilustrações simples.

3. O Poder do SVG ⚡

SVG (Scalable Vector Graphics) não é feito de pixels, mas de fórmulas matemáticas.

  • Infinitamente escalável: Você pode aumentar o tamanho o quanto quiser e ele nunca fica "pixelado".
  • Super leve: Geralmente são apenas algumas linhas de código.
  • Editável com CSS: Podemos mudar a cor de um SVG via código!

Exemplo de código SVG (Um círculo):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

4. Caminhos de Arquivo 🛣️

Saber organizar suas imagens em pastas é essencial:

$ mkdir meu-site
$ cd meu-site
$ mkdir assets
$ touch index.html
$ # Mova suas imagens para a pasta 'assets'

Como linkar no HTML:

<img src="assets/meu-logo.svg" alt="Logo da Empresa">

5. Visualizando a Hierarquia 📊

graph TD
    DIR[Pasta Raiz] --> HTML[index.html]
    DIR --> ASSETS[Pasta assets]
    ASSETS --> IMG1[foto.webp]
    ASSETS --> IMG2[icon.svg]
    HTML -.-> |src| IMG1
    HTML -.-> |src| IMG2

6. Prática: Galeria de Fotos 🚀

  1. Crie uma pasta para o projeto.
  2. Crie uma pasta chamada imagens.
  3. Baixe ou salve uma imagem qualquer dentro dela.
  4. No seu index.html, insira a imagem usando o caminho correto.
  5. Adicione um atributo width="300" para controlar o tamanho.

7. Mini-Projeto: Perfil com Avatar 👤

  1. Crie uma página de perfil.
  2. Insira uma imagem circular (svg) ou uma foto sua.
  3. Use tags semânticas (<header>, <main>).
  4. Crie uma lista de suas redes sociais abaixo da foto.
  5. Capriche no alt da sua foto de perfil!

8. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre os atributos src e alt?
  2. Por que a tag <img> não tem fechamento?

Intermediários

  1. Cite uma vantagem do formato SVG sobre o JPG.
  2. O que acontece com o site se você linkar uma imagem de 10MB diretamente na Home?

Desafio 🧠

  1. Pesquise como transformar uma imagem em um link (hyperlink). Escreva o código necessário para realizar essa tarefa.

Próxima Aula: Vamos organizar dados complexos com Tabelas! 📊

Aula 06 - Tabelas 📊

Objetivo

Objetivo: Aprender a organizar dados tabulares de forma estruturada e semântica utilizando as tags de tabela do HTML5.

1. Quando usar Tabelas? 🤔

Tabelas devem ser usadas exclusivamente para dados tabulares (planilhas, horários, listas de preços, classificações).

  • Antigamente: Usava-se tabelas para criar o layout do site. Isso é proibido hoje!
  • Hoje: O layout é feito com CSS (Flexbox/Grid), e tabelas são apenas para dados.

2. Estrutura Básica 🧱

Uma tabela é composta por linhas e células:

  • <table>: O recipiente principal.
  • <tr> (Table Row): Define uma linha.
  • <td> (Table Data): Define uma célula de dados comum.
  • <th> (Table Header): Define uma célula de cabeçalho (geralmente em negrito e centralizada).

Exemplo simples:

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Ricardo</td>
    <td>30</td>
  </tr>
</table>

3. Semântica de Tabelas 🧠

Para tabelas mais complexas e acessíveis, dividimos em seções:

  1. <thead>: Cabeçalho da tabela (títulos das colunas).
  2. <tbody>: O corpo com os dados principais.
  3. <tfoot>: O rodapé da tabela (totalizadores, observações).

📊 Fluxo Estrutural

graph TD
    T[table] --> TH[thead]
    T --> TB[tbody]
    T --> TF[tfoot]
    TH --> TR1[tr]
    TB --> TR2[tr]
    TF --> TR3[tr]
    TR1 --> TH_CELL[th]
    TR2 --> TD_CELL[td]

4. Bordas e Estilo 🎨

Por padrão, as tabelas HTML não têm bordas visíveis. Embora o estilo deva ser feito no CSS, podemos usar o atributo border="1" para visualizar a estrutura durante o aprendizado:

<table border="1">
    <caption>Lista de Preços</caption>
    <!-- conteúdo -->
</table>

Note

A tag <caption> serve para dar um título ou legenda à tabela e deve ser a primeira tag dentro de <table>.

5. Prática: Tabela de Notas 🚀

Vamos criar uma planilha de notas no terminal:

$ mkdir aula-06
$ cd aula-06
$ touch index.html
$ # No seu HTML, crie uma tabela com:
$ # thead: Matéria e Nota
$ # tbody: HTML (10), CSS (9)

6. Mini-Projeto: Tabela de Campeonato 🏆

  1. Crie uma página de Classificação de Futebol (ou outro esporte).
  2. Use a estrutura semântica (<thead>, <tbody>).
  3. As colunas devem ser: Posição, Time, Pontos e Vitórias.
  4. Adicione pelo menos 4 times.
  5. Destaque o cabeçalho usando a tag <th>.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a tag usada para definir uma linha na tabela?
  2. Qual a diferença entre as tags <td> and <th>?

Intermediários

  1. Por que não devemos usar tabelas para criar o layout (posicionamento) do site?
  2. Para que servem as tags <thead> e <tbody>?

Desafio 🧠

  1. Pesquise sobre os atributos colspan e rowspan. Para que eles servem e como fariam para "unir" duas células em uma tabela?

Próxima Aula: Vamos interagir com o usuário através de Formulários! 📝

Aula 07 - Formulários 📝

Objetivo

Objetivo: Compreender como coletar dados do usuário utilizando a tag <form>, associar rótulos com <label> e utilizar os diversos tipos de <input> disponíveis no HTML5.

1. O Recipiente de Dados: <form> 📥

Todo formulário deve estar envolvido pela tag <form>. Ela é responsável por agrupar os campos e definir para onde os dados serão enviados.

<form action="sucesso.html" method="GET">
    <!-- Campos aqui -->
</form>
  • action: Define a URL ou página que vai receber os dados.
  • method: Define como os dados são enviados (GET aparece na URL, POST é oculto).

2. Rótulos e Inputs: O Par Perfeito 💑

Nunca use um campo de entrada sem um rótulo explicativo.

  • <label>: Define o nome do campo.
  • <input>: Onde o usuário digita ou seleciona.

Atributo for e id:

Para "ligar" o label ao input, usamos o id. Isso melhora a acessibilidade: se o usuário clicar no texto do label, o cursor pula para o input automaticamente.

<label for="nome">Nome Completo:</label>
<input type="text" id="nome" name="nome_usuario">

3. Principais Tipos de Input 🎛️

O HTML5 introduziu tipos específicos que facilitam a vida do usuário (como abrir o teclado numérico no celular).

Tipo (type) Descrição
text Texto simples curto.
password Oculta os caracteres (bolinhas).
email Valida se há um "@" e um domínio.
number Permite apenas números.
date Abre um calendário para seleção.
color Abre um seletor de cores.

4. Botões de Ação 🔘

Para "enviar" o formulário, precisamos de um botão do tipo submit.

<button type="submit">Enviar Cadastro</button>
<button type="reset">Limpar Tudo</button>

5. Visualizando a Conexão 📊

graph LR
    U[Usuário] --> L[Label clicável]
    L -- For/ID --> I[Input focado]
    I --> B[Botão Submit]
    B --> F[Form Envies]

6. Prática: Formulário de Contato 🚀

Vamos criar uma página de contato no terminal:

$ mkdir aula-07
$ cd aula-07
$ touch index.html
$ # No seu HTML, crie um form com:
$ # Nome (text), Email (email) e Mensagem (textarea)

7. Mini-Projeto: Cadastro de Alunos 🎓

  1. Crie um formulário de cadastro completo.
  2. Campos obrigatórios: Nome, Email, Senha, Data de Nascimento e Nota Final (número).
  3. Use a tag <fieldset> e <legend> para agrupar e dar um título visual ao formulário.
  4. Adicione um botão de "Salvar" e um de "Limpar".
  5. Dica: Use o atributo required nos inputs para torná-los obrigatórios!

8. Exercícios Progressivos 📝

Básicos

  1. Qual a tag usada para criar um rótulo para um campo de entrada?
  2. Para que serve o atributo type="password"?

Intermediários

  1. Explique por que é importante usar o id no input associado ao for do label.
  2. Qual a diferença entre os métodos GET e POST em um formulário?

Desafio 🧠

  1. Pesquise sobre as tags <select> e <option>. Como você criaria uma lista de seleção para o usuário escolher o seu estado (UF)?

Próxima Aula: Vamos consolidar tudo no Projeto HTML! 🏛️

Aula 08 - Projeto HTML 🏛️

Objetivo

Objetivo: Consolidar todos os conhecimentos adquiridos no Módulo 2 para construir a estrutura completa e semântica de uma Landing Page (Página de Destino) profissional, focando na organização e acessibilidade do código.

1. O Desafio: Era uma Vez uma Empresa... 🏢

Imagine que você foi contratado para criar a página inicial de uma startup tecnológica. Seu objetivo hoje não é a beleza (isso faremos com CSS depois!), mas sim a estrutura impecável.

Requisitos do Projeto:

  • Layout totalmente semântico.
  • Navegação funcional.
  • Uso de imagens e SVGs.
  • Uma tabela de serviços ou preços.
  • Um formulário de contato.

2. Planejamento do Layout 📐

Antes de codar, precisamos planejar o "esqueleto" do nosso site.

📊 Estrutura Proposta

graph TD
    BODY[body] --> H[header]
    BODY --> M[main]
    BODY --> F[footer]
    H --> NAV[nav]
    M --> S1[section: Sobre]
    M --> S2[section: Serviços]
    M --> S3[section: Contato]
    S2 --> TAB[table: Preços]
    S3 --> FOR[form: Contato]

3. Passo a Passo do Desenvolvimento 🚀

Etapa 1: O Esqueleto Mínimo

Crie o arquivo index.html e gere o boilerplate. Lembre-se do lang="pt-br" e do UTF-8.

Etapa 2: O Cabeçalho (<header>)

Adicione o logo (um SVG ou texto <h1>) e um menu de navegação (<nav>) com links internos para as seções da página.

Etapa 3: O Conteúdo Principal (<main>)

Divida o conteúdo em seções claras: * Hero Section: Um título cativante e uma descrição breve. * Serviços: Use uma tabela para mostrar o que a empresa oferece. * Equipe: Use uma lista para listar os fundadores. * Inscrição: Um formulário para capturar o e-mail do cliente.

Adicione informações de copyright e links para redes sociais em uma lista.

4. Checklist de Qualidade ✅

Antes de dar o projeto como concluído no terminal:

$ # Verificando o código...
$ # 1. Todas as imagens possuem atributo 'alt'?
$ # 2. O formulário possui labels conectados aos inputs?
$ # 3. Existe apenas um 'h1' na página?
$ # 4. A hierarquia de títulos (h2, h3) está correta?

Important

A semântica não é apenas "organização", é empatia com quem usa tecnologias assistivas e inteligência para os motores de busca.

5. Mini-Projeto: Landing Page "Tech Solutions" 🎨

Este é o seu grande momento!

  1. Crie uma pasta chamada projeto-html.
  2. Dentro dela, crie as pastas assets e o arquivo index.html.
  3. Implemente a estrutura planejada acima.
  4. Dica: Use o site Unsplash ou Pexels para buscar imagens reais para o seu projeto.
  5. Desafio Extra: No seu formulário, use pelo menos 5 tipos diferentes de input (text, email, tel, date, select).

6. Exercícios de Revisão do Módulo 📝

  1. Qual a tag que representa o conteúdo único de uma página?
  2. Por que o alt em imagens e o label em formulários são obrigatórios para acessibilidade?
  3. O que define se um conteúdo deve ser um article ou uma section?
  4. Qual a diferença entre um link interno e um link externo?
  5. Qual tag de tabela deve ser usada para os títulos das colunas?

Fim do Módulo 2! 🎉 Prepare-se, pois na próxima aula entraremos no mundo das cores e formas com o Introdução ao CSS! 🖌️

Aula 09 - Introdução ao CSS 🖌️

Objetivo

Objetivo: Compreender o que é o CSS, como ele se diferencia do HTML e aprender os primeiros seletores para transformar o visual das suas páginas web.

1. O que é CSS? 🤔

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata).

  • HTML: Define o que o site tem (estrutura).
  • CSS: Define como o site aparece (estética).

💡 Analogia da Construção

  • HTML: É o tijolo, a viga e o cimento. { .fragment }
  • CSS: É a pintura, o piso e a decoração. { .fragment }

2. Sintaxe Básica 🧱

Um código CSS é composto por um Seletor e um Bloco de Declarações.

h1 {
    color: blue;
    font-size: 24px;
}
  • h1: O Seletor (quem queremos estilizar).
  • color: A Propriedade (o que queremos mudar).
  • blue: O Valor (como queremos que fique).

3. Formas de Aplicar CSS 📍

Existem três formas de inserir CSS em um projeto:

  1. Inline: Direto na tag HTML (Evite!). 
    <p style="color: red;">Texto vermelho</p>
  2. Interno: Dentro da tag <style> no <head>. 
    <style> h1 { color: green; } </style>
  3. Externo: Em um arquivo separado .css (O melhor!). 
    <link rel="stylesheet" href="estilo.css">

4. Seletores Básicos 🎯

Para sermos específicos em quem queremos mudar:

  • Seletor de Tag: Aplica a todas as tags daquele tipo. (Ex: p { ... })
  • Seletor de Classe (.): Aplica a elementos com o atributo class. (Ex: .azul { ... }). Pode ser usado em vários elementos.
  • Seletor de ID (#): Aplica a um elemento único com o atributo id. (Ex: #topo { ... }). Use apenas um por página!

5. Visualizando a Cascata 📊

O termo Cascata significa que as regras se sobrepõem seguindo uma hierarquia.

graph TD
    EXT[Arquivo Externo] --> INT[Estilo Interno]
    INT --> INL[Estilo Inline]
    INL --> WIN[Elemento Final]

Note

Regras mais "próximas" ao elemento (como o Inline) geralmente vencem as regras mais distantes (como o Arquivo Externo).

6. Prática: Pintando o Site 🚀

Vamos criar o nosso primeiro arquivo de estilo no terminal:

$ touch index.html estilo.css
$ # No HTML, link o CSS:
$ # <link rel="stylesheet" href="estilo.css">
$ # No CSS, mude a cor do body:
$ # body { background-color: lightgrey; }

7. Mini-Projeto: Cartão de Visitas Colorido 👤

  1. Crie um HTML com um título <h1> e um parágrafo <p>.
  2. Crie um arquivo style.css.
  3. No CSS, mude a cor do h1 para azul e o parágrafo para cinza.
  4. Crie uma classe chamada .destaque no CSS com a cor de fundo amarela.
  5. Aplique essa classe a uma palavra dentro do seu parágrafo.

8. Exercícios Progressivos 📝

Básicos

  1. O que significa a sigla CSS?
  2. Qual a diferença entre uma Propriedade e um Valor?

Intermediários

  1. Por que usar um arquivo CSS externo é melhor do que usar o estilo inline?
  2. Qual a diferença entre o seletor de Classe (.) e o seletor de ID (#)?

Desafio 🧠

  1. Imagine que você tem um h1 com a cor vermelha definida no CSS externo e azul definida no estilo interno. Qual cor o navegador vai exibir? Por quê?

Próxima Aula: Vamos entender como os elementos ocupam espaço com o Box Model! 📦

Aula 10 - Box Model 📦

Objetivo

Objetivo: Compreender que cada elemento no HTML é uma "caixa" e aprender a controlar o seu tamanho, espaçamento interno, bordas e margens externas utilizando o conceito de Box Model.

1. Tudo é uma Caixa! 📦

No CSS, todo elemento (um título, uma imagem, um parágrafo) é tratado como uma caixa retangular. O Box Model define como essas caixas são calculadas.

2. As Camadas da Caixa 🍰

Imagine uma caixa de presente protegida para envio:

  1. Content (Conteúdo): É o presente em si (texto ou imagem).
  2. Padding (Preenchimento): É o plástico bolha dentro da caixa. O espaço entre o conteúdo e a borda.
  3. Border (Borda): É o papelão da caixa. A linha que envolve o preenchimento e o conteúdo.
  4. Margin (Margem): É o espaço vazio entre a sua caixa e outras caixas ao redor.

3. Visualizando o Modelo 📊

graph TD
    M[Margin - Espaço Externo] --> B[Border - Linha da Caixa]
    B --> P[Padding - Espaço Interno]
    P --> C[Content - Texto/Imagem]

4. Propriedades CSS do Box Model 🛠️

.caixa {
    width: 300px;         /* Largura do conteúdo */
    height: 150px;       /* Altura do conteúdo */
    padding: 20px;       /* Espaço interno */
    border: 2px solid;   /* Borda */
    margin: 30px;        /* Espaço externo */
}

🧩 O Grande Problema do Tamanho

Por padrão, o navegador soma tudo! Se você tem uma caixa de 300px de largura e 20px de padding, o tamanho total na tela será 340px.

✅ A Solução: box-sizing

Para que a caixa mantenha sempre o tamanho que você definiu, usamos esta regra de ouro: 

* {
    box-sizing: border-box;
}

5. Prática: Brincando com Espaços 🚀

Vamos criar uma caixa visual no terminal:

$ touch index.html estilo.css
$ # No CSS, crie:
$ .bloco {
$   background-color: lightgreen;
$   padding: 20px;
$   border: 5px solid darkgreen;
$   margin-bottom: 50px;
$ }

6. Mini-Projeto: Card de Produto 🏷️

  1. Crie um <div> com a classe .card.
  2. Dentro dele, coloque um <h2> (Nome do Produto) e um <p> (Preço).
  3. No CSS, aplique:
    • Um fundo cinza claro.
    • Um padding de 20px para que o texto não encoste na borda.
    • Uma borda sólida de 1px.
    • Uma margin de auto e uma width de 250px para centralizar o card na tela.

7. Exercícios Progressivos 📝

Básicos

  1. Quais as 4 partes que compõem o Box Model?
  2. Qual a diferença entre padding e margin?

Intermediários

  1. Se um elemento tem width: 100px e padding: 10px, qual será a largura total dele sem usar o border-box?
  2. Como fariam para colocar uma margem apenas na parte de baixo de um elemento?

Desafio 🧠

  1. Pesquise e explique a diferença entre as unidades px (pixels) e % (porcentagem) ao definir a width de um elemento.

Próxima Aula: Vamos aprender como as caixas se posicionam com Display e Posicionamento! 📍

Aula 11 - Display e Posicionamento 📍

Objetivo

Objetivo: Compreender como os elementos se comportam no fluxo da página (display) e aprender a movê-los e fixá-los em locais específicos utilizando a propriedade position.

1. O Comportamento Display 🎛️

A propriedade display define como o elemento se comporta em relação aos seus vizinhos.

  • block: O elemento ocupa toda a largura disponível (como um parágrafo ou título). Ele sempre pula para uma nova linha.
  • inline: O elemento ocupa apenas o espaço necessário para o seu conteúdo (como um link ou negrito). Ele não permite definir width ou height.
  • inline-block: Um híbrido. Ele fica na mesma linha que outros, mas permite definir largura, altura e padding.
  • none: O elemento desaparece completamente da página (ele nem ocupa espaço).

2. Posicionamento (Position) 🧭

Por padrão, os elementos seguem o fluxo natural (um abaixo do outro). Com position, podemos quebrar esse fluxo.

  1. static: O padrão. O elemento segue o fluxo normal.
  2. relative: O elemento se move em relação à sua posição original, mas ainda ocupa o espaço original.
  3. absolute: O elemento "flutua" e se move em relação ao seu pai que tenha um posicionamento definido (não-static). Ele sai do fluxo normal.
  4. fixed: O elemento fica "colado" na tela do navegador, mesmo que você role a página.
  5. sticky: O elemento se comporta como relativo até atingir um ponto específico na rolagem, onde ele fica "preso" (muito usado em menus).

3. Visualizando o Posicionamento 📊

graph TD
    S[Static - Fluxo Normal] --> R[Relative - Move mas deixa espaço]
    R --> A[Absolute - Flutua em relação ao Pai]
    A --> F[Fixed - Preso no Navegador]

4. Coordenadas: top, bottom, left e right 🗺️

Quando usamos relative, absolute ou fixed, podemos usar estas propriedades para definir a distância exata:

.alerta {
    position: fixed;
    top: 20px;
    right: 20px;
}

Important

A propriedade z-index define quem fica "em cima" de quem quando os elementos se sobrepõem. Quanto maior o número, mais à frente o elemento fica.

5. Prática: Menu Fixo e Botão Flutuante 🚀

Vamos experimentar com o terminal:

$ touch index.html estilo.css
$ # No CSS, crie um elemento que não sai da tela:
$ .botao-suporte {
$   position: fixed;
$   bottom: 10px;
$   right: 10px;
$   background-color: yellow;
$ }

6. Mini-Projeto: Dashboard com Menu Sticky 🖱️

  1. Crie uma página longa com muito texto (use lorem ipsum).
  2. Crie um <nav> com a classe .menu.
  3. No CSS, aplique position: sticky; top: 0; ao menu.
  4. Crie um pequeno quadrado no canto inferior direito com position: fixed.
  5. Dica: Use background-color diferentes para visualizar bem onde cada elemento começa e termina.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre display: block e display: inline?
  2. O que acontece com um elemento se usarmos display: none?

Intermediários

  1. Se eu quiser que um menu de topo não suma ao rolar a página, qual position devo usar?
  2. Explique a relação entre um elemento com position: absolute e o seu pai.

Desafio 🧠

  1. Pesquise e explique para que serve o z-index. O que acontece se dois elementos tiverem o mesmo z-index e estiverem sobrepostos?

Próxima Aula: Vamos aprender a alinhar tudo perfeitamente com o Flexbox! 📐

Aula 12 - Flexbox 📐

Objetivo

Objetivo: Dominar o CSS Flexbox para criar layouts flexíveis e alinhar elementos de forma profissional e simples, tanto na horizontal quanto na vertical.

1. O que é Flexbox? 🤔

O Flexible Box Layout (ou Flexbox) é um modelo de layout que permite distribuir espaço e alinhar itens em uma interface de forma muito eficiente.

  • Antigamente: Usávamos float e tabelas (dava muito erro).
  • Hoje: O Flexbox é o padrão para layouts de uma única direção (uma linha ou uma coluna).

2. O Container e os Itens 📦

Para usar Flexbox, precisamos de um pai (Flex Container) e seus filhos (Flex Items).

.pai {
    display: flex; /* Aqui a mágica começa! */
}

3. Alinhamento no Eixo Principal (Justify Content) ↔️

O Eixo Principal (Main Axis) é, por padrão, a horizontal. Com a propriedade justify-content, controlamos o alinhamento horizontal:

  • flex-start: Itens no início (esquerda).
  • center: Itens no centro.
  • flex-end: Itens no final (direita).
  • space-between: Espaço igual entre os itens.
  • space-around: Espaço igual ao redor dos itens.

4. Alinhamento no Eixo Secundário (Align Items) ↕️

O Eixo Secundário (Cross Axis) é a vertical. Com align-items, controlamos a altura dos itens:

  • stretch: Estica os itens para ocupar toda a altura (padrão).
  • center: Centraliza verticalmente.
  • flex-start: Alinha no topo.
  • flex-end: Alinha na base.

5. Visualizando os Eixos 📊

graph LR
    P[Pai: display: flex] --> I1[Item 1]
    P --> I2[Item 2]
    P --> I3[Item 3]
    Note over P: Eixo Principal (Justify)
    Note over P: Eixo Secundário (Align)

6. Direção e Quebra (Direction & Wrap) 🔄

  • flex-direction: Define se os itens ficam em linha (row) ou coluna (column).
  • flex-wrap: Por padrão, o flex tenta colocar tudo em uma linha só. Com flex-wrap: wrap, os itens pulam de linha se não houver espaço.

7. Prática: Centralização Perfeita 🚀

Antes do Flexbox, centralizar algo era um pesadelo. Agora:

$ touch index.html estilo.css
$ # No CSS, para centralizar um item no meio da tela:
$ .container-pai {
$   display: flex;
$   justify-content: center;
$   align-items: center;
$   height: 100vh; /* Altura total da tela */
$ }

8. Mini-Projeto: Barra de Navegação Moderna 🖱️

  1. Crie um <nav> com uma lista <ul> e 4 links.
  2. No CSS, transforme o <ul> em um Flex Container.
  3. Use justify-content: space-between para afastar os links.
  4. Remova as "bolinhas" da lista com list-style: none.
  5. Adicione um padding para ficar elegante.

9. Exercícios Progressivos 📝

Básicos

  1. Como transformamos um elemento em um Flex Container?
  2. Para que serve a propriedade justify-content?

Intermediários

  1. Qual a diferença entre space-between e space-around?
  2. Como fariam para transformar uma lista de links horizontal em uma lista vertical usando Flexbox?

Desafio 🧠

  1. O que acontece com os itens de uma lista flex se definirmos flex-direction: column-reverse? Teste e descreva o resultado.

Próxima Aula: Vamos construir grades complexas com o Grid Layout! 🏁

Aula 13 - Grid Layout 🏁

Objetivo

Objetivo: Compreender o potencial do CSS Grid para criar layouts bidimensionais (linhas e colunas simultâneas) e aprender a dividir a página em grades profissionais e flexíveis.

1. O que é CSS Grid? 🤔

Diferente do Flexbox (que foca em uma dimensão), o Grid Layout é feito para duas dimensões: você controla o alinhamento tanto na horizontal (colunas) quanto na vertical (linhas).

  • Flexbox: Ideal para componentes (menus, botões alinhados).
  • Grid: Ideal para o layout geral da página (cabeçalho, barra lateral, conteúdo e rodapé).

2. Definindo a Grade 📐

Para começar, transformamos um elemento em um Grid Container:

.container {
    display: grid;
    grid-template-columns: 200px auto; /* Duas colunas */
    grid-template-rows: 100px auto 50px; /* Três linhas */
}

3. Unidades Modernas: fr e repeat 📏

O CSS Grid introduziu a unidade de Fração (fr), que distribui o espaço disponível de forma proporcional.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 20px; /* Espaçamento entre as células */
}
  • repeat(3, 1fr): Cria 3 colunas que dividem o espaço igualmente.
  • gap: Define o "respiro" entre as linhas e colunas.

4. Posicionando Itens (Grid Column/Row) 🎯

Podemos dizer exatamente onde um item começa e onde ele termina na grade usando as linhas da grade.

.item-destaque {
    grid-column: 1 / 3; /* Começa na linha 1 e termina na 3 (ocupa 2 colunas) */
}

5. Visualizando a Grade 📊

graph TD
    subgraph Grid
    C1[Coluna 1]
    C2[Coluna 2]
    C3[Coluna 3]
    end
    Note over C1,C3: grid-template-columns: 1fr 1fr 1fr

6. Prática: Layout de Galeria 🚀

Vamos criar uma grade de fotos no terminal:

$ touch index.html estilo.css
$ # No CSS, para criar um grid 3x3:
$ .galeria {
$   display: grid;
$   grid-template-columns: repeat(3, 1fr);
$   gap: 10px;
$ }

7. Mini-Projeto: Layout Completo de Site 🖱️

  1. Crie um <div> pai chamado .layout.
  2. Dentro dele, coloque: <header>, <aside>, <main> e <footer>.
  3. No CSS, transforme o .layout em um Grid.
  4. Configure o grid para ter:
    • Um cabeçalho que ocupa toda a largura (grid-column: 1 / 3).
    • Uma barra lateral (aside) e o conteúdo principal (main) lado a lado.
    • Um rodapé que também ocupa toda a largura.
  5. Dica: Use cores de fundo diferentes para ver a "mágica" acontecer.

8. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença fundamental entre Flexbox e Grid?
  2. Para que serve a propriedade gap?

Intermediários

  1. O que significa a unidade 1fr no CSS Grid?
  2. Como fariam para criar uma grade com 4 colunas de exatamente 250px cada uma, usando a função repeat?

Desafio 🧠

  1. Pesquise sobre a propriedade grid-area. Como ela facilita a montagem de layouts complexos comparada ao uso de números de linhas?

Próxima Aula: Vamos aprender a adaptar o site para celulares com a Responsividade! 📱

Aula 14 - Responsividade 📱

Objetivo

Objetivo: Aprender a criar sites que se adaptam automaticamente a qualquer tamanho de tela (celulares, tablets e desktops) utilizando Media Queries e a filosofia Mobile-First.

1. O que é Web Design Responsivo? 🤔

Hoje, mais de 60% dos acessos à internet vêm de dispositivos móveis. Um site responsivo é aquele que rearranja seus elementos para oferecer a melhor experiência, independente do tamanho da tela.

  • Não Responsivo: O site fica "pequeno" e você precisa dar zoom. ❌
  • Responsivo: O conteúdo se ajusta, botões ficam maiores e o texto legível. ✅

2. A Meta Tag Viewport 🖼️

Para que a responsividade funcione, precisamos avisar o navegador que o site deve respeitar a largura do dispositivo. Lembra dessa tag no <head>?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Media Queries 📡

As Media Queries são filtros que aplicam CSS apenas se certas condições forem atendidas (como a largura da tela).

/* Estilo padrão (para celular) */
body { background-color: white; }

/* Se a tela tiver pelo menos 768px (Tablet) */
@media (min-width: 768px) {
    body { background-color: lightgrey; }
}

/* Se a tela tiver pelo menos 1024px (Desktop) */
@media (min-width: 1024px) {
    body { background-color: grey; }
}

4. Mobile-First 📱➡️💻

A técnica mais moderna consiste em escrever o CSS primeiro para telas pequenas e depois usar Media Queries para adicionar complexidade em telas maiores.

  • Vantagem: O site carrega mais rápido no celular e o design fica mais limpo.

5. Visualizando a Adaptação 📊

graph LR
    subgraph Mobile
    M1[Logo]
    M2[Conteúdo]
    M3[Menu Burguer]
    end
    subgraph Desktop
    D1[Logo]
    D2[Conteúdo]
    D3[Menu Extenso]
    D4[Barra Lateral]
    end
    Mobile -- Media Query --> Desktop

6. Prática: Grade Responsiva 🚀

Vamos transformar o Grid da aula anterior em algo que muda de acordo com a tela:

$ touch index.html estilo.css
$ # No CSS, crie uma grade que é 1 coluna no celular e 3 no PC:
$ .grade {
$   display: grid;
$   grid-template-columns: 1fr;
$ }
$ @media (min-width: 800px) {
$   .grade { grid-template-columns: repeat(3, 1fr); }
$ }

7. Mini-Projeto: Dashboard Flexível 🖱️

  1. Crie uma página com um Header e 3 Cards de conteúdo.
  2. No celular: Os cards devem ficar um abaixo do outro (empilhados).
  3. No Desktop (min-width: 768px): Os cards devem ficar lado a lado usando Flexbox ou Grid.
  4. O Header deve mudar de cor quando a tela for maior que 1024px.
  5. Dica: Use as ferramentas de desenvolvedor (F12) e clique no ícone de celular para testar diferentes tamanhos.

8. Exercícios Progressivos 📝

Básicos

  1. Por que a responsividade é essencial na web moderna?
  2. Para que serve a meta tag viewport?

Intermediários

  1. Explique como funciona uma Media Query com min-width.
  2. O que significa a filosofia "Mobile-First"?

Desafio 🧠

  1. Pesquise sobre as unidades de medida vw (viewport width) e vh (viewport height). Como elas podem ajudar na criação de layouts que ocupam toda a tela?

Próxima Aula: Vamos dar movimento ao site com Animações e Transições! ✨

Aula 15 - Animações e Transições ✨

Objetivo

Objetivo: Dar vida e interatividade às suas páginas web utilizando transições suaves, transformações de elementos e animações complexas baseadas em keyframes.

1. Transições Suaves (transition) 🧚

A transição permite que a mudança de um estilo para outro ocorra de forma gradual, em vez de ser instantânea.

.botao {
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}

.botao:hover {
    background-color: darkblue;
}
  • 0.5s: A duração da animação (meio segundo).
  • ease-in-out: O ritmo da transição (começa lento, acelera e termina lento).

2. Transformações (transform) 📐

Com a propriedade transform, podemos girar, inclinar, aumentar ou mover elementos sem afetar o layout ao redor.

  • rotate(45deg): Gira o elemento.
  • scale(1.2): Aumenta o tamanho em 20%.
  • translate(10px, 20px): Move o elemento nos eixos X e Y.

3. Animações com Keyframes 🎬

Quando precisamos de algo mais complexo que uma simples transição, usamos os Keyframes (Quadros-Chave).

@keyframes flutuar {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.imagem-hero {
    animation: flutuar 3s infinite ease-in-out;
}
  • 3s: Duração de um ciclo.
  • infinite: Repete para sempre.

4. Visualizando o Ciclo da Animação 📊

graph LR
    A[0% - Início] --> B[50% - Meio]
    B --> C[100% - Fim]
    C -- Loop --> A

5. Prática: Botão Pulsante 🚀

Vamos criar um efeito de pulsação no terminal:

$ touch index.html estilo.css
$ # No CSS, crie uma animação de escala:
$ @keyframes pulsar {
$   from { transform: scale(1); }
$   to { transform: scale(1.1); }
$ }
$ .botao { animation: pulsar 1s infinite alternate; }

6. Mini-Projeto: Dashboard Interativo 🖱️

  1. Crie um card com uma imagem e um título.
  2. Adicione uma transição para que, ao passar o mouse (:hover), a sombra do card aumente e ele suba levemente (translateY).
  3. Crie um ícone de "carregando" (pode ser um círculo SVG).
  4. Faça o ícone girar infinitamente usando rotate(360deg) nos keyframes.
  5. Dica: Use transition: all 0.3s para que todas as mudanças sejam suaves.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre uma transição e uma animação?
  2. O que faz a propriedade transform: scale(1.5)?

Intermediários

  1. Como fariam para uma animação nunca parar de rodar?
  2. Para que serve o seletor :hover no contexto de transições?

Desafio 🧠

  1. Pesquise sobre a propriedade opacity. Como você criaria um efeito de "esmaecer" (fade-in) para que um texto apareça suavemente ao carregar a página?

Próxima Aula: Vamos consolidar tudo no Projeto Final + Deploy! 🚢

Aula 16 - Projeto Final + Deploy 🚢

Objetivo

Objetivo: Consolidar todo o conhecimento de HTML5 e CSS3 construindo um projeto completo, responsivo e interativo, e aprender como publicar seu site gratuitamente para que qualquer pessoa no mundo possa acessá-lo via GitHub Pages.

1. O Desafio Final: Seu Portfólio ou Site de Empresa 🏗️

Neste projeto, você deve unir a estrutura semântica do Módulo 2 com o estilo avançado, layout e animações do Módulo 3.

Requisitos Obrigatórios:

  • Semântica: Header, Nav, Main (com sections), e Footer.
  • Estilo: Uso de cores harmoniosas e fontes profissionais (Google Fonts).
  • Layout: Flexbox para o menu/cards e Grid para a estrutura da página.
  • Responsividade: O site deve funcionar perfeitamente no celular e no PC.
  • Interatividade: No mínimo uma animação com Keyframes e transições nos botões.

2. O que é Deploy? ☁️

Fazer o Deploy significa colocar o seu site (que hoje só existe no seu computador) em um servidor na nuvem. Existem várias formas de fazer isso, mas a mais usada por desenvolvedores é o GitHub Pages.

3. Passo a Passo do Deploy no GitHub 🚀

Etapa 1: Criar o Repositório

No seu GitHub, crie um novo repositório chamado meu-primeiro-site.

Etapa 2: Subir os Arquivos

Envie seu index.html, style.css e a pasta assets para o repositório.

Etapa 3: Ativar o GitHub Pages

  1. No repositório, vá em Settings (Configurações).
  2. Clique na aba Pages no menu lateral.
  3. Em "Branch", selecione main (ou master) e clique em Save.
  4. Aguarde 2 minutos e você receberá um link (ex: usuario.github.io/meu-primeiro-site).

4. Visualizando o Fluxo de Deploy 📊

graph LR
    PC[Seu Computador] -- Git Push --> GH[GitHub Repositório]
    GH -- Build --> GHP[GitHub Pages URL]
    GHP --> World[Qualquer pessoa acessa!]

5. Prática: Verificando antes de subir ✅

Use o terminal para garantir que seu projeto está organizado:

$ # 1. Verifique se o index.html está na raiz do projeto
$ ls
$ # 2. Verifique se os caminhos das imagens estão corretos
$ # 3. Remova arquivos de teste ou lixo
$ # 4. Garanta que o meta viewport está presente

6. Mini-Projeto: Dashboard Completo com Deploy 🎨

  1. Finalize sua Landing Page (da Aula 08) com todo o CSS aprendido.
  2. Adicione um menu "sticky" e cards flexíveis.
  3. Garanta que a grade mude de 1 para 3 colunas no desktop.
  4. Suba para o GitHub e ative o Pages.
  5. Desafio Extra: Compartilhe o link do seu site com um colega!

7. Exercícios de Finalização do Curso 📝

  1. Qual a importância de separar o código HTML do CSS para a manutenção do site?
  2. O que acontece se você esquecer de subir a pasta de imagens para o GitHub?
  3. Como você pode testar se o seu site ficou realmente responsivo após o deploy?
  4. Qual o comando ou configuração no GitHub Pages que ativa o site a partir da branch principal?
  5. Qual a sensação de ver o seu primeiro site "vivo" na internet? 😍

Parabéns! 🎉 Você concluiu o curso de Programação Web I - HTML5 e CSS3. Agora você tem as ferramentas para construir o que imaginar na rede mundial de computadores. Continue praticando e codando! 🚀

Aula 17 - Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀

Objetivo Pedagógico

Objetivo: Construção de grades bidimensionais avançadas utilizando alinhamento aninhado via subgrid, repetições dinâmicas com auto-fit/minmax e áreas nomeadas complexas.

📑 1. Fundamentos Teóricos & Análise Técnica

O CSS Grid Layout transformou o design de interfaces web ao introduzir um sistema nativo de posicionamento bidimensional (linhas e colunas simultâneas). A especificação do Grid Nível 2 estendeu essas capacidades ao introduzir a propriedade subgrid, solucionando uma limitação histórica das grades na web: a falta de alinhamento entre itens de contêineres filhos e a grade do elemento ancestral.

Antes do subgrid, quando um elemento filho de uma grade possuía seu próprio display em grid, suas trilhas internas operavam de forma totalmente independente da grade principal. Isso causava desalinhamentos verticais comuns em layouts baseados em cards (onde títulos, corpos de texto e rodapés de alturas variadas não conseguiam sincronizar suas alturas horizontalmente).

Com a introdução de grid-template-rows: subgrid ou grid-template-columns: subgrid, o contêiner filho passa a adotar as linhas e espaçamentos (gap) definidos na grade pai. Adicionalmente, técnicas modernas como repeat(auto-fit, minmax(min(100%, 300px), 1fr)) garantem designs altamente fluidos sem depender de media queries rígidas.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    subgraph GridPai ["Grid Pai (display: grid)"]
        Col1["Coluna 1 (1fr)"] --- Col2["Coluna 2 (1fr)"] --- Col3["Coluna 3 (1fr)"]
        Row1["Linha 1: Títulos Sincronizados"]
        Row2["Linha 2: Corpos com Altura Variável"]
        Row3["Linha 3: Rodapés Alinhados na Base"]
    end
    subgraph CardFilho ["Card Filho (grid-template-rows: subgrid)"]
        Row1 -.-> C1["Card 1 Header"]
        Row2 -.-> C2["Card 1 Body"]
        Row3 -.-> C3["Card 1 Footer"]
    end
    style GridPai fill:#e3f2fd,stroke:#1565c0
    style CardFilho fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Herança de Trilhas via Subgrid: Permite que elementos filhos participem do dimensionamento e alinhamento da grade externa. - Fluidez com Minmax e Auto-Fit: Distribuição automática do número de colunas conforme a largura disponível sem breakpoints imperativos. - Áreas Nomeadas (grid-template-areas): Estruturação declarativa e intuitiva do esqueleto visual da página. - Performance de Renderização: Cálculos nativos executados na fase de Layout do navegador sem dependência de JavaScript.

🛠️ 2. Implementação Prática em CSS Grid Nível 2

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// subgrid-cards.css (Alinhamento Perfeito de Trilhas)
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  padding: 32px;
}

.card-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.card-item__header {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
}

.card-item__body {
  color: #475569;
  line-height: 1.6;
}

.card-item__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

💡 Análise Passo a Passo do Código

  1. Extensão Vertical: .card-item declara grid-row: span 3, reservando três linhas consecutivas na grade pai.
  2. Adoção do Subgrid: grid-template-rows: subgrid faz com que header, body e footer do card usem exatamente as mesmas linhas que os cards vizinhos.
  3. Alinhamento Estético: Mesmo que um card tenha 5 linhas de texto e outro tenha 2, todos os cabeçalhos e rodapés ficarão na mesma altura horizontal.

🎯 3. Próximos Passos & Sequência Didática

Aula 18 - Animações CSS de Alta Performance e Transformações 3D 🎬

Objetivo Pedagógico

Objetivo: Otimização de animações web executadas na GPU através das propriedades transform e opacity, evitando reflows/repaints e aplicando matrizes 3D.

📑 1. Fundamentos Teóricos & Análise Técnica

A renderização em navegadores modernos segue uma esteira de processamento (Pixel Pipeline) constituída por quatro fases sucessivas: JavaScript/Recalculate Style -> Layout (Reflow) -> Paint (Repaint) -> Composite.

Quando propriedades dimensionais como width, height, margin ou top são alteradas durante uma animação, o navegador é forçado a reexecutar as etapas custosas de Layout e Paint para a árvore inteira do documento, gerando perda de quadros (jank) e taxas inferiores a 60 frames por segundo (FPS).

Para atingir taxa de atualização constante de 60fps a 120fps em monitores modernos: 1. Deve-se restringir animações contínuas às propriedades transform (translate, rotate, scale) e opacity. 2. Essas propriedades operam diretamente na camada de Composição (Composite), que é descarregada para processamento paralelo na GPU. 3. O uso de perspective e transformações 3D (translate3d, rotateY) força a criação de camadas gráficas dedicadas (Compositor Layers).

📐 Arquitetura Conceitual & Diagrama de Fluxo

sequenceDiagram
    autonumber
    participant DOM as Árvore DOM
    participant Layout as Motor de Layout (CPU)
    participant Paint as Motor de Pintura (CPU)
    participant GPU as Compositor Layer (GPU)

    Note over DOM,Layout: Animação Ineficiente (ex: margin-left, width)
    DOM->>Layout: Recalcula geometria de todos os nós
    Layout->>Paint: Repinta pixels em bitmaps
    Paint->>GPU: Envia nova textura (Lento / Queda de FPS)

    Note over DOM,GPU: Animação de Alta Performance (transform, opacity)
    DOM->>GPU: Transforma textura já alocada em hardware
    GPU-->>GPU: Interpolação a 60/120 FPS sem reflow nem repaint!

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Propriedades Amigáveis à GPU: Priorização estrita de transform e opacity em transições contínuas. - Declaração will-change: Informar ao navegador com parcimônia para pré-alocar memória de camada de renderização. - Espaço Tridimensional (perspective): Configuração de ponto de fuga óptico para rotações e translações no eixo Z. - Timing Functions Avançadas: Construção de curvas de Bezier que simulam leis da física (massa, atrito e impulso).

🛠️ 2. Implementação Prática em CSS Animations e GPU Offloading

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// card-flip-3d.css (Transformação 3D com Aceleração de Hardware)
.scene-3d {
  perspective: 1000px;
  width: 320px;
  height: 420px;
}

.card-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.scene-3d:hover .card-flipper {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.card-face--front {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
}

.card-face--back {
  background: #1e293b;
  color: #f8fafc;
  transform: rotateY(180deg);
}

💡 Análise Passo a Passo do Código

  1. Perspectiva de Cena: perspective: 1000px define a distância visual entre o observador e a tela.
  2. Preservação do Espaço 3D: transform-style: preserve-3d garante que os filhos front e back coexistam em eixos Z tridimensionais.
  3. Ocultação da Face Oposta: backface-visibility: hidden impede que a face de trás seja desenhada quando voltada para o fundo, economizando ciclos da GPU.

🎯 3. Próximos Passos & Sequência Didática

Aula 19 - Otimização de Performance Web e Critical CSS ⚡

Objetivo Pedagógico

Objetivo: Técnicas avançadas de Web Vitals (LCP, FID/INP, CLS), extração de CSS Crítico inline e eliminação de recursos que bloqueiam a renderização inicial.

📑 1. Fundamentos Teóricos & Análise Técnica

A velocidade de carregamento de uma página web influencia diretamente as taxas de conversão e o ranqueamento em motores de busca (SEO). O Google formalizou essas métricas por meio dos Core Web Vitals: 1. LCP (Largest Contentful Paint): Mede o tempo necessário para renderizar o maior bloco de conteúdo visível (texto principal ou imagem hero). Meta: <= 2.5 segundos. 2. INP (Interaction to Next Paint): Avalia a latência das interações do usuário durante toda a sessão da página. Meta: <= 200 milissegundos. 3. CLS (Cumulative Layout Shift): Quantifica movimentações inesperadas de elementos na tela durante o carregamento. Meta: <= 0.1.

Arquivos CSS externos linkados no <head> constituem recursos que bloqueiam a renderização (Render-Blocking Resources). Até que o arquivo CSS seja baixado e o CSSOM (CSS Object Model) seja computado, o navegador não consegue desenhar nenhum pixel na tela.

A técnica de Critical CSS consiste em extrair exclusivamente as regras de estilo necessárias para exibir o conteúdo imediatamente visível (Above the Fold) e inseri-las diretamente em uma tag <style> no <head>, enquanto o restante do CSS assíncrono é carregado em segundo plano via preload.

📐 Arquitetura Conceitual & Diagrama de Fluxo

sequenceDiagram
    autonumber
    participant Browser as Navegador
    participant Server as Servidor / CDN

    Browser->>Server: GET /index.html
    Server-->>Browser: HTML contendo Critical CSS Inline no <head>
    Note over Browser: Renderização Imediata do Topo (LCP Otimizado!)
    Browser->>Server: GET /styles.deferred.css (Preload Assíncrono)
    Server-->>Browser: Retorna Estilos Complementares
    Note over Browser: Aplica Estilos da Página Completa sem Bloquear o Usuário

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Eliminação do Render-Blocking: Inline do CSS Crítico no cabeçalho para pintar o conteúdo Above the Fold no primeiro pacote TCP (14KB). - Preload do CSS Secundário: Carregamento não-bloqueante via <link rel='preload' as='style'>. - Prevenção de Layout Shift (CLS): Definição explícita de atributos width, height ou aspect-ratio em imagens e contêineres. - Minificação e Purge: Remoção de classes CSS não utilizadas no build através de ferramentas como PurgeCSS ou Tailwind JIT.

🛠️ 2. Implementação Prática em Critical CSS e Core Web Vitals

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// index.html (Padrão de Carregamento de Alta Performance)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portal Web Otimizado</title>

  <!-- 1. Critical CSS Inline: Estilos essenciais Above the Fold -->
  <style>
    :root { --font-main: system-ui, -apple-system, sans-serif; --c-primary: #1d4ed8; }
    body { margin: 0; font-family: var(--font-main); color: #1e293b; background: #f8fafc; }
    .hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem; }
    .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 1rem; color: var(--c-primary); }
  </style>

  <!-- 2. Preload Assíncrono para o CSS Restante (Não-Bloqueante) -->
  <link rel="preload" href="/css/app.bundle.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/app.bundle.css"></noscript>
</head>
<body>
  <header class="hero">
    <h1>Experiência Web Ultrarrápida</h1>
    <p>Página renderizada instantaneamente respeitando os padrões Core Web Vitals.</p>
  </header>
</body>
</html>

💡 Análise Passo a Passo do Código

  1. Inline do Estilo Crítico: O bloco <style> contém apenas o esqueleto visual que o usuário enxerga nos primeiros milissegundos.
  2. Preload Assíncrono: O atributo onload='this.rel=stylesheet' altera dinamicamente a relação da tag sem interromper o parser HTML.
  3. Fallback com Noscript: Garante que clientes com JavaScript desativado recebam a estilização completa normalmente.

🎯 3. Próximos Passos & Sequência Didática

Aula 20 - Projeto Capstone: Portal Web Autônomo Responsivo 🏆

Objetivo Pedagógico

Objetivo: Desenvolvimento do projeto prático final de HTML5 e CSS3, unindo semântica moderna, subgrid, animações fluidas na GPU e otimizações Core Web Vitals.

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone de Programação Web I é o marco culminante da jornada de fundamentos e técnicas avançadas de interface web. Ele desafia o estudante a projetar, codificar e publicar uma aplicação estática completa, profissional e autônoma, validando na prática o ciclo completo de desenvolvimento frontend moderno.

O portal construído deve consolidar: 1. Estrutura Semântica Rigorosa: Marcação completa utilizando tags HTML5 (<header>, <nav>, <main>, <article>, <aside>, <footer>, <figure>). 2. Layout com Grid Nível 2 e Subgrid: Página inicial com seções de produtos/artigos cujos títulos e rodapés sincronizam alturas independentemente do volume textual. 3. Micro-interações de Alta Performance: Menus de navegação fluidos, cards interativos com transições aceleradas na GPU e ausência total de reflows indesejados. 4. Excelência em Performance e Acessibilidade: Relatório do Google Lighthouse demonstrando notas superiores a 95 em Desempenho, Acessibilidade, Melhores Práticas e SEO.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    HTML["1. Semântica HTML5<br>(Estrutura e Acessibilidade)"] --> CSS["2. CSS Moderno<br>(Variables, Subgrid, Flexbox)"]
    CSS --> Motion["3. Micro-interações na GPU<br>(Transform, Opacity, 3D)"]
    Motion --> Vitals["4. Otimização Web Vitals<br>(Critical CSS, Zero CLS)"]
    Vitals --> Deploy["5. Publicação em Produção<br>(GitHub Pages com HTTPS)"]
    style HTML fill:#e3f2fd,stroke:#1565c0
    style CSS fill:#fff3e0,stroke:#e65100
    style Vitals fill:#e8f5e9,stroke:#2e7d32
    style Deploy fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Design Responsivo Fluido: Uso de unidades relativas (rem, ch, clamp()) para garantir adaptação suave em qualquer viewport. - Tipografia Escalar e Acessível: Respeito ao tamanho de fonte base configurado no navegador pelo usuário final. - Isolamento Semântico de CSS: Metodologias modernas como BEM ou CSS Modules para sustentabilidade do código. - Pipeline de Entrega Contínua: Deploy automatizado e verificação de integridade antes de disponibilizar para o mundo.

🛠️ 2. Implementação Prática em HTML5 Semântico e CSS3 Avançado

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// capstone-portal.html (Esqueleto do Projeto Integrador)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portal Tech Capstone</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="site-nav" aria-label="Navegação Principal">
      <a href="#home" class="site-brand">DevPortal</a>
      <ul class="nav-links">
        <li><a href="#artigos">Artigos</a></li>
        <li><a href="#projetos">Projetos</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <section class="portal-grid">
      <h2>Publicações em Destaque</h2>
      <div class="cards-container">
        <article class="capstone-card">
          <h3>Arquitetura de Subgrid em Produção</h3>
          <p>Como alinhar grades complexas bidimensionais sem hacks de JavaScript.</p>
          <a href="#" class="card-action">Ler Artigo Completo &rarr;</a>
        </article>
      </div>
    </section>
  </main>
</body>
</html>

💡 Análise Passo a Passo do Código

  1. Semântica Nativa: O documento utiliza marcas estruturais claras, permitindo indexação impecável em navegadores e leitores de tela.
  2. Responsividade Nativa: Estruturado para ser estilizado com subgrid e minmax sem quebras de layout.
  3. Pronto para Produção: Código limpo, validado e preparado para auditoria nos painéis do Chrome DevTools.

🎯 3. Próximos Passos & Sequência Didática

Exercícios

🏋️ Exercícios do Curso

Lista completa das 20 unidades de exercicios organizadas em 5 módulos didáticos.

🏋️ Exercício 01 – Introdução à Web

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 01 sobre Introdução à Web, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Introdução à Web, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Introdução à Web** fundamenta-se em princípios consolidados de engenharia de software (1. Como a Internet Funciona?, 2. Navegadores Modernos, 3. DevTools: O Superpoder do Desenvolvedor ️, 4. Estrutura de Projeto). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Introdução à Web. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Introdução à Web** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Introdução à Web. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 01 Responder Quiz 01

🏋️ Exercício 02 – Documento HTML Mínimo ️

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 02 sobre Documento HTML Mínimo ️, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Documento HTML Mínimo ️, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Documento HTML Mínimo ️** fundamenta-se em princípios consolidados de engenharia de software (1. O que é HTML?, 2. A Anatomia de uma Tag, 3. A Estrutura Básica (O Boilerplate), 4. Metadados Essenciais). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Documento HTML Mínimo ️. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Documento HTML Mínimo ️** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Documento HTML Mínimo ️. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 02 Responder Quiz 02

🏋️ Exercício 03 – Estrutura e Semântica

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 03 sobre Estrutura e Semântica, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Estrutura e Semântica, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Estrutura e Semântica** fundamenta-se em princípios consolidados de engenharia de software (1. O que é HTML Semântico?, 2. As Tags de Estrutura Principal ️, 3. Entendendo Section e Article, 4. Hierarquia de Títulos (h1 a h6)). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Estrutura e Semântica. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Estrutura e Semântica** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Estrutura e Semântica. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 03 Responder Quiz 03

🏋️ Exercício 04 – Textos e Links

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 04 sobre Textos e Links, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Textos e Links, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Textos e Links** fundamenta-se em princípios consolidados de engenharia de software (1. Organizando Textos, 2. Listas: Ordenadas e Não Ordenadas, 3. Hyperlinks: A Teia da Web ️, 4. Links Internos vs Externos). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Textos e Links. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Textos e Links** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Textos e Links. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 04 Responder Quiz 04

🏋️ Exercício 05 – Imagens e SVG ️

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 05 sobre Imagens e SVG ️, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Imagens e SVG ️, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Imagens e SVG ️** fundamenta-se em princípios consolidados de engenharia de software (1. A Tag de Imagem, 2. Formatos de Imagem na Web, 3. O Poder do SVG ⚡, 4. Caminhos de Arquivo ️). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Imagens e SVG ️. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Imagens e SVG ️** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Imagens e SVG ️. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 05 Responder Quiz 05

🏋️ Exercício 06 – Tabelas

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 06 sobre Tabelas, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Tabelas, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Tabelas** fundamenta-se em princípios consolidados de engenharia de software (1. Quando usar Tabelas?, 2. Estrutura Básica, 3. Semântica de Tabelas, 4. Bordas e Estilo). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Tabelas. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Tabelas** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Tabelas. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 06 Responder Quiz 06

🏋️ Exercício 07 – Formulários

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 07 sobre Formulários, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Formulários, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Formulários** fundamenta-se em princípios consolidados de engenharia de software (1. O Recipiente de Dados: `
`, 2. Rótulos e Inputs: O Par Perfeito, 3. Principais Tipos de Input ️, 4. Botões de Ação). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Formulários. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Formulários** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Formulários. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 07 Responder Quiz 07

🏋️ Exercício 08 – Projeto HTML ️

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 08 sobre Projeto HTML ️, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Projeto HTML ️, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Projeto HTML ️** fundamenta-se em princípios consolidados de engenharia de software (1. O Desafio: Era uma Vez uma Empresa..., 2. Planejamento do Layout, 3. Passo a Passo do Desenvolvimento, 4. Checklist de Qualidade ✅). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Projeto HTML ️. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Projeto HTML ️** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Projeto HTML ️. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 08 Responder Quiz 08

🏋️ Exercício 09 – Introdução ao CSS ️

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 09 sobre Introdução ao CSS ️, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Introdução ao CSS ️, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Introdução ao CSS ️** fundamenta-se em princípios consolidados de engenharia de software (1. O que é CSS?, 2. Sintaxe Básica, 3. Formas de Aplicar CSS, 4. Seletores Básicos). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Introdução ao CSS ️. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Introdução ao CSS ️** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Introdução ao CSS ️. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 09 Responder Quiz 09

🏋️ Exercício 10 – Box Model

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 10 sobre Box Model, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Box Model, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Box Model** fundamenta-se em princípios consolidados de engenharia de software (1. Tudo é uma Caixa!, 2. As Camadas da Caixa, 3. Visualizando o Modelo, 4. Propriedades CSS do Box Model ️). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Box Model. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Box Model** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Box Model. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 10 Responder Quiz 10

🏋️ Exercício 11 – Display e Posicionamento

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 11 sobre Display e Posicionamento, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Display e Posicionamento, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Display e Posicionamento** fundamenta-se em princípios consolidados de engenharia de software (1. O Comportamento Display ️, 2. Posicionamento (Position), 3. Visualizando o Posicionamento, 4. Coordenadas: top, bottom, left e right ️). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Display e Posicionamento. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Display e Posicionamento** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Display e Posicionamento. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 11 Responder Quiz 11

🏋️ Exercício 12 – Flexbox

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 12 sobre Flexbox, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Flexbox, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Flexbox** fundamenta-se em princípios consolidados de engenharia de software (1. O que é Flexbox?, 2. O Container e os Itens, 3. Alinhamento no Eixo Principal (Justify Content) ↔️, 4. Alinhamento no Eixo Secundário (Align Items) ↕️). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Flexbox. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Flexbox** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Flexbox. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 12 Responder Quiz 12

🏋️ Exercício 13 – Grid Layout

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 13 sobre Grid Layout, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Grid Layout, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Grid Layout** fundamenta-se em princípios consolidados de engenharia de software (1. O que é CSS Grid?, 2. Definindo a Grade, 3. Unidades Modernas: `fr` e `repeat`, 4. Posicionando Itens (Grid Column/Row)). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Grid Layout. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Grid Layout** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Grid Layout. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 13 Responder Quiz 13

🏋️ Exercício 14 – Responsividade

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 14 sobre Responsividade, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Responsividade, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Responsividade** fundamenta-se em princípios consolidados de engenharia de software (1. O que é Web Design Responsivo?, 2. A Meta Tag Viewport ️, 3. Media Queries, 4. Mobile-First ➡️). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Responsividade. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Responsividade** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Responsividade. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 14 Responder Quiz 14

🏋️ Exercício 15 – Animações e Transições ✨

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 15 sobre Animações e Transições ✨, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Animações e Transições ✨, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Animações e Transições ✨** fundamenta-se em princípios consolidados de engenharia de software (1. Transições Suaves (`transition`), 2. Transformações (`transform`), 3. Animações com Keyframes, 4. Visualizando o Ciclo da Animação). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Animações e Transições ✨. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Animações e Transições ✨** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Animações e Transições ✨. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 15 Responder Quiz 15

🏋️ Exercício 16 – Projeto Final + Deploy

🎯 Objetivo

Fixar e aplicar os conceitos essenciais da Aula 16 sobre Projeto Final + Deploy, cobrindo aspectos conceituais, implementação técnica e boas práticas da indústria.

🥉 Nível Bronze (Fixação Conceitual)

Exercício 1: Explique os fundamentos de Projeto Final + Deploy, definindo sua finalidade principal na arquitetura de software e por que esse conceito é indispensável no desenvolvimento profissional.

Gabarito Explicado O conceito de **Projeto Final + Deploy** fundamenta-se em princípios consolidados de engenharia de software (1. O Desafio Final: Seu Portfólio ou Site de Empresa ️, 2. O que é Deploy? ☁️, 3. Passo a Passo do Deploy no GitHub, 4. Visualizando o Fluxo de Deploy). Sua finalidade central é fornecer previsibilidade, padronização e manutenibilidade ao ecossistema da aplicação, garantindo que requisitos funcionais e não funcionais sejam atendidos de forma consistente e auditável.

🥈 Nível Prata (Aplicação Prática)

Exercício 2: Descreva um cenário prático de aplicação ou implementação técnica envolvendo Projeto Final + Deploy. Quais comandos, padrões de projeto ou configurações essenciais devem ser adotados para garantir uma entrega robusta?

Gabarito Explicado Em um ambiente de produção, a aplicação prática de **Projeto Final + Deploy** envolve: 1. **Configuração Padronizada:** Adoção de convenções estabelecidas e versionamento consistente das dependências e artefatos. 2. **Isolamento de Responsabilidades:** Separação clara entre camadas de regra de negócio, apresentação e infraestrutura. 3. **Validação e Testabilidade:** Estruturação orientada a testes automatizados e validação defensiva de parâmetros de entrada.

🥇 Nível Ouro (Desafio Avançado e Cenário Real)

Exercício 3: Suponha que uma falha crítica ou gargalo ocorra em produção decorrente de má implementação em Projeto Final + Deploy. Detalhe uma estratégia sistemática de diagnóstico (troubleshooting), mitigação imediata e prevenção de recorrência.

Gabarito Explicado A resolução profissional para este cenário envolve: 1. **Diagnóstico Sistemático:** Coleta e análise de logs estruturados, métricas de observabilidade e identificação da causa-raiz (*root cause analysis*). 2. **Mitigação Imediata:** Aplicação de rollback seguro, feature flags ou circuit breaker para restabelecer a operação mínima viável. 3. **Prevenção e Resiliência:** Atualização das diretrizes de revisão de código, automação de testes de regressão no pipeline de CI/CD e documentação post-mortem.

Ver Aula 16 Responder Quiz 16

Projetos

🚀 Projetos do Curso

Lista completa das 20 unidades de projetos organizadas em 5 módulos didáticos.

Projeto 01 - Cinto de Utilidades Backend 🛠️

Objetivo: Validar a instalação das ferramentas e testar a comunicação básica com uma API pública.

O Desafio

  1. Instale o Postman ou Insomnia.
  2. Realize uma requisição do tipo GET para a API pública do GitHub: https://api.github.com/users/github.
  3. Analise a resposta (JSON). Identifique os campos login, id e public_repos.
  4. Instale o Docker Desktop e rode o comando docker run hello-world no terminal para garantir que a virtualização está ativa.
  5. Crie uma conta no GitHub (se não tiver) e instale o Git.

O que entregar?

  • Print (screenshot) da resposta JSON no Postman/Insomnia.
  • Print do terminal com a mensagem de sucesso do Docker "Hello from Docker!".

Projeto 02 - Modelagem de Fluxo de Gateway 🏗️

Objetivo: Entender o roteamento e a agregação de dados em um Gateway.

O Desafio

Imagine que você tem dois serviços: - Serviço A (User): Retorna { "id": 1, "nome": "Ricardo" } - Serviço B (Orders): Retorna [ { "id": 101, "valor": 50.0 }, { "id": 102, "valor": 30.0 } ]

  1. Desenhe um diagrama (pode ser no Mermaid ou papel) onde um API Gateway recebe uma chamada em /dashboard/1 e busca os dados nos dois serviços.
  2. Escreva o JSON final que o Gateway entregaria para o Frontend, unindo as informações do usuário e seus pedidos.
  3. Pesquisa: Liste 3 ferramentas famosas de API Gateway de mercado (ex: Kong, AWS API Gateway, etc).

O que entregar?

  • O diagrama de fluxo.
  • O JSON de resposta agregada.
  • A lista de ferramentas pesquisadas.

Projeto 03 - Contrato de API de Rede Social ⚡

Objetivo: Aplicar os conceitos de recursos, verbos e JSON na modelagem de uma rede social.

O Desafio

Você deve projetar a API para o recurso "Postagens" (Posts).

  1. Liste as 5 rotas principais (CRUD) para gerenciar postagens, indicando o Verbo, a URI e o Status Code de sucesso esperado.
  2. Crie um exemplo de JSON para uma postagem que contenha:
    • id
    • autor_id
    • conteúdo (texto)
    • data_publicacao
    • tags (lista de strings)
  3. Simulação de Erro: Qual seria a URI e o Verbo para dar um "Like" em uma postagem? Projete isso.

O que entregar?

  • Tabela com as 5 rotas (Verbo, URI, Status).
  • Bloco de código com o JSON de exemplo.
  • Proposta da rota de "Like".

Projeto 04 - Criando o Primeiro Mock 🧱

Objetivo: Dominar o fluxo de documentação de contrato e simulação de servidor.

O Desafio

Você deve criar um servidor de Mock para uma API de Lista de Tarefas (ToDo).

  1. Use o Postman (Mock Server) ou o Mockoon para criar 2 rotas:
    • GET /tarefas: Deve retornar uma lista com pelo menos 3 tarefas.
    • POST /tarefas: Deve aceitar uma nova tarefa e retornar 201 Created.
  2. Documente os campos de uma tarefa (ex: id, titulo, concluida).
  3. Teste as rotas e garanta que o servidor responda corretamente no formato JSON.

O que entregar?

  • Print (screenshot) do Swagger UI ou da tela do Mock Server rodando.
  • O JSON de exemplo retornado pelo GET /tarefas.
  • Print do teste da rota POST /tarefas com sucesso.

Projeto 05 - Meu Primeiro Controller ⚙️

Objetivo: Praticar a criação de rotas e a captura de diferentes tipos de parâmetros.

O Desafio

Crie a estrutura de um Controller para um sistema de Gestão de Tarefas (To-Do). Você deve definir (em pseudocódigo ou na linguagem que preferir):

  1. Uma rota para listar todas as tarefas, permitindo um filtro opcional por status (ex: concluída ou pendente).
  2. Uma rota para buscar uma única tarefa pelo seu id.
  3. Uma rota para criar uma tarefa, recebendo titulo e descricao.
  4. Sinalize qual seria o Status Code de sucesso para cada uma das rotas acima.

O que avaliar?

  • Uso correto de Path Params vs Query Params.
  • Escolha dos verbos HTTP adequados.
  • Padronização das respostas de sucesso.

Projeto 06 - Implementando a Lógica de Negócio 🧠

Objetivo: Aplicar a separação de camadas criando um Service para validação de dados.

O Desafio

Você deve criar o UsuarioService para um sistema de cadastro.

  1. Função validarSenha(senha): Deve garantir que a senha tenha no mínimo 8 caracteres e contenha pelo menos um número.
  2. Função criarUsuario(dados):
    • Chama a validação de senha.
    • Verifica se o e-mail já está sendo usado (simule um erro se estiver).
    • Retorna o usuário criado (sem a senha!).
  3. Simule o Controller chamando esse Service e tratando o erro de "Senha Insegura" com um Status Code 400.

O que observar?

  • O Service não deve usar objetos globais como req ou res.
  • As mensagens de erro devem ser claras e informativas.
  • Uso de DTOs (retornar objeto filtrado).

Projeto 07 - Modelagem de Banco de Dados 🗄️

Objetivo: Praticar a criação de esquemas relacionais e comandos SQL básicos.

O Desafio

Modele o banco de dados para um sistema de Aluguel de Filmes:

  1. Tabelas: Crie as tabelas Clientes e Filmes.
  2. Campos:
    • Clientes deve ter id, nome e email.
    • Filmes deve ter id, titulo e genero.
  3. Relacionamento: Crie uma terceira tabela Alugueis que ligue um cliente a um filme (incluindo a data_aluguel).
  4. SQL: Escreva uma query que liste o nome do cliente e o título do filme para todos os aluguéis feitos hoje.

O que avaliar?

  • Definição correta das Chaves Primárias.
  • Uso de Chaves Estrangeiras para conectar as tabelas.
  • Clareza na estrutura das colunas.

Projeto 08 - Schema de Validação Profissional ✅

Objetivo: Praticar a criação de regras de validação para garantir a integridade da API.

O Desafio

Crie o esquema de validação (em pseudocódigo ou usando uma biblioteca como Zod/Joi) para um Cadastro de Eventos:

  1. Campos Obrigatórios: titulo (mín. 10 char), data (deve ser futura), capacidade_maxima (número positivo).
  2. Campos Opcionais: descricao (máx. 500 char), link_inscricao (formato de URL).
  3. Sanitização: O título não deve conter espaços em branco sobrando no início ou no fim (trim).
  4. Simulação: Mostre qual seria a mensagem de erro retornada se o usuário enviasse uma capacidade negativa.

O que avaliar?

  • Clareza e rigor das regras de validação.
  • Escolha dos tipos de dados corretos.
  • Mensagens de erro amigáveis ao desenvolvedor (DX).

Projeto 09 - Sistema de Login (Simulado) 🔐

Objetivo: Implementar a lógica de geração de tokens JWT para autenticação.

O Desafio

Crie uma API de simulação de login:

  1. Entrada: Receba um JSON com email e senha.
  2. Validação: Verifique se a senha tem mais de 6 caracteres.
  3. JWT: Use uma biblioteca (ou pseudocódigo) para gerar um token que contenha o id do usuário e sua permissão (ex: 'aluno').
  4. Expiração: Configure o token para ser válido por apenas 24 horas.
  5. Resposta: Retorne para o cliente um objeto contendo o token e o nome do usuário.

O que avaliar?

  • Tratamento correto de erro caso a senha seja curta.
  • Estrutura limpa do Payload do JWT.
  • Escolha de uma chave secreta segura (simulada).

Projeto 10 - Gerenciador de Permissões 🛡️

Objetivo: Implementar a lógica de proteção de rotas baseada em perfis de usuário.

O Desafio

Crie a estrutura de autorização para um Sistema de RH:

  1. Roles: Defina três tipos: ADMIN, GESTOR e FUNCIONARIO.
  2. Regras:
    • Todos podem ver o próprio perfil (GET /me).
    • Apenas GESTOR e ADMIN podem ver a lista de salários (GET /salarios).
    • Apenas ADMIN pode deletar um registro (DELETE /colaboradores/:id).
  3. Middleware: Desenhe (em desenho técnico ou código) como seria o "fluxo da cancela" (Authentication Middleware -> Authorization Middleware).

O que avaliar?

  • Separação clara entre quem é você e o que você pode fazer.
  • Uso correto dos Status Codes em caso de bloqueio.
  • Lógica de hierarquia (Admin pode tudo).

Projeto 11 - Blindagem de API 🏗️

Objetivo: Implementar camadas avançadas de segurança e renovação de tokens.

O Desafio

Fortaleça sua API de login:

  1. Helmet: Instale e configure o Helmet para proteger os Headers.
  2. CORS: Restrinja o acesso à API para que apenas o domínio http://localhost:3000 possa consultá-la.
  3. Refresh Token: Implemente uma rota /refresh que receba um refresh token, valide-o no banco (ou lista em memória) e gere um novo accessToken.
  4. Rate Limit: Adicione uma trava para que ninguém possa tentar logar mais de 5 vezes em 1 minuto.

O que avaliar?

  • Configuração correta das origens no CORS.
  • Lógica de expiração do Refresh Token (ele deve durar muito mais que o Access Token).
  • Verificação se o Helmet está realmente escondendo o header X-Powered-By.

Projeto 12 - Primeiro App React ⚛️

Objetivo: Criar e organizar componentes básicos usando React e Vite.

O Desafio

Crie uma página de Perfil de Usuário:

  1. Componente FotoPerfil: Exibe uma imagem circular.
  2. Componente InfoUsuario: Recebe nome e bio via props e exibe na tela.
  3. Componente BotaoSeguir: Um botão simples que, por enquanto, apenas exibe um alerta ao ser clicado.
  4. Layout: Organize esses componentes dentro do App.jsx usando CSS simples para centralizar o conteúdo.

O que avaliar?

  • Separação correta dos componentes em arquivos diferentes (ou funções separadas).
  • Uso correto de Props para personalizar o nome do usuário.
  • Sintaxe JSX correta (tags fechadas, className, etc).

Projeto 13 - Lista Dinâmica de Contatos 📱

Objetivo: Aplicar o uso de useState e gerenciamento de listas.

O Desafio

Crie um mini-gerenciador de contatos:

  1. Inputs: Dois campos de texto (Nome e Telefone).
  2. Botão Adicionar: Quando clicado, deve validar se os campos estão preenchidos e adicionar o contato em um Estado de Array.
  3. Lista: Exiba todos os contatos adicionados abaixo do formulário.
  4. Botão Limpar: Um botão que limpa toda a lista de contatos.

O que avaliar?

  • Uso correto do useState para os inputs e para a lista.
  • Uso do .map() para renderizar a lista de contatos.
  • Limpeza dos campos de input após a adição com sucesso.

Projeto 14 - Buscador de Repositórios 🔍

Objetivo: Consumir uma API real e gerenciar estados de carregamento.

O Desafio

Crie um app que busca repositórios do GitHub de um usuário:

  1. Input: Campo para digitar o nome do usuário do GitHub.
  2. Botão Buscar: Ao clicar, deve disparar a busca.
  3. Loading: Enquanto a API não responde, deve aparecer o texto "Buscando repositórios...".
  4. Lista: Exiba o nome de todos os repositórios públicos encontrados.
  5. Erro: Se o usuário não existir, exiba "Erro: Usuário não encontrado".

O que avaliar?

  • Uso do useEffect para carregar dados (pode ser ao carregar a página ou via clique).
  • Tratamento correto dos estados: null, loading, data e error.
  • Renderização limpa usando .map().

Projeto 15 - Sistema de Multi-Páginas 🚦

Objetivo: Implementar a navegação completa em uma SPA.

O Desafio

Transforme seu app de repositórios ou contatos em um site completo com 3 páginas:

  1. Home (/): Uma página de boas-vindas com links para as outras seções.
  2. Dashboard (/app): Onde fica a funcionalidade principal (ex: a busca de repositórios).
  3. Sobre (/sobre): Uma página contando quem criou o projeto.
  4. 404: Uma página personalizada para links quebrados.

Requisito Extra (Parâmetro)

Crie uma página de Perfil de Repositório (/repo/:id) que deve ser aberta ao clicar em um item da lista. Essa página só precisa exibir o ID que foi clicado por enquanto.

O que avaliar?

  • Configuração correta do BrowserRouter no main.jsx ou App.jsx.
  • Uso exclusivo de <Link> para navegação em menus.
  • Funcionamento correto dos parâmetros de URL com useParams.

Projeto 16 - App Final Full-Stack Integrador 🏆

Objetivo: O "TCC (Trabalho de Conclusão de Curso)" do desenvolvedor Full-Stack.

O Tema

Escolha um tema que resolva um problema real integrando o que você construiu no Backend (Módulos 1-3) com o que aprendeu no Frontend (Módulo 4).

Requisitos Mínimos

  1. Backend (Express): Uso obrigatório de rotas protegidas por JWT e validação de dados.
  2. Frontend (React): Componentização clara, uso de Hooks (useState, useEffect) e navegação com React Router.
  3. Integração: O Frontend deve consumir a sua própria API de forma assíncrona.
  4. UX/UI: Interface amigável, com tratamento de estados de carregamento e erro.
  5. Segurança: Configuração correta de CORS e Headers de segurança (Helmet).

Documentação ✨

Seu repositório no GitHub deve ter um README.md impecável, com imagens (prints) da aplicação, explicação das tecnologias usadas e instruções claras de como rodar o servidor e o cliente. Este projeto será o seu maior cartão de visitas!

Boa sorte e bom código! 🚀🚀🚀

Quizzes

🧠 Quizzes de Fixação

Lista completa das 20 unidades de quizzes organizadas em 5 módulos didáticos.

🧠 Quiz 01 – Introdução à Web 🌐

  1. Qual é o conceito fundamental e objetivo principal de Introdução à Web 🌐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução à Web 🌐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução à Web 🌐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução à Web 🌐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução à Web 🌐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução à Web 🌐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução à Web 🌐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução à Web 🌐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução à Web 🌐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução à Web 🌐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 02 – Documento HTML Mínimo 🏗️

  1. Qual é o conceito fundamental e objetivo principal de Documento HTML Mínimo 🏗️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Documento HTML Mínimo 🏗️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Documento HTML Mínimo 🏗️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Documento HTML Mínimo 🏗️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Documento HTML Mínimo 🏗️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Documento HTML Mínimo 🏗️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Documento HTML Mínimo 🏗️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Documento HTML Mínimo 🏗️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Documento HTML Mínimo 🏗️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Documento HTML Mínimo 🏗️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 03 – Estrutura e Semântica 🧱

  1. Qual é o conceito fundamental e objetivo principal de Estrutura e Semântica 🧱?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Estrutura e Semântica 🧱?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Estrutura e Semântica 🧱, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Estrutura e Semântica 🧱?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Estrutura e Semântica 🧱 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Estrutura e Semântica 🧱, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Estrutura e Semântica 🧱?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Estrutura e Semântica 🧱 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Estrutura e Semântica 🧱 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Estrutura e Semântica 🧱 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 04 – Textos e Links 🔗

  1. Qual é o conceito fundamental e objetivo principal de Textos e Links 🔗?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Textos e Links 🔗?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Textos e Links 🔗, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Textos e Links 🔗?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Textos e Links 🔗 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Textos e Links 🔗, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Textos e Links 🔗?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Textos e Links 🔗 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Textos e Links 🔗 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Textos e Links 🔗 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 05 – Imagens e SVG 🖼️

  1. Qual é o conceito fundamental e objetivo principal de Imagens e SVG 🖼️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Imagens e SVG 🖼️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Imagens e SVG 🖼️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Imagens e SVG 🖼️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Imagens e SVG 🖼️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Imagens e SVG 🖼️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Imagens e SVG 🖼️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Imagens e SVG 🖼️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Imagens e SVG 🖼️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Imagens e SVG 🖼️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 06 – Tabelas 📊

  1. Qual é o conceito fundamental e objetivo principal de Tabelas 📊?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Tabelas 📊?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Tabelas 📊, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Tabelas 📊?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Tabelas 📊 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Tabelas 📊, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Tabelas 📊?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Tabelas 📊 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Tabelas 📊 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Tabelas 📊 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 07 – Formulários 📝

  1. Qual é o conceito fundamental e objetivo principal de Formulários 📝?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Formulários 📝?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Formulários 📝, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Formulários 📝?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Formulários 📝 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Formulários 📝, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Formulários 📝?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Formulários 📝 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Formulários 📝 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Formulários 📝 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 08 – Projeto HTML 🏛️

  1. Qual é o conceito fundamental e objetivo principal de Projeto HTML 🏛️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto HTML 🏛️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto HTML 🏛️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto HTML 🏛️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto HTML 🏛️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto HTML 🏛️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto HTML 🏛️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto HTML 🏛️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto HTML 🏛️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto HTML 🏛️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 09 – Introdução ao CSS 🖌️

  1. Qual é o conceito fundamental e objetivo principal de Introdução ao CSS 🖌️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao CSS 🖌️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução ao CSS 🖌️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao CSS 🖌️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução ao CSS 🖌️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução ao CSS 🖌️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao CSS 🖌️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução ao CSS 🖌️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução ao CSS 🖌️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução ao CSS 🖌️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 10 – Box Model 📦

  1. Qual é o conceito fundamental e objetivo principal de Box Model 📦?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Box Model 📦?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Box Model 📦, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Box Model 📦?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Box Model 📦 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Box Model 📦, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Box Model 📦?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Box Model 📦 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Box Model 📦 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Box Model 📦 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 11 – Display e Posicionamento 📍

  1. Qual é o conceito fundamental e objetivo principal de Display e Posicionamento 📍?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Display e Posicionamento 📍?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Display e Posicionamento 📍, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Display e Posicionamento 📍?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Display e Posicionamento 📍 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Display e Posicionamento 📍, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Display e Posicionamento 📍?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Display e Posicionamento 📍 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Display e Posicionamento 📍 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Display e Posicionamento 📍 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 12 – Flexbox 📐

  1. Qual é o conceito fundamental e objetivo principal de Flexbox 📐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Flexbox 📐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Flexbox 📐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Flexbox 📐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Flexbox 📐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Flexbox 📐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Flexbox 📐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Flexbox 📐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Flexbox 📐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Flexbox 📐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 13 – Grid Layout 🏁

  1. Qual é o conceito fundamental e objetivo principal de Grid Layout 🏁?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Grid Layout 🏁?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Grid Layout 🏁, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Grid Layout 🏁?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Grid Layout 🏁 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Grid Layout 🏁, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Grid Layout 🏁?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Grid Layout 🏁 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Grid Layout 🏁 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Grid Layout 🏁 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 14 – Responsividade 📱

  1. Qual é o conceito fundamental e objetivo principal de Responsividade 📱?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Responsividade 📱?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Responsividade 📱, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Responsividade 📱?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Responsividade 📱 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Responsividade 📱, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Responsividade 📱?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Responsividade 📱 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Responsividade 📱 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Responsividade 📱 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 15 – Animações e Transições ✨

  1. Qual é o conceito fundamental e objetivo principal de Animações e Transições ✨?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Animações e Transições ✨?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Animações e Transições ✨, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Animações e Transições ✨?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Animações e Transições ✨ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Animações e Transições ✨, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Animações e Transições ✨?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Animações e Transições ✨ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Animações e Transições ✨ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Animações e Transições ✨ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 16 – Projeto Final + Deploy 🚢

  1. Qual é o conceito fundamental e objetivo principal de Projeto Final + Deploy 🚢?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Final + Deploy 🚢?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto Final + Deploy 🚢, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto Final + Deploy 🚢?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto Final + Deploy 🚢 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto Final + Deploy 🚢, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto Final + Deploy 🚢?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto Final + Deploy 🚢 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto Final + Deploy 🚢 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto Final + Deploy 🚢 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 17 – Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀

  1. Qual o propósito principal de Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Layouts Avançados com CSS Grid Nível 2 e Subgrid 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 18 – Animações CSS de Alta Performance e Transformações 3D 🚀

  1. Qual o propósito principal de Animações CSS de Alta Performance e Transformações 3D 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Animações CSS de Alta Performance e Transformações 3D 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Animações CSS de Alta Performance e Transformações 3D 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Animações CSS de Alta Performance e Transformações 3D 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Animações CSS de Alta Performance e Transformações 3D 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Animações CSS de Alta Performance e Transformações 3D 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Animações CSS de Alta Performance e Transformações 3D 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Animações CSS de Alta Performance e Transformações 3D 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Animações CSS de Alta Performance e Transformações 3D 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Animações CSS de Alta Performance e Transformações 3D 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 19 – Otimização de Performance Web e Critical CSS 🚀

  1. Qual o propósito principal de Otimização de Performance Web e Critical CSS 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Otimização de Performance Web e Critical CSS 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Otimização de Performance Web e Critical CSS 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Otimização de Performance Web e Critical CSS 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Otimização de Performance Web e Critical CSS 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Otimização de Performance Web e Critical CSS 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Otimização de Performance Web e Critical CSS 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Otimização de Performance Web e Critical CSS 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Otimização de Performance Web e Critical CSS 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Otimização de Performance Web e Critical CSS 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 20 – Projeto Capstone: Portal Web Autônomo Responsivo 🚀

  1. Qual o propósito principal de Projeto Capstone: Portal Web Autônomo Responsivo 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Projeto Capstone: Portal Web Autônomo Responsivo 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Projeto Capstone: Portal Web Autônomo Responsivo 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Projeto Capstone: Portal Web Autônomo Responsivo 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Projeto Capstone: Portal Web Autônomo Responsivo 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Projeto Capstone: Portal Web Autônomo Responsivo 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Projeto Capstone: Portal Web Autônomo Responsivo 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Projeto Capstone: Portal Web Autônomo Responsivo 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Projeto Capstone: Portal Web Autônomo Responsivo 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Projeto Capstone: Portal Web Autônomo Responsivo 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

Slides

Configuração

Ambientes de Desenvolvimento e Configuração 🛠️

Guias oficiais passo a passo para configurar suas ferramentas profissionais de desenvolvimento para HTML5 e CSS3.

Setup 01: VS Code, Live Server e Atalhos Emmet 🛠️

Objetivo da Configuração

Objetivo: Configuração do editor VS Code, servidor local Live Server e sintaxe rápida Emmet para desenvolvimento web.

1. Pré-Requisitos e Visão Geral

A configuração correta deste ambiente é fundamental para o desenvolvimento eficiente e sem atritos ao longo do curso de HTML5 e CSS3.

2. Passo a Passo de Instalação e Configuração

📥 Passo 1: Download e Instalação

Siga as instruções oficiais correspondentes ao seu sistema operacional (Windows, Linux ou macOS): - Baixe o pacote oficial da ferramenta diretamente do site do mantenedor. - Execute o assistente de instalação habilitando a opção de adicionar os binários à variável de ambiente PATH.

⚙️ Passo 2: Verificação no Terminal

Abra uma nova janela de terminal e valide se o comando está acessível: 

# Verificação de versão instalada
echo "Validando ambiente de HTML5 e CSS3..."

💻 Passo 3: Configuração no Editor / IDE

  • Instale as extensões recomendadas para obter destaque de sintaxe, autocompletar e linters integrados.
  • Reinicie o editor para carregar os novos caminhos de execução.

3. Teste Rápido de Validação

Crie um arquivo de teste simples para comprovar que o compilador, interpretador ou ferramenta está operando com 100% de sucesso.

🎯 Próximos Passos

Com o ambiente configurado, você está pronto para iniciar as aulas práticas e desenvolver os projetos da disciplina.

Setup 02: Google Chrome DevTools para Inspeção 🛠️

Objetivo da Configuração

Objetivo: Domínio das ferramentas de desenvolvedor do navegador: inspeção de elementos, box model e edição de CSS em tempo real.

1. Pré-Requisitos e Visão Geral

A configuração correta deste ambiente é fundamental para o desenvolvimento eficiente e sem atritos ao longo do curso de HTML5 e CSS3.

2. Passo a Passo de Instalação e Configuração

📥 Passo 1: Download e Instalação

Siga as instruções oficiais correspondentes ao seu sistema operacional (Windows, Linux ou macOS): - Baixe o pacote oficial da ferramenta diretamente do site do mantenedor. - Execute o assistente de instalação habilitando a opção de adicionar os binários à variável de ambiente PATH.

⚙️ Passo 2: Verificação no Terminal

Abra uma nova janela de terminal e valide se o comando está acessível: 

# Verificação de versão instalada
echo "Validando ambiente de HTML5 e CSS3..."

💻 Passo 3: Configuração no Editor / IDE

  • Instale as extensões recomendadas para obter destaque de sintaxe, autocompletar e linters integrados.
  • Reinicie o editor para carregar os novos caminhos de execução.

3. Teste Rápido de Validação

Crie um arquivo de teste simples para comprovar que o compilador, interpretador ou ferramenta está operando com 100% de sucesso.

🎯 Próximos Passos

Com o ambiente configurado, você está pronto para iniciar as aulas práticas e desenvolver os projetos da disciplina.

Setup 03: Linters e Formatadores (HTMLHint, Stylelint) 🛠️

Objetivo da Configuração

Objetivo: Padronização de código com Prettier, HTMLHint e Stylelint para evitar erros sintáticos.

1. Pré-Requisitos e Visão Geral

A configuração correta deste ambiente é fundamental para o desenvolvimento eficiente e sem atritos ao longo do curso de HTML5 e CSS3.

2. Passo a Passo de Instalação e Configuração

📥 Passo 1: Download e Instalação

Siga as instruções oficiais correspondentes ao seu sistema operacional (Windows, Linux ou macOS): - Baixe o pacote oficial da ferramenta diretamente do site do mantenedor. - Execute o assistente de instalação habilitando a opção de adicionar os binários à variável de ambiente PATH.

⚙️ Passo 2: Verificação no Terminal

Abra uma nova janela de terminal e valide se o comando está acessível: 

# Verificação de versão instalada
echo "Validando ambiente de HTML5 e CSS3..."

💻 Passo 3: Configuração no Editor / IDE

  • Instale as extensões recomendadas para obter destaque de sintaxe, autocompletar e linters integrados.
  • Reinicie o editor para carregar os novos caminhos de execução.

3. Teste Rápido de Validação

Crie um arquivo de teste simples para comprovar que o compilador, interpretador ou ferramenta está operando com 100% de sucesso.

🎯 Próximos Passos

Com o ambiente configurado, você está pronto para iniciar as aulas práticas e desenvolver os projetos da disciplina.

Setup 04: Modo Responsivo e Simulação de Telas 🛠️

Objetivo da Configuração

Objetivo: Uso do Device Mode do DevTools para testes em resoluções mobile, tablet e desktop.

1. Pré-Requisitos e Visão Geral

A configuração correta deste ambiente é fundamental para o desenvolvimento eficiente e sem atritos ao longo do curso de HTML5 e CSS3.

2. Passo a Passo de Instalação e Configuração

📥 Passo 1: Download e Instalação

Siga as instruções oficiais correspondentes ao seu sistema operacional (Windows, Linux ou macOS): - Baixe o pacote oficial da ferramenta diretamente do site do mantenedor. - Execute o assistente de instalação habilitando a opção de adicionar os binários à variável de ambiente PATH.

⚙️ Passo 2: Verificação no Terminal

Abra uma nova janela de terminal e valide se o comando está acessível: 

# Verificação de versão instalada
echo "Validando ambiente de HTML5 e CSS3..."

💻 Passo 3: Configuração no Editor / IDE

  • Instale as extensões recomendadas para obter destaque de sintaxe, autocompletar e linters integrados.
  • Reinicie o editor para carregar os novos caminhos de execução.

3. Teste Rápido de Validação

Crie um arquivo de teste simples para comprovar que o compilador, interpretador ou ferramenta está operando com 100% de sucesso.

🎯 Próximos Passos

Com o ambiente configurado, você está pronto para iniciar as aulas práticas e desenvolver os projetos da disciplina.

Sobre

Sobre o Curso

🎓 Programação Web I (HTML5 & CSS3)

Este curso foi projetado para capacitar estudantes na criação de páginas web modernas, fundamentadas nas tecnologias essenciais da internet: HTML5 e CSS3.

🎯 Objetivos do Curso

  • Estruturação Semântica --- Aprender a organizar o conteúdo de forma lógica, acessível e otimizada para buscadores utilizando as melhores práticas do HTML5.

  • Design Responsivo --- Dominar as técnicas de layout modernas (Flexbox e Grid) para garantir que sites funcionem perfeitamente em qualquer dispositivo.

  • Estilização Moderna --- Utilizar CSS3 avançado para criar interfaces atraentes, com animações, transições e efeitos visuais contemporâneos.

  • Prática Real --- Desenvolver 16 projetos práticos que compõem um portfólio sólido de desenvolvedor web focado em interface.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos da Web

  • Funcionamento da internet e cliente-servidor
  • Navegadores modernos e DevTools
  • Estrutura básica do HTML5 e Metadados

Módulo 2 – HTML5 Completo

  • Tags Semânticas e Hierarquia de Títulos
  • Mídias (Imagens, SVG, Áudio e Vídeo)
  • Tabelas e Formulários com Validação Nativa

Módulo 3 – CSS3 Moderno

  • Seletores, Cascata e Box Model
  • Layouts Profissionais com Flexbox e Grid
  • Design Responsivo (Mobile-first) e Animações

🛠️ Metodologia

Nosso foco é "aprender fazendo". Cada aula propõe um desafio prático imediato, culminando na construção de uma Landing Page completa e funcional publicada no GitHub Pages.

Pronto para criar para a Web? Começar Agora

Roadmap do Projeto: APIs e Microsserviços 🚀

Este documento rastreia a evolução do curso.

✅ Fase 1: Planejamento (Concluído)

  • Definição Syllabus (16 Aulas)
  • Estrutura Backend-first com integração SPA
  • Configuração MkDocs Material

✅ Fase 2: Conteúdo Base (Concluído)

  • Criação das 16 Aulas (Markdown)
  • Criação dos 16 Quizzes (HTML)
  • Criação dos 16 Conjuntos de Exercícios
  • Criação dos 16 Slides (RevealJS)

✅ Fase 3: Projetos e UX (Concluído)

  • Definição dos 16 Projetos práticos
  • Documentação Swagger/OpenAPI integrada
  • Diagramação Mermaid de arquitetura de serviços

🚀 Fase 4: Lançamento e Manutenção

  • Deploy GitHub Pages (GitHub Actions)
  • Atualização para novas versões de frameworks (Spring/Node/React)
  • Inclusão de exemplos de mensageria (RabbitMQ/Kafka)

Status Atual: Finalizado / Manutenção Última Atualização: 19/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de APIs e Microsserviços. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

  • Slides

    • Acompanhe o conteúdo teórico com slides dinâmicos.

  • Exercícios

    • Pratique a implementação de microsserviços e rotas REST.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por módulo.

  • Projetos

    • Construa um ecossistema completo para seu portfólio.

  • Ambiente

    • Guias de instalação (Docker, IDEs, Postman).

🏷️ Índice de Tags Didáticas

Navegue pelas aulas, exercícios e projetos do curso organizados por temas, tecnologias e conceitos fundamentais:

tags.md:145-167/name

Versão para Impressão

Esta página foi gerada automaticamente para impressão.