Crie Seu Primeiro Portfólio Web: Um Guia Prático com HTML e CSS
Olá, futuro(a) desenvolvedor(a)!
Na nossa última aula, conversamos sobre como transformar um simples código em uma página de portfólio com a sua cara. Agora, é hora de colocar a mão na massa!
Este guia foi criado para que você possa consultar, copiar o código e, o mais importante, personalizar cada detalhe do seu primeiro grande projeto web.
Vamos embarcar nessa jornada?
A Estrutura: Nosso Esqueleto HTML
Toda página na internet, não importa quão complexa, começa com uma estrutura. Pense no HTML como o esqueleto do nosso site. Ele não é bonito sozinho, mas é ele que organiza e dá significado a todo o conteúdo.
Em nosso projeto, usamos algumas tags essenciais:
<html>,<head>,<body>: As tags fundamentais que formam qualquer página web.<header>: O nosso cabeçalho, aquela faixa azul no topo com o seu nome.<main>: Onde todo o conteúdo principal da página fica.<section>: Usamos para dividir nosso conteúdo em seções lógicas e significativas, como “Sobre mim”, “Meus Projetos” e “Contato”. É como criar capítulos em um livro.<div>: Uma “caixa” ou contêiner que usamos para agrupar elementos e, principalmente, aplicar nosso estilo (como os cards brancos).<h1>,<h2>,<h3>: Títulos e subtítulos, usados para criar hierarquia na informação.<p>: Parágrafos, para os textos corridos.<img>: Para exibir imagens, como a sua foto de perfil.<ul>e<li>: Para criar listas, como a de “Curiosidades”.<footer>: O nosso rodapé, aquela faixa azul no final com as informações de copyright.
Usar tags como <section> e <header> (o chamado HTML Semântico) torna nosso código mais profissional e compreensível para o navegador e para outras ferramentas.
A Aparência: Dando Vida com CSS Inline
Se o HTML é o esqueleto, o CSS (Cascading Style Sheets) é a pele, as roupas e a maquiagem. É o que dá cor, forma e vida à nossa página.
Neste projeto, usamos o CSS Inline, aplicando os estilos diretamente nas tags HTML através do atributo style="". É uma ótima forma de começar a ver o impacto visual do CSS imediatamente.
Vamos relembrar algumas propriedades que usamos:
background-color: Define a cor de fundo de um elemento.color: Define a cor do texto.padding: Cria um “respiro”, um espaçamento dentro das bordas de um elemento.margin: Cria um espaçamento fora das bordas, afastando um elemento de outro.border-radius: Permite arredondar os cantos de um elemento (foi o que usamos para deixar os cards e a foto de perfil mais suaves).box-shadow: Adiciona uma sombra, dando um efeito de profundidade e fazendo o elemento “flutuar”.
O Código-Base do Seu Portfólio
Chegou a hora! Abaixo está o código completo que usamos em aula. Você pode copiar e colar em seu editor de código preferido (como o VS Code, Sublime Text ou até o Bloco de Notas).
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[Seu Nome] | Portfólio</title>
</head>
<body style="margin:0; font-family: Arial, Helvetica, sans-serif; background:#dcdcdc; color:#111;">
<!-- Wrapper -->
<div style="max-width: 860px; margin: 16px auto; background:#e6e6e6; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.2); border: 6px solid #bfbfbf;">
<!-- Header -->
<header style="background:#243b83; color:#fff; padding: 20px 24px; text-align:center; position: relative;">
<h1 style="margin:0; font-size: 22px; letter-spacing:.3px;">[Seu Nome] | Portfólio</h1>
<p style="margin:6px 0 0 0; font-size: 12px; opacity:.95;">Estudante de Desenvolvimento de Sistemas</p>
</header>
<!-- Foto / destaque -->
<section style="padding: 24px; display:flex; justify-content:center; align-items:center;">
<img src="https://picsum.photos/300/200" alt="Sua foto ou imagem de destaque" style="width: 300px; height: 200px; object-fit: cover; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.25);" />
</section>
<!-- Sobre mim -->
<section style="padding: 0 24px 8px 24px;">
<div style="background:#fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.06);">
<h2 style="margin:0 0 8px 0; font-size: 18px;">Sobre mim</h2>
<p style="margin:0 0 12px 0; font-size: 14px; color:#333;">Texto sobre mim</p>
<h3 style="margin:0 0 8px 0; font-size: 16px;">Curiosidades sobre mim</h3>
<ul style="margin:0; padding-left: 18px; line-height:1.6; font-size: 14px;">
<li>Curiosidade 1</li>
<li>Curiosidade 2</li>
<li>Curiosidade 3</li>
</ul>
</div>
</section>
<!-- Projetos -->
<section style="padding: 8px 24px;">
<div style="background:#f6f6f6; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.06);">
<h2 style="margin:0 0 12px 0; font-size: 18px;">Meus Projetos</h2>
<div style="margin-bottom:14px;">
<h4 style="margin:0 0 4px 0; font-size: 14px; font-weight: 700;">Projeto 1 – <span style="font-weight:700;">Aula 02</span></h4>
<p style="margin:0 0 2px 0; font-size: 13px; color:#333;">Descrição do Projeto</p>
<a href="#" style="font-size:13px; color:#1e3a8a; text-decoration:none;">Link do Github Page</a>
</div>
<div>
<h4 style="margin:0 0 4px 0; font-size: 14px; font-weight: 700;">Projeto 2 – <span style="font-weight:700;">Aula 03</span></h4>
<p style="margin:0 0 2px 0; font-size: 13px; color:#333;">Descrição do Projeto</p>
<a href="#" style="font-size:13px; color:#1e3a8a; text-decoration:none;">Link do Github Page</a>
</div>
</div>
</section>
<!-- Contato -->
<section style="padding: 8px 24px 24px 24px;">
<div style="background:#fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.06);">
<h2 style="margin:0 0 8px 0; font-size: 18px;">Contato</h2>
<p style="margin:0; font-size: 14px; color:#333;">[seu email] | [sua rede social] | [seu telefone]</p>
</div>
</section>
<!-- Footer -->
<footer style="background:#243b83; color:#fff; padding: 16px 24px; text-align:left;">
<p style="margin:0; font-size: 14px;">2025 | [Seu nome] | Todos os direitos reservados</p>
</footer>
</div>
</body>
</html>
Mãos à Obra: Transformando o Template em Seu Portfólio
- Salve o Arquivo: Após copiar o código, salve o arquivo com um nome que termine em
.html. Por exemplo:meu-portfolio.html. - Abra no Navegador: Encontre o arquivo que você salvou e dê um duplo clique. Ele abrirá diretamente no seu navegador e você verá a página pronta!
- Personalize o Conteúdo: Agora vem a parte divertida! Abra o arquivo
.htmlnovamente no seu editor de código e comece a alterar os textos. Troque tudo que está entre[], escreva sobre você, liste seus projetos e adicione suas informações de contato. - Troque a Imagem: Para alterar a foto de perfil, encontre uma imagem na internet, clique com o botão direito sobre ela e selecione “Copiar endereço da imagem”. Cole esse novo link dentro do atributo
src=""da tag<img>.
Desafio: Deixe o Portfólio com a Sua Identidade!
Já personalizou o conteúdo? Ótimo! Que tal ir além e mudar o design?
- Mude a Paleta de Cores: A cor principal do nosso site é um azul escuro (
#2c3e50). Tente trocá-la por outra! Use o Google Color Picker para encontrar o código de uma cor que você goste e substitua em todos os lugares onde o azul aparece (noheader,footere nos bullet points). - Adicione uma Nova Seção: Que tal criar uma seção de “Habilidades”? Copie e cole o código de uma
<section>existente e adapte o conteúdo para listar as tecnologias que você está aprendendo. - Explore Novas Fontes: Altere a propriedade
font-family: sans-serif;na tag<body>para outras fontes genéricas comoserif,monospaceoucursive.
Próximos Passos
Parabéns por criar seu primeiro portfólio! O método de CSS inline que usamos é fantástico para aprender e ver resultados rápidos.
No mundo do desenvolvimento web, o próximo passo é organizar nosso CSS em um arquivo separado (.css). Isso torna o código muito mais limpo, reutilizável e fácil de manter, especialmente em projetos grandes. Mas não se preocupe, veremos isso em breve!
Continue explorando, testando e, o mais importante, se divertindo. Se tiver qualquer dúvida, deixe um comentário abaixo ou me procure em sala.
Boons estudos!
Publicar comentário