🌟 A Jornada Dev: Curso Completo Domine HTML5, JavaScript + Tailwind do Zero ao Full Stack Criativo! 🚀

👋 Boas-vindas, Futuro(a) Mestre(a) da Programação!

Você está prestes a embarcar numa jornada completa que vai transformar ideias em realidade, utilizando as tecnologias mais poderosas do desenvolvimento web moderno: HTML5, JavaScript e Tailwind CSS.

Domine lógica de programação, crie aplicações matemáticas, simule fenômenos da Física, manipule textos como um expert, construa jogos incríveis para navegador e finalize com um site institucional profissional e responsivo – tudo com as melhores práticas de desenvolvimento e uma documentação clara para acelerar sua curva de aprendizado.

Prepare o café, ajuste sua cadeira e vamos codar! ☕💻

BAIXE O VS CODE STUDIO AQUI PARA VOCÊ FAZER OS EXEMPLOS AQUI DO CURSO E AMPLIAR OS SEUS CONHECIMENTOS.

📚 Módulo 0: Estrutura Básica de um Projeto HTML5

Antes de mergulharmos nos exemplos práticos, é essencial dominar a estrutura fundamental de um documento HTML5. Todo o conteúdo que você criará estará dentro de uma base semelhante a esta:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título da Sua Aplicação</title>
  <!-- Incluindo Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Personalizações complementares, se necessário */
  </style>
</head>
<body class="bg-gray-100 font-sans antialiased">

  <!-- TODO: Seu conteúdo principal e interativo aqui -->

  <script>
    // Seu código JavaScript puro (Vanilla JS)
  </script>
</body>
</html>

Melhor prática: Sempre organize seu código com a <!DOCTYPE html> no início para garantir que o navegador interprete corretamente o HTML5, e utilize o CDN do Tailwind para acelerar a estilização sem sair do HTML.

Agora sim, vamos mergulhar nos módulos do curso!

📚 Módulo 1: Fundamentos da Lógica de Programação e Algoritmos

A lógica de programação é a alma do código. Sem ela, um sistema não passa de linhas soltas sem direção. Aqui vamos dominar estruturas de controle, funções, manipulação de arrays e muito mais.

🧩 Exemplo 1: Par ou Ímpar (Estrutura Condicional e Função)

Este exemplo usa o operador módulo % para verificar se um número é par ou ímpar. Essa lógica é útil para alternar comportamentos e fazer validações rápidas.

<div class="max-w-md mx-auto bg-white p-6 rounded-xl shadow-md">
  <h2 class="text-2xl font-bold mb-4">🔢 Par ou Ímpar?</h2>
  <input type="number" id="numero" placeholder="Digite um número" class="w-full p-2 border rounded mb-2">
  <button onclick="verificarParImpar()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Verificar</button>
  <p id="resultadoPI" class="mt-4 font-semibold"></p>
</div>

<script>
function verificarParImpar() {
  const num = parseInt(document.getElementById('numero').value);
  const ehPar = (n) => n % 2 === 0;
  const resultado = ehPar(num) ? `✅ ${num} é PAR!` : `❌ ${num} é ÍMPAR!`;
  document.getElementById('resultadoPI').innerText = resultado;
}
</script>

<div class="max-w-md mx-auto bg-white p-6 rounded-xl shadow-md">
  <h2 class="text-2xl font-bold mb-4">🔢 Par ou Ímpar?</h2>
  <input type="number" id="numero" placeholder="Digite um número" class="w-full p-2 border rounded mb-2">
  <button onclick="verificarParImpar()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Verificar</button>
  <p id="resultadoPI" class="mt-4 font-semibold"></p>
</div>

<script>
function verificarParImpar() {
  const num = parseInt(document.getElementById('numero').value);
  const ehPar = (n) => n % 2 === 0;
  const resultado = ehPar(num) ? `✅ ${num} é PAR!` : `❌ ${num} é ÍMPAR!`;
  document.getElementById('resultadoPI').innerText = resultado;
}
</script>

🧩 Exemplo 2: Número Primo (Laço de Repetição e Validação)

Este algoritmo itera até a raiz quadrada do número para verificar se ele possui divisores além de 1 e ele mesmo, uma excelente prática para otimização de desempenho.

<label class="block font-medium">Digite um número:</label>
<input type="number" id="numeroPrimo" class="w-full p-2 border rounded">
<button onclick="verificarPrimo()" class="bg-green-500 text-white px-4 py-2 rounded">Verificar Primo</button>
<p id="resultadoPrimo" class="text-lg font-bold mt-4"></p>

<script>
function verificarPrimo() {
  let n = parseInt(document.getElementById('numeroPrimo').value);
  if (isNaN(n)) return;
  
  const ePrimo = (num) => {
    if (num < 2) return false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
      if (num % i === 0) return false;
    }
    return true;
  };
  
  const msg = ePrimo(n) ? `${n} é um número primo! 🎉` : `${n} não é primo. 😢`;
  document.getElementById('resultadoPrimo').innerText = msg;
}
</script>

<label class="block font-medium">Digite um número:</label>
<input type="number" id="numeroPrimo" class="w-full p-2 border rounded">
<button onclick="verificarPrimo()" class="bg-green-500 text-white px-4 py-2 rounded">Verificar Primo</button>
<p id="resultadoPrimo" class="text-lg font-bold mt-4"></p>

<script>
function verificarPrimo() {
  let n = parseInt(document.getElementById('numeroPrimo').value);
  if (isNaN(n)) return;
  
  const ePrimo = (num) => {
    if (num < 2) return false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
      if (num % i === 0) return false;
    }
    return true;
  };
  
  const msg = ePrimo(n) ? `${n} é um número primo! 🎉` : `${n} não é primo. 😢`;
  document.getElementById('resultadoPrimo').innerText = msg;
}
</script>

🧩 Exemplo 3: Palíndromo – Algoritmo Clássico de Validação de Strings

Um algoritmo muito comum em entrevistas técnicas que verifica se uma palavra pode ser lida da mesma forma de trás para frente, utilizando dois ponteiros (uma técnica fundamental de manipulação de strings).

<input type="text" id="palavra" placeholder="Digite uma palavra" class="w-full p-2 border rounded">
<button onclick="verificarPalindromo()" class="bg-purple-600 text-white px-4 py-2 rounded">Verificar Palíndromo</button>
<p id="resultadoPalindromo" class="mt-4 font-bold"></p>

<script>
function verificarPalindromo() {
  const palavra = document.getElementById('palavra').value.trim().toLowerCase();
  let esquerda = 0;
  let direita = palavra.length - 1;
  let ehPalindromo = true;
  
  while (esquerda < direita) {
    if (palavra[esquerda] !== palavra[direita]) {
      ehPalindromo = false;
      break;
    }
    esquerda++;
    direita--;
  }
  
  const msg = ehPalindromo && palavra.length > 0 ? `✨ "${palavra}" é um palíndromo! ✨` : `"${palavra}" não é um palíndromo.`;
  document.getElementById('resultadoPalindromo').innerText = msg;
}
</script>

<input type="text" id="palavra" placeholder="Digite uma palavra" class="w-full p-2 border rounded">
<button onclick="verificarPalindromo()" class="bg-purple-600 text-white px-4 py-2 rounded">Verificar Palíndromo</button>
<p id="resultadoPalindromo" class="mt-4 font-bold"></p>

<script>
function verificarPalindromo() {
  const palavra = document.getElementById('palavra').value.trim().toLowerCase();
  let esquerda = 0;
  let direita = palavra.length - 1;
  let ehPalindromo = true;
  
  while (esquerda < direita) {
    if (palavra[esquerda] !== palavra[direita]) {
      ehPalindromo = false;
      break;
    }
    esquerda++;
    direita--;
  }
  
  const msg = ehPalindromo && palavra.length > 0 ? `✨ "${palavra}" é um palíndromo! ✨` : `"${palavra}" não é um palíndromo.`;
  document.getElementById('resultadoPalindromo').innerText = msg;
}
</script>

🧩 Exemplo 4: Algoritmo de Ordenação de Array (`sort` com critério personalizado)

Arrays são a base da organização de dados. Este exemplo mostra como ordenar números de forma crescente e decrescente utilizando a função sort() com um critério de comparação.

<button onclick="ordenarCrescente()" class="bg-indigo-500 text-white px-3 py-1 rounded">Crescente</button>
<button onclick="ordenarDecrescente()" class="bg-indigo-500 text-white px-3 py-1 rounded">Decrescente</button>
<p id="arrayOriginal" class="mt-2">Array Original: [5, 2, 9, 1, 5, 6]</p>
<p id="arrayOrdenado" class="font-bold"></p>

<script>
const numeros = [5, 2, 9, 1, 5, 6];

function ordenarCrescente() {
  const crescente = [...numeros].sort((a, b) => a - b);
  document.getElementById('arrayOrdenado').innerText = `Ordenado (Crescente): [${crescente.join(', ')}]`;
}

function ordenarDecrescente() {
  const decrescente = [...numeros].sort((a, b) => b - a);
  document.getElementById('arrayOrdenado').innerText = `Ordenado (Decrescente): [${decrescente.join(', ')}]`;
}
</script>

<button onclick="ordenarCrescente()" class="bg-indigo-500 text-white px-3 py-1 rounded">Crescente</button>
<button onclick="ordenarDecrescente()" class="bg-indigo-500 text-white px-3 py-1 rounded">Decrescente</button>
<p id="arrayOriginal" class="mt-2">Array Original: [5, 2, 9, 1, 5, 6]</p>
<p id="arrayOrdenado" class="font-bold"></p>

<script>
const numeros = [5, 2, 9, 1, 5, 6];

function ordenarCrescente() {
  const crescente = [...numeros].sort((a, b) => a - b);
  document.getElementById('arrayOrdenado').innerText = `Ordenado (Crescente): [${crescente.join(', ')}]`;
}

function ordenarDecrescente() {
  const decrescente = [...numeros].sort((a, b) => b - a);
  document.getElementById('arrayOrdenado').innerText = `Ordenado (Decrescente): [${decrescente.join(', ')}]`;
}
</script>

🧩 Exemplo Criativo do Módulo: Gerador de Histórias Aleatórias

Vamos aplicar todos os conceitos de lógica para criar um gerador que mistura arrays, funções e manipulação de strings – perfeito para treinar criatividade e lógica juntos!

<button onclick="gerarHistoria()" class="bg-pink-600 text-white px-6 py-2 rounded-full shadow">✨ Gerar História Aleatória ✨</button>
<div id="historia" class="mt-6 p-4 bg-pink-50 rounded-lg italic text-gray-700"></div>

<script>
function gerarHistoria() {
  const sujeitos = ['O programador', 'A cientista', 'O gato', 'A inteligência artificial'];
  const verbos = ['codou', 'debugou', 'criou', 'otimizou'];
  const objetos = ['um algoritmo incrível', 'uma interface responsiva', 'um jogo em JavaScript', 'um site com Tailwind'];
  const finais = ['e salvou o mundo.', 'e ganhou 1 MILHÃO de acessos.', 'e foi parar no GitHub Stars.', 'e deixou o código impecável.'];
  
  const historia = `${sujeitos[Math.floor(Math.random() * sujeitos.length)]} 
    ${verbos[Math.floor(Math.random() * verbos.length)]} 
    ${objetos[Math.floor(Math.random() * objetos.length)]} 
    ${finais[Math.floor(Math.random() * finais.length)]}`;
  
  document.getElementById('historia').innerText = historia;
}
</script>

<button onclick="gerarHistoria()" class="bg-pink-600 text-white px-6 py-2 rounded-full shadow">✨ Gerar História Aleatória ✨</button>
<div id="historia" class="mt-6 p-4 bg-pink-50 rounded-lg italic text-gray-700"></div>

<script>
function gerarHistoria() {
  const sujeitos = ['O programador', 'A cientista', 'O gato', 'A inteligência artificial'];
  const verbos = ['codou', 'debugou', 'criou', 'otimizou'];
  const objetos = ['um algoritmo incrível', 'uma interface responsiva', 'um jogo em JavaScript', 'um site com Tailwind'];
  const finais = ['e salvou o mundo.', 'e ganhou 1 MILHÃO de acessos.', 'e foi parar no GitHub Stars.', 'e deixou o código impecável.'];
  
  const historia = `${sujeitos[Math.floor(Math.random() * sujeitos.length)]} 
    ${verbos[Math.floor(Math.random() * verbos.length)]} 
    ${objetos[Math.floor(Math.random() * objetos.length)]} 
    ${finais[Math.floor(Math.random() * finais.length)]}`;
  
  document.getElementById('historia').innerText = historia;
}
</script>

📐 Módulo 2: Matemática Aplicada com JavaScript + Tailwind

A matemática está em todo lugar no desenvolvimento: desde a criação de jogos até a análise de dados. Neste módulo vamos implementar 4 exemplos práticos e visualmente atraentes.

🧮 Exemplo 1: Fórmula de Bhaskara (Equação do 2º Grau)

O que vamos aprender: Manipulação de entradas input, conversão de valores, validação de números e exibição condicional de resultados. A Fórmula de Bhaskara é um clássico da matemática que nos permite resolver qualquer equação do segundo grau: ax² + bx + c = 0.

Regras importantes: Se delta < 0, não há raízes reais; se delta = 0, há apenas uma raiz; se delta > 0, existem duas raízes reais e distintas.

<div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-2xl shadow-lg max-w-md mx-auto">
  <h3 class="text-xl font-bold text-center">📐 Fórmula de Bhaskara</h3>
  <div class="space-y-3">
    <div><label>Coefficient a:</label><input type="number" id="a" class="w-full p-2 border rounded"></div>
    <div><label>Coefficient b:</label><input type="number" id="b" class="w-full p-2 border rounded"></div>
    <div><label>Coefficient c:</label><input type="number" id="c" class="w-full p-2 border rounded"></div>
    <button onclick="calcularBhaskara()" class="w-full bg-blue-600 text-white p-2 rounded-xl font-bold">Calcular Raízes</button>
    <div id="resultadoBhaskara" class="text-center p-3 bg-white rounded-lg font-mono"></div>
  </div>
</div>

<script>
function calcularBhaskara() {
  const a = parseFloat(document.getElementById('a').value);
  const b = parseFloat(document.getElementById('b').value);
  const c = parseFloat(document.getElementById('c').value);
  
  if (a === 0) {
    document.getElementById('resultadoBhaskara').innerHTML = "⚠️ 'a' não pode ser zero (equação de 2º grau inválida).";
    return;
  }
  
  const delta = (b * b) - (4 * a * c);
  if (delta < 0) {
    document.getElementById('resultadoBhaskara').innerHTML = `⚠️ Delta = ${delta.toFixed(2)} (negativo). A equação não possui raízes reais.`;
    return;
  }
  
  const sqrtDelta = Math.sqrt(delta);
  const x1 = (-b + sqrtDelta) / (2 * a);
  const x2 = (-b - sqrtDelta) / (2 * a);
  
  if (delta === 0) {
    document.getElementById('resultadoBhaskara').innerHTML = `✅ Raiz única: x = ${x1.toFixed(2)} | Δ = ${delta.toFixed(2)}`;
  } else {
    document.getElementById('resultadoBhaskara').innerHTML = `✅ x' = ${x1.toFixed(2)} <br> ✅ x'' = ${x2.toFixed(2)} | Δ = ${delta.toFixed(2)}`;
  }
}
</script>

<div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-2xl shadow-lg max-w-md mx-auto">
  <h3 class="text-xl font-bold text-center">📐 Fórmula de Bhaskara</h3>
  <div class="space-y-3">
    <div><label>Coefficient a:</label><input type="number" id="a" class="w-full p-2 border rounded"></div>
    <div><label>Coefficient b:</label><input type="number" id="b" class="w-full p-2 border rounded"></div>
    <div><label>Coefficient c:</label><input type="number" id="c" class="w-full p-2 border rounded"></div>
    <button onclick="calcularBhaskara()" class="w-full bg-blue-600 text-white p-2 rounded-xl font-bold">Calcular Raízes</button>
    <div id="resultadoBhaskara" class="text-center p-3 bg-white rounded-lg font-mono"></div>
  </div>
</div>

<script>
function calcularBhaskara() {
  const a = parseFloat(document.getElementById('a').value);
  const b = parseFloat(document.getElementById('b').value);
  const c = parseFloat(document.getElementById('c').value);
  
  if (a === 0) {
    document.getElementById('resultadoBhaskara').innerHTML = "⚠️ 'a' não pode ser zero (equação de 2º grau inválida).";
    return;
  }
  
  const delta = (b * b) - (4 * a * c);
  if (delta < 0) {
    document.getElementById('resultadoBhaskara').innerHTML = `⚠️ Delta = ${delta.toFixed(2)} (negativo). A equação não possui raízes reais.`;
    return;
  }
  
  const sqrtDelta = Math.sqrt(delta);
  const x1 = (-b + sqrtDelta) / (2 * a);
  const x2 = (-b - sqrtDelta) / (2 * a);
  
  if (delta === 0) {
    document.getElementById('resultadoBhaskara').innerHTML = `✅ Raiz única: x = ${x1.toFixed(2)} | Δ = ${delta.toFixed(2)}`;
  } else {
    document.getElementById('resultadoBhaskara').innerHTML = `✅ x' = ${x1.toFixed(2)} <br> ✅ x'' = ${x2.toFixed(2)} | Δ = ${delta.toFixed(2)}`;
  }
}
</script>

🧮 Exemplo 2: Conversor de Temperatura (Celsius ↔ Fahrenheit)

Conceitos abordados: A conversão entre escalas termométricas utiliza fórmulas lineares e é perfeita para praticar eventos de input em tempo real.

<div class="max-w-md mx-auto bg-white p-5 rounded-xl shadow">
  <h3 class="font-bold">🌡️ Conversor de Temperatura</h3>
  <input type="number" id="celsius" placeholder="Graus Celsius" class="w-full p-2 border rounded mt-2">
  <p class="mt-2">Fahrenheit: <span id="fahrenheit" class="font-bold text-red-600">--</span> °F</p>
</div>

<script>
const celsiusInput = document.getElementById('celsius');
const fahrenheitSpan = document.getElementById('fahrenheit');

celsiusInput.addEventListener('input', () => {
  const celsius = parseFloat(celsiusInput.value);
  if (isNaN(celsius)) {
    fahrenheitSpan.innerText = '--';
    return;
  }
  const fahrenheit = (celsius * 9/5) + 32;
  fahrenheitSpan.innerText = fahrenheit.toFixed(2);
});
</script>

<div class="max-w-md mx-auto bg-white p-5 rounded-xl shadow">
  <h3 class="font-bold">🌡️ Conversor de Temperatura</h3>
  <input type="number" id="celsius" placeholder="Graus Celsius" class="w-full p-2 border rounded mt-2">
  <p class="mt-2">Fahrenheit: <span id="fahrenheit" class="font-bold text-red-600">--</span> °F</p>
</div>

<script>
const celsiusInput = document.getElementById('celsius');
const fahrenheitSpan = document.getElementById('fahrenheit');

celsiusInput.addEventListener('input', () => {
  const celsius = parseFloat(celsiusInput.value);
  if (isNaN(celsius)) {
    fahrenheitSpan.innerText = '--';
    return;
  }
  const fahrenheit = (celsius * 9/5) + 32;
  fahrenheitSpan.innerText = fahrenheit.toFixed(2);
});
</script>

🧮 Exemplo 3: Números Aleatórios (Dado virtual)

Simular um dado de 6 faces é uma excelente forma de trabalhar com Math.random() e criar pequenas interações divertidas.

<button onclick="rolarDado()" class="bg-yellow-500 text-white px-6 py-2 rounded-full">🎲 Rolar Dado</button>
<p id="resultadoDado" class="mt-3 text-3xl font-black text-yellow-700">?</p>

<script>
function rolarDado() {
  const resultado = Math.floor(Math.random() * 6) + 1;
  document.getElementById('resultadoDado').innerText = resultado;
}
</script>

<button onclick="rolarDado()" class="bg-yellow-500 text-white px-6 py-2 rounded-full">🎲 Rolar Dado</button>
<p id="resultadoDado" class="mt-3 text-3xl font-black text-yellow-700">?</p>

<script>
function rolarDado() {
  const resultado = Math.floor(Math.random() * 6) + 1;
  document.getElementById('resultadoDado').innerText = resultado;
}
</script>

🧮 Exemplo 4: Calculadora de Média Ponderada

Ideal para cenários do mundo real – como calcular a média final de um estudante ou o desempenho de um funcionário, cada nota com seu respectivo peso.

<div class="bg-gray-50 p-5 rounded-xl">
  <p class="font-bold">📊 Média Ponderada</p>
  <div class="grid grid-cols-2 gap-2">
    <input type="number" id="nota1" placeholder="Nota 1" class="p-2 border rounded"><input type="number" id="peso1" placeholder="Peso 1" class="p-2 border rounded">
    <input type="number" id="nota2" placeholder="Nota 2" class="p-2 border rounded"><input type="number" id="peso2" placeholder="Peso 2" class="p-2 border rounded">
    <input type="number" id="nota3" placeholder="Nota 3" class="p-2 border rounded"><input type="number" id="peso3" placeholder="Peso 3" class="p-2 border rounded">
  </div>
  <button onclick="calcularMediaPonderada()" class="mt-3 bg-green-600 text-white px-4 py-2 rounded">Calcular Média</button>
  <p id="mediaFinal" class="mt-3 font-bold text-center"></p>
</div>

<script>
function calcularMediaPonderada() {
  let somaNumerador = 0, somaPesos = 0;
  for (let i = 1; i <= 3; i++) {
    const nota = parseFloat(document.getElementById(`nota${i}`).value);
    const peso = parseFloat(document.getElementById(`peso${i}`).value);
    if (!isNaN(nota) && !isNaN(peso) && peso > 0) {
      somaNumerador += nota * peso;
      somaPesos += peso;
    }
  }
  const media = somaPesos > 0 ? (somaNumerador / somaPesos).toFixed(2) : "Dados inválidos.";
  document.getElementById('mediaFinal').innerHTML = `Média Ponderada: ${media}`;
}
</script>

<div class="bg-gray-50 p-5 rounded-xl">
  <p class="font-bold">📊 Média Ponderada</p>
  <div class="grid grid-cols-2 gap-2">
    <input type="number" id="nota1" placeholder="Nota 1" class="p-2 border rounded"><input type="number" id="peso1" placeholder="Peso 1" class="p-2 border rounded">
    <input type="number" id="nota2" placeholder="Nota 2" class="p-2 border rounded"><input type="number" id="peso2" placeholder="Peso 2" class="p-2 border rounded">
    <input type="number" id="nota3" placeholder="Nota 3" class="p-2 border rounded"><input type="number" id="peso3" placeholder="Peso 3" class="p-2 border rounded">
  </div>
  <button onclick="calcularMediaPonderada()" class="mt-3 bg-green-600 text-white px-4 py-2 rounded">Calcular Média</button>
  <p id="mediaFinal" class="mt-3 font-bold text-center"></p>
</div>

<script>
function calcularMediaPonderada() {
  let somaNumerador = 0, somaPesos = 0;
  for (let i = 1; i <= 3; i++) {
    const nota = parseFloat(document.getElementById(`nota${i}`).value);
    const peso = parseFloat(document.getElementById(`peso${i}`).value);
    if (!isNaN(nota) && !isNaN(peso) && peso > 0) {
      somaNumerador += nota * peso;
      somaPesos += peso;
    }
  }
  const media = somaPesos > 0 ? (somaNumerador / somaPesos).toFixed(2) : "Dados inválidos.";
  document.getElementById('mediaFinal').innerHTML = `Média Ponderada: ${media}`;
}
</script>

⚛️ Módulo 3: Física Computacional com JavaScript

Traga a Física para a vida com simulações interativas! Vamos criar 4 exemplos que demonstram o movimento uniforme, a queda livre, o lançamento oblíquo e a energia cinética – tudo com visualizações em tempo real.

🚀 Exemplo 1: Simulador de Queda Livre (Velocidade vs Tempo)

O que vamos aprender: Aplicar fórmula de aceleração gravitacional v = g * t diretamente no DOM, variando a gravidade para diferentes planetas e mostrando como a velocidade aumenta linearmente com o tempo.

<div class="space-y-3">
  <input type="number" id="tempo" placeholder="Tempo (segundos)" class="w-full p-2 border rounded">
  <button onclick="calcularVelocidade()" class="bg-indigo-600 text-white px-4 py-2 rounded">Calcular Velocidade</button>
  <p id="velocidadeRes" class="font-mono text-center"></p>
</div>

<script>
function calcularVelocidade() {
  const g = 9.81;
  const t = parseFloat(document.getElementById('tempo').value);
  if (isNaN(t) || t < 0) {
    document.getElementById('velocidadeRes').innerHTML = "Insira um tempo válido (em segundos).";
    return;
  }
  const v = g * t;
  document.getElementById('velocidadeRes').innerHTML = `🌍 Aceleração da gravidade = ${g} m/s²<br>⏱️ Após ${t} s, velocidade = ${v.toFixed(2)} m/s (${(v*3.6).toFixed(2)} km/h)`;
}
</script>

<div class="space-y-3">
  <input type="number" id="tempo" placeholder="Tempo (segundos)" class="w-full p-2 border rounded">
  <button onclick="calcularVelocidade()" class="bg-indigo-600 text-white px-4 py-2 rounded">Calcular Velocidade</button>
  <p id="velocidadeRes" class="font-mono text-center"></p>
</div>

<script>
function calcularVelocidade() {
  const g = 9.81;
  const t = parseFloat(document.getElementById('tempo').value);
  if (isNaN(t) || t < 0) {
    document.getElementById('velocidadeRes').innerHTML = "Insira um tempo válido (em segundos).";
    return;
  }
  const v = g * t;
  document.getElementById('velocidadeRes').innerHTML = `🌍 Aceleração da gravidade = ${g} m/s²<br>⏱️ Após ${t} s, velocidade = ${v.toFixed(2)} m/s (${(v*3.6).toFixed(2)} km/h)`;
}
</script>

🚀 Exemplo 2: Calculadora de Energia Cinética

Relembrando a famosa fórmula Ec = (m * v²) / 2, um exemplo fundamental para aplicações que envolvem energia e movimento.

<input type="number" id="massa" placeholder="Massa (kg)" class="w-full p-2 border rounded mb-2">
<input type="number" id="velocidadeEC" placeholder="Velocidade (m/s)" class="w-full p-2 border rounded mb-2">
<button onclick="calcularEnergia()" class="bg-teal-600 text-white px-4 py-2 rounded">Calcular Energia Cinética</button>
<p id="energiaResult" class="mt-3 font-bold text-center text-teal-700"></p>

<script>
function calcularEnergia() {
  const m = parseFloat(document.getElementById('massa').value);
  const v = parseFloat(document.getElementById('velocidadeEC').value);
  if (isNaN(m) || isNaN(v) || m <= 0 || v < 0) {
    document.getElementById('energiaResult').innerHTML = "Valores inválidos. Use massa > 0 e velocidade ≥ 0.";
    return;
  }
  const energia = (m * v * v) / 2;
  document.getElementById('energiaResult').innerHTML = `🔋 Energia Cinética: ${energia.toFixed(2)} Joules`;
}
</script>

<input type="number" id="massa" placeholder="Massa (kg)" class="w-full p-2 border rounded mb-2">
<input type="number" id="velocidadeEC" placeholder="Velocidade (m/s)" class="w-full p-2 border rounded mb-2">
<button onclick="calcularEnergia()" class="bg-teal-600 text-white px-4 py-2 rounded">Calcular Energia Cinética</button>
<p id="energiaResult" class="mt-3 font-bold text-center text-teal-700"></p>

<script>
function calcularEnergia() {
  const m = parseFloat(document.getElementById('massa').value);
  const v = parseFloat(document.getElementById('velocidadeEC').value);
  if (isNaN(m) || isNaN(v) || m <= 0 || v < 0) {
    document.getElementById('energiaResult').innerHTML = "Valores inválidos. Use massa > 0 e velocidade ≥ 0.";
    return;
  }
  const energia = (m * v * v) / 2;
  document.getElementById('energiaResult').innerHTML = `🔋 Energia Cinética: ${energia.toFixed(2)} Joules`;
}
</script>

🚀 Exemplo 3: Movimento Uniforme (MU)

Calcular a posição final de um objeto que se move com velocidade constante S = S₀ + v * t é uma introdução perfeita à cinemática.

<input type="number" id="velocidadeMU" placeholder="Velocidade (m/s)" class="w-full p-2 border rounded mb-2">
<input type="number" id="tempoMU" placeholder="Tempo (s)" class="w-full p-2 border rounded mb-2">
<button onclick="calcularPosicao()" class="bg-cyan-600 text-white px-4 py-2 rounded">Calcular Posição</button>
<p id="posicaoResult" class="mt-3 italic"></p>

<script>
function calcularPosicao() {
  const v = parseFloat(document.getElementById('velocidadeMU').value);
  const t = parseFloat(document.getElementById('tempoMU').value);
  if (isNaN(v) || isNaN(t)) {
    document.getElementById('posicaoResult').innerHTML = "Preencha os dois campos.";
  } else {
    const posicao = v * t;
    document.getElementById('posicaoResult').innerHTML = `🚗 Posição = ${posicao.toFixed(2)} metros (considerando S₀ = 0)`;
  }
}
</script>

<input type="number" id="velocidadeMU" placeholder="Velocidade (m/s)" class="w-full p-2 border rounded mb-2">
<input type="number" id="tempoMU" placeholder="Tempo (s)" class="w-full p-2 border rounded mb-2">
<button onclick="calcularPosicao()" class="bg-cyan-600 text-white px-4 py-2 rounded">Calcular Posição</button>
<p id="posicaoResult" class="mt-3 italic"></p>

<script>
function calcularPosicao() {
  const v = parseFloat(document.getElementById('velocidadeMU').value);
  const t = parseFloat(document.getElementById('tempoMU').value);
  if (isNaN(v) || isNaN(t)) {
    document.getElementById('posicaoResult').innerHTML = "Preencha os dois campos.";
  } else {
    const posicao = v * t;
    document.getElementById('posicaoResult').innerHTML = `🚗 Posição = ${posicao.toFixed(2)} metros (considerando S₀ = 0)`;
  }
}
</script>

🚀 Exemplo 4: Lançamento Oblíquo Simplificado

O que vamos aprender: Trabalhar com decomposição de vetores e trigonometria (Math.sin, Math.cos) para simular o alcance de um projétil. Embora não utilizemos Canvas aqui, a lógica por trás do movimento parabólico é um excelente exercício de Física e programação.

<input type="number" id="velocidadeInicial" placeholder="Velocidade inicial (m/s)" class="w-full p-2 border rounded mb-2">
<input type="number" id="angulo" placeholder="Ângulo (graus)" class="w-full p-2 border rounded mb-2">
<button onclick="calcularAlcance()" class="bg-orange-600 text-white px-4 py-2 rounded">Calcular Alcance</button>
<p id="alcanceResult" class="mt-3 text-center font-bold"></p>

<script>
function calcularAlcance() {
  const v0 = parseFloat(document.getElementById('velocidadeInicial').value);
  const anguloGraus = parseFloat(document.getElementById('angulo').value);
  if (isNaN(v0) || isNaN(anguloGraus)) return;
  
  const g = 9.81;
  const anguloRad = anguloGraus * Math.PI / 180;
  const alcance = (v0 * v0 * Math.sin(2 * anguloRad)) / g;
  const alturaMax = (v0 * v0 * Math.pow(Math.sin(anguloRad), 2)) / (2 * g);
  
  document.getElementById('alcanceResult').innerHTML = `📐 Alcance máximo = ${alcance.toFixed(2)} m<br>🏔️ Altura máxima = ${alturaMax.toFixed(2)} m`;
}
</script>

<input type="number" id="velocidadeInicial" placeholder="Velocidade inicial (m/s)" class="w-full p-2 border rounded mb-2">
<input type="number" id="angulo" placeholder="Ângulo (graus)" class="w-full p-2 border rounded mb-2">
<button onclick="calcularAlcance()" class="bg-orange-600 text-white px-4 py-2 rounded">Calcular Alcance</button>
<p id="alcanceResult" class="mt-3 text-center font-bold"></p>

<script>
function calcularAlcance() {
  const v0 = parseFloat(document.getElementById('velocidadeInicial').value);
  const anguloGraus = parseFloat(document.getElementById('angulo').value);
  if (isNaN(v0) || isNaN(anguloGraus)) return;
  
  const g = 9.81;
  const anguloRad = anguloGraus * Math.PI / 180;
  const alcance = (v0 * v0 * Math.sin(2 * anguloRad)) / g;
  const alturaMax = (v0 * v0 * Math.pow(Math.sin(anguloRad), 2)) / (2 * g);
  
  document.getElementById('alcanceResult').innerHTML = `📐 Alcance máximo = ${alcance.toFixed(2)} m<br>🏔️ Altura máxima = ${alturaMax.toFixed(2)} m`;
}
</script>

📝 Módulo 4: Manipulação Poderosa de Strings

Strings estão em absolutamente tudo: mensagens, dados de usuário, textos. Aprenda a manipular, quebrar, transformar e analisar sequências de caracteres como um profissional.

✂️ Exemplo 1: Contador de Caracteres e Palavras

O que vamos aprender: length, split(), trim() e validação de conteúdo. Ideal para criar um campo de texto com limite de caracteres ou métricas de conteúdo.

<textarea id="texto" rows="3" class="w-full p-2 border rounded" placeholder="Digite ou cole seu texto aqui..."></textarea>
<button onclick="analisarTexto()" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded">Analisar Texto</button>
<p id="estatisticas" class="mt-3 text-sm bg-gray-100 p-2 rounded"></p>

<script>
function analisarTexto() {
  const texto = document.getElementById('texto').value;
  const caracteres = texto.length;
  const palavras = texto.trim() === '' ? 0 : texto.trim().split(/\s+/).length;
  document.getElementById('estatisticas').innerHTML = `📝 ${caracteres} caracteres | 📖 ${palavras} palavras`;
}
</script>

<textarea id="texto" rows="3" class="w-full p-2 border rounded" placeholder="Digite ou cole seu texto aqui..."></textarea>
<button onclick="analisarTexto()" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded">Analisar Texto</button>
<p id="estatisticas" class="mt-3 text-sm bg-gray-100 p-2 rounded"></p>

<script>
function analisarTexto() {
  const texto = document.getElementById('texto').value;
  const caracteres = texto.length;
  const palavras = texto.trim() === '' ? 0 : texto.trim().split(/\s+/).length;
  document.getElementById('estatisticas').innerHTML = `📝 ${caracteres} caracteres | 📖 ${palavras} palavras`;
}
</script>

✂️ Exemplo 2: Validador de Email (Regex)

Uma das tarefas mais comuns no desenvolvimento: validar formatos de email utilizando expressões regulares.

<input type="email" id="email" placeholder="seu@email.com" class="w-full p-2 border rounded">
<button onclick="validarEmail()" class="mt-2 bg-purple-600 text-white px-4 py-2 rounded">Validar E-mail</button>
<p id="validacaoEmail" class="mt-2 text-sm"></p>

<script>
function validarEmail() {
  const email = document.getElementById('email').value;
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const valido = regex.test(email);
  document.getElementById('validacaoEmail').innerHTML = valido ? "✅ E-mail válido!" : "❌ Formato de e-mail inválido.";
}
</script>

<input type="email" id="email" placeholder="seu@email.com" class="w-full p-2 border rounded">
<button onclick="validarEmail()" class="mt-2 bg-purple-600 text-white px-4 py-2 rounded">Validar E-mail</button>
<p id="validacaoEmail" class="mt-2 text-sm"></p>

<script>
function validarEmail() {
  const email = document.getElementById('email').value;
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const valido = regex.test(email);
  document.getElementById('validacaoEmail').innerHTML = valido ? "✅ E-mail válido!" : "❌ Formato de e-mail inválido.";
}
</script>

✂️ Exemplo 3: Transformação de Case (Maiúsculas/Minúsculas)

Métodos como toUpperCase(), toLowerCase() e replace() são extremamente úteis para padronização de dados.

<input type="text" id="textoCase" placeholder="Digite algo" class="w-full p-2 border rounded">
<div class="flex gap-2 mt-2">
  <button onclick="paraMaiusculo()" class="bg-gray-700 text-white px-3 py-1 rounded">MAIÚSCULO</button>
  <button onclick="paraMinusculo()" class="bg-gray-700 text-white px-3 py-1 rounded">minúsculo</button>
</div>
<p id="resultadoTransform" class="mt-3 p-2 bg-gray-100 rounded"></p>

<script>
function paraMaiusculo() {
  const texto = document.getElementById('textoCase').value;
  document.getElementById('resultadoTransform').innerHTML = texto.toUpperCase();
}
function paraMinusculo() {
  const texto = document.getElementById('textoCase').value;
  document.getElementById('resultadoTransform').innerHTML = texto.toLowerCase();
}
</script>

<input type="text" id="textoCase" placeholder="Digite algo" class="w-full p-2 border rounded">
<div class="flex gap-2 mt-2">
  <button onclick="paraMaiusculo()" class="bg-gray-700 text-white px-3 py-1 rounded">MAIÚSCULO</button>
  <button onclick="paraMinusculo()" class="bg-gray-700 text-white px-3 py-1 rounded">minúsculo</button>
</div>
<p id="resultadoTransform" class="mt-3 p-2 bg-gray-100 rounded"></p>

<script>
function paraMaiusculo() {
  const texto = document.getElementById('textoCase').value;
  document.getElementById('resultadoTransform').innerHTML = texto.toUpperCase();
}
function paraMinusculo() {
  const texto = document.getElementById('textoCase').value;
  document.getElementById('resultadoTransform').innerHTML = texto.toLowerCase();
}
</script>

✂️ Exemplo 4: Gerador de Slug para URLs

Ideal para blogs ou CMS: converter um título em uma URL amigável substituindo acentos, removendo caracteres especiais e trocando espaços por hífens.

<input type="text" id="titulo" placeholder="Título para gerar slug" class="w-full p-2 border rounded">
<button onclick="gerarSlug()" class="mt-2 bg-emerald-600 text-white px-4 py-2 rounded">Gerar Slug</button>
<p id="slugResultado" class="mt-3 font-mono text-sm bg-gray-100 p-2 rounded"></p>

<script>
function gerarSlug() {
  let titulo = document.getElementById('titulo').value;
  const slug = titulo.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                     .toLowerCase()
                     .replace(/[^a-z0-9]+/g, '-')
                     .replace(/^-|-$/g, '');
  document.getElementById('slugResultado').innerHTML = `🔗 Slug gerado: ${slug || 'n/a'}`;
}
</script>

<input type="text" id="titulo" placeholder="Título para gerar slug" class="w-full p-2 border rounded">
<button onclick="gerarSlug()" class="mt-2 bg-emerald-600 text-white px-4 py-2 rounded">Gerar Slug</button>
<p id="slugResultado" class="mt-3 font-mono text-sm bg-gray-100 p-2 rounded"></p>

<script>
function gerarSlug() {
  let titulo = document.getElementById('titulo').value;
  const slug = titulo.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                     .toLowerCase()
                     .replace(/[^a-z0-9]+/g, '-')
                     .replace(/^-|-$/g, '');
  document.getElementById('slugResultado').innerHTML = `🔗 Slug gerado: ${slug || 'n/a'}`;
}
</script>

🎥 Módulo 5: Multimídia com HTML5 + JavaScript

Dê vida ao seu site com vídeos, áudios, desenhos no Canvas e captura de mídia! O HTML5 nativamente suporta conteúdo multimídia sem plugins, tornando seu projeto leve e compatível com todos os navegadores modernos.

🎬 Exemplo 1: Player de Vídeo Customizado (HTML5 `<video>`)

Controle a reprodução de vídeos nativamente com JavaScript – play, pause e recarga.

<video id="meuVideo" width="100%" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="flex gap-2 mt-2">
  <button onclick="playVideo()" class="bg-blue-600 text-white px-3 py-1 rounded">▶ Play</button>
  <button onclick="pauseVideo()" class="bg-red-600 text-white px-3 py-1 rounded">⏸ Pause</button>
  <button onclick="reloadVideo()" class="bg-gray-600 text-white px-3 py-1 rounded">🔄 Reload</button>
</div>

<script>
function playVideo() { document.getElementById('meuVideo').play(); }
function pauseVideo() { document.getElementById('meuVideo').pause(); }
function reloadVideo() { document.getElementById('meuVideo').load(); }
</script>

<video id="meuVideo" width="100%" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="flex gap-2 mt-2">
  <button onclick="playVideo()" class="bg-blue-600 text-white px-3 py-1 rounded">▶ Play</button>
  <button onclick="pauseVideo()" class="bg-red-600 text-white px-3 py-1 rounded">⏸ Pause</button>
  <button onclick="reloadVideo()" class="bg-gray-600 text-white px-3 py-1 rounded">🔄 Reload</button>
</div>

<script>
function playVideo() { document.getElementById('meuVideo').play(); }
function pauseVideo() { document.getElementById('meuVideo').pause(); }
function reloadVideo() { document.getElementById('meuVideo').load(); }
</script>

🎬 Exemplo 2: Tocador de Áudio e Equalizador Visual

Além da tag <audio>, podemos integrar com a Web Audio API para efeitos visuais, mas mesmo o básico já oferece uma experiência rica ao usuário.

<audio id="meuAudio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls class="w-full"></audio>
<button onclick="aumentarVolume()" class="bg-green-600 text-white px-3 py-1 rounded mt-2">🔊 Aumentar Volume</button>
<button onclick="diminuirVolume()" class="bg-orange-600 text-white px-3 py-1 rounded mt-2">🔉 Diminuir Volume</button>

<script>
function aumentarVolume() {
  const audio = document.getElementById('meuAudio');
  if (audio.volume < 0.9) audio.volume += 0.1;
}
function diminuirVolume() {
  const audio = document.getElementById('meuAudio');
  if (audio.volume > 0.1) audio.volume -= 0.1;
}
</script>

<audio id="meuAudio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls class="w-full"></audio>
<button onclick="aumentarVolume()" class="bg-green-600 text-white px-3 py-1 rounded mt-2">🔊 Aumentar Volume</button>
<button onclick="diminuirVolume()" class="bg-orange-600 text-white px-3 py-1 rounded mt-2">🔉 Diminuir Volume</button>

<script>
function aumentarVolume() {
  const audio = document.getElementById('meuAudio');
  if (audio.volume < 0.9) audio.volume += 0.1;
}
function diminuirVolume() {
  const audio = document.getElementById('meuAudio');
  if (audio.volume > 0.1) audio.volume -= 0.1;
}
</script>

🎬 Exemplo 3: Desenho no Canvas (Relógio Analógico)

O Canvas é uma tela bitmap onde podemos desenhar linhas, arcos e texto com JavaScript puro. Vamos criar um relógio analógico que se atualiza sozinho!

<canvas id="relogioCanvas" width="200" height="200" class="mx-auto border rounded-full shadow"></canvas>
<div class="text-center text-sm text-gray-500 mt-2">Relógio Analógico</div>

<script>
function desenharRelogio() {
  const canvas = document.getElementById('relogioCanvas');
  const ctx = canvas.getContext('2d');
  const agora = new Date();
  const horas = agora.getHours() % 12;
  const minutos = agora.getMinutes();
  const segundos = agora.getSeconds();
  
  ctx.clearRect(0, 0, 200, 200);
  ctx.beginPath();
  ctx.arc(100, 100, 95, 0, 2 * Math.PI);
  ctx.stroke();
  
  // Ponteiro das horas
  const anguloHoras = (horas * 30 + minutos * 0.5) * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100 + 40 * Math.sin(anguloHoras), 100 - 40 * Math.cos(anguloHoras));
  ctx.lineWidth = 4;
  ctx.stroke();
  
  // Ponteiro dos minutos
  const anguloMinutos = (minutos * 6 + segundos * 0.1) * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100 + 60 * Math.sin(anguloMinutos), 100 - 60 * Math.cos(anguloMinutos));
  ctx.lineWidth = 2;
  ctx.stroke();
  
  // Ponteiro dos segundos
  const anguloSegundos = segundos * 6 * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100 + 70 * Math.sin(anguloSegundos), 100 - 70 * Math.cos(anguloSegundos));
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.strokeStyle = 'black';
}
setInterval(desenharRelogio, 1000);
desenharRelogio();
</script>

<canvas id="relogioCanvas" width="200" height="200" class="mx-auto border rounded-full shadow"></canvas>
<div class="text-center text-sm text-gray-500 mt-2">Relógio Analógico</div>

<script>
function desenharRelogio() {
  const canvas = document.getElementById('relogioCanvas');
  const ctx = canvas.getContext('2d');
  const agora = new Date();
  const horas = agora.getHours() % 12;
  const minutos = agora.getMinutes();
  const segundos = agora.getSeconds();
  
  ctx.clearRect(0, 0, 200, 200);
  ctx.beginPath();
  ctx.arc(100, 100, 95, 0, 2 * Math.PI);
  ctx.stroke();
  
  // Ponteiro das horas
  const anguloHoras = (horas * 30 + minutos * 0.5) * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100 + 40 * Math.sin(anguloHoras), 100 - 40 * Math.cos(anguloHoras));
  ctx.lineWidth = 4;
  ctx.stroke();
  
  // Ponteiro dos minutos
  const anguloMinutos = (minutos * 6 + segundos * 0.1) * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100 + 60 * Math.sin(anguloMinutos), 100 - 60 * Math.cos(anguloMinutos));
  ctx.lineWidth = 2;
  ctx.stroke();
  
  // Ponteiro dos segundos
  const anguloSegundos = segundos * 6 * Math.PI / 180;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100 + 70 * Math.sin(anguloSegundos), 100 - 70 * Math.cos(anguloSegundos));
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.strokeStyle = 'black';
}
setInterval(desenharRelogio, 1000);
desenharRelogio();
</script>

🎬 Exemplo 4: Webcam com Captura de Foto (getUserMedia)

Acesse a câmera do usuário, exiba o vídeo ao vivo e capture frames para foto. Esse exemplo explora o poderoso navigator.mediaDevices.getUserMedia, uma API incrível do HTML5.

<video id="webcam" autoplay playsinline width="100%" class="rounded-lg border"></video>
<canvas id="fotoCanvas" style="display:none;"></canvas>
<button onclick="capturarFoto()" class="mt-2 bg-pink-600 text-white px-4 py-2 rounded">📸 Capturar Foto</button>
<img id="foto" class="mt-3 rounded-lg shadow max-w-full">

<script>
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => { document.getElementById('webcam').srcObject = stream; })
  .catch(err => alert("Erro ao acessar webcam: " + err));

function capturarFoto() {
  const video = document.getElementById('webcam');
  const canvas = document.getElementById('fotoCanvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  document.getElementById('foto').src = canvas.toDataURL('image/png');
}
</script>

<video id="webcam" autoplay playsinline width="100%" class="rounded-lg border"></video>
<canvas id="fotoCanvas" style="display:none;"></canvas>
<button onclick="capturarFoto()" class="mt-2 bg-pink-600 text-white px-4 py-2 rounded">📸 Capturar Foto</button>
<img id="foto" class="mt-3 rounded-lg shadow max-w-full">

<script>
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => { document.getElementById('webcam').srcObject = stream; })
  .catch(err => alert("Erro ao acessar webcam: " + err));

function capturarFoto() {
  const video = document.getElementById('webcam');
  const canvas = document.getElementById('fotoCanvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  document.getElementById('foto').src = canvas.toDataURL('image/png');
}
</script>

🎮 Módulo 6: Jogos no Navegador (4 Exemplos)

Criar jogos é uma maneira incrívelmente gratificante de aplicar lógica, matemática, física e interatividade. Vamos começar com jogos simples e evoluir!

🕹️ Exemplo 1: Jogo da Velha (Tic-Tac-Toe)

Um clássico jogo de 2 jogadores que treina manipulação do DOM, eventos e lógica de vitória/empate. Baseado em projetos educacionais que ensinam fundamentos de desenvolvimento de jogos.

<div class="grid grid-cols-3 gap-2 w-64 mx-auto">
  <div v-for="i in 9" :key="i" class="w-20 h-20 bg-gray-200 flex items-center justify-center text-4xl font-bold cursor-pointer hover:bg-gray-300 rounded-lg"></div>
</div>
<div class="text-center mt-4">
  <p id="statusVelha" class="font-bold">Vez do Jogador X</p>
  <button onclick="reiniciarVelha()" class="mt-2 bg-blue-500 text-white px-4 py-1 rounded">Reiniciar</button>
</div>

<script>
let tabuleiro = ['', '', '', '', '', '', '', '', ''];
let jogadorAtual = 'X';
let gameAtivo = true;

function renderizarTabuleiro() {
  const celulas = document.querySelectorAll('.grid > div');
  celulas.forEach((celula, idx) => { celula.innerText = tabuleiro[idx]; });
}

function verificarVencedor() {
  const vitorias = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
  for (let combo of vitorias) {
    const [a,b,c] = combo;
    if (tabuleiro[a] && tabuleiro[a] === tabuleiro[b] && tabuleiro[a] === tabuleiro[c]) {
      gameAtivo = false;
      document.getElementById('statusVelha').innerHTML = `🏆 ${jogadorAtual} venceu! 🏆`;
      return true;
    }
  }
  if (!tabuleiro.includes('')) {
    gameAtivo = false;
    document.getElementById('statusVelha').innerHTML = "Empate! 🤝";
    return true;
  }
  return false;
}

function handleClick(idx) {
  if (!gameAtivo || tabuleiro[idx] !== '') return;
  tabuleiro[idx] = jogadorAtual;
  renderizarTabuleiro();
  if (verificarVencedor()) return;
  jogadorAtual = jogadorAtual === 'X' ? 'O' : 'X';
  document.getElementById('statusVelha').innerHTML = `Vez do Jogador ${jogadorAtual}`;
}

document.querySelectorAll('.grid > div').forEach((celula, idx) => {
  celula.addEventListener('click', () => handleClick(idx));
});

function reiniciarVelha() {
  tabuleiro = ['', '', '', '', '', '', '', '', ''];
  jogadorAtual = 'X';
  gameAtivo = true;
  document.getElementById('statusVelha').innerHTML = "Vez do Jogador X";
  renderizarTabuleiro();
}
renderizarTabuleiro();
</script>

<div class="grid grid-cols-3 gap-2 w-64 mx-auto">
  <div v-for="i in 9" :key="i" class="w-20 h-20 bg-gray-200 flex items-center justify-center text-4xl font-bold cursor-pointer hover:bg-gray-300 rounded-lg"></div>
</div>
<div class="text-center mt-4">
  <p id="statusVelha" class="font-bold">Vez do Jogador X</p>
  <button onclick="reiniciarVelha()" class="mt-2 bg-blue-500 text-white px-4 py-1 rounded">Reiniciar</button>
</div>

<script>
let tabuleiro = ['', '', '', '', '', '', '', '', ''];
let jogadorAtual = 'X';
let gameAtivo = true;

function renderizarTabuleiro() {
  const celulas = document.querySelectorAll('.grid > div');
  celulas.forEach((celula, idx) => { celula.innerText = tabuleiro[idx]; });
}

function verificarVencedor() {
  const vitorias = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
  for (let combo of vitorias) {
    const [a,b,c] = combo;
    if (tabuleiro[a] && tabuleiro[a] === tabuleiro[b] && tabuleiro[a] === tabuleiro[c]) {
      gameAtivo = false;
      document.getElementById('statusVelha').innerHTML = `🏆 ${jogadorAtual} venceu! 🏆`;
      return true;
    }
  }
  if (!tabuleiro.includes('')) {
    gameAtivo = false;
    document.getElementById('statusVelha').innerHTML = "Empate! 🤝";
    return true;
  }
  return false;
}

function handleClick(idx) {
  if (!gameAtivo || tabuleiro[idx] !== '') return;
  tabuleiro[idx] = jogadorAtual;
  renderizarTabuleiro();
  if (verificarVencedor()) return;
  jogadorAtual = jogadorAtual === 'X' ? 'O' : 'X';
  document.getElementById('statusVelha').innerHTML = `Vez do Jogador ${jogadorAtual}`;
}

document.querySelectorAll('.grid > div').forEach((celula, idx) => {
  celula.addEventListener('click', () => handleClick(idx));
});

function reiniciarVelha() {
  tabuleiro = ['', '', '', '', '', '', '', '', ''];
  jogadorAtual = 'X';
  gameAtivo = true;
  document.getElementById('statusVelha').innerHTML = "Vez do Jogador X";
  renderizarTabuleiro();
}
renderizarTabuleiro();
</script>

🕹️ Exemplo 2: Jogo de Adivinhação (Guess the Number)

Um jogo que testa a lógica do usuário: o computador escolhe um número aleatório, e o jogador tenta adivinhar, recebendo dicas "maior" ou "menor".

<p id="feedbackGuess" class="mb-3 text-center font-semibold">Tente adivinhar o número entre 1 e 100!</p>
<input type="number" id="palpite" placeholder="Seu palpite" class="w-full p-2 border rounded">
<button onclick="adivinhar()" class="mt-2 bg-purple-600 text-white px-4 py-2 rounded">🔍 Adivinhar</button>
<button onclick="novoJogo()" class="mt-2 bg-gray-500 text-white px-4 py-2 rounded">🔄 Novo Jogo</button>
<p id="tentativas" class="mt-2 text-sm"></p>

<script>
let numeroSecreto = Math.floor(Math.random() * 100) + 1;
let tentativas = 0;

function adivinhar() {
  const palpite = parseInt(document.getElementById('palpite').value);
  if (isNaN(palpite)) return;
  tentativas++;
  if (palpite === numeroSecreto) {
    document.getElementById('feedbackGuess').innerHTML = `🎉 Parabéns! Acertou em ${tentativas} tentativa(s)! 🎉`;
    document.getElementById('feedbackGuess').classList.add('text-green-600');
  } else if (palpite < numeroSecreto) {
    document.getElementById('feedbackGuess').innerHTML = "📈 O número é MAIOR! Tente novamente.";
  } else {
    document.getElementById('feedbackGuess').innerHTML = "📉 O número é MENOR! Tente novamente.";
  }
  document.getElementById('tentativas').innerHTML = `Tentativas: ${tentativas}`;
}

function novoJogo() {
  numeroSecreto = Math.floor(Math.random() * 100) + 1;
  tentativas = 0;
  document.getElementById('feedbackGuess').innerHTML = "Tente adivinhar o número entre 1 e 100!";
  document.getElementById('feedbackGuess').classList.remove('text-green-600');
  document.getElementById('tentativas').innerHTML = "";
  document.getElementById('palpite').value = "";
}
</script>

<p id="feedbackGuess" class="mb-3 text-center font-semibold">Tente adivinhar o número entre 1 e 100!</p>
<input type="number" id="palpite" placeholder="Seu palpite" class="w-full p-2 border rounded">
<button onclick="adivinhar()" class="mt-2 bg-purple-600 text-white px-4 py-2 rounded">🔍 Adivinhar</button>
<button onclick="novoJogo()" class="mt-2 bg-gray-500 text-white px-4 py-2 rounded">🔄 Novo Jogo</button>
<p id="tentativas" class="mt-2 text-sm"></p>

<script>
let numeroSecreto = Math.floor(Math.random() * 100) + 1;
let tentativas = 0;

function adivinhar() {
  const palpite = parseInt(document.getElementById('palpite').value);
  if (isNaN(palpite)) return;
  tentativas++;
  if (palpite === numeroSecreto) {
    document.getElementById('feedbackGuess').innerHTML = `🎉 Parabéns! Acertou em ${tentativas} tentativa(s)! 🎉`;
    document.getElementById('feedbackGuess').classList.add('text-green-600');
  } else if (palpite < numeroSecreto) {
    document.getElementById('feedbackGuess').innerHTML = "📈 O número é MAIOR! Tente novamente.";
  } else {
    document.getElementById('feedbackGuess').innerHTML = "📉 O número é MENOR! Tente novamente.";
  }
  document.getElementById('tentativas').innerHTML = `Tentativas: ${tentativas}`;
}

function novoJogo() {
  numeroSecreto = Math.floor(Math.random() * 100) + 1;
  tentativas = 0;
  document.getElementById('feedbackGuess').innerHTML = "Tente adivinhar o número entre 1 e 100!";
  document.getElementById('feedbackGuess').classList.remove('text-green-600');
  document.getElementById('tentativas').innerHTML = "";
  document.getElementById('palpite').value = "";
}
</script>

🕹️ Exemplo 3: Jogo de Memória (Simon Says simplificado)

Excelente para aprender manipulação de temporização (setTimeout), classes CSS e lógica de estados.

<div class="grid grid-cols-2 gap-3 max-w-xs mx-auto">
  <div id="cor0" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#ef4444;"></div>
  <div id="cor1" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#3b82f6;"></div>
  <div id="cor2" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#10b981;"></div>
  <div id="cor3" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#f59e0b;"></div>
</div>
<p id="statusMemoria" class="text-center mt-3 font-bold"></p>
<button onclick="iniciarJogoMemoria()" class="mt-3 bg-blue-600 text-white px-4 py-1 rounded">Iniciar Jogo</button>

<script>
const cores = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b'];
let sequencia = [];
let jogadorSequencia = [];
let nivel = 0;
let jogoAtivo = false;

function piscarCor(idx, tempo = 300) {
  const elemento = document.getElementById(`cor${idx}`);
  const corOriginal = cores[idx];
  elemento.style.filter = 'brightness(0.5)';
  setTimeout(() => { elemento.style.filter = 'brightness(1)'; }, tempo);
}

function proximoNivel() {
  jogadorSequencia = [];
  const proxCor = Math.floor(Math.random() * 4);
  sequencia.push(proxCor);
  piscarCor(proxCor);
  nivel++;
  document.getElementById('statusMemoria').innerHTML = `Nível ${nivel}`;
}

function iniciarJogoMemoria() {
  sequencia = [];
  nivel = 0;
  jogoAtivo = true;
  proximoNivel();
}

function verificarJogada(idx) {
  if (!jogoAtivo) return;
  piscarCor(idx, 150);
  jogadorSequencia.push(idx);
  const idxAtual = jogadorSequencia.length - 1;
  if (jogadorSequencia[idxAtual] !== sequencia[idxAtual]) {
    document.getElementById('statusMemoria').innerHTML = `❌ Game Over! Pontuação: ${nivel-1}`;
    jogoAtivo = false;
    return;
  }
  if (jogadorSequencia.length === sequencia.length) {
    setTimeout(proximoNivel, 800);
  }
}

for (let i = 0; i < 4; i++) {
  document.getElementById(`cor${i}`).addEventListener('click', () => verificarJogada(i));
}
</script>

<div class="grid grid-cols-2 gap-3 max-w-xs mx-auto">
  <div id="cor0" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#ef4444;"></div>
  <div id="cor1" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#3b82f6;"></div>
  <div id="cor2" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#10b981;"></div>
  <div id="cor3" class="w-28 h-28 rounded-2xl cursor-pointer transition" style="background:#f59e0b;"></div>
</div>
<p id="statusMemoria" class="text-center mt-3 font-bold"></p>
<button onclick="iniciarJogoMemoria()" class="mt-3 bg-blue-600 text-white px-4 py-1 rounded">Iniciar Jogo</button>

<script>
const cores = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b'];
let sequencia = [];
let jogadorSequencia = [];
let nivel = 0;
let jogoAtivo = false;

function piscarCor(idx, tempo = 300) {
  const elemento = document.getElementById(`cor${idx}`);
  const corOriginal = cores[idx];
  elemento.style.filter = 'brightness(0.5)';
  setTimeout(() => { elemento.style.filter = 'brightness(1)'; }, tempo);
}

function proximoNivel() {
  jogadorSequencia = [];
  const proxCor = Math.floor(Math.random() * 4);
  sequencia.push(proxCor);
  piscarCor(proxCor);
  nivel++;
  document.getElementById('statusMemoria').innerHTML = `Nível ${nivel}`;
}

function iniciarJogoMemoria() {
  sequencia = [];
  nivel = 0;
  jogoAtivo = true;
  proximoNivel();
}

function verificarJogada(idx) {
  if (!jogoAtivo) return;
  piscarCor(idx, 150);
  jogadorSequencia.push(idx);
  const idxAtual = jogadorSequencia.length - 1;
  if (jogadorSequencia[idxAtual] !== sequencia[idxAtual]) {
    document.getElementById('statusMemoria').innerHTML = `❌ Game Over! Pontuação: ${nivel-1}`;
    jogoAtivo = false;
    return;
  }
  if (jogadorSequencia.length === sequencia.length) {
    setTimeout(proximoNivel, 800);
  }
}

for (let i = 0; i < 4; i++) {
  document.getElementById(`cor${i}`).addEventListener('click', () => verificarJogada(i));
}
</script>

🕹️ Exemplo 4: Jogo de Click nas Bolhas (Ação e Pontuação)

Um jogo divertido onde bolhas surgem aleatoriamente e o jogador precisa clicar nelas antes que desapareçam. Envolve setInterval, setTimeout, manipulação de DOM e lógica de pontuação.

<div id="gameArea" class="relative h-96 bg-gradient-to-br from-blue-200 to-blue-100 rounded-2xl overflow-hidden cursor-pointer mb-2 border-2 border-blue-300">
  <!-- Bolhas surgirão aqui via JS -->
</div>
<p>Pontuação: <span id="pontosBubble" class="font-bold text-xl text-blue-700">0</span></p>
<button onclick="iniciarJogoBolha()" class="mt-2 bg-green-600 text-white px-4 py-2 rounded">Iniciar Jogo</button>

<script>
let pontos = 0;
let intervaloBolhas = null;
let bolhasAtivas = [];
const gameArea = document.getElementById('gameArea');

function criarBolha() {
  const bolha = document.createElement('div');
  const size = 40 + Math.random() * 30;
  bolha.className = 'absolute rounded-full bg-pink-500 opacity-90 cursor-pointer transition-all hover:scale-110 flex items-center justify-center text-white font-bold shadow';
  bolha.style.width = `${size}px`;
  bolha.style.height = `${size}px`;
  bolha.style.left = `${Math.random() * (gameArea.clientWidth - size)}px`;
  bolha.style.top = `${Math.random() * (gameArea.clientHeight - size)}px`;
  bolha.innerText = '+1';
  bolha.addEventListener('click', (e) => {
    e.stopPropagation();
    pontos++;
    document.getElementById('pontosBubble').innerText = pontos;
    bolha.remove();
    bolhasAtivas = bolhasAtivas.filter(b => b !== bolha);
  });
  gameArea.appendChild(bolha);
  bolhasAtivas.push(bolha);
  setTimeout(() => {
    if (bolhasAtivas.includes(bolha)) {
      bolha.remove();
      bolhasAtivas = bolhasAtivas.filter(b => b !== bolha);
    }
  }, 2000);
}

function iniciarJogoBolha() {
  pontos = 0;
  document.getElementById('pontosBubble').innerText = '0';
  bolhasAtivas.forEach(bolha => bolha.remove());
  bolhasAtivas = [];
  if (intervaloBolhas) clearInterval(intervaloBolhas);
  intervaloBolhas = setInterval(() => {
    if (bolhasAtivas.length < 10) criarBolha();
  }, 600);
  setTimeout(() => {
    if (intervaloBolhas) {
      clearInterval(intervaloBolhas);
      intervaloBolhas = null;
      alert(`🎉 Jogo encerrado! Pontuação final: ${pontos}`);
    }
  }, 30000);
}
</script>

<div id="gameArea" class="relative h-96 bg-gradient-to-br from-blue-200 to-blue-100 rounded-2xl overflow-hidden cursor-pointer mb-2 border-2 border-blue-300">
  <!-- Bolhas surgirão aqui via JS -->
</div>
<p>Pontuação: <span id="pontosBubble" class="font-bold text-xl text-blue-700">0</span></p>
<button onclick="iniciarJogoBolha()" class="mt-2 bg-green-600 text-white px-4 py-2 rounded">Iniciar Jogo</button>

<script>
let pontos = 0;
let intervaloBolhas = null;
let bolhasAtivas = [];
const gameArea = document.getElementById('gameArea');

function criarBolha() {
  const bolha = document.createElement('div');
  const size = 40 + Math.random() * 30;
  bolha.className = 'absolute rounded-full bg-pink-500 opacity-90 cursor-pointer transition-all hover:scale-110 flex items-center justify-center text-white font-bold shadow';
  bolha.style.width = `${size}px`;
  bolha.style.height = `${size}px`;
  bolha.style.left = `${Math.random() * (gameArea.clientWidth - size)}px`;
  bolha.style.top = `${Math.random() * (gameArea.clientHeight - size)}px`;
  bolha.innerText = '+1';
  bolha.addEventListener('click', (e) => {
    e.stopPropagation();
    pontos++;
    document.getElementById('pontosBubble').innerText = pontos;
    bolha.remove();
    bolhasAtivas = bolhasAtivas.filter(b => b !== bolha);
  });
  gameArea.appendChild(bolha);
  bolhasAtivas.push(bolha);
  setTimeout(() => {
    if (bolhasAtivas.includes(bolha)) {
      bolha.remove();
      bolhasAtivas = bolhasAtivas.filter(b => b !== bolha);
    }
  }, 2000);
}

function iniciarJogoBolha() {
  pontos = 0;
  document.getElementById('pontosBubble').innerText = '0';
  bolhasAtivas.forEach(bolha => bolha.remove());
  bolhasAtivas = [];
  if (intervaloBolhas) clearInterval(intervaloBolhas);
  intervaloBolhas = setInterval(() => {
    if (bolhasAtivas.length < 10) criarBolha();
  }, 600);
  setTimeout(() => {
    if (intervaloBolhas) {
      clearInterval(intervaloBolhas);
      intervaloBolhas = null;
      alert(`🎉 Jogo encerrado! Pontuação final: ${pontos}`);
    }
  }, 30000);
}
</script>

🏢 Módulo 7: Site Institucional Completo com Tailwind CSS

Agora que você já tem toda a base de lógica, matemática, física, strings, multimídia e jogos, vamos construir um site institucional completo, totalmente responsivo, com Tailwind CSS puro e JavaScript para interações.

📄 Estrutura do Site:

O site será composto por:

Header com menu de navegação (Home, Sobre, Serviços, Contato)
Hero Section com call-to-action
Seção de Serviços com cards estilizados
Seção Sobre com texto e imagem
Seção de Equipe usando Flexbox/Grid
Seção de Contato com formulário de email funcional (usando formsubmit.co ou similar para testes)
Footer profissional com links e redes sociais.
Menu responsivo que vira hambúrguer no mobile

🎨 Tailwind na prática: Utilizaremos as classes utilitárias do Tailwind para criar um design moderno, sem uma linha de CSS customizado – algo que acelera o desenvolvimento em até 50%.

Aqui está o HTML completo do site institucional (copie para um arquivo .html e veja a mágica acontecer!):

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeCraft Academy | Inovação em Tecnologia</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Ícones do FontAwesome (opcional) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-50 font-sans antialiased">

  <!-- Header Fixo com Navegação -->
  <header class="bg-white shadow-md fixed w-full z-10 top-0">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center flex-wrap">
      <div class="text-2xl font-bold text-indigo-600">CodeCraft<span class="text-gray-800">Academy</span></div>
      <nav id="menu" class="hidden md:flex space-x-6 text-gray-700 font-medium">
        <a href="#" class="hover:text-indigo-600 transition">Início</a>
        <a href="#" class="hover:text-indigo-600 transition">Sobre</a>
        <a href="#" class="hover:text-indigo-600 transition">Serviços</a>
        <a href="#" class="hover:text-indigo-600 transition">Equipe</a>
        <a href="#" class="hover:text-indigo-600 transition">Contato</a>
      </nav>
      <button id="menu-btn" class="block md:hidden text-gray-700 focus:outline-none">
        <i class="fas fa-bars text-2xl"></i>
      </button>
    </div>
    <!-- Menu Mobile (inicialmente oculto) -->
    <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
      <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Início</a>
      <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Sobre</a>
      <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Serviços</a>
      <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Equipe</a>
      <a href="#" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Contato</a>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-24 text-center mt-16">
    <div class="container mx-auto px-4">
      <h1 class="text-5xl font-extrabold mb-4">Inovação que transforma ideias</h1>
      <p class="text-xl mb-8">Criamos soluções digitais de alto impacto para impulsionar seu negócio.</p>
      <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Comece agora</a>
    </div>
  </section>

  <!-- Services Section -->
  <section class="py-16 bg-gray-100">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl font-bold text-gray-800 mb-12">Nossos Serviços</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition"><i class="fas fa-code text-4xl text-indigo-500 mb-4"></i><h3 class="text-xl font-semibold mb-2">Desenvolvimento Web</h3><p class="text-gray-600">Sites responsivos e sistemas sob medida com as melhores tecnologias.</p></div>
        <div class="bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition"><i class="fas fa-chart-line text-4xl text-indigo-500 mb-4"></i><h3 class="text-xl font-semibold mb-2">Consultoria Estratégica</h3><p class="text-gray-600">Análise de dados e estratégias para alavancar seus resultados.</p></div>
        <div class="bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition"><i class="fas fa-mobile-alt text-4xl text-indigo-500 mb-4"></i><h3 class="text-xl font-semibold mb-2">Apps Mobile</h3><p class="text-gray-600">Aplicativos nativos e híbridos com performance excepcional.</p></div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section class="py-16 bg-white">
    <div class="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
      <div class="md:w-1/2"><img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80" alt="Equipe" class="rounded-2xl shadow-lg"></div>
      <div class="md:w-1/2"><h2 class="text-3xl font-bold text-gray-800 mb-4">Quem somos</h2><p class="text-gray-600 leading-relaxed mb-4">A CodeCraft Academy nasceu com a missão de democratizar o acesso à tecnologia de ponta, oferecendo soluções digitais inovadoras que realmente resolvem problemas reais.</p><a href="#" class="text-indigo-600 font-semibold hover:underline">Saiba mais →</a></div>
    </div>
  </section>

  <!-- Team Section -->
  <section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 text-center"><h2 class="text-3xl font-bold text-gray-800 mb-12">Time de Especialistas</h2><div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div><img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-32 h-32 rounded-full mx-auto mb-3"><h3 class="font-bold">Dra. Ana Souza</h3><p class="text-gray-500">CEO & Fundadora</p></div>
      <div><img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-32 h-32 rounded-full mx-auto mb-3"><h3 class="font-bold">Carlos Lima</h3><p class="text-gray-500">CTO</p></div>
      <div><img src="https://randomuser.me/api/portraits/women/90.jpg" class="w-32 h-32 rounded-full mx-auto mb-3"><h3 class="font-bold">Mariana Rocha</h3><p class="text-gray-500">Design Lead</p></div>
      <div><img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-32 h-32 rounded-full mx-auto mb-3"><h3 class="font-bold">Rafael Mendes</h3><p class="text-gray-500">Tech Lead</p></div>
    </div></div>
  </section>

  <!-- Contact Section -->
  <section class="py-16 bg-indigo-50">
    <div class="container mx-auto px-4 text-center"><h2 class="text-3xl font-bold text-gray-800 mb-4">Fale Conosco</h2><p class="text-gray-600 mb-8">Envie sua mensagem e retornaremos em até 24h.</p>
    <form action="https://formsubmit.co/seu-email@dominio.com" method="POST" class="max-w-lg mx-auto bg-white p-8 rounded-2xl shadow-md space-y-4">
      <input type="text" name="nome" placeholder="Seu nome" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
      <input type="email" name="email" placeholder="Seu melhor e-mail" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
      <textarea name="mensagem" rows="4" placeholder="Sua mensagem..." class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required></textarea>
      <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">Enviar Mensagem</button>
    </form></div>
  </section>

  <!-- Footer -->
  <footer class="bg-gray-900 text-gray-300 py-8"><div class="container mx-auto px-4 text-center"><p>&copy; 2026 CodeCraft Academy. Inovação e tecnologia para transformar o futuro.</p><div class="flex justify-center space-x-6 mt-4"><a href="#"><i class="fab fa-instagram text-2xl hover:text-white"></i></a><a href="#"><i class="fab fa-linkedin text-2xl hover:text-white"></i></a><a href="#"><i class="fab fa-github text-2xl hover:text-white"></i></a></div></div></footer>

  <script>
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
  </script>
</body>
</html>

🧠 Módulo Bônus: +4 Exemplos Criativos para Turbinar seu Portfólio

Se você já percorreu todo o caminho até aqui, está mais do que pronto para se destacar. Vamos adicionar mais 4 exemplos criativos que mostram o poder do JavaScript moderno.

💡 Exemplo 1: Gerador de QR Code Dinâmico

Ideal para compartilhar links, mensagens ou qualquer texto em formato de QR code rapidamente.

<input type="text" id="qrTexto" placeholder="Digite uma URL ou texto" class="w-full p-2 border rounded">
<button onclick="gerarQRCode()" class="mt-2 bg-teal-600 text-white px-4 py-2 rounded">Gerar QR Code</button>
<div id="qrCode" class="mt-4 flex justify-center"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
<script>
function gerarQRCode() {
  const texto = document.getElementById('qrTexto').value;
  if (texto.trim() === "") return;
  const qrDiv = document.getElementById('qrCode');
  qrDiv.innerHTML = "";
  QRCode.toCanvas(document.createElement('canvas'), texto, { width: 200 }, (err, canvas) => {
    if (err) console.error(err);
    else qrDiv.appendChild(canvas);
  });
}
</script>

<input type="text" id="qrTexto" placeholder="Digite uma URL ou texto" class="w-full p-2 border rounded">
<button onclick="gerarQRCode()" class="mt-2 bg-teal-600 text-white px-4 py-2 rounded">Gerar QR Code</button>
<div id="qrCode" class="mt-4 flex justify-center"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
<script>
function gerarQRCode() {
  const texto = document.getElementById('qrTexto').value;
  if (texto.trim() === "") return;
  const qrDiv = document.getElementById('qrCode');
  qrDiv.innerHTML = "";
  QRCode.toCanvas(document.createElement('canvas'), texto, { width: 200 }, (err, canvas) => {
    if (err) console.error(err);
    else qrDiv.appendChild(canvas);
  });
}
</script>

💡 Exemplo 2: Relógio Digital Mundial (Hora e Data)

Crie um relógio digital que mostra a data e hora atual e se atualiza a cada segundo.

<div class="text-center bg-gray-800 text-white p-5 rounded-xl">
  <p class="text-sm">🕒 Relógio Digital</p>
  <p id="digitalClock" class="text-3xl font-mono font-bold">--:--:--</p>
  <p id="dataAtual" class="text-sm mt-1"></p>
</div>
<script>
function atualizarRelogio() {
  const agora = new Date();
  document.getElementById('digitalClock').innerText = agora.toLocaleTimeString('pt-BR');
  document.getElementById('dataAtual').innerHTML = agora.toLocaleDateString('pt-BR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
}
setInterval(atualizarRelogio, 1000);
atualizarRelogio();
</script>

<div class="text-center bg-gray-800 text-white p-5 rounded-xl">
  <p class="text-sm">🕒 Relógio Digital</p>
  <p id="digitalClock" class="text-3xl font-mono font-bold">--:--:--</p>
  <p id="dataAtual" class="text-sm mt-1"></p>
</div>
<script>
function atualizarRelogio() {
  const agora = new Date();
  document.getElementById('digitalClock').innerText = agora.toLocaleTimeString('pt-BR');
  document.getElementById('dataAtual').innerHTML = agora.toLocaleDateString('pt-BR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
}
setInterval(atualizarRelogio, 1000);
atualizarRelogio();
</script>

💡 Exemplo 3: Gerador de Citação Motivacional (Fetch API)

Consuma uma API pública para exibir frases motivacionais e mudar a cor de fundo a cada nova citação, adicionando um toque de dinamismo.

<button onclick="buscarCitacao()" class="bg-amber-600 text-white px-4 py-2 rounded-full">✨ Nova Citação</button>
<div id="citacao" class="mt-4 italic text-lg p-4 bg-amber-50 rounded-xl">Clique para se inspirar</div>
<script>
async function buscarCitacao() {
  const resp = await fetch('https://api.quotable.io/random');
  const data = await resp.json();
  document.getElementById('citacao').innerHTML = `“${data.content}” <br> — ${data.author}`;
}
</script>

<button onclick="buscarCitacao()" class="bg-amber-600 text-white px-4 py-2 rounded-full">✨ Nova Citação</button>
<div id="citacao" class="mt-4 italic text-lg p-4 bg-amber-50 rounded-xl">Clique para se inspirar</div>
<script>
async function buscarCitacao() {
  const resp = await fetch('https://api.quotable.io/random');
  const data = await resp.json();
  document.getElementById('citacao').innerHTML = `“${data.content}” <br> — ${data.author}`;
}
</script>

💡 Exemplo 4: Criador de Artes em ASCII (Canvas para ASCII)

Uma forma divertida de brincar com imagens e canvas: transforme qualquer imagem em arte ASCII.

<input type="file" id="uploadImagem" accept="image/*">
<canvas id="canvasAscii" style="display:none;"></canvas>
<pre id="asciiArt" class="mt-4 text-xs bg-black text-green-400 p-2 overflow-auto max-h-96"></pre>
<script>
document.getElementById('uploadImagem').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.getElementById('canvasAscii');
      const ctx = canvas.getContext('2d');
      canvas.width = 80;
      canvas.height = (img.height / img.width) * 40;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let ascii = '';
      const chars = '@%#*+=-:. ';
      for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
          const idx = (y * canvas.width + x) * 4;
          const avg = (imgData.data[idx] + imgData.data[idx+1] + imgData.data[idx+2]) / 3;
          const charIdx = Math.floor((avg / 255) * (chars.length - 1));
          ascii += chars[charIdx];
        }
        ascii += '\n';
      }
      document.getElementById('asciiArt').innerText = ascii;
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});
</script>

<input type="file" id="uploadImagem" accept="image/*">
<canvas id="canvasAscii" style="display:none;"></canvas>
<pre id="asciiArt" class="mt-4 text-xs bg-black text-green-400 p-2 overflow-auto max-h-96"></pre>
<script>
document.getElementById('uploadImagem').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.getElementById('canvasAscii');
      const ctx = canvas.getContext('2d');
      canvas.width = 80;
      canvas.height = (img.height / img.width) * 40;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let ascii = '';
      const chars = '@%#*+=-:. ';
      for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
          const idx = (y * canvas.width + x) * 4;
          const avg = (imgData.data[idx] + imgData.data[idx+1] + imgData.data[idx+2]) / 3;
          const charIdx = Math.floor((avg / 255) * (chars.length - 1));
          ascii += chars[charIdx];
        }
        ascii += '\n';
      }
      document.getElementById('asciiArt').innerText = ascii;
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});
</script>

🎯 Conclusão

Parabéns! Você percorreu uma jornada incrível que cobriu desde os fundamentos da lógica de programação até a criação de um site institucional completo com Tailwind CSS. Ao longo deste curso, você:

✅ Dominou estruturas de controle, funções, arrays e algoritmos
✅ Construiu aplicações matemáticas e simulou fenômenos da física
✅ Manipulou strings como um profissional
✅ Criou conteúdos multimídia com áudio, vídeo, canvas e webcam
✅ Desenvolveu 4 jogos completos para navegador
✅ Entregou um site institucional responsivo e moderno
✅ Explorou exemplos criativos para se destacar no mercado

📌 Keywords:

curso javascript, programação para iniciantes, lógica de programação, exemplos de algoritmos, matemática com javascript, física com javascript, manipulação de strings html5, exemplos multimídia html5, jogos de navegador javascript, criar jogos html5, tailwind css tutorial, desenvolvimento web full stack, projetos javascript iniciantes, site institucional html, javascript vanilla exemplos

🎯 Tags:

#JavaScript #HTML5 #TailwindCSS #DesenvolvimentoWeb #ProgramaçãoParaIniciantes #FullStack #CursoJavaScript #LógicaDeProgramação #Algoritmos #ExemplosPráticos #JogosHTML5 #WebDev #FrontEnd #ProgramaçãoCriativa #AprendaProgramar

🌟 A Jornada Dev: Curso Completo Domine HTML5, JavaScript + Tailwind do Zero ao Full Stack Criativo! 🚀

👋 Boas-vindas, Futuro(a) Mestre(a) da Programação!

📚 Módulo 0: Estrutura Básica de um Projeto HTML5

📚 Módulo 1: Fundamentos da Lógica de Programação e Algoritmos

🧩 Exemplo 1: Par ou Ímpar (Estrutura Condicional e Função)

🧩 Exemplo 2: Número Primo (Laço de Repetição e Validação)

🧩 Exemplo 3: Palíndromo – Algoritmo Clássico de Validação de Strings

🧩 Exemplo 4: Algoritmo de Ordenação de Array (sort com critério personalizado)

🧩 Exemplo Criativo do Módulo: Gerador de Histórias Aleatórias

📐 Módulo 2: Matemática Aplicada com JavaScript + Tailwind

🧮 Exemplo 1: Fórmula de Bhaskara (Equação do 2º Grau)

🧮 Exemplo 2: Conversor de Temperatura (Celsius ↔ Fahrenheit)

🧮 Exemplo 3: Números Aleatórios (Dado virtual)

🧮 Exemplo 4: Calculadora de Média Ponderada

⚛️ Módulo 3: Física Computacional com JavaScript

🚀 Exemplo 1: Simulador de Queda Livre (Velocidade vs Tempo)

🚀 Exemplo 2: Calculadora de Energia Cinética

🚀 Exemplo 3: Movimento Uniforme (MU)

🚀 Exemplo 4: Lançamento Oblíquo Simplificado

📝 Módulo 4: Manipulação Poderosa de Strings

✂️ Exemplo 1: Contador de Caracteres e Palavras

✂️ Exemplo 2: Validador de Email (Regex)

✂️ Exemplo 3: Transformação de Case (Maiúsculas/Minúsculas)

✂️ Exemplo 4: Gerador de Slug para URLs

🎥 Módulo 5: Multimídia com HTML5 + JavaScript

🎬 Exemplo 1: Player de Vídeo Customizado (HTML5 <video>)

🎬 Exemplo 2: Tocador de Áudio e Equalizador Visual

🎬 Exemplo 3: Desenho no Canvas (Relógio Analógico)

🎬 Exemplo 4: Webcam com Captura de Foto (getUserMedia)

🎮 Módulo 6: Jogos no Navegador (4 Exemplos)

🕹️ Exemplo 1: Jogo da Velha (Tic-Tac-Toe)

🕹️ Exemplo 2: Jogo de Adivinhação (Guess the Number)

🕹️ Exemplo 3: Jogo de Memória (Simon Says simplificado)

🕹️ Exemplo 4: Jogo de Click nas Bolhas (Ação e Pontuação)

🏢 Módulo 7: Site Institucional Completo com Tailwind CSS

📄 Estrutura do Site:

🧠 Módulo Bônus: +4 Exemplos Criativos para Turbinar seu Portfólio

💡 Exemplo 1: Gerador de QR Code Dinâmico

💡 Exemplo 2: Relógio Digital Mundial (Hora e Data)

💡 Exemplo 3: Gerador de Citação Motivacional (Fetch API)

💡 Exemplo 4: Criador de Artes em ASCII (Canvas para ASCII)

🎯 Conclusão

📌 Keywords:

🎯 Tags:

Postado por j

Talvez você goste destas postagens

Postar um comentário

0 Comentários

Translate

Programação Automática com IA

Visitantes

Download do VS Code Studio

Total de visualizações de página

Popular Post

Promovido

Google Ads 1

Google Ads 2

Patrocinado 1

Google Ads 3

Patrocinado 2

Patrocinado 3

Tags

Social Plugin

Most Popular

Subscribe Us

Categorias

Random Posts

Google Ads 4

Popular Posts

Footer Menu Widget

Contact form

🧩 Exemplo 4: Algoritmo de Ordenação de Array (`sort` com critério personalizado)

🎬 Exemplo 1: Player de Vídeo Customizado (HTML5 `<video>`)