</>Centralde Comandos
Início/HTML/CSS/JavaScript
FRONT-END

HTML / CSS / JavaScript

Fundamentos para construir páginas estáticas que podem ser executadas diretamente no navegador e publicadas no GitHub Pages.

Esta é a tecnologia usada pelo próprio site: nenhuma dependência de servidor.
⌕/
0 tópicos visíveis
HTML

Estrutura HTML mínima

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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Olá!</h1>
  <script src="script.js"></script>
</body>
</html>
HTML

Tags HTML comuns

<h1>...</h1>Título principal.
<p>...</p>Parágrafo.
<a href="...">...</a>Link.
<img src="..." alt="...">Imagem.
<form>...</form>Formulário.
<input type="text">Campo de entrada.
<button type="button">...</button>Botão.
CSS

CSS essencial

CSS
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.card {
  display: flex;
  gap: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}
CSS

Layout responsivo

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

Media queries permitem adaptar o layout para telas menores.

JavaScript

JavaScript: selecionar elementos

document.getElementById('id')Seleciona pelo id.
document.querySelector('.classe')Seleciona o primeiro que corresponde.
document.querySelectorAll('.item')Seleciona todos os correspondentes.
JavaScript

JavaScript: eventos

JavaScript
const botao = document.querySelector('#botao');

botao.addEventListener('click', () => {
  alert('Clicou!');
});

Prefira addEventListener para associar comportamentos aos elementos.

JavaScript

Armazenamento no navegador

JavaScript
localStorage.setItem('nome', 'Alexsander');
const nome = localStorage.getItem('nome');
localStorage.removeItem('nome');

localStorage guarda dados no navegador. Esses dados não são um banco centralizado.

Execução

Executar um site estático

Você pode abrir index.html diretamente no navegador. Se quiser servir a pasta por HTTP:

Terminal
python3 -m http.server 5500
http://localhost:5500
Publicação

Compatibilidade com GitHub Pages

100% compatível

Arquivos .html, .css, .js e imagens podem ser publicados no GitHub Pages. O navegador executa o JavaScript.

Este próprio projeto foi construído seguindo esse modelo.

Copiado!