Glossário

HTML

Atributos

Fornecem informações adicionais sobre elementos HTML, como identificadores e classes.

<a href="https://example.com" title="Exemplo">Clique aqui</a>

Formulários

Permitem entrada de dados pelo usuário.

<form action="/submit"><input type="text" name="nome"></form>

Tabelas

Estruturam dados em formato tabular.

<table><tr><td>Dado</td></tr></table>

Elementos Semânticos

Proporcionam significado ao conteúdo, melhorando a acessibilidade e SEO.

<header>Cabeçalho</header><footer>Rodapé</footer>

Imagens

Permitem a exibição de elementos gráficos.

<img src="imagem.jpg" alt="Descrição da imagem">

Links

Conectam páginas ou seções da mesma página.

<a href="#seção">Ir para a seção</a>

Listas

Estruturam itens em listas ordenadas ou não ordenadas.

<ul><li>Item</li></ul>

Multimídia

Elementos para incorporar áudio e vídeo.

<video controls><source src="video.mp4"></video>

Botões

Permitem a interação do usuário com a página.

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

Div e Span

Usados para agrupar e estilizar elementos HTML.

<div>Conteúdo</div><span>Texto</span>

Meta Tags

Fornecem metadados sobre a página, como descrição e palavras-chave.

<meta name="description" content="Descrição da página">

Iframes

Incorporam outra página HTML dentro de uma página.

<iframe src="https://example.com"></iframe>

Estilos Inline

Aplicam estilos diretamente em elementos.

<h1 style="color: blue;">Título Azul</h1>

Classes e IDs

Usados para identificar e estilizar elementos de forma única ou em grupo.

<div id="unico" class="grupo">Exemplo</div>

CSS

Estilos Básicos

Define aparência e layout dos elementos.

body { background-color: #f0f0f0; }

Flexbox

Facilita o alinhamento de elementos em contêineres flexíveis.

display: flex; justify-content: center;

Grid Layout

Cria layouts em grades para organizar conteúdos.

display: grid; grid-template-columns: 1fr 1fr;

Seletores

Permitem aplicar estilos a elementos específicos.

p { color: blue; }

Media Queries

Adaptam estilos com base no tamanho da tela ou dispositivo.

@media (max-width: 600px) { body { font-size: 14px; } }

Posicionamento

Controla a posição de elementos na página.

position: absolute; top: 50px; left: 100px;

Transições

Adicionam animações suaves entre mudanças de estilo.

button { transition: background-color 0.3s ease; }

Transformações

Aplicam transformações como rotação e escala.

div { transform: rotate(45deg); }

Sombras

Adicionam sombras a elementos para profundidade.

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

Gradientes

Criam transições de cores suaves.

background: linear-gradient(to right, red, blue);

Variáveis CSS

Permitem reutilizar valores de estilo.

:root { --main-color: #3498db; } body { color: var(--main-color); }

Pseudo-classes

Estilizam elementos com base em estados ou interações.

a:hover { text-decoration: underline; }

Pseudo-elementos

Estilizam partes específicas de elementos.

p::first-letter { font-size: 2em; }

Fontes Personalizadas

Define fontes customizadas com @font-face ou Google Fonts.

        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
      

JavaScript

Funções

Blocos reutilizáveis de código que realizam tarefas.

function saudacao() { alert('Olá!'); }

DOM

Manipula elementos HTML dinamicamente.

document.querySelector('h1').textContent = 'Novo Título';

Eventos do Mouse

Responde a interações do usuário, como cliques e movimentos.

element.addEventListener('click', () => alert('Clicado!'));

Variáveis

Armazenam dados em memória.

let nome = 'João'; const idade = 25;

Laços

Executam código repetidamente até que uma condição seja atendida.

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

Condicionais

Executam código baseado em condições.

if (idade > 18) { console.log('Maior de idade'); }

Objetos

Armazenam coleções de pares chave-valor.

let carro = { marca: 'Toyota', modelo: 'Corolla' };

Arrays

Armazenam listas de dados.

let frutas = ['Maçã', 'Banana', 'Laranja'];

Promises

Gerenciam operações assíncronas.

        fetch('https://api.example.com') .then(response => response.json()) .then(data => console.log(data));
      

Async/Await

Facilitam o trabalho com código assíncrono.

async function fetchData() { const data = await fetch(url); }

Classes

Definem modelos para criar objetos.

class Pessoa { constructor(nome) { this.nome = nome; } }

Módulos

Organizam código em arquivos separados.

export function saudacao() { return 'Olá!'; }

Operadores Ternários

Uma forma concisa de escrever condicionais.

let status = idade > 18 ? 'Adulto' : 'Menor';

Local Storage

Armazena dados no navegador.

localStorage.setItem('chave', 'valor');