📅 S03 – CSS : Mise en forme & Layout

  • Période : du 20 octobre au 31 octobre 2025 – Semaines 43–44
  • Thématique : Styliser une interface web moderne
  • Jour férié / vacances : Aucun

🧭 Objectifs de la session

  • Comprendre les bases du langage CSS pour appliquer des styles aux pages HTML.
  • Maîtriser les propriétés fondamentales : couleurs, typographie, marges, bordures, etc.
  • Créer des mises en page modernes avec Flexbox et Grid.
  • Réaliser une première version stylisée du blog (projet fil rouge) à partir de la maquette HTML produite en S02.

📚 Unités d’apprentissage mobilisées

  • UA 2.2.1 – Fondamentaux de la mise en forme avec CSS – (4h) – référentiel
  • UA 2.2.2 – Mises en page modernes avec CSS – (6h) – référentiel

🧩 Prototype

Titre : Maquette stylisée d’une page d’accueil

Description : Appliquer des règles CSS simples à la page index.html créée en S02 :

  • mise en forme du texte,
  • alignement des blocs,
  • palette de couleurs cohérente.

La mise en page devra utiliser Flexbox pour organiser les sections principales (header, main, footer) et respecter une structure visuelle équilibrée.

🧪 Mini-Projet

Titre : Blog statique – version stylisée

Description : Créer une version visuellement aboutie du mini-site réalisé en HTML. Les 3 pages (index.html, cv.html, contact.html) doivent être enrichies avec des styles CSS personnalisés, intégrés dans un fichier style.css.

Contraintes techniques :

  • Utilisation des boîtes flexibles (display: flex) ou grilles (display: grid) selon les besoins.
  • Responsive simplifié (pour desktop uniquement à ce stade).
  • Aucune bibliothèque CSS externe (pas de Bootstrap).

Livrables :

  • Structure de projet claire :

    blog/
├── index.html
├── cv.html
├── contact.html
└── style.css

  • Dépôt GitHub avec README

📊 Grille d’évaluation par niveau

  • Niveau 1 : Application des styles de base (polices, couleurs, espacements).
  • Niveau 2 : Structuration d’une mise en page cohérente avec Flexbox ou Grid.
  • Niveau 3 : Projet complet, organisé, avec navigation stylisée et code commenté.

Souhaites-tu que je te prépare les chapitres CSS liés à cette session (UA 2.2.1 et UA 2.2.2) ?