Pular para conteúdo

Desenvolvimento de APIs e Microsserviços 💻

Domine a criação de arquiteturas modernas de backend com Microsserviços, modelagem RESTful, segurança com JWT e o desenvolvimento de interfaces SPA modernas.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de ecossistemas Fullstack, integrando serviços backend robustos com frontends de alta performance.

🎯 O Que Você Vai Aprender

  • Microsserviços --- Aprenda a decompor monólitos, gerenciar comunicação entre serviços e utilizar API Gateways para escalabilidade. Ir para Módulo 1

  • Modelagem RESTful --- Domine endpoints, status codes, documentação com Swagger/OpenAPI e padrões de projeto para APIs profissionais. Ver Modelagem

  • Autenticação JWT --- Implemente segurança de ponta a ponta com JSON Web Tokens, proteção de rotas e controle de acesso RBAC. Ver Segurança

  • Frontends SPA --- Integre seu backend com Single Page Applications modernas, explorando componentes, estados e roteamento dinâmico. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado em quatro trilhas de especialização.

🧱 Módulo 1: Serviços e Microsserviços (Aulas 01-04)

🏗️ Módulo 2: CRUD e Persistência (Aulas 05-08)

🔌 Módulo 3: Autenticação e Segurança (Aulas 09-11)

🚀 Módulo 4: Aplicações Web SPA (Aulas 12-16)

Começar Minha Jornada Fullstack

Programação Web I 💻

Aprenda a implementar páginas web modernas utilizando HTML5 e CSS3, aplicando boas práticas de organização, criatividade e resolução de problemas.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de sites estáticos modernos e responsivos, utilizando HTML5 e CSS3.

🎯 O Que Você Vai Aprender

  • HTML5 Semântico --- Estruturação profissional de documentos utilizando as tags semânticas corretas para SEO e acessibilidade. Ir para Módulo 2

  • CSS3 Moderno --- Estilização avançada com Flexbox, Grid Layout, animações e estratégias de responsividade Mobile-First. Ver Estilização

  • Responsividade --- Adaptação de layouts para diferentes dispositivos, garantindo uma experiência de usuário impecável em celulares e desktops. Ver Responsividade

  • Versionamento e Deploy --- Publicação de projetos online utilizando Git, GitHub e GitHub Pages para hospedar seus sites estáticos. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado em três módulos fundamentais.

🧩 Módulo 1: Fundamentos da Web (Aulas 01-02)

🏗️ Módulo 2: HTML5 Completo (Aulas 03-08)

🎨 Módulo 3: CSS3 Moderno (Aulas 09-16)

Começar Minha Jornada Web * Projetos: 16 mini-projetos práticos de fixação. * Quizzes: 16 testes de conhecimento imediato. * Projeto Integrador: Desenvolvimento de uma aplicação Fullstack (API + SPA) para portfólio.

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! 🚀

Exercícios

Listas de Exercícios 🏋️

Pratique o que aprendeu com desafios graduais para cada aula.

Exercícios 01 - Introdução a Microsserviços 🧩

🟢 Fáceis

  1. Definição: Explique com suas palavras o que é um microsserviço.
  2. Diferenciação: Cite 3 desvantagens de um sistema Monolítico em relação a uma arquitetura de Microsserviços.

🟡 Médios

  1. Cenário: Uma startup de delivery começou com um monólito e agora está sofrendo para atualizar o sistema de pagamentos sem quebrar o rastreamento de pedidos. Qual vantagem dos microsserviços resolveria esse problema? Justifique.
  2. Conectividade: O que é uma API e por que ela é fundamental na integração de sistemas distribuídos?

🔴 Desafio

  1. Análise de Arquitetura: Imagine o sistema do "Netflix". Ele possui milhões de usuários acessando simultaneamente filmes, perfis e faturas.
    • Se o serviço de "Busca" falhar, o usuário deve ser impedido de assistir aos filmes que já estão na sua lista "Continuar Assistindo"? Como a arquitetura de microsserviços ajuda nesse isolamento?
    • Desenhe/Escreva como seria a divisão básica: Quais seriam os pelo menos 4 serviços independentes que você criaria para o Netflix?

Exercícios 02 - Arquitetura e Gateway 🏗️

🟢 Fáceis

  1. Conceitos: Explique o que é um API Gateway com uma analogia da vida real (ex: uma recepção de hotel).
  2. Síncrono vs Assíncrono: Diferencie os dois modelos de comunicação em uma frase cada.

🟡 Médios

  1. Resiliência: O que acontece com um sistema distribuído que só usa comunicação síncrona se o serviço de banco de dados ficar muito lento? Como isso afeta o usuário final?
  2. Segurança: Por que é melhor colocar a lógica de autenticação no API Gateway do que repetir em cada um dos 20 microsserviços?

🔴 Desafio

  1. Cenário de Falha Crítica: O serviço de "Notificação" (envio de e-mail e SMS) está fora do ar.
    • Se o seu sistema for síncrono, o usuário conseguirá finalizar uma compra?
    • Como a abordagem assíncrona com filas resolveria esse problema, garantindo que o e-mail seja enviado quando o serviço voltar?
    • Cite um exemplo de serviço que precisa ser síncrono (não pode esperar).

Exercícios 03 - Modelagem REST 📡

🟢 Fáceis

  1. URI Design: Corrija as URIs abaixo para seguirem as boas práticas REST:
    • GET /listar_todos_usuarios
    • POST /criarNovoPedido
    • DELETE /remover-produto-por-id/123
  2. Verbos: Qual o verbo HTTP mais adequado para atualizar a senha de um usuário? Por que?

🟡 Médios

  1. Status Codes: Escolha o código de status ideal para as situações:
    • Usuário tentou deletar um arquivo, mas ele não tem permissão de administrador.
    • O cadastro foi realizado com sucesso e o sistema retornou os dados do novo usuário.
    • O servidor caiu por falta de memória.
  2. Idempotência: Explique por que o POST não é idempotente e o GET é.

🔴 Desafio

  1. Design de Contrato: Desenhe as rotas para um sistema de E-commerce.
    • Como seria a URI para listar todos os itens de um carrinho específico?
    • Como seria a URI para adicionar um item a este carrinho?
    • Escreva o JSON que representaria um "Item de Carrinho" com: produto_id, nome, quantidade e preco_unitario.

Exercícios 04 - Documentação e Mocks 📝

🟢 Fáceis

  1. Conceitos: O que é OpenAPI e qual a relação dela com o Swagger?
  2. Mocks: Explique com suas palavras por que um desenvolvedor Frontend desejaria usar um Mock Server.

🟡 Médios

  1. Análise de YAML: Analise o trecho OpenAPI abaixo e responda: Qual o endpoint? Qual o verbo? O que ele retorna no sucesso? 
    /usuarios/{id}:
  get:
    summary: Busca usuário por ID
    responses:
      '200':
        description: Usuário encontrado
  2. Developer Experience (DX): Imagine que você recebeu uma documentação que diz apenas: POST /login - Envie os dados do usuário. Por que essa documentação é ruim sob a ótica de DX?

🔴 Desafio

  1. Cenário de Desenvolvimento: Você é o arquiteto de um projeto onde o Backend vai demorar 3 semanas para liberar a primeira API, mas o Frontend precisa começar amanhã.
    • Como você organizaria o trabalho usando Mocks?
    • Como garantir que, quando o Backend ficar pronto, a integração ocorra sem precisar mudar nada no código do Frontend?
    • Cite uma ferramenta que você usaria para subir esse Mock Server rapidamente.

Exercícios 05 - Implementação de APIs ⚙️

🟢 Fáceis

  1. Responsabilidade: Qual a principal função de um Controller em uma arquitetura de camadas?
  2. Mapeamento: O que é um "Handler" no contexto de rotas backend?

🟡 Médios

  1. Parâmetros: Diferencie, com exemplos de URIs, o uso de Path Params e Query Params.
  2. Erros: Por que o Controller nunca deve retornar uma resposta sem um Status Code explícito?

🔴 Desafio

  1. Cenário Real: Imagine que você está implementando a rota de PUT /produtos/123.
    • Como você capturaria o 123?
    • Como você capturaria o novo nome do produto?
    • Em qual objeto (req.params, req.query ou req.body) cada um desses dados estaria?
    • O que você faria se o cliente enviasse o id no Body diferente do id na URL?

Exercícios 06 - Services e Regras de Negócio 🧠

🟢 Fáceis

  1. Conceito: Explique por que não é uma boa prática colocar lógica de cálculo ou validação dentro do Controller.
  2. Responsabilidade: Cite 3 exemplos de tarefas que devem ser feitas na camada de Service.

🟡 Médios

  1. Tratamento de Erros: Por que o Service deve lançar (throw) um erro em vez de retornar um Status Code (ex: 404)?
  2. Reutilização: Imagine que você tem um EmailService. Cite dois Controllers diferentes que poderiam usar esse mesmo serviço.

🔴 Desafio

  1. Lógica de Negócio: Escreva o pseudocódigo para um PedidoService.finalizar(pedidoId).
    • Quais validações você faria? (Estoque, status do pedido, limite de crédito do cliente).
    • Como você lidaria com o caso de "Produto Sem Estoque"?
    • Qual tipo de dado (DTO) o Service deveria retornar para o Controller após o sucesso?

Exercícios 07 - Repositories e Banco de Dados 🗄️

🟢 Fáceis

  1. Fundamentos: O que significa a sigla SQL e para que ela serve?
  2. CRUD: Escreva o comando SQL para inserir um novo produto (nome "Mouse", preço 50.00) na tabela produtos.

🟡 Médios

  1. Relacionamentos: Explique a diferença entre uma Primary Key (PK) e uma Foreign Key (FK). Por que a FK é essencial para bancos relacionais?
  2. Isolamento: Por que usamos o padrão Repository em vez de escrever o código SQL diretamente dentro do Service?

🔴 Desafio

  1. Modelagem Real: Imagine um sistema de Blog. Temos Escritores e Artigos.
    • 1:N: Como você modelaria a ligação entre um Escritor e seus Artigos?
    • SQL: Escreva uma query que retorne o título de todos os artigos escritos pelo autor com id = 5.
    • Repository: Como ficaria a assinatura (nome e parâmetros) da função no ArtigoRepository responsável por essa busca?

Exercícios 08 - Boas Práticas e Validação de Dados ✅

🟢 Fáceis

  1. Conceito: Por que nunca devemos confiar 100% nos dados vindos do frontend?
  2. Validação: Dê um exemplo de uma regra de validação para um campo de "Senha".

🟡 Médios

  1. Sanitização: Qual a diferença prática entre validar um campo e sanitizar um campo? Quando usamos cada um?
  2. Clean Code: Refatore o nome da função abaixo para seguir as boas práticas: 
    function usr_ch(a, b) { ... } // Recebe e-mail e id, checa se e-mail já existe

🔴 Desafio

  1. Tratamento de Erros: Imagine que o banco de dados caiu. O Service lança um erro técnico.
    • Como o Middleware Global de Erros deve reagir?
    • O que ele deve enviar para o usuário final? (Erro 500 com mensagem técnica ou mensagem genérica?)
    • Por que é importante logar o erro real apenas no console do servidor?

Exercícios 09 - Segurança e Autenticação com JWT 🔐

🟢 Fáceis

  1. Conceito: Qual a principal diferença entre Autenticação e Autorização?
  2. JWT: Quais são as 3 partes de um token JWT?

🟡 Médios

  1. Segurança: Por que nunca devemos incluir informações sensíveis (como a senha do usuário) dentro do Payload do JWT?
  2. Stateless: Quais as vantagens de uma arquitetura "Stateless" em sistemas que precisam escalar para milhões de usuários?

🔴 Desafio

  1. Análise de Token: Imagine que você interceptou um token JWT.
    • Como você faria para ler o nome do usuário que está dentro dele sem saber a chave secreta?
    • Agora, imagine que você tentou mudar o id do usuário para burlar o sistema. Por que o servidor vai rejeitar esse token quando você tentar usá-lo?
    • Onde o frontend deve armazenar o token para que ele não suma quando a página for recarregada?

Exercícios 10 - Controle de Acesso (RBAC) 🛡️

🟢 Fáceis

  1. Conceito: No sistema RBAC, o que é uma "Role"?
  2. Status Code: Se um usuário comum tenta acessar uma área de administrador, qual o código de erro HTTP (Status Code) mais apropriado?

🟡 Médios

  1. Diferença: Explique a diferença fundamental entre erro 401 e erro 403. Em qual desses casos o usuário deve ser redirecionado para a tela de login?
  2. Middleware: Imagine que você tem uma rota /admin/dashboard. Quais seriam os dois middlewares (nesta ordem) que o usuário deveria passar antes de chegar no Controller final?

🔴 Desafio

  1. Hierarchy (Hierarquia): Implemente (em pseudocódigo) uma lógica onde a função autorizar(['EDITOR', 'ADMIN']) permita a passagem se o usuário logado tiver QUALQUER um desses dois perfis.
    • Como você garantiria que um ADMIN sempre consiga acessar rotas de USER e EDITOR sem precisar listar o ADMIN em todas as rotas do sistema?
    • Qual a vantagem dessa abordagem centralizada?

Exercícios 11 - Refresh Token e Segurança Avançada 🏗️

🟢 Fáceis

  1. Conceito: Por que Access Tokens costumam ter vida curta?
  2. Bibliotecas: Para que serve a biblioteca Helmet em um aplicativo Express?

🟡 Médios

  1. CORS: Explique por que o CORS é uma segurança do Navegador e não do servidor. O que acontece se você tentar chamar uma API sem CORS a partir de um script no Terminal (cURL)?
  2. Flow: Desenhe o fluxo de uma requisição que retorna erro 401 por token expirado e como o frontend deve agir para usar o Refresh Token.
  3. Headers: Cite três informações sensíveis que o Helmet ajuda a esconder nos cabeçalhos HTTP.

🔴 Desafio

  1. Segurança de Refresh Tokens: Se o Refresh Token permite gerar novos Access Tokens, por que ele é considerado mais seguro?
    • Onde ele deve ser armazenado preferencialmente no navegador (LocalStorage ou Cookies HttpOnly)? Por quê?
    • O que é o "Refresh Token Rotation"?

Exercícios 12 - Introdução ao React ⚛️

🟢 Fáceis

  1. Conceito: O que significa a sigla SPA e qual sua principal vantagem?
  2. Sintaxe: No React, usamos className ou class para definir classes CSS? Por quê?

🟡 Médios

  1. Componentes: Por que dizemos que a arquitetura do React é baseada em "LEGO"? Como isso ajuda na organização do código?
  2. Vite: Qual a função do Vite no desenvolvimento de um projeto React moderno?
  3. Props: Explique como as props permitem que um mesmo componente (ex: um Botão) seja usado em vários lugares com textos e cores diferentes.

🔴 Desafio

  1. JSX vs HTML: O código abaixo é Javascript ou HTML? Justifique sua resposta mencionando pelo menos duas diferenças sutis que o JSX impõe. 
    const elemento = (
  <div className="container">
    <h1>Título</h1>
    <br />
  </div>
);
    • O que acontece se eu esquecer de fechar a tag <br>?
    • Como eu faria para exibir o valor de uma variável nome dentro do h1?

Exercícios 13 - Estado e Reatividade (Hooks) 🎣

🟢 Fáceis

  1. Conceito: Por que uma variável comum (ex: let x = 0) não serve para atualizar um contador na tela do React?
  2. Sintaxe: O que faz o comando const [valor, setValor] = useState(0);? Explique cada um dos 3 elementos.

🟡 Médios

  1. Eventos: Como passamos uma função que deve ser executada apenas quando o usuário clica em um botão? Mostre um exemplo de código.
  2. Imutabilidade: Por que não podemos fazer lista.push(item) e depois setLista(lista) no React? Qual o jeito correto de adicionar um item a um array no estado?
  3. Inputs: O que é um "Input Controlado" e como o atributo value e o evento onChange trabalham juntos?

🔴 Desafio

  1. Toggle de Visibilidade: Crie a lógica para um componente que esconde ou mostra um texto secreto.
    • Qual tipo de dado você usaria no useState (Boolean, String ou Number)?
    • Como ficaria a expressão JSX para mostrar o texto apenas se o estado for verdadeiro?

Exercícios 14 - Efeitos e Chamadas de API 🌐

🟢 Fáceis

  1. Conceito: O que é um "Efeito Colateral" (Side Effect) no desenvolvimento Frontend?
  2. useEffect: O que acontece se passarmos um array de dependências vazio [] para o useEffect?

🟡 Médios

  1. Dependências: Se eu quiser que o useEffect rode sempre que a variável usuarioID mudar, como deve ficar o array de dependências?
  2. Fetch: Explique a ordem de execução do código abaixo: 
    console.log("A");
fetch("url").then(() => console.log("B"));
console.log("C");
  3. Estados de Rede: Por que é importante ter um estado de loading (carregando) em aplicações que buscam dados na internet?

🔴 Desafio

  1. Ciclo de Efeitos: Imagine que seu efeito faz um fetch e, dentro do .then(), você chama um setData(dados).
    • O que acontece se você NÃO passar o array []? Explique o loop infinito que isso gera.
    • Como você faria para exibir uma mensagem "Nenhum resultado encontrado" caso a API retorne um array vazio?

Exercícios 15 - Navegação com React Router 🚦

🟢 Fáceis

  1. Conceito: Por que usamos o React Router em vez de links <a> comuns em uma SPA?
  2. Componentes: Para que servem os componentes <BrowserRouter> e <Routes>?

🟡 Médios

  1. Navegação: Qual a diferença entre usar o componente <Link> e o hook useNavigate? Em quais situações você usaria cada um?
  2. Rota 404: Como configuramos uma rota que deve ser exibida quando o usuário digita uma URL que não existe no site?
  3. Parâmetros: Dada a rota <Route path="/usuario/:nome" element={<Perfil />} />, como o componente Perfil pode descobrir qual o nome que foi digitado na URL?

🔴 Desafio

  1. Proteção de Rotas: Imagine que você tem uma página /admin que só pode ser acessada se o usuário estiver logado.
    • Como você usaria o useNavigate dentro de um useEffect para redirecionar o usuário para a página de /login caso ele não tenha um token salvo no localStorage?
    • O que acontece se o usuário clicar no botão "Voltar" do navegador após ser redirecionado?

Exercícios 16 - Planejamento do Projeto Final 🏆

🟢 Fáceis

  1. Escolha do Tema: Qual dos temas sugeridos (Tarefa Cloud, E-commerce, Rede Social, Helpdesk) você escolheu para o seu projeto final? Se for um tema autoral, descreva-o em uma frase.
  2. Tecnologias: Enumere pelo menos 3 tecnologias do Frontend e 3 do Backend que você usará no seu TCC.

🟡 Médios

  1. Arquitetura: Desenhe um diagrama simples (ou explique em texto) como os dados fluirão da sua API Node.js até a tela do usuário no React.
  2. Segurança: Como você planeja proteger as informações sensíveis (senhas, segredos JWT) no seu projeto final?
  3. CORS: Por que você precisará configurar o CORS no seu servidor para que o projeto funcione?

🔴 Desafio

  1. Plano de Entrega: Crie um cronograma de 3 passos para a construção do seu projeto:
    • Passo 1: O que será feito primeiro no Backend?
    • Passo 2: Como será a integração inicial?
    • Passo 3: Qual a funcionalidade de "brilho" (extra) que você quer adicionar?

Projetos

Projetos Práticos 🚀

Transforme teoria em prática com desafios progressivos que compõem seu portfólio.

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 Interativos 🧠

Teste seus conhecimentos rapidamente ao final de cada módulo.

Quiz 01 - Introdução

1. Qual o papel fundamental de um navegador (browser) na Web?
Criar o código HTML de uma página automaticamente
Interpretar o código (HTML/CSS) e renderizar a página visualmente
Armazenar os arquivos do site permanentemente
Atuar como o servidor que responde às requisições *Explicação: O navegador é o software cliente que traduz o código para que o usuário possa interagir com ele de forma visual.*
2. No modelo "Cliente x Servidor", quem é responsável por fazer a requisição (Request)?
O banco de dados
O roteador da internet
O computador que hospeda o site
O navegador (cliente) do usuário *Explicação: O cliente sempre inicia a interação solicitando um recurso ao servidor.*
3. O que acontece em uma resposta (Response) bem-sucedida do servidor?
O servidor apaga o site para economizar espaço
O servidor envia os dados (HTML, CSS, Imagens) de volta ao cliente
O navegador fecha automaticamente
O usuário precisa pagar uma taxa imediata *Explicação: A resposta contém os arquivos necessários para o navegador construir a página.*
4. Qual destes navegadores NÃO é considerado um browser moderno baseado em Chromium?
Google Chrome
Microsoft Edge
Mozilla Firefox
Opera *Explicação: O Firefox utiliza o seu próprio motor de renderização chamado Gecko.*
5. Para que servem as "DevTools" (Ferramentas de Desenvolvedor)?
Para navegar na internet de forma anônima
Para instalar o Windows no navegador
Para inspecionar, editar e depurar o código de um site em tempo real
Para criar logos profissionais *Explicação: Elas são essenciais para entender como um site foi construído e corrigir erros.*
6. Qual tecla de atalho é comumente usada para abrir o DevTools no Windows?
Ctrl + Alt + Delete
F5
F12
Alt + F4 *Explicação: F12 é o padrão na maioria dos navegadores para abrir as ferramentas de desenvolvedor.*
7. Sobre a organização de arquivos em um projeto web, qual a recomendação correta?
Usar letras Maiúsculas em todos os nomes
Colocar espaços nos nomes para facilitar a leitura
Usar apenas letras minúsculas, sem espaços e sem acentos
Não usar extensões nos arquivos *Explicação: Isso evita erros de linkagem e incompatibilidade em servidores Linux.*
8. Por que o arquivo principal de um site deve se chamar `index.html`?
Porque é o nome mais bonito
Porque os servidores procuram esse nome automaticamente ao acessar uma pasta
Porque o HTML só funciona com esse nome
Porque foi uma regra criada pelo Google *Explicação: O `index` é o ponto de entrada padrão reconhecido por quase todos os servidores web.*
9. Qual a principal diferença entre a internet física e a Web?
São a mesma coisa
A internet é a infraestrutura (cabos/redes) e a Web é um serviço que roda sobre ela
A internet é paga e a Web é sempre gratuita
A internet só funciona com cabos e a Web só com Wi-Fi *Explicação: A internet é "estrada" e a Web é um dos "carros" que circulam por ela.*
10. O que significa editar um site pela aba "Elements" do DevTools?
Você está alterando o site para todo mundo que acessa
Você está hackeando o servidor da empresa
Você está fazendo alterações temporárias apenas no seu navegador local
Você está fazendo o build do projeto *Explicação: As edições no DevTools são locais; ao atualizar a página, elas desaparecem.*

Quiz 02 - Introdução

1. O que significa a sigla HTML?
HyperTool Multi Language
HyperText Markup Language
High Technical Modern Language
Hybrid Text Markup Level *Explicação: HTML é a linguagem de marcação padrão para criar páginas web.*
2. Qual tag é usada para definir o título que aparece na aba do navegador?
``
`

`

``</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<meta>` *Explicação: A tag `<title>` fica dentro do `<head>` e define o nome da página na aba.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">3. Onde deve ficar todo o conteúdo visual do site (títulos, imagens, textos)?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Dentro da tag `<head>`</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Antes da tag `<html>`</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Dentro da tag `<body>`">Dentro da tag `<body>`</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Dentro da tag `<meta>` *Explicação: O `<body>` é o corpo do documento, onde reside tudo o que é visível ao usuário.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">4. Qual a função da tag `<!DOCTYPE html>` no início do arquivo?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Criar um título para o site</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Definir a cor do fundo da página</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Informar ao navegador que o documento utiliza a versão HTML5">Informar ao navegador que o documento utiliza a versão HTML5</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Conectar o site ao banco de dados *Explicação: O DOCTYPE é uma instrução que indica a versão do HTML para que o navegador renderize corretamente.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">5. Para que serve o atributo `lang` na tag `<html lang="pt-br">`?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Para definir o nome do autor do site</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Para informar o idioma principal da página aos navegadores e buscadores">Para informar o idioma principal da página aos navegadores e buscadores</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Para traduzir o código automaticamente para outras línguas</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Para mudar a cor do texto do site *Explicação: O atributo `lang` é crucial para acessibilidade e SEO (otimização de buscas).*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">6. O que são Metadados no contexto do HTML?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Os textos principais do corpo do site</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Informações sobre o documento que não aparecem diretamente na página">Informações sobre o documento que não aparecem diretamente na página</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Imagens de alta resolução</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Os links para sites externos *Explicação: Metadados são "dados sobre dados", como codificação de caracteres e configurações de tela.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">7. Qual a importância da tag `<meta charset="UTF-8">`?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Deixar o site mais rápido</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Garantir que acentos, caracteres especiais e emojis sejam exibidos corretamente">Garantir que acentos, caracteres especiais e emojis sejam exibidos corretamente</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Permitir o uso de vídeos no site</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Definir a largura da página *Explicação: O UTF-8 é o padrão de codificação de caracteres mais usado na web moderna.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">8. No HTML, como identificamos uma tag de fechamento?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Ela não tem o sinal de maior `>`</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Ela começa com um ponto `.`</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Ela possui uma barra `/` antes do nome da tag (ex: `</p>`)">Ela possui uma barra `/` antes do nome da tag (ex: `</p>`)</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Ela é escrita em negrito *Explicação: A barra indica o fim do elemento que foi aberto anteriormente.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">9. Qual o objetivo da tag `<meta name="viewport" ...>`?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Definir a cor da barra de rolagem</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Inserir uma imagem de fundo</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Garantir que o site seja exibido corretamente em dispositivos móveis (responsividade)">Garantir que o site seja exibido corretamente em dispositivos móveis (responsividade)</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Criar um menu de navegação *Explicação: Essa tag configura a área de visualização do navegador para telas de diferentes tamanhos.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">10. O que é um "Atributo" em uma tag HTML?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">O nome do arquivo salvo no computador</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">O texto que o usuário digita no site</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Uma informação adicional fornecida dentro da tag de abertura (ex: `src`, `class`, `id`)">Uma informação adicional fornecida dentro da tag de abertura (ex: `src`, `class`, `id`)</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Uma tag que não precisa ser fechada *Explicação: Atributos personalizam ou fornecem dados necessários para o funcionamento da tag.*</div> <div class="quiz-feedback"></div> </div>

Quiz 03 - Introdução

1. O que define o "HTML Semântico"?
O uso de cores vibrantes no texto
O uso de tags que descrevem o significado do conteúdo
A velocidade com que a página carrega
O número de imagens em um documento *Explicação: Tags semânticas como `
` e `
` dizem ao navegador e buscadores o que cada parte representa.*
2. Quantas vezes a tag `
` deve aparecer em uma única página HTML?
Quantas vezes for necessário
No mínimo duas (uma no topo e outra no fim)
Apenas uma vez
Nenhuma, ela é opcional *Explicação: A tag `
` representa o conteúdo principal e exclusivo daquela página específica.*
3. Qual a principal vantagem de usar HTML semântico para o SEO (Otimização para Buscadores)?
Deixa as imagens menores
Remove os vírus do site
Ajuda motores de busca como o Google a entender melhor a estrutura e importância do conteúdo
Faz o site carregar sem internet *Explicação: Buscadores priorizam sites onde conseguem identificar claramente o que é cabeçalho, conteúdo e rodapé.*
4. Qual tag é a mais adequada para envolver os links do menu principal do site?
``
``
`
`
` *Explicação: A tag `
5. Sobre `section` e `article`, qual a afirmação correta?
São a mesma coisa e podem ser usadas sem distinção
`article` deve ser usado para conteúdo independente (que pode ser lido sozinho), enquanto `section` agrupa temas relacionados
`section` só pode existir dentro de um `article`
`article` serve apenas para notícias de jornal *Explicação: Um `article` é auto-contido; uma `section` divide a página em blocos temáticos.*
6. Qual tag deve ser usada para o rodapé da página ou de uma seção?
``
``
`
`
`` *Explicação: `
` é a tag semântica padrão para rodapés.*
7. Na hierarquia de títulos, qual a regra correta sobre o uso do `

`?

Devemos usar em todos os parágrafos para destaque
Podemos usar vários, desde que tenham cores diferentes
Devemos usar apenas um por página, representando o assunto principal
Só deve ser usado se o texto for em inglês *Explicação: O `

` é o título de nível mais alto e define o tema central da página para acessibilidade e SEO.*

8. O que acontece se pularmos a hierarquia de títulos (ex: passar do `h1` direto para o `h4`)?
O site não carrega
O navegador exibe um erro em vermelho
Prejudica a acessibilidade para quem usa leitores de tela e confunde os buscadores
O texto fica invisível *Explicação: A ordem lógica dos títulos (h1, h2, h3...) cria um índice estruturado para quem não enxerga a tela.*
9. Qual tag semântica é ideal para o cabeçalho do site, geralmente contendo o logo e o título?
``
``
`
`
`` *Explicação: `<header>` define o cabeçalho de introdução de uma página ou seção.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">10. Por que usar `<div>` para estruturar todo o layout do site é considerado ruim hoje em dia?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Porque a tag `<div>` vai ser removida do HTML em breve</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Porque `<div>` deixa o site mais pesado</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Porque `<div>` não tem significado semântico, dificultando a acessibilidade">Porque `<div>` não tem significado semântico, dificultando a acessibilidade</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Porque as `<div>` não aceitam cores de fundo *Explicação: A `<div>` é um recipiente genérico; usá-la excessivamente torna a estrutura do site opaca para tecnologias assistivas.*</div> <div class="quiz-feedback"></div> </div>

Quiz 04 - Introdução

1. Qual a função da tag `

` no HTML?

Criar um título em negrito
Definir um parágrafo de texto
Inserir uma imagem
Mudar a cor do fundo *Explicação: A tag `

` é usada para agrupar sentenças em blocos de texto chamados parágrafos.*

2. Para que serve a tag `
`?
Criar um link
Deixar o texto em negrito
Forçar uma quebra de linha sem mudar de parágrafo
Criar uma lista ordenada *Explicação: `
` (Break Row) apenas pula para a linha seguinte dentro do mesmo elemento.*
3. Qual a diferença entre as tags `
    ` e `
      `?
`
    ` é para links e `
      ` é para imagens
`
    ` cria listas com marcadores (bolinhas) e `
      ` cria listas numeradas
`
    ` é apenas para textos curtos
Não há diferença técnica entre elas *Explicação: UNordered (Não ordenada) usa símbolos; Ordered (Ordenada) usa sequência numérica ou alfabética.*
4. Qual tag deve ser usada obrigatoriamente para cada item dentro de uma lista?
``
`
  • `
    • `
      `
    `` *Explicação: a tag `
  • ` (List Item) representa cada entrada individual de uma lista.*
    • 5. Qual o atributo da tag `` que define o endereço (URL) de destino do link?
    `src`
    `link`
    `href`
    `url` *Explicação: `href` significa Hypertext Reference e aponta para onde o usuário será levado.*
    6. Como abrir um link em uma nova aba do navegador?
    Adicionando o atributo `new="tab"`
    Adicionando o atributo `target="_blank"`
    Usando a tag ``
    Não é possível fazer isso com HTML puro *Explicação: O atributo `target="_blank"` instrui o navegador a carregar o recurso em um novo contexto de navegação.*
    7. O que é um "Link Interno"?
    Um link que aponta para o site do Google
    Um link que aponta para outro arquivo dentro do mesmo projeto ou pasta
    Um link que só funciona se estiver logado
    Um link que não pode ser clicado *Explicação: Links internos conectam as diferentes páginas que compõem o seu próprio site.*
    8. Qual o problema de usar espaços nos nomes de arquivos de imagem ou páginas (ex: `minha pagina.html`)?
    O arquivo fica maior
    O computador quebra fisicamente
    Espaços em URLs podem falhar ou ser substituídos por caracteres estranhos (como %20), quebrando o link
    O Google proíbe o uso de espaços *Explicação: URLs não aceitam espaços; é padrão usar hífens ou letras minúsculas grudadas.*
    9. O que acontece se omitirmos o atributo `href` na tag ``?
    O link abre o Google
    O site fica azul
    O elemento não se comporta como um hyperlink clicável
    O navegador exibe um alerta de erro *Explicação: Sem o `href`, a tag `` é apenas uma âncora sem destino definido.*
    10. Por que devemos usar textos descritivos nos links em vez de apenas "Clique aqui"?
    Para o código ficar mais colorido
    Para melhorar a acessibilidade (leitores de tela) e o SEO (ajuda o Google a entender o destino)
    Para o link carregar mais rápido
    "Clique aqui" é proibido pelo consórcio W3C *Explicação: Links descritivos ajudam usuários com deficiência visual a navegar e informam aos buscadores sobre o que é a página de destino.*

    Quiz 05 - Introdução

    1. Qual atributo da tag `` é usado para definir o caminho do arquivo de imagem?
    `href`
    `link`
    `src`
    `url` *Explicação: O atributo `src` (source) indica ao navegador onde encontrar o arquivo da imagem.*
    2. Por que o atributo `alt` é considerado obrigatório por boas práticas?
    Para mudar o tamanho da imagem
    Para definir o título da página
    Para garantir acessibilidade (leitores de tela) e ajudar no SEO
    Para que a imagem carregue mais rápido *Explicação: O `alt` descreve o conteúdo da imagem para quem não pode vê-la e para motores de busca.*
    3. Qual a principal característica de uma imagem no formato SVG?
    É feita de milhões de pixels coloridos
    É um gráfico vetorial baseado em XML (código) que não perde qualidade ao ser redimensionado
    Só pode ser vista em computadores muito potentes
    É o formato mais pesado que existe *Explicação: SVGs são matematicamente calculados, o que permite escala infinita com arquivos minúsculos.*
    4. Qual formato de imagem é mais recomendado para fotografias com muitos detalhes e cores?
    PNG
    JPG (ou JPEG)
    SVG
    GIF *Explicação: O JPG utiliza compressão eficiente para lidar com milhões de cores em fotografias.*
    5. Em qual situação o formato PNG é superior ao JPG?
    Quando a imagem é muito grande
    Quando queremos economizar o máximo de espaço possível
    Quando a imagem precisa de transparência no fundo
    Para exibir vídeos curtos *Explicação: O PNG suporta canais alfa, permitindo fundos transparentes.*
    6. O que é o formato WebP?
    Um formato antigo criado para impressoras
    Um formato moderno (do Google) que oferece compressão superior a JPG e PNG
    Uma tag HTML para vídeos
    Um tipo de vírus de computador *Explicação: O WebP é o padrão ouro moderno para imagens na web, sendo extremamente leve.*
    7. A tag `` possui tag de fechamento (ex: ``)?
    Sim, sempre
    Apenas se for um SVG
    Não, ela é uma tag auto-contida
    Depende do navegador *Explicação: Assim como a tag `
    `, a `` não envolve conteúdo de texto e por isso não precisa de fechamento.*
    8. Qual a vantagem de organizar as imagens em uma pasta chamada `assets` ou `imagens`?
    As imagens ficam com cores mais bonitas
    O site fica imune a hackers
    Facilita a manutenção e organização do projeto à medida que ele cresce
    O Google exige que essa pasta exista *Explicação: Organização é chave em projetos reais para evitar confusão de arquivos.*
    9. Como você ajustaria a largura de uma imagem diretamente no HTML?
    Usando a tag ``
    Usando o atributo `width` dentro da tag ``
    Mudando o nome do arquivo para `imagem_grande.jpg`
    Não é possível ajustar o tamanho no HTML *Explicação: Embora o recomendado seja usar CSS, os atributos `width` e `height` podem ser usados diretamente na tag.*
    10. O que acontece se o valor do atributo `src` estiver errado (ex: um erro de digitação no nome do arquivo)?
    O navegador baixa a imagem correta sozinho
    O site inteiro para de funcionar
    A imagem não será exibida e o texto do atributo `alt` aparecerá no lugar
    O computador reinicia *Explicação: O link quebrado impede o carregamento, e o navegador recorre ao texto alternativo.*

    Quiz 06 - Introdução

    1. Qual a tag principal usada para iniciar uma tabela no HTML?
    ``
    ``
    ``
    `` *Explicação: A tag `
    ` é o elemento pai de toda a estrutura tabular.*
    2. Para que serve a tag `
    `?
    Para criar um link
    Para definir uma linha na tabela (Table Row)
    Para criar uma coluna
    Para inserir um título *Explicação: `tr` significa Table Row e agrupa as células de uma mesma linha.*
    3. Qual a diferença entre `
    `
    `
    ` agrupa semanticamente as linhas que compõem o cabeçalho da tabela.*
    6. Para que serve a tag `
    `?
    Para definir a cor do corpo do site
    Para agrupar as linhas que contêm os dados principais da tabela
    Para criar um parágrafo
    Para inserir imagens *Explicação: `tbody` define o corpo de conteúdo da tabela, separando-o do cabeçalho e rodapé.*
    7. Qual tag é usada para dar um título ou legenda visível a uma tabela?
    ``</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<label>`</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! `<caption>`">`<caption>`</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<legend>` *Explicação: `<caption>` deve ser a primeira tag dentro de `<table>` e descreve o conteúdo da tabela.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">8. O que faz o atributo `border="1"` quando aplicado à tag `<table>`?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Muda a cor das letras para azul</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Exclui a tabela do site</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Adiciona bordas visíveis às linhas e células (embora o ideal seja usar CSS)">Adiciona bordas visíveis às linhas e células (embora o ideal seja usar CSS)</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Deixa a tabela invisível *Explicação: Esse atributo é uma forma rápida de visualizar os limites da tabela durante o desenvolvimento.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">9. Qual tag agrupa as informações de rodapé da tabela (como somatórios)?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<bottom>`</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<footer-table>`</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! `<tfoot>`">`<tfoot>`</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">`<end>` *Explicação: `tfoot` é usado para informações de fechamento ou resumo dos dados tabulares.*</div> <div class="quiz-feedback"></div> </div> <div class="quiz-container"> <div class="quiz-question">10. Como o navegador Renderiza uma tag `<th>` por padrão?</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Texto pequeno e itálico</div> <div class="quiz-option" data-correct="true" data-feedback="✅ Correto! Texto em negrito e centralizado dentro da célula">Texto em negrito e centralizado dentro da célula</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">Texto vermelho e sublinhado</div> <div class="quiz-option" data-correct="false" data-feedback="Incorreto. Tente novamente.">O navegador esconde a tag `<th>` *Explicação: Por padrão, os navegadores aplicam um estilo de destaque aos cabeçalhos de tabela.*</div> <div class="quiz-feedback"></div> </div>
    ` e ``?
    `
    		` é para texto e `` é para imagens
    `
    		` fica no final da tabela e `` no início
    `
    		` é para dados comuns e `` é para células de cabeçalho (títulos)
    Não há nenhuma diferença *Explicação: `th` (Table Header) destaca os títulos das colunas ou linhas.*
    4. É correto usar tabelas para criar o layout (posicionamento de menus, colunas) do site todo?
    Sim, é a forma mais moderna de fazer sites
    Não, tabelas devem ser usadas apenas para dados tabulares
    Sim, mas apenas se o site for simples
    Depende do navegador *Explicação: Usar tabelas para layout prejudica a acessibilidade e a manutenção. Hoje usamos CSS para isso.*
    5. Qual tag deve ser usada para agrupar o cabeçalho de uma tabela complexa?
    ``
    ``
    `
    ` *Explicação: `

    Quiz 07 - Introdução

    1. Qual a tag usada para agrupar todos os elementos de um formulário?
    ``
    ``
    `
    `
    `` *Explicação: A tag `` é a base de qualquer formulário e define o comportamento de envio.*
    2. No atributo `method` da tag ``, qual valor envia os dados de forma visível na URL?
    `POST`
    `SEND`
    `GET`
    `VISIBLE` *Explicação: O método `GET` anexa os dados do formulário ao final da URL, sendo útil para buscas, mas inseguro para senhas.*
    3. Para que serve a tag `
    Para criar um parágrafo
    Para definir a cor do botão
    Para dar um nome ou rótulo a um campo e melhorar a acessibilidade
    Para inserir imagens no formulário *Explicação: O `
    4. Como vinculamos corretamente um `
    Usando o nome do arquivo
    Usando o atributo `for` no label igual ao `id` do input
    Usando a tag ``
    Não é necessário vincular *Explicação: Essa conexão permite que tecnologias assistivas saibam a qual campo o rótulo pertence.*
    5. Qual o efeito de usar o atributo `type="password"` em um ``?
    Ele envia os dados criptografados para o banco
    Ele oculta os caracteres digitados (exibindo bolinhas ou asteriscos)
    Ele impede que o usuário digite números
    Ele cria um cadeado ao lado do campo *Explicação: O tipo `password` protege visualmente a senha de quem estiver olhando a tela.*
    6. Qual tipo de `input` abre um calendário nativo no navegador (celular ou desktop)?
    `type="calendar"`
    `type="time"`
    `type="date"`
    `type="month"` *Explicação: O tipo `date` oferece uma interface pronta para escolha de datas.*
    7. Para que serve o atributo `placeholder`?
    Para tornar o campo obrigatório
    Para definir o nome do campo no servidor
    Para exibir uma dica curta dentro do campo antes do usuário começar a digitar
    Para mudar o ícone do mouse *Explicação: O placeholder serve como uma orientação visual temporária.*
    8. Qual atributo torna o preenchimento de um campo obrigatório antes do envio?
    `not-null`
    `force`
    `required`
    `check` *Explicação: O atributo booleano `required` impede o envio do formulário se o campo estiver vazio.*
    9. Qual o valor do atributo `type` em um botão para que ele envie os dados do formulário?
    `type="send"`
    `type="submit"`
    `type="button"`
    `type="ok"` *Explicação: `submit` é o comportamento padrão para processar e enviar as informações do formulário.*
    10. Para que servem as tags `
    ` e ``?
    Para inserir vídeos no formulário
    Para agrupar campos relacionados sob uma moldura com título
    Para criar tabelas dentro do formulário
    Para mudar a fonte do texto *Explicação: Elas ajudam na organização visual e semântica de formulários longos.*

    Quiz 08 - Introdução

    1. Qual a ordem lógica de estruturação de uma página web moderna utilizando tags semânticas?
    `` -> `
    ` -> `
    ` -> `
    `
    `` -> `
    ` -> `
    ` -> `
    `
    `` -> `
    ` -> `
    ` -> `
    `
    `` -> `
    2. Em uma Landing Page, onde geralmente colocamos o logo e o menu principal?
    Dentro da tag `
    Dentro da tag `
    `
    Dentro da tag `
    `
    Dentro da tag `` *Explicação: O cabeçalho (`
    `) é o local semântico correto para a identidade e navegação inicial do site.*
    3. Sobre a hierarquia de títulos, qual destas práticas é a mais recomendada?
    Usar apenas `h1` para que tudo fique grande
    Começar com `h6` e ir subindo até o `h1`
    Usar um único `h1` para o tema principal e `h2`, `h3` em ordem lógica para subtemas
    Escolher o título pelo tamanho da letra que você gosta *Explicação: A hierarquia de títulos serve para organizar o "índice" lógico da página para acessibilidade e SEO.*
    4. Qual atributo é fundamental para que um link (``) aponte para uma seção específica dentro da própria página?
    O atributo `src`
    O atributo `href` apontando para o `id` da seção (ex: `href="#contato"`)
    O atributo `class`
    O atributo `target="_self"` *Explicação: Usamos o símbolo `#` seguido do ID desejado para criar links de âncora interna.*
    5. Para que serve o atributo `alt` em uma tag de imagem?
    Para mudar o estilo da borda
    Para definir o nome do arquivo no servidor
    Para fornecer uma descrição textual da imagem para deficientes visuais e buscadores
    Para fazer a imagem brilhar *Explicação: O `alt` (texto alternativo) é o pilar da acessibilidade em imagens.*
    6. Qual tag de tabela é usada para agrupar semanticamente o cabeçalho (nomes das colunas)?
    ``
    ``
    ``
    `` *Explicação: `thead` separa os títulos das colunas do restante dos dados da tabela.*
    7. Em um formulário, qual o papel do atributo `name` em um ``?
    Definir a cor do texto
    Fazer o input brilhar
    Identificar os dados que estão sendo enviados para o servidor
    Criar uma dica visual dentro do campo *Explicação: O `name` é a "chave" que o servidor usa para identificar qual valor o usuário preencheu.*
    8. Qual a diferença entre `target="_blank"` e `target="_self"`?
    O primeiro é para links internos e o segundo para externos
    `_blank` abre em uma nova aba; `_self` abre na aba atual
    `_blank` é mais rápido que o `_self`
    Não há diferença real *Explicação: O `target` define o contexto de navegação onde o link será aberto.*
    9. Por que o HTML5 é considerado uma evolução em relação às versões anteriores?
    Porque ele é uma linguagem de programação completa
    Porque ele introduziu tags semânticas e novos tipos de inputs que facilitam o desenvolvimento moderno
    Porque ele não precisa de internet para funcionar
    Porque ele removeu a necessidade de usar CSS *Explicação: O HTML5 trouxe clareza e novas funcionalidades nativas para a web rica de hoje.*
    10. Qual a função da tag `
    `?
    Envolver todo o corpo do site, incluindo o rodapé
    Identificar o conteúdo principal e exclusivo da página atual
    Criar um menu de navegação lateral
    Inserir os metadados do site *Explicação: A tag `
    ` ajuda a focar no "coração" da página, sendo vital para tecnologias assistivas.*

    Quiz 09 - Introdução

    1. O que significa a sigla CSS?
    Computer Style Sheets
    Cascading Style Sheets
    Creative Style Sheets
    Colorful Style Sheets *Explicação: CSS significa "Folhas de Estilo em Cascata", referindo-se à forma como as regras de estilo podem ser aplicadas e sobrepostas.*
    2. No CSS, o que é o "Seletor"?
    É a cor que queremos usar no site
    É o arquivo que salvamos no computador
    É a parte da regra que escolhe qual elemento HTML será estilizado
    É o nome da empresa que criou o CSS *Explicação: O seletor aponta para a tag, classe ou ID que deve receber o estilo.*
    3. Qual a forma mais recomendada de aplicar CSS em um projeto profissional?
    Usando o atributo `style` dentro da tag HTML (Inline)
    Escrevendo as regras em um papel e tirando foto
    Criando um arquivo externo `.css` e linkando no HTML
    Colocando todo o estilo no final do `` *Explicação: Arquivos externos facilitam a manutenção e permitem reutilizar o estilo em várias páginas.*
    4. Qual seletor é usado para aplicar estilo a um grupo de elementos que possuem o atributo `class="destaque"`?
    `#destaque`
    `.destaque`
    `destaque`
    `*destaque` *Explicação: O ponto (`.`) é o símbolo usado para selecionar classes no CSS.*
    5. Para selecionar um elemento único através do seu ID (ex: `id="topo"`), qual símbolo usamos no CSS?
    `.` (ponto)
    `#` (cerquilha/hashtag)
    `!` (exclamação)
    `@` (arroba) *Explicação: O símbolo `#` é usado para selecionar IDs, que devem ser únicos por página.*
    6. O que acontece se houver duas regras diferentes para o mesmo elemento (conflito)?
    O navegador explode
    A página fica em branco
    O CSS segue a hierarquia e a ordem de precedência (Cascata) para decidir qual regra vence
    O navegador escolhe a regra mais curta *Explicação: A Cascata define que regras mais específicas ou lidas por último geralmente têm prioridade.*
    7. Qual tag HTML é usada para conectar um arquivo CSS externo ao documento?
    `

    Quiz 10 - Introdução

    1. O que o conceito de "Box Model" define no CSS?
    A cor do fundo do site
    A velocidade de carregamento das imagens
    Como o tamanho, espaçamento e bordas de cada elemento são calculados
    O número de links em uma página *Explicação: O Box Model trata cada elemento HTML como uma caixa retangular composta por várias camadas.*
    2. Qual parte do Box Model representa o espaço **interno** entre o conteúdo e a borda?
    Margin
    Border
    Padding
    Content *Explicação: O Padding é o preenchimento interno, usado para dar "respiro" ao conteúdo dentro da caixa.*
    3. Qual a diferença fundamental entre Margin e Padding?
    Não há diferença, são sinônimos
    Margin é o espaço externo (entre caixas); Padding é o espaço interno (dentro da caixa)
    Margin só funciona em textos e Padding em imagens
    Padding é sempre preto e Margin é transparente *Explicação: Use margin para afastar elementos uns dos outros e padding para afastar o conteúdo da sua própria borda.*
    4. Qual propriedade define a espessura, o estilo e a cor da "moldura" de um elemento?
    `outline`
    `box-style`
    `border`
    `margin` *Explicação: A propriedade `border` permite configurar a linha que envolve o preenchimento e o conteúdo.*
    5. Se um elemento tem `width: 200px` e `padding: 20px` nos quatro lados, qual será sua largura total na tela por padrão (sem `border-box`)?
    200px
    220px
    240px
    180px *Explicação: O navegador soma a largura (200) + padding esquerdo (20) + padding direito (20), resultando em 240px.*
    6. Para que serve a propriedade `box-sizing: border-box;`?
    Para deixar as bordas arredondadas
    Para garantir que o Padding e a Borda fiquem dentro da largura total definida, sem aumentar o tamanho da caixa
    Para esconder a margem do elemento
    Para mudar o tamanho da fonte automaticamente *Explicação: Com `border-box`, a largura que você define é o tamanho total final da caixa, independentemente do padding ou borda.*
    7. Como você aplicaria uma margem de `10px` apenas na parte superior de um elemento?
    `margin: 10px;`
    `margin-top: 10px;`
    `top-margin: 10px;`
    `padding-top: 10px;` *Explicação: Usamos extensões como `-top`, `-bottom`, `-left` e `-right` para controlar lados específicos.*
    8. O que acontece se definirmos `margin: auto;` em um elemento com uma largura (`width`) fixa?
    O elemento desaparece
    O elemento é centralizado horizontalmente dentro do seu container
    O elemento ocupa toda a tela
    O texto fica em negrito *Explicação: `margin: auto` distribui o espaço disponível igualmente nos dois lados, centralizando o bloco.*
    9. Qual o valor padrão da propriedade `box-sizing` na maioria dos navegadores (antes de alterarmos)?
    `border-box`
    `content-box`
    `padding-box`
    `margin-box` *Explicação: O padrão `content-box` faz com que paddings e borders sejam somados ao valor da largura principal.*
    10. Pode-se usar valores negativos na propriedade `margin`?
    Sim, para aproximar ou sobrepor elementos
    Não, o CSS só aceita números positivos
    Sim, mas apenas em imagens
    Apenas se o site estiver em modo escuro *Explicação: Margens negativas são úteis em layouts avançados para criar efeitos de sobreposição ou "puxar" elementos.*

    Quiz 11 - Introdução

    1. Qual o comportamento padrão de um elemento com `display: block`?
    Ele fica na mesma linha que outros elementos
    Ele ocupa toda a largura disponível e sempre começa em uma nova linha
    Ele desaparece da tela
    Ele fixa o elemento no topo da página *Explicação: Elementos em bloco (como `div` e `p`) funcionam como "tijolos" que ocupam toda a extensão do seu container.*
    2. Em relação à propriedade `display: inline`, o que é VERDADE?
    Permite definir `width` e `height` fixos
    Ocupa apenas o espaço necessário para o conteúdo e não permite definir largura ou altura
    Ele pula para uma nova linha automaticamente
    É o comportamento padrão das tabelas *Explicação: Elementos em linha (como `span` ou `a`) fluem horizontalmente junto com o texto.*
    3. Qual valor da propriedade `display` faz o elemento sumir da tela e não ocupar espaço algum?
    `hidden`
    `invisible`
    `none`
    `exit` *Explicação: Diferente de `visibility: hidden` (que deixa o espaço vazio), o `display: none` remove o elemento do layout completamente.*
    4. Qual valor de `position` é o padrão de todos os elementos HTML?
    `relative`
    `static`
    `absolute`
    `fixed` *Explicação: O posicionamento estático segue o fluxo natural do documento.*
    5. O que acontece quando definimos `position: relative` em um elemento e movemos com `top: 10px`?
    O elemento flutua e sai do fluxo da página
    O elemento se move 10px para baixo em relação à sua posição original, mas o espaço original dele continua ocupado
    O elemento vai para o topo da tela do navegador
    Ele desaparece *Explicação: Posicionamento relativo apenas "desvia" o elemento da sua posição natural sem afetar os vizinhos.*
    6. Sobre o `position: absolute`, qual a condição para que o elemento se posicione corretamente?
    Ele deve estar dentro de uma tag ``
    Ele deve ter obrigatoriamente um `z-index` negativo
    Ele se posiciona em relação ao primeiro pai que tenha um posicionamento diferente de `static`
    Ele só funciona se o site tiver imagens *Explicação: O elemento absoluto "procura" um antecessor posicionado (geralmente com `relative`) para usar como referência.*
    7. Qual `position` fixa um elemento na tela do navegador, impedindo que ele se mova durante a rolagem?
    `sticky`
    `absolute`
    `fixed`
    `static` *Explicação: `fixed` é ideal para menus fixos, alertas ou botões de suporte que devem estar sempre visíveis.*
    8. Qual a principal utilidade do `position: sticky`?
    Deixar o elemento invisível até ser clicado
    Fazer o elemento se comportar como relativo até atingir uma posição de rolagem específica, onde ele fica fixo
    Mudar a cor do elemento ao passar o mouse
    Centralizar o elemento na tela *Explicação: É o efeito "grudento", muito usado para manter cabeçalhos visíveis enquanto o usuário lê o conteúdo.*
    9. Para que serve a propriedade `z-index`?
    Para mudar o tamanho da fonte
    Para definir a velocidade de animações
    Para controlar a ordem de empilhamento (qual elemento fica na frente dos outros)
    Para definir a transparência da borda *Explicação: Em elementos sobrepostos, o `z-index` determina quem está em qual camada de profundidade.*
    10. Qual a função das propriedades `top`, `bottom`, `left` e `right`?
    Definir o tamanho das imagens
    Definir a distância de deslocamento para elementos com posicionamento `relative`, `absolute`, `fixed` ou `sticky`
    Mudar o alinhamento do texto
    Criar gradientes de cores *Explicação: Elas são as coordenadas espaciais para mover elementos posicionados.*

    Quiz 12 - Introdução

    1. O que é o CSS Flexbox?
    Uma forma de criar animações 3D
    Uma ferramenta para editar imagens no navegador
    Um modelo de layout para alinhar e distribuir espaço entre itens
    Uma linguagem de programação nova *Explicação: Flexbox (Flexible Box Layout) é um sistema de layout unidimensional para alinhar itens em linha ou coluna.*
    2. Qual propriedade ativa o modo Flexbox em um elemento pai?
    `position: flex;`
    `layout: flexbox;`
    `display: flex;`
    `align: items;` *Explicação: Ao definir `display: flex`, o elemento torna-se um Flex Container.*
    3. Para que serve a propriedade `justify-content`?
    Para mudar a cor do texto
    Para alinhar itens verticalmente
    Para alinhar os itens flexíveis ao longo do eixo principal (geralmente horizontal)
    Para aumentar o tamanho da borda *Explicação: O `justify-content` controla o espaçamento e alinhamento horizontal dos itens.*
    4. Qual valor de `justify-content` distribui os itens com espaço igual **entre** eles, encostando o primeiro e o último nas bordas?
    `space-around`
    `center`
    `space-between`
    `flex-start` *Explicação: `space-between` cria vãos iguais apenas entre os itens internos.*
    5. Qual propriedade é usada para alinhar os itens verticalmente (eixo secundário) dentro de um container flex?
    `vertical-align`
    `align-items`
    `justify-items`
    `flex-align` *Explicação: `align-items` controla o posicionamento dos itens no eixo oposto ao de direção.*
    6. O que acontece se utilizarmos `flex-direction: column;`?
    Os itens somem da tela
    Os itens passam a ser empilhados verticalmente (um abaixo do outro)
    Os itens ficam um ao lado do outro
    O site fica de cabeça para baixo *Explicação: O `flex-direction` define o eixo principal; `column` o torna vertical.*
    7. Para que serve a propriedade `flex-wrap: wrap;`?
    Para esconder os itens que não cabem na tela
    Para diminuir o tamanho dos itens automaticamente
    Para permitir que os itens pulem para uma nova linha caso não haja espaço suficiente na atual
    Para criar um contorno ao redor dos itens *Explicação: Sem o `wrap`, os itens tentam se "esmagar" em uma única linha.*
    8. Qual a função de `justify-content: center;` e `align-items: center;` usados juntos?
    Alinhar o texto à esquerda
    Centralizar perfeitamente um elemento tanto horizontalmente quanto verticalmente
    Esticar o elemento por toda a página
    Criar quatro colunas iguais *Explicação: Essa é a forma mais simples e moderna de centralizar conteúdo no CSS.*
    9. No Flexbox, quem são os "Flex Items"?
    Todos os elementos do site
    Apenas os filhos diretos de um elemento que tenha `display: flex`
    Apenas as imagens e botões
    Somente os textos dentro de parágrafos *Explicação: Somente os descendentes imediatos do container flex tornam-se flexíveis.*
    10. O valor `space-around` no `justify-content` faz o quê?
    Coloca todo o espaço no final da linha
    Distribui espaço igual ao redor de cada item individualmente
    Junta todos os itens no centro
    Remove todo o espaço extra *Explicação: O `space-around` garante que haja espaço nas bordas e entre os itens.*

    Quiz 13 - Introdução

    1. Qual a principal diferença entre Flexbox e CSS Grid?
    Flexbox é mais rápido que o Grid
    Grid só funciona em cores escuras
    Flexbox é para layouts unidimensionais (linha OU coluna) e Grid é bidimensional (linha E coluna)
    Não há diferença, são o mesmo sistema *Explicação: O Grid permite controlar o posicionamento vertical e horizontal simultaneamente, enquanto o Flexbox foca em um eixo por vez.*
    2. Como transformamos um elemento pai em um container de grade?
    `display: flex;`
    `position: grid;`
    `display: grid;`
    `grid: enabled;` *Explicação: O valor `display: grid` ativa todas as funcionalidades do Grid Layout no elemento.*
    3. Para que serve a propriedade `grid-template-columns`?
    Para definir a cor das letras nas colunas
    Para definir a quantidade e a largura das colunas da grade
    Para esconder as colunas do site
    Para criar um menu de navegação *Explicação: Essa propriedade desenha as trilhas verticais da sua grade.*
    4. O que significa a unidade `1fr` no CSS Grid?
    Um pixel fixo
    Uma fração do espaço disponível no container da grade
    Um primeiro plano da imagem
    Uma frequência de atualização da tela *Explicação: O `fr` (fraction) é uma unidade flexível que divide o espaço proporcionalmente.*
    5. Qual a função da expressão `repeat(3, 1fr)`?
    Repetir a mesma imagem 3 vezes
    Criar 3 colunas de larguras iguais (cada uma com 1 fração do espaço)
    Fazer o site atualizar 3 vezes por segundo
    Multiplicar o tamanho da fonte por 3 *Explicação: O `repeat` evita a repetição manual de valores iguais no grid.*
    6. Qual propriedade define o espaçamento entre as células (linhas e colunas) da grade?
    `margin`
    `padding`
    `gap`
    `space` *Explicação: O `gap` (antigamente `grid-gap`) cria o espaçamento interno entre os elementos da grade de forma simples.*
    7. No código `grid-column: 1 / 3;`, o que o item está fazendo?
    Somando 1 com 3
    Ocupando o espaço da coluna 1 até a linha da coluna 3 (ou seja, 2 colunas)
    Mudando para a página 3
    Ficando invisível *Explicação: Essa propriedade define as linhas de início e fim que um item deve ocupar na horizontal.*
    8. O que acontece se definirmos `display: grid;` e não configurarmos colunas ou linhas?
    O site trava
    O elemento desaparece
    Os itens serão empilhados em uma única coluna (grade implícita)
    Os itens ficarão todos uns sobre os outros *Explicação: Por padrão, o grid cria uma linha para cada item se nenhuma coluna for definida.*
    9. Qual o benefício de usar CSS Grid para o layout principal de uma página?
    O site fica mais leve
    Oferece maior controle sobre o alinhamento complexo de grandes áreas (Header, Aside, Footer)
    Deixa o site imune a bugs
    O Google indexa melhor o site *Explicação: O Grid foi feito especificamente para lidar com macro-layouts de forma organizada.*
    10. A propriedade `grid-template-rows` serve para quê?
    Mudar a cor das linhas da grade
    Definir a altura e quantidade de linhas horizontais na grade
    Remover as linhas do cabeçalho
    Girar a tabela em 90 graus *Explicação: Ela define as trilhas horizontais, permitindo especificar alturas fixas ou flexíveis.*

    Quiz 14 - Introdução

    1. O que caracteriza um Web Design Responsivo?
    Um site que carrega apenas em computadores caros
    Um site que adapta seu layout e conteúdo automaticamente ao tamanho da tela do dispositivo
    Um site feito exclusivamente para celulares
    Um site que muda de cor a cada segundo *Explicação: A responsividade garante que o site seja funcional e legível em qualquer resolução.*
    2. Qual a função da meta tag `viewport` no HTML?
    Aumentar a velocidade da internet
    Instruir o navegador a ajustar a largura e a escala do site de acordo com a tela do aparelho
    Inserir vídeos em segundo plano
    Traduzir o site para outros idiomas *Explicação: Sem essa tag, os navegadores de celular tentam "espremer" o site de desktop na tela pequena.*
    3. No CSS, o que usamos para aplicar estilos baseados no tamanho da tela ou tipo de mídia?
    `@action`
    `@media` (Media Queries)
    `@screen`
    `@import` *Explicação: As Media Queries permitem criar regras condicionais para diferentes dispositivos.*
    4. Qual valor de `min-width` é comumente associado ao início do layout para Tablets?
    320px
    768px
    1920px
    100px *Explicação: 768px é o ponto de quebra (breakpoint) padrão para tablets na maioria dos frameworks.*
    5. O que significa a estratégia "Mobile-First"?
    Criar o site no celular usando os dedos
    Proibir o acesso de computadores ao site
    Desenvolver o design e o código CSS primeiro para telas pequenas e depois adaptar para telas maiores
    Fazer propagandas primeiro para usuários de celular *Explicação: Mobile-First prioriza a simplicidade e a performance para dispositivos móveis.*
    6. Qual a principal vantagem do Mobile-First em termos de performance?
    O celular gasta menos bateria
    Dispositivos menores carregam apenas o código essencial, tornando o site mais rápido
    O Google cobra menos para hospedar o site
    Não há vantagem técnica *Explicação: Ao começar pelo simples, evitamos carregar estilos pesados desnecessários em conexões móveis.*
    7. Como o navegador interpreta `@media (max-width: 600px)`?
    Aplica os estilos apenas se a tela for maior que 600px
    Aplica os estilos apenas se a tela tiver no máximo 600px de largura
    Muda a fonte para o tamanho 600
    Reinicia o site quando atinge 600px *Explicação: `max-width` define um limite superior para a aplicação da regra.*
    8. O que é um "Breakpoint" (Ponto de Quebra)?
    Um erro que faz o site parar de funcionar
    O valor de largura específico onde o layout do site se altera para melhor se adaptar
    O momento em que o servidor cai
    O final da página *Explicação: Definimos breakpoints para que o design "quebre" de uma forma organizada entre celular, tablet e desktop.*
    9. Qual ferramenta do navegador ajuda a testar a responsividade durante o desenvolvimento?
    O Histórico de navegação
    O Gerenciador de downloads
    O "Device Mode" (Modo de Dispositivo) nas Ferramentas de Desenvolvedor (F12)
    O botão de Favoritos *Explicação: O modo de dispositivo permite simular resoluções de diversos celulares e tablets.*
    10. Se um site responsivo usa `display: flex;` em um menu, o que geralmente acontece ao mudar de Desktop para Mobile?
    O menu é deletado
    A `flex-direction` muda de `row` (linha) para `column` (coluna) para empilhar os itens
    O texto fica invisível
    O site trava *Explicação: Empilhar elementos verticalmente é a forma mais comum de adaptar menus em telas estreitas.*

    Quiz 15 - Introdução

    1. Para que serve a propriedade `transition` no CSS?
    Para mudar a cor do texto instantaneamente
    Para suavizar a mudança de uma propriedade CSS ao longo do tempo
    Para traduzir o site para outros idiomas
    Para criar um link para outra página *Explicação: A transição permite que efeitos como mudança de cor ou tamanho ocorram gradualmente, melhorando a experiência do usuário.*
    2. No código `transition: background-color 0.5s;`, o que significa `0.5s`?
    A cor do botão
    O tamanho do botão
    A duração da transição (meio segundo)
    O número de vezes que a animação repete *Explicação: O valor em segundos (s) ou milissegundos (ms) define quanto tempo a animação levará para completar.*
    3. Qual propriedade permite girar, inclinar ou aumentar um elemento sem afetar os outros itens ao redor?
    `move`
    `change`
    `transform`
    `shift` *Explicação: O `transform` altera a geometria visual do elemento de forma independente do fluxo do layout.*
    4. Como você faria para aumentar um elemento em 50% do seu tamanho original usando `transform`?
    `transform: big(1.5);`
    `transform: scale(1.5);`
    `transform: rotate(50deg);`
    `transform: size(50%);` *Explicação: A função `scale` (escala) multiplica o tamanho do elemento pelo valor informado.*
    5. O que são os `@keyframes` no CSS?
    São senhas para proteger o código
    São definições dos estágios (quadros) de uma animação complexa
    São extensões para carregar imagens mais rápido
    São seletores de menu *Explicação: Com keyframes, definimos o que acontece em 0%, 50%, 100% (ou qualquer outro ponto) da animação.*
    6. Qual propriedade é usada para aplicar uma animação criada com `@keyframes` a um elemento?
    `transition-name`
    `move-animation`
    `animation`
    `keyframe-start` *Explicação: A propriedade `animation` conecta o nome do keyframe criado ao elemento específico.*
    7. Para que serve o valor `infinite` na propriedade `animation`?
    Para que a animação dure 100 anos
    Para que a animação se repita continuamente sem parar
    Para que a animação seja muito rápida
    Para que a animação ocorra apenas uma vez *Explicação: O `animation-iteration-count: infinite` cria loops eternos.*
    8. O que faz o valor `ease-in-out` em uma transição ou animação?
    Faz a animação parar no meio
    Remove todas as cores
    Controla o ritmo, fazendo a animação começar lenta, acelerar e terminar lenta
    Inverte o sentido da animação *Explicação: É uma função de tempo que torna o movimento mais natural e orgânico.*
    9. Se você quiser que uma imagem gire 360 graus, qual valor usaria no `transform` dentro do keyframe de 100%?
    `rotate(100%)`
    `rotate(360deg)`
    `turn(full)`
    `circle(360)` *Explicação: Usamos `deg` (degrees/graus) para definir a rotação no CSS.*
    10. É uma boa prática de design encher o site de animações piscantes e rápidas por todo lado?
    Sim, isso atrai a atenção de todos
    Não, pode causar distração e até problemas de saúde (como convulsões ou tontura) em alguns usuários
    Sim, pois deixa o site mais pesado e profissional
    Apenas se o site for de uma startup *Explicação: O uso Ético de animações preza pela funcionalidade e conforto visual do usuário.*

    Quiz 16 - Introdução

    1. O que significa o termo "Deploy" no contexto de desenvolvimento web?
    Significa deletar o código do computador
    Significa traduzir o site para o inglês
    Significa publicar o site em um servidor para que ele fique acessível na internet
    Significa mudar a cor de todas as fontes *Explicação: Fazer deploy é colocar seu projeto em "produção", tornando-o público via uma URL.*
    2. Qual serviço gratuito da Microsoft/GitHub é amplamente usado para hospedar sites estáticos (HTML/CSS/JS)?
    GitHub Office
    GitHub Hosting
    GitHub Pages
    GitHub Docs *Explicação: O GitHub Pages permite transformar um repositório de código em um site vivo gratuitamente.*
    3. Para que o GitHub Pages funcione, qual deve ser o nome principal do arquivo HTML da página inicial?
    `home.html`
    `principal.html`
    `index.html`
    `site.html` *Explicação: Servidores web procuram automaticamente pelo arquivo chamado `index.html` como ponto de entrada.*
    4. Na aba de configurações do GitHub Pages, o que a opção "Branch" define?
    A cor do fundo do repositório
    Qual versão/pasta do código deve ser usada para gerar o site público
    O nome do autor do site
    O preço da hospedagem *Explicação: Geralmente selecionamos a branch `main` para que o site reflita a versão principal do nosso código.*
    5. O que deve ser verificado em relação aos caminhos de imagens e arquivos antes de fazer o deploy?
    Se os nomes estão em árabe
    Se os caminhos são relativos e se as pastas foram enviadas junto com o HTML
    Se todas as imagens são quadradas
    Se o arquivo CSS tem mais de 1000 linhas *Explicação: Se os arquivos não forem enviados ou os caminhos estiverem errados (ex: apontando para o seu disco C:), as imagens não carregarão no site público.*
    6. Qual a importância de um checklist final antes de entregar o projeto?
    Ganhar tempo para não trabalhar
    Garantir que não há links quebrados, erros de português ou falhas na acessibilidade
    Fazer o site carregar mais arquivos
    Cumprir uma regra inútil *Explicação: O checklist garante o profissionalismo e a qualidade da entrega final.*
    7. Em um projeto final profissional, por que usamos uma "Header" e um "Footer"?
    Para o site ficar mais pesado
    Para dar estrutura e consistência à navegação e às informações de copyright/contato
    Porque o HTML exige que elas existam para funcionar
    Para esconder propagandas *Explicação: Essas seções semânticas ajudam na organização visual e na localização do usuário.*
    8. O que acontece se você atualizar o seu código no GitHub após o deploy estar pronto?
    O site é deletado
    Você precisa pagar uma taxa
    O GitHub Pages atualiza o site automaticamente com as novas mudanças
    Nada acontece, o site antigo continua lá para sempre *Explicação: O deploy do GitHub Pages é integrado ao repositório; cada atualização no código reflete no site.*
    9. Qual o formato padrão de URL gratuita oferecido pelo GitHub Pages?
    `www.google.com/seusite`
    `seusite.com`
    `nomedeusuario.github.io/nome-do-repositorio`
    `github.com/files/index.html` *Explicação: Este é o padrão de domínio gratuito oferecido para todos os usuários do GitHub.*
    10. Agora que você sabe criar e publicar sites, qual o próximo passo recomendado para um desenvolvedor web?
    Parar de estudar
    Continuar praticando e aprender JavaScript para dar lógica e dinamismo aos sites
    Tentar hackear bancos
    Desinstalar o VS Code *Explicação: O desenvolvimento web é constante evolução; HTML e CSS são as bases, e o JavaScript é o próximo nível.*

    Slides

    Slides 📺

    Material visual para acompanhamento das vídeo-aulas.

    Aula 01 - Introdução à Web 🌐

    O Início da Jornada Front-end

    👋 Bem-vindos!

    Nesta aula, vamos desbravar como a internet realmente funciona.

    Preparem-se para entender o que acontece nos bastidores de cada clique!

    Agenda de Hoje 📅

    1. O que é a Internet?
    2. Modelo Cliente x Servidor
    3. Navegadores (Browsers)
    4. Ferramentas do Desenvolvedor
    5. Estrutura de Projetos
    6. Primeiros Passos Práticos

    1. O que é a Internet? 🌍

    • Uma rede global de computadores interconectados.
    • Infraestrutura física: cabos submarinos, satélites e roteadores.
    • Um sistema para troca de informações.

    🏛️ 2. Modelo Cliente x Servidor

    A base da Web! 🚀

    👤 O Cliente

    • É quem solicita a informação.
    • Exemplos: Celular, Notebook, Tablet.
    • Na prática, o Navegador age como o cliente.

    ⚙️ O Servidor

    • É quem armazena e envia a informação.
    • Computadores de alta performance ligados 24h.
    • Responde às requisições dos clientes.

    💡 Metáfora do Restaurante

    • Você: Cliente
    • Pedido: Requisição (Request)
    • Cozinha: Servidor
    • Prato Pronto: Resposta (Response)

    📊 Fluxo de Comunicação

    sequenceDiagram
    participant C as Cliente (Browser)
    participant S as Servidor

    Note over C: Usuário digita URL
    C->>S: Requisição HTTP
    S-->>C: Resposta (HTML/CSS)
    Note over C: Renderização da página

    🧭 3. Navegadores (Browsers)

    O que eles fazem? 🤔

    • Interpretam o código (HTML, CSS, JS).
    • Renderizam os pixels na tela.
    • Atuam como nossa principal ferramenta de trabalho.

    Os Grandes Navegadores 🏆

    • Chrome: Motor V8, o mais popular.
    • Firefox: Independente, foco em privacidade.
    • Safari: Performance para o ecossistema Apple.
    • Edge: Moderno e baseado em Chromium.

    🛠️ 4. DevTools (Ferramentas)

    Seu melhor amigo! 🤝

    • Inspecione qualquer site.
    • Altere estilos em tempo real.
    • Depure erros de console.

    Como abrir? ⌨️

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

    Aba Elements 🏗️

    • Mostra a estrutura do DOM (HTML).
    • Permite alterar textos e cores visualmente.

    📂 5. Estrutura de Projetos

    Como organizar seus arquivos?

    Pasta do Projeto 📁

    • Um site é um conjunto de arquivos.
    • Tudo deve estar dentro de uma pasta raiz.

    Nomes de Arquivos 📝

    • Use apenas letras minúsculas.
    • Sem espaços (use - ou _).
    • Sem acentos ou caracteres especiais.

    O Arquivo Principal 🏠

    • Todo projeto web começa pelo index.html.
    • Os servidores procuram por este nome primeiro automaticamente.

    🚀 6. Prática Inicial

    • Abrir o Chrome.
    • Acessar um site popular.
    • Abrir o DevTools.
    • Tentar destruir o layout (brincadeira, apenas alterar!).

    Resumo da Aula ✅

    • Internet = Rede de conexões.
    • Web = Requisição e Resposta.
    • Browser = Tradutor de código.
    • DevTools = Raio-X do site.

    Próxima Aula 🏗️

    Documento HTML Mínimo

    Vamos escrever nossa primeira linha de código real!

    Dúvidas? 🤔

    "A web é a maior biblioteca da história, e agora você está aprendendo a escrever os livros."

    Aula 02 - Documento HTML Mínimo 🏗️

    O Esqueleto da Web

    👋 Olá Novamente!

    Hoje vamos aprender a base de tudo o que você vê na internet.

    Vamos sair da teoria e começar a escrever código de verdade! 💻

    Agenda de Hoje 📅

    1. O que é HTML?
    2. Anatomia de uma Tag
    3. O "Boilerplate" (ESTRUTURA)
    4. Cabeça vs Corpo
    5. Metadados
    6. Nossa Primeira Página

    1. O que é HTML? 🤔

    • HyperText Markup Language.
    • É uma linguagem de Marcação, não de programação.
    • Define o significado e a estrutura do conteúdo.

    🏗️ Como o HTML funciona?

    • Ele usa "Tags" para identificar elementos.
    • Exemplo: "Isso aqui é um título", "Isso é um parágrafo".

    🦴 2. Anatomia de uma Tag

    Estrutura Básica 🧱

    <tag> Conteúdo </tag>
    - <tag>: Abertura - Conteúdo: O que aparece na tela - </tag>: Fechamento (Obrigatório na maioria!)

    Atributos 🏷️

    Dão informações extras às tags.

    <p class="destaque"> Texto </p>
    - class: Nome do atributo - "destaque": Valor do atributo

    📜 3. A Estrutura Mínima

    Todo site começa assim:

    O Início 🚀

    <!DOCTYPE html>
<html lang="pt-br">
    <!-- Tudo aqui dentro -->
</html>
    - <!DOCTYPE html>: Define a versão (HTML5). - <html>: O elemento pai (raiz).

    🧠 4. A Cabeça ()

    • Informações para o Navegador / Google.
    • Não aparecem na área branca do site.
    • Configurações, Título da aba, Estilos.

    👤 5. O Corpo ()

    • Onde a mágica acontece! ✨
    • Tudo o que o usuário vê e interage.
    • Títulos, Imagens, Parágrafos, Botões.

    🧩 Hierarquia Visual

    graph TD
    HTML[html] --> HEAD[head - Configurações]
    HTML --> BODY[body - Conteúdo Visível]
    HEAD --> META[meta]
    HEAD --> TITLE[title]
    BODY --> H1[h1]
    BODY --> P[p]

    🔍 5. Metadados Importantes

    UTF-8 🔠

    <meta charset="UTF-8">
    - Garante que acentos (á, é, í) funcionem. - Sem isso, teríamos símbolos estranhos!

    Viewport 📱

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    - Adapta o site para telas de celulares. - Essencial para a Web moderna.

    Title 🏷️

    <title>Meu Primeiro Site</title>
    - O nome que fica na aba do navegador.

    💻 6. Mão na Massa!

    Atalho Ninja no VS Code 🥷

    1. Crie um arquivo .html.
    2. Digite ! e aperte Enter.
    3. O VS Code gera toda a estrutura para você! ⚡

    Resumo da Aula ✅

    • HTML é Marcação.
    • Tags têm abertura e fechamento.
    • <head> = Configurações.
    • <body> = Conteúdo Real.

    Desafio de Hoje 🚀

    1. Criar sua pasta de projeto.
    2. Criar o index.html.
    3. Escrever seu nome em um <h1>.
    4. Abrir no navegador!

    Próxima Aula 🧱

    Estrutura e Semântica

    Vamos aprender a organizar o site profissionalmente!

    Dúvidas? 🤔

    "O código é a poesia do desenvolvedor. Comece a escrever seus primeiros versos hoje."

    Aula 03 - Estrutura e Semântica 🧱

    Organizando a Web com Significado

    👋 Olá!

    Hoje vamos aprender a diferença entre um site "amador" e um site profissional.

    A palavra mágica de hoje é: Semântica. 🧠

    Agenda de Hoje 📅

    1. O que é HTML Semântico?
    2. Tags de Estrutura
    3. O Conteúdo (Section vs Article)
    4. Hierarquia de Títulos (H1-H6)
    5. Acessibilidade e SEO
    6. Prática Profissional

    1. O que é Semântica? 🧐

    • Na linguística: o estudo do significado.
    • No HTML: escolher a tag que descreve o que o conteúdo é.

    Antes vs Depois 🔄

    • Antes: Tudo era <div> (sem significado).
    • Hoje: Cada parte tem seu nome correto (<header>, <main>, <footer>).

    🚀 Por que usar Semântica?

    • SEO: O Google entende melhor seu site.
    • Acessibilidade: Leitores de tela para cegos funcionam melhor.
    • Manutenção: Código muito mais fácil de ler.

    🏗️ 2. Tags de Estrutura

    Header (Cabeçalho) 顶部

    • Fica no topo da página ou de seções.
    • Contém logos, títulos e navegação.

    Nav (Navegação) 🧭

    • Bloco que contém os links principais do site.
    • Menu superior ou lateral.

    Main (Conteúdo Principal) 🏠

    • O "recheio" exclusivo da sua página.
    • REGRA: Apenas UM <main> por página!
    • Final da página.
    • Direitos autorais, contato, redes sociais.

    📊 Arquitetura Visual

    graph TD
    BODY[body] --> H[header]
    BODY --> M[main]
    BODY --> F[footer]
    H --> N[nav]

    📰 3. Section vs Article

    A grande dúvida!

    Section (Seção) 📦

    • Um agrupamento temático de conteúdo.
    • Geralmente tem um título próprio.
    • Ex: "Nossos Preços", "Sobre a Empresa".

    Article (Artigo) 📝

    • Conteúdo que faz sentido sozinho.
    • Pode ser "reutilizado" em outro lugar.
    • Ex: Post de blog, notícia, comentário.

    🔝 4. Hierarquia de Títulos

    H1 ao H6

    A Regra de Ouro 👑

    • H1: O título mais importante. Use apenas um!
    • H2-H6: Subtítulos organizados por importância.

    Não use para Estilo! ❌

    • Títulos definem a estrutura, não o tamanho da letra.
    • Para mudar tamanho e cor, usamos CSS futuramente.

    📊 Exemplo de Hierarquia

    • H1: Receitas Iniciais
      • H2: Sobremesas
        • H3: Pudim de Leite
        • H3: Mousse de Chocolate
      • H2: Pratos Salgados

    👨‍💻 5. Código Real

    <header>
  <h1>Logo</h1>
  <nav>Menu</nav>
</header>
<main>
  <article>Conteúdo</article>
</main>
<footer>Rodapé</footer>

    Resumo da Aula ✅

    • Semântica = Significado.
    • Tags Estruturais = Header, Main, Footer.
    • Conteúdo = Section e Article.
    • Títulos = Escada lógica (H1 -> H6).

    Próxima Aula 🔗

    Vamos aprender a conectar o mundo com Hyperlinks!

    Dúvidas? 🤔

    "Um código bem estruturado é como um livro bem escrito: qualquer um consegue entender a história."

    Aula 04 - Textos e Links 🔗

    Conectando Ideias e Páginas

    👋 Olá!

    Hoje vamos aprender as tags que dão volume e conexão à Web.

    Sem os links, a internet seria apenas um monte de páginas isoladas. 🕸️

    Agenda de Hoje 📅

    1. Parágrafos e Formatação
    2. Quebras de Linha
    3. Listas Não Ordenadas (UL)
    4. Listas Ordenadas (OL)
    5. A Tag de Âncora (Links)
    6. Atributos href e target

    📝 1. Parágrafos

    A Tag

    • Define um bloco de texto.
    • O navegador adiciona espaço antes e depois. 
    <p>Este é um parágrafo!</p>

    💡 Curiosidade

    O HTML ignora múltiplos espaços em branco no código.

    Para forçar uma quebra de linha: use <br>.

    📋 2. Listas

    Para organizar qualquer coisa!

    Listas Não Ordenadas (UL) 🔹

    <ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
    - Mostra marcadores (bolinhas). - UL = Unordered List.

    Listas Ordenadas (OL) 🔢

    <ol>
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>
    - Mostra números (1, 2, 3...). - OL = Ordered List.

    O Item da Lista (LI) 📑

    • LI = List Item.
    • Deve estar sempre dentro de uma <ul> ou <ol>.

    📊 Estrutura de Listas

    graph TD
    UL[ul - Unordered] --> LI1[li - Item 1]
    UL --> LI2[li - Item 2]
    OL[ol - Ordered] --> LI3[li - Passo 1]
    OL --> LI4[li - Passo 2]

    O coração da Web!

    A Tag ⚓

    • A = Anchor (Âncora).
    • Permite "pular" de uma página para outra.

    Atributo href 📍

    • É o destino do link. 
    <a href="https://google.com">Ir ao Google</a>

    Atributo target 🎯

    • Define onde o link será aberto.
    • _blank: Abre em uma nova aba.
    • _self: Abre na mesma aba (padrão).
    • Apontam para outro domínio.
    • Sempre comece com https://.
    • Apontam para arquivos dentro do seu projeto. 
    <a href="contato.html">Fale Comigo</a>

    🕵️‍♂️ Boas Práticas

    • Texto do link deve ser descritivo.
    • Ruim: "Clique aqui"
    • Bom: "Veja nossa galeria de fotos"

    💻 4. Exemplo Completo

    <p>Visite meus amigos:</p>
<ul>
  <li>
    <a href="https://github.com" target="_blank">
       GitHub
    </a>
  </li>
</ul>

    Resumo da Aula ✅

    • <p> para textos.
    • <ul> e <ol> para listas.
    • <a> com href para links.
    • target="_blank" para novas abas.

    Próxima Aula 🖼️

    Imagens e SVG

    Vamos deixar o nosso site visualmente incrível!

    Dúvidas? 🤔

    "A Web não é sobre páginas, é sobre as conexões entre elas."

    Aula 05 - Imagens e SVG 🖼️

    Dando Vida e Cor ao seu Site

    👋 Olá!

    Um site sem imagens é como um livro sem capa.

    Hoje vamos aprender a inserir e otimizar conteúdos visuais! 📸

    Agenda de Hoje 📅

    1. A Tag
    2. Atributos Fundamentais
    3. Formatos: Raster vs Vetor
    4. O Poder do SVG
    5. Caminhos de Arquivos
    6. Performance e Otimização

    📸 1. A Tag

    • Tag auto-contida (não fecha).
    • Depende essencialment de atributos. 
    <img src="foto.jpg" alt="Descrição">

    Atributo src 🔗

    • Source (Origem).
    • É o caminho onde a imagem está salva.

    Atributo alt 🗣️

    • Alternative Text.
    • Para leitores de tela (acessibilidade).
    • Para o Google (SEO).
    • Importante: Se a imagem não carregar, o texto aparece.

    📂 2. Formatos de Imagem

    Raster (Pixels) 🟦

    • Feitas de pequenos pontos.
    • Perdem qualidade se aumentarem muito.
    • Ex: JPG, PNG, WebP.

    Vetor (Matemática) 📈

    • Feitas de fórmulas geométricas.
    • Qualidade infinita!
    • Ex: SVG.

    Qual escolher? 🤔

    • JPG: Fotos complexas.
    • PNG: Transparência.
    • WebP: Versão moderna e leve de tudo.
    • SVG: Logos e ícones.

    ⚡ 3. O Mundo SVG

    O que é? 🎨

    • Scalable Vector Graphics.
    • É código Puro! 💻
    • Pode ser editado com CSS.

    Exemplo de Código SVG

    <svg height="100" width="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

    📊 Vantagem Visual

    graph LR
    Raster[Raster - Pixels] -- Aumentar --> Blur[Fica Embaçado]
    Vector[Vetor - SVG] -- Aumentar --> Sharp[Continua Nítido]

    🛣️ 4. Organização de Arquivos

    Onde colocar as imagens?

    Pasta de Assets 📁

    • Nunca deixe imagens soltas na raiz.
    • Crie uma pasta assets ou imagens.

    Caminhos Relativos 📍

    • Se a imagem está na pasta assets: 
    <img src="assets/perfil.webp">

    🚀 5. Performance

    • Imagens pesadas matam o site. 💀
    • Use ferramentas de compressão.
    • Prefira WebP sempre que possível.

    Resumo da Aula ✅

    • <img> precisa de src e alt.
    • alt é obrigatório para acessibilidade.
    • SVG é código e não perde qualidade.
    • Organize imagens em pastas.

    Próxima Aula 📊

    Tabelas

    Vamos aprender a organizar dados de forma estruturada!

    Dúvidas? 🤔

    "Uma imagem vale mais que mil palavras, mas uma imagem otimizada vale mil visitas."

    Aula 06 - Tabelas 📊

    Organizando Dados de Forma Estruturada

    👋 Olá!

    Hoje vamos aprender a organizar informações complexas.

    Pense em planilhas, notas, horários e preços. Tudo isso vive em Tabelas! 🏗️

    Agenda de Hoje 📅

    1. Quando usar Tabelas?
    2. Estrutura Básica (table, tr, td)
    3. Cabeçalhos (th)
    4. Semântica (thead, tbody, tfoot)
    5. Legendas (caption)
    6. Boas Práticas

    🚫 1. O que NÃO fazer

    • Regra de Ouro: Não use tabelas para criar o layout do site.
    • Para posicionar menus e colunas, usamos CSS.

    ✅ O que fazer

    • Use tabelas apenas para dados tabulares.
    • Ex: Uma tabela de preços de produtos.

    🧱 2. Estrutura Básica

    Como construir o esqueleto?

    O Recipiente 📦

    <table>
  <!-- Conteúdo vai aqui -->
</table>
    - Define o início e o fim da tabela.

    A Linha (TR) 📏

    • TR = Table Row. 

    <tr>  </tr>
    - Cada <tr> cria uma nova linha horizontal.

    A Célula (TD) 🧊

    • TD = Table Data. 

    <td> Dado </td>
    - É onde o conteúdo realmente fica.

    🔝 3. Cabeçalhos (TH)

    • TH = Table Header. 

    <th> Nome da Coluna </th>
    - Define o título da coluna. - Por padrão, fica em negrito e centralizado.

    📊 Exemplo Visual

    graph TD
    TABLE[table] --> R1[tr - Linha 1]
    R1 --> TH1[th - Título 1]
    R1 --> TH2[th - Título 2]
    TABLE --> R2[tr - Linha 2]
    R2 --> TD1[td - Dado 1]
    R2 --> TD2[td - Dado 2]

    🧠 4. Semântica Avançada

    Divisão profissional da tabela.

    thead e tbody 📂

    • thead: Envolve o cabeçalho.
    • tbody: Envolve o conteúdo principal.
    • Ajuda o navegador a entender a divisão dos dados.

    tfoot (Rodapé) 🦶

    • Usado para totais ou observações ao final da tabela. 
    <tfoot>
  <tr><td>Total</td><td>100,00</td></tr>
</tfoot>

    🏷️ 5. Caption (Legenda)

    • Dá um título à tabela.
    • Deve ser a primeira tag dentro do <table>. 
    <caption>Minha Grade de Horários</caption>

    🗺️ Hierarquia Completa

    graph TD
    T[table] --> C[caption]
    T --> TH[thead]
    T --> TB[tbody]
    T --> TF[tfoot]

    🕵️‍♂️ Resumo da Aula ✅

    • <table> é o container.
    • <tr> cria linhas.
    • <td> dados, <th> títulos.
    • thead, tbody e tfoot dão ordem semântica.

    💻 6. Prática de Hoje

    Criar uma tabela simples de 3 colunas e 3 linhas com seus tópicos favoritos de estudo.

    Próxima Aula 📝

    Formulários

    Vamos aprender a receber dados do usuário de forma interativa!

    Dúvidas? 🤔

    "Dados sem estrutura são apenas ruído. Tabelas transformam ruído em informação."

    Aula 07 - Formulários 📝

    Interatividade e Coleta de Dados

    👋 Olá!

    Hoje vamos aprender como o usuário "fala" com o nosso site.

    Cadastros, logins, buscas e contatos: tudo isso é possível graças aos Formulários! 📥

    Agenda de Hoje 📅

    1. A Tag
    2. Rótulos (
    3. Campos de Entrada ()
    4. Tipos de Input (HTML5)
    5. Botões de Envio
    6. Agrupamento (Fieldset)

    📥 1. O Recipiente

    • Envolve todos os campos do formulário.
    • Gerencia o envio dos dados. 
    <form action="/enviar" method="POST">
  <!-- Campos aqui -->
</form>

    Atributos Principais 📍

    • action: Destino dos dados.
    • method: Como os dados viajam (GET ou POST).

    🙋‍♂️ 2. Rótulos (

    • Identificam o que o usuário deve digitar.
    • Aumentam a área de clique.
    • Acessibilidade: Vital para cegos.

    Conexão Label + Input 🔗

    <label for="email">Seu E-mail:</label>
<input type="email" id="email">
    - O for do label deve ser igual ao id do input.

    ⌨️ 3. Campos ()

    • A peça fundamental do formulário.
    • É uma tag auto-contida (não fecha).

    O Poder do type="?" 🎛️

    • O atributo type muda completamente o comportamento.
    • text: Texto simples.
    • password: Oculta caracteres.

    🚀 4. Tipos HTML5 Modernos

    • email: Valida @ automaticamente.
    • date: Abre um calendário nativo.
    • color: Abre um seletor de cores.
    • number: Abre o teclado numérico no celular.

    📊 Fluxo de Interação

    graph LR
    U[Usuário] --> L[Clica no Label]
    L --> I[Foca no Input]
    I --> B[Clica no Submit]
    B --> F[Processamento]

    🖱️ 5. Botões de Ação

    <button type="submit">Cadastrar</button>
<button type="reset">Limpar</button>
    - submit: Envia o formulário. - reset: Limpa todos os campos.

    📦 6. Agrupamento de Campos

    Fieldset e Legend 📋

    • fieldset: Cria uma moldura visual.
    • legend: Dá um título a essa moldura. 
    <fieldset>
  <legend>Dados de Acesso</legend>
  <!-- Inputs aqui -->
</fieldset>

    🕵️‍♂️ Boas Práticas

    • Use o atributo required para campos obrigatórios.
    • Use placeholder para dar dicas temporárias.
    • Sempre conecte Labels e Inputs via ID.

    Resumo da Aula ✅

    • <form> agrupa tudo.
    • <label> dá nome e acessibilidade.
    • <input> recebe os dados.
    • type define a função do campo.

    💻 7. Prática de Hoje

    Criar um formulário de login com campos de "E-mail" e "Senha", e um botão de "Entrar".

    Próxima Aula 🏛️

    Projeto HTML

    Vamos juntar TUDO o que aprendemos e criar uma página real!

    Dúvidas? 🤔

    "Formulários são o diálogo entre o seu código e o coração (ou os dedos) do usuário."

    Aula 08 - Projeto HTML 🏛️

    Consolidando o Conhecimento em HTML5

    👋 Olá!

    Chegou o grande dia do nosso primeiro projeto completo.

    Hoje vamos transformar tudo o que aprendemos em um site real e estruturado! 🚀

    Agenda de Hoje 📅

    1. O Que Vamos Construir?
    2. Planejamento (Sitemap)
    3. O Esqueleto do Site
    4. Seções Semânticas
    5. Checklist de Qualidade
    6. Mão na Massa!

    🏛️ 1. O Projeto

    Uma Landing Page 📄

    • Uma página de destino focada em um objetivo.
    • Vamos criar a estrutura de uma Startup de Tecnologia.

    O que será avaliado? ✅

    • Semântica (Tags corretas).
    • Acessibilidade (alt, labels).
    • Organização do código.
    • Hierarquia de títulos.

    📐 2. Planejamento

    O Sitemap 📊

    graph TD
    H[header] --> N[nav]
    M[main] --> S1[section: Hero]
    M --> S2[section: Serviços]
    M --> S3[section: Contato]
    F[footer] --> Info[Info / Social]

    🏗️ 3. O Esqueleto (Boilerplate)

    <!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Landing Page Tech</title>
</head>
<body>
  <!-- Conteúdo -->
</body>
</html>

    🔝 4. O Cabeçalho (Header)

    • Logo (h1).
    • Menu (nav + ul + li + a).

    🏠 5. Conteúdo Principal (Main)

    Hero Section ⚡

    • O "cartão de visitas" do site.
    • Título impactante (h1 ou h2).
    • Descrição clara.

    Serviços (Table) 📊

    • Use uma tabela para mostrar planos ou serviços.
    • Colunas: Serviço, Descrição, Valor.

    Contato (Form) 📥

    • Nome, E-mail e Mensagem.
    • Botão de envio (Submit).

    🧩 6. Checklist de Acessibilidade

    Imagens 🖼️

    • Todas têm o atributo alt?
    • Descrição clara para quem não vê?

    Formulários 📝

    • Todo input tem um <label> correspondente?
    • O id está batendo com o for?

    Títulos 👑

    • Existe apenas um h1?
    • A ordem h2 -> h3 -> h4 está lógica?

    👨‍💻 7. Dicas de Ouro

    • Comente seu código para se organizar.
    • Recue o código (indentação) corretamente.
    • Use nomes de arquivos em minúsculas.

    Resumo do Módulo ✅

    • Fundamentos (Browser, Cliente/Servidor).
    • Estrutura (Boilerplate).
    • Semântica (Tags de significado).
    • Elementos (Listas, Links, Imagens, Tabelas, Forms).

    🚀 Desafio Final

    Implementar o index.html completo seguindo todas as normas semânticas.

    Próxima Aula 🎨

    Início do Módulo 3: CSS3

    Onde vamos dar estilo, cor e forma a esse esqueleto que criamos hoje!

    Dúvidas? 🤔

    "A estrutura é a alma da Web. O estilo é o seu corpo emocional."

    Aula 09 - Introdução ao CSS 🖌️

    Dando Cor e Vida à Estrutura

    👋 Olá!

    Até agora, nossos sites eram apenas "esqueletos" brancos e pretos.

    Hoje, vamos aprender a pintar e decorar a Web! 🎨

    Agenda de Hoje 📅

    1. O que é CSS?
    2. Sintaxe (Regras)
    3. Onde escrever CSS?
    4. Seletores de Tag, Classe e ID
    5. Propriedades Iniciais
    6. O Conceito de Cascata

    🖌️ 1. O que é CSS?

    • Cascading Style Sheets.
    • É uma linguagem de Estilo.
    • HTML = O que o site TEM.
    • CSS = Como o site PARECE.

    🏗️ Analogia do Carro

    • HTML: Chassi, motor, rodas.
    • CSS: Cor da pintura, estofado, design dos faróis.

    🧱 2. Sintaxe Básica

    Como escrevemos CSS?

    A Regra CSS 📜

    seletor {
  propriedade: valor;
}
    - Seletor: Escolhe o elemento HTML. - Propriedade: O que mudar (cor, tamanho). - Valor: O resultado desejado.

    📍 3. Onde Colocar o CSS?

    Inline Style ❌

    • Direto no elemento. 
      <p style="color: blue;">Texto</p>
    • Difícil de manter. Evite!

    Internal Style 📂

    • No topo do HTML (<style>).
    • Bom para testes rápidos.

    External Style ✅

    • Arquivo separado .css.
    • O padrão da indústria. 
    <link rel="stylesheet" href="style.css">

    🎯 4. Seletores Básicos

    Como selecionar quem mudar?

    Por Tag 🏷️

    • Seleciona todas as tags iguais.
    p { color: grey; }

    Por Classe ( . ) 👥

    • Seleciona elementos com a mesma class.
    .azul { color: blue; }

    Por ID ( # ) 👤

    • Seleciona um único elemento específico.
    #logo { width: 100px; }

    📊 Hierarquia de Seletores

    graph TD
    TAG[Tag - Geral] --> CLASS[Classe - Grupo]
    CLASS --> ID[ID - Único/Específico]

    🌊 5. O Conceito de Cascata

    • As regras são lidas de cima para baixo.
    • Regras mais específicas vencem as gerais.
    • O último estilo lido geralmente é o que fica.

    🌈 6. Primeiras Cores

    • color: Muda a cor do texto.
    • background-color: Muda o fundo. 
    body {
  background-color: lightblue;
  color: navy;
}

    💻 7. Prática Inicial

    1. Criar style.css.
    2. Conectar ao HTML.
    3. Mudar o fundo do site.
    4. Colorir os parágrafos.

    Resumo da Aula ✅

    • CSS = Estilo.
    • Seletor { Propriedade: Valor }.
    • Use arquivos externos.
    • Classes para grupos, IDs para um.

    Próxima Aula 📦

    Box Model

    Vamos entender como as caixas se comportam na tela!

    Dúvidas? 🤔

    "O design não é apenas o que parece e o que se sente. O design é como funciona."

    Aula 10 - Box Model 📦

    A Ciência das Caixas no CSS

    👋 Olá!

    Você já se perguntou por que um botão fica maior quando mudamos o espaçamento?

    Tudo no CSS é uma caixa, e hoje vamos aprender a medi-las! 📏

    Agenda de Hoje 📅

    1. O Conceito de Caixa
    2. Content (Conteúdo)
    3. Padding (Preenchimento)
    4. Border (Borda)
    5. Margin (Margem)
    6. Box Sizing (O Segredo)

    📦 1. Tudo é uma Caixa

    • Cada tag HTML (h1, p, div, img) é um retângulo invisível.
    • O CSS permite controlar cada camada desse retângulo.

    🍔 As Camadas da Caixa

    Content (Conteúdo) 📝

    • É o texto, imagem ou vídeo dentro da tag.
    • Definido pelas propriedades width e height.

    Padding (Preenchimento) ☁️

    • Espaço interno entre o conteúdo e a borda.
    • "Respiro" para o texto não encostar nas paredes.

    Border (Borda) 🧱

    • A linha que envolve o conteúdo e o preenchimento.
    • Pode ter cor, estilo e espessura.

    Margin (Margem) ⬅️➡️

    • Espaço externo entre a caixa atual e as vizinhas.
    • Serve para afastar um elemento do outro.

    📊 Anatomia Visual

    graph TD
    M[Margin - Distância Externa] --> B[Border - Moldura]
    B --> P[Padding - Respiro Interno]
    P --> C[Content - Texto/Imagem]

    🧱 2. Propriedades na Prática

    Margin e Padding 📏

    .caixa {
  margin: 20px;
  padding: 10px;
}
    - Você pode definir cada lado: margin-top, padding-left, etc.

    Bordas Estilosas ✨

    .caixa {
  border: 2px solid black;
}
    - 2px: Espessura. - solid: Estilo (contínuo). - black: Cor.

    ⚠️ 3. O Problema do Tamanho

    • Por padrão, o navegador SOMA tudo!
    • Largo: 300px
      • Padding: 20px (cada lado)
    • = Total: 340px! 😱

    🛡️ 4. Box Sizing

    A propriedade que salva vidas!

    * {
  box-sizing: border-box;
}
    - Faz com que o Padding e a Borda fiquem dentro da largura definida. - 300px será SEMPRE 300px.

    👨‍💻 5. Exemplo Completo

    .card {
  width: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: border-box;
}

    Resumo da Aula ✅

    • Content = O presente.
    • Padding = Plástico bolha.
    • Border = A caixa de papelão.
    • Margin = Distância entre caixas.
    • Border-box é essencial!

    Próxima Aula 📍

    Display e Posicionamento

    Vamos aprender a mover essas caixas por toda a tela!

    Dúvidas? 🤔

    "Dominar o Box Model é 50% do caminho para ser um mestre no CSS."

    Aula 11 - Display e Posicionamento 📍

    Onde e Como as Coisas Ficam na Tela

    👋 Olá!

    Até agora, as caixas ficavam uma abaixo da outra.

    Hoje vamos aprender a quebrar as regras de gravidade da Web! 🚀

    Agenda de Hoje 📅

    1. Propriedade Display
    2. Block vs Inline
    3. Elementos Invisíveis (none)
    4. Posicionamento Static e Relative
    5. O Poder do Absolute
    6. Elementos Fixos (Fixed e Sticky)

    🎛️ 1. Propriedade Display

    • Define como o elemento interage com seus vizinhos.

    Block (Bloco) 🧱

    • Ocupa toda a largura disponível.
    • Empilha elementos um abaixo do outro.
    • Ex: div, p, h1.

    Inline (Em linha) ⛓️

    • Ocupa apenas o espaço do conteúdo.
    • Não aceita width ou height.
    • Ex: span, a, strong.

    Inline-Block ⚖️

    • O melhor dos dois mundos.
    • Fica na mesma linha, mas aceita largura e altura!

    Display: none 👻

    • O elemento desaparece da tela.
    • Não ocupa espaço algum no layout.

    🧭 2. Posicionamento (Position)

    Static (Padrão) 🗼

    • É o fluxo natural do HTML.
    • Top, Left, Bottom e Right não funcionam aqui.

    Relative 📍

    • Move o elemento sem tirar ele do "lugar original".
    • Funciona como um "desvio".

    Absolute 🚀

    • O elemento flutua!
    • Move-se em relação ao seu pai (que não seja static).
    • Sai do fluxo normal da página.

    Fixed 📌

    • Fica preso na janela do navegador.
    • Não se move mesmo que você role a página.
    • Útil para botões de chat ou suporte.

    Sticky (Grudento) 🍯

    • O elemento "gruda" quando atinge o topo.
    • Sensacional para menus de navegação!

    📊 Resumo do Position

    graph LR
    Static[Static - Normal]
    Relative[Relative - Move]
    Absolute[Absolute - Flutua]
    Fixed[Fixed - Gruda na Tela]
    Sticky[Sticky - Gruda no Topo]

    🔢 3. z-index

    • Define quem fica "na frente".
    • Números maiores = Mais perto de você.

    🗺️ 4. Coordenadas

    Sempre use: - top / bottom - left / right 

    .alerta {
  position: fixed;
  top: 0;
  right: 0;
}

    Resumo da Aula ✅

    • Display define como o elemento se comporta (bloco ou linha).
    • Position define se ele sai ou não do fluxo.
    • Relative = Move de leve.
    • Absolute = Sai do fluxo.
    • Fixed/Sticky = Fixação.

    Próxima Aula 📐

    Flexbox

    O fim de todos os seus problemas de alinhamento!

    Dúvidas? 🤔

    "Posicionar elementos é como jogar xadrez: cada peça tem seu movimento e sua importância no tabuleiro."

    Aula 12 - Flexbox 📐

    Alinhamento Flexível e Moderno

    👋 Olá!

    Você já tentou centralizar um elemento e ele simplesmente se recusou?

    Hoje, seus problemas de alinhamento acabam com o Flexbox! 🚀

    Agenda de Hoje 📅

    1. O que é Flexbox?
    2. Flex Container vs Flex Items
    3. O Eixo Principal (Justify)
    4. O Eixo Secundário (Align)
    5. A Direção (Row vs Column)
    6. Quebra de Linha (Wrap)

    📐 1. O que é Flexbox?

    • Modelo de layout de uma dimensão.
    • Excelente para alinhar itens em linha ou coluna.
    • Substitui técnicas antigas e complicadas.

    📦 2. A Hierarquia Flex

    Flex Container (Pai) 👨

    • É quem recebe o comando display: flex;.
    • Ele controla como seus filhos se comportam.

    Flex Items (Filhos) 🧒

    • São os elementos diretos dentro do container.
    • Tornam-se automaticamente "flexíveis".

    📊 Estrutura Flex

    graph TD
    P[Flex Container - display: flex] --> I1[Item 1]
    P --> I2[Item 2]
    P --> I3[Item 3]

    ↔️ 3. Justify Content

    Alinhamento no Eixo Principal.

    Opções do Justify 🎛️

    • flex-start: No início.
    • center: No meio.
    • flex-end: No final.

    Espaçamento Inteligente 🧠

    • space-between: Espaço entre eles.
    • space-around: Espaço ao redor.

    ↕️ 4. Align Items

    Alinhamento no Eixo Secundário (Vertical).

    Opções do Align 🎛️

    • flex-start: No topo.
    • center: No meio vertical.
    • flex-end: Na base.
    • stretch: Estica para ocupar tudo.

    📐 5. Centralização Perfeita

    O "Santo Graal" do CSS!

    .pai {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

    🔄 6. Flex Direction

    • Muda a direção dos itens.
    • row: Linha (padrão).
    • column: Coluna (empilhados).

    🌯 7. Flex Wrap

    • Define se os itens podem pular de linha.
    • nowrap: Tudo esmagado em uma linha (padrão).
    • wrap: Pula de linha se não houver espaço.

    🕵️‍♂️ Resumo da Aula ✅

    • display: flex ativa o modo flexível.
    • justify-content para horizontal (geralmente).
    • align-items para vertical (geralmente).
    • flex-direction para mudar de linha para coluna.

    Próxima Aula 🏁

    Grid Layout

    Para quando você precisar de um layout em duas dimensões (X e Y)!

    Dúvidas? 🤔

    "Flexbox é como plasticina: você pode esticar, alinhar e moldar o layout como quiser."

    Aula 13 - Grid Layout 🏁

    O Poder das Grades no CSS

    👋 Olá!

    Se o Flexbox era sobre linhas, o Grid é sobre o tabuleiro inteiro!

    Hoje vamos aprender a dividir a tela em áreas profissionais. 🏗️

    Agenda de Hoje 📅

    1. Flexbox vs Grid
    2. Criando o Grid Container
    3. Colunas e Linhas
    4. A Unidade FR (Fração)
    5. A Função Repeat
    6. Espaçamento (Gap)

    📐 1. Flexbox vs Grid

    • Flexbox: Unidimensional (Linha OU Coluna).
    • Grid: Bidimensional (Linha E Coluna ao mesmo tempo).

    Quando usar qual? 🤔

    • Flexbox: Conteúdo flexível (menus, cards).
    • Grid: Estrutura da página (cabeçalho, lateral, centro).

    📦 2. Grid Container

    .container {
  display: grid;
}
    - Define que o pai agora é uma grade.

    🧱 3. Colunas e Linhas

    Definindo Colunas 🏛️

    .grid {
  grid-template-columns: 200px 400px;
}
    - Cria duas colunas com larguras fixas.

    Definindo Linhas 📏

    .grid {
  grid-template-rows: 100px auto;
}
    - A primeira linha tem 100px e a segunda se adapta ao conteúdo.

    📊 Estrutura da Grade

    graph TD
    PARENT[Grid Container] --> C1[Coluna 1]
    PARENT --> C2[Coluna 2]
    Note over C1,C2: grid-template-columns

    🍰 4. A Unidade FR

    • FR = Fraction (Fração).
    • Divide o espaço livre proporcionalmente. 

    .grid {
  grid-template-columns: 1fr 2fr;
}
    - A segunda coluna será o DOBRO da primeira.

    🔄 5. Função Repeat

    • Para não ficar repetindo valores. 
    /* Antigo */
grid-template-columns: 1fr 1fr 1fr;

/* Moderno */
grid-template-columns: repeat(3, 1fr);

    🕳️ 6. Gap (O Respiro)

    • Espaço entre as células.
    • Sem precisar de margin nos itens! 
    .grid {
  gap: 20px;
}

    🎯 7. Posicionando Itens

    Diga onde o item deve morar.

    .topo {
  grid-column: 1 / 4; /* Ocupa 3 colunas */
}

    🕵️‍♂️ Resumo da Aula ✅

    • display: grid inicia a grade.
    • grid-template-columns cria as colunas.
    • fr é a unidade de flexibilidade.
    • gap cria o espaçamento interno da grade.

    Próxima Aula 📱

    Responsividade

    Vamos fazer nosso site se adaptar magicamente a qualquer tela!

    Dúvidas? 🤔

    "Grid Layout é como desenhar em papel quadriculado: você decide exatamente onde cada peça do quebra-cabeça deve estar."

    Aula 14 - Responsividade 📱

    Um Site Para Todos os Tamanhos

    👋 Olá!

    Hoje em dia, a maioria das pessoas acessa a web pelo celular.

    Seu site está pronto para caber na palma da mão? 📲

    Agenda de Hoje 📅

    1. O que é Responsividade?
    2. Meta Tag Viewport
    3. Media Queries
    4. Breakpoints (Pontos de Quebra)
    5. Estratégia Mobile-First

    📱 1. O que é Responsividade?

    • É a capacidade do site se adaptar ao tamanho da tela.
    • Layouts flexíveis que mudam conforme o dispositivo.

    O Problema do Zoom 🔍

    • Sites antigos ficavam minúsculos no celular.
    • O usuário tinha que dar "pinça" para ler.
    • Hoje, isso é inaceitável!

    🖼️ 2. Meta Tag Viewport

    O tradutor de telas!

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    - Diz ao navegador: "Use a largura real do aparelho". - Sem ela, as Media Queries não funcionam bem.

    📡 3. Media Queries

    O "SE" do CSS.

    Como funciona? 🤔

    "SE a tela for maior que 800px, mude a cor para azul."

    @media (min-width: 800px) {
  body { background: blue; }
}

    📊 Estrutura de Adaptação

    graph LR
    C[Celular - 1 Coluna] -- min-width: 768px --> T[Tablet - 2 Colunas]
    T -- min-width: 1024px --> D[Desktop - 3 Colunas]

    🏗️ 4. Mobile-First

    O Jeito Moderno! 🚀

    Primeiro o Celular 🤳

    1. Escreva o CSS básico pensando no celular.
    2. Use Media Queries para adicionar colunas no PC.
    3. Resultado: Site mais rápido e leve.

    📍 5. Breakpoints Comuns

    • 576px: Celulares grandes.
    • 768px: Tablets (iPad).
    • 1024px: Desktops e Laptops.
    • 1200px: Telas grandes.

    💻 6. Exemplo de Layout Flexível

    /* Celular */
.alinhamento {
  display: flex;
  flex-direction: column;
}

/* Desktop */
@media (min-width: 768px) {
  .alinhamento {
    flex-direction: row;
  }
}

    Resumo da Aula ✅

    • Responsividade = Adaptação.
    • Viewport tag é obrigatória.
    • Media Queries filtram o estilo por tamanho.
    • Mobile-First: comece pelo pequeno.

    Próxima Aula ✨

    Animações e Transições

    Vamos dar movimento e suavidade ao nosso design!

    Dúvidas? 🤔

    "Um site não deve ser um objeto estático, mas um ecossistema que se adapta ao ambiente do usuário."

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

    Dando Movimento ao seu Design

    👋 Olá!

    A Web não precisa ser estática.

    Pequenos movimentos podem transformar um site comum em uma experiência incrível! 🎬

    Agenda de Hoje 📅

    1. O que são Transições?
    2. Manipulando o Tempo
    3. Transformações (Girar, Escalar)
    4. O Mundo das Animações
    5. Keyframes (Quadros-Chave)
    6. Interatividade Ética

    🧚 1. Transições (Transitions)

    • Permitem que mudanças ocorram de forma suave.
    • Sem o efeito "pisca-pisca" das mudanças instantâneas.

    Como aplicar? 🛠️

    .botao {
  transition: all 0.3s ease;
}

.botao:hover {
  background: red;
}
    - all: Todas as propriedades. - 0.3s: Tempo de duração. - ease: Ritmo da animação.

    📐 2. Transformações (Transforms)

    Mude a forma e a posição sem quebrar o layout!

    Girar (Rotate) 🔄

    img:hover {
  transform: rotate(15deg);
}

    Aumentar (Scale) 🔍

    button:hover {
  transform: scale(1.1);
}

    Mover (Translate) 📍

    div:hover {
  transform: translateY(-5px);
}

    🎬 3. Animações Complexas

    Para quando a transição não é suficiente.

    @keyframes 🖼️

    • Definimos os passos da animação. 
    @keyframes pulsar {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

    Aplicando a Animação 🏷️

    .icone {
  animation: pulsar 2s infinite;
}
    - pulsar: Nome que criamos. - 2s: Tempo de um ciclo. - infinite: Nunca para!

    📊 Fluxo de Loop

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

    🤝 4. Interatividade

    • Use animações para dar feedback ao usuário.
    • Um botão que aumenta levemente confirma o clique.
    • Um ícone que gira indica carregamento (loading).

    🕵️‍♂️ Boas Práticas

    • Menos é mais! Não sature o site de movimento.
    • Use animações curtas (entre 0.1s e 0.5s).
    • Respeite quem tem sensibilidade ao movimento.

    Resumo da Aula ✅

    • transition suaviza mudanças.
    • transform altera a geometria.
    • @keyframes cria movimentos contínuos.
    • Interatividade melhora a experiência.

    Próxima Aula 🚢

    Projeto Final + Deploy

    Onde vamos publicar nosso trabalho para o mundo ver!

    Dúvidas? 🤔

    "Animação é a alma da interface. Use-a para guiar o olhar, não para distrair o usuário."

    Aula 16 - Projeto Final + Deploy 🚢

    Do Código Local para o Mundo Inteiro

    👋 Olá!

    Chegamos ao final da nossa jornada!

    Hoje você vai parar de ser alguém que "estuda código" e se tornar alguém que "publica sites". 🚀

    Agenda de Hoje 📅

    1. O Grande Projeto Final
    2. Checklist de Qualidade
    3. O que é Deploy?
    4. GitHub Pages Step-by-Step
    5. Encerramento e Próximos Passos

    🏗️ 1. O Projeto Final

    O Desafio 🎯

    • Construir uma Landing Page Completa.
    • Deve ser Responsiva (Mobile e PC).
    • Deve usar Flexbox e Grid.
    • Deve ter pelo menos uma animação interativa.

    Temas Sugeridos 💡

    • Seu Portfólio Pessoal.
    • Site para uma Petshop ou Pizzaria.
    • Página de captura para um App.

    ✅ 2. Checklist de Qualidade

    Antes de publicar, verifique:

    • [ ] HTML Semântico (header, main, footer).
    • [ ] Meta Viewport presente.
    • [ ] Imagens com alt.
    • [ ] Form com labels e ids.
    • [ ] CSS em arquivo externo.

    ☁️ 3. O que é Deploy?

    • É o ato de hospedar seu site em um servidor.
    • Torna seu site acessível via um Link (URL).

    🚀 4. GitHub Pages

    A forma mais rápida, gratuita e profissional de hospedar sites estáticos.

    Passo a Passo 🗺️

    1. Criar novo repositório no GitHub.
    2. Fazer o Upload dos arquivos (index.html, style.css, assets/).
    3. Ir em Settings -> Pages.
    4. Salvar na Branch main.

    📊 Fluxo do Deploy

    graph LR
    Dev[Desenvolvedor] --> GH[GitHub Repo]
    GH --> Build[Build Automático]
    Build --> Web[Site no Ar!]

    https://usuario.github.io/repositorio - Compartilhe com o mundo!

    🎉 5. Conclusão do Curso

    • Módulo 1: Fundamentos da Web.
    • Módulo 2: HTML5 Semântico e Completo.
    • Módulo 3: CSS3 Moderno, Layout e Animação.

    Próximos Passos? 🛣️

    • Aprofundar em JavaScript.
    • Conhecer Frameworks (React, Vue).
    • Estudar Back-end (Node, Python).

    💻 Mão na Massa!

    Finalize seu código, suba para o GitHub e comemore seu primeiro deploy!

    Dúvidas Finais? 🤔

    "O código que você escreve e guarda na sua máquina não ajuda ninguém. O código que você publica tem o poder de mudar o mundo."

    Configuração

    Ambientes de Desenvolvimento 🛠️

    Guias para configurar seu computador para o desenvolvimento mobile.

    Setup 01: Android Studio 🤖

    O Android Studio é a IDE oficial para o desenvolvimento Android.

    1. Requisitos de Sistema

    • RAM: Mínimo 8GB (Sugerido 16GB+).
    • Espaço: Mínimo 10GB para IDE + SDKs.
    • Processador: Intel Core i5 ou equivalente.

    2. Instalação

    1. Acesse o site oficial: developer.android.com/studio.
    2. Baixe a versão mais recente para o seu Sistema Operacional.
    3. Execute o instalador e escolha a opção "Standard" na configuração inicial.

    3. Configurando o SDK

    • Após a instalação, vá em Settings > Languages & Frameworks > Android SDK.
    • Certifique-se de que a versão mais recente do Android (estável) esteja instalada.
    • Na aba SDK Tools, instale o "Android Emulator" e o "Intel x86 Emulator Accelerator (HAXM)" se estiver no Windows com Intel.

    4. Criando um Emulador (AVD)

    1. Abra o Device Manager.
    2. Clique em Create Device.
    3. Escolha um dispositivo (ex: Pixel 7).
    4. Selecione uma imagem de sistema (ex: Level 34 - Android 14).
    5. Finalize e clique no "Play" para iniciar o celular virtual.

    5. Solução de Problemas ⚠️

    • VT-x is disabled: Você precisa habilitar a virtualização na BIOS do seu computador.
    • Studio muito lento: Adicione a pasta do projeto e as pastas do Android SDK nas exclusões do seu Antivírus.

    Setup 02: Xcode (iOS Foundation) 🍎

    O Xcode é a ferramenta necessária para compilar e testar apps iOS.

    [!IMPORTANT] O Xcode requer um computador Mac (macOS).

    1. Instalação

    1. Abra a App Store no seu Mac.
    2. Pesquise por Xcode.
    3. Clique em Obter/Instalar.
    4. Após o download, abra o Xcode para carregar os componentes adicionais do macOS.

    2. Configurando Simuladores

    1. Vá em Settings > Platforms.
    2. Verifique se o componente "iOS" está baixado.
    3. Se não estiver, clique em "GET" para baixar a versão mais estável.

    3. Comandos de Linha (CLI)

    Para que ferramentas de automação funcionem, você precisa instalar os Command Line Tools: 

    xcode-select --install

    4. Opcional: CocoaPods

    Muitos projetos iOS antigos ainda usam CocoaPods para dependências: 

    sudo gem install cocoapods

    5. Solução de Problemas ⚠️

    • Espaço em Disco: O Xcode é muito grande. Garanta pelo menos 40GB de espaço livre para ele e os simuladores.
    • Build Lento: Use simuladores de modelos mais simples (ex: iPhone SE) para poupar memória RAM se necessário.

    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)

    • [x] Definição Syllabus (16 Aulas)
    • [x] Estrutura Backend-first com integração SPA
    • [x] Configuração MkDocs Material

    ✅ Fase 2: Conteúdo Base (Concluído)

    • [x] Criação das 16 Aulas (Markdown)
    • [x] Criação dos 16 Quizzes (HTML)
    • [x] Criação dos 16 Conjuntos de Exercícios
    • [x] Criação dos 16 Slides (RevealJS)

    ✅ Fase 3: Projetos e UX (Concluído)

    • [x] Definição dos 16 Projetos práticos
    • [x] Documentação Swagger/OpenAPI integrada
    • [x] Diagramação Mermaid de arquitetura de serviços

    🚀 Fase 4: Lançamento e Manutenção

    • [x] 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).

    Versão para Impressão

    Esta página foi gerada automaticamente para impressão.