⚡ Curso interativo

Aprenda Desenvolvimento Web

Domine HTML, CSS e JavaScript com aulas práticas, editores ao vivo e dezenas de exercícios. Sem instalar nada, direto do navegador.

3Linguagens
30+Exercícios
4Editores ao vivo
∞Pratique

🚀 Escolha sua trilha

HTML 5

Estrutura · Iniciante

A linguagem que dá estrutura à web. Tags, formulários, semântica e tudo que forma o esqueleto de uma página.

Começar

CSS 3

Estilo · Intermediário

A arte de transformar páginas em obras visuais. Cores, layouts, animações e design responsivo.

Estudar

JavaScript

Interação · Avançado

A lógica que dá vida às páginas. Variáveis, funções, eventos e manipulação do DOM.

Programar

Playground

Pratique · Ao vivo

Editor completo com HTML + CSS + JS lado a lado e preview em tempo real. Salve seu código.

Abrir

Desafios

Pratique · Mãos à obra

Resolva exercícios reais em cada linguagem. Da estrutura básica ao layout completo.

Em breve

Fundamentos

Trilha completa

O caminho recomendado: comece em HTML, vá para CSS e finalize com JavaScript. Tudo conectado.

Trilha

📚 As três linguagens da web

HTML

É o esqueleto. Define títulos, parágrafos, imagens, formulários e a hierarquia do conteúdo. É a base de qualquer página.

CSS

É a roupa. Cores, espaçamento, tipografia, animações e responsividade. Transforma estrutura em experiência visual.

JavaScript

É a vida. Reage a cliques, valida formulários, busca dados e cria aplicações interativas no navegador.

Pronto para começar?

Vá direto para o editor e crie sua primeira página em segundos.

HTML 5

HyperText Markup Language - a linguagem que estrutura toda a web

Aulas teóricas

HTML é a linguagem de marcação que define a estrutura e o conteúdo de uma página web. Não é uma linguagem de programação - é uma linguagem de marcação, ou seja, usa "tags" (marcações) para organizar o documento.

Cada tag tem um propósito específico: títulos, parágrafos, imagens, links, etc. O navegador lê o HTML e renderiza visualmente o que cada tag representa.

  • Não é case-sensitive, mas a convenção é minúsculas.
  • Cada elemento normalmente tem tag de abertura e tag de fechamento: <p>texto</p>.
  • Algumas tags são auto-fechantes: <img>, <br>, <hr>, <input>.

Toda página HTML segue esta estrutura mínima:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha página</title>
</head>
<body>
    <h1>Olá mundo!</h1>
    <p>Meu primeiro parágrafo.</p>
</body>
</html>
  • <!DOCTYPE html> - declara que é HTML5.
  • <html> - elemento raiz da página.
  • <head> - metadados (não aparecem na tela): título, charset, links de CSS.
  • <body> - todo conteúdo visível.

<h1> ... <h6>

Títulos hierárquicos. h1 é o mais importante e há apenas um por página.

<p>

Parágrafo de texto.

<strong> / <b>

Texto em negrito (strong tem ênfase semântica).

<em> / <i>

Texto em itálico (em tem ênfase semântica).

<a href="...">

Link (âncora). Use target="_blank" para abrir em nova aba.

<img src="..." alt="...">

Imagem. alt é obrigatório para acessibilidade.

<br>

Quebra de linha.

<hr>

Linha horizontal divisória.

<ul> <ol> <li>

Listas não-ordenadas, ordenadas e itens.

<blockquote>

Citação em bloco.

O HTML5 trouxe tags semânticas que dão significado à estrutura da página, ajudando SEO e leitores de tela:

<header>     <!-- topo / cabeçalho -->
<nav>        <!-- menu de navegação -->
<main>       <!-- conteúdo principal -->
<article>    <!-- conteúdo independente -->
<section>    <!-- seção temática -->
<aside>      <!-- conteúdo lateral -->
<footer>     <!-- rodapé -->

Use <div> apenas quando nenhuma tag semântica fizer sentido.

Atributos dão informações extras às tags. Ficam dentro da tag de abertura no formato nome="valor".

  • id - identificador único da página.
  • class - classes para CSS/JS (várias separadas por espaço).
  • style - CSS direto (use com moderação).
  • href - destino do link.
  • src - origem de imagem/script.
  • alt - descrição alternativa de imagem.
  • title - tooltip ao passar o mouse.
  • data-* - dados customizados (data-id="42").

Formulários coletam dados do usuário. A tag pai é <form>:

<form action="/enviar" method="POST">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label>Comentário:
        <textarea name="msg" rows="4"></textarea>
    </label>

    <button type="submit">Enviar</button>
</form>

Tipos de input do HTML5: text, email, password, number, date, color, range, checkbox, radio, file, tel, url, search.

<table>
    <thead>
        <tr><th>Nome</th><th>Idade</th></tr>
    </thead>
    <tbody>
        <tr><td>Ana</td><td>17</td></tr>
        <tr><td>Bruno</td><td>19</td></tr>
    </tbody>
</table>
  • <table> - tabela.
  • <tr> - linha (table row).
  • <th> - cabeçalho.
  • <td> - célula (table data).

<!-- Vídeo -->
<video src="filme.mp4" controls width="500"></video>

<!-- Áudio -->
<audio src="musica.mp3" controls></audio>

<!-- iFrame (página dentro de outra) -->
<iframe src="https://exemplo.com" width="600" height="400"></iframe>

Laboratório HTML

Edite o código e veja o resultado em tempo real. Use os exemplos prontos como ponto de partida.

HTML
Preview

Desafios HTML

🎯 Lista de tarefas

Crie uma lista ordenada com 5 tarefas do seu dia.

📝 Formulário de cadastro

Monte um formulário com nome, email, senha e botão de enviar.

🖼️ Galeria de imagens

Use 3 tags <img> com alt e legendas.

📰 Página semântica

Construa um artigo usando header, article, section, footer.

📊 Tabela de notas

Crie uma tabela com matérias, notas e médias.

🔗 Menu de navegação

Faça um <nav> com 4 links para seções da página.

CSS 3

Cascading Style Sheets · A arte de estilizar a web

Aulas teóricas

CSS é a linguagem que define a aparência dos elementos HTML: cores, tamanhos, espaçamentos, fontes, layouts e animações. Toda regra CSS segue o padrão:

seletor {
    propriedade: valor;
}

Exemplo:

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

  • Inline: <p style="color:red"> — específico, evite no dia-a-dia.
  • Interno: dentro de uma tag <style> no <head>.
  • Externo: arquivo .css separado via <link rel="stylesheet" href="estilo.css">. Recomendado.

p

Seleciona todas as tags <p>

.classe

Seleciona elementos com class="classe"

#id

Seleciona o elemento com aquele id (único)

*

Universal - todos os elementos

a:hover

Pseudo-classe - estado do elemento

div p

Descendente - p dentro de div

div > p

Filho direto

input[type="text"]

Por atributo

color: red;                      /* nome */
color: #e50914;                  /* hexadecimal */
color: rgb(229, 9, 20);          /* RGB */
color: rgba(229, 9, 20, 0.5);    /* com transparência */
color: hsl(357, 92%, 47%);       /* matiz, saturação, luminosidade */

Cada elemento é uma caixa retangular com 4 camadas:

  • Content: o conteúdo (texto, imagem).
  • Padding: espaço interno entre conteúdo e borda.
  • Border: a borda do elemento.
  • Margin: espaço externo, separa de outros elementos.

Use box-sizing: border-box; para que padding e border sejam incluídos na largura total (recomendado em todos os projetos).

font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;        /* normal=400, bold=700 */
font-style: italic;
text-align: center;      /* left, right, justify */
text-decoration: none;   /* underline, line-through */
text-transform: uppercase;
line-height: 1.6;
letter-spacing: 0.05em;

Sistema de layout 1D. Aplique no pai:

.container {
    display: flex;
    justify-content: center;   /* alinhamento eixo principal */
    align-items: center;       /* alinhamento eixo cruzado */
    flex-direction: row;       /* ou column */
    flex-wrap: wrap;
    gap: 1rem;
}

Sistema de layout 2D, ideal para grades:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
    gap: 20px;
}

1fr = 1 fração do espaço disponível. repeat(3, 1fr) = 3 colunas iguais.

Use media queries para adaptar o layout a diferentes tamanhos de tela:

/* Mobile primeiro */
.box { width: 100%; }

/* A partir de 768px (tablet) */
@media (min-width: 768px) {
    .box { width: 50%; }
}

/* A partir de 1024px (desktop) */
@media (min-width: 1024px) {
    .box { width: 33%; }
}

/* Transição simples */
.btn {
    background: blue;
    transition: all 0.3s;
}
.btn:hover {
    background: red;
    transform: scale(1.1);
}

/* Animação com keyframes */
@keyframes pulsar {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}
.icone {
    animation: pulsar 2s infinite;
}

Box Model interativo

Caixa

    


    

      
 Misturador de cores

      

        

          

            

            

            

            

          

        

        

          
rgb(120, 80, 200)

          

            
            
          

          

        

      

    


    

      
 Flexbox interativo

      

        

          
        

        

          
        

        

          
        

        

          
        

      

      

        
1
2
3

        
4
5

      

      

    


    
    

      

        
 Laboratório CSS

        

          
          
          
          
        

      

      

        

          
 HTML

          
        

        

          
 CSS

          
        

        

          
 Preview

          
        

      

      

        
        
      

    


  







  


    

      
 JavaScript

      
A linguagem que dá vida às páginas web

    


    

      
 Aulas teóricas

      


        

          

          

            

              
JavaScript é uma linguagem de programação interpretada que roda no navegador. Permite criar páginas dinâmicas, reagir a eventos, validar formulários, animar elementos e muito mais. Hoje JS também roda em servidores (Node.js).

              
    
                
  • Não confunda com Java — são linguagens completamente diferentes.
    • 
                
  • É a única linguagem que o navegador entende nativamente.
    • 
                
  • Pode ser embutida no HTML via <script> ou em arquivo separado.
    • 
              

              
<!-- No HTML -->
<script src="meu-script.js"></script>

// Ou inline
<script>
    console.log("Olá mundo!");
</script>

            

          

        


        

          

          

            

              
let nome = "Maria";       // pode mudar depois
const idade = 17;         // não pode mudar (constante)
var antiga = "evite";     // forma antiga, evite

              
    
                
  • const por padrão. let só quando precisar reatribuir.
    • 
                
  • Nomes em camelCase: nomeCompleto, idadeUsuario.
    • 
                
  • Sensível a maiúsculas: idade ≠ Idade.
    • 
              

            

          

        


        

          

          

            

              

                
String
Texto: "olá", 'mundo', `template ${x}`

                
Number
Números: 42, 3.14, -7

                
Boolean
true ou false

                
Array
Lista: [1, 2, 3], ["a", "b"]

                
Object
Chave-valor: {nome: "Ana", idade: 18}

                
null / undefined
Ausência de valor

              

            

          

        


        

          

          

            

              
// Aritméticos
2 + 3       // 5
10 - 4      // 6
3 * 4       // 12
10 / 3      // 3.33...
10 % 3      // 1 (resto da divisão)
2 ** 8      // 256 (potência)

// Comparação
5 === 5     // true (igual em valor E tipo)
5 == "5"    // true (apenas valor — evite!)
5 !== 4     // true
5 > 3       // true

// Lógicos
true && false  // false (E)
true || false  // true (OU)
!true          // false (NÃO)

            

          

        


        

          

          

            

              
// if / else if / else
if (idade >= 18) {
    console.log("Maior de idade");
} else if (idade >= 12) {
    console.log("Adolescente");
} else {
    console.log("Criança");
}

// switch
switch (cor) {
    case "vermelho": ...; break;
    case "azul":     ...; break;
    default:         ...;
}

// for
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while
let n = 0;
while (n < 3) { n++; }

// for...of (arrays)
for (const item of [10, 20, 30]) {
    console.log(item);
}

            

          

        


        

          

          

            

              
// Função tradicional
function somar(a, b) {
    return a + b;
}

// Arrow function (ES6)
const dobrar = (x) => x * 2;

// Com várias linhas
const saudacao = (nome) => {
    const msg = "Olá, " + nome;
    return msg.toUpperCase();
};

somar(2, 3);          // 5
dobrar(10);           // 20
saudacao("Maria");    // "OLÁ, MARIA"

            

          

        


        

          

          

            

              
const nums = [1, 2, 3, 4, 5];

nums.length           // 5
nums.push(6)          // adiciona ao fim
nums.pop()            // remove do fim
nums.unshift(0)       // adiciona no início
nums.shift()          // remove do início

// Funções de ordem superior
nums.map(x => x * 2)              // [2,4,6,8,10]
nums.filter(x => x > 2)           // [3,4,5]
nums.reduce((acc, x) => acc + x)  // 15 (soma)
nums.find(x => x === 3)           // 3
nums.includes(2)                  // true

            

          

        


        

          

          

            

              
O DOM (Document Object Model) é a representação da página em objetos. Com JS podemos modificá-la:

              
// Selecionar
const btn  = document.getElementById("meuBtn");
const todos = document.querySelectorAll(".item");
const um   = document.querySelector(".item");

// Modificar
btn.textContent = "Novo texto";
btn.innerHTML   = "<b>HTML</b>";
btn.style.background = "red";
btn.classList.add("ativo");
btn.classList.remove("ativo");
btn.classList.toggle("ativo");

// Criar elementos
const div = document.createElement("div");
div.textContent = "Novo!";
document.body.appendChild(div);

            

          

        


        

          

          

            

              
const btn = document.querySelector("button");

// Forma moderna (recomendada)
btn.addEventListener("click", () => {
    alert("Clicou!");
});

// Eventos comuns:
//   click, dblclick
//   mouseenter, mouseleave, mousemove
//   keydown, keyup
//   input, change, submit
//   load, scroll, resize

              
O parâmetro event traz informações: event.target (quem disparou), event.key (tecla), etc.

            

          

        


      

    


    
    

      
 Mini-calculadora

      
Exemplo prático juntando inputs, eventos e operadores.

      

        
        
        
        
        15
      

    


    
    

      
 Console JavaScript

      
Digite uma expressão e veja o resultado. Tente: 2 + 2, "olá".toUpperCase(), [1,2,3].map(x => x*2)

      

        

        

          >
          
          
        

      

    


    
    

      

        
 Laboratório JavaScript

        

          
          
          
          
        

      

      

        

          
 HTML

          
        

        

          
 JavaScript

          
        

        

          
 Preview

          
        

      

      

        
        
      

    


  







  


    

      
 Playground Completo

      
HTML + CSS + JavaScript juntos · Editor profissional · Preview ao vivo

    


    

      

        

          
          
          
          
          
        

        

          
          
        

      


      

        

          
 HTML

          
        

        

          
 CSS

          
        

        

          
 JavaScript

          
        

        

          
 Preview

          
        

      


      

        
        
        
        
      


      

        
        Dicas: use Ctrl + Enter para executar, Tab para indentar.
        Seu código é salvo automaticamente no navegador.