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, 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	à venir
11	11.11	Responsive	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 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

Devoirs Nuxy : Module HTML - liens et images (à 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

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)

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

Séance 11 - 11 novembre 2026

Thème : Responsive design mobile-first

Objectifs :

• 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

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
Mettre en forme avec CSS (couleurs, typographie, box model)	6, 7, 8
Créer des mises en page modernes avec Flexbox	9, 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