📚 Material de Apoio

Colinha de
HTML & CSS

Todos os elementos essenciais para construir páginas web. Abra o F12 e explore o código enquanto lê!

Começar a estudar Ver componentes

🏗️ HTML — Estrutura do Documento

<!DOCTYPE html>

Declara que o arquivo é HTML5. Sempre na primeira linha.

<html>

Raiz do documento. Envolve absolutamente tudo.

<html lang="pt-BR">

Declara que o arquivo é HTML5 e define idioma principal da página para acessibilidade e SEO.

<head>

Cabeça — metadados, título, links de CSS/JS. Não aparece visualmente.

<meta charset>

Define a codificação de caracteres. Use sempre UTF-8.

<meta viewport>

Configura escala da página para dispositivos móveis.

<content="width=device-width,">

Define a lagura igual à largura dos dispositivos móveis.

<content="initial-scale=1.0">

Define o zoom inicial da página.

<title>

Define o título da aba no navegador.

<link rel="stylesheet">

Conecta um arquivo CSS externo à página.

<script>

Importa ou escreve JavaScript.

<body>

Corpo — todo o conteúdo visível fica aqui.

📐 HTML — Tags Semânticas de Layout

<header> Cabeçalho da página ou seção

Contém elementos introdutórios como logo, título e navegação. Pode existir mais de um por página (um no body, um dentro de um article).

<nav> Navegação principal

Agrupa os links de navegação mais importantes. Geralmente fica dentro do header.

<main> Conteúdo principal — único por página

Deve aparecer apenas uma vez por página. Contém o conteúdo central, excluindo header, footer e aside.

<section> Seção temática

Agrupa conteúdo com tema relacionado. Geralmente tem um título (h2, h3). Ex: seção de serviços, seção de contato.

<article> Conteúdo independente

Conteúdo que faz sentido sozinho, fora do contexto da página. Ex: post de blog, card de produto, notícia.

<aside> Conteúdo lateral/complementar

Conteúdo relacionado mas não essencial. Ex: sidebar, banners, links relacionados.

<footer> Rodapé

Rodapé da página ou seção. Contém copyright, links, contato e informações secundárias.

<div> Divisão genérica (sem semântica)

Usado apenas para agrupar e estilizar. Não tem significado semântico. Use quando nenhuma tag semântica se aplica.

<span> Elemento inline genérico

Igual ao div, mas inline — não quebra linha. Usado para estilizar partes de um texto.

✍️ HTML — Tags de Conteúdo

  • <h1> até <h6> — Títulos em hierarquia. h1 = mais importante, h6 = menos.
  • <p> — Parágrafo de texto.
  • <a href=""> — Link/âncora para outra página ou seção.
  • <strong> — Negrito com ênfase semântica (importante).
  • <em> — Itálico com ênfase semântica.
  • <br> — Quebra de linha forçada.
  • <hr> — Linha divisória horizontal.
  • <blockquote> — Citação em bloco.
  • <code> — Trecho de código inline.
  • <pre> — Texto pré-formatado, respeita espaços e quebras.
  • <img src="" alt=""> — Imagem. O alt descreve para acessibilidade e SEO.
  • <figure> — Envolve imagem com legenda.
  • <figcaption> — Legenda da figura.
  • <video> — Vídeo embutido.
  • <audio> — Áudio embutido.
  • <iframe> — Janela que carrega outra página (YouTube, mapas).
  • <svg> — Gráfico vetorial embutido diretamente no HTML.
  • <form> — Formulário de envio de dados.
  • <input type=""> — Campo de entrada (text, email, password, checkbox, radio...).
  • <label for=""> — Rótulo de um input. O "for" liga ao id do input.
  • <textarea> — Campo de texto longo e multilinha.
  • <select> — Menu suspenso (dropdown).
  • <option> — Opção dentro do select.
  • <button type=""> — Botão (submit, button, reset).
  • <fieldset> — Agrupa campos relacionados.
  • <legend> — Título do fieldset.
  • <ul> — Lista não ordenada (bolinhas).
  • <ol> — Lista ordenada (números).
  • <li> — Item de lista (dentro de ul ou ol).
  • <dl> — Lista de definições.
  • <dt> — Termo da definição.
  • <dd> — Descrição do termo.
  • <table> — Tabela.
  • <tr> — Linha da tabela.
  • <th> — Célula de cabeçalho da tabela.
  • <td> — Célula de dados da tabela.

📁 Boas Práticas — Organização de Projeto

    💡 Sempre comece criando uma pasta com o nome do seu projeto.

  • 📁 Pasta raiz — É a pasta principal onde todo o projeto está armazenadoe sua função é Organizar e conter todos os arquivos e subpastas do site.
  • 📁 Pasta assets — É a pasta Pasta que armazena recursos adicionais do projeto e evita deixar arquivos soltos na raiz. Centralizar arquivos de apoio como imagens, estilos e scripts.
  • 📁 Pasta image — É uma subpasta dentro de assets destinada a imagens, armazenar imagens usadas no site e organiza arquivos visuais separadamente de código.
  • 📁 Pasta css — É a pasta destinada aos arquivos de estilo, Separar a parte visual do HTML e Mantém o projeto organizado e modular.
  • 📁 Pasta js — É a pasta destinada aos scripts JavaScript. É responsável por armazenar arquivos responsáveis por interações e comportamentos dinâmicos (mantém o JavaScript separado da estrutura e do estilo.).
  • 📄 index.html — Arquivo principal do site, contém a estrutura HTML da página. É o arquivo que o navegador abre por padrão quando você acessa o projeto.
  • 📄 style.css — É o arquivo principal de estilização,Define cores, layout, tipografia e responsividade. em ele, a página teria apenas estrutura, sem design.
  • 📄 imagem.png — Arquivo de imagem do projeto. Pode ser usada em <img>, background no CSS ou ícones. Deve estar corretamente referenciada no código..

🎨 CSS — Propriedades Essenciais

🔤 Tipografia

  • font-family — Fonte usada no texto.
  • font-size — Tamanho da fonte (px, rem, em).
  • font-weight — Espessura: 400 = normal, 700 = bold.
  • line-height — Espaçamento entre linhas.
  • color — Cor do texto.
  • text-align — Alinhamento (left, center, right, justify).
  • letter-spacing — Espaço entre letras.
  • text-decoration — Sublinhado, riscado, etc.
  • text-transform — uppercase, lowercase, capitalize.

📦 Box Model

  • width / height — Largura e altura.
  • padding — Espaçamento interno (dentro da borda).
  • margin — Espaçamento externo (fora da borda).
  • border — Borda do elemento.
  • border-radius — Arredondamento dos cantos.
  • box-shadow — Sombra na caixa.
  • box-sizing — Define como width/height são calculados.
  • max-width / min-width — Limites de largura.

📐 Layout

  • display — block, inline, flex, grid, none.
  • flexbox — Layout em linha ou coluna (1D).
  • grid — Layout em grade (2D).
  • position — static, relative, absolute, fixed, sticky.
  • top/left/right/bottom — Coordenadas com position ativo.
  • z-index — Camada: quem fica na frente.
  • overflow — hidden, scroll, auto, visible.
  • gap — Espaço entre itens no flex/grid.

🖼️ Visual

  • background-color — Cor de fundo.
  • background-image — Imagem de fundo.
  • background-size — cover, contain, tamanho.
  • opacity — Transparência de 0 a 1.
  • transition — Animação suave ao mudar estado.
  • transform — Rotacionar, escalar, mover.
  • cursor — Tipo do cursor do mouse.
  • filter — blur, brightness, grayscale, etc.

⚡ Flexbox

  • display: flex — Ativa o flexbox no container.
  • flex-direction — row (horizontal) ou column (vertical).
  • justify-content — Alinha no eixo principal (center, space-between...).
  • align-items — Alinha no eixo cruzado (center, stretch...).
  • flex-wrap — Permite quebra de linha dos itens.
  • flex: 1 — Item cresce para preencher o espaço.
  • gap — Espaço entre os itens filhos.

🔲 Grid

  • display: grid — Ativa o grid no container.
  • grid-template-columns — Define as colunas (ex: repeat(3, 1fr)).
  • grid-template-rows — Define as linhas.
  • grid-column — Quantas colunas o item ocupa.
  • grid-row — Quantas linhas o item ocupa.
  • fr — Fração do espaço disponível.
  • gap — Espaço entre linhas e colunas.

🖼️ Componentes — Exemplos Visuais Interativos

Cada componente abaixo é real e funcional. Pressione F12 → clique na setinha ↖ → selecione qualquer elemento para inspecionar!

nav

Navbar

Barra de navegação com links. Usa display: flex e gap.

section.hero

Hero

Primeira seção da página. Gradiente de fundo, título grande e botões CTA.

✨ Novidade

Transforme sua Ideia em Produto

A plataforma mais completa para lançar seu projeto digital.

article.card

Card

Bloco com imagem, texto e botão. Usa border-radius e box-shadow.

🎨

Design UI

Aprenda a criar interfaces modernas e acessíveis.

⚡

Performance

Otimize sua aplicação para carregar mais rápido.

🔒

Segurança

Proteja seus dados com as melhores práticas.

div.banner

Banner

Faixa visual com imagem de fundo e texto sobreposto. Usa position: relative e overlay.

🔥 Oferta por tempo limitado

50% OFF em todos os cursos

Use o cupom FRONTEND50 até domingo.

div.carousel

Carousel / Slider

Slides que alternam com botões. Usa overflow: hidden e transform: translateX.

div.modal + div.overlay

Modal + Overlay

Janela sobre a página. O overlay escurece o fundo. Usa position: fixed e z-index.

Clique no botão para abrir o modal:

div.toast

Toast / Snackbar

Notificação temporária na borda da tela. Usa position: fixed e animation.

Clique para ver o toast aparecer:

div.skeleton

Skeleton Loader

Placeholder animado enquanto o conteúdo carrega. Usa @keyframes e background-position.

nav.breadcrumb > ol > li

Breadcrumb

Trilha de navegação. Usa display: flex e o separador via ::before no CSS.

aside.sidebar + main

Sidebar

Layout de duas colunas com barra lateral. Usa display: grid e grid-template-columns.

Artigos sobre HTML

Selecione uma categoria na sidebar para filtrar os artigos disponíveis.

div.skyscraper

Skyscraper / Corroceu

Banner publicitário alto e estreito. O nome "arranha-céu" vem da forma alongada.

Conteúdo da página ao lado do banner...

Parágrafo de texto qualquer.

Mais conteúdo aqui embaixo.

Publicidade

Anuncie aqui

160 × 600

conceito: 100vh

Above the Fold

Tudo visível sem rolar. Usa height: 100vh para ocupar a altura da tela toda.

👆 Above the Fold Visível sem rolar — o mais importante fica aqui
— Linha do Fold —
👇 Below the Fold Só aparece depois de rolar a página