DEV {JS}

Mode sombre

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éanceDateThèmeContenuExercices Nuxy
119.08DémarrageHistoire du web + premières lignes de HTML sur NuxyHTML 1-2
226.08Git & GitHubInstallation WebStorm + premier dépôt + « Hello World » en ligneDevoirs : modules 1 à 3
302.09Git & WebStormCloner, modifier en local, republier + CV structuréKahoot de révision 1-3
409.09CSSFeuille de style, sélecteurs et couleurs sur le CV — WebStorm et Git consolidésCSS en classe · M4-M5 en devoir
516.09ProjetCV terminé — lancement du projet : dépôt c113-projet-nomprenom créé, partagé et publiéM4-M5 acquis
623.09ProjetPalette et style.css du projet en placeM6 acquis
730.09ProjetVariables CSS + typographie — 📦 Jalon 1M7 acquis
821.10ProjetEspacements et cartes (box model)M8 acquis + Kahoot 5-8
928.10ProjetLa barre de navigation (Flexbox)M10 acquis
1004.11ProjetMise en page de toutes les pages — 📦 Jalon 2M11 acquis
1111.11ResponsiveMobile-first : site testé à 375 pxM12 acquis
1218.11PerformanceAtelier images + LighthouseM9 acquis
1325.11QualitéAccessibilité + validation W3C-
1416.12RévisionsEXAMEN BLANC (sur papier)Examens X.99 refaits
1523.12FinalisationChecklist 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 :

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 :

    html
    <!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 :

    css
    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 :

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

CouleurCodeUsageOù ça s'écrit
Crème#FFF8E1Fond principalbackground-color sur body
Brun foncé#3E2723Texte — plus doux que le noir purcolor sur body
Vert basilic#2E7D32En-tête, navigationbackground-color sur header
Rouge tomate#D32F2FLiens, prix, accentscolor sur a
Jaune fromage#FFC107Badges, étoilesplus 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 :

css
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 10 — 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 :

  • Démo à refaire en classe : c113-demo-nav-flex. Sur GitHub, clique Use this template → Create a new repository, choisis ton compte comme propriétaire et laisse Include all branches décoché : tu obtiens ta propre copie, sur laquelle tu peux faire commit et push. Clone ensuite ta copie dans WebStorm (File → New → Project from Version Control) : elle contient le code de départ, la liste de liens brute. La solution, une étape par commit, est sur la branche solution du dépôt d'origine. Ce modèle ne sert que pour cette démo : ton projet personnel reste écrit sans template.
  • Flexbox Froggy — pour s'entraîner en s'amusant

Devoirs Nuxy : module 11 — 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)
  • Signaler la page en cours dans la navigation avec aria-current="page"
  • 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, page en cours marquée avec aria-current="page"

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: 0 auto)
  • Liens stylés avec :hover et une transition
  • Sur chaque page, le lien de la page en cours porte aria-current="page" et se distingue des autres en CSS
  • 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
  • Dépôt partagé avec fallinov (Settings → Collaborators) et GitHub Pages activé
  • 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.

Ressources :

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

Séance 11 - 11 novembre 2026 ​

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

Objectifs :

  • Comprendre l'approche mobile-first : les règles sans media query sont celles du téléphone
  • Passer le menu en mobile d'abord : logo et liens en colonne sur téléphone, en ligne dès 768 px avec flex-direction et une media query
  • Créer une galerie de cartes avec CSS Grid : display: grid et gap
  • Rendre cette galerie responsive avec des media queries (min-width 768 px et 1024 px), puis sans media query grâce à repeat(auto-fill, minmax(250px, 1fr))
  • Tester son site avec le mode responsive des DevTools

La démo : une grille de cartes, en trois étapes ​

Même logique que Flexbox : la propriété se met sur le parent, ici la <section class="galerie">, et ce sont ses enfants directs, les <article class="carte">, qui deviennent les cases.

  1. Une grille sans colonnes. Rien ne change à l'écran, sauf l'espace entre les cartes : une grille sans colonnes définies n'en a qu'une. C'est la règle du téléphone.

    css
    .galerie {
    display: grid;
    gap: 1rem;
}

  2. Mobile d'abord, avec media queries. Deux colonnes dès 768 px, trois dès 1024 px. 1fr est une fraction de la place libre : repeat(2, 1fr) vaut 1fr 1fr.

    css
    @media (min-width: 768px) {
    .galerie {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .galerie {
        grid-template-columns: repeat(3, 1fr);
    }
}

  3. Le raccourci. Une seule règle, et le navigateur choisit le nombre de colonnes : minmax(250px, 1fr) donne au moins 250 px à chaque colonne, auto-fill en place autant que la largeur le permet. Une colonne à 375 px, deux à 600 px, trois à 960 px.

    css
    .galerie {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Adaptatif avant les media queries

repeat(auto-fill, minmax(250px, 1fr)) fait passer la galerie de plusieurs colonnes à une seule 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.

Pas de transition entre deux nombres de colonnes

Une transition interpole deux valeurs de même forme. Passer de deux à trois colonnes est un saut : le navigateur bascule d'un coup, et transition: all n'y change rien, il animerait juste tout le reste. La transition a sa place sur le background-color des liens du menu.

Grid ou Flexbox ? Lequel choisir ​

FlexboxGrid
Dimensionsune seule : une rangée ou une colonnedeux : lignes et colonnes à la fois
Qui commandele contenu : chaque enfant prend la place de son contenu, le parent répartit le restele parent : il dessine les colonnes, les enfants s'y rangent
Alignementsur un axe ; au passage à la ligne, les rangées ne s'alignent pas entre ellestout s'aligne : les cartes de la deuxième rangée sont sous celles de la première
Avantagessimple, idéal pour quelques éléments de tailles différentes sur une lignecolonnes de largeur égale, grille adaptée à la fenêtre en une ligne de CSS
Inconvénientsavec flex-wrap, la dernière rangée fait des cases de largeur différentetrop lourd pour aligner trois éléments sur une ligne
  • Flexbox : des éléments en ligne, dont le nombre ou la largeur varient. Barre de navigation, logo à gauche et menu à droite, boutons, icône plus texte.
  • Grid : des éléments de même forme à ranger en lignes et en colonnes. Galerie de cartes, de photos, de produits, et la mise en page générale d'une page.
  • Les deux ensemble : Grid pour la galerie, Flexbox à l'intérieur d'une carte pour aligner un prix et un bouton. Une carte peut être enfant d'une grille et elle-même conteneur flex.

Une question suffit

Je range sur une seule ligne, ou je range en lignes et en colonnes ? Une ligne, Flexbox. Lignes et colonnes, Grid. Si tu hésites, commence par Flexbox, c'est le plus simple.

Le piège de la galerie en Flexbox

Avec display: flex et flex-wrap: wrap, sept cartes de flex: 1 1 250px passent bien à la ligne, mais la septième, seule sur la dernière rangée, s'étire sur toute la largeur et plus rien n'est aligné en colonnes. Avec Grid, elle garde la largeur des autres et la rangée laisse des cases vides.

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

html
<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.

La routine pour avancer ton projet ​

Fixe-toi un objectif simple : la version smartphone d'abord. Ne réfléchis pas encore à la version grand écran.

  1. Prépare : imagine ton site ou trouve un site de référence, liste les contenus de chaque page, puis fais une maquette rapide de ta page d'accueil, version téléphone. Un croquis sur papier suffit.
  2. Rassemble : palette de couleurs, polices téléchargées dans fonts/, textes et images de moins de 300 Ko, avec des noms de fichiers en minuscules, sans espaces et sans caractères spéciaux (me contacter.html → me-contacter.html).
  3. Crée une page modèle : doctype, lang, charset, viewport, title et lien vers le CSS, puis header, nav, main avec son h1, et footer.
  4. Écris le CSS de base : variables, @font-face, body, titres, puis header et footer, testés à 375 px.
  5. Duplique la page modèle : adapte title, h1 et aria-current sur chaque page. Vérifie que la navigation fonctionne et que le CSS s'applique partout.
  6. Remplis une page à la fois : le HTML, puis le CSS, testé à 375 px. Passe ensuite à la suivante.
  7. Élargis : ajoute les media queries min-width, à 768 px puis à 1024 px.
  8. Contrôle : commit et push à chaque étape, validation W3C, puis vérification du site en ligne.

Termine la page modèle avant de la dupliquer

Le header et le footer sont copiés dans chaque fichier. Si tu les finis après, chaque correction se répète sur toutes tes pages.

Deux questions de projet ​

Un lien pour écrire ou appeler. Un href peut ouvrir un e-mail avec mailto: et lancer un appel avec tel:. Le numéro s'écrit +41 sans le 0 du début et sans espaces dans le href, et reste lisible dans le texte du lien :

html
<a href="mailto:contact@example.com">contact@example.com</a>
<a href="tel:+41320000000">032 000 00 00</a>

Ton site est public : dans ton projet, utilise une adresse fictive en example.com et n'y mets pas ton numéro personnel.

Un style différent sur une seule page. Pose une classe sur le body de cette page, puis vise ce que tu veux à travers elle. Les autres pages partagent le même CSS, sans être touchées :

html
<body class="page-contact">
css
.page-contact main {
    background-color: #f0f9ff;
}

Évite l'id : rien ne pèse plus lourd, et une règle écrite avec un id ne se corrige plus sans !important.

Les tâches du jour ​

  • Styles écrits en mobile-first : le mobile d'abord, puis on élargit
  • Menu en colonne sur téléphone, en ligne dès 768 px (flex-direction dans une media query)
  • Galerie de cartes en display: grid avec un gap
  • repeat(auto-fill, minmax(250px, 1fr)) : la galerie s'adapte sans media query
  • 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.

Ressources :

Devoirs pour le 18 novembre : finir de rendre le site responsive, et terminer toute la formation HTML/CSS de Nuxy : les modules 1 à 12, examens de module compris. Le module 9 — Les images de fond est le dernier qui n'a pas encore été donné : il prépare la séance 12.

Séance 12 - 18 novembre 2026 ​

Thème : Atelier images et performance

Objectifs :

  • Mesurer ce que pèse une image et ce qu'elle coûte au chargement, dans l'onglet Réseau des DevTools
  • Redimensionner et compresser ses images en WebP avec Squoosh
  • Poser une photo en fond d'une bannière et garder le texte lisible par-dessus (module Nuxy 9)
  • Savoir quand une image est un contenu (<img> avec alt) et quand elle est un décor (fond CSS)

La démo : une bannière avec photo, en quatre étapes ​

Sur index.html et style.css du site de démo, DevTools ouverts sur l'onglet Réseau. Tu tapes en même temps, et tu regardes le résultat après chaque étape.

  1. La photo brute. Une <img> de 3,9 Mo dans la bannière. Réseau, en « 3G lente » : plusieurs secondes avant que la photo apparaisse. C'est ce que vit un visiteur sur son téléphone.

    html
    <section class="banniere">
    <img src="img/creux-du-van.jpg" alt="Les falaises du Creux du Van sous un ciel bleu">
    <h1>Bienvenue</h1>
</section>

  2. Squoosh. squoosh.app : redimensionner à 1600 px de large, format WebP, qualité 65 à 75. Résultat : 217 Ko au lieu de 3,9 Mo, la même photo à l'œil. Remplacer le fichier, recharger, comparer dans Réseau.

  3. La photo passe en fond. Une photo qui décore la bannière n'est pas un contenu : elle va en CSS, sans alt. La <img> disparaît du HTML.

    css
    .banniere {
    background-color: #1f2937;           /* de secours, visible tant que la photo charge */
    background-image: url("img/creux-du-van.webp");
    background-size: cover;              /* la photo remplit la boîte, quitte à être rognée */
    background-position: center;
    padding: 4rem 1.5rem;                /* la hauteur vient du padding, pas d'une height */
    color: white;
    text-align: center;
}

  4. Un voile sombre. Du blanc sur un ciel bleu clair ne se lit pas. Un dégradé uniforme posé devant la photo, dans la même propriété : le premier fond est au-dessus.

    css
    .banniere {
    background-image: linear-gradient(rgba(31, 41, 55, 0.6), rgba(31, 41, 55, 0.6)),
                      url("img/creux-du-van.webp");
}

Contenu ou décor ?

Contenu : la photo d'un projet, le portrait de la page À propos, un schéma. Elle informe, elle va dans une <img> avec un alt qui décrit ce qu'on voit. Décor : la photo derrière un titre, un motif de fond. On pourrait la retirer sans rien perdre : elle va en CSS, et un lecteur d'écran n'en parle pas.

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.

Les tâches du jour ​

  • Poids de chaque image relevé dans l'onglet Réseau
  • 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
  • Si ton site a une image de fond : une background-color de secours, et le texte posé dessus reste lisible
  • Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : toutes les images du site sous 300 Ko, en ligne.

Ressources :

Devoirs pour le 25 novembre : les quatre critères du Jalon 3 (voir séance 13) tenus sur la page d'accueil, et les images de toutes les pages sous 300 Ko

Séance 13 - 25 novembre 2026 ​

Thème : Contrôler son site et Jalon 3

Objectifs :

  • Lire un message d'erreur du validateur W3C et le corriger
  • Vérifier l'accessibilité avec WAVE : alt, ordre des titres, contrastes
  • Rédiger le README du projet (mini-portfolio)

📦 Jalon 3 : un site rendable. Quatre critères vérifiables, sur chaque page :

  1. <meta name="viewport"> présent, et aucun défilement horizontal à 375 px
  2. Zéro erreur au validateur W3C
  3. WAVE : aucun alt manquant, titres dans l'ordre
  4. Toutes les images sous 300 Ko, et un README à la racine du dépôt

Le responsive complet sur grand écran, les contrastes à 4,5:1 et le polish passent en finalisation, séances 14 et 15. Un site qui tient ces quatre critères peut être rendu.

La démo : casser, lire, réparer ​

Sur le site de démo, branche seance-13-depart : trois pages propres, et une page À propos qui contient les fautes classiques d'un projet d'élève, une pour chaque outil.

  1. Un site propre d'abord. Le HTML de index.html collé dans le validateur W3C : zéro erreur. C'est à ça que ça ressemble quand c'est bon.
  2. a-propos.html dans le validateur : huit messages pour cinq fautes. On les lit un par un, on corrige la première, on revalide. Une balise <a> jamais fermée fait apparaître trois erreurs à elle seule, et un <h2> posé dans un <p> en fait une sur le </p> qui suit.
  3. WAVE (wave.webaim.org) sur la page en ligne : icônes rouges = à corriger (alt manquant, langue absente), panneau Structure pour l'ordre des titres, onglet Contraste pour la légende en gris clair.
  4. Le téléphone : DevTools en mode appareil, 375 px. Sans viewport, la page est dézoomée ; la photo brute de 5488 px fait défiler la page sur le côté, et l'onglet Réseau affiche 3,9 Mo.
  5. Le README : le gabarit ci-dessous, à recopier et à adapter.

Le résultat, chaque faute commentée dans le code, est sur seance-13-solution.

Ce que le validateur va te reprocher

  • Un attribut alt manquant sur une image.
  • Un titre qui saute un niveau : un <h3> juste après le <h1>. Les titres descendent un niveau à la fois.
  • Un titre ou une <div> dans un <p> : un paragraphe ne contient que des balises de texte — <strong>, <em>, <a>, <span>, <br>.
  • Du texte sans balise dans une liste : dans un <ul>, tout vit dans un <li>. Dans <body> ou <div>, un texte nu passe le validateur, mais il n'a pas sa place pour autant.
  • Une balise jamais fermée ou fermée dans le désordre : une seule suffit à faire apparaître trois ou quatre erreurs plus bas.

Et ce que WAVE ajoute : la langue (<html lang="fr">), et un texte trop clair sur fond clair, en dessous de 4,5:1.

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

markdown
# Nom du site

Une phrase : de quoi parle le site, pour qui.

**En ligne** : https://ton-compte.github.io/c113-projet-nomprenom/

## Pages

- Accueil : ...
- Projets : ...

## Ce que j'ai appris

Deux ou trois lignes, avec tes mots.

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
  • Viewport présent et aucun défilement horizontal à 375 px, sur chaque page
  • README du projet rédigé (le mini-portfolio)
  • Jalon 3 : les quatre critères tenus sur chaque page
  • Commit + push, puis vérification de la page en ligne

🎯 Objectif du jour : zéro erreur W3C sur chaque page, README rédigé, Jalon 3 tenu.

Ressources :

  • Démo à reprendre en classe : branche seance-13-depart du dépôt de démo (la page À propos à réparer, le README liste les fautes et l'outil qui les voit), résultat sur seance-13-solution.
  • Validateur W3C, onglet « Validate by direct input » : coller le HTML
  • WAVE : l'adresse de la page en ligne, ou l'extension du navigateur

Devoirs pour le 16 décembre : les quatre critères du Jalon 3 sur toutes les pages si ce n'est pas encore fait, et refaire les examens de module Nuxy (1.99 à 12.99) — rejouables à volonté, c'est la meilleure préparation à l'examen blanc. Je repasse sur tous les dépôts autour du 9 décembre.

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 à 12.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)
  • Lancer un audit Lighthouse (DevTools, onglet Lighthouse) et lire les quatre scores : performance, accessibilité, bonnes pratiques, SEO
  • Vérifier les contrastes : au moins 4,5:1 pour les textes et les liens
  • 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
  • Audit Lighthouse lancé sur la page en ligne, les quatre scores relevés, le point le plus bas corrigé
  • Contrastes vérifiés : au moins 4,5:1 pour les textes et les liens
  • 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 coursSéances
Structurer une page avec des balises HTML sémantiques3, 4, 5
Présenter des données dans un tableau4
Mettre en forme avec CSS (couleurs, typographie, box model)4, 6, 7, 8
Créer des mises en page modernes avec Flexbox et Grid9, 10, 11
Positionner des éléments (relative, absolute, fixed, sticky)10
Rendre un site adaptatif (mobile-first, media queries)11, puis 12 à 15
Versionner avec Git et publier avec GitHub Pages2, 3, puis en continu
Valider, optimiser et auditer un site12, 13, 15

Documentation pour les cours de développement web

© 2024-2026 Steve Fallet, Thomas Tirole — CEJEF