Projeto Integrador de Portfólio

A presente aula consolida todos os conhecimentos desenvolvidos anteriormente:

fundamentos da Web;
HTML5 semântico;
CSS3 moderno;
layouts responsivos;
componentização;
acessibilidade, SEO e performance;
workflow profissional e deploy.

Este módulo possui caráter:

integrador;
prático;
profissionalizante;
avaliativo;
orientado a portfólio.

O foco deixa de ser “aprender conceitos isolados” e passa a ser:

consolidar competências;
construir projeto real;
organizar código profissionalmente;
publicar aplicações;
demonstrar maturidade técnica;
criar presença profissional inicial.

Objetivos do Módulo

Ao final deste módulo o estudante deverá ser capaz de:

planejar um projeto Front-end completo;
estruturar aplicações modernas;
utilizar HTML5 semântico;
aplicar CSS3 moderno;
construir layouts responsivos;
reutilizar componentes;
aplicar acessibilidade básica;
otimizar estrutura para SEO;
organizar projetos profissionalmente;
publicar projetos online;
construir portfólio inicial.

Estrutura Geral do Projeto Integrador

O projeto deverá conter:

HTML5 semântico;
CSS3 moderno;
layout responsivo;
componentes reutilizáveis;
organização visual consistente;
acessibilidade básica;
SEO técnico básico;
deploy online;
README profissional;
estrutura de projeto organizada.

Requisitos Técnicos Obrigatórios

Requisito	Obrigatório
HTML5 semântico	Sim
Responsividade	Sim
CSS organizado	Sim
GitHub	Sim
Deploy	Sim
README	Sim
Navegação funcional	Sim
Imagens otimizadas	Sim
Estrutura acessível	Sim

Estrutura Recomendada do Projeto

projeto-final/
│
├── index.html
├── style.css
├── README.md
├── imagens/
│   ├── banner.webp
│   └── projeto.webp
└── paginas/

Fluxo Profissional Recomendado

Planejamento
      ↓
Wireframe simples
      ↓
Estrutura HTML5
      ↓
CSS3 moderno
      ↓
Responsividade
      ↓
Acessibilidade
      ↓
SEO
      ↓
Validação
      ↓
GitHub
      ↓
Deploy

1. Planejamento do Projeto

Fundamentação Teórica

Projetos profissionais não começam diretamente pelo código.

Mesmo aplicações simples precisam:

organização;
definição de objetivo;
estrutura visual;
hierarquia de conteúdo;
planejamento de componentes.

Estrutura Recomendada de Seções

Seção	Finalidade
Header	Navegação
Hero	Destaque principal
Sobre	Informações
Projetos	Portfólio
Tecnologias	Competências
Contato	Comunicação
Footer	Informações finais

Wireframe Conceitual

HEADER
MENU

HERO
TÍTULO + CTA

PROJETOS
CARDS

SOBRE

CONTATO

FOOTER

Exemplo 1 — Estrutura Inicial de Projeto

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <meta name="description"
          content="Portfólio Front-end moderno">

    <title>
        Portfólio Front-end
    </title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <header class="topo">

        <h1>
            Fernandes Front-end
        </h1>

        <nav>

            <a href="#projetos">
                Projetos
            </a>

            <a href="#contato">
                Contato
            </a>

        </nav>

    </header>

    <main>

        <section class="hero">

            <h2>
                Desenvolvimento Web Moderno
            </h2>

            <p>
                HTML5, CSS3 e responsividade.
            </p>

        </section>

    </main>

</body>
</html>

Arquivo: `style.css`

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f5f5f5;
}

.topo {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    background-color: #003366;

    color: white;
}

nav {

    display: flex;

    gap: 20px;
}

nav a {

    color: white;

    text-decoration: none;
}

.hero {

    min-height: 70vh;

    display: grid;

    place-items: center;

    text-align: center;

    padding: 40px;
}

Exemplo 2 — Estrutura Modular Profissional

Estrutura de Pastas

portfolio/
│
├── css/
│   ├── style.css
│   ├── cards.css
│   └── buttons.css
│
├── imagens/
│
├── index.html
└── README.md

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>
        Projeto Modular
    </title>

    <link rel="stylesheet"
          href="css/style.css">

</head>
<body>

    <main class="container">

        <article class="card">

            <h2>
                Projeto Responsivo
            </h2>

            <p>
                Estrutura modular profissional.
            </p>

            <button class="botao">
                Visualizar
            </button>

        </article>

    </main>

</body>
</html>

Arquivo: `css/style.css`

@import url("cards.css");
@import url("buttons.css");

body {

    margin: 0;

    padding: 40px;

    font-family: Arial;

    background-color: #eef2f5;
}

.container {

    display: grid;

    place-items: center;
}

Arquivo: `css/cards.css`

.card {

    width: min(90%, 500px);

    padding: 24px;

    background-color: white;

    border-radius: 16px;

    box-shadow:
        0 8px 16px rgba(0,0,0,0.08);
}

Arquivo: `css/buttons.css`

.botao {

    padding: 12px 20px;

    border: none;

    border-radius: 8px;

    background-color: #004b8d;

    color: white;

    cursor: pointer;
}

Discussão Técnica

A modularização:

melhora manutenção;
reduz repetição;
facilita escalabilidade;
aproxima o profissional do mercado profissional.

Referências

Livros

Atomic Design
Refactoring UI

Sites

2. Construção de Landing Page Profissional

Fundamentação Teórica

Landing pages são amplamente utilizadas em:

marketing digital;
SaaS;
eventos;
produtos;
cursos;
empresas.

Seu objetivo é:

destacar conteúdo;
comunicar rapidamente;
organizar informações;
conduzir ações.

Estrutura Recomendada

Hero
Benefícios
Cards
CTA
Footer

Exemplo 1 — Hero Responsivo

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>
        Landing Page
    </title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <section class="hero">

        <div class="conteudo">

            <h1>
                Curso Front-end Moderno
            </h1>

            <p>
                HTML5, CSS3 e interfaces profissionais.
            </p>

            <a href="#"
               class="botao">

               Começar

            </a>

        </div>

    </section>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    font-family: Arial;
}

.hero {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px;

    background:
        linear-gradient(
            135deg,
            #003366,
            #005599
        );

    color: white;
}

.conteudo {

    max-width: 700px;
}

h1 {

    font-size:
        clamp(2rem, 6vw, 5rem);
}

.botao {

    display: inline-block;

    margin-top: 20px;

    padding: 14px 24px;

    background-color: white;

    color: #003366;

    border-radius: 8px;

    text-decoration: none;
}

Discussão Técnica

A função:

font\text{-}size:\ clamp(2rem,\ 6vw,\ 5rem)

permite:

tipografia fluida;
melhor adaptação responsiva;
UX moderna.

Exemplo 2 — Grid de Recursos

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>
        Recursos
    </title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <main class="grid">

        <article class="card">

            <h2>
                HTML5
            </h2>

            <p>
                Estrutura moderna.
            </p>

        </article>

        <article class="card">

            <h2>
                CSS3
            </h2>

            <p>
                Interfaces modernas.
            </p>

        </article>

        <article class="card">

            <h2>
                Responsividade
            </h2>

            <p>
                Layout adaptativo.
            </p>

        </article>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    padding: 40px;

    font-family: Arial;
}

.grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;
}

.card {

    padding: 24px;

    background-color: #f5f5f5;

    border-radius: 16px;

    box-shadow:
        0 8px 16px rgba(0,0,0,0.08);
}

Referências

Livros

Don’t Make Me Think
Responsive Web Design with HTML5 and CSS

Sites

3. Acessibilidade, SEO e Performance no Projeto

Fundamentação Teórica

O projeto final deve demonstrar:

qualidade técnica;
acessibilidade;
semântica;
performance;
organização profissional.

Checklist Técnico

Item	Verificar
`alt` em imagens	Sim
headings corretos	Sim
foco visível	Sim
contraste adequado	Sim
meta description	Sim
layout responsivo	Sim
Lighthouse	Sim

Exemplo 1 — Estrutura SEO e Acessível

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="description"
          content="Portfólio Front-end responsivo e acessível">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>
        Portfólio Responsivo
    </title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <main>

        <h1>
            Projetos Front-end
        </h1>

        <img
            src="projeto.webp"
            alt="Preview de projeto responsivo">

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    font-family: Arial;

    padding: 40px;
}

img {

    max-width: 100%;

    border-radius: 12px;
}

Exemplo 2 — Navegação Acessível

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>
        Navegação Acessível
    </title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <a href="#conteudo"
       class="skip-link">

       Ir para conteúdo

    </a>

    <main id="conteudo">

        <button>
            Entrar
        </button>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    font-family: Arial;

    padding: 40px;
}

.skip-link:focus {

    outline: 4px solid #0077cc;
}

button:focus {

    outline: 4px solid #0077cc;
}

Discussão Técnica

Projetos profissionais modernos precisam:

funcionar em múltiplos dispositivos;
permitir navegação por teclado;
possuir boa legibilidade;
respeitar semântica;
otimizar carregamento.

Referências

Livros

Inclusive Design Patterns
Designing for Performance

Sites

4. Publicação e Portfólio

Fundamentação Teórica

O projeto final deve ser:

publicado;
documentado;
compartilhável;
organizado em portfólio.

Estrutura Recomendada do README

Título
Descrição
Tecnologias
Objetivo
Deploy
Screenshots
Autor

Exemplo 1 — README Profissional

Arquivo: `README.md`

# Projeto Front-end Responsivo

Projeto desenvolvido utilizando:
- HTML5;
- CSS3;
- Flexbox;
- CSS Grid;
- acessibilidade básica.

## Deploy

https://usuario.github.io/projeto

## Autor

Fernandes

Exemplo 2 — Estrutura de Portfólio

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>
        Portfólio
    </title>

    <link rel="stylesheet"
          href="style.css">

</head>
<body>

    <main class="grid">

        <article class="card">

            <h2>
                Landing Page
            </h2>

            <p>
                Projeto publicado online.
            </p>

        </article>

        <article class="card">

            <h2>
                Dashboard
            </h2>

            <p>
                Projeto responsivo com Grid.
            </p>

        </article>

    </main>

</body>
</html>

Arquivo: `style.css`

body {

    margin: 0;

    padding: 40px;

    font-family: Arial;

    background-color: #f5f5f5;
}

.grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;
}

.card {

    padding: 24px;

    background-color: white;

    border-radius: 16px;

    box-shadow:
        0 8px 16px rgba(0,0,0,0.08);
}

Discussão Técnica

Um bom portfólio inicial deve:

ser limpo;
organizado;
responsivo;
navegável;
conter projetos reais;
possuir deploy funcional.

Sugestões de Projeto

Projeto	Complexidade
Landing page	Básica
Página institucional	Básica
Site de portfólio	Média
Mini portal	Média
Página de evento	Média
Dashboard visual estático	Média

Critérios de Avaliação

Critério	Peso sugerido
HTML5 semântico	20%
CSS3 moderno	20%
Responsividade	20%
Organização visual	15%
Acessibilidade	10%
SEO e performance	10%
Deploy e README	5%

Estratégia Pedagógica

Sequência Recomendada

Planejamento;
Estrutura HTML;
CSS e layout;
Responsividade;
Componentização;
Acessibilidade;
SEO;
Validação;
Deploy;
Apresentação do projeto.

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Atomic Design
Responsive Web Design with HTML5 and CSS
Refactoring UI
Don’t Make Me Think
Inclusive Design Patterns
Designing for Performance
Pro Git

Plataformas e Documentação

Fim da aula 09

Linguagem e Técnica de Programação I – Aula 09

Projeto Integrador de Portfólio

Objetivos do Módulo

Estrutura Geral do Projeto Integrador

Requisitos Técnicos Obrigatórios

Estrutura Recomendada do Projeto

Fluxo Profissional Recomendado

1. Planejamento do Projeto

Fundamentação Teórica

Estrutura Recomendada de Seções

Wireframe Conceitual

Exemplo 1 — Estrutura Inicial de Projeto

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Estrutura Modular Profissional

Estrutura de Pastas

Arquivo: index.html

Arquivo: css/style.css

Arquivo: css/cards.css

Arquivo: css/buttons.css

Discussão Técnica

Referências

Livros

Sites

2. Construção de Landing Page Profissional

Fundamentação Teórica

Estrutura Recomendada

Exemplo 1 — Hero Responsivo

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Exemplo 2 — Grid de Recursos

Arquivo: index.html

Arquivo: style.css

Referências

Livros

Sites

3. Acessibilidade, SEO e Performance no Projeto

Fundamentação Teórica

Checklist Técnico

Exemplo 1 — Estrutura SEO e Acessível

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Navegação Acessível

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

4. Publicação e Portfólio

Fundamentação Teórica

Estrutura Recomendada do README

Exemplo 1 — README Profissional

Arquivo: README.md

Exemplo 2 — Estrutura de Portfólio

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Sugestões de Projeto

Critérios de Avaliação

Estratégia Pedagógica

Sequência Recomendada

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Plataformas e Documentação

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `css/style.css`

Arquivo: `css/cards.css`

Arquivo: `css/buttons.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `README.md`

Arquivo: `index.html`

Arquivo: `style.css`