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>
<script src="script.js"></script>
</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
- Crie um repositório no GitHub (você já aprendeu como faz aqui https://casado.dev/como-subir-seu-projeto-no-github-passo-a-passo.)
- Suba seus arquivos com git push
- Vá em “Settings” → “Pages” → escolha a branch e a pasta root
- Seu site estará disponível em: https://seuusuario.github.io/meu-projeto/
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
Caso queira se especializar em programação, invista em um curso com acompanhamento, e indico este Pacote Fullstack, ele é um curso super completo e vai te ajudar a aprender do zero, e você vai ter a oportunidade de ter as habilidades e 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. https://casado.dev/cursos/
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
[ Vagas para profissionais de Tecnologia ] https://mercadodeti.com.br
[ Instagram ] https://instagram.com/casadodev
[ Twitter ] https://twitter.com/casadodev
[ Home ] https://casado.dev
Nossa Newsletter
Você receberá conteúdos exclusivos que poderão te levar para o próximo NÍVEL na carreira!
Artigos Relacionados
Sobre o Autor
Sou o Cirino. Pai, Marido, criador de conteúdo e Mentor de Carreira Tech voluntário para apoiar pessoas que querem entrar no mercado de tecnologia,
0 Comentários