Destino Dev

Cursos

Portfólio Pessoal com HTML, CSS e JavaScript

Neste curso prático, você vai construir do zero um Portfólio Pessoal completo e profissional utilizando HTML semântico, CSS moderno (Flexbox, Grid, animações) e JavaScript puro. Um portfólio bem feito é um dos seus ativos mais valiosos no mercado de desenvolvimento web — é a primeira impressão que recrutadores e clientes têm do seu trabalho.

Você vai aprender a criar uma estrutura HTML5 semântica e acessível, estilizar cada seção com CSS moderno usando variáveis customizadas, Flexbox e Grid Layout. O JavaScript será utilizado para implementar interatividades como menu mobile, filtro de projetos, validação de formulário e efeito de scroll suave.

Ao final, você terá um portfólio responsivo, moderno e otimizado — pronto para hospedar no GitHub Pages com domínio personalizado. Este projeto é ideal para demonstrar suas habilidades técnicas e conquistar seu primeiro emprego ou cliente como desenvolvedor web.

O que você vai aprender

Construir um portfólio pessoal profissional do zero Dominar HTML5 semântico e acessível Aplicar CSS Flexbox e Grid em projetos reais Implementar interatividade com JavaScript puro Criar layouts 100% responsivos com media queries Fazer deploy gratuito no GitHub Pages

Pré-requisitos

Conhecimentos básicos de HTML e CSS Noções de JavaScript (variáveis, funções, eventos) Editor de código instalado (VSCode recomendado) Navegador web moderno (Chrome ou Firefox)

Conteúdo do curso

Módulo 1: Módulo 1 — Introdução e Setup do Projeto

Conheça o projeto que você vai construir, configure seu ambiente de desenvolvimento e entenda a estrutura de arquivos do portfólio.

  1. O que vamos construir — Visão Geral do Portfólio (12 min)
  2. Configurando o Ambiente de Desenvolvimento (15 min)
  3. Estrutura do Projeto e Arquitetura de Arquivos (18 min)

Módulo 2: Módulo 2 — Estrutura HTML Semântica

Construa o esqueleto HTML5 do portfólio com semântica correta, seção hero, sobre mim, lista de projetos e formulário de contato.

  1. Criando o Esqueleto HTML5 do Portfólio (20 min)
  2. Seção Sobre Mim e Habilidades (18 min)
  3. Seção de Projetos com Cards (20 min)
  4. Formulário de Contato e Footer (15 min)

Módulo 3: Módulo 3 — Estilização com CSS Moderno

Aplique CSS profissional com variáveis customizadas, Flexbox, Grid Layout, animações e efeitos hover para dar vida ao portfólio.

  1. Reset CSS e Variáveis Customizadas (20 min)
  2. Navegação Responsiva com Flexbox (22 min)
  3. Seção Hero com Gradiente e Animações (25 min)
  4. Cards de Projetos com CSS Grid e Hover (22 min)
  5. Responsividade Completa com Media Queries (20 min)

Módulo 4: Módulo 4 — JavaScript: Interatividade

Adicione interatividade real ao portfólio com menu mobile, filtro de projetos, scroll suave e validação de formulário.

  1. Menu Mobile com Toggle e Overlay (22 min)
  2. Scroll Suave e Spy de Seção Ativa (20 min)
  3. Filtro de Projetos por Tecnologia (20 min)
  4. Validação do Formulário de Contato (22 min)

Módulo 5: Módulo 5 — Animações e Polimento

Eleve o nível visual do portfólio com animações de entrada, tema escuro/claro e otimizações de performance e acessibilidade.

  1. Animações de Entrada com Intersection Observer (20 min)
  2. Tema Escuro e Claro com CSS Variables (18 min)
  3. Otimização de Performance e Acessibilidade (18 min)

Módulo 6: Módulo 6 — Deploy e Conclusão

Publique seu portfólio gratuitamente no GitHub Pages, configure um domínio personalizado e saiba quais melhorias implementar a seguir.

  1. Deploy Gratuito no GitHub Pages (20 min)
  2. Domínio Personalizado e HTTPS (15 min)
  3. Próximos Passos e Melhorias (12 min)