Frontend • Javascript • Programação

Seu Primeiro Projeto em HTML, CSS e JavaScript

Publicado em 12/05/2025 por Cirino ⏱️ 3 min de leitura
Como Criar Seu Primeiro Projeto em HTML, CSS e JavaScript

Aprenda passo a passo como criar seu primeiro projeto em HTML, CSS e JavaScript, do zero até publicar no GitHub Pages.

Criar seu primeiro projeto com HTML, CSS e JavaScript pode parecer desafiador. Mas com a orientação certa, você vai entender o processo, organizar seu código e até publicar o projeto online.

Neste guia completo, vamos construir uma página de perfil simples, usando apenas as tecnologias básicas da web: HTML, CSS e JavaScript. Ideal para iniciantes!

🧱 Estrutura do projeto

meu-projeto/
├── index.html
├── style.css
├── script.js

📌 Passo 1: Crie o arquivo index.html

Esse será o coração do seu projeto. Aqui vai a estrutura básica:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Meu Perfil - Casa do Dev</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Olá, eu sou [Seu Nome]</h1>
  <p>Esse é meu primeiro projeto com HTML, CSS e JS!</p>
  <button onclick="mostrarMensagem()">Clique aqui</button>
  http://script.js
</body>
</html>

🎨 Passo 2: Adicione estilo com CSS style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
}

button {
  padding: 10px 20px;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 5px;
}

⚙️ Passo 3: Adicione interatividade com Javascript script.js

function mostrarMensagem() {
  alert('Parabéns! Você criou seu primeiro projeto.');
}

🌐 Passo 4: Publique com GitHub Pages

Dica bônus

🔁 Comece pequeno, mas já pratique boas práticas:

  • Use indentação correta
  • Nomeie arquivos com clareza
  • Comente seu código
  • Faça backups com Git

🧠 Esse projeto simples vai te dar a base para construir portfólios, páginas pessoais, quizzes, sistemas de tarefas e muito mais. O primeiro passo é o mais importante.

📌 Comece hoje e publique com orgulho. Mais tutoriais? https://casado.dev

Se tiver alguma vaga, evento ou treinamento e quiser compartilhar, me chame na DM do Instagram @casadodev 🫡

Acompanhe as novidades no nosso canal do Casa do Dev 👉 Canal da Casa do Dev no WhatsApp

Como Criar Seu Primeiro Projeto em HTML, CSS e JavaScript
Como Criar Seu Primeiro Projeto em HTML, CSS e JavaScript

Se você quer se especializar em programação, invista em um curso completo. Indico este Pacote Fullstack, ele é um curso completo e vai te ajudar a aprender do zero, aumentando suas habilidades es práticas que o mercado procura.

Comece do absoluto zero e prepare-se para o mercado de trabalho com um curso que vai te ensinar desde lógica de programação até criar projetos e colocar no GitHub!

Veja nossas indicações de cursos de programação que compartilhei para ajudar em sua carreira, e também participe do nossos grupos da Casa do Dev.

Espero que você tenha achado interessante de ler.
Ajude a manter nosso conteúdo, patrocine um conteúdo ou pague um cafézinho para este colega Dev que sempre busca compartilhar um pouco das experiências e conhecimento com vocês.
Chave PIX: [email protected]

Fiquem bem.

Cirino,
Casa do Dev
Criador de conteúdo Tech e fundador da Casa do Dev

[ Instagram ] https://instagram.com/casadodev
[ Twitter ] https://x.com/casadodev
[ Home ] https://casado.dev

📌 Tags: