Plan d'enseignement - Cours 113

Version de travail

Ce plan 2026-2027 est en cours d'élaboration. La progression et les exercices Nuxy associés seront précisés au fil du semestre.

Vue d'ensemble des 15 séances

Séance	Date	Thème	Contenu	Exercices Nuxy
1	19.08	Démarrage	Histoire du web + installation des outils	-
2	26.08	Git & GitHub	Premier dépôt + « Hello World » en ligne	-
3	02.09	HTML	Structure d'une page + texte	à venir
4	09.09	HTML	Liens, images, tableaux, arborescence	à venir
5	16.09	HTML	Sémantique + navigation — lancement du projet	à venir
6	23.09	CSS	Intégration, sélecteurs, couleurs	à venir
7	30.09	CSS	Typographie + variables CSS	à venir
8	21.10	CSS	Box model	à venir
9	28.10	CSS	Flexbox	à venir
10	04.11	CSS	Mise en page complète + positionnement	à venir
11	11.11	Responsive	Grille de cartes + mobile-first + media queries	à venir
12	18.11	Performance	Atelier images + Lighthouse	-
13	25.11	Qualité	Accessibilité + validation W3C	-
14	16.12	Révisions	EXAMEN BLANC (sur papier)	-
15	23.12	Finalisation	Checklist finale du projet	-
	08.01.2027	📦	Rendu du projet personnel (20 pts)
	13.01.2027	📝	Épreuve de module M11 — 08:30-11:50 (partie C113 : 20 pts)

Semaines sans cours

• 7 et 14 octobre (vacances d'automne)
• 2 et 9 décembre (selon planning WebUntis)

Séance 1 - 19 août 2026

Thème : Bienvenue, histoire du web et installation des outils

Objectifs :

• Comprendre le fonctionnement du web (client, serveur, navigateur, HTML/CSS)
• Connaître les grandes étapes de l'histoire du web et des navigateurs
• Installer et configurer l'environnement complet : WebStorm, Git, compte GitHub
• Vérifier que tout fonctionne avant la séance 2

Contenu :

• Présentation du cours, du projet personnel et de l'évaluation
• Slides « Histoire du web et des navigateurs »
• Session d'installation guidée pas à pas (toute la 2ème période)

Pourquoi une séance entière pour installer ?

Retour des volées précédentes : trop de temps perdu en début de semestre sur des problèmes d'installation. On règle tout ensemble dès le premier cours.

Séance 2 - 26 août 2026

Thème : Git, GitHub et première page en ligne

Objectifs :

• Comprendre à quoi sert le versionnement
• Créer un dépôt, faire un commit et pousser sur GitHub
• Publier une première page « Hello World » avec GitHub Pages

Contenu :

• Démo : cycle modification → commit → push → site en ligne
• Pratique : chaque élève publie sa première page en ligne

Séance 3 - 2 septembre 2026

Thème : HTML - Structure d'une page et texte

Objectifs :

• Écrire la structure minimale d'une page HTML5 (doctype, html, head, body)
• Comprendre le rôle de lang, charset et title
• Structurer du texte : titres (h1-h6), paragraphes, listes, emphase

Devoirs Nuxy : Module HTML - bases (à venir)

Séance 4 - 9 septembre 2026

Thème : HTML - Liens, images, tableaux et arborescence

Objectifs :

• Créer des liens internes et externes (a, href, chemins relatifs)
• Insérer des images (img, src, alt) et organiser les fichiers du site
• Comprendre l'importance du texte alternatif
• Construire un tableau de données (table, tr, th, td) et savoir quand l'utiliser

Un tableau, c'est pour des données

table sert à présenter des données (horaires, tarifs, comparatifs), jamais à faire une mise en page. La mise en page se fait en CSS, à partir de la séance 8.

Devoirs Nuxy : Module HTML - liens, images et tableaux (à venir)

Séance 5 - 16 septembre 2026

Thème : HTML sémantique et lancement du projet personnel

Objectifs :

• Structurer une page avec les balises sémantiques (header, nav, main, section, footer)
• Choisir le sujet de son projet personnel et créer le dépôt
• Connaître les contraintes du projet dès le départ

Interdictions du projet (à connaître dès maintenant)

Pas de template, pas de framework CSS, pas de CDN (polices et images en local), pas de JavaScript. Ces contraintes ont coûté des points aux volées précédentes.

Ressources :

• Consignes du projet personnel

Devoirs Nuxy : Module HTML - sémantique (à venir)

Séance 6 - 23 septembre 2026

Thème : CSS - Intégration, sélecteurs et couleurs

Objectifs :

• Lier une feuille de style externe à une page HTML
• Utiliser les sélecteurs de base (balise, .classe, #id)
• Appliquer des couleurs (texte, fonds) et choisir une palette cohérente

Contenu projet : définir la palette de couleurs et les polices du projet

Devoirs Nuxy : Module CSS - bases (à venir)

Séance 7 - 30 septembre 2026

Thème : CSS - Typographie et variables CSS

Objectifs :

• Mettre en forme le texte (font-family, font-size, text-align, line-height)
• Intégrer des polices locales (pas de CDN)
• Centraliser couleurs, polices et espacements avec les variables CSS (--ma-variable)

📦 Jalon 1 : structure HTML du projet complète

Devoirs Nuxy : Module CSS - texte et variables (à venir)

Séance 8 - 21 octobre 2026

Thème : CSS - Box model

Objectifs :

• Comprendre le modèle de boîte : contenu, padding, border, margin
• Maîtriser box-sizing: border-box
• Espacer et délimiter les éléments de sa page

Devoirs Nuxy : Module CSS - box model (à venir)

Séance 9 - 28 octobre 2026

Thème : CSS - Flexbox

Objectifs :

• Activer un conteneur flexible avec display: flex
• Aligner et répartir les éléments (justify-content, align-items, gap)
• Construire une barre de navigation horizontale

Ressources :

• Flexbox Froggy

Devoirs Nuxy : Module CSS - Flexbox (à venir)

Séance 10 - 4 novembre 2026

Thème : CSS - Mise en page complète et positionnement

Objectifs :

• Assembler une mise en page complète : header, nav, main, footer
• Centrer et limiter la largeur du contenu
• Styliser les liens et leurs états (:hover, transition)
• Comprendre le positionnement : position: relative, absolute, fixed et sticky
• Superposer des éléments (bandeau fixe, badge sur une image) avec z-index

Positionnement : à utiliser avec parcimonie

Flexbox suffit pour la très grande majorité des mises en page. position sert aux cas particuliers : un menu qui reste collé en haut (sticky), un badge posé sur une image (absolute), un bouton de retour en haut de page (fixed).

📦 Jalon 2 : HTML complet + CSS de base sur tout le site

Séance 11 - 11 novembre 2026

Thème : Grille de cartes et responsive design mobile-first

Objectifs :

• Créer une galerie de cartes avec CSS Grid : display: grid et gap
• Rendre cette galerie adaptative sans media query grâce à repeat(auto-fill, minmax(250px, 1fr))
• Comprendre l'approche mobile-first (styler d'abord pour mobile)
• Écrire des media queries (min-width 768px et 1024px)
• Tester son site avec le mode responsive des DevTools

Grid ou Flexbox ?

Flexbox aligne des éléments sur une ligne (une barre de navigation, une série de boutons). Grid organise une galerie en lignes et colonnes (cartes, vignettes, portfolio). Une seule déclaration Grid suffit pour ce cours — le reste s'apprendra plus tard.

Adaptatif avant les media queries

repeat(auto-fill, minmax(250px, 1fr)) fait passer la galerie de 4 colonnes à 1 selon la largeur de l'écran, sans écrire une seule media query. C'est la démonstration que le responsive n'est pas qu'une affaire de points de rupture.

Mobile-first, vraiment

L'an dernier, seuls 4 projets sur 16 étaient réellement mobile-first. On commence par le mobile, on élargit ensuite — pas l'inverse.

Devoirs Nuxy : Module CSS - responsive (à venir)

Séance 12 - 18 novembre 2026

Thème : Atelier images et performance

Objectifs :

• Redimensionner et compresser ses images (WebP avec Squoosh)
• Comprendre l'impact du poids des images sur le chargement
• Lancer un audit Lighthouse et interpréter les résultats

Le piège classique

L'an dernier, la moitié des projets avaient des images de plus de 1 Mo (record : 16.5 Mo pour un fond d'écran). Objectif : aucune image au-dessus de 300 Ko.

Séance 13 - 25 novembre 2026

Thème : Accessibilité et validation

Objectifs :

• Valider son HTML avec le validateur W3C et corriger les erreurs
• Vérifier l'accessibilité avec WAVE (contrastes, alt, structure des titres)
• Rédiger le README du projet (mini-portfolio)

📦 Jalon 3 : site responsive fonctionnel et validé

Séance 14 - 16 décembre 2026

Thème : Examen blanc

Déroulement :

• Examen blanc sur papier, dans les conditions réelles de l'épreuve de module : même durée, même format, sans ordinateur, sans documentation et sans aucun support de cours
• Correction et debriefing collectif des questions
• Identification des lacunes à travailler pendant les vacances

Conditions d'examen

Rien sur la table : ni ordinateur, ni téléphone, ni notes, ni aide-mémoire. Il faut savoir écrire du HTML et du CSS de tête, sans l'auto-complétion de l'éditeur. L'examen blanc reproduit exactement les conditions de l'épreuve de module M11 du 13 janvier 2027.

Séance 15 - 23 décembre 2026

Thème : Finalisation du projet

Objectifs :

• Passer la checklist finale du projet (validation, images, responsive, README)
• Derniers réglages avant le rendu du vendredi 8 janvier 2027
• Questions de préparation à l'épreuve de module M11 du 13 janvier 2027

Dernière ligne droite

Le rendu (8 janvier) et l'épreuve de module (13 janvier) tombent tous les deux après les vacances. Ce qui n'est pas terminé le 23 décembre devra l'être pendant les vacances : prévoyez votre travail en conséquence.

Récapitulatif des objectifs

Objectif du cours	Séances
Structurer une page avec des balises HTML sémantiques	3, 4, 5
Présenter des données dans un tableau	4
Mettre en forme avec CSS (couleurs, typographie, box model)	6, 7, 8
Créer des mises en page modernes avec Flexbox et Grid	9, 10, 11
Positionner des éléments (relative, absolute, fixed, sticky)	10
Rendre un site adaptatif (mobile-first, media queries)	11
Versionner avec Git et publier avec GitHub Pages	1, 2, puis en continu
Valider, optimiser et auditer un site	12, 13, 15