Layout Responsivo Profissional

Este módulo introduz os principais mecanismos modernos de construção de layouts profissionais:

Flexbox;
CSS Grid;
responsividade;
Mobile First;
layouts adaptativos;
organização visual contemporânea.

O foco deixa de ser apenas “fazer funcionar” e passa a ser:

adaptação real a múltiplos dispositivos;
construção de interfaces modernas;
organização profissional do layout;
experiência do usuário;
manutenção e escalabilidade.

Objetivos do Módulo

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

construir layouts modernos responsivos;
utilizar Flexbox profissionalmente;
utilizar CSS Grid para estruturas complexas;
aplicar Media Queries;
trabalhar com Mobile First;
construir grids adaptativos;
criar menus responsivos;
construir landing pages modernas;
otimizar imagens para múltiplos dispositivos.

1. Flexbox

Fundamentação Teórica

Flexbox é um sistema moderno de layout unidimensional.

Ele organiza elementos:

em linha;
em coluna;
com alinhamento automático;
com distribuição flexível de espaço.

Conceitos Fundamentais

Conceito	Função
Main Axis	Eixo principal
Cross Axis	Eixo cruzado
`justify-content`	Alinhamento no eixo principal
`align-items`	Alinhamento no eixo cruzado
`gap`	Espaçamento
`flex-grow`	Crescimento
`flex-shrink`	Redução

Fluxo Conceitual

display: flex
       ↓
container flexível
       ↓
itens organizados automaticamente

Exemplo 1 — Menu Horizontal Moderno

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>Menu Flexbox</title>

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

</head>
<body>

    <header class="topo">

        <h1>Portal Web</h1>

        <nav>

            <a href="#">Início</a>
            <a href="#">Cursos</a>
            <a href="#">Contato</a>

        </nav>

    </header>

</body>
</html>

Arquivo: `style.css`

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.topo {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    background-color: #003366;
}

nav {
    display: flex;
    gap: 20px;
}

a {
    color: white;
    text-decoration: none;
}

Exemplo 2 — Cards Flexíveis

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>Cards Flexbox</title>

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

</head>
<body>

    <section class="cards">

        <article class="card">
            <h2>HTML5</h2>
        </article>

        <article class="card">
            <h2>CSS3</h2>
        </article>

        <article class="card">
            <h2>Responsividade</h2>
        </article>

    </section>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: Arial;
    padding: 40px;
}

.cards {
    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}

.card {
    flex-grow: 1;

    flex-shrink: 1;

    min-width: 250px;

    padding: 40px;

    background-color: #f0f0f0;

    border-radius: 12px;
}

Discussão Técnica

O Flexbox é ideal para:

menus;
barras;
alinhamentos;
cards;
componentes lineares.

Referências

Livros

CSS: The Definitive Guide
Responsive Web Design with HTML5 and CSS

Sites

2. CSS Grid

Fundamentação Teórica

CSS Grid é um sistema bidimensional de layout.

Enquanto o Flexbox trabalha melhor em:

linhas;
colunas individuais;

o Grid trabalha melhor com:

páginas completas;
dashboards;
áreas complexas;
layouts estruturados.

Conceitos Fundamentais

Propriedade	Função
`display: grid`	Ativa Grid
`grid-template-columns`	Colunas
`grid-template-rows`	Linhas
`grid-template-areas`	Áreas nomeadas
`gap`	Espaçamento

Exemplo 1 — Grid 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>Grid Layout</title>

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

</head>
<body>

    <main class="grid">

        <article class="card">
            Card 1
        </article>

        <article class="card">
            Card 2
        </article>

        <article class="card">
            Card 3
        </article>

        <article class="card">
            Card 4
        </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(250px, 1fr));

    gap: 20px;
}

.card {
    background-color: #eee;
    padding: 40px;
    border-radius: 12px;
}

Exemplo 2 — Dashboard Simples

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>Dashboard Grid</title>

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

</head>
<body>

    <div class="dashboard">

        <header>Header</header>

        <aside>Menu</aside>

        <main>Conteúdo</main>

        <footer>Rodapé</footer>

    </div>

</body>
</html>

Arquivo: `style.css`

.dashboard {
    display: grid;

    min-height: 100vh;

    grid-template-columns:
        250px 1fr;

    grid-template-rows:
        80px 1fr 60px;

    grid-template-areas:
        "header header"
        "menu conteudo"
        "footer footer";
}

header {
    grid-area: header;
    background-color: #003366;
}

aside {
    grid-area: menu;
    background-color: #ddd;
}

main {
    grid-area: conteudo;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: #003366;
}

Discussão Técnica

CSS Grid é extremamente utilizado em:

dashboards;
painéis administrativos;
layouts institucionais;
sistemas corporativos.

Referências

Livros

CSS Grid Layout

Sites

3. Responsividade

Fundamentação Teórica

Responsividade é a capacidade da interface adaptar-se:

ao tamanho da tela;
ao dispositivo;
à orientação;
à resolução.

O paradigma moderno é:

Mobile First.

Conceitos Fundamentais

Conceito	Função
Media Queries	Regras condicionais
Mobile First	Priorizar mobile
Breakpoints	Pontos de adaptação
`vw` / `vh`	Unidades da viewport
`clamp()`	Escalas fluidas
`min-width`	Largura mínima
`max-width`	Limite máximo

Exemplo 1 — Media Queries

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>Media Queries</title>

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

</head>
<body>

    <main class="container">

        <h1>
            Responsividade
        </h1>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: Arial;
}

.container {
    padding: 20px;
    background-color: lightblue;
}

@media (min-width: 768px) {

    .container {
        background-color: lightgreen;
    }

}

Exemplo 2 — clamp() e viewport units

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>Clamp Responsivo</title>

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

</head>
<body>

    <section class="hero">

        <h1>
            Front-end Moderno
        </h1>

    </section>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
}

.hero {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;
}

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

Discussão Técnica

A função:

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

permite:

escalabilidade fluida;
adaptação automática;
melhor experiência responsiva.

Referências

Livros

Responsive Web Design with HTML5 and CSS

Sites

4. Layouts Modernos

Fundamentação Teórica

Interfaces modernas são construídas com:

hierarquia visual;
grids flexíveis;
seções reutilizáveis;
adaptação mobile;
componentes visuais.

Estruturas Modernas Comuns

Estrutura	Uso
Hero Section	Destaque principal
Cards	Conteúdo modular
Landing Page	Conversão
Menu Responsivo	Navegação
Grid Responsivo	Organização

Exemplo 1 — Hero Section

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>Hero Section</title>

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

</head>
<body>

    <section class="hero">

        <div class="hero-conteudo">

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

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

            <a href="#" class="botao">
                Saiba Mais
            </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;

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

    color: white;

    text-align: center;

    padding: 40px;
}

.botao {
    display: inline-block;

    margin-top: 20px;

    padding: 14px 24px;

    background-color: white;

    color: #003366;

    text-decoration: none;

    border-radius: 8px;
}

Exemplo 2 — Menu 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>Menu Responsivo</title>

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

</head>
<body>

    <header class="topo">

        <h1>IFPE</h1>

        <nav class="menu">

            <a href="#">Início</a>
            <a href="#">Cursos</a>
            <a href="#">Contato</a>

        </nav>

    </header>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: Arial;
}

.topo {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    background-color: #222;

    color: white;
}

.menu {
    display: flex;
    gap: 20px;
}

.menu a {
    color: white;
    text-decoration: none;
}

@media (max-width: 700px) {

    .topo {
        flex-direction: column;
        gap: 20px;
    }

    .menu {
        flex-direction: column;
    }

}

Discussão Técnica

Layouts modernos priorizam:

leitura;
acessibilidade;
adaptação;
clareza visual;
modularidade.

Referências

Livros

Refactoring UI

Sites

5. Imagens Responsivas

Fundamentação Teórica

Imagens modernas precisam:

adaptar-se ao dispositivo;
reduzir consumo de banda;
melhorar performance;
manter qualidade visual.

Boas Práticas

Prática	Objetivo
`max-width: 100%`	Evitar overflow
`picture`	Fontes adaptativas
`srcset`	Múltiplas resoluções
WebP	Otimização
`object-fit`	Controle visual

Exemplo 1 — Imagem Fluida

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>Imagem Responsiva</title>

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

</head>
<body>

    <img src="paisagem.webp"
         alt="Paisagem natural">
    
</body>
</html>

Arquivo: `style.css`

img {
    max-width: 100%;
    display: block;
}

Exemplo 2 — picture e srcset

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>Picture</title>

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

</head>
<body>

    <picture>

        <source
            media="(max-width: 700px)"
            srcset="mobile.webp">

        <source
            media="(min-width: 701px)"
            srcset="desktop.webp">

        <img
            src="desktop.webp"
            alt="Banner institucional">

    </picture>

</body>
</html>

Arquivo: `style.css`

img {
    width: 100%;
    height: auto;
}

Discussão Técnica

WebP:

reduz tamanho do arquivo;
melhora carregamento;
tornou-se padrão moderno.

Referências

Livros

Responsive Web Design with HTML5 and CSS

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Flexbox;
CSS Grid;
Responsividade;
Mobile First;
Hero sections;
Menus responsivos;
Imagens responsivas;
Mini projeto integrador.

Mini Projeto Integrador Sugerido

Construir:

landing page responsiva;
hero section;
cards responsivos;
menu adaptativo;
grid moderno;
imagens otimizadas;
layout Mobile First.

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

Layout Responsivo Profissional

Objetivos do Módulo

1. Flexbox

Fundamentação Teórica

Conceitos Fundamentais

Fluxo Conceitual

Exemplo 1 — Menu Horizontal Moderno

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Cards Flexíveis

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

2. CSS Grid

Fundamentação Teórica

Conceitos Fundamentais

Exemplo 1 — Grid Responsivo

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Dashboard Simples

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

3. Responsividade

Fundamentação Teórica

Conceitos Fundamentais

Exemplo 1 — Media Queries

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — clamp() e viewport units

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

4. Layouts Modernos

Fundamentação Teórica

Estruturas Modernas Comuns

Exemplo 1 — Hero Section

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Menu Responsivo

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

5. Imagens Responsivas

Fundamentação Teórica

Boas Práticas

Exemplo 1 — Imagem Fluida

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — picture e srcset

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Mini Projeto Integrador Sugerido

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Plataformas e Documentação

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: `index.html`

Arquivo: `style.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: `index.html`

Arquivo: `style.css`