Chargement...

Mini-projet CSS — Landing stylée

Le résumé CSS a cartographié votre boîte à outils. Cette session la met en œuvre. Vous assemblez à la main une petite landing stylée : barre d’identité, héros avec un appel à l’action clair, quelques cartes de fonctionnalités, et un pied de page discret. Aucune propriété exotique — seulement le raccord des compétences déjà pratiquées (cascade, box model, Flex, Grid, responsive, focus).

Réponse directe

1) Esquissez d’abord les sections : header + nav, héros + CTA, fonctionnalités, footer.
2) Marquez-les en HTML sémantique (header, nav, main, section, footer) dans un conteneur à max-width.
3) Placez couleurs, espacements et rayons partagés sur des custom properties :root.
4) Utilisez Flex pour la barre du haut et la rangée héros ; Grid pour les cartes.
5) Ajoutez un breakpoint media query et gardez :focus-visible sur les liens et le CTA.
6) « Terminé » signifie que la page se lit bien en viewport étroit et que Tab montre encore le focus — pas que chaque astuce CSS apparaît une fois.

Ordre de construction de cette landing

📊 Landing sections and CSS jobs

Section HTML job CSS job
Header + nav Nom du site + liens internes Rangée Flex, gap, fond calme
Hero Titre, pitch court, CTA principal Flex ou pile ; fort contraste ; bouton clair
Features Trois cartes courtes Grid à pistes égales et gap
Footer Contact ou ligne légale Padding discret ; texte atténué lisible
Shared tokens — Couleurs, espace, radius :root réutilisés partout
Responsive check Meta viewport déjà dans le HTML Un breakpoint qui empile héros/cartes

Branchez d’abord la structure, ensuite la décoration. De jolis dégradés sur une soupe de div se corrigent plus difficilement qu’un squelette sémantique simple avec un CSS calme.

Étape 1 — Squelette sémantique

Commencez par les landmarks. Les classes peaufinent l’apparence ; les éléments nomment les régions pour les lecteurs et les technologies d’assistance.

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>

Gardez le texte anglais de la démo court. Votre propre projet peut porter n’importe quel nom de produit — la structure compte plus que l’histoire de marque.

Étape 2 — Tokens de design sur :root

Rangez les valeurs répétées dans des custom properties pour que palette et espacements restent cohérents quand vous retouchez la page.

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);
}

Les tokens ne sont pas de la décoration — ils empêchent la dérive du copier-coller. Changez --accent une fois et le CTA, les liens et les indices de focus restent alignés.

Étape 3 — Flex pour header et nav

Une rangée unidimensionnelle est un travail Flex : logo d’un côté, liens de l’autre, gap régulier.

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 garde la barre honnête sur écrans étroits avant que votre media query n’empile les grandes sections.

Étape 4 — Bandeau héros

Donnez de l’air au message, gardez un contraste fort, et faites du CTA l’action principale visible.

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 sur le titre est une petite touche moderne des leçons précédentes — utile, pas obligatoire. Le CTA doit rester lisible : fond accent avec encre plus foncée, pas pâle-sur-pâle.

Étape 5 — Grid pour les cartes de fonctionnalités

Deux axes (lignes et colonnes de cartes égales) appartiennent à Grid. Gardez padding et bordure des cartes calmes.

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;
}

Sur mobile, une colonne suffit. Élargissez la grille au breakpoint — n’inventez pas un troisième système de layout pour trois cartes.

Étape 6 — Breakpoint et focus visible

Un breakpoint honnête plus des anneaux de focus termine la page d’exercice. Les utilisateurs clavier doivent encore voir où ils sont.

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;
}

Vous avez déjà étudié les styles d’accessibilité en profondeur. Ici vous appliquez seulement l’habitude : ne livrez jamais un joli CTA qui perd son indice de focus.

À vous de jouer

  1. Créez index.html + styles.css et collez le squelette landmarks ; liez la feuille de style.
  2. Ajoutez les tokens :root et les règles body/container ; vérifiez que la page est centrée et lisible.
  3. Stylez le header en Flex et les cartes en Grid (une colonne, puis trois à partir de 640px).
  4. Stylez le CTA ; parcourez logo, nav et bouton avec Tab — le focus doit rester visible.
  5. Réduisez à une largeur téléphone : pas de défilement horizontal, cartes empilées, cibles tactiles utilisables.
  6. Optionnel : ajoutez prefers-reduced-motion si vous attachez une transition hover sur .btn.

Erreurs fréquentes

  • Ouvrir une bibliothèque de composants avant de pouvoir styler cette petite page à la main
  • Peindre chaque section avec position: absolute au lieu du flux Flex/Grid
  • Omettre max-width sur le conteneur pour que les lignes s’étirent bord à bord sur grand écran
  • Supprimer les outlines de focus « pour le design » sur le CTA et les liens de nav
  • Ajouter cinq breakpoints pour trois cartes au lieu d’un seul élargissement clair
  • Oublier les leçons précédentes : le résumé a cartographié les compétences ; l’accessibilité exigeait un focus visible — les deux s’appliquent encore ici

Résumé

  • Ce mini-projet rassemble les compétences du cours en une landing stylée
  • Structure d’abord (landmarks), puis tokens, barre Flex, cartes Grid, breakpoint, focus
  • Flex pour le chrome unidimensionnel ; Grid pour la matrice de fonctionnalités
  • Terminé signifie lisible sur mobile et sûr au clavier — pas un échafaudage prêt pour un framework
  • Suite (optionnel avancé) : CSS !important (important) si vous voulez les cas limites de cascade ; sinon continuez à pratiquer de petites pages à la main

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 70 de 72
Css Tutoriel