Módulo 2 / HTML & CSS

Projeto Prático

Landing page responsiva + Portfólio pessoal.

construction Aula 100% prática

school Aula 11 schedule 2 horas

O desafio

O que vamos construir

web Portfólio Pessoal

▸ Seção hero com seu nome e apresentação
▸ Seção "Sobre mim" com foto e bio
▸ Galeria de projetos com cards
▸ Seção de habilidades/tecnologias
▸ Formulário de contato
▸ Footer com links sociais

checklist Requisitos técnicos

▸ HTML semântico (header, main, section, footer)
▸ CSS externo (arquivo separado)
▸ Layout com Flexbox e/ou Grid
▸ Responsivo (mobile-first com media queries)
▸ Transições e animações CSS
▸ Aplicar tudo que aprendemos no módulo

Passo 1

Estrutura de pastas

portfolio/
├── index.html
├── css/
│   └── style.css
├── img/
│   ├── foto-perfil.jpg
│   ├── projeto-1.jpg
│   ├── projeto-2.jpg
│   └── projeto-3.jpg
└── README.md

folder_open Organizacão

▸ index.html estrutura da página

▸ css/style.css todos os estilos

▸ img/ imagens do projeto

info CSS externo em vez de inline facilita manutenção e reutilização.

Passo 2

HTML semântico

<body>
  <header>
    <nav> Logo + Links </nav>
  </header>

  <main>
    <section id="hero">
      Apresentação
    </section>

    <section id="sobre">
      Sobre mim
    </section>

    <section id="projetos">
      Galeria de projetos
    </section>

    <section id="habilidades">
      Skills / Tecnologias
    </section>

    <section id="contato">
      Formulário de contato
    </section>
  </main>

  <footer>
    Créditos + Redes sociais
  </footer>
</body>

Wireframe do layout:

Logo Home | Sobre | Projetos | Contato

Hero Section
Nome + Titulo + CTA

Foto

Sobre mim: bio e interesses

Projetos

Card

Habilidades

HTML CSS JS Git

Contato | Formulário

Footer

Passo 3

CSS: Reset e variáveis

/* Reset e base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Cores */
  --cor-primaria: #6366f1;
  --cor-fundo: #0f172a;
  --cor-texto: #e2e8f0;
  --cor-texto-suave: #94a3b8;

  /* Espaçamento */
  --espaco: 16px;
  --espaco-lg: 32px;

  /* Tipografia */
  --fonte: 'Inter', sans-serif;
}

body {
  font-family: var(--fonte);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
}

palette Por que variáveis CSS?

▸ Muda a cor em um lugar, reflete em todo o site
▸ Facilita manutenção e consistência
▸ Permite criar temas (dark/light)
▸ Padrão profissional do mercado

lightbulb Defina as variáveis no :root e use com var(--nome).

Passo 4

Navbar responsiva

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espaco);
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  z-index: 100;
}

.nav-links {
  display: none;     /* mobile: oculto */
  list-style: none;
  gap: var(--espaco-lg);
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;  /* desktop: visível */
  }
}

Conceitos aplicados:

view_stream

Flexbox space-between para distribuir logo e links

push_pin

Position fixed Navbar fica visível ao rolar

blur_on

Glassmorphism backdrop-filter: blur para efeito transparente

devices

Responsivo Links ocultos no mobile, visíveis no desktop

Passo 5

Hero e Projetos

Hero Section

#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

#hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  animation: fadeIn 1s ease;
}

Galeria de Projetos

.projetos-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit,
      minmax(280px, 1fr));
  gap: var(--espaco-lg);
}

.projeto-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.projeto-card:hover {
  transform: translateY(-8px);
}

Passo 6

Skills e Contato

Seção de Habilidades

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.skill-tag {
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  transition: all 0.3s ease;
}

.skill-tag:hover {
  background: var(--cor-primaria);
  color: white;
}

Formulário de Contato

.form-contato {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
}

.form-contato input,
.form-contato textarea {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.5);
  color: var(--cor-texto);
  transition: border-color 0.3s ease;
}

.form-contato input:focus {
  border-color: var(--cor-primaria);
  outline: none;
}

Revisão

Checklist de entrega

code HTML

check_box_outline_blank Tags semânticas (header, main, section, footer)
check_box_outline_blank Meta viewport
check_box_outline_blank Formulário com labels e inputs
check_box_outline_blank Imagens com alt text
check_box_outline_blank Links de navegação com âncoras

brush CSS

check_box_outline_blank Reset e box-sizing: border-box
check_box_outline_blank Variáveis CSS
check_box_outline_blank Flexbox e/ou Grid
check_box_outline_blank Media queries (mobile-first)
check_box_outline_blank Transições e animações
check_box_outline_blank Imagens responsivas

Avaliação

Critérios de avaliação

HTML semântico e estrutura

20%

Tags corretas, acessibilidade, organização do código

Layout (Flexbox / Grid)

25%

Uso correto de flex e/ou grid, alinhamento, espaçamento

Responsividade

25%

Mobile-first, media queries, imagens responsivas

Design e animações

20%

Estética visual, transições, hover effects

Criatividade e esforço

10%

Personalização, elementos extras, capricho no resultado final

Hora de construir

Mãos à obra!

rocket_launch Roteiro da aula prática

Crie a estrutura de pastas e o HTML base (15 min)
Escreva o CSS reset, variáveis e estilos globais (10 min)
Monte a navbar fixa com Flexbox (15 min)
Crie o hero section centralizado com animação fadeIn (10 min)
Monte a seção "Sobre mim" e os cards de projetos com Grid (25 min)
Adicione habilidades (tags) e formulário de contato (15 min)
Aplique responsividade com media queries (15 min)
Adicione transições, hovers e toques finais (15 min)

info Prazo de entrega: definido pelo professor. Projetos serão apresentados em aula!

Próxima aula

Aula 12

Fundamentos JavaScript: variáveis, tipos e operadores.

task_alt O que fizemos hoje

check_circle Estrutura completa de um portfólio pessoal
check_circle HTML semântico com todas as seções
check_circle CSS com variáveis, Flexbox e Grid
check_circle Responsividade mobile-first
check_circle Transições e animações aplicadas

Próxima aula

auto_stories Inspiração: Awwwards