Projeto: Seu Portfólio
Chegou a hora de colocar tudo em prática! Vamos criar um portfólio profissional do zero.
O que vamos criar
Um site pessoal com:
- Header com navegação
- Seção hero (apresentação)
- Seção sobre
- Seção de habilidades
- Seção de projetos
- Formulário de contato
- Footer
Estrutura de arquivos
portfolio/
├── index.html
├── style.css
└── script.js
HTML Completo
html
<!DOCTYPE html><html lang="pt-BR"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seu Nome | Desenvolvedor</title> <link rel="stylesheet" href="style.css"></head><body> <!-- Header --> <header id="header"> <nav class="nav"> <a href="#" class="logo">SeuNome</a> <ul class="nav-list"> <li><a href="#sobre">Sobre</a></li> <li><a href="#habilidades">Habilidades</a></li> <li><a href="#projetos">Projetos</a></li> <li><a href="#contato">Contato</a></li> </ul> <button id="btn-tema">🌙</button> </nav> </header> <!-- Hero --> <section class="hero"> <div class="hero-content"> <p class="hero-subtitle">Olá, eu sou</p> <h1 class="hero-title">Seu Nome</h1> <p class="hero-description"> Desenvolvedor em formação, apaixonado por criar soluções com código. </p> <div class="hero-buttons"> <a href="#projetos" class="btn btn-primary">Ver Projetos</a> <a href="#contato" class="btn btn-outline">Contato</a> </div> </div> </section> <!-- Sobre --> <section id="sobre" class="section"> <div class="container"> <h2 class="section-title">Sobre Mim</h2> <div class="sobre-content"> <div class="sobre-texto"> <p> Olá! Meu nome é [Seu Nome] e estou em transição de carreira para a área de tecnologia. Descobri minha paixão por programação em 2026 e desde então venho estudando diariamente. </p> <p> Meu objetivo é me tornar um desenvolvedor completo, criando soluções que impactem positivamente a vida das pessoas. </p> <p> Quando não estou programando, gosto de [seus hobbies]. </p> </div> </div> </div> </section> <!-- Habilidades --> <section id="habilidades" class="section section-alt"> <div class="container"> <h2 class="section-title">Habilidades</h2> <div class="habilidades-grid"> <div class="habilidade-card"> <span class="habilidade-icon">📄</span> <h3>HTML</h3> <p>Estruturação semântica de páginas web</p> </div> <div class="habilidade-card"> <span class="habilidade-icon">🎨</span> <h3>CSS</h3> <p>Estilização e layouts responsivos</p> </div> <div class="habilidade-card"> <span class="habilidade-icon">⚡</span> <h3>JavaScript</h3> <p>Interatividade e lógica de programação</p> </div> <div class="habilidade-card"> <span class="habilidade-icon">🔧</span> <h3>Git</h3> <p>Controle de versão e colaboração</p> </div> </div> </div> </section> <!-- Projetos --> <section id="projetos" class="section"> <div class="container"> <h2 class="section-title">Projetos</h2> <div class="projetos-grid"> <article class="projeto-card"> <div class="projeto-imagem"> <img src="https://via.placeholder.com/400x250" alt="Projeto 1"> </div> <div class="projeto-info"> <h3>Lista de Tarefas</h3> <p>Aplicação para gerenciar tarefas diárias com localStorage.</p> <div class="projeto-tags"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </div> <div class="projeto-links"> <a href="#" class="btn btn-small">Ver Projeto</a> <a href="#" class="btn btn-small btn-outline">GitHub</a> </div> </div> </article> <article class="projeto-card"> <div class="projeto-imagem"> <img src="https://via.placeholder.com/400x250" alt="Projeto 2"> </div> <div class="projeto-info"> <h3>Calculadora</h3> <p>Calculadora funcional com design moderno.</p> <div class="projeto-tags"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </div> <div class="projeto-links"> <a href="#" class="btn btn-small">Ver Projeto</a> <a href="#" class="btn btn-small btn-outline">GitHub</a> </div> </div> </article> </div> </div> </section> <!-- Contato --> <section id="contato" class="section section-alt"> <div class="container"> <h2 class="section-title">Contato</h2> <p class="section-subtitle"> Quer trabalhar junto ou tem alguma pergunta? Entre em contato! </p> <form id="form-contato" class="form-contato"> <div class="form-group"> <input type="text" id="nome" placeholder="Seu nome" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Seu email" required> </div> <div class="form-group"> <textarea id="mensagem" placeholder="Sua mensagem" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary btn-full">Enviar Mensagem</button> </form> <div id="form-sucesso" class="form-sucesso" hidden> ✅ Mensagem enviada com sucesso! </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-social"> <a href="https://github.com/seuuser" target="_blank">GitHub</a> <a href="https://linkedin.com/in/seuuser" target="_blank">LinkedIn</a> </div> <p>© 2026 Seu Nome. Todos os direitos reservados.</p> </div> </footer> <script src="script.js"></script></body></html>CSS Completo
css
/* Reset e variáveis */* { margin: 0; padding: 0; box-sizing: border-box;} :root { --cor-primaria: #6366f1; --cor-primaria-hover: #4f46e5; --cor-texto: #1f2937; --cor-texto-leve: #6b7280; --cor-fundo: #ffffff; --cor-fundo-alt: #f3f4f6; --cor-borda: #e5e7eb;} body.dark-mode { --cor-texto: #f3f4f6; --cor-texto-leve: #9ca3af; --cor-fundo: #111827; --cor-fundo-alt: #1f2937; --cor-borda: #374151;} body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); line-height: 1.6;} /* Container */.container { max-width: 1100px; margin: 0 auto; padding: 0 20px;} /* Header */#header { position: fixed; top: 0; left: 0; right: 0; background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); z-index: 1000;} .nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; max-width: 1100px; margin: 0 auto;} .logo { font-size: 1.5rem; font-weight: bold; color: var(--cor-primaria); text-decoration: none;} .nav-list { display: flex; list-style: none; gap: 30px;} .nav-list a { color: var(--cor-texto); text-decoration: none; transition: color 0.3s;} .nav-list a:hover { color: var(--cor-primaria);} #btn-tema { background: none; border: none; font-size: 1.5rem; cursor: pointer;} /* Hero */.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px 40px;} .hero-subtitle { color: var(--cor-primaria); font-size: 1.1rem; margin-bottom: 10px;} .hero-title { font-size: 3.5rem; margin-bottom: 20px;} .hero-description { font-size: 1.2rem; color: var(--cor-texto-leve); max-width: 500px; margin: 0 auto 30px;} .hero-buttons { display: flex; gap: 15px; justify-content: center;} /* Botões */.btn { display: inline-block; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s; cursor: pointer; border: none; font-size: 1rem;} .btn-primary { background: var(--cor-primaria); color: white;} .btn-primary:hover { background: var(--cor-primaria-hover);} .btn-outline { border: 2px solid var(--cor-primaria); color: var(--cor-primaria); background: transparent;} .btn-outline:hover { background: var(--cor-primaria); color: white;} .btn-small { padding: 8px 16px; font-size: 0.9rem;} .btn-full { width: 100%;} /* Seções */.section { padding: 80px 0;} .section-alt { background: var(--cor-fundo-alt);} .section-title { font-size: 2rem; text-align: center; margin-bottom: 50px;} .section-subtitle { text-align: center; color: var(--cor-texto-leve); margin-bottom: 30px;} /* Sobre */.sobre-texto p { margin-bottom: 15px; color: var(--cor-texto-leve);} /* Habilidades */.habilidades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;} .habilidade-card { background: var(--cor-fundo); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid var(--cor-borda); transition: transform 0.3s;} .habilidade-card:hover { transform: translateY(-5px);} .habilidade-icon { font-size: 2.5rem; display: block; margin-bottom: 15px;} .habilidade-card h3 { margin-bottom: 10px;} .habilidade-card p { color: var(--cor-texto-leve); font-size: 0.9rem;} /* Projetos */.projetos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px;} .projeto-card { background: var(--cor-fundo); border-radius: 12px; overflow: hidden; border: 1px solid var(--cor-borda);} .projeto-imagem img { width: 100%; height: 200px; object-fit: cover;} .projeto-info { padding: 20px;} .projeto-info h3 { margin-bottom: 10px;} .projeto-info p { color: var(--cor-texto-leve); margin-bottom: 15px;} .projeto-tags { display: flex; gap: 10px; margin-bottom: 15px;} .projeto-tags span { background: var(--cor-fundo-alt); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem;} .projeto-links { display: flex; gap: 10px;} /* Formulário */.form-contato { max-width: 500px; margin: 0 auto;} .form-group { margin-bottom: 20px;} .form-contato input,.form-contato textarea { width: 100%; padding: 15px; border: 1px solid var(--cor-borda); border-radius: 8px; font-size: 1rem; background: var(--cor-fundo); color: var(--cor-texto);} .form-contato input:focus,.form-contato textarea:focus { outline: none; border-color: var(--cor-primaria);} .form-sucesso { text-align: center; padding: 20px; background: #d1fae5; color: #065f46; border-radius: 8px; margin-top: 20px;} /* Footer */.footer { text-align: center; padding: 30px; border-top: 1px solid var(--cor-borda);} .footer-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px;} .footer-social a { color: var(--cor-texto); text-decoration: none;} .footer-social a:hover { color: var(--cor-primaria);} /* Responsivo */@media (max-width: 768px) { .nav-list { display: none; } .hero-title { font-size: 2.5rem; } .hero-buttons { flex-direction: column; }}JavaScript
javascript
// Tema escuro/claroconst btnTema = document.querySelector('#btn-tema'); btnTema.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); btnTema.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';}); // Formulário de contatoconst form = document.querySelector('#form-contato');const formSucesso = document.querySelector('#form-sucesso'); form.addEventListener('submit', (e) => { e.preventDefault(); // Simula envio form.style.display = 'none'; formSucesso.hidden = false; // Limpa após 3 segundos setTimeout(() => { form.reset(); form.style.display = 'block'; formSucesso.hidden = true; }, 3000);}); // Scroll suave para linksdocument.querySelectorAll('a[href^="#"]').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const id = link.getAttribute('href'); document.querySelector(id)?.scrollIntoView({ behavior: 'smooth' }); });});Próximos passos
- Personalize com suas informações
- Adicione projetos reais conforme for criando
- Hospede gratuitamente no GitHub Pages ou Vercel
- Melhore continuamente conforme aprende mais
Parabéns! Você criou seu primeiro projeto completo! 🎉
Na próxima aula, vamos falar sobre os próximos passos na sua carreira! 🚀