Carregando...

Mini projeto CSS — Landing estilizada

O resumo CSS mapeou a sua caixa de ferramentas. Esta sessão usa-a. Vai montar à mão uma pequena landing estilizada: barra de identidade, hero com chamada à ação clara, alguns cards de funcionalidades e um rodapé discreto. Sem propriedade exótica nova — só juntar competências já praticadas (cascata, box model, Flex, Grid, responsivo, foco).

Resposta direta

1) Esboce primeiro as secções: header + nav, hero + CTA, funcionalidades, footer.
2) Marque-as com HTML semântico (header, nav, main, section, footer) num contentor com max-width.
3) Coloque cores, espaçamentos e raios partilhados em custom properties :root.
4) Use Flex para a barra superior e a fila do hero; Grid para os cards.
5) Acrescente um breakpoint com media query e mantenha :focus-visible nos links e no CTA.
6) «Pronto» significa que a página lê bem em viewport estreita e Tab ainda mostra o foco — não que cada truque CSS aparece uma vez.

Ordem de construção desta landing

📊 Landing sections and CSS jobs

Section HTML job CSS job
Header + nav Nome do site + links na página Fila Flex, gap, fundo calmo
Hero Título, pitch curto, CTA principal Flex ou pilha; contraste forte; botão claro
Features Três cards curtos Grid com pistas iguais e gap
Footer Contacto ou linha legal Padding discreto; texto atenuado legível
Shared tokens — Cores, espaço, radius em :root reutilizados em todo o lado
Responsive check Meta viewport já no HTML Um breakpoint que empilha hero/cards

Ligue primeiro a estrutura, depois a decoração. Gradientes bonitos sobre uma sopa de div são mais difíceis de corrigir do que um shell semântico simples com CSS calmo.

Passo 1 — Shell semântico

Comece pelos landmarks. Classes afinam o aspeto; elementos nomeiam regiões para leitores e tecnologias de apoio.

Landing landmarks shell

html 
<body>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">BrightDesk</a>
<nav class="site-nav" aria-label="Primary">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-copy">
<h1>Ship a calm landing with CSS you already know</h1>
<p class="lede">Flex the bar, Grid the cards, keep focus visible.</p>
<a class="btn" href="#features">See features</a>
</div>
</div>
</section>

<section id="features" class="features">
<div class="container">
<h2>What you practice</h2>
<div class="feature-grid">
<article class="card"><h3>Tokens</h3><p>Shared color and space.</p></article>
<article class="card"><h3>Layout</h3><p>Flex and Grid on purpose.</p></article>
<article class="card"><h3>Polish</h3><p>Breakpoint and focus.</p></article>
</div>
</div>
</section>
</main>

<footer id="contact" class="site-footer">
<div class="container">
<p>Practice page — style by hand before frameworks.</p>
</div>
</footer>
</body>

Mantenha o texto inglês da demo curto. O seu projeto pode usar qualquer nome de produto — a estrutura importa mais do que a história da marca.

Passo 2 — Tokens de design em :root

Puxe valores repetidos para custom properties para que paleta e espaçamento fiquem consistentes quando ajustar a página.

Shared tokens for the landing

css 
:root {
--bg: #0b1220;
--surface: #111827;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-ink: #0c4a6e;
--radius: 0.75rem;
--space: 1rem;
--max: 960px;
--focus: #fbbf24;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}

.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--space);
}

Tokens não são decoração — evitam a deriva do copiar-colar. Mude --accent uma vez e o CTA, os links e os sinais de foco podem ficar alinhados.

Passo 3 — Flex para header e nav

Uma fila unidimensional é trabalho de Flex: logo de um lado, links do outro, gap consistente.

Flex header bar

css 
.site-header {
background: var(--surface);
border-bottom: 1px solid #1f2937;
}

.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space);
padding: 0.75rem 0;
}

.logo {
color: var(--text);
font-weight: 700;
text-decoration: none;
}

.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.site-nav a {
color: var(--muted);
text-decoration: none;
}

.site-nav a:hover {
color: var(--accent);
}

flex-wrap mantém a barra honesta em ecrãs estreitos antes da media query empilhar secções maiores.

Passo 4 — Faixa do hero

Dê espaço à mensagem, mantenha contraste forte e faça o CTA parecer a ação principal.

Hero copy and primary CTA

css 
.hero {
padding: 3rem 0 2.5rem;
background:
radial-gradient(circle at top right, #1e3a5f 0%, transparent 45%),
var(--bg);
}

.hero-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
}

.hero h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
}

.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
}

.btn {
display: inline-block;
width: fit-content;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}

.btn:hover {
filter: brightness(1.05);
}

clamp no título é um toque moderno das lições anteriores — útil, não obrigatório. O CTA deve permanecer legível: fundo accent com tinta mais escura, não pálido-sobre-pálido.

Passo 5 — Grid para cards de funcionalidades

Dois eixos (linhas e colunas de cards iguais) pertencem ao Grid. Mantenha padding e borda dos cards calmos.

Feature cards with Grid

css 
.features {
padding: 2rem 0 3rem;
}

.features h2 {
margin: 0 0 1rem;
}

.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space);
}

.card {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid #1f2937;
}

.card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}

.card p {
margin: 0;
color: var(--muted);
}

.site-footer {
padding: 1.5rem 0 2rem;
border-top: 1px solid #1f2937;
color: var(--muted);
font-size: 0.95rem;
}

No telemóvel, uma coluna basta. Alargue a grelha no breakpoint — não invente um terceiro sistema de layout para três cards.

Passo 6 — Breakpoint e foco visível

Um breakpoint honesto mais anéis de foco terminam a página de prática. Utilizadores de teclado ainda devem ver onde estão.

Widen cards and keep focus visible

css 
@media (min-width: 640px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr);
}

.hero {
padding-top: 4rem;
}
}

a:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}

Já estudou estilos de acessibilidade em profundidade. Aqui só aplica o hábito: nunca publique um CTA bonito que perde o sinal de foco.

Experimente você

  1. Crie index.html + styles.css e cole o shell de landmarks; ligue a folha de estilos.
  2. Acrescente os tokens :root e as regras body/container; confirme que a página está centrada e legível.
  3. Estilize o header com Flex e os cards com Grid (uma coluna, depois três a partir de 640px).
  4. Estilize o CTA; percorra logo, nav e botão com Tab — o foco deve permanecer visível.
  5. Reduza à largura de telemóvel: sem scroll horizontal, cards empilhados, alvos de toque utilizáveis.
  6. Opcional: acrescente prefers-reduced-motion se ligar uma transição hover em .btn.

Erros comuns

  • Abrir uma biblioteca de componentes antes de conseguir estilizar esta página pequena à mão
  • Pintar cada secção com position: absolute em vez do fluxo Flex/Grid
  • Omitir max-width no contentor para as linhas esticarem de ponta a ponta em ecrãs grandes
  • Remover outlines de foco «por design» no CTA e nos links da nav
  • Acrescentar cinco breakpoints para três cards em vez de um alargamento claro
  • Esquecer as lições anteriores: o resumo mapeou competências; a acessibilidade exigia foco visível — ambas ainda aplicam aqui

Resumo

  • Este mini projeto junta as competências do curso numa landing estilizada
  • Estrutura primeiro (landmarks), depois tokens, barra Flex, cards Grid, breakpoint, foco
  • Flex para chrome unidimensional; Grid para a matriz de funcionalidades
  • Pronto significa legível no telemóvel e seguro no teclado — não andaime pronto para framework
  • Seguinte (opcional avançado): CSS !important (important) se quiser casos limite de cascata; senão continue a praticar páginas pequenas à mão

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 70 de 72
Css Tutorial