CENTRAL STACKConteúdo tech
Projetos

Comece pelo essencial: criando a estrutura HTML do seu portfólio

Aprenda a montar a estrutura HTML base de um portfólio profissional single page, com seções de apresentação, sobre, habilidades, projetos e contato, pronta para receber CSS e JavaScript nas próximas partes da trilha.

Por Equipe Central Stack08/07/20268 minGuia prático
portfoliohtmlestrutura htmlfrontendprojetos práticosiniciantedesenvolvimento web

Compartilhar

Envie este conteúdo para sua rede ou salve o link para publicar depois.

Trilha: Projeto Portfólio Profissional

Este conteúdo é a Parte 1 de 6 da trilha Projeto Portfólio Profissional. Acompanhe o hub da trilha: /projetos/criar-portfolio-profissional

Parte 1 de 6 — esta parte ensina apenas a estrutura HTML. CSS, responsividade, JavaScript, personalização e publicação virão nas próximas partes.

Como esta trilha está organizada

  • 1. Comece pelo essencial: criando a estrutura HTML do seu portfólio — /projetos/portfolio-html-estrutura — Status: parte atual
  • 2. Deixe com cara profissional: estilizando o portfólio com CSS moderno — /projetos/portfolio-css-layout-profissional — Status: disponível agora
  • 3. Dê vida ao portfólio: adicionando interações com JavaScript — /projetos/portfolio-javascript-interacoes — Status: disponível agora
  • 4. Portfólio responsivo: adaptando sua página para celular, tablet e desktop — /projetos/portfolio-css-responsivo — Status: disponível agora
  • 5. Transforme o modelo no seu portfólio: personalizando textos, links e projetos — /projetos/portfolio-personalizar-conteudo — Status: disponível agora
  • 6. Coloque no ar: publicando seu portfólio no GitHub Pages — /projetos/portfolio-publicar-online — Status: disponível agora

Introdução

Um portfólio é uma das páginas mais importantes para quem está começando em programação. Ele organiza seus projetos, mostra suas habilidades e facilita o compartilhamento do seu trabalho com recrutadores e colegas.

Nesta parte da trilha vamos focar apenas na estrutura HTML do seu portfólio. O objetivo é criar o esqueleto da página para que, nas próximas partes, você adicione o visual com CSS e as interações com JavaScript.

Antes de começar: estrutura de arquivos

estrutura
portfolio-profissional/
├── index.html
├── style.css
├── script.js
└── assets/
    └── foto-perfil.png

Função dos arquivos: - index.html: recebe a estrutura da página (HTML). - style.css: receberá o visual (CSS) na próxima parte. - script.js: receberá as interações com JavaScript em uma etapa posterior. - assets/: pasta para imagens, ícones e outros arquivos do projeto.

Criando a base do HTML

A base do HTML é o esqueleto da sua página. Abaixo está um exemplo mínimo que você pode usar como ponto de partida. Substitua os textos e os links pelos seus dados quando for personalizar o projeto.

index.html
<!doctype html>
<html lang="pt-BR">
  <head>
    <!-- Configuração inicial: acentos, responsividade, SEO básico e conexão com o CSS. -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="Portfólio profissional - seu resumo e projetos." />
    <title>Seu Nome — Portfólio</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <!-- Conteúdo visual: aqui entram menu, seções, projetos e contato. -->

    <!-- JavaScript: fica no final para carregar depois do conteúdo principal. -->
    <script src="/script.js"></script>
  </body>
</html>

Criando o menu de navegação

O menu ajuda o visitante a navegar rapidamente entre as seções da página single page. Use links internos ( âncoras ) que apontem para os ids das seções.

index.html
<nav id="navbar">
  <!-- Navegação: logo do portfólio e links internos para as seções da página. -->
  <div class="logo">Seu Nome</div>

  <ul class="nav-links">
    <li><a href="#home">Início</a></li>
    <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>
</nav>

Criando a seção inicial do portfólio (hero)

A seção inicial (hero) apresenta você de forma clara. Use um título com seu nome, cargo, uma breve descrição e botões para ações principais.

index.html
<section id="home" class="hero">
  <!-- Apresentação: título, função, resumo curto e botões principais. -->
  <div class="hero-content">
    <h1>Olá, eu sou Seu Nome</h1>
    <p class="role">Desenvolvedor Front-end</p>
    <p class="lead">Crio interfaces simples, responsivas e focadas em experiência do usuário. Escreva uma breve apresentação sobre você.</p>

    <div class="hero-actions">
      <a href="#projetos" class="btn">Ver projetos</a>
      <a href="#contato" class="btn btn-outline">Contato</a>
    </div>
  </div>

  <!-- Imagem: foto ou avatar genérico para humanizar a primeira dobra. -->
  <div class="hero-image">
    <img src="/assets/foto-perfil.png" alt="Foto de perfil genérica" />
  </div>
</section>

Criando a seção Sobre

A seção Sobre permite contar um pouco sobre sua trajetória de forma genérica. Use parágrafos curtos e cards para destacar informações rápidas.

index.html
<section id="sobre">
  <!-- Sobre: texto curto e cards rápidos para o visitante entender seu perfil. -->
  <h2>Sobre</h2>
  <p>Escreva uma breve apresentação sobre você, seu foco e objetivos.</p>

  <div class="info-cards">
    <div class="card">
      <strong>Localização</strong>
      <p>Sua cidade</p>
    </div>
    <div class="card">
      <strong>Formação</strong>
      <p>Seu curso ou área de estudo</p>
    </div>
    <div class="card">
      <strong>Foco</strong>
      <p>Front-end, UI e projetos web</p>
    </div>
    <div class="card">
      <strong>Disponibilidade</strong>
      <p>Aberto a oportunidades</p>
    </div>
  </div>
</section>

Criando a seção Habilidades

Liste as tecnologias que você conhece ou está estudando. Na próxima parte da trilha vamos estilizar esses itens com CSS.

index.html
<section id="habilidades">
  <!-- Habilidades: lista simples que será transformada em grid visual com CSS. -->
  <h2>Habilidades</h2>

  <ul class="skills-grid">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Git</li>
    <li>GitHub</li>
    <li>Responsividade</li>
  </ul>
</section>

Criando a seção Projetos

Mostre alguns projetos com cards simples. Cada card deve ter título, descrição curta, tecnologias usadas e links (substitua href="#" pelos seus links reais depois).

index.html
<section id="projetos">
  <!-- Projetos: cada article representa um card de trabalho do portfólio. -->
  <h2>Projetos</h2>

  <div class="projects-grid">
    <article class="project-card">
      <h3>Projeto 1</h3>
      <p>Descrição curta do projeto 1.</p>
      <p class="tech">HTML · CSS · JavaScript</p>
      <p>
        <a href="#">Ver projeto</a> · <a href="#">GitHub</a>
      </p>
    </article>

    <article class="project-card">
      <h3>Projeto 2</h3>
      <p>Descrição curta do projeto 2.</p>
      <p class="tech">HTML · CSS</p>
      <p>
        <a href="#">Ver projeto</a> · <a href="#">GitHub</a>
      </p>
    </article>

    <article class="project-card">
      <h3>Projeto 3</h3>
      <p>Descrição curta do projeto 3.</p>
      <p class="tech">JavaScript · API</p>
      <p>
        <a href="#">Ver projeto</a> · <a href="#">GitHub</a>
      </p>
    </article>
  </div>
</section>

Criando a seção Contato

Insira formas de contato genéricas que o visitante possa usar para te achar. Substitua pelos seus dados reais apenas quando estiver pronto.

index.html
<section id="contato">
  <h2>Contato</h2>
  <ul>
    <li>Email: <a href="mailto:seu-email@exemplo.com">seu-email@exemplo.com</a></li>
    <li>GitHub: <a href="https://github.com/seu-usuario">https://github.com/seu-usuario</a></li>
    <li>LinkedIn: <a href="https://linkedin.com/in/seu-usuario">https://linkedin.com/in/seu-usuario</a></li>
  </ul>
  <p>
    <a href="#contato" class="btn">Entrar em contato</a>
  </p>
</section>

HTML final organizado

Abaixo uma versão resumida e organizada do HTML final com as seções principais. Copie como base e adapte textos, links e imagens para o seu caso.

index.html
<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="Portfólio profissional - seu resumo e projetos." />
    <title>Seu Nome — Portfólio</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <nav id="navbar"> ... </nav>

    <section id="home"> ... </section>
    <section id="sobre"> ... </section>
    <section id="habilidades"> ... </section>
    <section id="projetos"> ... </section>
    <section id="contato"> ... </section>

    <footer> ... </footer>

    <script src="/script.js"></script>
  </body>
</html>

Próximo passo da trilha

A estrutura HTML está pronta. Na próxima parte da trilha vamos trabalhar o visual com CSS: /projetos/portfolio-css-layout-profissional.

Depois de estilizar, seguiremos para responsividade e interações com JavaScript. Siga a ordem da trilha para aprender passo a passo.

Fontes utilizadas