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 1

Du premier écran à la maîtrise

Le parcours complet découpé en quatre niveaux. Pour chacun : l'objectif, les compétences à acquérir et ce que tu sauras faire à la fin.

« Agis comme un tuteur expert. Crée une feuille de route qui amène un débutant jusqu'à la maîtrise avancée, en étapes claires avec les compétences à acquérir à chaque niveau. »

  1. NIVEAU1

    Monde 1

    Dire ce que chaque chose est

    Structure

    Écrire une page HTML correcte, sémantique et accessible avant tout style.

    0/3

    Compétences à acquérir

    • Balises et imbricationTitres, paragraphes, listes, et le squelette d'une page.
    • Attributshref, src, alt : relier la page au monde.
    • Sémantiqueheader, nav, main, footer : des régions qui ont un sens.

    À la fin, tu sauras

    • Écrire une page complète sans aide
    • Choisir la balise selon le sens, pas l'apparence
    • Décrire chaque image
    S1 · La structure
  2. NIVEAU2

    Mondes 2 et 3

    Peindre et espacer

    Style et boîtes

    Maîtriser les sélecteurs, la cascade et le modèle de boîte.

    0/6

    Compétences à acquérir

    • SélecteursBalise, classe, identifiant, et pourquoi on préfère les classes.
    • CascadeSpécificité, ordre, héritage, et le refus de !important.
    • Variables CSSUne charte déclarée une fois sur :root.
    • Modèle de boîtepadding, border, margin, et box-sizing: border-box.

    À la fin, tu sauras

    • Expliquer pourquoi une règle gagne sur une autre
    • Espacer une interface sans tâtonner
    • Centrer un conteneur
    S2 · Le styleS3 · La boîte
  3. NIVEAU3

    Mondes 4 et 5

    Flexbox, Grid, responsive

    Mise en page

    Construire n'importe quelle mise en page, du téléphone au grand écran.

    0/6

    Compétences à acquérir

    • FlexboxAxe principal, justify-content, align-items, wrap.
    • GridColonnes en fr, repeat, minmax, auto-fit.
    • ResponsiveMobile d'abord, media queries, viewport, images fluides.

    À la fin, tu sauras

    • Construire une barre de navigation
    • Construire une galerie qui s'adapte seule
    • Placer ses points de rupture là où la page casse
    S4 · FlexboxS5 · Grille et responsive
  4. NIVEAU4

    Monde 6

    Une interface pour tout le monde

    Finitions

    Des états clairs, des formulaires lisibles, une page accessible.

    0/3

    Compétences à acquérir

    • États:hover, :focus-visible, :active, transitions.
    • Formulaireslabel relié, types de champs, autocomplétion.
    • AccessibilitéContraste, titres, navigation au clavier.

    À la fin, tu sauras

    • Naviguer sa propre page au clavier
    • Livrer un formulaire utilisable par tous
    • Passer une page en production
    S6 · Finitions et accessibilité