ESIG · 2026-2027 · Steve Fallet

Langages &
développement web

Cours 113 — HTML · CSS · Git  ·  mercredi 12:55 · salle A2-07
Votre formateur

Steve Fallet

Informaticien de gestion HES — techno-enthousiaste
Enseignant d'informatique à l'ESIG — HTML & CSS, JavaScript, Vue.js, WordPress
Responsable pédagogique au Service de la formation postobligatoire
Marié, une fille — habite à Porrentruy
Me joindre : Teams ou steve.fallet@edu.jura.ch
Ma philosophie — la seule qui compte

Ici, on a le droit
de se tromper

L'erreur est le moteur de l'apprentissage.Il faut faire, se tromper, recommencer — c'est comme ça qu'on apprend le mieux.
Il n'y a jamais de question bête.Lève la main. Demande à un camarade, à l'IA, sur Teams — mais quand je suis là, passe vers moi.
La confiance va dans les deux sens.Je vous fais confiance — faites-moi confiance. C'est le contrat de ce cours.
Ce qui rend la confiance possible

Un peu de respect,
beaucoup de dialogue

S'annoncer.Retard, absence, besoin de sortir : un mot suffit. Arriver à l'heure reste le mieux.
Écouter.Quand quelqu'un parle, on écoute. On n'est pas seul chez soi : on construit un climat de travail ensemble.
Dialoguer.Une remarque te semble injuste ? Viens m'en parler, écris-moi — aujourd'hui ou la semaine prochaine. On met tout sur la table, je ne suis pas rancunier. On est tous humains, on a tous des mauvais jours — moi aussi.
Avancer à ton rythme.Débutant ou déjà à l'aise : personne n'est bridé, personne n'est largué. Je suis là pour t'accompagner.
On n'est plus à l'école obligatoire

Ta formation
t'appartient

Ici, personne ne court derrière toi. Si tu bloques, si tu as une question, si tu prends du retard : c'est toi qui fais le premier pas.
Et quand tu le fais — je réponds, toujours. Ou je demande à l'IA ;)

À garder dans tes favoris — maintenant

Tout le cours est là

devjs.ch/cours/113

Le plan des 15 séances, les antisèches, les consignes du projet — tout ce qu'il faut, toujours à jour.

Sors ton téléphone — on fait connaissance

Quelques questions,
réponses anonymes

wooclap.com/PUAZELA

Reste connecté : on revotera plusieurs fois pendant la séance.

▶ Wooclap
L'objectif du semestre

Créer ton site.
En vrai. En ligne.

Un site complet, codé à la main, publié sur le web — de la première ligne de code à la mise en ligne. Sur un sujet que tu choisis.

Parlons-en tout de suite

Comment tu seras évalué

Ton projet personnel — 20 pts
rendu : vendredi 8 janvier 2027
Un site complet sur un sujet que tu choisis, construit en classe dès la séance 5, publié en ligne. Chaque notion du cours s'y applique directement.
L'épreuve de module — 20 pts
mercredi 13 janvier 2027 · sur papier
Sans ordinateur, sans notes : il faut savoir écrire du HTML et du CSS de tête. Un examen blanc en décembre te dira où tu en es.
Deux projets de la volée passée — partis de zéro, comme toi. Scanne.
« The Office US »

Le site fan de la série — fun, complet, responsive.

« Winter Tales »

Un guide d'hiver élégant — recettes, lectures, playlists.

Tout ce qu'on fera ce semestre sert ces deux rendez-vous. Détails du projet à la séance 5.

Un peu d'histoire

Le web est né en Suisse

1989Tim Berners-Lee,au CERN 1991premier site web 1996CSS arrive 2008Chrome 2014le mobile dépassel'ordinateur 2022ChatGPT :l'IA pour tous 2026vous êtes ici
Comment ça marche ?

Ton navigateur discute
avec un serveur

TON NAVIGATEURBrave · Firefox UN SERVEURquelque part sur Terre 1 · la requête : https://devjs.ch 2 · la réponse : du code HTML + CSS

3 · le navigateur interprète ce code… et dessine la page.

Deux langues à apprendre

HTML structure.
CSS décore.

HTML dit ce que c'est : un titre, un paragraphe, une image.
CSS dit de quoi ça a l'air : couleurs, tailles, mise en page.

À vous

Quels navigateurs
connaissez-vous ?

Réponds sur wooclap.com/PUAZELA — nuage de mots en direct.
Puis on compare avec la réalité → gs.statcounter.com

▶ Wooclap
Parlons de l'IA

Une alliée… ou un piège ?

Vote d'abord — anonyme, sur Wooclap : « Utilises-tu l'IA pour tes travaux scolaires ? »

▶ Wooclap

✓ Bon usage

  • Se faire expliquer un concept difficile
  • Explorer des alternatives de design
  • Se challenger, se faire questionner

✗ Piège

  • Générer son code sans le comprendre
  • L'illusion de la compétence
  • Le réflexe « IA d'abord » — la dépendance
La seule règle IA du cours

Comprendre
100 %
de ton code

Tu dois pouvoir expliquer chaque ligne que tu rends. Sans exception.

Ta première notion

L'anatomie d'un élément

<p> Mon chat est grincheux </p> balise ouvrante le contenu balise fermante un élément HTML complet
De l'élément à la page

Une page = des boîtes
imbriquées

<html> <body> <h1>Mon premier site</h1> <p>Bienvenue ! Ici, je parle de ma passion.</p> <h2>Qui suis-je ?</h2> <p>Un futur développeur web.</p> </body> </html>
À toi de coder — maintenant

Rejoins la classe

nuxy.ch/join/8a0326eb

Compte gratuit — ta progression est sauvegardée,
et je la vois aussi.

Vote flash — à main levée

Comment as-tu sauvegardé
ton mot de passe ?

A « J'ai repris mon mot de passe habituel »
B « Une variante : l'habituel, avec un 1 à la fin »
C « Un nouveau — noté sur papier ou dans les notes du téléphone »
D « Généré et rangé dans un gestionnaire de mots de passe »

Vote sur wooclap.com/PUAZELA — anonyme. Sois honnête, personne ne saura.

▶ Wooclap
Un seul mot de passe à retenir : le maître

Un gestionnaire,
pas ta mémoire

Proton Pass l'outil retenu au CEJEF · gratuit · chiffré · suisse
proton.me/fr/pass

Alternatives sérieuses : KeePass · 1Password · Dashlane  —  ce qui ne pardonne pas : le même mot de passe partout.

Pour mercredi prochain

Devoirs

01Créer tes comptes GitHub et JetBrains — tuto : devjs.ch/cours/113/creer-ses-comptes
02Terminer le module 1 HTML sur Nuxy — 7 exercices, environ 45 minutes

Bloqué quelque part ? Message Teams au prof — ne reste pas coincé.

Séance 2

Git & GitHub

Ton code : sauvegardé, historisé, publié.

Le drame que tout le monde connaît
site.html
site-v2.html
site-final.html
site-final-2.html
site-VRAIMENT-final-corrige.html

Git règle ça. Définitivement.

Tout le vocabulaire dont tu as besoin

Quatre mots. C'est tout.

01dépôtton projet, hébergé sur GitHub
02cloneen rapatrier une copie sur ta machine
03commitune version sauvegardée, avec un message
04pushenvoyer tes commits en ligne

clone : une seule fois par projet. commit et push : à chaque séance.

Le cycle de travail — dans WebStorm

Modifier, commit, push

MODIFIERton code COMMITCmd + K PUSHCmd + Maj + K EN LIGNEGitHub Pages

Pas de terminal, pas de branches : ces trois gestes suffisent pour tout le semestre.

GitHub Pages

Ton site.
Une vraie URL.

ton-compte.github.io/ton-depot
Gratuit. En ligne une minute après ton push.

Le rituel — à chaque séance, dès aujourd'hui

Les 5 dernières
minutes

Chaque séance se termine pareil : commit + push.
Antisèche → devjs.ch/cours/113/git-en-4-gestes

GO.

Tout le cours, le plan, les antisèches → devjs.ch/cours/113

01 / 28