FrontendTutorialPublicado em 25 de dezembro de 20252 min de leitura

Criando sua primeira página com HTML, CSS e JavaScript

Crie uma página simples com seções, tags semânticas, CSS, JavaScript e SEO básico para iniciantes.

#HTML
#CSS
#JavaScript
#SEO
#Frontend

Agora vamos criar uma página simples usando HTML, CSS e JavaScript. A página terá cabeçalho, menu, seção principal, seção sobre, seção de serviços, seção de contato, rodapé, CSS externo e JavaScript simples.

Estrutura dos arquivos

Crie uma pasta chamada primeira-pagina com index.html, style.css e script.js.

Na raiz do projeto, crie os arquivos index.html, style.css e script.js. O index.html será aberto pelo navegador, o style.css cuidará da aparência e o script.js cuidará do comportamento.

Lendo a estrutura: arquivos alinhados no mesmo nível ficam na mesma pasta. Isso facilita importar style.css e script.js a partir do index.html usando caminhos simples.

primeira-pagina
  index.html
  style.css
  script.js

HTML com semântica

Semântica significa usar tags que descrevem o papel do conteúdo, como header, nav, main, section, article e footer.

No HTML, pense primeiro na estrutura do conteúdo. Tags como header, main, section e footer ajudam a separar partes da página e deixam o código mais compreensível.

CSS básico

No style.css, defina fonte, cores, espaçamentos, menu, hero, botão e rodapé.

No CSS, cada regra costuma ter um seletor e um bloco de declarações. O seletor escolhe o elemento e as declarações definem aparência, como cor, espaçamento, tamanho e alinhamento.

JavaScript simples

No script.js, selecione o botão e adicione uma mensagem ao clique.

Lendo o JavaScript: primeiro você seleciona um elemento da página, depois registra um evento, como click, e por fim executa uma função quando esse evento acontece.

const botao = document.getElementById("botaoMensagem");

botao.addEventListener("click", function () {
  alert("Você acabou de usar JavaScript na página!");
});

SEO básico

Mesmo em uma página simples, alguns pontos ajudam: usar um único h1, title claro, meta description, headings em ordem, texto compreensível, links descritivos e HTML semântico.

Voltar ao blog