Front-endInicianteNão iniciado

Página Pessoal / Portfólio

Criar uma página pessoal para apresentar quem você é e seus projetos.

em 1 a 2 semanas
6 a 10 h
em 1 a 2 semanas
o que você entrega
Site no ar + repositório
o que você entrega
com checkpoint
5 etapas
com checkpoint
de aceite
10 requisitos
de aceite
0 de 5 etapas

Por que este projeto

Um recrutador abre o link que você mandou e tem 30 segundos. Nesse tempo ele precisa entender quem você é, o que você está estudando, ver que você já construiu alguma coisa e saber como te chamar. Sua página pessoal é a resposta para esses 30 segundos. Não precisa ser bonita como a de um designer. Precisa ser clara, funcionar no celular e estar no ar. Este é o primeiro projeto que você vai poder colocar no LinkedIn e no currículo com link, e é onde todos os seus próximos projetos vão morar.

Você vai sair sabendo

Estruturar uma página com HTML semânticoAlinhar elementos com FlexboxFazer a página funcionar no celularVersionar com Git e GitHubPublicar um site de graça no GitHub Pages

O que precisa estar lá no fim

É o contrato do projeto. Quando os 10 estiverem verdade, você terminou.

  • A página abre num link público (GitHub Pages ou Netlify) sem erro
  • Header com seu nome e um menu com pelo menos 3 links que levam às seções da própria página
  • Seção Sobre com foto ou avatar e um parágrafo de até 5 linhas dizendo quem você é e o que está estudando
  • Seção Projetos com pelo menos 2 cards, cada um com título, descrição de 1 a 2 linhas e link
  • Seção Contato com link do LinkedIn, do GitHub e um e-mail clicável
  • Funciona em tela de celular (375 px de largura) sem rolagem horizontal
  • Usa as tags header, nav, main, section e footer
  • Cores, fontes e espaçamentos num arquivo .css separado, sem estilo inline
  • Repositório público com README contendo o que é o projeto, o link do site no ar e um print
  • Histórico com pelo menos 5 commits com mensagens que dizem o que mudou

Etapas

  1. Planejar

    30 min
    • Rabisque as 4 seções no papel ou no Figma.
    • Escreva o texto do Sobre e escolha os 2 projetos que vão nos cards.

    Pronto quando: Você tem o texto e a lista dos 2 projetos, mesmo que um deles seja este site.

  2. Estrutura em HTML

    1 a 2 h
    • Crie index.html com as 4 seções e o conteúdo real, sem CSS ainda.
    • Faça o menu apontar para as seções com âncoras.

    Pronto quando: A página abre no navegador e clicar no menu rola até a seção certa.

  3. Estilo em CSS

    2 a 4 h
    • Crie style.css.
    • Defina cores e fonte, alinhe o menu e os cards com Flexbox, dê espaço entre as seções.

    Pronto quando: A página parece uma página, não um documento de texto.

  4. Celular

    1 h
    • Abra as ferramentas do navegador, simule 375 px e ajuste com uma media query.

    Pronto quando: Nada vaza para o lado e o menu continua usável.

  5. Publicar

    30 min
    • Crie o repositório no GitHub, suba os arquivos, escreva o README, ative o GitHub Pages.

    Pronto quando: O link abre numa aba anônima.

Entrega

Terminou? Marque a conclusão e o projeto vira parte do seu perfil.

Depois

Post pronto para o LinkedIn

Coloquei meu primeiro site no ar. Uma página pessoal feita do zero, com HTML e CSS, publicada de graça no GitHub Pages. Sem framework, sem template. O que aprendi fazendo: • HTML semântico (header, nav, main, section, footer) • Flexbox para alinhar sem sofrer • Deixar a página funcionar no celular • Git e GitHub para versionar cada passo O mais difícil foi [conta aqui]. O melhor momento foi ver o link abrir numa aba anônima. É o começo do meu portfólio em tecnologia. Link nos comentários. #frontend #html #css #primeiroprojeto #boranatech

Próximo projetoClone de landing page famosaFront-end · Iniciante