Centro de Aprendizado

Tutoriais gratuitos e completos para desenvolvimento web

Aprenda desenvolvimento web do zero com tutoriais práticos e completos. Cada tutorial inclui código fonte, explicações detalhadas e exercícios práticos.

HTML & CSS

Estrutura e estilo para suas páginas web

JavaScript

Interatividade e lógica de programação

Projetos Completos

Aplicações reais do início ao fim

HTML5 - Estrutura Básica

Aprenda a criar a estrutura fundamental de qualquer página web

📚 O que você vai aprender:

  • ✅ Estrutura básica de um documento HTML
  • ✅ Tags semânticas (header, nav, main, footer)
  • ✅ Formulários e inputs
  • ✅ Links e navegação
  • ✅ Imagens e mídia
  • ✅ Tabelas e listas

💻 Código Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página</title>
</head>
<body>
    <header>
        <h1>Bem-vindo ao meu site!</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#sobre">Sobre</a></li>
        </ul>
    </nav>

    <main>
        <section id="home">
            <h2>Seção Principal</h2>
            <p>Este é o conteúdo principal da página.</p>
        </section>
    </main>

    <footer>
        <p>© 2025 Meu Site</p>
    </footer>
</body>
</html>

🎯 Como funciona:

DOCTYPE:

Declara que este é um documento HTML5 para o navegador

Head:

Contém metadados, título e links para CSS/JS externos

Body:

Todo o conteúdo visível da página fica aqui

Tags Semânticas:

Header, nav, main, footer - ajudam SEO e acessibilidade

CSS3 - Estilização Moderna

Transforme suas páginas HTML em designs incríveis

📚 O que você vai aprender:

  • ✅ Seletores CSS avançados
  • ✅ Box Model e Layout
  • ✅ Flexbox e Grid
  • ✅ Animações e transições
  • ✅ Design responsivo
  • ✅ Variáveis CSS e funções

💻 Código Exemplo:

/* CSS Externo - styles.css */
:root {
  --primary-color: #10b981;
  --secondary-color: #34d399;
  --text-color: #ffffff;
  --bg-color: #1f2937;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  padding: 2rem 0;
  text-align: center;
}

.btn {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

🎯 Como funciona:

Variáveis CSS:

Defina cores e valores reutilizáveis com :root

Box-sizing:

Border-box inclui padding e border na largura total

Flexbox/Grid:

Sistemas modernos de layout responsivo

Media Queries:

Adapte o design para diferentes tamanhos de tela

JavaScript - Interatividade

Adicione vida às suas páginas com programação

📚 O que você vai aprender:

  • ✅ Variáveis, tipos de dados e operadores
  • ✅ Funções e escopo
  • ✅ DOM manipulation
  • ✅ Eventos e listeners
  • ✅ Arrays e objetos
  • ✅ Async/await e Promises

💻 Código Exemplo:

// script.js
// Variáveis e tipos de dados
let nome = "João";
const idade = 25;
let ativo = true;
let hobbies = ["programar", "ler", "jogar"];

// Função para atualizar contador
function updateCounter() {
  let count = localStorage.getItem('visitorCount') || 0;
  count = parseInt(count) + 1;
  localStorage.setItem('visitorCount', count);

  const counterElement = document.getElementById('counter');
  if (counterElement) {
    counterElement.textContent = count;
  }
}

// Manipulação do DOM
function createCard(title, content) {
  const card = document.createElement('div');
  card.className = 'card';
  card.innerHTML = `
    <h3>${title}</h3>
    <p>${content}</p>
  `;
  return card;
}

// Event listeners
document.addEventListener('DOMContentLoaded', function() {
  updateCounter();

  // Botão de toggle tema
  const themeBtn = document.getElementById('theme-toggle');
  if (themeBtn) {
    themeBtn.addEventListener('click', function() {
      document.body.classList.toggle('dark-theme');
    });
  }

  // Form validation
  const form = document.getElementById('contact-form');
  if (form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const email = document.getElementById('email').value;
      const message = document.getElementById('message').value;

      if (!email.includes('@')) {
        alert('Email inválido!');
        return;
      }

      if (message.length < 10) {
        alert('Mensagem muito curta!');
        return;
      }

      alert('Mensagem enviada com sucesso!');
      form.reset();
    });
  }
});

// Async function example
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('Erro ao buscar dados:', error);
    return null;
  }
}

🎯 Como funciona:

DOM Manipulation:

JavaScript pode alterar HTML e CSS dinamicamente

Event Listeners:

Reagem a ações do usuário (clicks, submissões, etc)

LocalStorage:

Armazena dados no navegador do usuário

Async/Await:

Lida com operações assíncronas como APIs

Python - Automação e Scripts

Automatize tarefas e crie scripts poderosos

📚 O que você vai aprender:

  • ✅ Sintaxe básica e estruturas de dados
  • ✅ Manipulação de arquivos
  • ✅ Automação de tarefas
  • ✅ Web scraping
  • ✅ APIs e requisições HTTP
  • ✅ Criação de ferramentas CLI

💻 Código Exemplo:

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import os
import shutil
from pathlib import Path
import requests
from datetime import datetime

def organize_files(directory):
    """
    Organiza arquivos por tipo em pastas
    """
    # Cria pastas se não existirem
    folders = {
        'Imagens': ['.jpg', '.jpeg', '.png', '.gif', '.bmp'],
        'Documentos': ['.pdf', '.doc', '.docx', '.txt', '.xlsx'],
        'Videos': ['.mp4', '.avi', '.mkv', '.mov'],
        'Musica': ['.mp3', '.wav', '.flac'],
        'Outros': []
    }

    for folder in folders:
        Path(directory / folder).mkdir(exist_ok=True)

    # Organiza arquivos
    for file in directory.iterdir():
        if file.is_file():
            moved = False
            for folder, extensions in folders.items():
                if file.suffix.lower() in extensions:
                    shutil.move(str(file), str(directory / folder / file.name))
                    moved = True
                    break

            if not moved and folder != 'Outros':
                shutil.move(str(file), str(directory / 'Outros' / file.name))

    print(f"✅ Arquivos organizados em {directory}")

def download_file(url, filename):
    """
    Baixa arquivo da internet
    """
    try:
        response = requests.get(url, stream=True)
        response.raise_for_status()

        with open(filename, 'wb') as file:
            for chunk in response.iter_content(chunk_size=8192):
                file.write(chunk)

        print(f"✅ Arquivo baixado: {filename}")
        return True

    except Exception as e:
        print(f"❌ Erro ao baixar: {e}")
        return False

def create_backup(source, destination):
    """
    Cria backup de pasta
    """
    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
    backup_name = f"backup_{timestamp}"

    backup_path = Path(destination) / backup_name
    backup_path.mkdir(parents=True, exist_ok=True)

    try:
        for item in Path(source).iterdir():
            if item.is_file():
                shutil.copy2(str(item), str(backup_path))
            elif item.is_dir():
                shutil.copytree(str(item), str(backup_path / item.name))

        print(f"✅ Backup criado: {backup_path}")
        return str(backup_path)

    except Exception as e:
        print(f"❌ Erro no backup: {e}")
        return None

# Exemplo de uso
if __name__ == "__main__":
    # Organizar downloads
    downloads = Path.home() / "Downloads"
    organize_files(downloads)

    # Fazer backup de documentos
    docs = Path.home() / "Documents"
    backup_dir = Path.home() / "Backups"
    create_backup(str(docs), str(backup_dir))

    print("🎉 Automação concluída!")

🎯 Como funciona:

Pathlib:

Manipulação moderna de caminhos de arquivo

Shutil:

Operações de arquivo de alto nível (copiar, mover)

Requests:

Biblioteca para fazer requisições HTTP

Organização:

Scripts bem estruturados com funções reutilizáveis

🚀 Pronto para começar?

Baixe os projetos completos e pratique com exercícios reais

Ver Projetos Completos Gerar Certificado