Front-end · 6 mondes · 18 étapes

HTML & CSS

Structurer et styliser une page web, directement dans le navigateur.

Progression

0 %

0/18 étapes terminées

Mode 7

Réviser vite, retenir longtemps

Des fiches express pour relire l'essentiel en deux minutes, des cartes mémoire qui reviennent au bon moment, et un jeu chronométré pour ancrer le vocabulaire.

« Résume les concepts les plus importants dans un guide clair et concis qui m'aide à réviser rapidement et à mémoriser les idées clés sans complexité inutile. »

Codey

Fiches express

L'essentiel, semaine par semaine

Semaine 1

5 points

La structure

  • Une balise dit ce qu'est un contenu, pas à quoi il ressemble.
  • Squelette : DOCTYPE, html lang, head, body.
  • Un seul h1, puis des h2 et h3 dans l'ordre.
  • href pour un lien, src pour une image, alt pour la décrire.
  • header, nav, main, footer découpent la page en régions.
<header><h1>Codey</h1></header><main>  <img src="codey.png" alt="Codey, mascotte à visière" /></main>

À retenir : Le sens d'abord : une page sans CSS doit rester compréhensible.

Semaine 2

5 points

Le style

  • Une règle : un sélecteur, puis des déclarations entre accolades.
  • Balise p, classe .carte, identifiant #entete — on travaille surtout en classes.
  • Spécificité d'abord, ordre ensuite.
  • color et font-family s'héritent, les espacements non.
  • Variables sur :root, lues avec var().
:root { --marque: #ee6900; }h1 { color: var(--marque); }

À retenir : !important n'est jamais la solution à un conflit.

Semaine 3

5 points

La boîte

  • Contenu, padding, bordure, marge : de l'intérieur vers l'extérieur.
  • Le fond peint le padding, jamais la marge.
  • * { box-sizing: border-box; } en première ligne.
  • block prend la largeur, inline se range dans le texte, inline-block fait les deux.
  • Centrer : max-width puis margin: 0 auto.
* { box-sizing: border-box; }.page { max-width: 640px; margin: 0 auto; padding: 0 16px; }

À retenir : Padding pousse le bord, marge éloigne les voisins.

Semaine 4

5 points

Flexbox

  • display: flex sur le parent organise ses enfants directs.
  • flex-direction choisit l'axe principal.
  • justify-content : axe principal ; align-items : axe secondaire.
  • gap espace entre les éléments, jamais aux bords.
  • flex-wrap: wrap et flex: 1 1 160px pour s'adapter.
.entete {  display: flex;  justify-content: space-between;  align-items: center;  gap: 16px;}

À retenir : Un axe, un conteneur qui commande.

Semaine 5

5 points

Grille et responsive

  • display: grid et grid-template-columns déclarent la trame.
  • 1fr est une part de l'espace restant ; repeat(3, 1fr) fait trois colonnes égales.
  • repeat(auto-fit, minmax(200px, 1fr)) s'adapte sans media query.
  • Mobile d'abord : base sans condition, puis min-width.
  • Balise viewport obligatoire, images en max-width: 100%.
.mur { display: grid; grid-template-columns: 1fr; gap: 16px; }@media (min-width: 700px) {  .mur { grid-template-columns: repeat(3, 1fr); }}

À retenir : Les points de rupture se placent là où la page casse.

Semaine 6

5 points

Finitions et accessibilité

  • :hover, :focus-visible, :active stylent les états.
  • Tout ce qui a un survol doit avoir un focus visible.
  • La transition se déclare sur l'état de repos, 0,2 s suffit.
  • Chaque champ a un label relié par for / id.
  • En projet, le CSS vit dans un fichier relié par <link>.
.bouton { transition: background-color 0.2s ease; }.bouton:hover { background-color: #ff8a2a; }.bouton:focus-visible { outline: 3px solid #00a4a9; }

À retenir : Teste ta page au clavier seul : c'est le test d'accessibilité le plus rentable.