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 3

Huit semaines, un plan clair

Chaque semaine a son thème, ses concepts clés, ses exercices pratiques et un jalon pour mesurer ta progression. Compte quatre à cinq heures par semaine.

« Conçois un programme structuré. Inclus les thèmes semaine par semaine, les concepts clés, les exercices pratiques et les jalons pour mesurer ma progression jusqu'à la maîtrise avancée. »

SEM.1

2 à 3 h · 2 leçons + jalon

La structure

0/3

Objectifs

  • Écrire le squelette d'une page
  • Structurer titres, listes et régions
  • Relier liens et images

Concepts clés

  • Balises et imbrication
  • DOCTYPE, head, body
  • Attributs href, src, alt
  • header, nav, main, footer

Exercices pratiques

  • La page de Codey
  • Les régions et le lien
  • La fiche de présentation

BossUne fiche complète et structurée, sans une ligne de CSS.

LeçonsAffronter le boss
SEM.2

3 h · 2 leçons + jalon

Le style

0/3

Objectifs

  • Écrire des règles CSS
  • Comprendre la cascade
  • Centraliser une charte

Concepts clés

  • Sélecteurs
  • color, background-color, font-size
  • Spécificité et héritage
  • Unités et variables CSS

Exercices pratiques

  • Les trois règles
  • La charte en variables
  • La fiche habillée

BossLa même fiche, entièrement repeinte sans toucher au HTML.

LeçonsAffronter le boss
SEM.3

3 h · 2 leçons + jalon

La boîte

0/3

Objectifs

  • Maîtriser padding, border et margin
  • Adopter box-sizing: border-box
  • Centrer un conteneur

Concepts clés

  • Modèle de boîte
  • block, inline, inline-block
  • max-width
  • margin: 0 auto

Exercices pratiques

  • La carte de 240 px
  • La page centrée
  • La carte du carton

BossUne carte qui respire, dans une page centrée.

LeçonsAffronter le boss
SEM.4

3 à 4 h · 2 leçons + jalon

Flexbox

0/3

Objectifs

  • Aligner sur un axe
  • Répartir l'espace
  • Autoriser le passage à la ligne

Concepts clés

  • display: flex et gap
  • justify-content
  • align-items
  • flex: 1 1 160px

Exercices pratiques

  • Les trois cartes en ligne
  • L'en-tête de Sys-Code
  • L'en-tête et la rangée

BossUn en-tête et une rangée de cartes qui s'adaptent seuls.

LeçonsAffronter le boss
SEM.5

3 à 4 h · 2 leçons + jalon

Grille et responsive

0/3

Objectifs

  • Déclarer une grille
  • Écrire mobile d'abord
  • Placer des points de rupture

Concepts clés

  • grid-template-columns et fr
  • repeat et minmax
  • @media (min-width)
  • viewport et images fluides

Exercices pratiques

  • Le mur de trois colonnes
  • Le mur responsive
  • La galerie adaptative

BossUne galerie à une, deux puis trois colonnes.

LeçonsAffronter le boss
SEM.6

3 h · 2 leçons + jalon

Finitions et accessibilité

0/3

Objectifs

  • Faire réagir l'interface
  • Étiqueter un formulaire
  • Rendre une page utilisable par tous

Concepts clés

  • :hover et :focus-visible
  • transition
  • label for / id
  • Contraste et fichier .css séparé

Exercices pratiques

  • Le bouton fini
  • Le formulaire accessible
  • La page d'accueil complète

BossUne page d'accueil qui tiendrait en production.

LeçonsAffronter le boss