Desenvolva um projeto web completo aplicando todos os conhecimentos de HTML adquiridos durante o curso, criando um site profissional.
Escolha desenvolver um portfólio pessoal para mostrar suas habilidades ou um site corporativo para uma empresa (real ou fictícia).
projeto-final/
├── index.html (Home - landing page)
├── sobre.html (Sobre/About)
├── portfolio.html (Portfólio/Produtos)
├── servicos.html (Serviços/Skills)
├── contato.html (Contato)
├── blog.html (Blog/Notícias)
├── artigo.html (Página de artigo individual)
├── 404.html (Página de erro 404)
├── sitemap.html (Mapa do site)
├── assets/
│ ├── css/
│ ├── images/
│ ├── videos/
│ └── docs/
└── README.md (Documentação do projeto)## Briefing do Projeto
### Objetivo
- [ ] Portfólio pessoal de desenvolvedor
- [ ] Site corporativo de empresa
- [ ] Blog pessoal/profissional
- [ ] Landing page de produto/serviço
### Público-alvo
- Idade: _______________
- Profissão: ___________
- Necessidades: ________
- Dispositivos: ________
### Funcionalidades
- [ ] Formulário de contato
- [ ] Galeria de projetos/produtos
- [ ] Blog integrado
- [ ] Download de currículo/catálogo
- [ ] Integração com redes sociais
### Conteúdo
- Textos: ______________
- Imagens: _____________
- Vídeos: ______________
- Documentos: __________<!-- Estrutura básica de cada página -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!-- Meta tags essenciais -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título Específico da Página | Nome do Site</title>
<meta name="description" content="Descrição única de cada página">
<!-- SEO e compartilhamento -->
<meta property="og:title" content="Título para redes sociais">
<meta property="og:description" content="Descrição para compartilhamento">
<meta property="og:image" content="imagem-compartilhamento.jpg">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Skip link -->
<a href="#main-content" class="skip-link">Pular para conteúdo principal</a>
<!-- Header -->
<header role="banner">
<nav role="navigation" aria-label="Menu principal">
<!-- Navegação principal -->
</nav>
</header>
<!-- Main content -->
<main id="main-content" role="main">
<!-- Conteúdo específico da página -->
</main>
<!-- Footer -->
<footer role="contentinfo">
<!-- Informações da empresa/pessoa -->
</footer>
</body>
</html><main>
<!-- Hero Section -->
<section class="hero" aria-labelledby="hero-title">
<div class="hero-content">
<h1 id="hero-title">Título Principal Impactante</h1>
<p class="hero-subtitle">Subtítulo explicativo e atrativo</p>
<a href="#services" class="cta-button">Saiba Mais</a>
</div>
<div class="hero-media">
<picture>
<source srcset="hero-image.webp" type="image/webp">
<img src="hero-image.jpg" alt="Descrição da imagem principal">
</picture>
</div>
</section>
<!-- Seção Sobre -->
<section id="about" aria-labelledby="about-title">
<h2 id="about-title">Sobre Mim/Empresa</h2>
<div class="about-content">
<p>Texto apresentando você ou sua empresa...</p>
</div>
</section>
<!-- Seção Serviços/Skills -->
<section id="services" aria-labelledby="services-title">
<h2 id="services-title">Serviços</h2>
<div class="services-grid">
<article class="service-card">
<h3>Serviço 1</h3>
<p>Descrição do serviço...</p>
</article>
<!-- Mais cards de serviços -->
</div>
</section>
<!-- Call to Action -->
<section class="cta" aria-labelledby="cta-title">
<h2 id="cta-title">Pronto para começar?</h2>
<a href="contato.html" class="cta-button">Entre em Contato</a>
</section>
</main><main>
<article>
<header>
<h1>Sobre Mim/Nossa Empresa</h1>
<p class="lead">Introdução cativante sobre a história...</p>
</header>
<section aria-labelledby="historia-title">
<h2 id="historia-title">Nossa História</h2>
<div class="timeline">
<article class="timeline-item">
<time datetime="2020">2020</time>
<h3>Início da Jornada</h3>
<p>Como tudo começou...</p>
</article>
<!-- Mais itens da timeline -->
</div>
</section>
<section aria-labelledby="team-title">
<h2 id="team-title">Nossa Equipe</h2>
<div class="team-grid">
<article class="team-member">
<img src="member1.jpg" alt="Foto de João Silva">
<h3>João Silva</h3>
<p>CEO & Fundador</p>
</article>
<!-- Mais membros da equipe -->
</div>
</section>
</article>
</main><main>
<div class="contact-container">
<section class="contact-info">
<h1>Entre em Contato</h1>
<address>
<h2>Informações de Contato</h2>
<div class="contact-item">
<strong>Endereço:</strong>
<span>Rua das Flores, 123<br>São Paulo - SP</span>
</div>
<div class="contact-item">
<strong>Telefone:</strong>
<a href="tel:+5511999999999">(11) 99999-9999</a>
</div>
<div class="contact-item">
<strong>E-mail:</strong>
<a href="mailto:contato@empresa.com">contato@empresa.com</a>
</div>
</address>
</section>
<section class="contact-form">
<h2>Envie uma Mensagem</h2>
<form action="#" method="post">
<div class="form-group">
<label for="nome">Nome Completo *</label>
<input type="text" id="nome" name="nome" required>
</div>
<div class="form-group">
<label for="email">E-mail *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="assunto">Assunto</label>
<select id="assunto" name="assunto">
<option value="">Selecione um assunto</option>
<option value="orcamento">Orçamento</option>
<option value="duvida">Dúvida</option>
<option value="parceria">Parceria</option>
</select>
</div>
<div class="form-group">
<label for="mensagem">Mensagem *</label>
<textarea id="mensagem" name="mensagem" rows="5" required></textarea>
</div>
<button type="submit">Enviar Mensagem</button>
</form>
</section>
</div>
<!-- Mapa -->
<section class="map-section">
<h2>Nossa Localização</h2>
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=..."
title="Localização da empresa"
loading="lazy">
</iframe>
</div>
</section>
</main><nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfólio</a></li>
<li aria-current="page">Projeto Web Design</li>
</ol>
</nav><section class="portfolio-gallery">
<h2>Meus Projetos</h2>
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">Todos</button>
<button class="filter-btn" data-filter="web">Web Design</button>
<button class="filter-btn" data-filter="app">Apps</button>
</div>
<div class="projects-grid">
<article class="project-card" data-category="web">
<figure>
<picture>
<source srcset="projeto1.webp" type="image/webp">
<img src="projeto1.jpg" alt="Screenshot do projeto E-commerce" loading="lazy">
</picture>
<figcaption>
<h3>E-commerce Responsivo</h3>
<p>Site de vendas online com carrinho e pagamento</p>
<div class="project-links">
<a href="projeto1-detalhes.html">Ver Detalhes</a>
<a href="https://demo-projeto1.com" target="_blank" rel="noopener">Demo</a>
</div>
</figcaption>
</figure>
</article>
<!-- Mais projetos -->
</div>
</section><section class="blog-section">
<h2>Últimos Artigos</h2>
<div class="blog-grid">
<article class="blog-card">
<header>
<img src="artigo1-thumb.jpg" alt="Ilustração sobre HTML semântico" loading="lazy">
<div class="blog-meta">
<time datetime="2024-01-15">15 de janeiro, 2024</time>
<span class="category">Desenvolvimento</span>
</div>
<h3><a href="artigo-html-semantico.html">HTML Semântico: Guia Completo</a></h3>
</header>
<p>Aprenda como usar HTML semântico para criar sites mais acessíveis e otimizados para SEO...</p>
<footer>
<a href="artigo-html-semantico.html" class="read-more">Ler mais</a>
</footer>
</article>
<!-- Mais artigos -->
</div>
</section><!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página não encontrada - 404</title>
<meta name="description" content="A página que você procura não foi encontrada.">
<meta name="robots" content="noindex, follow">
</head>
<body>
<main class="error-page">
<div class="error-content">
<h1>404 - Página não encontrada</h1>
<p>Ops! A página que você procura não existe ou foi movida.</p>
<nav class="error-navigation">
<h2>O que você pode fazer:</h2>
<ul>
<li><a href="index.html">Voltar para a página inicial</a></li>
<li><a href="portfolio.html">Ver nosso portfólio</a></li>
<li><a href="contato.html">Entrar em contato</a></li>
<li><a href="sitemap.html">Consultar o mapa do site</a></li>
</ul>
</nav>
<div class="search-box">
<h3>Ou procure por:</h3>
<form role="search">
<label for="search">Buscar no site:</label>
<input type="search" id="search" placeholder="Digite sua busca...">
<button type="submit">Buscar</button>
</form>
</div>
</div>
</main>
</body>
</html>projeto-final/
├── README.md # Documentação do projeto
├── index.html # Página principal
├── sobre.html # Página sobre
├── portfolio.html # Portfólio/produtos
├── servicos.html # Serviços/skills
├── contato.html # Contato
├── blog.html # Blog/notícias
├── artigo.html # Página de artigo
├── 404.html # Página de erro
├── sitemap.html # Mapa do site
├── assets/
│ ├── css/
│ │ └── style.css # Estilos (opcional, foco no HTML)
│ ├── images/
│ │ ├── optimized/ # Imagens otimizadas
│ │ └── original/ # Imagens originais
│ ├── videos/
│ └── docs/
├── validation/
│ ├── html-validation.pdf # Relatórios de validação
│ ├── accessibility.pdf # Relatório de acessibilidade
│ └── lighthouse.pdf # Relatório do Lighthouse
└── docs/
├── wireframes/ # Esboços e wireframes
├── planning.md # Documento de planejamento
└── reflection.md # Reflexão sobre o projeto# Projeto Final - Curso HTML Fundamentals
## Descrição
[Breve descrição do projeto e seu objetivo]
## Páginas Desenvolvidas
- **Home (index.html):** Landing page principal
- **Sobre (sobre.html):** Informações sobre a empresa/pessoa
- **Portfólio (portfolio.html):** Projetos e trabalhos realizados
- **Serviços (servicos.html):** Serviços oferecidos
- **Contato (contato.html):** Formulário e informações de contato
- **Blog (blog.html):** Lista de artigos
- **Artigo (artigo.html):** Página individual de artigo
- **404 (404.html):** Página de erro personalizada
- **Sitemap (sitemap.html):** Mapa do site
## Tecnologias Utilizadas
- HTML5
- CSS3 (básico para apresentação)
- Lazy loading nativo
- Imagens responsivas (srcset/picture)
## Funcionalidades Implementadas
- [x] Navegação responsiva
- [x] Formulário de contato funcional
- [x] Galeria de projetos
- [x] Blog integrado
- [x] SEO otimizado
- [x] Acessibilidade (WCAG 2.1)
## Validação
- ✅ HTML5 válido (W3C Validator)
- ✅ Acessibilidade aprovada (WAVE)
- ✅ Performance otimizada (Lighthouse)
## Como visualizar
1. Abra o arquivo `index.html` em um navegador
2. Navegue pelas diferentes páginas
3. Teste a responsividade
## Autor
[Seu nome]
Data: [Data de conclusão]Parabéns por chegar até aqui! Você desenvolveu um projeto completo aplicando todos os conceitos de HTML aprendidos durante o curso. Agora você tem um portfólio sólido para mostrar suas habilidades.