🧭 FORMAÇÃO PROFISSIONAL DE HTML — DO ZERO AO AVANÇADO
💻 Usando: VS Code + Live Server
Nível: Iniciante → Profissional
📁 Projeto final: Portfólio completo e responsivo
📘 AULA 1 — Preparando o ambiente
🎯 Objetivo:
Aprender a configurar o VS Code e criar seu primeiro arquivo HTML.
🧰 Passos:
Instale o VS Code:
👉 [Link]
Instale as extensões:
🔌 Live Server → para ver o site em tempo real
🎨 Prettier → formatação automática
🧱 HTML CSS Support → autocompletar
Crie o projeto:
Crie uma pasta: meu-site
Dentro dela, crie o arquivo [Link]
Estrutura inicial:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é o começo da sua jornada!</p>
</body>
</html>
Visualizar:
Clique com o botão direito → “Open with Live Server”
Veja sua página no navegador 🚀
🧩 Desafio:
Troque o título e escreva uma mensagem personalizada na página.
📘 AULA 2 — Estrutura e tags básicas
🎯 Objetivo:
Aprender a usar as principais tags do HTML.
🧱 Conteúdo:
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Um parágrafo com <strong>negrito</strong> e <em>itálico</em>.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<a href="[Link] target="_blank">Ir para o Google</a>
💡 Dicas:
Use <br> para quebrar linha.
Use <hr> para separar seções.
🧩 Desafio:
Crie uma página “Sobre mim” com título, parágrafos, uma lista de hobbies e um link
para seu Instagram.
📘 AULA 3 — Imagens, links e estrutura de pastas
🎯 Objetivo:
Aprender a usar imagens e organizar seu projeto.
📁 Estrutura:
meu-site/
│
├── [Link]
└── img/
└── [Link]
Exemplo:
<img src="img/[Link]" alt="Minha foto" width="250">
🧩 Desafio:
Adicione uma imagem sua e crie links para suas redes sociais.
📘 AULA 4 — Estrutura semântica (HTML5 moderno)
🎯 Objetivo:
Aprender as tags que dão significado ao conteúdo.
🧱 Estrutura:
<header>
<h1>Meu Site</h1>
<nav>
<a href="#">Início</a>
<a href="#">Sobre</a>
<a href="#">Contato</a>
</nav>
</header>
<main>
<section>
<h2>Bem-vindo!</h2>
<p>Este é o conteúdo principal.</p>
</section>
</main>
<footer>
<p>© 2025 - Seu Nome</p>
</footer>
🧩 Desafio:
Monte sua homepage completa usando <header>, <main> e <footer>.
📘 AULA 5 — Formulários
🎯 Objetivo:
Aprender a criar formulários e campos de entrada.
🧱 Exemplo:
<form action="#" method="post">
<label>Nome:</label>
<input type="text" name="nome" placeholder="Digite seu nome" required>
<label>Email:</label>
<input type="email" name="email" placeholder="Digite seu e-mail" required>
<label>Mensagem:</label>
<textarea name="mensagem"></textarea>
<button type="submit">Enviar</button>
</form>
🧩 Desafio:
Monte um formulário de contato estiloso para sua página.
📘 AULA 6 — Introdução ao CSS
🎯 Objetivo:
Aplicar cores, fontes e espaçamentos.
🔗 Conectando o CSS:
Crie o arquivo [Link] e linke no HTML:
<link rel="stylesheet" href="[Link]">
🎨 Exemplo de CSS:
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
margin: 0;
}
h1 {
color: #222;
text-align: center;
}
p {
color: #555;
line-height: 1.6;
}
🧩 Desafio:
Mude o fundo, as cores e o estilo do seu texto.
📘 AULA 7 — Estrutura de projeto profissional
📁 Organização:
meu-site/
│
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── img/
💡 Use <nav> com links entre páginas:
<nav>
<a href="[Link]">Início</a>
<a href="[Link]">Sobre</a>
<a href="[Link]">Contato</a>
</nav>
📘 AULA 8 — Acessibilidade e SEO básico
♿ Boas práticas:
Use alt em todas as imagens.
Use <label> nos campos de formulário.
Use <h1> apenas uma vez.
🔍 SEO:
<meta name="description" content="Portfólio de João - Desenvolvedor Front-End.">
<title>Portfólio de João</title>
📘 AULA 9 — Projeto Final: Portfólio Profissional
Estrutura:
Página inicial com introdução e imagem.
Página "Sobre mim" com bio e habilidades.
Página "Projetos" com miniaturas e links.
Página "Contato" com formulário funcional.
💡 Use boas práticas de código, cores harmoniosas e fontes legíveis.
📘 AULA 10 — Publicando seu site
🚀 Opção gratuita: GitHub Pages
Crie conta em [Link]
Envie seu projeto.
Vá em Settings → Pages → Deploy from branch.
Seu site estará online 🎉