Bem-vindo ao TechDocs

Sua referência completa para desenvolvimento web moderno

Esta documentação oferece guias práticos e exemplos de código para as principais tecnologias de desenvolvimento web. Cada seção contém explicações claras, exemplos funcionais e boas práticas da indústria.

Dica: Use a barra de busca acima para encontrar rapidamente o que procura.

O que você vai encontrar

📚

Documentação Completa

Referências detalhadas de sintaxe e funcionalidades

💻

Exemplos Práticos

Código real que você pode usar em seus projetos

✓

Boas Práticas

Padrões e convenções recomendados pela indústria

🚀

Sempre Atualizado

Conteúdo revisado com as versões mais recentes

JavaScript

A linguagem de programação da web

JavaScript é a linguagem essencial para criar experiências web interativas. Moderna, versátil e amplamente adotada, é fundamental tanto para frontend quanto backend.

Variáveis e Tipos de Dados

JavaScript oferece três formas de declarar variáveis: var, let e const. Recomenda-se usar let e const em código moderno.

JavaScript

// Declaração de variáveis
let nome = "João";          // Variável mutável
const idade = 25;           // Constante (imutável)

// Tipos de dados
const texto = "Hello World";
const numero = 42;
const booleano = true;
const array = [1, 2, 3, 4, 5];
const objeto = { nome: "João", idade: 25 };
const nulo = null;
const indefinido = undefined;

Funções

Funções são blocos de código reutilizáveis. JavaScript suporta várias sintaxes:

JavaScript

// Função tradicional
function saudar(nome) {
    return `Olá, ${nome}!`;
}

// Arrow function
const saudarArrow = (nome) => `Olá, ${nome}!`;

// Função com parâmetro padrão
const saudarComPadrao = (nome = "Visitante") => {
    return `Bem-vindo, ${nome}!`;
};

// Função assíncrona
async function buscarDados(url) {
    const resposta = await fetch(url);
    return await resposta.json();
}

Atenção: Arrow functions não possuem seu próprio this. Use funções regulares quando precisar de contexto this.

Arrays e Métodos

JavaScript oferece métodos poderosos para trabalhar com arrays:

JavaScript

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

// Map - transforma cada elemento
const dobrados = numeros.map(n => n * 2);
// [2, 4, 6, 8, 10]

// Filter - seleciona elementos
const pares = numeros.filter(n => n % 2 === 0);
// [2, 4]

// Reduce - combina em único valor
const soma = numeros.reduce((acc, n) => acc + n, 0);
// 15

// Find - encontra primeiro match
const primeiroPar = numeros.find(n => n % 2 === 0);
// 2

Python

Simples, poderoso e versátil

Python é conhecida por sua sintaxe clara e legível, sendo ideal para iniciantes e poderosa o suficiente para aplicações complexas.

Variáveis e Tipos

Python

# Atribuição simples
nome = "João"
idade = 25
desenvolvedor = True

# Tipos de dados
texto = "Hello World"
numero = 42
flutuante = 3.14
lista = [1, 2, 3, 4, 5]
tupla = (1, 2, 3)
dicionario = {"nome": "João", "idade": 25}
conjunto = {1, 2, 3, 4}

List Comprehensions

Python oferece uma forma concisa e elegante de criar listas:

Python

# List comprehension básica
numeros = [i * 2 for i in range(10)]

# Com condição
pares = [n for n in range(10) if n % 2 == 0]

# Dictionary comprehension
quadrados = {x: x**2 for x in range(5)}

Boa Prática: Use list comprehensions para transformações simples. Para lógica complexa, loops regulares são mais legíveis.

HTML

A estrutura da web

HTML (HyperText Markup Language) define a estrutura e o significado do conteúdo na web.

Estrutura Básica

HTML

<!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>
    <header>
        <h1>Título Principal</h1>
        <nav>Navegação</nav>
    </header>
    
    <main>
        <article>Conteúdo</article>
    </main>
    
    <footer>Rodapé</footer>
</body>
</html>

Elementos Semânticos

Use tags semânticas para melhorar acessibilidade e SEO:

HTML

<header>Cabeçalho</header>
<nav>Navegação</nav>
<main>Conteúdo principal</main>
<article>Artigo</article>
<section>Seção</section>
<aside>Conteúdo lateral</aside>
<footer>Rodapé</footer>

CSS

Estilização e layout

CSS (Cascading Style Sheets) controla a apresentação visual das páginas web.

Flexbox

Flexbox facilita a criação de layouts flexíveis e responsivos:

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.item {
    flex: 1;
    padding: 20px;
}

Grid Layout

CSS

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

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

React

Biblioteca para interfaces

React é uma biblioteca JavaScript para construir interfaces de usuário com componentes reutilizáveis.

Componentes e Hooks

React

import { useState } from 'react';

function Contador() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>Contagem: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Incrementar
            </button>
        </div>
    );
}

Node.js

JavaScript no servidor

Node.js permite executar JavaScript no servidor, construindo APIs e aplicações backend escaláveis.

Servidor Express

Node.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.json({ message: 'Hello World!' });
});

app.listen(3000, () => {
    console.log('Servidor rodando na porta 3000');
});

Git

Controle de versão

Git é essencial para rastrear mudanças e colaborar em projetos de código.

Comandos Básicos

Terminal

# Inicializar repositório
git init

# Adicionar arquivos
git add .

# Commit
git commit -m "Mensagem descritiva"

# Push para remoto
git push origin main

# Pull mudanças
git pull origin main

Boas Práticas

Escreva código melhor

Seguir boas práticas garante código limpo, manutenível e profissional.

Princípios Fundamentais

🎯 Código Limpo

Escreva código legível e autoexplicativo. Nomes de variáveis devem ser descritivos.

📝 Documentação

Comente o porquê, não o que. O código deve ser autoexplicativo.

🧪 Testes

Teste seu código regularmente. Testes previnem bugs e facilitam refatoração.

🔒 Segurança

Valide todas as entradas. Nunca confie em dados do usuário.

⚡ Performance

Otimize quando necessário. Não otimize prematuramente.

♿ Acessibilidade

Torne seu código acessível a todos. Use HTML semântico e ARIA.