HTML, CSS e JavaScript: Criando Seu Primeiro Site do Zero

Se você sempre quis aprender a criar um site, mas não sabia por onde começar, este guia é para você. Vamos explorar os pilares do front-end: HTML, CSS e JavaScript, e montar juntos uma página simples para entender como tudo se conecta.

1. O que é Front-end?

O front-end é a parte visual de um site, aquilo que o usuário vê e interage. Ele é construído com três tecnologias principais:

  • HTML: define a estrutura da página.

  • CSS: cuida da aparência (cores, fontes, layout).

  • JavaScript: adiciona interatividade (botões, animações, etc.).

2. Criando a Estrutura com HTML

O HTML (HyperText Markup Language) é como o esqueleto da página. Vamos criar um arquivo chamado index.html.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Primeiro Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bem-vindo ao meu primeiro site!</h1>
    <p>Este é um parágrafo de exemplo para começar.</p>
    <button id="btn">Clique em mim</button>

    <script src="script.js"></script>
</body>
</html>

Explicando:

  • <h1> é um título.

  • <p> é um parágrafo.

  • <button> cria um botão que usaremos com JavaScript.

3. Deixando Bonito com CSS

Agora criamos um arquivo chamado style.css para estilizar a página.

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

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Explicando:

  • body define fonte, cor de fundo e alinhamento.

  • h1 muda a cor do título.

  • button define aparência e interação ao passar o mouse.

4. Adicionando Interatividade com JavaScript

Por último, criamos um arquivo script.js para tornar a página interativa.

const button = document.getElementById("btn");

button.addEventListener("click", function() {
    alert("Você clicou no botão!");
});

Explicando:

  • getElementById("btn") pega o botão do HTML.

  • addEventListener adiciona uma ação quando o botão é clicado.

  • alert mostra uma mensagem na tela.

5. Resultado Final

Se você salvar os três arquivos (index.html, style.css e script.js) na mesma pasta e abrir o index.html no navegador, terá um site simples, mas funcional.

6. Próximos Passos

Agora que você deu os primeiros passos, pode explorar mais:

  • Aprender tags HTML para enriquecer o conteúdo.

  • Usar CSS avançado (flexbox, grid) para layouts modernos.

  • Adicionar JavaScript dinâmico com animações e APIs.

Conclusão

Criar seu primeiro site pode parecer desafiador, mas com HTML, CSS e JavaScript, você tem o poder de construir páginas incríveis. Este é apenas o começo da sua jornada no mundo do desenvolvimento web!

🚀 E aí, pronto para criar seu primeiro projeto?