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 + premières lignes de HTML sur Nuxy	HTML 1-2
2	26.08	Git & GitHub	Installation WebStorm + premier dépôt + « Hello World » en ligne	Devoirs : modules 1 à 3
3	02.09	Git & WebStorm	Cloner, modifier en local, republier + CV structuré	Kahoot de révision 1-3
4	09.09	CSS	Feuille de style, sélecteurs et couleurs sur le CV — WebStorm et Git consolidés	CSS en classe · M4-M5 en devoir
5	16.09	Projet	CV terminé — lancement du projet : dépôt c113-projet-nomprenom créé, partagé et publié	M4-M5 acquis
6	23.09	Projet	Palette et style.css du projet en place	M6 acquis
7	30.09	Projet	Variables CSS + typographie — 📦 Jalon 1	M7 acquis
8	21.10	Projet	Espacements et cartes (box model)	M8 acquis + Kahoot 5-8
9	28.10	Projet	La barre de navigation (Flexbox)	M9 acquis
10	04.11	Projet	Mise en page de toutes les pages — 📦 Jalon 2	M10 acquis
11	11.11	Responsive	Mobile-first : site testé à 375 px	M11 acquis
12	18.11	Performance	Atelier images + Lighthouse	-
13	25.11	Qualité	Accessibilité + validation W3C	-
14	16.12	Révisions	EXAMEN BLANC (sur papier)	Examens X.99 refaits
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 premières lignes de HTML

Objectifs :

• Comprendre le fonctionnement du web (client, serveur, navigateur, HTML/CSS)
• Connaître les grandes étapes de l'histoire du web et des navigateurs
• Connaître la règle d'or du cours sur l'IA : comprendre 100 % de son code
• Écrire ses premières lignes de HTML sur Nuxy

Contenu :

• Présentation du cours, du projet personnel, de l'évaluation et du site devjs.ch
• Slides « Histoire du web et des navigateurs » + cadre d'utilisation de l'IA
• Anatomie d'un élément HTML et démonstration live dans le navigateur
• Pratique : création du compte Nuxy, inscription à la classe (nuxy.ch/join/8a0326eb), modules HTML 1 et 2

Zéro installation aujourd'hui

On code dès la première séance, directement dans le navigateur grâce à Nuxy. La création des comptes se fait à la maison (voir devoirs) et l'installation de WebStorm se fera ensemble en séance 2 : le temps de classe sert à coder, pas à installer.

Devoirs : Créer ses comptes GitHub et JetBrains avant la séance 2 — la validation étudiante peut prendre jusqu'à 72 h, commencez dès ce soir

Séance 2 - 26 août 2026

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

Objectifs :

• Installer WebStorm et le connecter à son compte GitHub
• Comprendre à quoi sert le versionnement (scénario : le travail perdu)
• Maîtriser le cycle modifier → commit → push, via l'interface de WebStorm
• Publier une première page « Hello World » avec GitHub Pages

Contenu :

• Première période — Installation guidée : WebStorm (licence JetBrains créée en devoir) + connexion GitHub
• Deuxième période — Premier dépôt, cycle commit → push, publication GitHub Pages
• Vocabulaire minimal : dépôt, commit, push — rien de plus
• Démo : cycle modification → commit → push → site en ligne, pas à pas
• Pratique : chaque élève publie sa première page en ligne — marche à suivre : Premier dépôt et mise en ligne

Licence JetBrains pas encore validée ?

La vérification étudiante peut prendre jusqu'à 72 h. Ce n'est pas bloquant : WebStorm est gratuit pour un usage non commercial (l'apprentissage en fait explicitement partie). Au premier lancement, choisir Non-commercial use et se connecter avec un compte JetBrains.

Portée volontairement réduite

Pas de terminal, pas de branches, pas de pull requests : le cycle commit → push via WebStorm suffit pour tout le semestre. Les branches viendront quand le besoin existera (cours 122 et suivants).

Le rituel des 5 dernières minutes

Dès la séance 3, chaque séance se termine par commit + push. Antisèche : Git en 4 gestes.

Devoirs : terminer le module 3 de Nuxy (HTML sémantique) pour le 2 septembre — donc rattraper les modules 1 et 2 au passage. Chaque module se termine par son examen (1.99, 2.99, 3.99), rejouable autant de fois que nécessaire.

Séance 3 - 2 septembre 2026

Thème : WebStorm, clonage et cycle complet

Objectifs :

• Faire le point sur les modules Nuxy 1 à 3 (Kahoot de révision, 20 questions)
• Cloner son dépôt dans WebStorm
• Maîtriser le cycle complet : modifier en local → commit → push → vérifier en ligne
• Structurer son CV : hiérarchie de titres, listes, deux sections distinctes

Contenu :

• Kahoot d'ouverture (~12 min)
• Clonage du dépôt du CV dans WebStorm, première modification locale, commit, push
• Démarrage du CV en classe, avec le prof à côté pour débloquer — Mon premier CV, palier 1
• Marche à suivre du clonage : Premier dépôt et mise en ligne

Le Kahoot ne compte pas pour la note

Il ouvre la séance et sert à repérer ce qui n'est pas encore acquis avant d'aller plus loin : fonctionnement du web, structure d'une page, titres et listes, liens, images, tableaux et balises sémantiques.

Le HTML n'est pas réexpliqué, il est appliqué

doctype, lang, charset, titres et listes ont été travaillés sur les modules Nuxy 1 à 3. La séance sert à les employer sur son propre contenu, pas à les redécouvrir.

Devoirs pour le 9 septembre : terminer tout le HTML du CV (paliers 1 et 2 : structure, liens, images, tableau, sémantique). Pas de module Nuxy cette semaine — tout ton temps va au CV.

Une seule chose à faire : le CV

Le HTML du CV n'est que de l'application : les modules Nuxy 1 à 3 l'ont déjà couvert, et la séance du 2 sert à démarrer avec de l'aide. Si tu es en retard sur les modules 1 à 3, préviens le prof plutôt que de tout empiler.

Séance 4 - 9 septembre 2026

Thème : CSS - Feuille de style, sélecteurs et couleurs

Objectifs :

• Maîtriser le quotidien WebStorm + Git : aperçu local, alertes de l'éditeur, fichiers suivis ou non, Update vs Clone
• Lier une feuille de style externe (style.css) à sa page
• Utiliser les sélecteurs de balise, groupés (h1, h2) et de classe — et savoir que l'id sert aux ancres, pas au style
• Appliquer des couleurs au texte et aux fonds, et choisir une palette lisible

Contenu :

• Première partie — WebStorm et Git dans la pratique, sur les questions de la classe : les menus Git et GitHub (Open on GitHub), Update vs Clone, Merge plutôt que Rebase, l'aperçu intégré (localhost) et le test dans un vrai navigateur, le panneau d'alertes qui bloque un commit, les fichiers rouges jamais ajoutés à Git, le dossier img/, les noms de fichiers en minuscules sans espace et Refactor → Rename, activer et désactiver GitHub Pages
• Deuxième partie — Découverte du CSS depuis zéro, à partir du HTML d'Homer : créer style.css, le lier (glisser-déposer dans WebStorm), anatomie d'une règle (sélecteur { propriété: valeur; }), couleur de fond et de texte sur body, border, sélecteur groupé h1, h2, héritage et cascade, classe vs id, commentaires, kebab-case, contraste
• Application au CV — les 4 objectifs minimum du palier 3 — puis Nuxy modules 4 et 5 en autonomie

Le CSS se découvre en classe

Pas de module Nuxy en devoir cette semaine : la séance enseigne le CSS depuis le début, démo à l'appui, puis chacun l'applique directement à son CV. Les modules 4 et 5 de Nuxy viennent ensuite consolider — commencés en classe, terminés en devoir. Le code écrit ensemble est repris dans l'exercice du CV, et la démo complète est à revoir dans l'enregistrement Teams du canal de la classe.

Le CSS est un langage silencieux

Un point-virgule oublié et toutes les déclarations qui suivent dans la règle sont ignorées — sans le moindre message. HTML et CSS pardonnent tout et ne disent rien : c'est à toi d'être précis, et à WebStorm de souligner. Quand tu demandes de l'aide à une IA, demande-lui « aide-moi à trouver l'erreur », pas « donne-moi le bon code ».

Chacun à son rythme

Le temps Nuxy en classe est de l'entraînement encadré, pas un devoir imposé : les élèves qui avancent vite peuvent enchaîner les modules suivants, c'est encouragé. Les objectifs de la semaine sont les modules 4 et 5 pour le 16 — au minimum le module 4 si tu es en retard.

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, plus tard dans le semestre.

Devoirs pour le 16 septembre : terminer le palier 3 du CV et faire les modules 4 (Premiers pas en CSS) et 5 (Les couleurs) de Nuxy — au minimum le module 4 si tu es en retard sur le HTML

Séance 5 - 16 septembre 2026

Thème : CV terminé et lancement du projet personnel

Objectifs :

• Tirer les leçons des CV publiés : ce qui marche en local et casse en ligne
• Boucler son CV : passer la checklist et publier la version finale
• Choisir le sujet de son projet personnel
• Créer, partager et publier le dépôt du projet — vide de contenu, mais en ligne
• Connaître les contraintes du projet dès le départ

Contenu :

• Retour sur les CV en ligne (reporté de la séance 4) : images invisibles à cause d'un espace ou d'une majuscule dans le nom, fichiers restés rouges dans WebStorm et jamais pushés, style.css lié mais sans effet, id utilisés là où une classe suffit
• Checklist du CV, chacun sur sa page, puis publication finale
• Lancement du projet personnel : présentation des consignes, des jalons et des interdits, puis mise en place du dépôt

Les tâches du jour

Même marche à suivre que pour le CV — Premier dépôt et mise en ligne — avec un nouveau nom. Dans l'ordre :

1. Créer le dépôt sur github.com, sur ton compte, public, nommé c113-projet-nomprenom (par exemple c113-projet-fallet-steve), avec le README activé

2. Le partager avec le prof : onglet Settings → Collaborators → Add people, invite l'utilisateur fallinov (le prof), puis Add fallinov to this repository. C'est ce qui permet le suivi et la correction — sans ça, le projet n'existe pas pour l'évaluation

   Vidéo (10 s, sans son) — tâche 2, inviter le prof : Settings → Collaborators → Add people, taper fallinov, choisir l'utilisateur, confirmer. L'invitation apparaît en attente jusqu'à ce que le prof l'accepte.

3. Cloner le dépôt dans WebStorm, dans un dossier local hors OneDrive/iCloud

4. Créer index.html avec le squelette HTML, un h1 au nom de ton site et un paragraphe qui dit de quoi il parlera. Le minimum à copier, puis à personnaliser :

   <!DOCTYPE html>
   <html lang="fr">
   <head>
       <meta charset="utf-8">
       <title>Nom de ton site</title>
       <link rel="stylesheet" href="style.css">
   </head>
   <body>
       <h1>Nom de ton site</h1>
       <p>Une phrase qui dit de quoi parlera ce site.</p>
   </body>
   </html>

5. Créer style.css (déjà lié par la ligne link ci-dessus) et poser une couleur de fond et une couleur de texte sur body — juste assez pour prouver que le lien fonctionne :

   body {
       background-color: whitesmoke;
       color: darkslategray;
   }

   Si la page reste blanche avec du texte noir, le lien n'est pas bon : vérifie le nom du fichier et son emplacement (même dossier qu'index.html)

6. Commit + push, puis activer GitHub Pages (Settings → Pages → Deploy from a branch, main, / (root))

7. Vérifier : ton adresse https://ton-compte.github.io/c113-projet-nomprenom/ affiche ta page

8. Remplacer le README par le modèle de mini-portfolio : télécharger le modèle de README (aussi sur le site des consignes, bouton « Télécharge le portfolio »). Remplis dès aujourd'hui la section Concept et note l'adresse de ton site en haut — le reste se complète au fil du semestre

9. Commit + push, puis vérifier sur github.com : la page d'accueil de ton dépôt affiche le nouveau README, avec ta section Concept remplie. Si tu vois encore « c113-projet-… » tout seul, le push n'a pas eu lieu

Le dépôt du CV reste, celui du projet est nouveau

Ne recycle pas le dépôt du CV : le projet a son propre dépôt, son propre historique et sa propre adresse. C'est cette adresse-là que tu rendras le 8 janvier.

🎯 Objectif du jour : le dépôt c113-projet-nomprenom existe, fallinov y est invité, index.html, style.css et le README-portfolio sont en ligne à l'adresse GitHub Pages du projet.

Le CV se termine avant que le projet commence

La première partie de la séance clôt l'exercice du CV — chacun passe la checklist et publie. Le projet personnel démarre ensuite, sur une base saine : dépôt, publication et cycle Git sont acquis.

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 6 — La cascade et les conflits — pour le 23 septembre. C'est le module de l'inspecteur (F12) : l'outil pour comprendre pourquoi un style ne s'applique pas.

Le rythme des séances 6 à 11

La théorie se travaille sur Nuxy, avant la séance : chaque semaine a son module en devoir. La séance applique au projet : 10 min de questions et de blocages — on règle d'abord ce qui coince, avant que ça ne coûte une heure de travail —, une démo ciblée, puis du temps de travail avec un objectif du jour, quelque chose de concret, poussé en ligne avant de partir. Le rituel des 5 dernières minutes reste : commit + push.

Les questions se posent au début, pas quand on est bloqué depuis vingt minutes.

Séance 6 - 23 septembre 2026

Thème : la page d'accueil du projet et sa palette

Objectifs :

• Structurer index.html et mettre en place style.css sur le projet
• Choisir une palette en sachant à quoi chaque couleur va servir
• Vérifier que ces couleurs se lisent (contraste)
• Savoir où va le h1 dans un site à plusieurs pages

Au programme :

• Contrôle des dépôts : fallinov bien invité comme collaborateur, revue des deux projets non vus le 16
• Démo : palette, rôle de chaque couleur, contrôle du contraste avec F12
• Travail sur le projet, avec le prof à côté

Le h1 du CV n'était pas une faute — le projet a une autre règle

Sur le CV, un h1 dans le header est correct : une page unique, un h1 qui la décrit. Le projet, lui, a plusieurs pages et le header y est le bandeau commun : si le h1 y était, toutes les pages porteraient le même titre. Donc :

• un seul h1 par page, dans main, qui décrit cette page (« Galerie », « Contact »…) ;
• le nom du site dans le header en logo : une div ou un a avec une classe (.logo { font-size: 2rem; font-weight: bold; }), comme montré le 16.

Si tu as masqué un h1 en CSS (display: none) : supprime-le. Un titre invisible reste lu par les lecteurs d'écran, et la page se retrouve avec deux h1.

Régler WebStorm une fois pour toutes

Indentation à 4 espaces et Reformat Code (Ctrl + Alt + L) avant chaque commit : marche à suivre dans Premier dépôt et mise en ligne.

Choisir sa palette

Deux ou trois couleurs suffisent : une dominante, une secondaire, une d'accentuation. Une couleur sans rôle n'a pas sa place dans la palette : avant de la choisir, sache où elle va atterrir.

Exemple — la palette de Pizza Mario

Couleur	Code	Usage	Où ça s'écrit
Crème	#FFF8E1	Fond principal	background-color sur body
Brun foncé	#3E2723	Texte — plus doux que le noir pur	color sur body
Vert basilic	#2E7D32	En-tête, navigation	background-color sur header
Rouge tomate	#D32F2F	Liens, prix, accents	color sur a
Jaune fromage	#FFC107	Badges, étoiles	plus tard

Visualise cette palette en ligne : Coolors · Realtime Colors · Contrast Checker

La palette complète, la règle 60-30-10 et les harmonies de couleurs sont détaillées dans Préparer un projet web — Design.

Aujourd'hui : le fond de la page, le texte courant, les titres, les liens — et le fond du header ou du footer si tu les as déjà. Plus tard : les bordures et le fond des cartes (séance 8, box model), les ombres, le survol des liens.

Note tes codes hexadécimaux en commentaire en haut de style.css : la semaine prochaine, ils deviendront des variables CSS.

Vérifier le contraste — F12

Tu l'as travaillé sur Nuxy 5.4 « Mission lisibilité » : 4,5:1 minimum entre un texte et son fond. Dans Brave ou Chrome, ouvre l'inspecteur (F12), clique le carré de couleur d'une règle color : le navigateur affiche le rapport et dit s'il passe. Le piège habituel : la couleur d'accentuation, faite pour les détails, utilisée sur des paragraphes.

Ce qui se teste, c'est chaque combinaison texte/fond, pas les couleurs une par une : une palette peut être jolie et contenir deux couleurs qui, superposées, ne se lisent pas.

C'est noté — 4 points « Design & accessibilité » au projet, dont « contrastes conformes ».

Pour composer la tienne :

• Coolors — génère et verrouille des couleurs, copie directe des codes hexadécimaux
• Realtime Colors — applique ta palette sur une vraie maquette de site, en direct : le meilleur moyen de voir si elle tient en contexte
• Colour Contrast Checker — deux codes, un verdict

Ces outils servent à choisir, pas à charger : on recopie les codes (#1F2937…) dans son CSS. La règle « pas de CDN » du projet n'est donc pas concernée.

Les tâches du jour

• index.html complété : title explicite, un h1 dans main, au moins un h2, un paragraphe de présentation contenant un lien
• style.css créé, lié par <link> dans le head, et son effet visible dans le navigateur
• Palette choisie : 2 ou 3 codes hexadécimaux, notés en commentaire en haut de style.css
• Couleur de fond et couleur du texte appliquées sur body
• Couleur des titres et couleur des liens appliquées
• Contraste vérifié (F12) : au moins 4,5:1 pour le texte comme pour les liens
• Commit + push, puis vérification de la page en ligne sur GitHub Pages

🎯 Objectif du jour : la page d'accueil du projet, structurée et aux couleurs de ta palette, en ligne.

Devoirs Nuxy : module 7 — Texte et variables — pour le 30 septembre. Il prépare la séance suivante : polices, tailles de texte et centralisation de la palette en variables CSS.

Séance 7 - 30 septembre 2026

Thème : Variables CSS et typographie, sur le projet

Objectifs :

• Centraliser sa palette dans des variables CSS (:root, var())
• Mettre en forme le texte du projet (font-family, font-size, font-weight, line-height)
• Intégrer des polices locales (pas de CDN)

Au programme :

• Questions et blocages (10 min) : ce qui coince depuis la semaine dernière, avant de lancer quoi que ce soit
• Démo : la palette rangée dans des variables CSS, puis la typographie
• Travail sur le projet, avec le formateur à côté

📦 Jalon 1 : structure HTML du projet complète — toutes les pages existent et sont en ligne

Les tailles ne s'écrivent pas en pixels

rem pour le texte. font-size: 1.2rem s'adapte quand un visiteur agrandit le texte de son navigateur ; font-size: 19px reste bloqué à 19 px, même pour quelqu'un qui voit mal. 1rem vaut la taille de base du navigateur, en général 16 px — donc 1.5rem fait 24 px, toujours, quelle que soit la profondeur dans la page.

em pour les espacements d'un bloc. padding: 1.5em suit la taille du texte de ce bloc : une carte au texte plus grand s'aère d'elle-même. em se réfère au parent, donc il se multiplie en cascade — c'est utile ici, et c'est exactement pourquoi on ne l'utilise pas pour le texte.

L'interligne se règle sans unité : line-height: 1.6, entre 1.5 et 1.7 pour du texte courant. Plus serré, les lignes se collent ; plus large, l'œil perd le fil.

Et donne toujours une police de secours : font-family: 'Montserrat', sans-serif. Si le fichier de police ne charge pas, le navigateur prend la seconde plutôt que sa police par défaut.

Les tâches du jour

• Jalon 1 : toutes les pages du site existent et sont en ligne
• Palette déplacée dans :root et appelée partout avec var(--nom)
• Une police choisie et appliquée avec font-family — le fichier de police téléchargé dans le projet, jamais chargé depuis un serveur extérieur : Installer une police dans son projet
• font-size en rem, font-weight et line-height entre 1.5 et 1.7 posés sur le texte courant — aucune taille de texte en pixels
• La famille de police rangée elle aussi dans une variable (--police-titre, --police-texte)
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : les couleurs de la séance passée migrées en variables, la typographie posée.

Devoirs pour le 21 octobre (trois semaines, vacances comprises) : module Nuxy 8 — Le modèle de boîte, examen compris.

Les devoirs des vacances, annoncés aujourd'hui

Un module sur trois semaines : de quoi le faire sans se presser. À la rentrée, la séance démarre par un Kahoot sur les modules 5 à 8 — mieux vaut les avoir vraiment faits.

Séance 8 - 21 octobre 2026

Thème : Box model, sur le projet

Objectifs :

• Faire le point après les vacances (Kahoot, modules 5 à 8)
• Appliquer le modèle de boîte au projet : padding, margin, border, box-sizing
• Construire des cartes et des sections correctement espacées
• Régler définitivement les comptes GitHub Education

Au programme :

• Questions et blocages (10 min) : trois semaines ont passé, on repart d'une classe au clair
• GitHub Education (10 min) : chacun vérifie l'état de sa demande sur education.github.com. Un refus se retraite en classe avec la checklist du tuto (email @edu.jura.ch confirmé, vrai nom dans le profil, preuve datée) ; les demandes jamais envoyées partent aujourd'hui. Le pack conditionne la licence JetBrains et GitHub Pro : deux mois après la rentrée, une demande bloquée ne se débloquera pas seule.

Ce que ton site doit déjà avoir au retour des vacances

Trois semaines se sont écoulées depuis la séance 7 : la séance d'aujourd'hui part du principe que ton site a déjà toutes ses pages en ligne, son HTML structuré (header, main, footer), sa palette rangée dans des variables CSS, sa typographie posée et ses polices comme ses images stockées dans le dépôt — rien qui vienne d'un serveur extérieur.

S'il te manque quelque chose, dis-le pendant les 10 minutes de questions : on rattrape aujourd'hui, pas en décembre.

Trois erreurs classiques que le box model fait disparaître

<br> pour écarter deux blocs. Un <br> sert à passer à la ligne dans un texte — une adresse, un vers. Pour éloigner deux éléments, c'est margin ; pour aérer l'intérieur d'un bloc, c'est padding. Trois <br> d'affilée, c'est trois fois la même erreur.

Une image qui déborde. Une photo de 2000 px reste large de 2000 px et fait défiler la page de côté sur un téléphone. La règle qui règle le problème pour tout le site :

img {
    max-width: 100%;
    height: auto;
}

Un chemin d'image absolu. url("https://exemple.com/fond.jpg") charge l'image depuis un serveur extérieur : c'est la règle « pas de CDN » qui saute, et l'image disparaît le jour où ce serveur ferme. Toujours un chemin relatif vers ton dossier : url("img/fond.jpg").

Les tâches du jour

• État de ta demande GitHub Education vérifié : pack actif, ou demande renvoyée aujourd'hui
• box-sizing: border-box posé au début de la feuille de style
• padding sur les sections, margin entre les blocs
• Au moins une carte construite : bordure, fond, espacement intérieur
• La règle img { max-width: 100%; height: auto; } posée une fois pour tout le site
• Plus aucun <br> utilisé pour espacer des blocs
• Plus aucun texte collé à un bord, sur aucune page
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : plus aucun texte collé à un bord — sections et cartes espacées proprement.

Devoirs Nuxy : module 9 — Flexbox — pour le 28 octobre

Séance 9 - 28 octobre 2026

Thème : CSS - Flexbox

Objectifs :

• Appliquer Flexbox au projet : justify-content, align-items, gap
• Construire la barre de navigation du site

Les tâches du jour

• Barre de navigation passée en display: flex
• justify-content, align-items et gap réglés
• La même navigation présente sur toutes les pages
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : la navigation horizontale du site, en ligne sur toutes les pages.

Ressources :

• Flexbox Froggy — pour s'entraîner en s'amusant

Devoirs Nuxy : module 10 — Mise en page et positionnement — pour le 4 novembre

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 : toutes les pages mises en page — contenu centré, navigation, états :hover

Les tâches du jour

• header, nav, main et footer en place sur toutes les pages
• Contenu centré et sa largeur limitée (max-width + margin: auto)
• Liens stylés avec :hover et une transition
• Si — et seulement si — ton site en a besoin : un élément positionné (sticky, absolute ou fixed)
• Jalon 2 : toutes les pages mises en page
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : la page la plus complexe du site entièrement mise en page.

Devoirs Nuxy : module 11 — Grille et responsive — pour le 11 novembre

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.

Sans cette ligne, rien de tout ça ne marche sur un téléphone

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Elle se place dans le <head> de chaque page. Sans elle, un smartphone fait semblant d'avoir un écran de 980 px et dézoome toute la page : ton site responsive s'affiche en miniature, texte illisible. Tu l'as vue dans l'exercice Nuxy 1.3 — vérifie qu'elle est bien dans toutes tes pages avant de tester quoi que ce soit.

Les tâches du jour

• Galerie de cartes en display: grid avec un gap
• repeat(auto-fill, minmax(250px, 1fr)) : la galerie s'adapte sans media query
• Styles écrits en mobile-first : le mobile d'abord, puis on élargit
• Au moins une media query min-width: 768px
• <meta name="viewport"> présent dans le <head> de chaque page
• Site testé à 375 px aux DevTools : aucun défilement horizontal
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : le site tient à 375 px sans défilement horizontal — testé aux DevTools.

Devoirs : finir de rendre le site responsive pour le 18 novembre

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

Les tâches du jour

• Chaque image redimensionnée à la taille où elle s'affiche vraiment
• Images converties en WebP avec Squoosh
• Aucune image au-dessus de 300 Ko — vérifie le poids des fichiers
• Audit Lighthouse lancé et score relevé
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : toutes les images du site sous 300 Ko, score Lighthouse relevé et noté.

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é — le projet est terminé ; décembre sert au polish

Ce que le validateur va te reprocher

• Du texte sans balise, posé directement dans <body> ou <div> : tout texte vit dans un <p>, un titre ou une balise de liste.
• Un titre ou une <div> dans un <p> : un paragraphe ne contient que des balises de texte — <strong>, <em>, <a>, <span>, <br>.
• Un attribut alt manquant sur une image.
• Une balise mal fermée ou fermée dans le désordre.

Deux détails qui ne sont pas des erreurs mais qui font la différence en revue : écrire © plutôt que de coller un © dans le code, et laisser une ligne vide à la fin de chaque fichier.

Les tâches du jour

• HTML validé au W3C : zéro erreur, sur chaque page
• WAVE passé : tous les alt présents, titres dans l'ordre
• Contrastes vérifiés : au moins 4,5:1 pour les textes et les liens
• README du projet rédigé (le mini-portfolio)
• Jalon 3 : site responsive, fonctionnel et validé
• Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : zéro erreur W3C, contrastes vérifiés, README rédigé.

Devoirs pour le 16 décembre : refaire les examens de module Nuxy (1.99 à 11.99) — rejouables à volonté, c'est la meilleure préparation à l'examen blanc

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

À faire avant de venir

• Examens de module Nuxy 1.99 à 11.99 refaits — ils sont rejouables autant de fois que nécessaire
• Relire ses propres erreurs : ce qui a été corrigé sur le projet depuis septembre est exactement ce qui tombera
• Prévoir de quoi écrire : l'examen se fait sur papier

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
• Savoir que Git ne s'arrête pas à commit et push : à quoi servent les branches
• Questions de préparation à l'épreuve de module M11 du 13 janvier 2027

Les tâches du jour

• Checklist finale du projet passée : validation W3C, images, responsive, README
• Dernières corrections commitées et en ligne
• Adresse GitHub Pages ouverte une dernière fois, sur un autre appareil si possible
• README-portfolio complété
• Questions notées pour l'épreuve de module du 13 janvier

🎯 Objectif du jour : un projet qu'on pourrait rendre ce soir — les vacances ne servent qu'au polish.

Git : la suite, en cinq minutes

Tout le semestre a tenu sur une seule branche, main — et c'est tout ce dont un projet personnel a besoin. Dès qu'on travaille à plusieurs sur le même dépôt, deux notions arrivent : la branche, pour avancer sans gêner les autres, et la pull request, pour faire relire son travail avant de l'intégrer.

Vous les pratiquerez en cours 122, puis pour de bon en 822, quand plusieurs d'entre vous modifieront le même projet. Les apprendre aujourd'hui, sans ce besoin, n'apprendrait rien.

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)	4, 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	2, 3, puis en continu
Valider, optimiser et auditer un site	12, 13, 15