Aula 2 - Desenvolvimento Web: Fundamentos e Exemplos de Código para Iniciantes
Aprenda HTML, CSS e JavaScript do Zero. Se você está começando no mundo do desenvolvimento web, este post vai te mostrar os fundamentos essenciais e como dar os primeiros passos com exemplos de código práticos. Seja você um curioso, estudante ou futuro desenvolvedor, entender como a web funciona é o primeiro passo rumo a uma carreira sólida.
DESENVOLVIMENTO WEB
Prof. Leonardo Gomes Guidolin
4/7/20251 min ler
O que é Desenvolvimento Web?
Desenvolvimento web é o processo de criação de sites, aplicativos e sistemas que funcionam na internet. Ele envolve três pilares principais:
HTML (HyperText Markup Language) – estrutura do conteúdo
CSS (Cascading Style Sheets) – aparência visual
JavaScript – interatividade
Vamos ver como isso funciona na prática?
Estruturando sua página com HTML
O HTML define a estrutura da sua página web. Veja um exemplo básico:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Esse é o meu primeiro site com HTML.</p>
</body>
</html>
Dica: Use tags semânticas como <header>, <main>, <article> e <footer> para melhorar a organização e acessibilidade da sua página.
Deixando sua página bonita com CSS
O CSS cuida do design e da responsividade da sua página. Veja como aplicar estilo ao exemplo acima:
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
h1 {
color: #007bff;
}
💡 Dica: Utilize unidades relativas como em, % e rem para que seu site fique mais adaptável a diferentes tamanhos de tela.
Adicionando interatividade com JavaScript
Com JavaScript, você pode tornar sua página interativa:
<button onclick="mostrarMensagem()">Clique aqui</button>
<script>
function mostrarMensagem() {
alert("Você clicou no botão!");
}
</script>
Dica: Evite misturar muito JavaScript diretamente no HTML. Prefira arquivos separados para manter seu código mais limpo.
Dica de Ouro: Responsividade
Hoje, mais de 80% dos acessos vêm de celulares. Então seu site precisa ser responsivo:
@media (max-width: 768px) {
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
}
Use sempre media queries para garantir uma boa experiência em todos os dispositivos!
Como continuar aprendendo desenvolvimento web?
Agora que você viu os fundamentos, aqui estão alguns caminhos para se aprofundar:
Cursos gratuitos no freeCodeCamp
Continue acompanhando o blog Codando do Zero 💻
🔍 Conclusão
O desenvolvimento web é uma habilidade essencial no mundo moderno, e com HTML, CSS e JavaScript você já pode criar páginas incríveis. Pratique bastante, explore exemplos, e continue evoluindo!