Nesta aventura, o pequeno herói vai criar um blog estático usando HTML e CSS.
Nada de magia dinâmica por enquanto. Aqui vamos construir tudo com coragem, criatividade e arquivos feitos à mão, como nos tempos antigos da internet.
No fim, ele vai ter um blog completo estático, com cara de projeto real.
Neste capítulo vamos construir:
Antes de começar, crie estes arquivos no Neocities:
index.html post1.html post2.html post3.html style.css
Esses serão os primeiros pergaminhos do reino.
No arquivo index.html, cole este código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Blog de Aventuras</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="layout">
<aside class="menu">
<h2>📜 Posts</h2>
<ul>
<li><a href="post1.html">O começo da jornada</a></li>
<li><a href="post2.html">Meu jogo favorito</a></li>
<li><a href="post3.html">Itens lendários</a></li>
</ul>
<h2>🌍 Outros blogs</h2>
<ul>
<li><a href="https://neocities.org/" target="_blank">Neocities</a></li>
<li><a href="#">Blog do amigo</a></li>
<li><a href="#">Blog de games</a></li>
</ul>
</aside>
<main class="conteudo">
<h1>Bem-vindo ao meu blog de aventuras!</h1>
<p>Aqui eu vou escrever sobre jogos, personagens, ideias e coisas legais do meu mundo.</p>
<div class="caixa">
<h2>✨ Post em destaque</h2>
<p>Leia primeiro: <a href="post1.html">O começo da jornada</a></p>
</div>
<div class="caixa">
<h2>🧭 Sobre este blog</h2>
<p>Este blog foi criado por um pequeno herói da internet usando HTML e CSS.</p>
</div>
</main>
</div>
</body>
</html>
No arquivo style.css, cole este código:
body {
margin: 0;
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
}
.layout {
display: flex;
min-height: 100vh;
}
.menu {
width: 260px;
background: #1e293b;
padding: 20px;
}
.menu h2 {
font-size: 20px;
margin-top: 0;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
margin-bottom: 10px;
}
.menu a {
color: #7dd3fc;
text-decoration: none;
}
.menu a:hover {
color: #86efac;
}
.conteudo {
flex: 1;
padding: 30px;
}
.caixa {
background: #1d4ed8;
padding: 20px;
border-radius: 16px;
margin-top: 20px;
}
Agora o blog já vai parecer um lugar organizado, com menu do lado e conteúdo no centro.
Agora é a vez dele trocar:
Essa parte é importante porque transforma o projeto em algo pessoal.
Desafie ele a trocar as cores do site para algo que lembre:
Aqui ele aprende que design também conta história.
Antes de seguir para o próximo capítulo, o herói precisa conseguir:
Quando tudo isso estiver pronto, ele desbloqueia o próximo mundo.
No Capítulo 2, vamos criar os primeiros posts do blog:
Aí o blog começa a ficar com estrutura de verdade.